@joist/element 4.2.2 → 4.2.3-next.1

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

@@ -0,0 +1,221 @@
+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

@@ -0,0 +1,153 @@
+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

@@ -0,0 +1,90 @@
+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

@@ -0,0 +1,93 @@
+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();
+  }
+}

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));
+                }
+              }
+            }),
+          );
+        }
+      }
+    }
+  }
+}