@bodil/dom 0.1.0

package/src/decorators/attribute.test.ts

@@ -0,0 +1,77 @@
+import { customElement } from "lit/decorators.js";
+import { expect, test } from "vitest";
+
+import { attribute, Component } from "../component";
+import { Signal } from "@bodil/signal";
+
+test("@attribute", async () => {
+    @customElement("attribute-test-class")
+    class AttributeTestClass extends Component {
+        @attribute accessor wibble: string | undefined = "Joe";
+        @attribute({ type: Number }) accessor wobble: number | undefined = 1;
+        @attribute({ type: Boolean }) accessor noMeansNo: boolean | undefined = false;
+        @attribute({ name: "wolp", reactive: false }) accessor welp: string | undefined = "Joe";
+        @attribute({ reflect: false }) accessor hide: string | undefined = "no";
+    }
+
+    const t = document.createElement("attribute-test-class") as AttributeTestClass;
+    document.body.append(t);
+    await t.updateComplete;
+
+    const wibble = Signal.computed(() => t.wibble);
+    expect(t.wibble).toBe("Joe");
+    expect(t.getAttribute("wibble")).toBe("Joe");
+    expect(wibble.get()).toBe("Joe");
+    t.wibble = "Mike";
+    expect(t.wibble).toBe("Mike");
+    expect(t.getAttribute("wibble")).toBe("Mike");
+    expect(wibble.get()).toBe("Mike");
+    t.removeAttribute("wibble");
+    expect(t.wibble).toBeUndefined();
+    expect(t.getAttribute("wibble")).toBeNull();
+    expect(wibble.get()).toBe(undefined);
+    t.setAttribute("wibble", "Robert");
+    expect(t.wibble).toBe("Robert");
+    expect(t.getAttribute("wibble")).toBe("Robert");
+    expect(wibble.get()).toBe("Robert");
+    t.wibble = undefined;
+    expect(t.wibble).toBeUndefined();
+    expect(t.getAttribute("wibble")).toBeNull();
+    expect(wibble.get()).toBe(undefined);
+
+    expect(t.wobble).toBe(1);
+    expect(t.getAttribute("wobble")).toBe("1");
+    t.wobble = 2;
+    expect(t.wobble).toBe(2);
+    expect(t.getAttribute("wobble")).toBe("2");
+    t.setAttribute("wobble", "3");
+    expect(t.wobble).toBe(3);
+    expect(t.getAttribute("wobble")).toBe("3");
+
+    expect(t.noMeansNo).toBe(false);
+    expect(t.getAttribute("no-means-no")).toBeNull();
+    t.noMeansNo = true;
+    expect(t.noMeansNo).toBe(true);
+    expect(t.getAttribute("no-means-no")).toBe("");
+    t.removeAttribute("no-means-no");
+    expect(t.noMeansNo).toBe(false);
+    expect(t.getAttribute("no-means-no")).toBeNull();
+    t.setAttribute("no-means-no", "come and see the violence inherent in the system!");
+    expect(t.noMeansNo).toBe(true);
+    expect(t.getAttribute("no-means-no")).toBe("");
+
+    const welp = Signal.computed(() => t.welp);
+    expect(t.welp).toBe("Joe");
+    expect(t.getAttribute("wolp")).toBe("Joe");
+    expect(welp.get()).toBe("Joe");
+    t.welp = "Robert";
+    expect(t.welp).toBe("Robert");
+    expect(t.getAttribute("wolp")).toBe("Robert");
+    expect(welp.get()).toBe("Joe");
+
+    expect(t.hide).toBe("no");
+    expect(t.getAttribute("hide")).toBeNull();
+    t.setAttribute("hide", "yes");
+    expect(t.hide).toBe("yes");
+    expect(t.getAttribute("hide")).toBe("yes");
+});

package/src/decorators/attribute.ts

@@ -0,0 +1,197 @@
+/* eslint-disable @typescript-eslint/unified-signatures */
+
+import { isNullish, unreachable } from "@bodil/core/assert";
+import { Signal } from "@bodil/signal";
+
+import type { Component } from "../component";
+import { signalForObject } from "./reactive";
+
+export const attributeConfig = Symbol("attributeConfig");
+
+export type AttributeType = typeof String | typeof Number | typeof Boolean;
+
+export type AttributeOptions = {
+    name: string | undefined;
+    reflect: boolean;
+    reactive: boolean;
+};
+
+export type AttributeConfig = {
+    type: AttributeType | undefined;
+    property: string;
+} & AttributeOptions;
+
+export function toAttribute(value: unknown, type: AttributeType): string | null {
+    if (isNullish(value)) {
+        return null;
+    }
+    switch (type) {
+        case Number:
+            return `${value as number}`;
+        case Boolean:
+            return (value as boolean) ? "" : null;
+        case String:
+            return value as string;
+        default:
+            unreachable();
+    }
+}
+
+export function fromAttribute(value: string | null, type: typeof Number): number | undefined;
+export function fromAttribute(value: string | null, type: typeof Boolean): boolean;
+export function fromAttribute(value: string | null, type: typeof String): string | undefined;
+export function fromAttribute(
+    value: string | null,
+    type: AttributeType,
+): string | number | boolean | undefined;
+export function fromAttribute(
+    value: string | null,
+    type: AttributeType,
+): string | number | boolean | undefined {
+    switch (type) {
+        case Number: {
+            const num = value === null ? undefined : Number(value);
+            if (num !== undefined && Number.isNaN(num)) {
+                throw new TypeError(
+                    `numeric attribute value ${JSON.stringify(value)} parsed as NaN`,
+                );
+            }
+            return num;
+        }
+        case Boolean:
+            return value !== null;
+        case String:
+            return value ?? undefined;
+        default:
+            unreachable();
+    }
+}
+
+export function detectAttributeType(value: unknown): AttributeType | undefined {
+    switch (typeof value) {
+        case "string":
+            return String;
+        case "number":
+            return Number;
+        case "boolean":
+            return Boolean;
+        default:
+            return undefined;
+    }
+}
+
+function toKebabCase(s: string): string {
+    return s.replace(/((?<=[a-z\d])[A-Z]|(?<=[A-Z\d])[A-Z](?=[a-z]))/g, "-$1").toLowerCase();
+}
+
+// Accessor with number type
+export function attribute<C extends Component, T extends number | undefined>(
+    options: Partial<AttributeOptions> & { type: typeof Number },
+): (
+    value: ClassAccessorDecoratorTarget<C, T>,
+    context: ClassAccessorDecoratorContext<C, T>,
+) => ClassAccessorDecoratorResult<C, T>;
+
+// Accessor with boolean type
+export function attribute<C extends Component, T extends boolean | undefined>(
+    options: Partial<AttributeOptions> & { type: typeof Boolean },
+): (
+    value: ClassAccessorDecoratorTarget<C, T>,
+    context: ClassAccessorDecoratorContext<C, T>,
+) => ClassAccessorDecoratorResult<C, T>;
+
+// Accessor with string type
+export function attribute<C extends Component, T extends string | undefined>(
+    options: Partial<AttributeOptions>,
+): (
+    value: ClassAccessorDecoratorTarget<C, T>,
+    context: ClassAccessorDecoratorContext<C, T>,
+) => ClassAccessorDecoratorResult<C, T>;
+
+// Accessor with no options
+export function attribute<C extends Component, T extends string | undefined>(
+    value: ClassAccessorDecoratorTarget<C, T>,
+    context: ClassAccessorDecoratorContext<C, T>,
+): ClassAccessorDecoratorResult<C, T>;
+
+export function attribute<C extends Component, T extends string | number | boolean | undefined>(
+    valueOrOptions?: ClassAccessorDecoratorTarget<C, T> | Partial<AttributeOptions>,
+    context?: ClassAccessorDecoratorContext<C, T>,
+):
+    | ClassAccessorDecoratorResult<C, T>
+    | ((
+          value: ClassAccessorDecoratorTarget<C, T>,
+          context: ClassAccessorDecoratorContext<C, T>,
+      ) => ClassAccessorDecoratorResult<C, T>) {
+    if (context !== undefined) {
+        return attribute({})(valueOrOptions as any, context as any) as ClassAccessorDecoratorResult<
+            C,
+            T
+        >;
+    }
+
+    return (value, context) => {
+        if (typeof context.name !== "string") {
+            throw new TypeError(
+                `Can't declare a ${typeof context.name} as an attribute (${JSON.stringify(context.name)})`,
+            );
+        }
+
+        const options: AttributeConfig = {
+            ...{
+                type: String,
+                property: context.name,
+                reactive: true,
+                reflect: true,
+            },
+            ...((valueOrOptions as AttributeConfig) ?? {}),
+        };
+        let attrs = context.metadata[attributeConfig] as Map<string, AttributeConfig>;
+        if (attrs === undefined) {
+            context.metadata[attributeConfig] = attrs = new Map();
+        }
+        const key = options.name ?? toKebabCase(context.name);
+        attrs.set(key, options);
+
+        if (options.reactive) {
+            const getSig = (obj: object) =>
+                signalForObject(obj, context.name, () =>
+                    Signal((value as ClassAccessorDecoratorTarget<unknown, T>).get.call(obj), {
+                        equals: Object.is,
+                    }),
+                ) as Signal.State<T>;
+            return {
+                get(): T {
+                    return getSig(this).get();
+                },
+                set(newValue: T) {
+                    options.type ??= detectAttributeType(newValue);
+                    getSig(this).set(newValue);
+                    if (options.reflect) {
+                        (this as any).syncAttribute(key);
+                    }
+                },
+                init(newValue: T): T {
+                    options.type ??= detectAttributeType(newValue);
+                    return newValue;
+                },
+            } as ClassAccessorDecoratorResult<C, T>;
+        }
+        return {
+            get(): T {
+                return value.get.call(this);
+            },
+            set(newValue: T) {
+                options.type ??= detectAttributeType(newValue);
+                value.set.call(this, newValue);
+                if (options.reflect) {
+                    (this as any).syncAttribute(key);
+                }
+            },
+            init(newValue: T): T {
+                options.type ??= detectAttributeType(newValue);
+                return newValue;
+            },
+        } as ClassAccessorDecoratorResult<C, T>;
+    };
+}

package/src/decorators/connect.test.ts

@@ -0,0 +1,119 @@
+import { sleep } from "@bodil/core/async";
+import { Signal } from "@bodil/signal";
+import { customElement } from "lit/decorators.js";
+import { expect, test } from "vitest";
+
+import { Component, connect, connectEffect } from "../component";
+import type { ConnectFunction } from "./connect";
+
+test("@connect", () => {
+    let methodConnected = 0,
+        methodDisconnected = 0;
+    let fieldConnected = 0,
+        fieldDisconnected = 0;
+
+    @customElement("connected-test-class")
+    class ConnectedTestClass extends Component {
+        @connect onConnected() {
+            methodConnected++;
+            return () => {
+                methodDisconnected++;
+            };
+        }
+
+        @connect field: ConnectFunction = () => {
+            fieldConnected++;
+            return () => {
+                fieldDisconnected++;
+            };
+        };
+    }
+
+    const c = document.createElement("connected-test-class") as ConnectedTestClass;
+    expect(methodConnected).toBe(0);
+    expect(methodDisconnected).toBe(0);
+    expect(fieldConnected).toEqual(methodConnected);
+    expect(fieldDisconnected).toEqual(methodDisconnected);
+    document.body.append(c);
+    expect(methodConnected).toBe(1);
+    expect(methodDisconnected).toBe(0);
+    expect(fieldConnected).toEqual(methodConnected);
+    expect(fieldDisconnected).toEqual(methodDisconnected);
+    c.remove();
+    expect(methodConnected).toBe(1);
+    expect(methodDisconnected).toBe(1);
+    expect(fieldConnected).toEqual(methodConnected);
+    expect(fieldDisconnected).toEqual(methodDisconnected);
+    document.body.append(c);
+    expect(methodConnected).toBe(2);
+    expect(methodDisconnected).toBe(1);
+    expect(fieldConnected).toEqual(methodConnected);
+    expect(fieldDisconnected).toEqual(methodDisconnected);
+    c.remove();
+    expect(methodConnected).toBe(2);
+    expect(methodDisconnected).toBe(2);
+    expect(fieldConnected).toEqual(methodConnected);
+    expect(fieldDisconnected).toEqual(methodDisconnected);
+});
+
+test("@connectEffect", async () => {
+    let methodRun = 0,
+        methodDisposed = 0;
+    let fieldRun = 0,
+        fieldDisposed = 0;
+    const signal = Signal(1);
+
+    @customElement("connect-effect-test-class")
+    class ConnectEffectTestClass extends Component {
+        @connectEffect onConnected() {
+            methodRun += signal.get();
+            return () => {
+                methodDisposed++;
+            };
+        }
+
+        @connectEffect field: ConnectFunction = () => {
+            fieldRun += signal.get();
+            return () => {
+                fieldDisposed++;
+            };
+        };
+    }
+
+    const c = document.createElement("connect-effect-test-class") as ConnectEffectTestClass;
+    expect(methodRun).toBe(0);
+    expect(methodDisposed).toBe(0);
+    expect(fieldRun).toEqual(methodRun);
+    expect(fieldDisposed).toEqual(methodDisposed);
+    document.body.append(c);
+    await c.updateComplete;
+    expect(methodRun).toBe(1);
+    expect(methodDisposed).toBe(0);
+    expect(fieldRun).toEqual(methodRun);
+    expect(fieldDisposed).toEqual(methodDisposed);
+    c.remove();
+    expect(methodRun).toBe(1);
+    expect(methodDisposed).toBe(1);
+    expect(fieldRun).toEqual(methodRun);
+    expect(fieldDisposed).toEqual(methodDisposed);
+    document.body.append(c);
+    expect(methodRun).toBe(2);
+    expect(methodDisposed).toBe(1);
+    expect(fieldRun).toEqual(methodRun);
+    expect(fieldDisposed).toEqual(methodDisposed);
+    signal.set(2);
+    // wait for the effect to run
+    await sleep(1);
+    // run should be bumped by 2, the new value of the signal, and
+    // disposed should be bumped by 1 because the previous effect is
+    // disposed.
+    expect(methodRun).toBe(4);
+    expect(methodDisposed).toBe(2);
+    expect(fieldRun).toEqual(methodRun);
+    expect(fieldDisposed).toEqual(methodDisposed);
+    c.remove();
+    expect(methodRun).toBe(4);
+    expect(methodDisposed).toBe(3);
+    expect(fieldRun).toEqual(methodRun);
+    expect(fieldDisposed).toEqual(methodDisposed);
+});

package/src/decorators/connect.ts

@@ -0,0 +1,85 @@
+import type { Disposifiable } from "@bodil/core/disposable";
+import { Signal } from "@bodil/signal";
+
+import type { Component } from "../component";
+
+export type ConnectFunctionReturnValue =
+    | Disposifiable
+    | Iterable<Disposifiable | undefined>
+    | undefined
+    | void;
+
+export type ConnectFunction = () => ConnectFunctionReturnValue;
+
+const connectedCache = new WeakMap<Component, Set<ConnectFunction>>();
+
+function addConnectedJob(obj: Component, job: ConnectFunction) {
+    let jobs = connectedCache.get(obj);
+    if (jobs === undefined) {
+        jobs = new Set();
+        connectedCache.set(obj, jobs);
+    }
+    jobs.add(job);
+}
+
+export function connectedJobs(obj: Component): Iterable<ConnectFunction> {
+    return connectedCache.get(obj) ?? [];
+}
+
+export function connect<C extends Component>(
+    value: ConnectFunction,
+    context: ClassMethodDecoratorContext<C, ConnectFunction>,
+): undefined;
+export function connect<C extends Component>(
+    value: undefined,
+    context: ClassFieldDecoratorContext<C, ConnectFunction>,
+): (value: ConnectFunction) => ConnectFunction;
+export function connect<C extends Component>(
+    value: ConnectFunction | undefined,
+    context:
+        | ClassMethodDecoratorContext<C, ConnectFunction>
+        | ClassFieldDecoratorContext<C, ConnectFunction>,
+): ((value: ConnectFunction) => void) | undefined {
+    switch (context.kind) {
+        case "method":
+            context.addInitializer(function (this: C) {
+                addConnectedJob(this, value!.bind(this));
+            });
+            return;
+        case "field":
+            return function (this: C, value: ConnectFunction) {
+                addConnectedJob(this, value.bind(this));
+            };
+    }
+}
+
+export function connectEffect<C extends Component>(
+    value: ConnectFunction,
+    context: ClassMethodDecoratorContext<C, ConnectFunction>,
+): undefined;
+export function connectEffect<C extends Component>(
+    value: undefined,
+    context: ClassFieldDecoratorContext<C, ConnectFunction>,
+): (value: ConnectFunction) => ConnectFunction;
+export function connectEffect<C extends Component>(
+    value: ConnectFunction | undefined,
+    context:
+        | ClassMethodDecoratorContext<C, ConnectFunction>
+        | ClassFieldDecoratorContext<C, ConnectFunction>,
+): ((value: ConnectFunction) => void) | undefined {
+    switch (context.kind) {
+        case "method":
+            context.addInitializer(function (this: C) {
+                addConnectedJob(this, function (this: Component) {
+                    return Signal.effect(value!.bind(this) as any);
+                });
+            });
+            return;
+        case "field":
+            return function (this: C, value: ConnectFunction) {
+                addConnectedJob(this, function (this: Component) {
+                    return Signal.effect(value.bind(this) as any);
+                });
+            };
+    }
+}

package/src/decorators/reactive.test.ts

@@ -0,0 +1,45 @@
+import { Signal } from "@bodil/signal";
+import { expect, test } from "vitest";
+
+import { Component, reactive } from "../component";
+import { customElement } from "lit/decorators.js";
+
+test("@reactive", () => {
+    const name = Signal("Joe");
+    class ReactiveTestClass {
+        @reactive get name(): string {
+            return name.get();
+        }
+
+        @reactive accessor counter = 0;
+    }
+
+    const instance = new ReactiveTestClass();
+
+    expect(instance.name).toBe("Joe");
+    name.set("Robert");
+    expect(instance.name).toBe("Robert");
+
+    const counter = Signal.computed(() => instance.counter);
+    expect(counter.get()).toBe(0);
+    instance.counter += 5;
+    expect(counter.get()).toBe(5);
+});
+
+test("@reactive Component fields", () => {
+    @customElement("reactive-test-class")
+    class ReactiveTestClass extends Component {
+        @reactive name?: string;
+    }
+
+    // const instance = new ReactiveTestClass();
+    const instance = document.createElement("reactive-test-class") as ReactiveTestClass;
+    instance.$signal("name");
+
+    const name = Signal.computed(() => instance.name);
+    expect(instance.name).toBeUndefined();
+    expect(name.get()).toBeUndefined();
+    instance.name = "Joe";
+    expect(instance.name).toBe("Joe");
+    expect(name.get()).toBe("Joe");
+});

package/src/decorators/reactive.ts

@@ -0,0 +1,80 @@
+import { Signal } from "@bodil/signal";
+
+import type { Component } from "../component";
+
+export const reactiveFields = Symbol("reactiveFields");
+
+const signalCache = new WeakMap<object, Record<PropertyKey, Signal<unknown>>>();
+
+export function signalForObject(
+    obj: object,
+    key: string | symbol,
+    createSignal: () => Signal<unknown>,
+): Signal<unknown> {
+    let sigs = signalCache.get(obj);
+    if (sigs === undefined) {
+        sigs = {};
+        signalCache.set(obj, sigs);
+    }
+    if (Object.hasOwn(sigs, key)) {
+        return sigs[key];
+    }
+    const sig = createSignal();
+    sigs[key] = sig;
+    return sig;
+}
+
+export function reactive<C extends object, T>(
+    value: ClassAccessorDecoratorTarget<C, T>,
+    context: ClassAccessorDecoratorContext<C, T>,
+): ClassAccessorDecoratorResult<C, T>;
+export function reactive<C extends object, T>(
+    value: () => T,
+    context: ClassGetterDecoratorContext<C, T>,
+): () => T;
+export function reactive<C extends Component, T>(
+    value: undefined,
+    context: ClassFieldDecoratorContext<C, T>,
+): undefined;
+export function reactive<C extends object, T>(
+    value: ClassAccessorDecoratorTarget<C, T> | (() => T) | undefined,
+    context:
+        | ClassAccessorDecoratorContext<C, T>
+        | ClassGetterDecoratorContext<C, T>
+        | ClassFieldDecoratorContext<C, T>,
+): ClassAccessorDecoratorResult<C, T> | ((this: C) => T) | undefined {
+    switch (context.kind) {
+        case "accessor": {
+            const getSig = (obj: object) =>
+                signalForObject(obj, context.name, () =>
+                    Signal((value as ClassAccessorDecoratorTarget<unknown, T>).get.call(obj), {
+                        equals: Object.is,
+                    }),
+                ) as Signal.State<T>;
+            return {
+                get() {
+                    return getSig(this).get();
+                },
+                set(value: T) {
+                    getSig(this).set(value);
+                },
+            };
+        }
+
+        case "getter": {
+            const getSig = (obj: object) =>
+                signalForObject(obj, context.name, () =>
+                    Signal.computed(() => (value as () => T).call(obj), { equals: Object.is }),
+                );
+            return function get(this: C) {
+                return getSig(this).get() as T;
+            };
+        }
+
+        case "field": {
+            context.metadata[reactiveFields] ??= new Set<string | symbol>();
+            (context.metadata[reactiveFields] as Set<string | symbol>).add(context.name);
+            return undefined;
+        }
+    }
+}

package/src/decorators/require.test.ts

@@ -0,0 +1,57 @@
+import { sleep } from "@bodil/core/async";
+import { customElement } from "lit/decorators.js";
+import { expect, test } from "vitest";
+
+import { attribute, Component, reactive, require } from "../component";
+
+test("@require", async () => {
+    let inits = 0,
+        updates = 0;
+
+    @customElement("require-test-class")
+    class RequireTestClass extends Component {
+        @require @reactive foo?: string;
+        @require @attribute accessor bar: string | undefined;
+
+        protected override initialised() {
+            inits++;
+        }
+
+        protected override updated() {
+            updates++;
+        }
+    }
+
+    const c = document.createElement("require-test-class") as RequireTestClass;
+    c.foo = "foo";
+    document.body.append(c);
+    await sleep(1);
+    // no updates yet when only foo is set
+    expect(inits).toBe(0);
+    expect(updates).toBe(0);
+    c.bar = "bar";
+    await sleep(1);
+    // foo and bar are both set, should cause an update
+    expect(inits).toBe(1);
+    expect(updates).toBe(1);
+    c.foo = undefined;
+    await sleep(1);
+    // foo has gone undefined, shouldn't update
+    expect(inits).toBe(1);
+    expect(updates).toBe(1);
+    c.foo = "wibble";
+    await sleep(1);
+    // foo has stopped being undefined, should update
+    expect(inits).toBe(2);
+    expect(updates).toBe(2);
+    c.bar = "bar";
+    await sleep(1);
+    // 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);
+    // bar has a new value, should update
+    expect(inits).toBe(3);
+    expect(updates).toBe(3);
+});

package/src/decorators/require.ts

@@ -0,0 +1,11 @@
+import type { Component } from "../component";
+
+export const requiredProperties = Symbol("requiredProperties");
+
+export function require<C extends Component, T>(
+    _value: unknown,
+    context: ClassFieldDecoratorContext<C, T> | ClassAccessorDecoratorContext<C, T>,
+): undefined {
+    context.metadata[requiredProperties] ??= new Set();
+    (context.metadata[requiredProperties] as Set<string | symbol>).add(context.name);
+}