@bodil/dom 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bodil/dom",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "DOM and web component tools",
   "homepage": "https://codeberg.org/bodil/dom",
   "repository": {
@@ -59,16 +59,17 @@
     "@bodil/core": "^0.4.9",
     "@bodil/opt": "^0.4.2",
     "@bodil/signal": "^0.3.3",
-    "lit": "^3.3.1",
+    "lit": "^3.3.2",
     "type-fest": "^5.3.1"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.39.2",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
-    "@typescript-eslint/eslint-plugin": "^8.49.0",
-    "@typescript-eslint/parser": "^8.49.0",
-    "@vitest/coverage-v8": "^4.0.15",
+    "@typescript-eslint/eslint-plugin": "^8.51.0",
+    "@typescript-eslint/parser": "^8.51.0",
+    "@vitest/browser-playwright": "^4.0.16",
+    "@vitest/coverage-v8": "^4.0.16",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-jsdoc": "^54.7.0",
@@ -80,7 +81,7 @@
     "typedoc-plugin-extras": "^4.0.1",
     "typedoc-plugin-mdn-links": "^5.0.10",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.15"
+    "vitest": "^4.0.16"
   },
   "prettier": {
     "editorconfig": true,
@@ -106,11 +107,12 @@
   "scripts": {
     "build": "tsc",
     "test": "vitest --run",
+    "test:browser": "vitest --run --browser",
     "check:eslint": "eslint src",
     "check:tsc": "tsc --noEmit",
     "check": "run-p check:tsc check:eslint",
     "doc": "typedoc",
     "doc:readthedocs": "typedoc --out $READTHEDOCS_OUTPUT/html",
-    "prepublish": "tsc"
+    "prepublish": "run-p check test:browser"
   }
 }

package/src/component.test.ts

@@ -1,3 +1,4 @@
+import { sleep } from "@bodil/core/async";
 import type { Signal } from "@bodil/signal";
 import { html } from "lit";
 import { customElement } from "lit/decorators.js";
@@ -63,28 +64,30 @@ test("Component.querySlot", async () => {
 
     await t.updateComplete;
 
-    expect(t.querySlot()).deep.equal([joe, mike]);
-    expect(t.querySlot({ slot: "fixes-the-bug" })).deep.equal([robert]);
+    expect(t.querySlot()).toEqual([joe, mike]);
+    expect(t.querySlot({ slot: "fixes-the-bug" })).toEqual([robert]);
 
     const slot = t.querySlot({ slot: "fixes-the-bug", reactive: true });
     expectTypeOf(slot).toEqualTypeOf<Signal.Computed<Array<Element>>>();
-    expect(slot.get()).deep.equal([robert]);
+    expect(slot.get()).toEqual([robert]);
     joe.slot = "fixes-the-bug"; // for argument's sake
-    expect(slot.get()).deep.equal([joe, robert]);
-    expect(t.querySlot()).deep.equal([mike]);
+    await sleep(1);
+    expect(slot.get()).toEqual([joe, robert]);
+    expect(t.querySlot()).toEqual([mike]);
     robert.removeAttribute("slot");
-    expect(slot.get()).deep.equal([joe]);
-    expect(t.querySlot()).deep.equal([mike, robert]);
+    await sleep(1);
+    expect(slot.get()).toEqual([joe]);
+    expect(t.querySlot()).toEqual([mike, robert]);
 
     const divsByInstance = t.querySlot({ instanceOf: HTMLDivElement });
     expectTypeOf(divsByInstance).toEqualTypeOf<Array<HTMLDivElement>>();
-    expect(divsByInstance).deep.equal([mike, robert]);
+    expect(divsByInstance).toEqual([mike, robert]);
 
     const divsBySelector = t.querySlot({ selector: "div" });
     expectTypeOf(divsBySelector).toEqualTypeOf<Array<HTMLDivElement>>();
-    expect(divsBySelector).deep.equal([mike, robert]);
+    expect(divsBySelector).toEqual([mike, robert]);
 
-    expect(t.querySlot({ selector: "div.robert" })).deep.equal([robert]);
+    expect(t.querySlot({ selector: "div.robert" })).toEqual([robert]);
 
     expectTypeOf(t.querySlot({ nodes: true })).toEqualTypeOf<Array<Node>>();
 });

package/src/component.ts

@@ -16,7 +16,12 @@ import {
 } from "lit";
 import type { Constructor } from "type-fest";
 
-import { attributeConfig, fromAttribute, type AttributeConfig } from "./decorators/attribute";
+import {
+    attributeConfig,
+    fromAttribute,
+    toAttribute,
+    type AttributeConfig,
+} from "./decorators/attribute";
 import { connectedJobs } from "./decorators/connect";
 import { reactiveFields, signalForObject } from "./decorators/reactive";
 import { requiredProperties } from "./decorators/require";
@@ -206,6 +211,23 @@ export abstract class Component
 
         this.#ignoreAttributeUpdates--;
         this.#initialised = false;
+
+        // schedule a sync of all reflecting attributes
+        const reflectingAttributes = (this.constructor as typeof Component).attributeConfig
+            .values()
+            .filter((attr) => attr.reflect)
+            .toArray();
+        if (reflectingAttributes.length > 0) {
+            queueMicrotask(() => {
+                for (const attr of reflectingAttributes) {
+                    const value = toAttribute((this as any)[attr.property], attr.type);
+                    const current = this.getAttribute(attr.name);
+                    if (value !== current) {
+                        this.setAttributeQuietly(attr.name, value);
+                    }
+                }
+            });
+        }
     }
 
     protected connectedCallback() {

package/src/decorators/attribute.test.ts

@@ -4,6 +4,7 @@ import { expect, test } from "vitest";
 import { attribute, Component } from "../component";
 import { Signal } from "@bodil/signal";
 import { attributeGetter, attributeSetter } from "./attribute";
+import { html, nothing } from "lit";
 
 test("@attribute", async () => {
     @customElement("attribute-test-class")
@@ -84,20 +85,19 @@ test("@attribute getter/setter", async () => {
     @customElement("attribute-getter-test-class")
     class AttributeGetterTestClass extends Component {
         #value = "Mike";
-        @attributeGetter get value(): string {
+        @attributeGetter({ reflect: true }) get value(): string {
             return this.#value;
         }
-        @attributeSetter set value(value: string) {
+        @attributeSetter({ reflect: true }) set value(value: string) {
             this.#value = value;
         }
 
         #synced = "Mike";
-        @attributeGetter({ reflect: false }) get synced(): string {
+        @attributeGetter get synced(): string {
             return this.#synced;
         }
-        @attributeSetter({ reflect: false }) set synced(value: string) {
+        @attributeSetter set synced(value: string) {
             this.#synced = value;
-            this.setAttributeQuietly("synced", value);
         }
     }
 
@@ -106,7 +106,7 @@ test("@attribute getter/setter", async () => {
     await t.updateComplete;
 
     expect(t.value).toBe("Mike");
-    expect(t.getAttribute("value")).toBeNull();
+    expect(t.getAttribute("value")).toBe("Mike");
 
     t.setAttribute("value", "Joe");
     expect(t.value).toBe("Joe");
@@ -114,7 +114,7 @@ test("@attribute getter/setter", async () => {
 
     t.value = "Robert";
     expect(t.value).toBe("Robert");
-    expect(t.getAttribute("value")).toBe("Joe");
+    expect(t.getAttribute("value")).toBe("Robert");
 
     expect(t.synced).toBe("Mike");
     expect(t.getAttribute("synced")).toBeNull();
@@ -125,7 +125,7 @@ test("@attribute getter/setter", async () => {
 
     t.synced = "Robert";
     expect(t.synced).toBe("Robert");
-    expect(t.getAttribute("synced")).toBe("Robert");
+    expect(t.getAttribute("synced")).toBe("Joe");
 });
 
 test("@attribute init ordering", async () => {
@@ -160,3 +160,52 @@ test("@attribute init ordering", async () => {
     expect(t.wibble).toBe("Robert");
     expect(t.getAttribute("wibble")).toBe("Robert");
 });
+
+test("subcomponent attributes are initialised properly", async () => {
+    @customElement("subcomp-init-root")
+    class SubcompInitRoot extends Component {
+        render() {
+            return html`
+                <subcomp-init-sub></subcomp-init-sub>
+                <subcomp-init-sub
+                    attr1="Mike"
+                    attr2="Mike"
+                    attr3="Mike"
+                    attr4="Mike"
+                ></subcomp-init-sub>
+            `;
+        }
+    }
+
+    @customElement("subcomp-init-sub")
+    class SubcompInitSub extends Component {
+        @attribute({ reflect: true, reactive: true }) accessor attr1 = "Joe";
+        @attribute({ reflect: true, reactive: false }) accessor attr2 = "Joe";
+        @attribute({ reflect: false, reactive: true }) accessor attr3 = "Joe";
+        @attribute({ reflect: false, reactive: false }) accessor attr4 = "Joe";
+
+        render() {
+            return nothing;
+        }
+    }
+
+    const root = document.createElement("subcomp-init-root") as SubcompInitRoot;
+    document.body.append(root);
+    await root.updateComplete;
+
+    const subs = root.queryAll("subcomp-init-sub") as NodeListOf<SubcompInitSub>;
+    expect(subs.length).toBe(2);
+
+    expect(subs[0].attr1).toBe("Joe");
+    expect(subs[0].attr2).toBe("Joe");
+    expect(subs[0].attr3).toBe("Joe");
+    expect(subs[0].attr4).toBe("Joe");
+    expect(subs[0].outerHTML).toBe(`<subcomp-init-sub attr1="Joe" attr2="Joe"></subcomp-init-sub>`);
+    expect(subs[1].attr1).toBe("Mike");
+    expect(subs[1].attr2).toBe("Mike");
+    expect(subs[1].attr3).toBe("Mike");
+    expect(subs[1].attr4).toBe("Mike");
+    expect(subs[1].outerHTML).toBe(
+        `<subcomp-init-sub attr1="Mike" attr2="Mike" attr3="Mike" attr4="Mike"></subcomp-init-sub>`,
+    );
+});

package/src/decorators/attribute.ts

@@ -241,10 +241,8 @@ export function attribute<C extends Component, T extends string | number | boole
             );
         }
 
-        if (options.reflect) {
-            throw new TypeError(
-                `Getter/setter attributes cannot be declared with reflect: true (on ${JSON.stringify(context.name)})`,
-            );
+        if (context.kind === "setter") {
+            return setter(options, value as ClassSetterDecoratorTarget<C, T>);
         }
     };
 }
@@ -262,6 +260,18 @@ function syncAttribute<C extends Component, T>(
     }
 }
 
+function setter<C extends Component, T>(
+    options: AttributeConfig,
+    setter: ClassSetterDecoratorTarget<C, T>,
+): ClassSetterDecoratorResult<C, T> {
+    if (options.reflect) {
+        return function (this: C, value: T) {
+            setter.call(this, value);
+            syncAttribute(this, options, value);
+        };
+    }
+}
+
 function accessor<C extends Component, T>(
     options: AttributeConfig,
     context: ClassAccessorDecoratorContext<C, T>,
@@ -287,9 +297,6 @@ function accessor<C extends Component, T>(
             },
             init(this: C, value: T): T {
                 initValue = Some(value);
-                if (options.reflect) {
-                    syncAttribute(this, options, value, true);
-                }
                 return value;
             },
         };
@@ -304,11 +311,5 @@ function accessor<C extends Component, T>(
                 syncAttribute(this, options, newValue);
             }
         },
-        init(this: C, value: T): T {
-            if (options.reflect) {
-                syncAttribute(this, options, value, true);
-            }
-            return value;
-        },
     };
 }

package/src/decorators/require.test.ts

@@ -30,27 +30,27 @@ test("@require", async () => {
     expect(inits).toBe(0);
     expect(updates).toBe(0);
     c.bar = "bar";
-    await sleep(1);
+    await sleep(50);
     // foo and bar are both set, should cause an update
     expect(inits).toBe(1);
     expect(updates).toBe(1);
     c.foo = undefined;
-    await sleep(1);
+    await sleep(50);
     // foo has gone undefined, shouldn't update
     expect(inits).toBe(1);
     expect(updates).toBe(1);
     c.foo = "wibble";
-    await sleep(1);
+    await sleep(50);
     // foo has stopped being undefined, should update
     expect(inits).toBe(2);
     expect(updates).toBe(2);
     c.bar = "bar";
-    await sleep(1);
+    await sleep(50);
     // bar has been redeclared with the same value, shouldn't update
     expect(inits).toBe(2);
     expect(updates).toBe(2);
     c.bar = "wibble";
-    await sleep(1);
+    await sleep(50);
     // bar has a new value, should update
     expect(inits).toBe(3);
     expect(updates).toBe(3);