@joist/templating 4.2.4-next.9 → 4.2.4

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

@@ -1,4 +1,4 @@
-import "./bind.element.js";
+import "../define.js";
 import { fixtureSync, html } from "@open-wc/testing";
 import { assert } from "chai";
 it("should pass props to child", () => {
@@ -40,10 +40,10 @@ it("should pass props to specified child", () => {
         });
     }}
     >
-      <j-bind attrs="href:href" target="#test">
-        <a>Default</a>
-        <a id="test">Target</a>
-      </j-bind>
+      <j-bind attrs="href:href" target="#test"></j-bind>
+
+      <a>Default</a>
+      <a id="test">Target</a>
     </div>
   `);
     const anchor = element.querySelectorAll("a");
@@ -87,4 +87,49 @@ it("should default to the mapTo value if bindTo is not provided", () => {
     assert.equal(input?.selectionStart, 8);
     assert.equal(input?.selectionEnd, 8);
 });
+it("should write not update if the calculated value is the same as the old value", () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        e.update({ oldValue: { foo: "bar" }, newValue: { foo: "bar" } });
+    }}
+    >
+      <j-bind props="value:data.foo">
+        <input />
+      </j-bind>
+    </div>
+  `);
+    const input = element.querySelector("input");
+    assert.equal(input?.value, "");
+});
+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 === "href") {
+            eventDispatched = true;
+            e.update({
+                oldValue: null,
+                newValue: "$foo",
+            });
+        }
+    }}
+    >
+      <j-bind attrs="href:href" depends-on="dependency-1,dependency-2">
+        <a>Hello World</a>
+      </j-bind>
+    </div>
+  `);
+    assert.isFalse(eventDispatched);
+    await Promise.all([
+        customElements.whenDefined("dependency-1"),
+        customElements.whenDefined("dependency-2"),
+    ]);
+    assert.isTrue(eventDispatched);
+});
 //# sourceMappingURL=bind.element.test.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"bind.element.test.js","sourceRoot":"","sources":["../../../src/lib/elements/bind.element.test.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"bind.element.test.js","sourceRoot":"","sources":["../../../src/lib/elements/bind.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAI9B,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;IACpC,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,IAAI,CAAC,CAAC,UAAU,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;YACnC,CAAC,CAAC,MAAM,CAAC;gBACP,QAAQ,EAAE,IAAI;gBACd,QAAQ,EAAE,MAAM;aACjB,CAAC,CAAC;QACL,CAAC;QAED,IAAI,CAAC,CAAC,UAAU,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;YACrC,CAAC,CAAC,MAAM,CAAC;gBACP,QAAQ,EAAE,IAAI;gBACd,QAAQ,EAAE;oBACR,KAAK,EAAE,QAAQ;iBAChB;aACF,CAAC,CAAC;QACL,CAAC;IACH,CAAC;;;;;;GAMJ,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAE1C,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;IACnD,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC;AACzD,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;IAC9C,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,CAAC,CAAC,MAAM,CAAC;YACP,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,MAAM;SACjB,CAAC,CAAC;IACL,CAAC;;;;;;;GAOJ,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAE7C,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC;IACnD,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;AACvD,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,0BAA0B,EAAE,GAAG,EAAE;IAClC,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IAC5C,CAAC;;;;;;;;;;;GAWJ,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAE7C,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC;IACvC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC;AACvC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,6DAA6D,EAAE,GAAG,EAAE;IACrE,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IAC5C,CAAC;;;;;;GAMJ,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAE7C,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC;IACvC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC;AACvC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,8EAA8E,EAAE,GAAG,EAAE;IACtF,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;IACnE,CAAC;;;;;;GAMJ,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAE7C,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;AACjC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;IACpE,IAAI,eAAe,GAAG,KAAK,CAAC;IAE5B,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,KAAM,SAAQ,WAAW;KAAG,CAAC,CAAC;IACpE,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,KAAM,SAAQ,WAAW;KAAG,CAAC,CAAC;IAEpE,WAAW,CAAC,IAAI,CAAA;;sBAEI,CAAC,CAAkB,EAAE,EAAE;QACrC,IAAI,CAAC,CAAC,UAAU,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;YACnC,eAAe,GAAG,IAAI,CAAC;YACvB,CAAC,CAAC,MAAM,CAAC;gBACP,QAAQ,EAAE,IAAI;gBACd,QAAQ,EAAE,MAAM;aACjB,CAAC,CAAC;QACL,CAAC;IACH,CAAC;;;;;;GAMJ,CAAC,CAAC;IAGH,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IAGhC,MAAM,OAAO,CAAC,GAAG,CAAC;QAChB,cAAc,CAAC,WAAW,CAAC,cAAc,CAAC;QAC1C,cAAc,CAAC,WAAW,CAAC,cAAc,CAAC;KAC3C,CAAC,CAAC;IAGH,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;AACjC,CAAC,CAAC,CAAC"}

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

@@ -1,23 +1,14 @@
-declare global {
-    interface HTMLElementTagNameMap {
-        "j-for": JositForElement;
-        "j-for-scope": JForScope;
-    }
-}
 export interface EachCtx<T> {
     value: T | null;
     index: number | null;
     position: number | null;
 }
-export declare class JForScope<T = unknown> extends HTMLElement {
-    accessor each: EachCtx<T>;
-    accessor key: unknown;
-}
-export declare class JositForElement extends HTMLElement {
+export declare class JoistForElement extends HTMLElement {
     #private;
     accessor bind: string;
     accessor key: string;
-    connectedCallback(): void;
+    accessor dependsOn: string;
+    connectedCallback(): Promise<void>;
     createFromEmpty(): void;
     updateItems(): void;
     disconnectedCallback(): void;

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

@@ -1,36 +1,28 @@
 import { __esDecorate, __runInitializers } from "tslib";
 import { attr, element, query, css, html } from "@joist/element";
-import { bind } from "../bind.js";
+import { effect, observe } from "@joist/observable";
 import { JoistValueEvent } from "../events.js";
 import { JExpression } from "../expression.js";
-let JForScope = (() => {
-    let _classDecorators = [element({
-            tagName: "j-for-scope",
-            shadowDom: [css `:host{display: contents;}`, html `<slot></slot>`],
-        })];
-    let _classDescriptor;
-    let _classExtraInitializers = [];
-    let _classThis;
-    let _classSuper = HTMLElement;
+let JoistForScopeContainer = (() => {
+    let _instanceExtraInitializers = [];
     let _each_decorators;
     let _each_initializers = [];
     let _each_extraInitializers = [];
-    let _key_decorators;
-    let _key_initializers = [];
-    let _key_extraInitializers = [];
-    var JForScope = class extends _classSuper {
-        static { _classThis = this; }
+    let _onChange_decorators;
+    return class JoistForScopeContainer {
         static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _each_decorators = [bind()];
-            _key_decorators = [attr()];
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _each_decorators = [observe()];
+            _onChange_decorators = [effect()];
             __esDecorate(this, null, _each_decorators, { kind: "accessor", name: "each", static: false, private: false, access: { has: obj => "each" in obj, get: obj => obj.each, set: (obj, value) => { obj.each = value; } }, metadata: _metadata }, _each_initializers, _each_extraInitializers);
-            __esDecorate(this, null, _key_decorators, { kind: "accessor", name: "key", static: false, private: false, access: { has: obj => "key" in obj, get: obj => obj.key, set: (obj, value) => { obj.key = value; } }, metadata: _metadata }, _key_initializers, _key_extraInitializers);
-            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-            JForScope = _classThis = _classDescriptor.value;
-            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-            __runInitializers(_classThis, _classExtraInitializers);
+            __esDecorate(this, null, _onChange_decorators, { kind: "method", name: "onChange", static: false, private: false, access: { has: obj => "onChange" in obj, get: obj => obj.onChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        host = __runInitializers(this, _instanceExtraInitializers);
+        get key() {
+            return this.host.getAttribute("key");
         }
+        #callbacks = [];
         #each_accessor_storage = __runInitializers(this, _each_initializers, {
             value: null,
             index: null,
@@ -38,20 +30,38 @@ let JForScope = (() => {
         });
         get each() { return this.#each_accessor_storage; }
         set each(value) { this.#each_accessor_storage = value; }
-        #key_accessor_storage = (__runInitializers(this, _each_extraInitializers), __runInitializers(this, _key_initializers, void 0));
-        get key() { return this.#key_accessor_storage; }
-        set key(value) { this.#key_accessor_storage = value; }
-        constructor() {
-            super(...arguments);
-            __runInitializers(this, _key_extraInitializers);
+        constructor(host) {
+            __runInitializers(this, _each_extraInitializers);
+            if (host == null) {
+                throw new Error("JForScope required a host element");
+            }
+            this.host = host;
+            this.host.addEventListener("joist::value", (e) => {
+                if (e.expression.bindTo === "each") {
+                    e.stopPropagation();
+                    this.#callbacks.push(e.update);
+                    e.update({
+                        oldValue: null,
+                        newValue: this.each,
+                        firstChange: true,
+                    });
+                }
+            });
+        }
+        onChange(changes) {
+            const change = changes.get("each");
+            for (let cb of this.#callbacks) {
+                cb({
+                    oldValue: change.oldValue,
+                    newValue: change.newValue,
+                    firstChange: false,
+                });
+            }
         }
     };
-    return JForScope = _classThis;
 })();
-export { JForScope };
-let JositForElement = (() => {
+let JoistForElement = (() => {
     let _classDecorators = [element({
-            tagName: "j-for",
             shadowDom: [css `:host{display:contents;}`, html `<slot></slot>`],
         })];
     let _classDescriptor;
@@ -64,16 +74,23 @@ let JositForElement = (() => {
     let _key_decorators;
     let _key_initializers = [];
     let _key_extraInitializers = [];
-    var JositForElement = class extends _classSuper {
+    let _dependsOn_decorators;
+    let _dependsOn_initializers = [];
+    let _dependsOn_extraInitializers = [];
+    var JoistForElement = 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()];
             _key_decorators = [attr()];
+            _dependsOn_decorators = [attr({
+                    name: "depends-on",
+                })];
             __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, _key_decorators, { kind: "accessor", name: "key", static: false, private: false, access: { has: obj => "key" in obj, get: obj => obj.key, set: (obj, value) => { obj.key = value; } }, metadata: _metadata }, _key_initializers, _key_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(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-            JositForElement = _classThis = _classDescriptor.value;
+            JoistForElement = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
@@ -83,19 +100,25 @@ let JositForElement = (() => {
         #key_accessor_storage = (__runInitializers(this, _bind_extraInitializers), __runInitializers(this, _key_initializers, ""));
         get key() { return this.#key_accessor_storage; }
         set key(value) { this.#key_accessor_storage = value; }
-        #template = (__runInitializers(this, _key_extraInitializers), query("template", this));
+        #dependsOn_accessor_storage = (__runInitializers(this, _key_extraInitializers), __runInitializers(this, _dependsOn_initializers, ""));
+        get dependsOn() { return this.#dependsOn_accessor_storage; }
+        set dependsOn(value) { this.#dependsOn_accessor_storage = value; }
+        #template = (__runInitializers(this, _dependsOn_extraInitializers), query("template", this));
         #items = [];
         #scopes = new Map();
-        connectedCallback() {
+        async connectedCallback() {
             const template = this.#template();
             if (this.firstElementChild !== template) {
                 throw new Error("The first Node in j-for needs to be a template");
             }
             let currentScope = template.nextElementSibling;
-            while (currentScope instanceof JForScope) {
-                this.#scopes.set(currentScope.key, currentScope);
+            while (currentScope instanceof JoistForScopeContainer) {
+                this.#scopes.set(String(currentScope.key), currentScope);
                 currentScope = currentScope.nextElementSibling;
             }
+            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) {
@@ -115,8 +138,6 @@ let JositForElement = (() => {
             }));
         }
         createFromEmpty() {
-            const template = this.#template();
-            const templateContent = template.content;
             const keyProperty = this.key;
             const fragment = document.createDocumentFragment();
             let index = 0;
@@ -125,18 +146,16 @@ let JositForElement = (() => {
                 if (keyProperty && hasProperty(value, keyProperty)) {
                     key = value[keyProperty];
                 }
-                const scope = new JForScope();
-                scope.append(document.importNode(templateContent, true));
-                scope.key = key;
+                const scope = this.#createScopeContainer();
+                scope.host.setAttribute("key", String(key));
                 scope.each = { position: index + 1, index, value };
-                fragment.appendChild(scope);
-                this.#scopes.set(key, scope);
+                fragment.appendChild(scope.host);
+                this.#scopes.set(String(key), scope);
                 index++;
             }
             this.append(fragment);
         }
         updateItems() {
-            const template = this.#template();
             const leftoverScopes = new Map(this.#scopes);
             const keyProperty = this.key;
             let index = 0;
@@ -147,38 +166,46 @@ let JositForElement = (() => {
                 }
                 let scope = leftoverScopes.get(key);
                 if (!scope) {
-                    scope = new JForScope();
-                    scope.append(document.importNode(template.content, true));
-                    this.#scopes.set(key, scope);
+                    scope = scope = this.#createScopeContainer();
+                    this.#scopes.set(String(key), scope);
                 }
                 else {
                     leftoverScopes.delete(key);
                 }
                 if (scope.key !== key || scope.each.value !== value) {
-                    scope.key = key;
+                    scope.host.setAttribute("key", String(key));
                     scope.each = { position: index + 1, index, value };
                 }
                 const child = this.children[index + 1];
-                if (child !== scope) {
-                    this.insertBefore(scope, child);
+                if (child !== scope.host) {
+                    this.insertBefore(scope.host, child);
                 }
                 index++;
             }
             for (const scope of leftoverScopes.values()) {
-                scope.remove();
+                scope.host.remove();
             }
         }
         disconnectedCallback() {
             for (const scope of this.#scopes.values()) {
-                scope.remove();
+                scope.host.remove();
             }
             this.#scopes.clear();
             this.#items = [];
         }
+        #createScopeContainer() {
+            const template = this.#template();
+            const content = template.content.firstElementChild;
+            if (content === null) {
+                throw new Error("template must contain a single parent element");
+            }
+            const fragment = document.importNode(content, true);
+            return new JoistForScopeContainer(fragment);
+        }
     };
-    return JositForElement = _classThis;
+    return JoistForElement = _classThis;
 })();
-export { JositForElement };
+export { JoistForElement };
 function isIterable(obj) {
     return obj != null && typeof obj[Symbol.iterator] === "function";
 }

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

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

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

@@ -1,2 +1 @@
-import "./for.element.js";
-import "./value.element.js";
+import "../define.js";

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

@@ -1,5 +1,4 @@
-import "./for.element.js";
-import "./value.element.js";
+import "../define.js";
 import { fixtureSync, html } from "@open-wc/testing";
 import { assert } from "chai";
 it("should iterate over an iterable", () => {
@@ -102,13 +101,16 @@ it("should provide index and position information", () => {
     >
       <j-for bind="items">
         <template>
-          <j-val bind="each.value"></j-val>
-          (index: <j-val bind="each.index"></j-val>, position: <j-val bind="each.position"></j-val>)
+          <div class="item">
+            <j-val bind="each.value"></j-val>
+            (index: <j-val bind="each.index"></j-val>, position:
+            <j-val bind="each.position"></j-val>)
+          </div>
         </template>
       </j-for>
     </div>
   `);
-    const items = element.querySelectorAll("j-for-scope");
+    const items = element.querySelectorAll(".item");
     assert.equal(items.length, 3);
     assert.equal(items[0].textContent?.trim().replaceAll("\n", "").replaceAll(" ", ""), "A(index:0,position:1)");
     assert.equal(items[1].textContent?.trim().replaceAll("\n", "").replaceAll(" ", ""), "B(index:1,position:2)");
@@ -149,4 +151,38 @@ it("should maintain DOM order when items are reordered", () => {
     assert.equal(items[1].textContent?.trim(), "First");
     assert.equal(items[2].textContent?.trim(), "Second");
 });
+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 === "items") {
+            eventDispatched = true;
+            e.update({
+                oldValue: null,
+                newValue: ["A", "B", "C"],
+            });
+        }
+    }}
+    >
+      <j-for bind="items" depends-on="dependency-1,dependency-2">
+        <template>
+          <div class="item">
+            <j-val bind="each.value"></j-val>
+          </div>
+        </template>
+      </j-for>
+    </div>
+  `);
+    assert.isFalse(eventDispatched);
+    await Promise.all([
+        customElements.whenDefined("dependency-1"),
+        customElements.whenDefined("dependency-2"),
+    ]);
+    assert.isTrue(eventDispatched);
+});
 //# sourceMappingURL=for.element.test.js.map

package/target/lib/elements/for.element.test.js.map

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

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

@@ -1,12 +1,9 @@
-declare global {
-    interface HTMLElementTagNameMap {
-        "j-if": JoistIfElement;
-    }
-}
 export declare class JoistIfElement extends HTMLElement {
     #private;
     accessor bind: string;
-    connectedCallback(): void;
+    accessor target: string;
+    accessor dependsOn: string;
+    connectedCallback(): Promise<void>;
     apply(value: unknown, isNegative: boolean): void;
     disconnectedCallback(): void;
 }

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

@@ -4,8 +4,7 @@ import { JoistValueEvent } from "../events.js";
 import { JExpression } from "../expression.js";
 let JoistIfElement = (() => {
     let _classDecorators = [element({
-            tagName: "j-if",
-            shadowDom: [css `:host{display: contents;}`, html `<slot></slot>`],
+            shadowDom: [css `:host{display: contents}`, html `<slot></slot>`],
         })];
     let _classDescriptor;
     let _classExtraInitializers = [];
@@ -14,12 +13,24 @@ let JoistIfElement = (() => {
     let _bind_decorators;
     let _bind_initializers = [];
     let _bind_extraInitializers = [];
+    let _target_decorators;
+    let _target_initializers = [];
+    let _target_extraInitializers = [];
+    let _dependsOn_decorators;
+    let _dependsOn_initializers = [];
+    let _dependsOn_extraInitializers = [];
     var JoistIfElement = 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()];
+            _target_decorators = [attr()];
+            _dependsOn_decorators = [attr({
+                    name: "depends-on",
+                })];
             __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, _target_decorators, { kind: "accessor", name: "target", static: false, private: false, access: { has: obj => "target" in obj, get: obj => obj.target, set: (obj, value) => { obj.target = value; } }, metadata: _metadata }, _target_initializers, _target_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(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             JoistIfElement = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
@@ -28,8 +39,16 @@ let JoistIfElement = (() => {
         #bind_accessor_storage = __runInitializers(this, _bind_initializers, "");
         get bind() { return this.#bind_accessor_storage; }
         set bind(value) { this.#bind_accessor_storage = value; }
-        #templates = (__runInitializers(this, _bind_extraInitializers), queryAll("template", this));
-        connectedCallback() {
+        #target_accessor_storage = (__runInitializers(this, _bind_extraInitializers), __runInitializers(this, _target_initializers, ""));
+        get target() { return this.#target_accessor_storage; }
+        set target(value) { this.#target_accessor_storage = value; }
+        #dependsOn_accessor_storage = (__runInitializers(this, _target_extraInitializers), __runInitializers(this, _dependsOn_initializers, ""));
+        get dependsOn() { return this.#dependsOn_accessor_storage; }
+        set dependsOn(value) { this.#dependsOn_accessor_storage = value; }
+        #templates = (__runInitializers(this, _dependsOn_extraInitializers), queryAll("template", this));
+        #shouldShowIf = null;
+        #target = this;
+        async connectedCallback() {
             const templates = Array.from(this.#templates());
             if (templates.length === 0) {
                 throw new Error("j-if requires at least one template element");
@@ -43,8 +62,17 @@ let JoistIfElement = (() => {
             if (templates.length === 2 && templates[0].hasAttribute("else")) {
                 [templates[0], templates[1]] = [templates[1], templates[0]];
             }
-            this.#clean();
             const token = new JExpression(this.bind);
+            const root = this.getRootNode();
+            if (this.target) {
+                const result = root.querySelector(this.target);
+                if (result) {
+                    this.#target = result;
+                }
+            }
+            if (this.dependsOn) {
+                await Promise.all(this.dependsOn.split(",").map((tag) => window.customElements.whenDefined(tag)));
+            }
             this.dispatchEvent(new JoistValueEvent(token, ({ newValue, oldValue, firstChange }) => {
                 if (firstChange || newValue !== oldValue) {
                     this.apply(token.evaluate(newValue), token.isNegated);
@@ -52,18 +80,22 @@ let JoistIfElement = (() => {
             }));
         }
         apply(value, isNegative) {
+            const shouldShowIf = isNegative ? !value : !!value;
+            if (shouldShowIf === this.#shouldShowIf) {
+                return;
+            }
+            this.#shouldShowIf = shouldShowIf;
             this.#clean();
             const templates = this.#templates();
-            const shouldShowIf = isNegative ? !value : value;
-            const templateToUse = shouldShowIf ? templates[0] : templates[1];
+            const templateToUse = this.#shouldShowIf ? templates[0] : templates[1];
             if (templateToUse) {
                 const content = document.importNode(templateToUse.content, true);
-                this.appendChild(content);
+                this.#target.append(content);
             }
         }
         #clean() {
-            while (!(this.lastChild instanceof HTMLTemplateElement)) {
-                this.lastChild?.remove();
+            while (this.#target.lastChild && !(this.#target.lastChild instanceof HTMLTemplateElement)) {
+                this.#target.lastChild.remove();
             }
         }
         disconnectedCallback() {

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

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

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

@@ -1 +1 @@
-import "./if.element.js";
+import "../define.js";