@bodil/dom 0.1.8 → 0.1.9

package/dist/index.d.ts

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

package/dist/index.js

@@ -7,5 +7,6 @@ import * as css from "./css";
 import * as dom from "./dom";
 import * as event from "./event";
 import * as geometry from "./geometry";
-export { component, css, dom, event, geometry };
+import * as signal from "./signal";
+export { component, css, dom, event, geometry, signal };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,SAAS,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,GAAG,MAAM,OAAO,CAAC;AAC7B,OAAO,KAAK,GAAG,MAAM,OAAO,CAAC;AAC7B,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,SAAS,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,GAAG,MAAM,OAAO,CAAC;AAC7B,OAAO,KAAK,GAAG,MAAM,OAAO,CAAC;AAC7B,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;AACvC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC"}

package/dist/signal.d.ts

@@ -0,0 +1,20 @@
+import { Signal } from "@bodil/signal";
+import { AsyncDirective } from "lit/async-directive.js";
+import { type DirectiveResult, type Part } from "lit/directive.js";
+declare class WatchDirective<T> extends AsyncDirective {
+    #private;
+    render(signal: Signal.State<T> | Signal.Computed<T>, mapFn?: (value: T) => unknown): unknown;
+    update(part: Part, [signal, mapFn]: [
+        signal: Signal.State<T> | Signal.Computed<T>,
+        mapFn?: (value: T) => unknown
+    ]): unknown;
+    protected disconnected(): void;
+    protected reconnected(): void;
+}
+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 declare const watch: WatchDirectiveFunction;
+export {};

package/dist/signal.js

@@ -0,0 +1,72 @@
+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 } from "lit/directive.js";
+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 extends AsyncDirective {
+    #host;
+    #signal;
+    #mapper = id;
+    #watcher;
+    #computed;
+    #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, mapFn) {
+        return Signal.subtle.untrack(() => mapFn === undefined ? signal.get() : mapFn(signal.get()));
+    }
+    update(part, [signal, mapFn]) {
+        this.#host ??= part.options?.host;
+        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()));
+    }
+    disconnected() {
+        this.#unwatch();
+    }
+    reconnected() {
+        this.#watch();
+    }
+}
+/**
+ * Render a signal and subscribe to it, updating the part when the signal
+ * changes independently of the host component.
+ */
+export const watch = directive(WatchDirective);
+//# sourceMappingURL=signal.js.map

package/dist/signal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"signal.js","sourceRoot":"","sources":["../src/signal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAmC,MAAM,kBAAkB,CAAC;AAO9E,IAAI,cAAc,GAAG,KAAK,CAAC;AAC3B,MAAM,eAAe,GAAG,IAAI,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE;IACnD,IAAI,CAAC,cAAc,EAAE,CAAC;QAClB,cAAc,GAAG,IAAI,CAAC;QACtB,KAAK,CAAC,GAAG,EAAE;YACP,cAAc,GAAG,KAAK,CAAC;YACvB,KAAK,MAAM,MAAM,IAAI,eAAe,CAAC,UAAU,EAAE,EAAE,CAAC;gBAChD,MAAM,CAAC,GAAG,EAAE,CAAC;YACjB,CAAC;YACD,eAAe,CAAC,KAAK,EAAE,CAAC;QAC5B,CAAC,CAAC,CAAC;IACP,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,MAAM,cAAkB,SAAQ,cAAc;IAC1C,KAAK,CAAa;IAClB,OAAO,CAAwC;IAC/C,OAAO,GAA0B,EAAE,CAAC;IACpC,QAAQ,CAA0B;IAClC,SAAS,CAAuC;IAEhD,MAAM;QACF,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC9B,OAAO;QACX,CAAC;QACD,IAAI,CAAC,SAAS,GAAG,IAAI,MAAM,CAAC,QAAQ,CAAC,GAAG,EAAE;YACtC,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;YACxF,IAAI,IAAI,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,EAAE,CAAC;gBACvC,OAAO;YACX,CAAC;YACD,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACrB,OAAO,KAAK,CAAC;QACjB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,GAAG,eAAe,CAAC;QAChC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACpC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC;IACvD,CAAC;IAED,QAAQ;QACJ,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC9B,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,SAAU,CAAC,CAAC;YACvC,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC9B,CAAC;IACL,CAAC;IAED,MAAM,CAAC,MAA4C,EAAE,KAA6B;QAC9E,OAAO,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,CAC9B,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAC3D,CAAC;IACN,CAAC;IAEQ,MAAM,CACX,IAAU,EACV,CAAC,MAAM,EAAE,KAAK,CAGb;QAED,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,EAAE,IAAiB,CAAC;QAC/C,IAAI,MAAM,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YACxD,IAAI,CAAC,QAAQ,EAAE,CAAC;QACpB,CAAC;QACD,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,OAAO,GAAG,KAAK,IAAI,EAAE,CAAC;QAC3B,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,OAAO,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAC1E,CAAC;IAEkB,YAAY;QAC3B,IAAI,CAAC,QAAQ,EAAE,CAAC;IACpB,CAAC;IAEkB,WAAW;QAC1B,IAAI,CAAC,MAAM,EAAE,CAAC;IAClB,CAAC;CACJ;AAOD;;;GAGG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,SAAS,CAAC,cAAc,CAA2B,CAAC"}

package/dist/signal.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/signal.test.js

@@ -0,0 +1,135 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+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;
+    let WatchDirectiveTest = (() => {
+        let _classDecorators = [customElement("watch-directive-test")];
+        let _classDescriptor;
+        let _classExtraInitializers = [];
+        let _classThis;
+        let _classSuper = Component;
+        var WatchDirectiveTest = class extends _classSuper {
+            static { _classThis = this; }
+            static {
+                const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+                WatchDirectiveTest = _classThis = _classDescriptor.value;
+                if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+                __runInitializers(_classThis, _classExtraInitializers);
+            }
+            render() {
+                renders++;
+                return html `<p>${watch(counter)}</p>`;
+            }
+        };
+        return WatchDirectiveTest = _classThis;
+    })();
+    const t = document.createElement("watch-directive-test");
+    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;
+    let WatchDirectiveMapperTest = (() => {
+        let _classDecorators = [customElement("watch-directive-mapper-test")];
+        let _classDescriptor;
+        let _classExtraInitializers = [];
+        let _classThis;
+        let _classSuper = Component;
+        var WatchDirectiveMapperTest = class extends _classSuper {
+            static { _classThis = this; }
+            static {
+                const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+                WatchDirectiveMapperTest = _classThis = _classDescriptor.value;
+                if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+                __runInitializers(_classThis, _classExtraInitializers);
+            }
+            render() {
+                renders++;
+                return html `<p>${watch(counter, (i) => i + 1000)}</p>`;
+            }
+        };
+        return WatchDirectiveMapperTest = _classThis;
+    })();
+    const t = document.createElement("watch-directive-mapper-test");
+    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);
+});
+//# sourceMappingURL=signal.test.js.map

package/dist/signal.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"signal.test.js","sourceRoot":"","sources":["../src/signal.test.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,IAAI,CAAC,iBAAiB,EAAE,KAAK,IAAI,EAAE;IAC/B,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAC1B,IAAI,OAAO,GAAG,CAAC,CAAC;QAGV,kBAAkB;gCADvB,aAAa,CAAC,sBAAsB,CAAC;;;;0BACL,SAAS;sCAAjB,SAAQ,WAAS;;;;gBAA1C,6KAKC;;;gBALK,uDAAkB;;YACpB,MAAM;gBACF,OAAO,EAAE,CAAC;gBACV,OAAO,IAAI,CAAA,MAAM,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC;YAC1C,CAAC;;;;IAGL,MAAM,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,sBAAsB,CAAuB,CAAC;IAC/E,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACxB,MAAM,CAAC,CAAC,cAAc,CAAC;IAEvB,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1C,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAExB,8DAA8D;IAC9D,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACf,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC;IAExB,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1C,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAExB,+DAA+D;IAC/D,kCAAkC;IAClC,CAAC,CAAC,aAAa,EAAE,CAAC;IAClB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACf,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC;IAExB,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1C,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAExB,4DAA4D;IAC5D,MAAM,CAAC,CAAC,cAAc,CAAC;IACvB,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1C,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAC5B,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACpD,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAC1B,IAAI,OAAO,GAAG,CAAC,CAAC;QAGV,wBAAwB;gCAD7B,aAAa,CAAC,6BAA6B,CAAC;;;;0BACN,SAAS;4CAAjB,SAAQ,WAAS;;;;gBAAhD,6KAKC;;;gBALK,uDAAwB;;YAC1B,MAAM;gBACF,OAAO,EAAE,CAAC;gBACV,OAAO,IAAI,CAAA,MAAM,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;YAC3D,CAAC;;;;IAGL,MAAM,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,6BAA6B,CAA6B,CAAC;IAC5F,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACxB,MAAM,CAAC,CAAC,cAAc,CAAC;IAEvB,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC7C,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAExB,8DAA8D;IAC9D,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACf,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC;IAExB,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC7C,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAExB,+DAA+D;IAC/D,kCAAkC;IAClC,CAAC,CAAC,aAAa,EAAE,CAAC;IAClB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACf,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC;IAExB,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC7C,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAExB,4DAA4D;IAC5D,MAAM,CAAC,CAAC,cAAc,CAAC;IACvB,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC7C,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAC5B,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bodil/dom",
-  "version": "0.1.8",
+  "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": {

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;