@joist/element 4.2.3-next.1 → 4.2.3-next.11

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

@@ -1,122 +0,0 @@
-import { attr } from "../../attr.js";
-import { element } from "../../element.js";
-import { queryAll } from "../../query-all.js";
-import { css, html } from "../../tags.js";
-import { bind } from "../bind.js";
-
-import { JoistValueEvent } from "../events.js";
-import { JToken } from "../token.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "j-async": JoistAsyncElement;
-  }
-}
-
-export type AsyncState<T = unknown, E = unknown> = {
-  status: "loading" | "error" | "success";
-  data?: T;
-  error?: E;
-};
-
-@element({
-  tagName: "j-async",
-  // prettier-ignore
-  shadowDom: [css`:host{display: contents;}`, html`<slot></slot>`],
-})
-export class JoistAsyncElement extends HTMLElement {
-  @attr()
-  accessor bind = "";
-
-  @bind()
-  accessor state: AsyncState | null = null;
-
-  #templates = queryAll<HTMLTemplateElement>("template", this);
-  #currentNodes: Node[] = [];
-  #cachedTemplates: {
-    loading?: HTMLTemplateElement;
-    error?: HTMLTemplateElement;
-    success?: HTMLTemplateElement;
-  } = {
-    loading: undefined,
-    error: undefined,
-    success: undefined,
-  };
-
-  connectedCallback(): void {
-    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")),
-    };
-
-    const token = new JToken(this.bind);
-
-    this.dispatchEvent(
-      new JoistValueEvent(token, ({ newValue, oldValue }) => {
-        if (newValue !== oldValue) {
-          if (newValue instanceof Promise) {
-            this.#handlePromise(newValue);
-          } else {
-            console.warn("j-async bind value must be a Promise or AsyncState");
-          }
-        }
-      }),
-    );
-  }
-
-  async #handlePromise(promise: Promise<unknown>): Promise<void> {
-    try {
-      this.#handleState({ status: "loading" });
-      const data = await promise;
-      this.#handleState({ status: "success", data });
-    } catch (error) {
-      this.#handleState({ status: "error", error });
-    }
-  }
-
-  #handleState(state: AsyncState): void {
-    this.#clean();
-
-    let template: HTMLTemplateElement | undefined = undefined;
-
-    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(): void {
-    for (const node of this.#currentNodes) {
-      node.parentNode?.removeChild(node);
-    }
-    this.#currentNodes = [];
-  }
-
-  disconnectedCallback(): void {
-    this.#clean();
-  }
-}

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

@@ -1,221 +0,0 @@
-import "./for.element.js";
-import "./value.element.js";
-
-import { fixtureSync, html } from "@open-wc/testing";
-import { assert } from "chai";
-
-import type { JoistValueEvent } from "../events.js";
-
-it("should iterate over an iterable", () => {
-  const element = fixtureSync(html`
-    <div
-      @joist::value=${(e: JoistValueEvent) => {
-        e.update({
-          oldValue: null,
-          newValue: new Set([
-            { id: "123", label: "Hello" },
-            { id: "456", label: "World" },
-          ]),
-        });
-      }}
-    >
-      <ul>
-        <j-for bind="items" key="id">
-          <template>
-            <li>
-              <j-value bind="each.value.label"></j-value>
-            </li>
-          </template>
-        </j-for>
-      </ul>
-    </div>
-  `);
-
-  const listItems = element.querySelectorAll("li");
-
-  assert.equal(listItems.length, 2);
-  assert.equal(listItems[0].textContent?.trim(), "Hello");
-  assert.equal(listItems[1].textContent?.trim(), "World");
-});
-
-it("should handle empty arrays", () => {
-  const element = fixtureSync(html`
-    <div
-      @joist::value=${(e: JoistValueEvent) => {
-        e.update({
-          oldValue: null,
-          newValue: [],
-        });
-      }}
-    >
-      <j-for bind="items">
-        <template>
-          <div>Item</div>
-        </template>
-      </j-for>
-    </div>
-  `);
-
-  assert.equal(element.querySelectorAll("div").length, 0);
-});
-
-it("should update when items are added or removed", () => {
-  const element = fixtureSync(html`
-    <div
-      @joist::value=${(e: JoistValueEvent) => {
-        // Initial items
-        e.update({
-          oldValue: null,
-          newValue: [
-            { id: "1", text: "First" },
-            { id: "2", text: "Second" },
-          ],
-        });
-
-        // Add an item
-        e.update({
-          oldValue: null,
-          newValue: [
-            { id: "1", text: "First" },
-            { id: "2", text: "Second" },
-            { id: "3", text: "Third" },
-          ],
-        });
-
-        // Remove an item
-        e.update({
-          oldValue: null,
-          newValue: [
-            { id: "1", text: "First" },
-            { id: "3", text: "Third" },
-          ],
-        });
-      }}
-    >
-      <j-for bind="items" key="id">
-        <template>
-          <j-value bind="each.value.text"></j-value>
-        </template>
-      </j-for>
-    </div>
-  `);
-
-  const items = element.querySelectorAll("j-value");
-  assert.equal(items.length, 2);
-  assert.equal(items[0].textContent?.trim(), "First");
-  assert.equal(items[1].textContent?.trim(), "Third");
-});
-
-it("should provide index and position information", () => {
-  const element = fixtureSync(html`
-    <div
-      @joist::value=${(e: JoistValueEvent) => {
-        e.update({
-          oldValue: null,
-          newValue: ["A", "B", "C"],
-        });
-      }}
-    >
-      <j-for bind="items">
-        <template>
-          <j-value bind="each.value"></j-value>
-          (index: <j-value bind="each.index"></j-value>,
-          position: <j-value bind="each.position"></j-value>)
-        </template>
-      </j-for>
-    </div>
-  `);
-
-  const items = element.querySelectorAll("j-for-scope");
-  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)",
-  );
-  assert.equal(
-    items[2].textContent?.trim().replaceAll("\n", "").replaceAll(" ", ""),
-    "C(index:2,position:3)",
-  );
-});
-
-// it("should handle nested j-for elements", () => {
-//   const element = fixtureSync(html`
-//     <div
-//       @joist::value=${(e: JoistValueEvent) => {
-//         e.update({
-//           oldValue: null,
-//           newValue: [
-//             { id: "1", items: ["A", "B"] },
-//             { id: "2", items: ["C", "D"] },
-//           ],
-//         });
-//       }}
-//     >
-//       <j-for bind="groups" key="id">
-//         <template>
-//           <div class="group">
-//             <j-for bind="each.value.items">
-//               <template>
-//                 <j-value class="child" bind="each.value"></j-value>
-//               </template>
-//             </j-for>
-//           </div>
-//         </template>
-//       </j-for>
-//     </div>
-//   `);
-
-//   const groups = element.querySelectorAll(".group");
-//   assert.equal(groups.length, 2);
-
-//   const items = element.querySelectorAll(".child");
-//   assert.equal(items.length, 4);
-//   assert.equal(items[0].textContent?.trim(), "A");
-//   assert.equal(items[1].textContent?.trim(), "B");
-//   assert.equal(items[2].textContent?.trim(), "C");
-//   assert.equal(items[3].textContent?.trim(), "D");
-// });
-
-it("should maintain DOM order when items are reordered", () => {
-  const element = fixtureSync(html`
-    <div
-      @joist::value=${(e: JoistValueEvent) => {
-        // Initial order
-        e.update({
-          oldValue: null,
-          newValue: [
-            { id: "1", text: "First" },
-            { id: "2", text: "Second" },
-            { id: "3", text: "Third" },
-          ],
-        });
-
-        // Reorder items
-        e.update({
-          oldValue: null,
-          newValue: [
-            { id: "3", text: "Third" },
-            { id: "1", text: "First" },
-            { id: "2", text: "Second" },
-          ],
-        });
-      }}
-    >
-      <j-for bind="items" key="id">
-        <template>
-          <j-value bind="each.value.text"></j-value>
-        </template>
-      </j-for>
-    </div>
-  `);
-
-  const items = element.querySelectorAll("j-value");
-  assert.equal(items.length, 3);
-  assert.equal(items[0].textContent?.trim(), "Third");
-  assert.equal(items[1].textContent?.trim(), "First");
-  assert.equal(items[2].textContent?.trim(), "Second");
-});

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

@@ -1,153 +0,0 @@
-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";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "j-for": JositForElement;
-    "j-for-scope": JForScope;
-  }
-}
-
-export interface EachCtx<T> {
-  value: T | null;
-  index: number | null;
-  position: number | null;
-}
-
-@element({
-  tagName: "j-for-scope",
-  // prettier-ignore
-  shadowDom: [css`:host{display: contents;}`, html`<slot></slot>`],
-})
-export class JForScope<T = unknown> extends HTMLElement {
-  @bind()
-  accessor each: EachCtx<T> = {
-    value: null,
-    index: null,
-    position: null,
-  };
-
-  @attr()
-  accessor key = "";
-}
-
-@element({
-  tagName: "j-for",
-  // prettier-ignore
-  shadowDom: [css`:host{display:contents;}`, html`<slot></slot>`],
-})
-export class JositForElement extends HTMLElement {
-  @attr()
-  accessor bind = "";
-
-  @attr()
-  accessor key = "";
-
-  #template = query("template", this);
-  #items: Iterable<unknown> = [];
-  #scopes = new Map<unknown, JForScope>();
-
-  connectedCallback(): void {
-    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(): void {
-    const template = this.#template();
-    const leftoverScopes = new Map<unknown, JForScope>(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); // Remove from map to track unused scopes
-      }
-
-      scope.key = String(key);
-      scope.each = {
-        position: index + 1,
-        index: index,
-        value: item,
-      };
-
-      const child = this.children[index + 1]; // skip first child since it should be the template element
-
-      if (!scope.isConnected) {
-        if (child) {
-          child.before(scope);
-        } else {
-          this.append(scope);
-        }
-      } else if (child !== scope) {
-        child.before(scope);
-      }
-
-      this.#scopes.set(key, scope);
-
-      index++;
-    }
-
-    // Remove unused scopes
-    for (const scope of leftoverScopes.values()) {
-      scope.remove();
-    }
-  }
-
-  disconnectedCallback(): void {
-    for (const scope of this.#scopes.values()) {
-      scope.remove();
-    }
-
-    this.#scopes.clear();
-    this.#items = [];
-  }
-}
-
-function isIterable<T = unknown>(obj: any): obj is Iterable<T> {
-  return obj != null && typeof obj[Symbol.iterator] === "function";
-}
-function hasProperty(
-  item: unknown,
-  key: string,
-): item is Record<string, unknown> {
-  return Object.prototype.hasOwnProperty.call(item, key);
-}

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

@@ -1,90 +0,0 @@
-import "./if.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: true });
-      }}
-    >
-      <j-if bind="test">
-        <template>Visible Content</template>
-      </j-if>
-    </div>
-  `);
-
-  assert.equal(element.textContent?.trim(), "Visible Content");
-});
-
-it("should not render content when the bind value is falsy", () => {
-  const element = fixtureSync(html`
-    <div
-      @joist::value=${(e: JoistValueEvent) => {
-        e.update({ oldValue: null, newValue: true });
-        e.update({ oldValue: null, newValue: false });
-      }}
-    >
-      <j-if bind="test">
-        <template>Visible Content</template>
-      </j-if>
-    </div>
-  `);
-
-  assert.equal(element.textContent?.trim(), "");
-});
-
-it("should handle negated tokens correctly", () => {
-  const element = fixtureSync(html`
-    <div
-      @joist::value=${(e: JoistValueEvent) => {
-        e.update({ oldValue: null, newValue: false });
-      }}
-    >
-      <j-if bind="!test">
-        <template>Visible Content</template>
-      </j-if>
-    </div>
-  `);
-
-  assert.equal(element.textContent?.trim(), "Visible Content");
-});
-
-it("should render else template when condition is falsy", () => {
-  const element = fixtureSync(html`
-    <div
-      @joist::value=${(e: JoistValueEvent) => {
-        e.update({ oldValue: null, newValue: false });
-      }}
-    >
-      <j-if bind="test">
-        <template>If Content</template>
-        <template else>Else Content</template>
-      </j-if>
-    </div>
-  `);
-
-  assert.equal(element.textContent?.trim(), "Else Content");
-});
-
-it("should switch between if and else templates", () => {
-  const element = fixtureSync(html`
-    <div
-      @joist::value=${(e: JoistValueEvent) => {
-        e.update({ oldValue: null, newValue: false });
-        e.update({ oldValue: false, newValue: true });
-      }}
-    >
-      <j-if bind="test">
-        <template>If Content</template>
-        <template else>Else Content</template>
-      </j-if>
-    </div>
-  `);
-
-  assert.equal(element.textContent?.trim(), "If Content");
-});

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

@@ -1,93 +0,0 @@
-import { attr } from "../../attr.js";
-import { element } from "../../element.js";
-import { queryAll } from "../../query-all.js";
-import { css, html } from "../../tags.js";
-
-import { JoistValueEvent } from "../events.js";
-import { JToken } from "../token.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "j-if": JoistIfElement;
-  }
-}
-
-@element({
-  tagName: "j-if",
-  // prettier-ignore
-  shadowDom: [css`:host{display: contents;}`, html`<slot></slot>`],
-})
-export class JoistIfElement extends HTMLElement {
-  @attr()
-  accessor bind = "";
-
-  #templates = queryAll<HTMLTemplateElement>("template", this);
-
-  connectedCallback(): void {
-    const templates = Array.from(this.#templates());
-
-    if (templates.length === 0) {
-      throw new Error("j-if requires at least one template element");
-    }
-
-    if (templates.length > 2) {
-      throw new Error("j-if can only have two template elements (if and else)");
-    }
-
-    if (
-      templates.length === 2 &&
-      !templates.some((t) => t.hasAttribute("else"))
-    ) {
-      throw new Error(
-        "When using two templates, one must have the else attribute",
-      );
-    }
-
-    if (templates.length === 2 && templates[0].hasAttribute("else")) {
-      // Swap templates to ensure if template is first
-      [templates[0], templates[1]] = [templates[1], templates[0]];
-    }
-
-    // make sure there are no other nodes after the template
-    this.#clean();
-
-    const token = new JToken(this.bind);
-
-    this.dispatchEvent(
-      new JoistValueEvent(token, ({ newValue, oldValue }) => {
-        if (newValue !== oldValue) {
-          if (typeof newValue === "object" && newValue !== null) {
-            this.apply(token.readTokenValueFrom(newValue), token.isNegated);
-          } else {
-            this.apply(newValue, token.isNegated);
-          }
-        }
-      }),
-    );
-  }
-
-  apply(value: unknown, isNegative: boolean): void {
-    this.#clean();
-
-    const templates = this.#templates();
-
-    const shouldShowIf = isNegative ? !value : value;
-    const templateToUse = shouldShowIf ? templates[0] : templates[1];
-
-    if (templateToUse) {
-      const content = document.importNode(templateToUse.content, true);
-
-      this.appendChild(content);
-    }
-  }
-
-  #clean(): void {
-    while (!(this.lastChild instanceof HTMLTemplateElement)) {
-      this.lastChild?.remove();
-    }
-  }
-
-  disconnectedCallback(): void {
-    this.#clean();
-  }
-}