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

package/README.md

@@ -20,7 +20,7 @@ import { bind } from "@joist/templating";
 
 class MyElement extends HTMLElement {
   @bind()
-  accessor myProperty: string;
+  accessor myProperty = "";
 }
 ```
 
@@ -36,33 +36,13 @@ class MyElement extends HTMLElement {
   @observe()
   assessor value = "Hello World";
 
-  @bind((instance) => instance.value.toUpperCase())
+  @bind({
+    compute: (i) => i.value.toUpperCase()
+  })
   accessor formattedValue = "";
 }
 ```
 
-### Token System (`token.ts`)
-
-The `JToken` class handles parsing and evaluation of binding expressions. It supports:
-
-NOTE: Most of the time you will not be using this yourself.
-
-- Simple property bindings: `propertyName`
-- Nested property access: `user.profile.name`
-- Negation operator: `!isVisible`
-- Array access: `items.0.name`
-
-Example usage:
-
-```typescript
-const token = new JToken("user.name");
-const value = token.readTokenValueFrom(context);
-
-// With negation
-const negatedToken = new JToken("!isVisible");
-const isHidden = negatedToken.readTokenValueFrom(context);
-```
-
 ## Built-in Template Elements
 
 Joist provides several built-in template elements for common templating needs:
@@ -82,7 +62,7 @@ Displays a bound value as text content:
 <j-val bind="user.profile.address.city"></j-val>
 
 <!-- With array access -->
-<j-val bind="items[0].name"></j-val>
+<j-val bind="items.0.name"></j-val>
 ```
 
 ### Conditional Rendering (`j-if`)
@@ -104,6 +84,38 @@ Conditionally renders content based on a boolean expression:
   </template>
 </j-if>
 
+<!-- With comparison operators -->
+<j-if bind="status == active">
+  <template>
+    <div>Status is active</div>
+  </template>
+</j-if>
+
+<j-if bind="status != active">
+  <template>
+    <div>Status is not active</div>
+  </template>
+</j-if>
+
+<j-if bind="count > 5">
+  <template>
+    <div>Count is greater than 5</div>
+  </template>
+</j-if>
+
+<j-if bind="score < 100">
+  <template>
+    <div>Score is less than 100</div>
+  </template>
+</j-if>
+
+<!-- With nested paths -->
+<j-if bind="user.score > 100">
+  <template>
+    <div>User's score is above 100</div>
+  </template>
+</j-if>
+
 <!-- With else template -->
 <j-if bind="isLoggedIn">
   <template>
@@ -119,6 +131,12 @@ The `j-if` element supports:
 
 - Boolean expressions for conditional rendering
 - Negation operator (`!`) for inverse conditions
+- Comparison operators:
+  - Equality (`==`): `status == active`
+  - Inequality (`!=`): `status != active`
+  - Greater than (`>`): `count > 5`
+  - Less than (`<`): `score < 100`
+- Nested property paths: `user.score > 100`
 - Optional `else` template for fallback content
 - Automatic cleanup of removed content
 
@@ -266,133 +284,3 @@ The `j-async` element supports:
 1. **Binding Not Updating**
 
    - Check if the property is decorated with `@bind()`
-   - Verify the binding expression is correct
-   - Ensure the property is being updated correctly
-
-2. **List Rendering Issues**
-
-   - Verify the `key` attribute is unique and stable
-   - Check if the list items are properly structured
-   - Ensure the binding expression matches the data structure
-
-3. **Async State Problems**
-   - Verify the Promise is properly resolved/rejected
-   - Check if all required templates are present
-   - Ensure error handling is implemented
-
-## Manual Value Handling
-
-You can manually handle value requests and updates by listening for the `joist::value` event. This is useful when you need more control over the binding process or want to implement custom binding logic:
-
-```typescript
-class MyElement extends HTMLElement {
-  connectedCallback() {
-    // Listen for value requests
-    this.addEventListener("joist::value", (e) => {
-      const token = e.token;
-
-      // Handle the value request
-      if (token.bindTo === "myValue") {
-        // Update the value
-        e.update({
-          oldValue: this.myValue,
-          newValue: this.myValue,
-        });
-      }
-    });
-  }
-}
-```
-
-## Complete Example
-
-Here's a complete todo application in a single component:
-
-```typescript
-import { bind } from "@joist/templating";
-import { element, html, css, listen, query } from "@joist/element";
-
-interface Todo {
-  id: string;
-  text: string;
-}
-
-@element({
-  tagName: "todo-list",
-  shadowDom: [
-    css`
-      :host {
-        display: block;
-        max-width: 600px;
-        margin: 2rem auto;
-      }
-      .form {
-        display: flex;
-        gap: 1rem;
-      }
-      .todo-item {
-        align-items: center;
-        display: flex;
-        gap: 0.5rem;
-        margin: 0.5rem 0;
-      }
-      .todo-text {
-        flex: 1;
-      }
-    `,
-    html`
-      <form class="form">
-        <input type="text" placeholder="What needs to be done?" />
-        <button type="submit">Add</button>
-      </form>
-
-      <j-if bind="!todos.length">
-        <template>
-          <p>No todos yet!</p>
-        </template>
-      </j-if>
-
-      <j-for id="todos" bind="todos" key="id">
-        <template>
-          <div class="todo-item">
-            <j-val class="todo-text" bind="each.value.text"></j-val>
-
-            <j-bind attrs="data-id:each.value.id">
-              <button>×</button>
-            </j-bind>
-          </div>
-        </template>
-      </j-for>
-
-      <j-val bind="todos.length"></j-val> remaining
-    `,
-  ],
-})
-export class TodoList extends HTMLElement {
-  @bind()
-  accessor todos: Todo[] = [];
-
-  #nextId = 1;
-  #input = query("input");
-
-  @listen("submit", "form")
-  onSubmit(e: SubmitEvent) {
-    e.preventDefault();
-
-    const input = this.#input();
-
-    this.todos = [...this.todos, { id: String(this.#nextId++), text: input.value.trim() }];
-
-    input.value = "";
-  }
-
-  @listen("click", "#todos")
-  onDelete(e: Event) {
-    if (e.target instanceof HTMLButtonElement) {
-      const id = Number(e.target.dataset.id);
-
-      this.todos = this.todos.filter((todo) => todo.id !== id);
-    }
-  }
-}
-```

package/package.json

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

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

@@ -87,11 +87,7 @@ export class JoistBindElement extends HTMLElement {
           return;
         }
 
-        let valueToWrite = newValue;
-
-        if (typeof newValue === "object" && newValue !== null) {
-          valueToWrite = token.readTokenValueFrom(newValue);
-        }
+        let valueToWrite = token.readTokenValueFrom(newValue);
 
         if (token.isNegated) {
           valueToWrite = !valueToWrite;

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

@@ -88,3 +88,179 @@ 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");
+});

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

@@ -48,11 +48,7 @@ export class JoistIfElement extends HTMLElement {
     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);
-          }
+          this.apply(token.readTokenValueFrom(newValue), token.isNegated);
         }
       }),
     );

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

@@ -22,13 +22,7 @@ export class JoistValueElement extends HTMLElement {
 
     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);
-        }
+        const valueToWrite = String(token.readTokenValueFrom(value.newValue));
 
         if (this.textContent !== valueToWrite) {
           this.textContent = valueToWrite;

package/src/lib/token.test.ts

@@ -33,6 +33,45 @@ describe("JToken", () => {
       const token = new JToken("!example.token");
       assert.equal(token.bindTo, "example");
     });
+
+    it("should parse equals operator value", () => {
+      const token = new JToken("example==value");
+      assert.equal(token.equalsValue, "value");
+    });
+
+    it("should handle equals operator with negation", () => {
+      const token = new JToken("!example == value");
+      assert.equal(token.equalsValue, "value");
+      assert.isTrue(token.isNegated);
+    });
+
+    it("should handle equals operator with nested paths", () => {
+      const token = new JToken("example.nested == value");
+      assert.equal(token.equalsValue, "value");
+      assert.deepEqual(token.path, ["nested"]);
+    });
+
+    it("should parse greater than operator value", () => {
+      const token = new JToken("example > 5");
+      assert.equal(token.gtValue, "5");
+    });
+
+    it("should parse less than operator value", () => {
+      const token = new JToken("example < 10");
+      assert.equal(token.ltValue, "10");
+    });
+
+    it("should handle greater than operator with negation", () => {
+      const token = new JToken("!example > 5");
+      assert.equal(token.gtValue, "5");
+      assert.isTrue(token.isNegated);
+    });
+
+    it("should handle less than operator with nested paths", () => {
+      const token = new JToken("example.count < 10");
+      assert.equal(token.ltValue, "10");
+      assert.deepEqual(token.path, ["count"]);
+    });
   });
 
   describe("readTokenValueFrom", () => {
@@ -58,17 +97,108 @@ describe("JToken", () => {
       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,
-      );
+    it("should parse values from strings", () => {
+      const token = new JToken("example.length");
+      const value = token.readTokenValueFrom("42");
+
+      assert.equal(value, 2);
+    });
+
+    it("should return true when equals against primative", () => {
+      const token = new JToken("example == active");
+      const value = token.readTokenValueFrom<boolean>("active");
+      assert.isTrue(value);
+    });
+
+    it("should return true when equals comparison matches", () => {
+      const token = new JToken("example.status==active");
+      const obj = { status: "active" };
+      const value = token.readTokenValueFrom<boolean>(obj);
+      assert.isTrue(value);
+    });
+
+    it("should return false when equals comparison does not match", () => {
+      const token = new JToken("example.status==active");
+      const obj = { status: "inactive" };
+      const value = token.readTokenValueFrom<boolean>(obj);
+      assert.isFalse(value);
+    });
+
+    it("should handle equals comparison with numbers", () => {
+      const token = new JToken("example.count == 5");
+      const obj = { count: 5 };
+      const value = token.readTokenValueFrom<boolean>(obj);
+      assert.isTrue(value);
+    });
+
+    it("should handle equals comparison with nested paths", () => {
+      const token = new JToken("example.user.status == active");
+      const obj = { user: { status: "active" } };
+      const value = token.readTokenValueFrom<boolean>(obj);
+      assert.isTrue(value);
+    });
+
+    it("should handle equals comparison with undefined values", () => {
+      const token = new JToken("example.status == active");
+      const obj = { status: undefined };
+      const value = token.readTokenValueFrom<boolean>(obj);
+      assert.isFalse(value);
+    });
+
+    it("should return true when greater than comparison matches", () => {
+      const token = new JToken("example.count > 5");
+      const obj = { count: 10 };
+      const value = token.readTokenValueFrom<boolean>(obj);
+      assert.isTrue(value);
+    });
+
+    it("should return false when greater than comparison does not match", () => {
+      const token = new JToken("example.count > 5");
+      const obj = { count: 3 };
+      const value = token.readTokenValueFrom<boolean>(obj);
+      assert.isFalse(value);
+    });
+
+    it("should return true when less than comparison matches", () => {
+      const token = new JToken("example.count < 10");
+      const obj = { count: 5 };
+      const value = token.readTokenValueFrom<boolean>(obj);
+      assert.isTrue(value);
+    });
+
+    it("should return false when less than comparison does not match", () => {
+      const token = new JToken("example.count < 10");
+      const obj = { count: 15 };
+      const value = token.readTokenValueFrom<boolean>(obj);
+      assert.isFalse(value);
+    });
+
+    it("should handle greater than comparison with string numbers", () => {
+      const token = new JToken("example.count > 5");
+      const obj = { count: "10" };
+      const value = token.readTokenValueFrom<boolean>(obj);
+      assert.isTrue(value);
+    });
+
+    it("should handle less than comparison with string numbers", () => {
+      const token = new JToken("example.count < 10");
+      const obj = { count: "5" };
+      const value = token.readTokenValueFrom<boolean>(obj);
+      assert.isTrue(value);
+    });
+
+    it("should handle greater than comparison with undefined values", () => {
+      const token = new JToken("example.count > 5");
+      const obj = { count: undefined };
+      const value = token.readTokenValueFrom<boolean>(obj);
+      assert.isFalse(value);
+    });
+
+    it("should handle less than comparison with undefined values", () => {
+      const token = new JToken("example.count < 10");
+      const obj = { count: undefined };
+      const value = token.readTokenValueFrom<boolean>(obj);
+      assert.isFalse(value);
     });
   });
 });