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

package/README.md

@@ -7,7 +7,6 @@ The Joist templating system provides a powerful and flexible way to handle data
 - [Core Components](#core-components)
 - [Built-in Template Elements](#built-in-template-elements)
 - [Complete Example](#complete-example)
-- [Troubleshooting](#troubleshooting)
 
 ## Core Components
 
@@ -276,11 +275,3 @@ The `j-async` element supports:
 - Promise handling with automatic state transitions
 - Loading, success, and error templates
 - State object with typed data and error fields
-
-## Troubleshooting
-
-### Common Issues
-
-1. **Binding Not Updating**
-
-   - Check if the property is decorated with `@bind()`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/templating",
-  "version": "4.2.4-next.4",
+  "version": "4.2.4-next.5",
   "type": "module",
   "main": "./target/lib.js",
   "module": "./target/lib.js",

package/src/lib/bind.test.ts

@@ -0,0 +1,72 @@
+import { assert } from "chai";
+import { bind } from "./bind.js";
+import { JoistValueEvent } from "./events.js";
+import { JExpression } from "./expression.js";
+
+describe("bind decorator", () => {
+  class TestElement extends HTMLElement {
+    @bind()
+    accessor value = "initial";
+
+    @bind({ alwaysUpdate: true })
+    accessor alwaysUpdateValue = "initial";
+  }
+
+  customElements.define("test-element", TestElement);
+
+  it("should initialize with default value", () => {
+    const element = new TestElement();
+    assert.equal(element.value, "initial");
+  });
+
+  it("should update value and trigger binding", async () => {
+    const element = new TestElement();
+    let oldValue: unknown = null;
+    let newValue: unknown = null;
+
+    element.dispatchEvent(
+      new JoistValueEvent(new JExpression("value"), (update) => {
+        oldValue = update.oldValue;
+        newValue = update.newValue;
+      }),
+    );
+
+    assert.equal(oldValue, null);
+    assert.equal(newValue, "initial");
+
+    element.value = "updated";
+
+    await Promise.resolve();
+
+    assert.equal(oldValue, "initial");
+    assert.equal(newValue, "updated");
+  });
+
+  it("should trigger binding on every change with alwaysUpdate option", async () => {
+    const element = new TestElement();
+    let bindingCount = 0;
+    let oldValue: unknown;
+    let newValue: unknown;
+
+    element.dispatchEvent(
+      new JoistValueEvent(new JExpression("alwaysUpdateValue"), (update) => {
+        bindingCount++;
+        oldValue = update.oldValue;
+        newValue = update.newValue;
+      }),
+    );
+
+    assert.equal(bindingCount, 1);
+    assert.equal(oldValue, null);
+    assert.equal(newValue, "initial");
+
+    // Change some other value in the model
+    element.value = "something else";
+
+    await Promise.resolve();
+
+    assert.equal(bindingCount, 2);
+    assert.equal(oldValue, "initial");
+    assert.equal(newValue, "initial");
+  });
+});

package/src/lib/bind.ts

@@ -18,7 +18,7 @@ export function bind<This extends HTMLElement, Value>(opts: BindOpts<This, Value
     return {
       init(value) {
         this.addEventListener("joist::value", (e) => {
-          if (e.token.bindTo === ctx.name) {
+          if (e.expression.bindTo === ctx.name) {
             const instanceMeta = instanceMetadataStore.read<This>(this);
 
             e.stopPropagation();
@@ -27,14 +27,16 @@ export function bind<This extends HTMLElement, Value>(opts: BindOpts<This, Value
               oldValue: null,
               newValue: ctx.access.get(this),
               alwaysUpdate: opts.alwaysUpdate,
+              firstChange: true,
             });
 
+            const name = ctx.name as keyof This;
+
             instanceMeta.bindings.add((changes) => {
-              const key = ctx.name as keyof This;
-              const change = changes.get(key);
+              const change = changes.get(name);
 
               if (change) {
-                e.update({ ...change, alwaysUpdate: opts.alwaysUpdate });
+                e.update({ ...change, alwaysUpdate: opts.alwaysUpdate, firstChange: false });
               } else if (opts.alwaysUpdate) {
                 const value = ctx.access.get(this);
 
@@ -42,6 +44,7 @@ export function bind<This extends HTMLElement, Value>(opts: BindOpts<This, Value
                   oldValue: value,
                   newValue: value,
                   alwaysUpdate: opts.alwaysUpdate,
+                  firstChange: false,
                 });
               }
             });

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

@@ -2,7 +2,7 @@ import { attr, element, queryAll, 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 {
@@ -52,7 +52,7 @@ export class JoistAsyncElement extends HTMLElement {
       success: templates.find((t) => t.hasAttribute("success")),
     };
 
-    const token = new JToken(this.bind);
+    const token = new JExpression(this.bind);
 
     this.dispatchEvent(
       new JoistValueEvent(token, ({ newValue, oldValue }) => {

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

@@ -9,14 +9,14 @@ it("should pass props to child", () => {
   const element = fixtureSync(html`
     <div
       @joist::value=${(e: JoistValueEvent) => {
-        if (e.token.bindTo === "href") {
+        if (e.expression.bindTo === "href") {
           e.update({
             oldValue: null,
             newValue: "$foo",
           });
         }
 
-        if (e.token.bindTo === "target") {
+        if (e.expression.bindTo === "target") {
           e.update({
             oldValue: null,
             newValue: {

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

@@ -1,6 +1,6 @@
 import { attr, element, css, html } from "@joist/element";
 
-import { JToken } from "../token.js";
+import { JExpression } from "../expression.js";
 import { JoistValueEvent } from "../events.js";
 
 declare global {
@@ -9,7 +9,7 @@ declare global {
   }
 }
 
-export class JAttrToken extends JToken {
+export class JAttrToken extends JExpression {
   mapTo: string;
 
   constructor(binding: string) {
@@ -80,14 +80,14 @@ export class JoistBindElement extends HTMLElement {
       .filter((b) => b);
   }
 
-  #dispatch(token: JToken, write: (value: unknown) => void) {
+  #dispatch(token: JExpression, write: (value: unknown) => void) {
     this.dispatchEvent(
       new JoistValueEvent(token, ({ newValue, oldValue, alwaysUpdate }) => {
         if (newValue === oldValue && !alwaysUpdate) {
           return;
         }
 
-        let valueToWrite = token.readTokenValueFrom(newValue);
+        let valueToWrite = token.readBoundValueFrom(newValue);
 
         if (token.isNegated) {
           valueToWrite = !valueToWrite;

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