@joist/templating 4.2.4-next.1 → 4.2.4-next.11

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

@@ -2,7 +2,7 @@ import { attr, element, query, css, html } from "@joist/element";
 
 import { bind } from "../bind.js";
 import { JoistValueEvent } from "../events.js";
-import { JToken } from "../token.js";
+import { JExpression } from "../expression.js";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -31,7 +31,7 @@ export class JForScope<T = unknown> extends HTMLElement {
   };
 
   @attr()
-  accessor key = "";
+  accessor key: unknown;
 }
 
 @element({
@@ -64,7 +64,7 @@ export class JositForElement extends HTMLElement {
       currentScope = currentScope.nextElementSibling;
     }
 
-    const token = new JToken(this.bind);
+    const token = new JExpression(this.bind);
 
     this.dispatchEvent(
       new JoistValueEvent(token, ({ newValue, oldValue }) => {
@@ -98,11 +98,15 @@ export class JositForElement extends HTMLElement {
 
     let index = 0;
     for (const value of this.#items) {
-      const key = keyProperty && hasProperty(value, keyProperty) ? value[keyProperty] : index;
+      let key: unknown = index;
+
+      if (keyProperty && hasProperty(value, keyProperty)) {
+        key = value[keyProperty];
+      }
 
       const scope = new JForScope();
       scope.append(document.importNode(templateContent, true));
-      scope.key = String(key);
+      scope.key = key;
       scope.each = { position: index + 1, index, value };
 
       fragment.appendChild(scope);
@@ -118,13 +122,16 @@ export class JositForElement extends HTMLElement {
   updateItems(): void {
     const template = this.#template();
     const leftoverScopes = new Map<unknown, JForScope>(this.#scopes);
-    const keyProperty = this.key; // Cache the key property
+    const keyProperty = this.key;
 
     let index = 0;
 
     for (const value of this.#items) {
-      // Optimize key lookup by caching the property check
-      const key = keyProperty && hasProperty(value, keyProperty) ? value[keyProperty] : index;
+      let key: unknown = index;
+
+      if (keyProperty && hasProperty(value, keyProperty)) {
+        key = value[keyProperty];
+      }
 
       let scope = leftoverScopes.get(key);
 
@@ -138,7 +145,7 @@ export class JositForElement extends HTMLElement {
 
       // Only update if values have changed
       if (scope.key !== key || scope.each.value !== value) {
-        scope.key = String(key);
+        scope.key = key;
         scope.each = { position: index + 1, index, value };
       }
 

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

@@ -88,3 +88,213 @@ it("should switch between if and else templates", () => {
 
   assert.equal(element.textContent?.trim(), "If Content");
 });
+
+it("should handle equality comparison", () => {
+  const element = fixtureSync(html`
+    <div
+      @joist::value=${(e: JoistValueEvent) => {
+        e.update({ oldValue: null, newValue: { status: "active" } });
+      }}
+    >
+      <j-if bind="example.status == active">
+        <template>Status is Active</template>
+      </j-if>
+    </div>
+  `);
+
+  assert.equal(element.textContent?.trim(), "Status is Active");
+});
+
+it("should handle greater than comparison", () => {
+  const element = fixtureSync(html`
+    <div
+      @joist::value=${(e: JoistValueEvent) => {
+        e.update({ oldValue: null, newValue: { count: 10 } });
+      }}
+    >
+      <j-if bind="example.count > 5">
+        <template>Count is Greater Than 5</template>
+      </j-if>
+    </div>
+  `);
+
+  assert.equal(element.textContent?.trim(), "Count is Greater Than 5");
+});
+
+it("should handle less than comparison", () => {
+  const element = fixtureSync(html`
+    <div
+      @joist::value=${(e: JoistValueEvent) => {
+        e.update({ oldValue: null, newValue: { score: 75 } });
+      }}
+    >
+      <j-if bind="example.score < 100">
+        <template>Score is Less Than 100</template>
+      </j-if>
+    </div>
+  `);
+
+  assert.equal(element.textContent?.trim(), "Score is Less Than 100");
+});
+
+it("should handle nested path comparisons", () => {
+  const element = fixtureSync(html`
+    <div
+      @joist::value=${(e: JoistValueEvent) => {
+        e.update({ oldValue: null, newValue: { user: { score: 150 } } });
+      }}
+    >
+      <j-if bind="example.user.score > 100">
+        <template>User Score is Above 100</template>
+      </j-if>
+    </div>
+  `);
+
+  assert.equal(element.textContent?.trim(), "User Score is Above 100");
+});
+
+it("should handle negated comparisons", () => {
+  const element = fixtureSync(html`
+    <div
+      @joist::value=${(e: JoistValueEvent) => {
+        e.update({ oldValue: null, newValue: { status: "inactive" } });
+      }}
+    >
+      <j-if bind="!example.status == active">
+        <template>Status is Not Active</template>
+      </j-if>
+    </div>
+  `);
+
+  assert.equal(element.textContent?.trim(), "Status is Not Active");
+});
+
+it("should handle string number comparisons", () => {
+  const element = fixtureSync(html`
+    <div
+      @joist::value=${(e: JoistValueEvent) => {
+        e.update({ oldValue: null, newValue: { count: "10" } });
+      }}
+    >
+      <j-if bind="example.count > 5">
+        <template>String Count is Greater Than 5</template>
+      </j-if>
+    </div>
+  `);
+
+  assert.equal(element.textContent?.trim(), "String Count is Greater Than 5");
+});
+
+it("should handle undefined values in comparisons", () => {
+  const element = fixtureSync(html`
+    <div
+      @joist::value=${(e: JoistValueEvent) => {
+        e.update({ oldValue: null, newValue: { count: undefined } });
+      }}
+    >
+      <j-if bind="example.count > 5">
+        <template>Count is Greater Than 5</template>
+      </j-if>
+    </div>
+  `);
+
+  assert.equal(element.textContent?.trim(), "");
+});
+
+it("should handle not equal comparison", () => {
+  const element = fixtureSync(html`
+    <div
+      @joist::value=${(e: JoistValueEvent) => {
+        e.update({ oldValue: null, newValue: { status: "inactive" } });
+      }}
+    >
+      <j-if bind="example.status != active">
+        <template>Status is Not Active</template>
+      </j-if>
+    </div>
+  `);
+
+  assert.equal(element.textContent?.trim(), "Status is Not Active");
+});
+
+it("should handle not equal comparison with matching value", () => {
+  const element = fixtureSync(html`
+    <div
+      @joist::value=${(e: JoistValueEvent) => {
+        e.update({ oldValue: null, newValue: { status: "active" } });
+      }}
+    >
+      <j-if bind="example.status != active">
+        <template>Status is Not Active</template>
+      </j-if>
+    </div>
+  `);
+
+  assert.equal(element.textContent?.trim(), "");
+});
+
+it("should handle not equal comparison with string numbers", () => {
+  const element = fixtureSync(html`
+    <div
+      @joist::value=${(e: JoistValueEvent) => {
+        e.update({ oldValue: null, newValue: { count: "10" } });
+      }}
+    >
+      <j-if bind="example.count != 5">
+        <template>Count is Not 5</template>
+      </j-if>
+    </div>
+  `);
+
+  assert.equal(element.textContent?.trim(), "Count is Not 5");
+});
+
+it("should handle not equal comparison with undefined", () => {
+  const element = fixtureSync(html`
+    <div
+      @joist::value=${(e: JoistValueEvent) => {
+        e.update({ oldValue: null, newValue: { status: undefined } });
+      }}
+    >
+      <j-if bind="example.status != active">
+        <template>Status is Not Active</template>
+      </j-if>
+    </div>
+  `);
+
+  assert.equal(element.textContent?.trim(), "Status is Not Active");
+});
+
+it("should handle array length", () => {
+  const element = fixtureSync(html`
+    <div
+      @joist::value=${(e: JoistValueEvent) => {
+        e.update({ oldValue: null, newValue: [0, 1, 2] });
+      }}
+    >
+      <j-if bind="example.length">
+        <template>Array has length</template>
+        <template else>Array has no length</template>
+      </j-if>
+    </div>
+  `);
+
+  assert.equal(element.textContent?.trim(), "Array has length");
+});
+
+it("should handle a first change even if the value is the same", () => {
+  const element = fixtureSync(html`
+    <div
+      @joist::value=${(e: JoistValueEvent) => {
+        e.update({ oldValue: null, newValue: null, firstChange: true });
+      }}
+    >
+      <j-if bind="example.length">
+        <template>Array has length</template>
+        <template else>Array has no length</template>
+      </j-if>
+    </div>
+  `);
+
+  assert.equal(element.textContent?.trim(), "Array has no length");
+});

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

@@ -1,7 +1,7 @@
 import { attr, element, queryAll, css, html } from "@joist/element";
 
 import { JoistValueEvent } from "../events.js";
-import { JToken } from "../token.js";
+import { JExpression } from "../expression.js";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -20,6 +20,8 @@ export class JoistIfElement extends HTMLElement {
 
   #templates = queryAll<HTMLTemplateElement>("template", this);
 
+  #shouldShowIf: boolean | null = null;
+
   connectedCallback(): void {
     const templates = Array.from(this.#templates());
 
@@ -43,28 +45,31 @@ export class JoistIfElement extends HTMLElement {
     // make sure there are no other nodes after the template
     this.#clean();
 
-    const token = new JToken(this.bind);
+    const token = new JExpression(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);
-          }
+      new JoistValueEvent(token, ({ newValue, oldValue, firstChange }) => {
+        if (firstChange || newValue !== oldValue) {
+          this.apply(token.evaluate(newValue), token.isNegated);
         }
       }),
     );
   }
 
   apply(value: unknown, isNegative: boolean): void {
+    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);

package/src/lib/elements/scope.element.test.ts

@@ -0,0 +1,32 @@
+import "./scope.element.js";
+import "./value.element.js";
+
+import { fixtureSync, html } from "@open-wc/testing";
+import { assert } from "chai";
+import { JoistScopeElement } from "./scope.element.js";
+
+describe("j-scope", () => {
+  it("should render its children", () => {
+    const element = fixtureSync<JoistScopeElement>(html`
+      <j-scope>
+        <div>Test Content</div>
+      </j-scope>
+    `);
+
+    assert.equal(element.textContent?.trim(), "Test Content");
+  });
+
+  it("should set and get scope property", async () => {
+    const element = fixtureSync<JoistScopeElement>(html`
+      <j-scope>
+        <j-val bind="scope.foo"></j-val>
+      </j-scope>
+    `);
+
+    element.scope = { foo: "bar" };
+
+    await Promise.resolve();
+
+    assert.equal(element.textContent?.trim(), "bar");
+  });
+});

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

@@ -0,0 +1,19 @@
+import { element, css, html } from "@joist/element";
+
+import { bind } from "../bind.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "j-scope": JoistScopeElement;
+  }
+}
+
+@element({
+  tagName: "j-scope",
+  // prettier-ignore
+  shadowDom: [css`:host{display: contents;}`, html`<slot></slot>`],
+})
+export class JoistScopeElement extends HTMLElement {
+  @bind()
+  accessor scope: any = null;
+}

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

@@ -18,3 +18,31 @@ it("should render content when the bind value is truthy", () => {
 
   assert.equal(element.textContent?.trim(), "Hello World");
 });
+
+it("should not write null values to textContent", () => {
+  const element = fixtureSync(html`
+    <div
+      @joist::value=${(e: JoistValueEvent) => {
+        e.update({ oldValue: "Hello", newValue: null });
+      }}
+    >
+      <j-val bind="test">Hello World</j-val>
+    </div>
+  `);
+
+  assert.equal(element.textContent?.trim(), "Hello World");
+});
+
+it("should not write undefined values to textContent", () => {
+  const element = fixtureSync(html`
+    <div
+      @joist::value=${(e: JoistValueEvent) => {
+        e.update({ oldValue: "Hello", newValue: undefined });
+      }}
+    >
+      <j-val bind="test">Hello World</j-val>
+    </div>
+  `);
+
+  assert.equal(element.textContent?.trim(), "Hello World");
+});

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

@@ -1,6 +1,6 @@
 import { attr, element, css, html } from "@joist/element";
 import { JoistValueEvent } from "../events.js";
-import { JToken } from "../token.js";
+import { JExpression } from "../expression.js";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -18,20 +18,18 @@ export class JoistValueElement extends HTMLElement {
   accessor bind = "";
 
   connectedCallback(): void {
-    const token = new JToken(this.bind);
+    const token = new JExpression(this.bind);
 
     this.dispatchEvent(
       new JoistValueEvent(token, (value) => {
-        let valueToWrite: string;
+        const valueToWrite = token.evaluate(value.newValue);
 
-        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;
+        if (
+          valueToWrite !== null &&
+          valueToWrite !== undefined &&
+          this.textContent !== valueToWrite
+        ) {
+          this.textContent = String(valueToWrite);
         }
       }),
     );

package/src/lib/events.ts

@@ -1,6 +1,6 @@
 import type { Change } from "@joist/observable";
 
-import type { JToken } from "./token.js";
+import type { JExpression } from "./expression.js";
 
 declare global {
   interface HTMLElementEventMap {
@@ -8,14 +8,19 @@ declare global {
   }
 }
 
+export interface BindChange<T> extends Change<T> {
+  alwaysUpdate?: boolean;
+  firstChange?: boolean;
+}
+
 export class JoistValueEvent extends Event {
-  readonly token: JToken;
-  readonly update: (value: Change<unknown>) => void;
+  readonly expression: JExpression;
+  readonly update: (value: BindChange<unknown>) => void;
 
-  constructor(bindTo: JToken, update: (value: Change<unknown>) => void) {
+  constructor(expression: JExpression, update: (value: BindChange<unknown>) => void) {
     super("joist::value", { bubbles: true, composed: true });
 
-    this.token = bindTo;
+    this.expression = expression;
     this.update = update;
   }
 }