@bodil/dom 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bodil/dom",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "DOM and web component tools",
   "homepage": "https://codeberg.org/bodil/dom",
   "repository": {
@@ -50,6 +50,12 @@
         "types": "./dist/geometry.d.ts",
         "import": "./dist/geometry.js"
       }
+    },
+    "./signal": {
+      "import": {
+        "types": "./dist/signal.d.ts",
+        "import": "./dist/signal.js"
+      }
     }
   },
   "publishConfig": {
@@ -113,6 +119,6 @@
     "check": "run-p check:tsc check:eslint",
     "doc": "typedoc",
     "doc:readthedocs": "typedoc --out $READTHEDOCS_OUTPUT/html",
-    "prepublish": "run-p check test:browser"
+    "prepublish": "run-p check test:browser build"
   }
 }

package/src/index.ts

@@ -8,5 +8,6 @@ import * as css from "./css";
 import * as dom from "./dom";
 import * as event from "./event";
 import * as geometry from "./geometry";
+import * as signal from "./signal";
 
-export { component, css, dom, event, geometry };
+export { component, css, dom, event, geometry, signal };

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(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(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,98 @@
+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();
+        });
+    }
+});
+
+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();
+    }
+}
+
+export type WatchDirectiveFunction = <T>(
+    signal: Signal.State<T> | Signal.Computed<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.
+ */
+export const watch = directive(WatchDirective) as WatchDirectiveFunction;