@joist/templating 4.2.3 → 4.2.4-next.0

package/README.md

@@ -2,6 +2,13 @@
 
 The Joist templating system provides a powerful and flexible way to handle data binding and templating in web components. This documentation covers the core components and their usage.
 
+## Table of Contents
+
+- [Core Components](#core-components)
+- [Built-in Template Elements](#built-in-template-elements)
+- [Complete Example](#complete-example)
+- [Troubleshooting](#troubleshooting)
+
 ## Core Components
 
 ### Bind Decorator (`bind.ts`)
@@ -19,42 +26,71 @@ class MyElement extends HTMLElement {
 
 The decorator:
 
-- Creates a two-way binding between component properties and templates
+- Creates a one-way binding between component properties and templates
 - Automatically handles value propagation through the `joist::value` event
 - Integrates with Joist's observable system for efficient change detection
+- Supports computed properties
+
+```typescript
+class MyElement extends HTMLElement {
+  @observe()
+  assessor value = "Hello World";
+
+  @bind((instance) => instance.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);
 ```
 
-### Events (`events.ts`)
+## Built-in Template Elements
 
-The system uses custom events for value propagation:
+Joist provides several built-in template elements for common templating needs:
 
-- `JoistValueEvent`: A custom event that handles value updates in the templating system
-- Bubbles through the DOM tree
-- Carries both the token and update mechanism
+### Value Display (`j-val`)
 
-## Built-in Template Elements
+Displays a bound value as text content:
 
-Joist provides several built-in template elements for common templating needs:
+```html
+<!-- Basic usage -->
+<j-val bind="user.name"></j-val>
+
+<!-- With formatting -->
+<j-val bind="formattedPrice"></j-val>
+
+<!-- With nested properties -->
+<j-val bind="user.profile.address.city"></j-val>
+
+<!-- With array access -->
+<j-val bind="items[0].name"></j-val>
+```
 
 ### Conditional Rendering (`j-if`)
 
 Conditionally renders content based on a boolean expression:
 
 ```html
+<!-- Basic usage -->
 <j-if bind="isVisible">
   <template>
     <div>This content is only shown when isVisible is true</div>
@@ -86,37 +122,64 @@ The `j-if` element supports:
 - Optional `else` template for fallback content
 - Automatic cleanup of removed content
 
-Common use cases:
+### Property Binding (`j-bind`)
+
+Binds values to element properties and attributes. By default it will bind values to the first child element of `j-bind`
 
-- Toggling visibility of UI elements
-- Conditional form fields
-- Feature flags
-- Authentication states
-- Loading states
+- `props` Binds to element properties
+- `attrs` prefix: Binds to element attributes
 
-### Property Binding (`j-props`)
+#### Binding Syntax
 
-Binds values to element properties and attributes. The prefix determines the binding type:
+The binding syntax follows the format `target:source` where:
 
-- `$.` prefix: Binds to element properties
-- `$` prefix: Binds to element attributes
+- `target` is the property/attribute name to bind to
+- `source` is the value to bind from
 
 ```html
-<j-props>
-  <!-- Bind to boolean properties -->
-  <input type="checkbox" $.checked="isComplete">
+<!-- Basic attribute binding -->
+<j-bind attrs="href:href">
+  <a>Link</a>
+</j-bind>
+
+<!-- Property binding -->
+<j-bind props="target:some.value">
+  <a>Link</a>
+</j-bind>
+
+<!-- Multiple bindings -->
+<j-bind props="selectionStart:foo, selectionEnd:foo">
+  <input value="1234567890" />
+</j-bind>
+
+<!-- Style binding -->
+<j-bind props="style.color:color, style.backgroundColor:bgColor">
+  <div>Styled content</div>
+</j-bind>
+```
 
-  <!-- Bind to form input values -->
-  <input type="text" $.value="userName">
+#### Targeting Specific Elements
 
-  <!-- Bind to custom element properties -->
-  <my-element $.data="complexObject">
+You can target a specific child element using the `target` attribute:
 
-  <!-- Bind to attributes -->
-  <div $class="dynamicClass">
-  <img $src="imageUrl">
-  <input $placeholder="placeholderText">
-</j-props>
+```html
+<j-bind attrs="href:href" target="#test">
+  <a>Default</a>
+  <a id="test">Target</a>
+</j-bind>
+```
+
+#### Boolean Attributes
+
+Boolean attributes are handled specially:
+
+- `true` values set the attribute
+- `false` values remove the attribute
+
+```html
+<j-bind attrs="disabled:isDisabled">
+  <button>Click me</button>
+</j-bind>
 ```
 
 ### List Rendering (`j-for`)
@@ -124,25 +187,26 @@ Binds values to element properties and attributes. The prefix determines the bin
 Renders lists of items with support for keyed updates:
 
 ```html
+<!-- Basic list rendering -->
 <j-for bind="todos" key="id">
   <template>
-    <j-props>
-      <div
-        class="todo-item"
-        $.dataset.id="each.value.id"
-        $.dataset.completed="each.value.completed"
-      >
-        <j-props>
-          <input type="checkbox" $.checked="each.value.completed" />
-        </j-props>
-
-        <j-value bind="each.value.text"></j-value>
-
-        <j-props>
-          <button $.disabled="!each.value.text">×</button>
-        </j-props>
-      </div>
-    </j-props>
+    <div class="todo-item">
+      <j-val bind="each.value.text"></j-val>
+    </div>
+  </template>
+</j-for>
+
+<!-- With complex item structure -->
+<j-for bind="users" key="id">
+  <template>
+    <div class="user-card">
+      <j-bind>
+        <img props="src:each.value.avatar" />
+      </j-bind>
+
+      <h3><j-val bind="each.value.name"></j-val></h3>
+      <p><j-val bind="each.value.bio"></j-val></p>
+    </div>
   </template>
 </j-for>
 ```
@@ -153,17 +217,9 @@ The `j-for` element provides context variables:
 - `each.index`: The zero-based index of the current item
 - `each.position`: The one-based position of the current item
 
-### Value Display (`j-value`)
-
-Displays a bound value as text content:
-
-```html
-<j-value bind="user.name"></j-value> <j-value bind="formattedPrice"></j-value>
-```
-
 ### Async State Handling (`j-async`)
 
-Handles asynchronous operations and state management with loading, success, and error states. The element accepts either a Promise or an AsyncState object:
+Handles asynchronous operations and state management with loading, success, and error states:
 
 ```typescript
 // AsyncState type
@@ -183,15 +239,16 @@ accessor userPromise = fetch('/api/user').then(r => r.json());
 ```
 
 ```html
+<!-- Basic async handling -->
 <j-async bind="userPromise">
   <template loading>Loading...</template>
 
   <template success>
-    <div>Welcome, <j-value bind="state.data.name"></j-value>!</div>
+    <div>Welcome, <j-val bind="state.data.name"></j-val>!</div>
   </template>
 
   <template error>
-    <div>Error: <j-value bind="state.error"></j-value></div>
+    <div>Error: <j-val bind="state.error"></j-val></div>
   </template>
 </j-async>
 ```
@@ -200,9 +257,53 @@ The `j-async` element supports:
 
 - Promise handling with automatic state transitions
 - Loading, success, and error templates
-- Automatic cleanup on disconnection
 - State object with typed data and error fields
 
+## Troubleshooting
+
+### Common Issues
+
+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:
@@ -212,7 +313,7 @@ import { bind } from "@joist/templating";
 import { element, html, css, listen, query } from "@joist/element";
 
 interface Todo {
-  id: number;
+  id: string;
   text: string;
 }
 
@@ -230,6 +331,7 @@ interface Todo {
         gap: 1rem;
       }
       .todo-item {
+        align-items: center;
         display: flex;
         gap: 0.5rem;
         margin: 0.5rem 0;
@@ -252,14 +354,17 @@ interface Todo {
 
       <j-for id="todos" bind="todos" key="id">
         <template>
-          <j-props class="todo-item">
-            <j-value class="todo-text" bind="each.value.text"></j-value>
-            <button $.id="each.value.id" $.disabled="!each.value.text">×</button>
-          </j-props>
+          <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-value bind="todos.length"></j-value> remaining
+      <j-val bind="todos.length"></j-val> remaining
     `,
   ],
 })
@@ -276,7 +381,7 @@ export class TodoList extends HTMLElement {
 
     const input = this.#input();
 
-    this.todos = [...this.todos, { id: this.#nextId++, text: input.value.trim() }];
+    this.todos = [...this.todos, { id: String(this.#nextId++), text: input.value.trim() }];
 
     input.value = "";
   }
@@ -284,87 +389,10 @@ export class TodoList extends HTMLElement {
   @listen("click", "#todos")
   onDelete(e: Event) {
     if (e.target instanceof HTMLButtonElement) {
-      const id = Number(e.target.id);
+      const id = Number(e.target.dataset.id);
 
       this.todos = this.todos.filter((todo) => todo.id !== id);
     }
   }
 }
 ```
-
-## Usage
-
-1. Use the `@bind()` decorator on properties you want to make bindable
-2. Properties will automatically integrate with the templating system
-3. Changes are propagated through the component tree using the custom event system
-
-## Integration with Observable
-
-The templating system is built on top of Joist's observable system (`@joist/observable`), providing:
-
-- Automatic change detection
-- Efficient updates
-- Integration with the component lifecycle
-
-## Best Practices
-
-1. Use the `@bind()` decorator only on properties that need reactivity
-2. Keep binding expressions simple and avoid deep nesting
-3. Consider performance implications when binding to frequently changing values
-4. Always use a `key` attribute with `j-for` when items can be reordered
-5. Place template content directly inside `j-if` and `j-for` elements
-
-## 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
-import { JoistValueEvent } from "@joist/templating";
-
-class MyElement extends HTMLElement {
-  connectedCallback() {
-    // Listen for value requests
-    this.addEventListener("joist::value", (e: JoistValueEvent) => {
-      const token = e.token;
-
-      // Handle the value request
-      if (token.bindTo === "myValue") {
-        // Update the value
-        e.update({
-          oldValue: this.myValue,
-          newValue: this.myValue,
-        });
-      }
-    });
-  }
-}
-```
-
-Example with async value handling:
-
-```typescript
-import { JoistValueEvent } from "@joist/templating";
-
-class MyElement extends HTMLElement {
-  connectedCallback() {
-    this.addEventListener("joist::value", (e: JoistValueEvent) => {
-      const token = e.token;
-
-      if (token.bindTo === "userData") {
-        e.update({
-          oldValue: this.userData,
-          newValue: data,
-        });
-      }
-    });
-  }
-}
-```
-
-Common use cases for manual value handling:
-
-- Custom data transformation before binding
-- Async data loading and caching
-- Complex state management
-- Integration with external data sources
-- Custom validation or error handling

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/templating",
-  "version": "4.2.3",
+  "version": "4.2.4-next.0",
   "type": "module",
   "main": "./target/lib.js",
   "module": "./target/lib.js",
@@ -60,7 +60,6 @@
         "vitest.config.js",
         "target/**"
       ],
-      "output": [],
       "dependencies": [
         "build"
       ]

package/src/lib/define.ts

@@ -1,5 +1,5 @@
 import "./elements/async.element.js";
 import "./elements/for.element.js";
 import "./elements/if.element.js";
-import "./elements/props.element.js";
+import "./elements/bind.element.js";
 import "./elements/value.element.js";

package/src/lib/elements/{props.element.test.ts → bind.element.test.ts}

@@ -1,4 +1,4 @@
-import "./props.element.js";
+import "./bind.element.js";
 
 import { fixtureSync, html } from "@open-wc/testing";
 import { assert } from "chai";
@@ -26,9 +26,9 @@ it("should pass props to child", () => {
         }
       }}
     >
-      <j-props>
-        <a $href="href" $target="target.value">Hello World</a>
-      </j-props>
+      <j-bind attrs="href:href" props="target:target.value">
+        <a>Hello World</a>
+      </j-bind>
     </div>
   `);
 
@@ -48,10 +48,10 @@ it("should pass props to specified child", () => {
         });
       }}
     >
-      <j-props>
+      <j-bind attrs="href:href" target="#test">
         <a>Default</a>
-        <a id="test" $href="href">Target</a>
-      </j-props>
+        <a id="test">Target</a>
+      </j-bind>
     </div>
   `);
 
@@ -60,3 +60,27 @@ it("should pass props to specified child", () => {
   assert.equal(anchor[0].getAttribute("href"), null);
   assert.equal(anchor[1].getAttribute("href"), "#foo");
 });
+
+it("should be case sensitive", () => {
+  const element = fixtureSync(html`
+    <div
+      @joist::value=${(e: JoistValueEvent) => {
+        e.update({ oldValue: null, newValue: 8 });
+      }}
+    >
+      <j-bind
+        props="
+          selectionStart:foo,
+          selectionEnd:foo
+        "
+      >
+        <input value="1234567890" />
+      </j-bind>
+    </div>
+  `);
+
+  const input = element.querySelector("input");
+
+  assert.equal(input?.selectionStart, 8);
+  assert.equal(input?.selectionEnd, 8);
+});

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

@@ -0,0 +1,103 @@
+import { attr, element, css, html } from "@joist/element";
+
+// import { JoistValueEvent } from "../events.js";
+import { JToken } from "../token.js";
+import { JoistValueEvent } from "../events.js";
+
+export class JAttrToken extends JToken {
+  mapTo: string;
+
+  constructor(binding: string) {
+    const [mapTo, bindTo] = binding.split(":");
+
+    if (!mapTo) {
+      throw new Error(`Invalid binding: ${binding}, should be in the format of "bindTo:mapTo"`);
+    }
+
+    super(bindTo);
+
+    this.mapTo = mapTo;
+  }
+}
+
+@element({
+  tagName: "j-bind",
+  // prettier-ignore
+  shadowDom: [css`:host{display: contents;}`, html`<slot></slot>`],
+})
+export class JoistIfElement extends HTMLElement {
+  @attr()
+  accessor props = "";
+
+  @attr()
+  accessor attrs = "";
+
+  @attr()
+  accessor target = "";
+
+  connectedCallback(): void {
+    const attrBindings = this.#parseBinding(this.attrs);
+    const propBindings = this.#parseBinding(this.props);
+
+    let child = this.firstElementChild;
+
+    if (this.target) {
+      child = this.querySelector(this.target);
+    }
+
+    if (!child) {
+      throw new Error("j-bind must have a child element or defined target");
+    }
+
+    for (const attrValue of attrBindings) {
+      const token = new JAttrToken(attrValue);
+
+      this.#dispatch(token, (value) => {
+        if (value === true) {
+          child.setAttribute(token.mapTo, "");
+        } else if (value === false) {
+          child.removeAttribute(token.mapTo);
+        } else {
+          child.setAttribute(token.mapTo, String(value));
+        }
+      });
+    }
+
+    for (const propValue of propBindings) {
+      const token = new JAttrToken(propValue);
+
+      this.#dispatch(token, (value) => {
+        Reflect.set(child, token.mapTo, value);
+      });
+    }
+  }
+
+  #parseBinding(binding: string) {
+    return binding
+      .split(",")
+      .map((b) => b.trim())
+      .filter((b) => b);
+  }
+
+  #dispatch(token: JToken, write: (value: unknown) => void) {
+    this.dispatchEvent(
+      new JoistValueEvent(token, ({ newValue, oldValue }) => {
+        if (newValue === oldValue) {
+          return;
+        }
+
+        let valueToWrite = newValue;
+
+        if (typeof newValue === "object" && newValue !== null) {
+          valueToWrite = token.readTokenValueFrom(newValue);
+        }
+
+        if (token.isNegated) {
+          valueToWrite = !valueToWrite;
+        }
+
+        write(valueToWrite);
+      }),
+    );
+  }
+}

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

@@ -23,7 +23,7 @@ it("should iterate over an iterable", () => {
         <j-for bind="items" key="id">
           <template>
             <li>
-              <j-value bind="each.value.label"></j-value>
+              <j-val bind="each.value.label"></j-val>
             </li>
           </template>
         </j-for>
@@ -94,13 +94,13 @@ it("should update when items are added or removed", () => {
     >
       <j-for bind="items" key="id">
         <template>
-          <j-value bind="each.value.text"></j-value>
+          <j-val bind="each.value.text"></j-val>
         </template>
       </j-for>
     </div>
   `);
 
-  const items = element.querySelectorAll("j-value");
+  const items = element.querySelectorAll("j-val");
   assert.equal(items.length, 2);
   assert.equal(items[0].textContent?.trim(), "First");
   assert.equal(items[1].textContent?.trim(), "Third");
@@ -118,9 +118,8 @@ it("should provide index and position information", () => {
     >
       <j-for bind="items">
         <template>
-          <j-value bind="each.value"></j-value>
-          (index: <j-value bind="each.index"></j-value>,
-          position: <j-value bind="each.position"></j-value>)
+          <j-val bind="each.value"></j-val>
+          (index: <j-val bind="each.index"></j-val>, position: <j-val bind="each.position"></j-val>)
         </template>
       </j-for>
     </div>
@@ -160,7 +159,7 @@ it("should provide index and position information", () => {
 //           <div class="group">
 //             <j-for bind="each.value.items">
 //               <template>
-//                 <j-value class="child" bind="each.value"></j-value>
+//                 <j-val class="child" bind="each.value"></j-val>
 //               </template>
 //             </j-for>
 //           </div>
@@ -207,13 +206,13 @@ it("should maintain DOM order when items are reordered", () => {
     >
       <j-for bind="items" key="id">
         <template>
-          <j-value bind="each.value.text"></j-value>
+          <j-val bind="each.value.text"></j-val>
         </template>
       </j-for>
     </div>
   `);
 
-  const items = element.querySelectorAll("j-value");
+  const items = element.querySelectorAll("j-val");
   assert.equal(items.length, 3);
   assert.equal(items[0].textContent?.trim(), "Third");
   assert.equal(items[1].textContent?.trim(), "First");

package/src/lib/elements/scope.ts

@@ -9,7 +9,7 @@ declare global {
 }
 
 @element({
-  tagName: "j-value",
+  tagName: "j-val",
   // prettier-ignore
   shadowDom: [css`:host{display: contents;}`, html`<slot></slot>`],
 })

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

@@ -12,7 +12,7 @@ it("should render content when the bind value is truthy", () => {
         e.update({ oldValue: null, newValue: "Hello World" });
       }}
     >
-      <j-value bind="test"></j-value>
+      <j-val bind="test"></j-val>
     </div>
   `);
 

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

@@ -4,12 +4,12 @@ import { JToken } from "../token.js";
 
 declare global {
   interface HTMLElementTagNameMap {
-    "j-value": JoistValueElement;
+    "j-val": JoistValueElement;
   }
 }
 
 @element({
-  tagName: "j-value",
+  tagName: "j-val",
   // prettier-ignore
   shadowDom: [css`:host{display: contents;}`, html`<slot></slot>`],
 })

package/target/lib/define.d.ts

@@ -1,5 +1,5 @@
 import "./elements/async.element.js";
 import "./elements/for.element.js";
 import "./elements/if.element.js";
-import "./elements/props.element.js";
+import "./elements/bind.element.js";
 import "./elements/value.element.js";

package/target/lib/define.js

@@ -1,6 +1,6 @@
 import "./elements/async.element.js";
 import "./elements/for.element.js";
 import "./elements/if.element.js";
-import "./elements/props.element.js";
+import "./elements/bind.element.js";
 import "./elements/value.element.js";
 //# sourceMappingURL=define.js.map

package/target/lib/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../src/lib/define.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAC;AACrC,OAAO,2BAA2B,CAAC;AACnC,OAAO,0BAA0B,CAAC;AAClC,OAAO,6BAA6B,CAAC;AACrC,OAAO,6BAA6B,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../src/lib/define.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAC;AACrC,OAAO,2BAA2B,CAAC;AACnC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,6BAA6B,CAAC"}

package/target/lib/elements/{props.element.d.ts → bind.element.d.ts}

@@ -1,11 +1,12 @@
 import { JToken } from "../token.js";
 export declare class JAttrToken extends JToken {
     mapTo: string;
-    mapsToProp: boolean;
-    constructor(attr: Attr);
+    constructor(binding: string);
 }
 export declare class JoistIfElement extends HTMLElement {
     #private;
+    accessor props: string;
+    accessor attrs: string;
     accessor target: string;
     connectedCallback(): void;
 }

package/target/lib/elements/bind.element.js

@@ -0,0 +1,118 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { attr, element, css, html } from "@joist/element";
+import { JToken } from "../token.js";
+import { JoistValueEvent } from "../events.js";
+export class JAttrToken extends JToken {
+    mapTo;
+    constructor(binding) {
+        const [mapTo, bindTo] = binding.split(":");
+        if (!mapTo) {
+            throw new Error(`Invalid binding: ${binding}, should be in the format of "bindTo:mapTo"`);
+        }
+        super(bindTo);
+        this.mapTo = mapTo;
+    }
+}
+let JoistIfElement = (() => {
+    let _classDecorators = [element({
+            tagName: "j-bind",
+            shadowDom: [css `:host{display: contents;}`, html `<slot></slot>`],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _props_decorators;
+    let _props_initializers = [];
+    let _props_extraInitializers = [];
+    let _attrs_decorators;
+    let _attrs_initializers = [];
+    let _attrs_extraInitializers = [];
+    let _target_decorators;
+    let _target_initializers = [];
+    let _target_extraInitializers = [];
+    var JoistIfElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _props_decorators = [attr()];
+            _attrs_decorators = [attr()];
+            _target_decorators = [attr()];
+            __esDecorate(this, null, _props_decorators, { kind: "accessor", name: "props", static: false, private: false, access: { has: obj => "props" in obj, get: obj => obj.props, set: (obj, value) => { obj.props = value; } }, metadata: _metadata }, _props_initializers, _props_extraInitializers);
+            __esDecorate(this, null, _attrs_decorators, { kind: "accessor", name: "attrs", static: false, private: false, access: { has: obj => "attrs" in obj, get: obj => obj.attrs, set: (obj, value) => { obj.attrs = value; } }, metadata: _metadata }, _attrs_initializers, _attrs_extraInitializers);
+            __esDecorate(this, null, _target_decorators, { kind: "accessor", name: "target", static: false, private: false, access: { has: obj => "target" in obj, get: obj => obj.target, set: (obj, value) => { obj.target = value; } }, metadata: _metadata }, _target_initializers, _target_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            JoistIfElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #props_accessor_storage = __runInitializers(this, _props_initializers, "");
+        get props() { return this.#props_accessor_storage; }
+        set props(value) { this.#props_accessor_storage = value; }
+        #attrs_accessor_storage = (__runInitializers(this, _props_extraInitializers), __runInitializers(this, _attrs_initializers, ""));
+        get attrs() { return this.#attrs_accessor_storage; }
+        set attrs(value) { this.#attrs_accessor_storage = value; }
+        #target_accessor_storage = (__runInitializers(this, _attrs_extraInitializers), __runInitializers(this, _target_initializers, ""));
+        get target() { return this.#target_accessor_storage; }
+        set target(value) { this.#target_accessor_storage = value; }
+        connectedCallback() {
+            const attrBindings = this.#parseBinding(this.attrs);
+            const propBindings = this.#parseBinding(this.props);
+            let child = this.firstElementChild;
+            if (this.target) {
+                child = this.querySelector(this.target);
+            }
+            if (!child) {
+                throw new Error("j-bind must have a child element or defined target");
+            }
+            for (const attrValue of attrBindings) {
+                const token = new JAttrToken(attrValue);
+                this.#dispatch(token, (value) => {
+                    if (value === true) {
+                        child.setAttribute(token.mapTo, "");
+                    }
+                    else if (value === false) {
+                        child.removeAttribute(token.mapTo);
+                    }
+                    else {
+                        child.setAttribute(token.mapTo, String(value));
+                    }
+                });
+            }
+            for (const propValue of propBindings) {
+                const token = new JAttrToken(propValue);
+                this.#dispatch(token, (value) => {
+                    Reflect.set(child, token.mapTo, value);
+                });
+            }
+        }
+        #parseBinding(binding) {
+            return binding
+                .split(",")
+                .map((b) => b.trim())
+                .filter((b) => b);
+        }
+        #dispatch(token, write) {
+            this.dispatchEvent(new JoistValueEvent(token, ({ newValue, oldValue }) => {
+                if (newValue === oldValue) {
+                    return;
+                }
+                let valueToWrite = newValue;
+                if (typeof newValue === "object" && newValue !== null) {
+                    valueToWrite = token.readTokenValueFrom(newValue);
+                }
+                if (token.isNegated) {
+                    valueToWrite = !valueToWrite;
+                }
+                write(valueToWrite);
+            }));
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _target_extraInitializers);
+        }
+    };
+    return JoistIfElement = _classThis;
+})();
+export { JoistIfElement };
+//# sourceMappingURL=bind.element.js.map

package/target/lib/elements/bind.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bind.element.js","sourceRoot":"","sources":["../../../src/lib/elements/bind.element.ts"],"names":[],"mappings":"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"}

package/target/lib/elements/bind.element.test.d.ts

@@ -0,0 +1 @@
+import "./bind.element.js";

package/target/lib/elements/{props.element.test.js → bind.element.test.js}

@@ -1,4 +1,4 @@
-import "./props.element.js";
+import "./bind.element.js";
 import { fixtureSync, html } from "@open-wc/testing";
 import { assert } from "chai";
 it("should pass props to child", () => {
@@ -21,9 +21,9 @@ it("should pass props to child", () => {
         }
     }}
     >
-      <j-props>
-        <a $href="href" $target="target.value">Hello World</a>
-      </j-props>
+      <j-bind attrs="href:href" props="target:target.value">
+        <a>Hello World</a>
+      </j-bind>
     </div>
   `);
     const anchor = element.querySelector("a");
@@ -40,14 +40,35 @@ it("should pass props to specified child", () => {
         });
     }}
     >
-      <j-props>
+      <j-bind attrs="href:href" target="#test">
         <a>Default</a>
-        <a id="test" $href="href">Target</a>
-      </j-props>
+        <a id="test">Target</a>
+      </j-bind>
     </div>
   `);
     const anchor = element.querySelectorAll("a");
     assert.equal(anchor[0].getAttribute("href"), null);
     assert.equal(anchor[1].getAttribute("href"), "#foo");
 });
-//# sourceMappingURL=props.element.test.js.map
+it("should be case sensitive", () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        e.update({ oldValue: null, newValue: 8 });
+    }}
+    >
+      <j-bind
+        props="
+          selectionStart:foo,
+          selectionEnd:foo
+        "
+      >
+        <input value="1234567890" />
+      </j-bind>
+    </div>
+  `);
+    const input = element.querySelector("input");
+    assert.equal(input?.selectionStart, 8);
+    assert.equal(input?.selectionEnd, 8);
+});
+//# sourceMappingURL=bind.element.test.js.map

package/target/lib/elements/bind.element.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bind.element.test.js","sourceRoot":"","sources":["../../../src/lib/elements/bind.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAE3B,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAI9B,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;IACpC,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;YAC9B,CAAC,CAAC,MAAM,CAAC;gBACP,QAAQ,EAAE,IAAI;gBACd,QAAQ,EAAE,MAAM;aACjB,CAAC,CAAC;QACL,CAAC;QAED,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;YAChC,CAAC,CAAC,MAAM,CAAC;gBACP,QAAQ,EAAE,IAAI;gBACd,QAAQ,EAAE;oBACR,KAAK,EAAE,QAAQ;iBAChB;aACF,CAAC,CAAC;QACL,CAAC;IACH,CAAC;;;;;;GAMJ,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAE1C,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;IACnD,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC;AACzD,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;IAC9C,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,CAAC,CAAC,MAAM,CAAC;YACP,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,MAAM;SACjB,CAAC,CAAC;IACL,CAAC;;;;;;;GAOJ,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAE7C,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC;IACnD,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;AACvD,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,0BAA0B,EAAE,GAAG,EAAE;IAClC,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IAC5C,CAAC;;;;;;;;;;;GAWJ,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAE7C,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC;IACvC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC;AACvC,CAAC,CAAC,CAAC"}

package/target/lib/elements/for.element.test.js

@@ -19,7 +19,7 @@ it("should iterate over an iterable", () => {
         <j-for bind="items" key="id">
           <template>
             <li>
-              <j-value bind="each.value.label"></j-value>
+              <j-val bind="each.value.label"></j-val>
             </li>
           </template>
         </j-for>
@@ -80,12 +80,12 @@ it("should update when items are added or removed", () => {
     >
       <j-for bind="items" key="id">
         <template>
-          <j-value bind="each.value.text"></j-value>
+          <j-val bind="each.value.text"></j-val>
         </template>
       </j-for>
     </div>
   `);
-    const items = element.querySelectorAll("j-value");
+    const items = element.querySelectorAll("j-val");
     assert.equal(items.length, 2);
     assert.equal(items[0].textContent?.trim(), "First");
     assert.equal(items[1].textContent?.trim(), "Third");
@@ -102,9 +102,8 @@ it("should provide index and position information", () => {
     >
       <j-for bind="items">
         <template>
-          <j-value bind="each.value"></j-value>
-          (index: <j-value bind="each.index"></j-value>,
-          position: <j-value bind="each.position"></j-value>)
+          <j-val bind="each.value"></j-val>
+          (index: <j-val bind="each.index"></j-val>, position: <j-val bind="each.position"></j-val>)
         </template>
       </j-for>
     </div>
@@ -139,12 +138,12 @@ it("should maintain DOM order when items are reordered", () => {
     >
       <j-for bind="items" key="id">
         <template>
-          <j-value bind="each.value.text"></j-value>
+          <j-val bind="each.value.text"></j-val>
         </template>
       </j-for>
     </div>
   `);
-    const items = element.querySelectorAll("j-value");
+    const items = element.querySelectorAll("j-val");
     assert.equal(items.length, 3);
     assert.equal(items[0].textContent?.trim(), "Third");
     assert.equal(items[1].textContent?.trim(), "First");

package/target/lib/elements/for.element.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"for.element.test.js","sourceRoot":"","sources":["../../../src/lib/elements/for.element.test.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"for.element.test.js","sourceRoot":"","sources":["../../../src/lib/elements/for.element.test.ts"],"names":[],"mappings":"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"}

package/target/lib/elements/scope.js

@@ -2,7 +2,7 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { attr, element, css, html, listen } from "@joist/element";
 let JoistScopeElement = (() => {
     let _classDecorators = [element({
-            tagName: "j-value",
+            tagName: "j-val",
             shadowDom: [css `:host{display: contents;}`, html `<slot></slot>`],
         })];
     let _classDescriptor;

package/target/lib/elements/scope.js.map

@@ -1 +1 @@
-{"version":3,"file":"scope.js","sourceRoot":"","sources":["../../../src/lib/elements/scope.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;IAerD,iBAAiB;4BAL7B,OAAO,CAAC;YACP,OAAO,EAAE,SAAS;YAElB,SAAS,EAAE,CAAC,GAAG,CAAA,2BAA2B,EAAE,IAAI,CAAA,eAAe,CAAC;SACjE,CAAC;;;;sBACqC,WAAW;;;;;;;;;iCAAnB,SAAQ,WAAW;;;;gCAC/C,IAAI,EAAE;iCAGN,IAAI,EAAE;6CAKN,MAAM,CAAC,cAAc,CAAC;YAPvB,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAGnB,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YAKpB,sMAAA,iBAAiB,6DAQhB;YAlBH,6KAuBC;;;YAvBY,uDAAiB;;QAE5B,0BAFW,mDAAiB,8CAEZ,EAAE,GAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAGnB,0HAAiB,EAAE,GAAC;QAApB,IAAS,KAAK,2CAAM;QAApB,IAAS,KAAK,iDAAM;QAEpB,QAAQ,uDAA2B,IAAI,EAAC;QAGxC,iBAAiB,CAAC,CAAkB;YAClC,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;gBACjC,CAAC,CAAC,eAAe,EAAE,CAAC;gBAEpB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;gBAElB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;YACjE,CAAC;QACH,CAAC;QAED,wBAAwB,CAAC,CAAS,EAAE,QAAgB,EAAE,QAAgB;YACpE,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;QAChD,CAAC;;;;SAtBU,iBAAiB"}
+{"version":3,"file":"scope.js","sourceRoot":"","sources":["../../../src/lib/elements/scope.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;IAerD,iBAAiB;4BAL7B,OAAO,CAAC;YACP,OAAO,EAAE,OAAO;YAEhB,SAAS,EAAE,CAAC,GAAG,CAAA,2BAA2B,EAAE,IAAI,CAAA,eAAe,CAAC;SACjE,CAAC;;;;sBACqC,WAAW;;;;;;;;;iCAAnB,SAAQ,WAAW;;;;gCAC/C,IAAI,EAAE;iCAGN,IAAI,EAAE;6CAKN,MAAM,CAAC,cAAc,CAAC;YAPvB,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAGnB,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YAKpB,sMAAA,iBAAiB,6DAQhB;YAlBH,6KAuBC;;;YAvBY,uDAAiB;;QAE5B,0BAFW,mDAAiB,8CAEZ,EAAE,GAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAGnB,0HAAiB,EAAE,GAAC;QAApB,IAAS,KAAK,2CAAM;QAApB,IAAS,KAAK,iDAAM;QAEpB,QAAQ,uDAA2B,IAAI,EAAC;QAGxC,iBAAiB,CAAC,CAAkB;YAClC,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;gBACjC,CAAC,CAAC,eAAe,EAAE,CAAC;gBAEpB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;gBAElB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;YACjE,CAAC;QACH,CAAC;QAED,wBAAwB,CAAC,CAAS,EAAE,QAAgB,EAAE,QAAgB;YACpE,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;QAChD,CAAC;;;;SAtBU,iBAAiB"}

package/target/lib/elements/value.element.d.ts

@@ -1,6 +1,6 @@
 declare global {
     interface HTMLElementTagNameMap {
-        "j-value": JoistValueElement;
+        "j-val": JoistValueElement;
     }
 }
 export declare class JoistValueElement extends HTMLElement {

package/target/lib/elements/value.element.js

@@ -4,7 +4,7 @@ import { JoistValueEvent } from "../events.js";
 import { JToken } from "../token.js";
 let JoistValueElement = (() => {
     let _classDecorators = [element({
-            tagName: "j-value",
+            tagName: "j-val",
             shadowDom: [css `:host{display: contents;}`, html `<slot></slot>`],
         })];
     let _classDescriptor;

package/target/lib/elements/value.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"value.element.js","sourceRoot":"","sources":["../../../src/lib/elements/value.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;IAaxB,iBAAiB;4BAL7B,OAAO,CAAC;YACP,OAAO,EAAE,SAAS;YAElB,SAAS,EAAE,CAAC,GAAG,CAAA,2BAA2B,EAAE,IAAI,CAAA,eAAe,CAAC;SACjE,CAAC;;;;sBACqC,WAAW;;;;iCAAnB,SAAQ,WAAW;;;;gCAC/C,IAAI,EAAE;YACP,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAFrB,6KAuBC;;;YAvBY,uDAAiB;;QAE5B,qEAAgB,EAAE,EAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAEnB,iBAAiB;YACf,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAEpC,IAAI,CAAC,aAAa,CAChB,IAAI,eAAe,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE;gBACnC,IAAI,YAAoB,CAAC;gBAEzB,IAAI,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;oBAClE,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;gBAClE,CAAC;qBAAM,CAAC;oBACN,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;gBACxC,CAAC;gBAED,IAAI,IAAI,CAAC,WAAW,KAAK,YAAY,EAAE,CAAC;oBACtC,IAAI,CAAC,WAAW,GAAG,YAAY,CAAC;gBAClC,CAAC;YACH,CAAC,CAAC,CACH,CAAC;QACJ,CAAC;;;;;;;;SAtBU,iBAAiB"}
+{"version":3,"file":"value.element.js","sourceRoot":"","sources":["../../../src/lib/elements/value.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;IAaxB,iBAAiB;4BAL7B,OAAO,CAAC;YACP,OAAO,EAAE,OAAO;YAEhB,SAAS,EAAE,CAAC,GAAG,CAAA,2BAA2B,EAAE,IAAI,CAAA,eAAe,CAAC;SACjE,CAAC;;;;sBACqC,WAAW;;;;iCAAnB,SAAQ,WAAW;;;;gCAC/C,IAAI,EAAE;YACP,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAFrB,6KAuBC;;;YAvBY,uDAAiB;;QAE5B,qEAAgB,EAAE,EAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAEnB,iBAAiB;YACf,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAEpC,IAAI,CAAC,aAAa,CAChB,IAAI,eAAe,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE;gBACnC,IAAI,YAAoB,CAAC;gBAEzB,IAAI,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;oBAClE,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;gBAClE,CAAC;qBAAM,CAAC;oBACN,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;gBACxC,CAAC;gBAED,IAAI,IAAI,CAAC,WAAW,KAAK,YAAY,EAAE,CAAC;oBACtC,IAAI,CAAC,WAAW,GAAG,YAAY,CAAC;gBAClC,CAAC;YACH,CAAC,CAAC,CACH,CAAC;QACJ,CAAC;;;;;;;;SAtBU,iBAAiB"}

package/target/lib/elements/value.element.test.js

@@ -8,7 +8,7 @@ it("should render content when the bind value is truthy", () => {
         e.update({ oldValue: null, newValue: "Hello World" });
     }}
     >
-      <j-value bind="test"></j-value>
+      <j-val bind="test"></j-val>
     </div>
   `);
     assert.equal(element.textContent?.trim(), "Hello World");

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

@@ -1,76 +0,0 @@
-import { attr, element, css, html } from "@joist/element";
-
-import { JoistValueEvent } from "../events.js";
-import { JToken } from "../token.js";
-
-export class JAttrToken extends JToken {
-  mapTo: string;
-  mapsToProp: boolean;
-
-  constructor(attr: Attr) {
-    if (!attr.name.startsWith("$")) {
-      throw new Error(`Invalid attribute token: ${attr.name}, should start with $`);
-    }
-
-    super(attr.value);
-
-    this.mapsToProp = attr.name.startsWith("$.");
-
-    this.mapTo = attr.name.slice(this.mapsToProp ? 2 : 1);
-  }
-}
-
-@element({
-  tagName: "j-props",
-  // prettier-ignore
-  shadowDom: [css`:host{display: contents;}`, html`<slot></slot>`],
-})
-export class JoistIfElement extends HTMLElement {
-  @attr()
-  accessor target = "";
-
-  connectedCallback(): void {
-    this.#bindProps([this]); // bind own props
-    this.#bindProps(this.children); // bind child props
-  }
-
-  #bindProps(children: Iterable<Element>) {
-    for (const child of children) {
-      for (const attr of child.attributes) {
-        if (attr.name.startsWith("$")) {
-          const token = new JAttrToken(attr);
-
-          this.dispatchEvent(
-            new JoistValueEvent(token, ({ newValue, oldValue }) => {
-              if (newValue === oldValue) {
-                return;
-              }
-
-              let valueToWrite = newValue;
-
-              if (typeof newValue === "object" && newValue !== null) {
-                valueToWrite = token.readTokenValueFrom(newValue);
-              }
-
-              if (token.isNegated) {
-                valueToWrite = !valueToWrite;
-              }
-
-              if (token.mapsToProp) {
-                Reflect.set(child, token.mapTo, valueToWrite);
-              } else {
-                if (valueToWrite === true) {
-                  child.setAttribute(token.mapTo, "");
-                } else if (valueToWrite === false) {
-                  child.removeAttribute(token.mapTo);
-                } else {
-                  child.setAttribute(token.mapTo, String(valueToWrite));
-                }
-              }
-            }),
-          );
-        }
-      }
-    }
-  }
-}

package/target/lib/elements/props.element.js

@@ -1,90 +0,0 @@
-import { __esDecorate, __runInitializers } from "tslib";
-import { attr, element, css, html } from "@joist/element";
-import { JoistValueEvent } from "../events.js";
-import { JToken } from "../token.js";
-export class JAttrToken extends JToken {
-    mapTo;
-    mapsToProp;
-    constructor(attr) {
-        if (!attr.name.startsWith("$")) {
-            throw new Error(`Invalid attribute token: ${attr.name}, should start with $`);
-        }
-        super(attr.value);
-        this.mapsToProp = attr.name.startsWith("$.");
-        this.mapTo = attr.name.slice(this.mapsToProp ? 2 : 1);
-    }
-}
-let JoistIfElement = (() => {
-    let _classDecorators = [element({
-            tagName: "j-props",
-            shadowDom: [css `:host{display: contents;}`, html `<slot></slot>`],
-        })];
-    let _classDescriptor;
-    let _classExtraInitializers = [];
-    let _classThis;
-    let _classSuper = HTMLElement;
-    let _target_decorators;
-    let _target_initializers = [];
-    let _target_extraInitializers = [];
-    var JoistIfElement = class extends _classSuper {
-        static { _classThis = this; }
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _target_decorators = [attr()];
-            __esDecorate(this, null, _target_decorators, { kind: "accessor", name: "target", static: false, private: false, access: { has: obj => "target" in obj, get: obj => obj.target, set: (obj, value) => { obj.target = value; } }, metadata: _metadata }, _target_initializers, _target_extraInitializers);
-            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-            JoistIfElement = _classThis = _classDescriptor.value;
-            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-            __runInitializers(_classThis, _classExtraInitializers);
-        }
-        #target_accessor_storage = __runInitializers(this, _target_initializers, "");
-        get target() { return this.#target_accessor_storage; }
-        set target(value) { this.#target_accessor_storage = value; }
-        connectedCallback() {
-            this.#bindProps([this]);
-            this.#bindProps(this.children);
-        }
-        #bindProps(children) {
-            for (const child of children) {
-                for (const attr of child.attributes) {
-                    if (attr.name.startsWith("$")) {
-                        const token = new JAttrToken(attr);
-                        this.dispatchEvent(new JoistValueEvent(token, ({ newValue, oldValue }) => {
-                            if (newValue === oldValue) {
-                                return;
-                            }
-                            let valueToWrite = newValue;
-                            if (typeof newValue === "object" && newValue !== null) {
-                                valueToWrite = token.readTokenValueFrom(newValue);
-                            }
-                            if (token.isNegated) {
-                                valueToWrite = !valueToWrite;
-                            }
-                            if (token.mapsToProp) {
-                                Reflect.set(child, token.mapTo, valueToWrite);
-                            }
-                            else {
-                                if (valueToWrite === true) {
-                                    child.setAttribute(token.mapTo, "");
-                                }
-                                else if (valueToWrite === false) {
-                                    child.removeAttribute(token.mapTo);
-                                }
-                                else {
-                                    child.setAttribute(token.mapTo, String(valueToWrite));
-                                }
-                            }
-                        }));
-                    }
-                }
-            }
-        }
-        constructor() {
-            super(...arguments);
-            __runInitializers(this, _target_extraInitializers);
-        }
-    };
-    return JoistIfElement = _classThis;
-})();
-export { JoistIfElement };
-//# sourceMappingURL=props.element.js.map

package/target/lib/elements/props.element.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"props.element.js","sourceRoot":"","sources":["../../../src/lib/elements/props.element.ts"],"names":[],"mappings":"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"}

package/target/lib/elements/props.element.test.d.ts

@@ -1 +0,0 @@
-import "./props.element.js";

package/target/lib/elements/props.element.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"props.element.test.js","sourceRoot":"","sources":["../../../src/lib/elements/props.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAI9B,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;IACpC,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;YAC9B,CAAC,CAAC,MAAM,CAAC;gBACP,QAAQ,EAAE,IAAI;gBACd,QAAQ,EAAE,MAAM;aACjB,CAAC,CAAC;QACL,CAAC;QAED,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;YAChC,CAAC,CAAC,MAAM,CAAC;gBACP,QAAQ,EAAE,IAAI;gBACd,QAAQ,EAAE;oBACR,KAAK,EAAE,QAAQ;iBAChB;aACF,CAAC,CAAC;QACL,CAAC;IACH,CAAC;;;;;;GAMJ,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAE1C,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;IACnD,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC;AACzD,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;IAC9C,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,CAAC,CAAC,MAAM,CAAC;YACP,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,MAAM;SACjB,CAAC,CAAC;IACL,CAAC;;;;;;;GAOJ,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAE7C,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC;IACnD,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;AACvD,CAAC,CAAC,CAAC"}