@joist/templating 4.2.4-next.3 → 4.2.4-next.5

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

@@ -5,86 +5,296 @@ 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>
-  `);
+// 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");
-});
+//   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>
-  `);
+// 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(), "");
-});
+//   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>
-  `);
+// 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");
-});
+//   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");
+// });
+
+// 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 render else template when condition is falsy", () => {
+it("should handle array length", () => {
   const element = fixtureSync(html`
     <div
       @joist::value=${(e: JoistValueEvent) => {
-        e.update({ oldValue: null, newValue: false });
+        e.update({ oldValue: null, newValue: [0, 1, 2] });
       }}
     >
-      <j-if bind="test">
-        <template>If Content</template>
-        <template else>Else Content</template>
+      <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(), "Else Content");
+  assert.equal(element.textContent?.trim(), "Array has length");
 });
 
-it("should switch between if and else templates", () => {
+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: false });
-        e.update({ oldValue: false, newValue: true });
+        e.update({ oldValue: null, newValue: null, firstChange: true });
       }}
     >
-      <j-if bind="test">
-        <template>If Content</template>
-        <template else>Else Content</template>
+      <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(), "If Content");
+  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 {
@@ -43,12 +43,12 @@ 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) {
-          this.apply(token.readTokenValueFrom(newValue), token.isNegated);
+      new JoistValueEvent(token, ({ newValue, oldValue, firstChange }) => {
+        if (firstChange || newValue !== oldValue) {
+          this.apply(token.readBoundValueFrom(newValue), token.isNegated);
         }
       }),
     );

package/src/lib/elements/scope.ts

@@ -24,7 +24,7 @@ export class JoistScopeElement extends HTMLElement {
 
   @listen("joist::value")
   onJoistValueFound(e: JoistValueEvent): void {
-    if (e.token.bindTo === this.name) {
+    if (e.expression.bindTo === this.name) {
       e.stopPropagation();
 
       this.#binding = e;

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,13 +18,17 @@ 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) => {
-        const valueToWrite = String(token.readTokenValueFrom(value.newValue));
+        const valueToWrite = String(token.readBoundValueFrom(value.newValue));
 
-        if (this.textContent !== valueToWrite) {
+        if (
+          valueToWrite !== null &&
+          valueToWrite !== undefined &&
+          this.textContent !== valueToWrite
+        ) {
           this.textContent = 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 {
@@ -10,16 +10,17 @@ declare global {
 
 export interface BindChange<T> extends Change<T> {
   alwaysUpdate?: boolean;
+  firstChange?: boolean;
 }
 
 export class JoistValueEvent extends Event {
-  readonly token: JToken;
+  readonly expression: JExpression;
   readonly update: (value: BindChange<unknown>) => void;
 
-  constructor(bindTo: JToken, update: (value: BindChange<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;
   }
 }

package/src/lib/expression.test.ts

@@ -0,0 +1,204 @@
+import { assert } from "chai";
+
+import { JExpression } from "./expression.js";
+
+describe("JExpression", () => {
+  describe("constructor", () => {
+    it("should initialize with a raw token", () => {
+      const token = new JExpression("example.token");
+      assert.equal(token.rawToken, "example.token");
+    });
+
+    it("should set isNegated to true if the token starts with '!'", () => {
+      const token = new JExpression("!example.token");
+      assert.isTrue(token.isNegated);
+    });
+
+    it("should set isNegated to false if the token does not start with '!'", () => {
+      const token = new JExpression("example.token");
+      assert.isFalse(token.isNegated);
+    });
+
+    it("should correctly parse the bindTo property", () => {
+      const token = new JExpression("example.token");
+      assert.equal(token.bindTo, "example");
+    });
+
+    it("should correctly parse the path property", () => {
+      const token = new JExpression("example.token.part");
+      assert.deepEqual(token.path, ["token", "part"]);
+    });
+
+    it("should remove '!' from bindTo if present", () => {
+      const token = new JExpression("!example.token");
+      assert.equal(token.bindTo, "example");
+    });
+
+    it("should parse equals operator value", () => {
+      const token = new JExpression("example==value");
+      assert.equal(token.equalsValue, "value");
+    });
+
+    it("should handle equals operator with negation", () => {
+      const token = new JExpression("!example == value");
+      assert.equal(token.equalsValue, "value");
+      assert.isTrue(token.isNegated);
+    });
+
+    it("should handle equals operator with nested paths", () => {
+      const token = new JExpression("example.nested == value");
+      assert.equal(token.equalsValue, "value");
+      assert.deepEqual(token.path, ["nested"]);
+    });
+
+    it("should parse greater than operator value", () => {
+      const token = new JExpression("example > 5");
+      assert.equal(token.gtValue, "5");
+    });
+
+    it("should parse less than operator value", () => {
+      const token = new JExpression("example < 10");
+      assert.equal(token.ltValue, "10");
+    });
+
+    it("should handle greater than operator with negation", () => {
+      const token = new JExpression("!example > 5");
+      assert.equal(token.gtValue, "5");
+      assert.isTrue(token.isNegated);
+    });
+
+    it("should handle less than operator with nested paths", () => {
+      const token = new JExpression("example.count < 10");
+      assert.equal(token.ltValue, "10");
+      assert.deepEqual(token.path, ["count"]);
+    });
+  });
+
+  describe("readTokenValueFrom", () => {
+    it("should read the value from a nested object", () => {
+      const token = new JExpression("example.token.part");
+      const obj = { token: { part: 42 } };
+      const value = token.readBoundValueFrom<number>(obj);
+      assert.equal(value, 42);
+    });
+
+    it("should return undefined if the path does not exist", () => {
+      const token = new JExpression("example.nonexistent.path");
+      const obj = { token: { part: 42 } };
+      const value = token.readBoundValueFrom(obj);
+      assert.isUndefined(value);
+    });
+
+    it("should handle empty paths gracefully", () => {
+      const token = new JExpression("example");
+      const obj = { foo: 42 };
+      const value = token.readBoundValueFrom(obj);
+
+      assert.deepEqual(value, { foo: 42 });
+    });
+
+    it("should parse values from strings", () => {
+      const token = new JExpression("example.length");
+      const value = token.readBoundValueFrom("42");
+
+      assert.equal(value, 2);
+    });
+
+    it("should return true when equals against primative", () => {
+      const token = new JExpression("example == active");
+      const value = token.readBoundValueFrom<boolean>("active");
+      assert.isTrue(value);
+    });
+
+    it("should return true when equals comparison matches", () => {
+      const token = new JExpression("example.status==active");
+      const obj = { status: "active" };
+      const value = token.readBoundValueFrom<boolean>(obj);
+      assert.isTrue(value);
+    });
+
+    it("should return false when equals comparison does not match", () => {
+      const token = new JExpression("example.status==active");
+      const obj = { status: "inactive" };
+      const value = token.readBoundValueFrom<boolean>(obj);
+      assert.isFalse(value);
+    });
+
+    it("should handle equals comparison with numbers", () => {
+      const token = new JExpression("example.count == 5");
+      const obj = { count: 5 };
+      const value = token.readBoundValueFrom<boolean>(obj);
+      assert.isTrue(value);
+    });
+
+    it("should handle equals comparison with nested paths", () => {
+      const token = new JExpression("example.user.status == active");
+      const obj = { user: { status: "active" } };
+      const value = token.readBoundValueFrom<boolean>(obj);
+      assert.isTrue(value);
+    });
+
+    it("should handle equals comparison with undefined values", () => {
+      const token = new JExpression("example.status == active");
+      const obj = { status: undefined };
+      const value = token.readBoundValueFrom<boolean>(obj);
+      assert.isFalse(value);
+    });
+
+    it("should return true when greater than comparison matches", () => {
+      const token = new JExpression("example.count > 5");
+      const obj = { count: 10 };
+      const value = token.readBoundValueFrom<boolean>(obj);
+      assert.isTrue(value);
+    });
+
+    it("should return false when greater than comparison does not match", () => {
+      const token = new JExpression("example.count > 5");
+      const obj = { count: 3 };
+      const value = token.readBoundValueFrom<boolean>(obj);
+      assert.isFalse(value);
+    });
+
+    it("should return true when less than comparison matches", () => {
+      const token = new JExpression("example.count < 10");
+      const obj = { count: 5 };
+      const value = token.readBoundValueFrom<boolean>(obj);
+      assert.isTrue(value);
+    });
+
+    it("should return false when less than comparison does not match", () => {
+      const token = new JExpression("example.count < 10");
+      const obj = { count: 15 };
+      const value = token.readBoundValueFrom<boolean>(obj);
+      assert.isFalse(value);
+    });
+
+    it("should handle greater than comparison with string numbers", () => {
+      const token = new JExpression("example.count > 5");
+      const obj = { count: "10" };
+      const value = token.readBoundValueFrom<boolean>(obj);
+      assert.isTrue(value);
+    });
+
+    it("should handle less than comparison with string numbers", () => {
+      const token = new JExpression("example.count < 10");
+      const obj = { count: "5" };
+      const value = token.readBoundValueFrom<boolean>(obj);
+      assert.isTrue(value);
+    });
+
+    it("should handle greater than comparison with undefined values", () => {
+      const token = new JExpression("example.count > 5");
+      const obj = { count: undefined };
+      const value = token.readBoundValueFrom<boolean>(obj);
+      assert.isFalse(value);
+    });
+
+    it("should handle less than comparison with undefined values", () => {
+      const token = new JExpression("example.count < 10");
+      const obj = { count: undefined };
+      const value = token.readBoundValueFrom<boolean>(obj);
+      assert.isFalse(value);
+    });
+  });
+});