@joist/element 4.2.2 → 4.2.3-next.0

package/src/lib/templating/elements/props.element.test.ts

@@ -0,0 +1,62 @@
+import "./props.element.js";
+
+import { fixtureSync, html } from "@open-wc/testing";
+import { assert } from "chai";
+
+import type { JoistValueEvent } from "../events.js";
+
+it("should pass props to child", () => {
+  const element = fixtureSync(html`
+    <div
+      @joist::value=${(e: JoistValueEvent) => {
+        if (e.token.bindTo === "href") {
+          e.update({
+            oldValue: null,
+            newValue: "$foo",
+          });
+        }
+
+        if (e.token.bindTo === "target") {
+          e.update({
+            oldValue: null,
+            newValue: {
+              value: "_blank",
+            },
+          });
+        }
+      }}
+    >
+      <j-props>
+        <a $href="href" $target="target.value">Hello World</a>
+      </j-props>
+    </div>
+  `);
+
+  const anchor = element.querySelector("a");
+
+  assert.equal(anchor?.getAttribute("href"), "$foo");
+  assert.equal(anchor?.getAttribute("target"), "_blank");
+});
+
+it("should pass props to specified child", () => {
+  const element = fixtureSync(html`
+    <div
+      @joist::value=${(e: JoistValueEvent) => {
+        e.update({
+          oldValue: null,
+          newValue: "#foo",
+        });
+      }}
+    >
+      <j-props>
+        <a>Default</a>
+        <a id="test" $href="href">Target</a>
+      </j-props>
+    </div>
+  `);
+
+  const anchor = element.querySelectorAll("a");
+
+  assert.equal(anchor[0].getAttribute("href"), null);
+  assert.equal(anchor[1].getAttribute("href"), "#foo");
+});

package/src/lib/templating/elements/props.element.ts

@@ -0,0 +1,80 @@
+import { attr } from "../../attr.js";
+import { element } from "../../element.js";
+import { css, html } from "../../tags.js";
+
+import { JoistValueEvent } from "../events.js";
+import { JToken } from "../token.js";
+
+export class JAttrToken extends JToken {
+  mapTo: string;
+  mapsToProp: boolean;
+
+  constructor(attr: Attr) {
+    if (!attr.name.startsWith("$")) {
+      throw new Error(
+        `Invalid attribute token: ${attr.name}, should start with $`,
+      );
+    }
+
+    super(attr.value);
+
+    this.mapsToProp = attr.name.startsWith("$.");
+
+    this.mapTo = attr.name.slice(this.mapsToProp ? 2 : 1);
+  }
+}
+
+@element({
+  tagName: "j-props",
+  // prettier-ignore
+  shadowDom: [css`:host{display: contents;}`, html`<slot></slot>`],
+})
+export class JoistIfElement extends HTMLElement {
+  @attr()
+  accessor target = "";
+
+  connectedCallback(): void {
+    this.#bindProps([this]); // bind own props
+    this.#bindProps(this.children); // bind child props
+  }
+
+  #bindProps(children: Iterable<Element>) {
+    for (const child of children) {
+      for (const attr of child.attributes) {
+        if (attr.name.startsWith("$")) {
+          const token = new JAttrToken(attr);
+
+          this.dispatchEvent(
+            new JoistValueEvent(token, ({ newValue, oldValue }) => {
+              if (newValue === oldValue) {
+                return;
+              }
+
+              let valueToWrite = newValue;
+
+              if (typeof newValue === "object" && newValue !== null) {
+                valueToWrite = token.readTokenValueFrom(newValue);
+              }
+
+              if (token.isNegated) {
+                valueToWrite = !valueToWrite;
+              }
+
+              if (token.mapsToProp) {
+                Reflect.set(child, token.mapTo, valueToWrite);
+              } else {
+                if (valueToWrite === true) {
+                  child.setAttribute(token.mapTo, "");
+                } else if (valueToWrite === false) {
+                  child.removeAttribute(token.mapTo);
+                } else {
+                  child.setAttribute(token.mapTo, String(valueToWrite));
+                }
+              }
+            }),
+          );
+        }
+      }
+    }
+  }
+}

package/src/lib/templating/elements/scope.ts

@@ -0,0 +1,45 @@
+import { attr } from "../../attr.js";
+import { element } from "../../element.js";
+import { listen } from "../../listen.js";
+import { css, html } from "../../tags.js";
+import type { JoistValueEvent } from "../events.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "j-scope": JoistScopeElement;
+  }
+}
+
+@element({
+  tagName: "j-value",
+  // prettier-ignore
+  shadowDom: [css`:host{display: contents;}`, html`<slot></slot>`],
+})
+export class JoistScopeElement extends HTMLElement {
+  @attr()
+  accessor name = "";
+
+  @attr()
+  accessor value = "";
+
+  #binding: JoistValueEvent | null = null;
+
+  @listen("joist::value")
+  onJoistValueFound(e: JoistValueEvent): void {
+    if (e.token.bindTo === this.name) {
+      e.stopPropagation();
+
+      this.#binding = e;
+
+      this.#binding.update({ oldValue: null, newValue: this.value });
+    }
+  }
+
+  attributeChangedCallback(
+    _: string,
+    oldValue: string,
+    newValue: string,
+  ): void {
+    this.#binding?.update({ oldValue, newValue });
+  }
+}

package/src/lib/templating/elements/value.element.test.ts

@@ -0,0 +1,20 @@
+import "./value.element.js";
+
+import { fixtureSync, html } from "@open-wc/testing";
+import { assert } from "chai";
+
+import type { JoistValueEvent } from "../events.js";
+
+it("should render content when the bind value is truthy", () => {
+  const element = fixtureSync(html`
+    <div
+      @joist::value=${(e: JoistValueEvent) => {
+        e.update({ oldValue: null, newValue: "Hello World" });
+      }}
+    >
+      <j-value bind="test"></j-value>
+    </div>
+  `);
+
+  assert.equal(element.textContent?.trim(), "Hello World");
+});

package/src/lib/templating/elements/value.element.ts

@@ -0,0 +1,41 @@
+import { attr } from "../../attr.js";
+import { element } from "../../element.js";
+import { css, html } from "../../tags.js";
+import { JoistValueEvent } from "../events.js";
+import { JToken } from "../token.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "j-value": JoistValueElement;
+  }
+}
+
+@element({
+  tagName: "j-value",
+  // prettier-ignore
+  shadowDom: [css`:host{display: contents;}`, html`<slot></slot>`],
+})
+export class JoistValueElement extends HTMLElement {
+  @attr()
+  accessor bind = "";
+
+  connectedCallback(): void {
+    const token = new JToken(this.bind);
+
+    this.dispatchEvent(
+      new JoistValueEvent(token, (value) => {
+        let valueToWrite: string;
+
+        if (typeof value.newValue === "object" && value.newValue !== null) {
+          valueToWrite = String(token.readTokenValueFrom(value.newValue));
+        } else {
+          valueToWrite = String(value.newValue);
+        }
+
+        if (this.textContent !== valueToWrite) {
+          this.textContent = valueToWrite;
+        }
+      }),
+    );
+  }
+}

package/src/lib/templating/events.ts

@@ -0,0 +1,21 @@
+import type { Change } from "@joist/observable";
+
+import type { JToken } from "./token.js";
+
+declare global {
+  interface HTMLElementEventMap {
+    "joist::value": JoistValueEvent;
+  }
+}
+
+export class JoistValueEvent extends Event {
+  readonly token: JToken;
+  readonly update: (value: Change<unknown>) => void;
+
+  constructor(bindTo: JToken, update: (value: Change<unknown>) => void) {
+    super("joist::value", { bubbles: true, composed: true });
+
+    this.token = bindTo;
+    this.update = update;
+  }
+}

package/src/lib/templating/token.test.ts

@@ -0,0 +1,74 @@
+import { assert } from "chai";
+
+import { JToken } from "./token.js";
+
+describe("JToken", () => {
+  describe("constructor", () => {
+    it("should initialize with a raw token", () => {
+      const token = new JToken("example.token");
+      assert.equal(token.rawToken, "example.token");
+    });
+
+    it("should set isNegated to true if the token starts with '!'", () => {
+      const token = new JToken("!example.token");
+      assert.isTrue(token.isNegated);
+    });
+
+    it("should set isNegated to false if the token does not start with '!'", () => {
+      const token = new JToken("example.token");
+      assert.isFalse(token.isNegated);
+    });
+
+    it("should correctly parse the bindTo property", () => {
+      const token = new JToken("example.token");
+      assert.equal(token.bindTo, "example");
+    });
+
+    it("should correctly parse the path property", () => {
+      const token = new JToken("example.token.part");
+      assert.deepEqual(token.path, ["token", "part"]);
+    });
+
+    it("should remove '!' from bindTo if present", () => {
+      const token = new JToken("!example.token");
+      assert.equal(token.bindTo, "example");
+    });
+  });
+
+  describe("readTokenValueFrom", () => {
+    it("should read the value from a nested object", () => {
+      const token = new JToken("example.token.part");
+      const obj = { token: { part: 42 } };
+      const value = token.readTokenValueFrom<number>(obj);
+      assert.equal(value, 42);
+    });
+
+    it("should return undefined if the path does not exist", () => {
+      const token = new JToken("example.nonexistent.path");
+      const obj = { token: { part: 42 } };
+      const value = token.readTokenValueFrom(obj);
+      assert.isUndefined(value);
+    });
+
+    it("should handle empty paths gracefully", () => {
+      const token = new JToken("example");
+      const obj = { foo: 42 };
+      const value = token.readTokenValueFrom(obj);
+
+      assert.deepEqual(value, { foo: 42 });
+    });
+
+    it("should throw an error if the object is null or undefined", () => {
+      const token = new JToken("example.token");
+      assert.throws(
+        () => token.readTokenValueFrom<any>(null as any),
+        TypeError,
+      );
+
+      assert.throws(
+        () => token.readTokenValueFrom<any>(undefined as any),
+        TypeError,
+      );
+    });
+  });
+});

package/src/lib/templating/token.ts

@@ -0,0 +1,34 @@
+export class JToken {
+  rawToken: string;
+  isNegated = false;
+  bindTo: string;
+  path: string[] = [];
+
+  constructor(rawToken: string) {
+    this.rawToken = rawToken;
+
+    this.isNegated = this.rawToken.startsWith("!");
+
+    this.path = this.rawToken.split(".");
+    this.bindTo = this.path.shift() ?? "";
+    this.bindTo = this.bindTo.replaceAll("!", "");
+  }
+
+  readTokenValueFrom<T = unknown>(obj: object): T {
+    let pointer: any = obj;
+
+    if (!this.path.length) {
+      return pointer;
+    }
+
+    for (const part of this.path) {
+      pointer = pointer[part];
+
+      if (pointer === undefined) {
+        break;
+      }
+    }
+
+    return pointer;
+  }
+}

package/src/lib/templating.ts

@@ -0,0 +1,2 @@
+export { bind } from "./templating/bind.js";
+export { JoistValueEvent } from "./templating/events.js";

package/src/lib.ts

@@ -4,5 +4,6 @@ export { listen } from "./lib/listen.js";
 export { element } from "./lib/element.js";
 export { query } from "./lib/query.js";
 export { queryAll } from "./lib/query-all.js";
+export { QueryResult } from "./lib/query.js";
 export { ready } from "./lib/lifecycle.js";
 export { attrChanged } from "./lib/attr-changed.js";

package/target/lib/query.d.ts

@@ -2,7 +2,7 @@ type Tags = keyof HTMLElementTagNameMap;
 type SVGTags = keyof SVGElementTagNameMap;
 type MathTags = keyof MathMLElementTagNameMap;
 type NodeUpdate<T extends Node> = Partial<T> | ((node: T) => Partial<T>);
-type QueryResult<T extends Node> = (updates?: NodeUpdate<T>) => T;
+export type QueryResult<T extends Node> = (updates?: NodeUpdate<T>) => T;
 export declare function query<K extends Tags>(selectors: K, root?: HTMLElement | ShadowRoot): QueryResult<HTMLElementTagNameMap[K]>;
 export declare function query<K extends SVGTags>(selectors: K, root?: HTMLElement | ShadowRoot): QueryResult<SVGElementTagNameMap[K]>;
 export declare function query<K extends MathTags>(selectors: K, root?: HTMLElement | ShadowRoot): QueryResult<MathMLElementTagNameMap[K]>;

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

@@ -0,0 +1 @@
+export declare function bind(): <This extends HTMLElement, Value>(base: ClassAccessorDecoratorTarget<This, Value>, ctx: ClassAccessorDecoratorContext<This, Value>) => ClassAccessorDecoratorResult<This, Value>;

package/target/lib/templating/bind.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"bind.js","sourceRoot":"","sources":["../../../src/lib/templating/bind.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEnE,MAAM,UAAU,IAAI;IAClB,OAAO,SAAS,aAAa,CAC3B,IAA+C,EAC/C,GAA+C;QAE/C,MAAM,eAAe,GAAG,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAE7C,OAAO;YACL,IAAI,CAAC,KAAK;gBACR,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE;oBAC1C,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,GAAG,CAAC,IAAI,EAAE,CAAC;wBAChC,MAAM,YAAY,GAAG,qBAAqB,CAAC,IAAI,CAAO,IAAI,CAAC,CAAC;wBAE5D,CAAC,CAAC,eAAe,EAAE,CAAC;wBAEpB,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;wBAE7D,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;4BACpC,MAAM,GAAG,GAAG,GAAG,CAAC,IAAkB,CAAC;4BACnC,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;4BAE7B,IAAI,GAAG,EAAE,CAAC;gCACR,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;4BAChB,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,CAAC,CAAC;gBAChD,CAAC;gBAED,OAAO,KAAK,CAAC;YACf,CAAC;YACD,GAAG,EAAE,eAAe,CAAC,GAAG;SACzB,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,4 @@
+import "./elements/for.element.js";
+import "./elements/if.element.js";
+import "./elements/props.element.js";
+import "./elements/value.element.js";

package/target/lib/templating/define.js

@@ -0,0 +1,5 @@
+import "./elements/for.element.js";
+import "./elements/if.element.js";
+import "./elements/props.element.js";
+import "./elements/value.element.js";
+//# sourceMappingURL=define.js.map

package/target/lib/templating/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/lib/templating/define.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AACnC,OAAO,0BAA0B,CAAC;AAClC,OAAO,6BAA6B,CAAC;AACrC,OAAO,6BAA6B,CAAC"}

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

@@ -0,0 +1,23 @@
+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: string;
+}
+export declare class JositForElement extends HTMLElement {
+    #private;
+    accessor bind: string;
+    accessor key: string;
+    connectedCallback(): void;
+    updateItems(): void;
+    disconnectedCallback(): void;
+}

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

@@ -0,0 +1,168 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { attr } from "../../attr.js";
+import { element } from "../../element.js";
+import { query } from "../../query.js";
+import { css, html } from "../../tags.js";
+import { bind } from "../bind.js";
+import { JoistValueEvent } from "../events.js";
+import { JToken } from "../token.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 _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; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _each_decorators = [bind()];
+            _key_decorators = [attr()];
+            __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);
+        }
+        #each_accessor_storage = __runInitializers(this, _each_initializers, {
+            value: null,
+            index: null,
+            position: null,
+        });
+        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, ""));
+        get key() { return this.#key_accessor_storage; }
+        set key(value) { this.#key_accessor_storage = value; }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _key_extraInitializers);
+        }
+    };
+    return JForScope = _classThis;
+})();
+export { JForScope };
+let JositForElement = (() => {
+    let _classDecorators = [element({
+            tagName: "j-for",
+            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 _key_decorators;
+    let _key_initializers = [];
+    let _key_extraInitializers = [];
+    var JositForElement = 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()];
+            __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(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            JositForElement = _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; }
+        #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));
+        #items = [];
+        #scopes = new Map();
+        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);
+                currentScope = currentScope.nextElementSibling;
+            }
+            const token = new JToken(this.bind);
+            this.dispatchEvent(new JoistValueEvent(token, ({ newValue, oldValue }) => {
+                if (newValue !== oldValue) {
+                    if (isIterable(newValue)) {
+                        this.#items = newValue;
+                    }
+                    else {
+                        this.#items = [];
+                    }
+                    this.updateItems();
+                }
+            }));
+        }
+        updateItems() {
+            const template = this.#template();
+            const leftoverScopes = new Map(this.#scopes);
+            let index = 0;
+            for (const item of this.#items) {
+                const key = hasProperty(item, this.key) ? item[this.key] : index;
+                let scope = leftoverScopes.get(key);
+                if (!scope) {
+                    scope = new JForScope();
+                    scope.append(document.importNode(template.content, true));
+                }
+                else {
+                    leftoverScopes.delete(key);
+                }
+                scope.key = String(key);
+                scope.each = {
+                    position: index + 1,
+                    index: index,
+                    value: item,
+                };
+                if (!scope.isConnected) {
+                    const child = this.children[index + 1];
+                    if (child) {
+                        child.before(scope);
+                    }
+                    else {
+                        this.append(scope);
+                    }
+                    this.#scopes.set(key, scope);
+                }
+                index++;
+            }
+            for (const scope of leftoverScopes.values()) {
+                scope.remove();
+            }
+        }
+        disconnectedCallback() {
+            for (const scope of this.#scopes.values()) {
+                scope.remove();
+            }
+            this.#scopes.clear();
+            this.#items = [];
+        }
+    };
+    return JositForElement = _classThis;
+})();
+export { JositForElement };
+function isIterable(obj) {
+    return obj != null && typeof obj[Symbol.iterator] === "function";
+}
+function hasProperty(item, key) {
+    return Object.prototype.hasOwnProperty.call(item, key);
+}
+//# sourceMappingURL=for.element.js.map

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

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

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

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