@joist/templating 4.2.4-next.0 → 4.2.4-next.10

package/src/lib/expression.test.ts

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

package/src/lib/expression.ts

@@ -0,0 +1,179 @@
+type ComparisonOperator = "==" | "!=" | ">" | "<";
+
+interface TokenParts {
+  path: string[];
+  value?: string;
+  operator?: ComparisonOperator;
+}
+
+/**
+ * JExpression represents a token that can be used to extract and compare values from objects.
+ *
+ * Supported operators:
+ * - `==` : Equality comparison (e.g., "status==active")
+ * - `!=` : Inequality comparison (e.g., "status!=active")
+ * - `>`  : Greater than comparison (e.g., "count>5")
+ * - `<`  : Less than comparison (e.g., "count<10")
+ *
+ * Examples:
+ * ```typescript
+ * // Basic path access
+ * new JExpression("user.name").readTokenValueFrom({ user: { name: "John" } }) // "John"
+ *
+ * // Equality comparison
+ * new JExpression("status == active").readTokenValueFrom({ status: "active" }) // true
+ *
+ * // Inequality comparison
+ * new JExpression("status != active").readTokenValueFrom({ status: "inactive" }) // true
+ *
+ * // Greater than comparison
+ * new JExpression("count > 5").readTokenValueFrom({ count: 10 }) // true
+ *
+ * // Less than comparison
+ * new JExpression("count < 10").readTokenValueFrom({ count: 5 }) // true
+ *
+ * // With negation
+ * new JExpression("!status == active").readTokenValueFrom({ status: "inactive" }) // true
+ *
+ * // Nested paths
+ * new JExpression("user.score > 100").readTokenValueFrom({ user: { score: 150 } }) // true
+ * ```
+ */
+export class JExpression {
+  /** The raw token string as provided to the constructor */
+  rawToken: string;
+  /** Whether the token is negated (starts with '!') */
+  isNegated = false;
+  /** The first part of the path (before the first dot) */
+  bindTo: string;
+  /** The remaining parts of the path (after the first dot) */
+  path: string[] = [];
+  /** The value to compare against for equality (==) */
+  equalsValue: string | undefined;
+  /** The value to compare against for inequality (!=) */
+  notEqualsValue: string | undefined;
+  /** The value to compare against for greater than (>) */
+  gtValue: string | undefined;
+  /** The value to compare against for less than (<) */
+  ltValue: string | undefined;
+
+  /**
+   * Creates a new JExpression instance.
+   * @param rawToken - The token string to parse. Can include operators (==, !=, >, <) and negation (!)
+   */
+  constructor(rawToken: string) {
+    this.rawToken = rawToken;
+    this.isNegated = this.rawToken.startsWith("!");
+
+    const { path, value, operator } = this.#parseToken();
+    this.path = path;
+    this.bindTo = this.path.shift() ?? "";
+    this.bindTo = this.bindTo.replaceAll("!", "");
+
+    // Set the appropriate comparison value based on the operator
+    switch (operator) {
+      case "==":
+        this.equalsValue = value;
+        break;
+      case "!=":
+        this.notEqualsValue = value;
+        break;
+      case ">":
+        this.gtValue = value;
+        break;
+      case "<":
+        this.ltValue = value;
+        break;
+    }
+  }
+
+  /**
+   * Reads a value from the provided object using the token's path and performs any comparison.
+   * @param value - The object to read from
+   * @returns The value at the path, or the result of the comparison if an operator is present
+   * @template T - The expected return type
+   */
+  evaluate<T = unknown>(value: unknown): T {
+    if (typeof value !== "object" && typeof value !== "string") {
+      return value as T;
+    }
+
+    const pathValue = this.#getValueAtPath(value);
+
+    return this.#performComparison(pathValue) as T;
+  }
+
+  /**
+   * Parses the raw token into its components.
+   * @returns An object containing the path parts and any comparison operator/value
+   */
+  #parseToken(): TokenParts {
+    const operators: ComparisonOperator[] = ["==", "!=", ">", "<"];
+
+    for (const operator of operators) {
+      if (this.rawToken.includes(operator)) {
+        const [tokenPart, value] = this.rawToken.split(operator).map((part) => part.trim());
+        return {
+          path: tokenPart.split("."),
+          value,
+          operator,
+        };
+      }
+    }
+
+    return {
+      path: this.rawToken.split("."),
+    };
+  }
+
+  /**
+   * Gets the value at the token's path in the provided object.
+   * @param value - The object to read from
+   * @returns The value at the path, or undefined if the path doesn't exist
+   */
+  #getValueAtPath(value: unknown): unknown {
+    if (value === null || value === undefined) {
+      return value;
+    }
+
+    if (!this.path.length) {
+      return value;
+    }
+
+    let pointer: any = value;
+
+    for (const part of this.path) {
+      pointer = pointer?.[part];
+      if (pointer === undefined) {
+        break;
+      }
+    }
+
+    return pointer;
+  }
+
+  /**
+   * Performs the comparison operation if an operator is present.
+   * @param value - The value to compare
+   * @returns The result of the comparison, or the original value if no operator is present
+   */
+  #performComparison(value: unknown): boolean | unknown {
+    if (this.equalsValue !== undefined) {
+      return String(value) === this.equalsValue;
+    }
+
+    if (this.notEqualsValue !== undefined) {
+      return String(value) !== this.notEqualsValue;
+    }
+
+    if (this.gtValue !== undefined) {
+      return Number(value) > Number(this.gtValue);
+    }
+
+    if (this.ltValue !== undefined) {
+      return Number(value) < Number(this.ltValue);
+    }
+
+    return value;
+  }
+}

package/target/lib/bind.d.ts

@@ -1 +1,5 @@
-export declare function bind<This extends HTMLElement, Value>(mapper?: (instance: This) => Value): (base: ClassAccessorDecoratorTarget<This, Value>, ctx: ClassAccessorDecoratorContext<This, Value>) => ClassAccessorDecoratorResult<This, Value>;
+import { ObserveOpts } from "@joist/observable";
+export interface BindOpts<This, Value> extends ObserveOpts<This, Value> {
+    alwaysUpdate?: boolean;
+}
+export declare function bind<This extends HTMLElement, Value>(opts?: BindOpts<This, Value>): (base: ClassAccessorDecoratorTarget<This, Value>, ctx: ClassAccessorDecoratorContext<This, Value>) => ClassAccessorDecoratorResult<This, Value>;

package/target/lib/bind.js

@@ -1,19 +1,33 @@
 import { instanceMetadataStore, observe } from "@joist/observable";
-export function bind(mapper) {
+export function bind(opts = {}) {
     return function bindDecorator(base, ctx) {
-        const internalObserve = observe(mapper)(base, ctx);
+        const internalObserve = observe(opts)(base, ctx);
         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);
                         e.stopPropagation();
-                        e.update({ oldValue: null, newValue: ctx.access.get(this) });
+                        e.update({
+                            oldValue: null,
+                            newValue: ctx.access.get(this),
+                            alwaysUpdate: opts.alwaysUpdate,
+                            firstChange: true,
+                        });
+                        const name = ctx.name;
                         instanceMeta.bindings.add((changes) => {
-                            const key = ctx.name;
-                            const res = changes.get(key);
-                            if (res) {
-                                e.update(res);
+                            const change = changes.get(name);
+                            if (change) {
+                                e.update({ ...change, alwaysUpdate: opts.alwaysUpdate, firstChange: false });
+                            }
+                            else if (opts.alwaysUpdate) {
+                                const value = ctx.access.get(this);
+                                e.update({
+                                    oldValue: value,
+                                    newValue: value,
+                                    alwaysUpdate: opts.alwaysUpdate,
+                                    firstChange: false,
+                                });
                             }
                         });
                     }

package/target/lib/bind.js.map

@@ -1 +1 @@
-{"version":3,"file":"bind.js","sourceRoot":"","sources":["../../src/lib/bind.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEnE,MAAM,UAAU,IAAI,CAAkC,MAAkC;IACtF,OAAO,SAAS,aAAa,CAC3B,IAA+C,EAC/C,GAA+C;QAE/C,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAEnD,OAAO;YACL,IAAI,CAAC,KAAK;gBACR,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE;oBAC1C,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,GAAG,CAAC,IAAI,EAAE,CAAC;wBAChC,MAAM,YAAY,GAAG,qBAAqB,CAAC,IAAI,CAAO,IAAI,CAAC,CAAC;wBAE5D,CAAC,CAAC,eAAe,EAAE,CAAC;wBAEpB,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;wBAE7D,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;4BACpC,MAAM,GAAG,GAAG,GAAG,CAAC,IAAkB,CAAC;4BACnC,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;4BAE7B,IAAI,GAAG,EAAE,CAAC;gCACR,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;4BAChB,CAAC;wBACH,CAAC,CAAC,CAAC;oBACL,CAAC;gBACH,CAAC,CAAC,CAAC;gBAEH,IAAI,eAAe,CAAC,IAAI,EAAE,CAAC;oBACzB,OAAO,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAU,CAAC;gBACzD,CAAC;gBAED,OAAO,KAAK,CAAC;YACf,CAAC;YACD,GAAG,EAAE,eAAe,CAAC,GAAG;YACxB,GAAG,EAAE,eAAe,CAAC,GAAG;SACzB,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"bind.js","sourceRoot":"","sources":["../../src/lib/bind.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,OAAO,EAAe,MAAM,mBAAmB,CAAC;AAUhF,MAAM,UAAU,IAAI,CAAkC,OAA8B,EAAE;IACpF,OAAO,SAAS,aAAa,CAC3B,IAA+C,EAC/C,GAA+C;QAE/C,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAEjD,OAAO;YACL,IAAI,CAAC,KAAK;gBACR,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE;oBAC1C,IAAI,CAAC,CAAC,UAAU,CAAC,MAAM,KAAK,GAAG,CAAC,IAAI,EAAE,CAAC;wBACrC,MAAM,YAAY,GAAG,qBAAqB,CAAC,IAAI,CAAO,IAAI,CAAC,CAAC;wBAE5D,CAAC,CAAC,eAAe,EAAE,CAAC;wBAEpB,CAAC,CAAC,MAAM,CAAC;4BACP,QAAQ,EAAE,IAAI;4BACd,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;4BAC9B,YAAY,EAAE,IAAI,CAAC,YAAY;4BAC/B,WAAW,EAAE,IAAI;yBAClB,CAAC,CAAC;wBAEH,MAAM,IAAI,GAAG,GAAG,CAAC,IAAkB,CAAC;wBAEpC,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;4BACpC,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;4BAEjC,IAAI,MAAM,EAAE,CAAC;gCACX,CAAC,CAAC,MAAM,CAAC,EAAE,GAAG,MAAM,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC;4BAC/E,CAAC;iCAAM,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;gCAC7B,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gCAEnC,CAAC,CAAC,MAAM,CAAC;oCACP,QAAQ,EAAE,KAAK;oCACf,QAAQ,EAAE,KAAK;oCACf,YAAY,EAAE,IAAI,CAAC,YAAY;oCAC/B,WAAW,EAAE,KAAK;iCACnB,CAAC,CAAC;4BACL,CAAC;wBACH,CAAC,CAAC,CAAC;oBACL,CAAC;gBACH,CAAC,CAAC,CAAC;gBAEH,IAAI,eAAe,CAAC,IAAI,EAAE,CAAC;oBACzB,OAAO,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAU,CAAC;gBACzD,CAAC;gBAED,OAAO,KAAK,CAAC;YACf,CAAC;YACD,GAAG,EAAE,eAAe,CAAC,GAAG;YACxB,GAAG,EAAE,eAAe,CAAC,GAAG;SACzB,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}

package/target/lib/bind.test.js

@@ -0,0 +1,76 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { assert } from "chai";
+import { bind } from "./bind.js";
+import { JoistValueEvent } from "./events.js";
+import { JExpression } from "./expression.js";
+describe("bind decorator", () => {
+    let TestElement = (() => {
+        let _classSuper = HTMLElement;
+        let _value_decorators;
+        let _value_initializers = [];
+        let _value_extraInitializers = [];
+        let _alwaysUpdateValue_decorators;
+        let _alwaysUpdateValue_initializers = [];
+        let _alwaysUpdateValue_extraInitializers = [];
+        return class TestElement extends _classSuper {
+            static {
+                const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                _value_decorators = [bind()];
+                _alwaysUpdateValue_decorators = [bind({ alwaysUpdate: true })];
+                __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+                __esDecorate(this, null, _alwaysUpdateValue_decorators, { kind: "accessor", name: "alwaysUpdateValue", static: false, private: false, access: { has: obj => "alwaysUpdateValue" in obj, get: obj => obj.alwaysUpdateValue, set: (obj, value) => { obj.alwaysUpdateValue = value; } }, metadata: _metadata }, _alwaysUpdateValue_initializers, _alwaysUpdateValue_extraInitializers);
+                if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            }
+            #value_accessor_storage = __runInitializers(this, _value_initializers, "initial");
+            get value() { return this.#value_accessor_storage; }
+            set value(value) { this.#value_accessor_storage = value; }
+            #alwaysUpdateValue_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _alwaysUpdateValue_initializers, "initial"));
+            get alwaysUpdateValue() { return this.#alwaysUpdateValue_accessor_storage; }
+            set alwaysUpdateValue(value) { this.#alwaysUpdateValue_accessor_storage = value; }
+            constructor() {
+                super(...arguments);
+                __runInitializers(this, _alwaysUpdateValue_extraInitializers);
+            }
+        };
+    })();
+    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 = null;
+        let newValue = 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;
+        let newValue;
+        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");
+        element.value = "something else";
+        await Promise.resolve();
+        assert.equal(bindingCount, 2);
+        assert.equal(oldValue, "initial");
+        assert.equal(newValue, "initial");
+    });
+});
+//# sourceMappingURL=bind.test.js.map

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

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

package/target/lib/define.d.ts

@@ -3,3 +3,4 @@ import "./elements/for.element.js";
 import "./elements/if.element.js";
 import "./elements/bind.element.js";
 import "./elements/value.element.js";
+import "./elements/scope.element.js";

package/target/lib/define.js

@@ -3,4 +3,5 @@ import "./elements/for.element.js";
 import "./elements/if.element.js";
 import "./elements/bind.element.js";
 import "./elements/value.element.js";
+import "./elements/scope.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,4BAA4B,CAAC;AACpC,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;AACrC,OAAO,6BAA6B,CAAC"}

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

@@ -2,7 +2,7 @@ import { __esDecorate, __runInitializers } from "tslib";
 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";
 let JoistAsyncElement = (() => {
     let _classDecorators = [element({
             tagName: "j-async",
@@ -52,18 +52,27 @@ let JoistAsyncElement = (() => {
                 error: templates.find((t) => t.hasAttribute("error")),
                 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 }) => {
                 if (newValue !== oldValue) {
                     if (newValue instanceof Promise) {
                         this.#handlePromise(newValue);
                     }
+                    else if (this.#isAsyncState(newValue)) {
+                        this.#handleState(newValue);
+                    }
                     else {
                         console.warn("j-async bind value must be a Promise or AsyncState");
                     }
                 }
             }));
         }
+        #isAsyncState(value) {
+            return (typeof value === "object" &&
+                value !== null &&
+                "status" in value &&
+                (value.status === "loading" || value.status === "error" || value.status === "success"));
+        }
         async #handlePromise(promise) {
             try {
                 this.#handleState({ status: "loading" });

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

@@ -1 +1 @@
-{"version":3,"file":"async.element.js","sourceRoot":"","sources":["../../../src/lib/elements/async.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAEpE,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;IAmBxB,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;YAFP,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAGnB,oKAAS,KAAK,6BAAL,KAAK,qFAA2B;YAL3C,6KA+FC;;;YA/FY,uDAAiB;;QAE5B,qEAAgB,EAAE,EAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAGnB,0HAAoC,IAAI,GAAC;QAAzC,IAAS,KAAK,2CAA2B;QAAzC,IAAS,KAAK,iDAA2B;QAEzC,UAAU,uDAAG,QAAQ,CAAsB,UAAU,EAAE,IAAI,CAAC,EAAC;QAC7D,aAAa,GAAW,EAAE,CAAC;QAC3B,gBAAgB,GAIZ;YACF,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,SAAS;SACnB,CAAC;QAEF,iBAAiB;YACf,IAAI,CAAC,MAAM,EAAE,CAAC;YAGd,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;YAEhD,IAAI,CAAC,gBAAgB,GAAG;gBACtB,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;gBACzD,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;gBACrD,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;aAC1D,CAAC;YAEF,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAEpC,IAAI,CAAC,aAAa,CAChB,IAAI,eAAe,CAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;gBACpD,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;oBAC1B,IAAI,QAAQ,YAAY,OAAO,EAAE,CAAC;wBAChC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;oBAChC,CAAC;yBAAM,CAAC;wBACN,OAAO,CAAC,IAAI,CAAC,oDAAoD,CAAC,CAAC;oBACrE,CAAC;gBACH,CAAC;YACH,CAAC,CAAC,CACH,CAAC;QACJ,CAAC;QAED,KAAK,CAAC,cAAc,CAAC,OAAyB;YAC5C,IAAI,CAAC;gBACH,IAAI,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;gBACzC,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC;gBAC3B,IAAI,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;YACjD,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,IAAI,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;YAChD,CAAC;QACH,CAAC;QAED,YAAY,CAAC,KAAiB;YAC5B,IAAI,CAAC,MAAM,EAAE,CAAC;YAEd,IAAI,QAAQ,GAAoC,SAAS,CAAC;YAE1D,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YAEnB,QAAQ,KAAK,CAAC,MAAM,EAAE,CAAC;gBACrB,KAAK,SAAS;oBACZ,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC;oBACzC,MAAM;gBAER,KAAK,OAAO;oBACV,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;oBACvC,MAAM;gBAER,KAAK,SAAS;oBACZ,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC;oBACzC,MAAM;YACV,CAAC;YAED,IAAI,QAAQ,EAAE,CAAC;gBACb,MAAM,OAAO,GAAG,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;gBAC5D,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;gBAC7C,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;gBAC1B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC7B,CAAC;QACH,CAAC;QAED,MAAM;YACJ,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACtC,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;YACrC,CAAC;YACD,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;QAC1B,CAAC;QAED,oBAAoB;YAClB,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;;;;SA9FU,iBAAiB"}
+{"version":3,"file":"async.element.js","sourceRoot":"","sources":["../../../src/lib/elements/async.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAEpE,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;IAmBlC,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;YAFP,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAGnB,oKAAS,KAAK,6BAAL,KAAK,qFAA2B;YAL3C,6KA0GC;;;YA1GY,uDAAiB;;QAE5B,qEAAgB,EAAE,EAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAGnB,0HAAoC,IAAI,GAAC;QAAzC,IAAS,KAAK,2CAA2B;QAAzC,IAAS,KAAK,iDAA2B;QAEzC,UAAU,uDAAG,QAAQ,CAAsB,UAAU,EAAE,IAAI,CAAC,EAAC;QAC7D,aAAa,GAAW,EAAE,CAAC;QAC3B,gBAAgB,GAIZ;YACF,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,SAAS;SACnB,CAAC;QAEF,iBAAiB;YACf,IAAI,CAAC,MAAM,EAAE,CAAC;YAGd,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;YAEhD,IAAI,CAAC,gBAAgB,GAAG;gBACtB,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;gBACzD,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;gBACrD,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;aAC1D,CAAC;YAEF,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAEzC,IAAI,CAAC,aAAa,CAChB,IAAI,eAAe,CAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;gBACpD,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;oBAC1B,IAAI,QAAQ,YAAY,OAAO,EAAE,CAAC;wBAChC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;oBAChC,CAAC;yBAAM,IAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;wBACxC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;oBAC9B,CAAC;yBAAM,CAAC;wBACN,OAAO,CAAC,IAAI,CAAC,oDAAoD,CAAC,CAAC;oBACrE,CAAC;gBACH,CAAC;YACH,CAAC,CAAC,CACH,CAAC;QACJ,CAAC;QAED,aAAa,CAAC,KAAc;YAC1B,OAAO,CACL,OAAO,KAAK,KAAK,QAAQ;gBACzB,KAAK,KAAK,IAAI;gBACd,QAAQ,IAAI,KAAK;gBACjB,CAAC,KAAK,CAAC,MAAM,KAAK,SAAS,IAAI,KAAK,CAAC,MAAM,KAAK,OAAO,IAAI,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC,CACvF,CAAC;QACJ,CAAC;QAED,KAAK,CAAC,cAAc,CAAC,OAAyB;YAC5C,IAAI,CAAC;gBACH,IAAI,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;gBACzC,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC;gBAC3B,IAAI,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;YACjD,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,IAAI,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;YAChD,CAAC;QACH,CAAC;QAED,YAAY,CAAC,KAAiB;YAC5B,IAAI,CAAC,MAAM,EAAE,CAAC;YAEd,IAAI,QAAQ,GAAoC,SAAS,CAAC;YAE1D,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YAEnB,QAAQ,KAAK,CAAC,MAAM,EAAE,CAAC;gBACrB,KAAK,SAAS;oBACZ,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC;oBACzC,MAAM;gBAER,KAAK,OAAO;oBACV,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;oBACvC,MAAM;gBAER,KAAK,SAAS;oBACZ,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC;oBACzC,MAAM;YACV,CAAC;YAED,IAAI,QAAQ,EAAE,CAAC;gBACb,MAAM,OAAO,GAAG,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;gBAC5D,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;gBAC7C,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;gBAC1B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC7B,CAAC;QACH,CAAC;QAED,MAAM;YACJ,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACtC,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;YACrC,CAAC;YACD,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;QAC1B,CAAC;QAED,oBAAoB;YAClB,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;;;;SAzGU,iBAAiB"}