@joist/templating 4.2.4-next.4 → 4.2.4-next.7

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

@@ -5,262 +5,296 @@ import { assert } from "chai";
 
 import type { JoistValueEvent } from "../events.js";
 
-it("should render content when the bind value is truthy", () => {
+// 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");
+// });
+
+// 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: true });
+        e.update({ oldValue: null, newValue: [0, 1, 2] });
       }}
     >
-      <j-if bind="test">
-        <template>Visible 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(), "Visible Content");
+  assert.equal(element.textContent?.trim(), "Array has length");
 });
 
-it("should not render content when the bind value is falsy", () => {
+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: true });
-        e.update({ oldValue: null, newValue: false });
+        e.update({ oldValue: null, newValue: null, firstChange: true });
       }}
     >
-      <j-if bind="test">
-        <template>Visible 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(), "");
-});
-
-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");
-});
-
-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");
+  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.evaluate(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.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,14 +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) => {
-        const valueToWrite = String(token.readTokenValueFrom(value.newValue));
+        const valueToWrite = token.evaluate(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 {
@@ -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;
   }
 }