From 3689f2f024168f1397d533c8370246694e66f7ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= Date: Sat, 14 Dec 2024 11:56:30 -0800 Subject: [PATCH] use createRenderRoot instead of firstUpdated --- src/folk-base-set.ts | 8 +++++--- src/folk-event-propagator.ts | 9 +++++---- src/folk-hull.ts | 8 +++++--- src/folk-ink.ts | 8 +++++--- src/folk-map.ts | 8 +++++--- src/folk-rope.ts | 8 +++++--- src/folk-space-projector.ts | 8 +++++--- src/folk-space-radial.ts | 8 +++++--- src/folk-space.ts | 10 +++++----- 9 files changed, 45 insertions(+), 30 deletions(-) diff --git a/src/folk-base-set.ts b/src/folk-base-set.ts index d1a9d1e..5598fe9 100644 --- a/src/folk-base-set.ts +++ b/src/folk-base-set.ts @@ -36,12 +36,14 @@ export class FolkBaseSet extends FolkElement { #slot = document.createElement('slot'); - override firstUpdated(changedProperties: PropertyValues) { - super.firstUpdated(changedProperties); + override createRenderRoot() { + const root = super.createRenderRoot(); - this.renderRoot.append(this.#slot); + root.append(this.#slot); this.#slot.addEventListener('slotchange', this.#onSlotchange); + + return root; } override willUpdate(changedProperties: PropertyValues) { diff --git a/src/folk-event-propagator.ts b/src/folk-event-propagator.ts index dddcd48..2e868be 100644 --- a/src/folk-event-propagator.ts +++ b/src/folk-event-propagator.ts @@ -51,8 +51,8 @@ export class FolkEventPropagator extends FolkRope { #container = document.createElement('div'); #hasError = false; - override firstUpdated(changedProperties: PropertyValues): void { - super.firstUpdated(changedProperties); + override createRenderRoot() { + const root = super.createRenderRoot(); this.#container.className = 'input-container'; this.#triggerTextarea.className = 'trigger'; @@ -76,9 +76,10 @@ export class FolkEventPropagator extends FolkRope { this.#expressionTextarea.value = this.expression; this.#container.append(this.#triggerTextarea, this.#expressionTextarea); - this.renderRoot.append(this.#container); - this.#initializePropagator(); + root.append(this.#container); + + return root; } override updated(changedProperties: PropertyValues): void { diff --git a/src/folk-hull.ts b/src/folk-hull.ts index 46a1b60..2d25564 100644 --- a/src/folk-hull.ts +++ b/src/folk-hull.ts @@ -31,12 +31,14 @@ export class FolkHull extends FolkBaseSet { #hullEl = document.createElement('div'); - override firstUpdated(changedProperties: PropertyValues): void { - super.firstUpdated(changedProperties); + override createRenderRoot() { + const root = super.createRenderRoot(); this.#hullEl.id = 'hull'; - this.renderRoot.prepend(this.#hullEl); + root.prepend(this.#hullEl); + + return root; } override update(changedProperties: PropertyValues) { diff --git a/src/folk-ink.ts b/src/folk-ink.ts index e8aae3f..5dfa215 100644 --- a/src/folk-ink.ts +++ b/src/folk-ink.ts @@ -54,11 +54,13 @@ export class FolkInk extends FolkElement { #path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); #tracingPromise: PromiseWithResolvers | null = null; - override firstUpdated(changedProperties: PropertyValues): void { - super.firstUpdated(changedProperties); + override createRenderRoot() { + const root = super.createRenderRoot(); this.#svg.appendChild(this.#path); - this.renderRoot.appendChild(this.#svg); + + root.appendChild(this.#svg); + return root; } getPathBox() { diff --git a/src/folk-map.ts b/src/folk-map.ts index 90d876b..e106687 100644 --- a/src/folk-map.ts +++ b/src/folk-map.ts @@ -30,10 +30,10 @@ export class FolkMap extends FolkElement { #container = document.createElement('div'); #map = map(this.#container); - override firstUpdated(changedProperties: PropertyValues): void { - super.firstUpdated(changedProperties); + override createRenderRoot() { + const root = super.createRenderRoot(); - this.renderRoot.appendChild(this.#container); + root.appendChild(this.#container); this.#map.addLayer( tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { @@ -46,6 +46,8 @@ export class FolkMap extends FolkElement { (this.getAttribute('coordinates') || '0, 0').split(',').map(Number) as LatLngExpression, Number(this.getAttribute('zoom') || 13) ); + + return root; } connectedCallback(): void { diff --git a/src/folk-rope.ts b/src/folk-rope.ts index 971572b..dae91e6 100644 --- a/src/folk-rope.ts +++ b/src/folk-rope.ts @@ -63,12 +63,14 @@ export class FolkRope extends FolkBaseConnection implements AnimationFrameContro @property({ type: Object }) gravity = { x: 0, y: 3000 }; - override firstUpdated(changedProperties: PropertyValues): void { - super.firstUpdated(changedProperties); + override createRenderRoot() { + const root = super.createRenderRoot(); this.#svg.append(this.#path, this.#path2); - this.renderRoot.appendChild(this.#svg); + root.appendChild(this.#svg); + + return root; } tick() { diff --git a/src/folk-space-projector.ts b/src/folk-space-projector.ts index 7110d43..572e4d1 100644 --- a/src/folk-space-projector.ts +++ b/src/folk-space-projector.ts @@ -25,12 +25,14 @@ export class FolkSpaceProjector extends FolkBaseSet { #spreadsheet = document.createElement('folk-spreadsheet'); - override firstUpdated(changedProperties: PropertyValues): void { - super.firstUpdated(changedProperties); + override createRenderRoot() { + const root = super.createRenderRoot(); this.#spreadsheet.style.setProperty('--cell-width', '50px'); - this.renderRoot.append(this.#spreadsheet); + root.append(this.#spreadsheet); + + return root; } connectedCallback(): void { diff --git a/src/folk-space-radial.ts b/src/folk-space-radial.ts index c297b35..e6cbd01 100644 --- a/src/folk-space-radial.ts +++ b/src/folk-space-radial.ts @@ -34,12 +34,12 @@ export class FolkSpaceRadial extends FolkBaseSet { #centerPoint: HTMLDivElement | null = null; - override firstUpdated(changedProperties: PropertyValues) { - super.firstUpdated(changedProperties); + override createRenderRoot() { + const root = super.createRenderRoot(); this.#centerPoint = document.createElement('div'); this.#centerPoint.className = 'center-point'; - this.renderRoot.appendChild(this.#centerPoint); + root.appendChild(this.#centerPoint); // Add transform listeners to source elements this.sourceElements.forEach((element) => { @@ -47,6 +47,8 @@ export class FolkSpaceRadial extends FolkBaseSet { element.addEventListener('transform', this.#onTransform); } }); + + return root; } protected override updated(changedProperties: PropertyValues) { diff --git a/src/folk-space.ts b/src/folk-space.ts index 4434a93..a070562 100644 --- a/src/folk-space.ts +++ b/src/folk-space.ts @@ -49,12 +49,10 @@ export class FolkSpace extends FolkElement { } `; - override firstUpdated(changedProperties: PropertyValues): void { - super.firstUpdated(changedProperties); + override createRenderRoot() { + const root = super.createRenderRoot() as ShadowRoot; - if (!(this.renderRoot instanceof ShadowRoot)) return; - - this.renderRoot.setHTMLUnsafe(html` + root.setHTMLUnsafe(html`
@@ -64,6 +62,8 @@ export class FolkSpace extends FolkElement {
`); + + return root; } transition() {