@joist/templating 4.7.0 → 4.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/templating",
-  "version": "4.7.0",
+  "version": "4.7.1",
   "type": "module",
   "main": "./target/lib.js",
   "module": "./target/lib.js",

package/target/lib/bind.d.ts

@@ -0,0 +1,10 @@
+import type { ObserveOpts } from "@joist/observable";
+export interface BindOpts<This, Value> extends ObserveOpts<This, Value> {
+    /**
+     * Trigger bindings on every change cycle, regardless of value,
+     * newValue and oldValue will be the same in that case
+     **/
+    alwaysUpdate?: boolean;
+}
+export declare function bind<This extends HTMLElement, Value>(opts?: BindOpts<This, Value>): (base: ClassAccessorDecoratorTarget<This, Value>, ctx: ClassAccessorDecoratorContext<This, Value>) => ClassAccessorDecoratorResult<This, Value>;
+//# sourceMappingURL=bind.d.ts.map

package/target/lib/bind.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bind.d.ts","sourceRoot":"","sources":["../../src/lib/bind.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,WAAW,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAE,SAAQ,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC;IACrE;;;QAGI;IACJ,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,IAAI,CAAC,IAAI,SAAS,WAAW,EAAE,KAAK,EAAE,IAAI,GAAE,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAM,IAElF,MAAM,4BAA4B,CAAC,IAAI,EAAE,KAAK,CAAC,EAC/C,KAAK,6BAA6B,CAAC,IAAI,EAAE,KAAK,CAAC,KAC9C,4BAA4B,CAAC,IAAI,EAAE,KAAK,CAAC,CAyD7C"}

package/target/lib/bind.js

@@ -0,0 +1,50 @@
+import { instanceMetadataStore, observe } from "@joist/observable";
+export function bind(opts = {}) {
+    return function bindDecorator(base, ctx) {
+        const internalObserve = observe(opts)(base, ctx);
+        const accessorResult = {
+            init(value) {
+                this.addEventListener("joist::value", (e) => {
+                    if (e.expression.bindTo === ctx.name) {
+                        const instanceMeta = instanceMetadataStore.read(this);
+                        e.stopPropagation();
+                        e.update({
+                            oldValue: null,
+                            newValue: ctx.access.get(this),
+                            alwaysUpdate: opts.alwaysUpdate,
+                            firstChange: true,
+                        });
+                        const name = ctx.name;
+                        instanceMeta.bindings.add((changes) => {
+                            const change = changes.get(name);
+                            if (change) {
+                                e.update({ ...change, alwaysUpdate: opts.alwaysUpdate, firstChange: false });
+                            }
+                            else if (opts.alwaysUpdate) {
+                                const value = ctx.access.get(this);
+                                e.update({
+                                    oldValue: value,
+                                    newValue: value,
+                                    alwaysUpdate: opts.alwaysUpdate,
+                                    firstChange: false,
+                                });
+                            }
+                        });
+                    }
+                });
+                if (internalObserve.init) {
+                    return internalObserve.init.call(this, value);
+                }
+                return value;
+            },
+        };
+        if (internalObserve.get) {
+            accessorResult.get = internalObserve.get;
+        }
+        if (internalObserve.set) {
+            accessorResult.set = internalObserve.set;
+        }
+        return accessorResult;
+    };
+}
+//# sourceMappingURL=bind.js.map

package/target/lib/bind.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bind.js","sourceRoot":"","sources":["../../src/lib/bind.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAWnE,MAAM,UAAU,IAAI,CAAkC,OAA8B,EAAE;IACpF,OAAO,SAAS,aAAa,CAC3B,IAA+C,EAC/C,GAA+C;QAE/C,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAEjD,MAAM,cAAc,GAA8C;YAChE,IAAI,CAAC,KAAK;gBACR,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE;oBAC1C,IAAI,CAAC,CAAC,UAAU,CAAC,MAAM,KAAK,GAAG,CAAC,IAAI,EAAE,CAAC;wBACrC,MAAM,YAAY,GAAG,qBAAqB,CAAC,IAAI,CAAO,IAAI,CAAC,CAAC;wBAE5D,CAAC,CAAC,eAAe,EAAE,CAAC;wBAEpB,CAAC,CAAC,MAAM,CAAC;4BACP,QAAQ,EAAE,IAAI;4BACd,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;4BAC9B,YAAY,EAAE,IAAI,CAAC,YAAY;4BAC/B,WAAW,EAAE,IAAI;yBAClB,CAAC,CAAC;wBAEH,MAAM,IAAI,GAAG,GAAG,CAAC,IAAkB,CAAC;wBAEpC,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;4BACpC,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;4BAEjC,IAAI,MAAM,EAAE,CAAC;gCACX,CAAC,CAAC,MAAM,CAAC,EAAE,GAAG,MAAM,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC;4BAC/E,CAAC;iCAAM,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;gCAC7B,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gCAEnC,CAAC,CAAC,MAAM,CAAC;oCACP,QAAQ,EAAE,KAAK;oCACf,QAAQ,EAAE,KAAK;oCACf,YAAY,EAAE,IAAI,CAAC,YAAY;oCAC/B,WAAW,EAAE,KAAK;iCACnB,CAAC,CAAC;4BACL,CAAC;wBACH,CAAC,CAAC,CAAC;oBACL,CAAC;gBACH,CAAC,CAAC,CAAC;gBAEH,IAAI,eAAe,CAAC,IAAI,EAAE,CAAC;oBACzB,OAAO,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAU,CAAC;gBACzD,CAAC;gBAED,OAAO,KAAK,CAAC;YACf,CAAC;SACF,CAAC;QAEF,IAAI,eAAe,CAAC,GAAG,EAAE,CAAC;YACxB,cAAc,CAAC,GAAG,GAAG,eAAe,CAAC,GAAG,CAAC;QAC3C,CAAC;QAED,IAAI,eAAe,CAAC,GAAG,EAAE,CAAC;YACxB,cAAc,CAAC,GAAG,GAAG,eAAe,CAAC,GAAG,CAAC;QAC3C,CAAC;QAED,OAAO,cAAc,CAAC;IACxB,CAAC,CAAC;AACJ,CAAC"}

package/target/lib/bind.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=bind.test.d.ts.map

package/target/lib/bind.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bind.test.d.ts","sourceRoot":"","sources":["../../src/lib/bind.test.ts"],"names":[],"mappings":""}

package/target/lib/bind.test.js

@@ -0,0 +1,110 @@
+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 { assert } from "chai";
+import { bind } from "./bind.js";
+import { JoistValueEvent } from "./events.js";
+import { JExpression } from "./expression.js";
+describe("bind decorator", () => {
+    let TestElement = (() => {
+        let _classSuper = HTMLElement;
+        let _value_decorators;
+        let _value_initializers = [];
+        let _value_extraInitializers = [];
+        let _alwaysUpdateValue_decorators;
+        let _alwaysUpdateValue_initializers = [];
+        let _alwaysUpdateValue_extraInitializers = [];
+        return class TestElement extends _classSuper {
+            static {
+                const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                _value_decorators = [bind()];
+                _alwaysUpdateValue_decorators = [bind({ alwaysUpdate: true })];
+                __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+                __esDecorate(this, null, _alwaysUpdateValue_decorators, { kind: "accessor", name: "alwaysUpdateValue", static: false, private: false, access: { has: obj => "alwaysUpdateValue" in obj, get: obj => obj.alwaysUpdateValue, set: (obj, value) => { obj.alwaysUpdateValue = value; } }, metadata: _metadata }, _alwaysUpdateValue_initializers, _alwaysUpdateValue_extraInitializers);
+                if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            }
+            #value_accessor_storage = __runInitializers(this, _value_initializers, "initial");
+            get value() { return this.#value_accessor_storage; }
+            set value(value) { this.#value_accessor_storage = value; }
+            #alwaysUpdateValue_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _alwaysUpdateValue_initializers, "initial"));
+            get alwaysUpdateValue() { return this.#alwaysUpdateValue_accessor_storage; }
+            set alwaysUpdateValue(value) { this.#alwaysUpdateValue_accessor_storage = value; }
+            constructor() {
+                super(...arguments);
+                __runInitializers(this, _alwaysUpdateValue_extraInitializers);
+            }
+        };
+    })();
+    customElements.define("test-element", TestElement);
+    it("should initialize with default value", () => {
+        const element = new TestElement();
+        assert.equal(element.value, "initial");
+    });
+    it("should update value and trigger binding", async () => {
+        const element = new TestElement();
+        let oldValue = null;
+        let newValue = null;
+        element.dispatchEvent(new JoistValueEvent(new JExpression("value"), (update) => {
+            oldValue = update.oldValue;
+            newValue = update.newValue;
+        }));
+        assert.equal(oldValue, null);
+        assert.equal(newValue, "initial");
+        element.value = "updated";
+        await Promise.resolve();
+        assert.equal(oldValue, "initial");
+        assert.equal(newValue, "updated");
+    });
+    it("should trigger binding on every change with alwaysUpdate option", async () => {
+        const element = new TestElement();
+        let bindingCount = 0;
+        let oldValue;
+        let newValue;
+        element.dispatchEvent(new JoistValueEvent(new JExpression("alwaysUpdateValue"), (update) => {
+            bindingCount++;
+            oldValue = update.oldValue;
+            newValue = update.newValue;
+        }));
+        assert.equal(bindingCount, 1);
+        assert.equal(oldValue, null);
+        assert.equal(newValue, "initial");
+        // Change some other value in the model
+        element.value = "something else";
+        await Promise.resolve();
+        assert.equal(bindingCount, 2);
+        assert.equal(oldValue, "initial");
+        assert.equal(newValue, "initial");
+    });
+});
+//# sourceMappingURL=bind.test.js.map

package/target/lib/bind.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bind.test.js","sourceRoot":"","sources":["../../src/lib/bind.test.ts"],"names":[],"mappings":"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"}

package/target/lib/define.d.ts

@@ -0,0 +1,17 @@
+import { JoistAsyncElement } from "./elements/async.element.js";
+import { JoistForElement } from "./elements/for.element.js";
+import { JoistIfElement } from "./elements/if.element.js";
+import { JoistBindElement } from "./elements/bind.element.js";
+import { JoistValueElement } from "./elements/value.element.js";
+import { JoistScopeElement } from "./elements/scope.element.js";
+declare global {
+    interface HTMLElementTagNameMap {
+        "j-async": JoistAsyncElement;
+        "j-for": JoistForElement;
+        "j-if": JoistIfElement;
+        "j-bind": JoistBindElement;
+        "j-val": JoistValueElement;
+        "j-scope": JoistScopeElement;
+    }
+}
+//# sourceMappingURL=define.d.ts.map

package/target/lib/define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../../src/lib/define.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAEhE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,iBAAiB,CAAC;QAC7B,OAAO,EAAE,eAAe,CAAC;QACzB,MAAM,EAAE,cAAc,CAAC;QACvB,QAAQ,EAAE,gBAAgB,CAAC;QAC3B,OAAO,EAAE,iBAAiB,CAAC;QAC3B,SAAS,EAAE,iBAAiB,CAAC;KAC9B;CACF"}

package/target/lib/define.js

@@ -0,0 +1,14 @@
+import { define } from "@joist/element/define.js";
+import { JoistAsyncElement } from "./elements/async.element.js";
+import { JoistForElement } from "./elements/for.element.js";
+import { JoistIfElement } from "./elements/if.element.js";
+import { JoistBindElement } from "./elements/bind.element.js";
+import { JoistValueElement } from "./elements/value.element.js";
+import { JoistScopeElement } from "./elements/scope.element.js";
+define({ tagName: "j-async" }, JoistAsyncElement);
+define({ tagName: "j-for" }, JoistForElement);
+define({ tagName: "j-if" }, JoistIfElement);
+define({ tagName: "j-bind" }, JoistBindElement);
+define({ tagName: "j-val" }, JoistValueElement);
+define({ tagName: "j-scope" }, JoistScopeElement);
+//# sourceMappingURL=define.js.map

package/target/lib/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../src/lib/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAahE,MAAM,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,iBAAiB,CAAC,CAAC;AAClD,MAAM,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,eAAe,CAAC,CAAC;AAC9C,MAAM,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,cAAc,CAAC,CAAC;AAC5C,MAAM,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,gBAAgB,CAAC,CAAC;AAChD,MAAM,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,iBAAiB,CAAC,CAAC;AAChD,MAAM,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,iBAAiB,CAAC,CAAC"}

package/target/lib/elements/async.element.d.ts

@@ -0,0 +1,14 @@
+export type AsyncState<T = unknown, E = unknown> = {
+    status: "loading" | "error" | "success";
+    data?: T;
+    error?: E;
+};
+export declare class JoistAsyncElement extends HTMLElement {
+    #private;
+    accessor bind: string;
+    accessor dependsOn: string;
+    accessor state: AsyncState | null;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+}
+//# sourceMappingURL=async.element.d.ts.map

package/target/lib/elements/async.element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"async.element.d.ts","sourceRoot":"","sources":["../../../src/lib/elements/async.element.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,UAAU,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,OAAO,IAAI;IACjD,MAAM,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACxC,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,KAAK,CAAC,EAAE,CAAC,CAAC;CACX,CAAC;AAEF,qBAIa,iBAAkB,SAAQ,WAAW;;IAEhD,QAAQ,CAAC,IAAI,SAAM;IAKnB,QAAQ,CAAC,SAAS,SAAM;IAGxB,QAAQ,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAQ;IAcnC,iBAAiB,IAAI,OAAO,CAAC,IAAI,CAAC;IA0FxC,oBAAoB,IAAI,IAAI;CAG7B"}

package/target/lib/elements/async.element.js

@@ -0,0 +1,168 @@
+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 { attr, element, queryAll, css, html } from "@joist/element";
+import { bind } from "../bind.js";
+import { JoistValueEvent } from "../events.js";
+import { JExpression } from "../expression.js";
+let JoistAsyncElement = (() => {
+    let _classDecorators = [element({
+            // prettier-ignore
+            shadowDom: [css `:host{display: contents;}`, html `<slot></slot>`],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _bind_decorators;
+    let _bind_initializers = [];
+    let _bind_extraInitializers = [];
+    let _dependsOn_decorators;
+    let _dependsOn_initializers = [];
+    let _dependsOn_extraInitializers = [];
+    let _state_decorators;
+    let _state_initializers = [];
+    let _state_extraInitializers = [];
+    var JoistAsyncElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _bind_decorators = [attr()];
+            _dependsOn_decorators = [attr({
+                    name: "depends-on",
+                })];
+            _state_decorators = [bind()];
+            __esDecorate(this, null, _bind_decorators, { kind: "accessor", name: "bind", static: false, private: false, access: { has: obj => "bind" in obj, get: obj => obj.bind, set: (obj, value) => { obj.bind = value; } }, metadata: _metadata }, _bind_initializers, _bind_extraInitializers);
+            __esDecorate(this, null, _dependsOn_decorators, { kind: "accessor", name: "dependsOn", static: false, private: false, access: { has: obj => "dependsOn" in obj, get: obj => obj.dependsOn, set: (obj, value) => { obj.dependsOn = value; } }, metadata: _metadata }, _dependsOn_initializers, _dependsOn_extraInitializers);
+            __esDecorate(this, null, _state_decorators, { kind: "accessor", name: "state", static: false, private: false, access: { has: obj => "state" in obj, get: obj => obj.state, set: (obj, value) => { obj.state = value; } }, metadata: _metadata }, _state_initializers, _state_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            JoistAsyncElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #bind_accessor_storage = __runInitializers(this, _bind_initializers, "");
+        get bind() { return this.#bind_accessor_storage; }
+        set bind(value) { this.#bind_accessor_storage = value; }
+        #dependsOn_accessor_storage = (__runInitializers(this, _bind_extraInitializers), __runInitializers(this, _dependsOn_initializers, ""));
+        get dependsOn() { return this.#dependsOn_accessor_storage; }
+        set dependsOn(value) { this.#dependsOn_accessor_storage = value; }
+        #state_accessor_storage = (__runInitializers(this, _dependsOn_extraInitializers), __runInitializers(this, _state_initializers, null));
+        get state() { return this.#state_accessor_storage; }
+        set state(value) { this.#state_accessor_storage = value; }
+        #templates = (__runInitializers(this, _state_extraInitializers), queryAll("template", this));
+        #currentNodes = [];
+        #cachedTemplates = {
+            loading: undefined,
+            error: undefined,
+            success: undefined,
+        };
+        async connectedCallback() {
+            this.#clean();
+            // Cache all templates
+            const templates = Array.from(this.#templates());
+            this.#cachedTemplates = {
+                loading: templates.find((t) => t.hasAttribute("loading")),
+                error: templates.find((t) => t.hasAttribute("error")),
+                success: templates.find((t) => t.hasAttribute("success")),
+            };
+            if (this.dependsOn) {
+                await Promise.all(this.dependsOn.split(",").map((tag) => window.customElements.whenDefined(tag)));
+            }
+            const token = new JExpression(this.bind);
+            this.dispatchEvent(new JoistValueEvent(token, ({ newValue, oldValue }) => {
+                if (newValue !== oldValue) {
+                    if (newValue instanceof Promise) {
+                        this.#handlePromise(newValue);
+                    }
+                    else if (this.#isAsyncState(newValue)) {
+                        this.#handleState(newValue);
+                    }
+                    else {
+                        console.warn("j-async bind value must be a Promise or AsyncState");
+                    }
+                }
+            }));
+        }
+        #isAsyncState(value) {
+            return (typeof value === "object" &&
+                value !== null &&
+                "status" in value &&
+                (value.status === "loading" || value.status === "error" || value.status === "success"));
+        }
+        async #handlePromise(promise) {
+            try {
+                this.#handleState({ status: "loading" });
+                const data = await promise;
+                this.#handleState({ status: "success", data });
+            }
+            catch (error) {
+                this.#handleState({ status: "error", error });
+            }
+        }
+        #handleState(state) {
+            this.#clean();
+            let template;
+            this.state = state;
+            switch (state.status) {
+                case "loading":
+                    template = this.#cachedTemplates.loading;
+                    break;
+                case "error":
+                    template = this.#cachedTemplates.error;
+                    break;
+                case "success":
+                    template = this.#cachedTemplates.success;
+                    break;
+            }
+            if (template) {
+                const content = document.importNode(template.content, true);
+                const nodes = Array.from(content.childNodes);
+                this.appendChild(content);
+                this.#currentNodes = nodes;
+            }
+        }
+        #clean() {
+            for (const node of this.#currentNodes) {
+                node.parentNode?.removeChild(node);
+            }
+            this.#currentNodes = [];
+        }
+        disconnectedCallback() {
+            this.#clean();
+        }
+    };
+    return JoistAsyncElement = _classThis;
+})();
+export { JoistAsyncElement };
+//# sourceMappingURL=async.element.js.map

package/target/lib/elements/async.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"async.element.js","sourceRoot":"","sources":["../../../src/lib/elements/async.element.ts"],"names":[],"mappings":"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"}

package/target/lib/elements/async.element.test.d.ts

@@ -0,0 +1,2 @@
+import "../define.js";
+//# sourceMappingURL=async.element.test.d.ts.map

package/target/lib/elements/async.element.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"async.element.test.d.ts","sourceRoot":"","sources":["../../../src/lib/elements/async.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC"}

package/target/lib/elements/async.element.test.js

@@ -0,0 +1,191 @@
+import "../define.js";
+import { fixtureSync, html } from "@open-wc/testing";
+import { assert } from "chai";
+it("should show loading template when promise is pending", async () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        e.update({ oldValue: null, newValue: new Promise(() => { }) });
+    }}
+    >
+      <j-async bind="test">
+        <template loading>Loading...</template>
+        <template success>Success!</template>
+        <template error>Error!</template>
+      </j-async>
+    </div>
+  `);
+    assert.equal(element.textContent?.trim(), "Loading...");
+});
+it("should show success template when promise resolves", async () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        e.update({ oldValue: null, newValue: Promise.resolve("data") });
+    }}
+    >
+      <j-async bind="test">
+        <template loading>Loading...</template>
+        <template success>Success!</template>
+        <template error>Error!</template>
+      </j-async>
+    </div>
+  `);
+    // Wait for promise to resolve
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    assert.equal(element.textContent?.trim(), "Success!");
+});
+it("should show error template when promise rejects", async () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        e.update({ oldValue: null, newValue: Promise.reject("error") });
+    }}
+    >
+      <j-async bind="test">
+        <template loading>Loading...</template>
+        <template success>Success!</template>
+        <template error>Error!</template>
+      </j-async>
+    </div>
+  `);
+    // Wait for promise to reject
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    assert.equal(element.textContent?.trim(), "Error!");
+});
+it("should handle state transitions", async () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        const promise = new Promise((resolve) => {
+            setTimeout(() => resolve("data"), 100);
+        });
+        e.update({ oldValue: null, newValue: promise });
+    }}
+    >
+      <j-async bind="test">
+        <template loading>Loading...</template>
+        <template success>Success!</template>
+        <template error>Error!</template>
+      </j-async>
+    </div>
+  `);
+    // Initially should show loading
+    assert.equal(element.textContent?.trim(), "Loading...");
+    // Wait for promise to resolve
+    await new Promise((resolve) => setTimeout(resolve, 150));
+    assert.equal(element.textContent?.trim(), "Success!");
+});
+it("should show loading template when AsyncState is loading", () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        e.update({ oldValue: null, newValue: { status: "loading" } });
+    }}
+    >
+      <j-async bind="test">
+        <template loading>Loading...</template>
+        <template success>Success!</template>
+        <template error>Error!</template>
+      </j-async>
+    </div>
+  `);
+    assert.equal(element.textContent?.trim(), "Loading...");
+});
+it("should show success template when AsyncState is success", () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        e.update({ oldValue: null, newValue: { status: "success", data: "test data" } });
+    }}
+    >
+      <j-async bind="test">
+        <template loading>Loading...</template>
+        <template success>Success!</template>
+        <template error>Error!</template>
+      </j-async>
+    </div>
+  `);
+    assert.equal(element.textContent?.trim(), "Success!");
+});
+it("should show error template when AsyncState is error", () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        e.update({ oldValue: null, newValue: { status: "error", error: "test error" } });
+    }}
+    >
+      <j-async bind="test">
+        <template loading>Loading...</template>
+        <template success>Success!</template>
+        <template error>Error!</template>
+      </j-async>
+    </div>
+  `);
+    assert.equal(element.textContent?.trim(), "Error!");
+});
+it("should handle AsyncState transitions", () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        // Initial state
+        e.update({ oldValue: null, newValue: { status: "loading" } });
+        // Simulate state transition after a short delay
+        setTimeout(() => {
+            e.update({
+                oldValue: { status: "loading" },
+                newValue: { status: "success", data: "test data" },
+            });
+        }, 100);
+    }}
+    >
+      <j-async bind="test">
+        <template loading>Loading...</template>
+        <template success>Success!</template>
+        <template error>Error!</template>
+      </j-async>
+    </div>
+  `);
+    // Initially should show loading
+    assert.equal(element.textContent?.trim(), "Loading...");
+    // Wait for state transition
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            assert.equal(element.textContent?.trim(), "Success!");
+            resolve(undefined);
+        }, 150);
+    });
+});
+it("should wait for depends-on before dispatching events", async () => {
+    let eventDispatched = false;
+    customElements.define("dependency-1", class extends HTMLElement {
+    });
+    customElements.define("dependency-2", class extends HTMLElement {
+    });
+    fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        if (e.expression.bindTo === "test") {
+            eventDispatched = true;
+            e.update({ oldValue: null, newValue: Promise.resolve("data") });
+        }
+    }}
+    >
+      <j-async bind="test" depends-on="dependency-1,dependency-2">
+        <template loading>Loading...</template>
+        <template success>Success!</template>
+        <template error>Error!</template>
+      </j-async>
+    </div>
+  `);
+    // Initially, no event should be dispatched
+    assert.isFalse(eventDispatched);
+    // Wait for the custom elements to be defined
+    await Promise.all([
+        customElements.whenDefined("dependency-1"),
+        customElements.whenDefined("dependency-2"),
+    ]);
+    // Now the event should be dispatched
+    assert.isTrue(eventDispatched);
+});
+//# sourceMappingURL=async.element.test.js.map