@joist/element 4.2.3-next.13 → 4.2.3-next.3

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

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";