@bodil/dom 0.1.8 → 0.1.10

package/src/signal.test.ts

@@ -0,0 +1,89 @@
+import { Signal } from "@bodil/signal";
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { expect, test } from "vitest";
+
+import { Component } from "./component";
+import { watch } from "./signal";
+
+test("watch directive", async () => {
+    const counter = Signal.from(1);
+    let renders = 0;
+
+    @customElement("watch-directive-test")
+    class WatchDirectiveTest extends Component {
+        render() {
+            renders++;
+            return html`<p>${watch(counter)}</p>`;
+        }
+    }
+
+    const t = document.createElement("watch-directive-test") as WatchDirectiveTest;
+    document.body.append(t);
+    await t.updateComplete;
+
+    expect(t.query("p")?.innerText).toBe("1");
+    expect(renders).toBe(1);
+
+    // update the counter and yield, it should update immediately.
+    counter.set(2);
+    await Promise.resolve();
+
+    expect(t.query("p")?.innerText).toBe("2");
+    expect(renders).toBe(1);
+
+    // request an update, it should not update immediately on yield
+    // because of the scheduled update
+    t.requestUpdate();
+    counter.set(3);
+    await Promise.resolve();
+
+    expect(t.query("p")?.innerText).toBe("2");
+    expect(renders).toBe(1);
+
+    // wait for the update to complete, it should now be in sync
+    await t.updateComplete;
+    expect(t.query("p")?.innerText).toBe("3");
+    expect(renders).toBe(2);
+});
+
+test("watch directive with mapper function", async () => {
+    const counter = Signal.from(1);
+    let renders = 0;
+
+    @customElement("watch-directive-mapper-test")
+    class WatchDirectiveMapperTest extends Component {
+        render() {
+            renders++;
+            return html`<p>${watch(counter, (i) => i + 1000)}</p>`;
+        }
+    }
+
+    const t = document.createElement("watch-directive-mapper-test") as WatchDirectiveMapperTest;
+    document.body.append(t);
+    await t.updateComplete;
+
+    expect(t.query("p")?.innerText).toBe("1001");
+    expect(renders).toBe(1);
+
+    // update the counter and yield, it should update immediately.
+    counter.set(2);
+    await Promise.resolve();
+
+    expect(t.query("p")?.innerText).toBe("1002");
+    expect(renders).toBe(1);
+
+    // request an update, it should not update immediately on yield
+    // because of the scheduled update
+    t.requestUpdate();
+    counter.set(3);
+    await Promise.resolve();
+
+    expect(t.query("p")?.innerText).toBe("1002");
+    expect(renders).toBe(1);
+
+    // wait for the update to complete, it should now be in sync
+    await t.updateComplete;
+    expect(t.query("p")?.innerText).toBe("1003");
+    expect(renders).toBe(2);
+});

package/src/signal.ts

@@ -0,0 +1,109 @@
+/**
+ * Lit directives for working with signals.
+ * @module
+ */
+
+import { defer } from "@bodil/core/async";
+import { id } from "@bodil/core/fun";
+import { Signal } from "@bodil/signal";
+import { AsyncDirective } from "lit/async-directive.js";
+import { directive, type DirectiveResult, type Part } from "lit/directive.js";
+
+// Most of this is from
+// https://github.com/lit/lit/blob/main/packages/labs/signals/src/lib/watch.ts
+
+import type { Component } from "./component";
+
+let effectsPending = false;
+const hostlessWatcher = new Signal.subtle.Watcher(() => {
+    if (!effectsPending) {
+        effectsPending = true;
+        defer(() => {
+            effectsPending = false;
+            for (const signal of hostlessWatcher.getPending()) {
+                signal.get();
+            }
+            hostlessWatcher.watch();
+        });
+    }
+});
+
+/** @internal */
+export class WatchDirective<T> extends AsyncDirective {
+    #host?: Component;
+    #signal?: Signal.State<T> | Signal.Computed<T>;
+    #mapper: (value: T) => unknown = id;
+    #watcher?: typeof hostlessWatcher;
+    #computed: Signal.Computed<unknown> | undefined;
+
+    #watch() {
+        if (this.#watcher !== undefined) {
+            return;
+        }
+        this.#computed = new Signal.Computed(() => {
+            const value = this.#signal === undefined ? undefined : this.#mapper(this.#signal.get());
+            if (this.#host?.isUpdatePending === true) {
+                return;
+            }
+            this.setValue(value);
+            return value;
+        });
+        this.#watcher = hostlessWatcher;
+        this.#watcher.watch(this.#computed);
+        Signal.subtle.untrack(() => this.#computed?.get());
+    }
+
+    #unwatch() {
+        if (this.#watcher !== undefined) {
+            this.#watcher.unwatch(this.#computed!);
+            this.#watcher = undefined;
+        }
+    }
+
+    render(signal: Signal.State<T> | Signal.Computed<T>, mapFn?: (value: T) => unknown): unknown {
+        return Signal.subtle.untrack(() =>
+            mapFn === undefined ? signal.get() : mapFn(signal.get()),
+        );
+    }
+
+    override update(
+        part: Part,
+        [signal, mapFn]: [
+            signal: Signal.State<T> | Signal.Computed<T>,
+            mapFn?: (value: T) => unknown,
+        ],
+    ): unknown {
+        this.#host ??= part.options?.host as Component;
+        if (signal !== this.#signal && this.#signal !== undefined) {
+            this.#unwatch();
+        }
+        this.#signal = signal;
+        this.#mapper = mapFn ?? id;
+        this.#watch();
+        return Signal.subtle.untrack(() => this.#mapper(this.#signal!.get()));
+    }
+
+    protected override disconnected(): void {
+        this.#unwatch();
+    }
+
+    protected override reconnected(): void {
+        this.#watch();
+    }
+}
+
+/**
+ * @internal
+ * @ignore
+ */
+export type WatchDirectiveFunction = <T>(
+    signal: Signal.Any<T>,
+    mapFn?: (value: T) => unknown,
+) => DirectiveResult<typeof WatchDirective<T>>;
+
+/**
+ * Render a signal and subscribe to it, updating the part when the signal
+ * changes independently of the host component.
+ * @function
+ */
+export const watch = directive(WatchDirective) as WatchDirectiveFunction;