@joist/element 4.2.2 → 4.2.3-next.1

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

@@ -0,0 +1,53 @@
+import "./props.element.js";
+import { fixtureSync, html } from "@open-wc/testing";
+import { assert } from "chai";
+it("should pass props to child", () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        if (e.token.bindTo === "href") {
+            e.update({
+                oldValue: null,
+                newValue: "$foo",
+            });
+        }
+        if (e.token.bindTo === "target") {
+            e.update({
+                oldValue: null,
+                newValue: {
+                    value: "_blank",
+                },
+            });
+        }
+    }}
+    >
+      <j-props>
+        <a $href="href" $target="target.value">Hello World</a>
+      </j-props>
+    </div>
+  `);
+    const anchor = element.querySelector("a");
+    assert.equal(anchor?.getAttribute("href"), "$foo");
+    assert.equal(anchor?.getAttribute("target"), "_blank");
+});
+it("should pass props to specified child", () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        e.update({
+            oldValue: null,
+            newValue: "#foo",
+        });
+    }}
+    >
+      <j-props>
+        <a>Default</a>
+        <a id="test" $href="href">Target</a>
+      </j-props>
+    </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

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

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

package/target/lib/templating/elements/scope.d.ts

@@ -0,0 +1,13 @@
+import type { JoistValueEvent } from "../events.js";
+declare global {
+    interface HTMLElementTagNameMap {
+        "j-scope": JoistScopeElement;
+    }
+}
+export declare class JoistScopeElement extends HTMLElement {
+    #private;
+    accessor name: string;
+    accessor value: string;
+    onJoistValueFound(e: JoistValueEvent): void;
+    attributeChangedCallback(_: string, oldValue: string, newValue: string): void;
+}

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

@@ -0,0 +1,59 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { attr } from "../../attr.js";
+import { element } from "../../element.js";
+import { listen } from "../../listen.js";
+import { css, html } from "../../tags.js";
+let JoistScopeElement = (() => {
+    let _classDecorators = [element({
+            tagName: "j-value",
+            shadowDom: [css `:host{display: contents;}`, html `<slot></slot>`],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _onJoistValueFound_decorators;
+    var JoistScopeElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _name_decorators = [attr()];
+            _value_decorators = [attr()];
+            _onJoistValueFound_decorators = [listen("joist::value")];
+            __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+            __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, _onJoistValueFound_decorators, { kind: "method", name: "onJoistValueFound", static: false, private: false, access: { has: obj => "onJoistValueFound" in obj, get: obj => obj.onJoistValueFound }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            JoistScopeElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #name_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _name_initializers, ""));
+        get name() { return this.#name_accessor_storage; }
+        set name(value) { this.#name_accessor_storage = value; }
+        #value_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _value_initializers, ""));
+        get value() { return this.#value_accessor_storage; }
+        set value(value) { this.#value_accessor_storage = value; }
+        #binding = (__runInitializers(this, _value_extraInitializers), null);
+        onJoistValueFound(e) {
+            if (e.token.bindTo === this.name) {
+                e.stopPropagation();
+                this.#binding = e;
+                this.#binding.update({ oldValue: null, newValue: this.value });
+            }
+        }
+        attributeChangedCallback(_, oldValue, newValue) {
+            this.#binding?.update({ oldValue, newValue });
+        }
+    };
+    return JoistScopeElement = _classThis;
+})();
+export { JoistScopeElement };
+//# sourceMappingURL=scope.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scope.js","sourceRoot":"","sources":["../../../../src/lib/templating/elements/scope.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;IAc7B,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,6KA2BC;;;YA3BY,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,CACtB,CAAS,EACT,QAAgB,EAChB,QAAgB;YAEhB,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;QAChD,CAAC;;;;SA1BU,iBAAiB"}

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

@@ -0,0 +1,9 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "j-value": JoistValueElement;
+    }
+}
+export declare class JoistValueElement extends HTMLElement {
+    accessor bind: string;
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,56 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { attr } from "../../attr.js";
+import { element } from "../../element.js";
+import { css, html } from "../../tags.js";
+import { JoistValueEvent } from "../events.js";
+import { JToken } from "../token.js";
+let JoistValueElement = (() => {
+    let _classDecorators = [element({
+            tagName: "j-value",
+            shadowDom: [css `:host{display: contents;}`, html `<slot></slot>`],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _bind_decorators;
+    let _bind_initializers = [];
+    let _bind_extraInitializers = [];
+    var JoistValueElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _bind_decorators = [attr()];
+            __esDecorate(this, null, _bind_decorators, { kind: "accessor", name: "bind", static: false, private: false, access: { has: obj => "bind" in obj, get: obj => obj.bind, set: (obj, value) => { obj.bind = value; } }, metadata: _metadata }, _bind_initializers, _bind_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            JoistValueElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #bind_accessor_storage = __runInitializers(this, _bind_initializers, "");
+        get bind() { return this.#bind_accessor_storage; }
+        set bind(value) { this.#bind_accessor_storage = value; }
+        connectedCallback() {
+            const token = new JToken(this.bind);
+            this.dispatchEvent(new JoistValueEvent(token, (value) => {
+                let valueToWrite;
+                if (typeof value.newValue === "object" && value.newValue !== null) {
+                    valueToWrite = String(token.readTokenValueFrom(value.newValue));
+                }
+                else {
+                    valueToWrite = String(value.newValue);
+                }
+                if (this.textContent !== valueToWrite) {
+                    this.textContent = valueToWrite;
+                }
+            }));
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _bind_extraInitializers);
+        }
+    };
+    return JoistValueElement = _classThis;
+})();
+export { JoistValueElement };
+//# sourceMappingURL=value.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"value.element.js","sourceRoot":"","sources":["../../../../src/lib/templating/elements/value.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1C,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"}

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

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

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

@@ -0,0 +1,16 @@
+import "./value.element.js";
+import { fixtureSync, html } from "@open-wc/testing";
+import { assert } from "chai";
+it("should render content when the bind value is truthy", () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        e.update({ oldValue: null, newValue: "Hello World" });
+    }}
+    >
+      <j-value bind="test"></j-value>
+    </div>
+  `);
+    assert.equal(element.textContent?.trim(), "Hello World");
+});
+//# sourceMappingURL=value.element.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"value.element.test.js","sourceRoot":"","sources":["../../../../src/lib/templating/elements/value.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,qDAAqD,EAAE,GAAG,EAAE;IAC7D,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC,CAAC;IACxD,CAAC;;;;GAIJ,CAAC,CAAC;IAEH,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,aAAa,CAAC,CAAC;AAC3D,CAAC,CAAC,CAAC"}

package/target/lib/templating/events.d.ts

@@ -0,0 +1,12 @@
+import type { Change } from "@joist/observable";
+import type { JToken } from "./token.js";
+declare global {
+    interface HTMLElementEventMap {
+        "joist::value": JoistValueEvent;
+    }
+}
+export declare class JoistValueEvent extends Event {
+    readonly token: JToken;
+    readonly update: (value: Change<unknown>) => void;
+    constructor(bindTo: JToken, update: (value: Change<unknown>) => void);
+}

package/target/lib/templating/events.js

@@ -0,0 +1,10 @@
+export class JoistValueEvent extends Event {
+    token;
+    update;
+    constructor(bindTo, update) {
+        super("joist::value", { bubbles: true, composed: true });
+        this.token = bindTo;
+        this.update = update;
+    }
+}
+//# sourceMappingURL=events.js.map

package/target/lib/templating/events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.js","sourceRoot":"","sources":["../../../src/lib/templating/events.ts"],"names":[],"mappings":"AAUA,MAAM,OAAO,eAAgB,SAAQ,KAAK;IAC/B,KAAK,CAAS;IACd,MAAM,CAAmC;IAElD,YAAY,MAAc,EAAE,MAAwC;QAClE,KAAK,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QAEzD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;QACpB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;CACF"}

package/target/lib/templating/token.d.ts

@@ -0,0 +1,8 @@
+export declare class JToken {
+    rawToken: string;
+    isNegated: boolean;
+    bindTo: string;
+    path: string[];
+    constructor(rawToken: string);
+    readTokenValueFrom<T = unknown>(obj: object): T;
+}

package/target/lib/templating/token.js

@@ -0,0 +1,27 @@
+export class JToken {
+    rawToken;
+    isNegated = false;
+    bindTo;
+    path = [];
+    constructor(rawToken) {
+        this.rawToken = rawToken;
+        this.isNegated = this.rawToken.startsWith("!");
+        this.path = this.rawToken.split(".");
+        this.bindTo = this.path.shift() ?? "";
+        this.bindTo = this.bindTo.replaceAll("!", "");
+    }
+    readTokenValueFrom(obj) {
+        let pointer = obj;
+        if (!this.path.length) {
+            return pointer;
+        }
+        for (const part of this.path) {
+            pointer = pointer[part];
+            if (pointer === undefined) {
+                break;
+            }
+        }
+        return pointer;
+    }
+}
+//# sourceMappingURL=token.js.map

package/target/lib/templating/token.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"token.js","sourceRoot":"","sources":["../../../src/lib/templating/token.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,MAAM;IACjB,QAAQ,CAAS;IACjB,SAAS,GAAG,KAAK,CAAC;IAClB,MAAM,CAAS;IACf,IAAI,GAAa,EAAE,CAAC;IAEpB,YAAY,QAAgB;QAC1B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAEzB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;QAE/C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACrC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC;QACtC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAChD,CAAC;IAED,kBAAkB,CAAc,GAAW;QACzC,IAAI,OAAO,GAAQ,GAAG,CAAC;QAEvB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACtB,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAC7B,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;YAExB,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;gBAC1B,MAAM;YACR,CAAC;QACH,CAAC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;CACF"}

package/target/lib/templating/token.test.js

@@ -0,0 +1,56 @@
+import { assert } from "chai";
+import { JToken } from "./token.js";
+describe("JToken", () => {
+    describe("constructor", () => {
+        it("should initialize with a raw token", () => {
+            const token = new JToken("example.token");
+            assert.equal(token.rawToken, "example.token");
+        });
+        it("should set isNegated to true if the token starts with '!'", () => {
+            const token = new JToken("!example.token");
+            assert.isTrue(token.isNegated);
+        });
+        it("should set isNegated to false if the token does not start with '!'", () => {
+            const token = new JToken("example.token");
+            assert.isFalse(token.isNegated);
+        });
+        it("should correctly parse the bindTo property", () => {
+            const token = new JToken("example.token");
+            assert.equal(token.bindTo, "example");
+        });
+        it("should correctly parse the path property", () => {
+            const token = new JToken("example.token.part");
+            assert.deepEqual(token.path, ["token", "part"]);
+        });
+        it("should remove '!' from bindTo if present", () => {
+            const token = new JToken("!example.token");
+            assert.equal(token.bindTo, "example");
+        });
+    });
+    describe("readTokenValueFrom", () => {
+        it("should read the value from a nested object", () => {
+            const token = new JToken("example.token.part");
+            const obj = { token: { part: 42 } };
+            const value = token.readTokenValueFrom(obj);
+            assert.equal(value, 42);
+        });
+        it("should return undefined if the path does not exist", () => {
+            const token = new JToken("example.nonexistent.path");
+            const obj = { token: { part: 42 } };
+            const value = token.readTokenValueFrom(obj);
+            assert.isUndefined(value);
+        });
+        it("should handle empty paths gracefully", () => {
+            const token = new JToken("example");
+            const obj = { foo: 42 };
+            const value = token.readTokenValueFrom(obj);
+            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(null), TypeError);
+            assert.throws(() => token.readTokenValueFrom(undefined), TypeError);
+        });
+    });
+});
+//# sourceMappingURL=token.test.js.map

package/target/lib/templating/token.test.js.map

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

package/target/lib/templating.d.ts

@@ -0,0 +1,2 @@
+export { bind } from "./templating/bind.js";
+export { JoistValueEvent } from "./templating/events.js";

package/target/lib/templating.js

@@ -0,0 +1,3 @@
+export { bind } from "./templating/bind.js";
+export { JoistValueEvent } from "./templating/events.js";
+//# sourceMappingURL=templating.js.map

package/target/lib/templating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"templating.js","sourceRoot":"","sources":["../../src/lib/templating.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC"}

package/target/lib.d.ts

@@ -4,5 +4,6 @@ export { listen } from "./lib/listen.js";
 export { element } from "./lib/element.js";
 export { query } from "./lib/query.js";
 export { queryAll } from "./lib/query-all.js";
+export { QueryResult } from "./lib/query.js";
 export { ready } from "./lib/lifecycle.js";
 export { attrChanged } from "./lib/attr-changed.js";

package/target/lib.js.map

@@ -1 +1 @@
-{"version":3,"file":"lib.js","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"lib.js","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC"}

package/src/lib/template.test.ts

@@ -1,123 +0,0 @@
-import { assert } from "chai";
-
-import { template } from "./template.js";
-
-// Run all tests with both shadow and light dom
-const TESTS = [
-  function bindableNodes(el: HTMLElement, root: HTMLElement | ShadowRoot) {
-    it(`should intialize bindable nodes ${root instanceof ShadowRoot ? "(ShadowDOM)" : "(LightDOM)"}`, () => {
-      el.title = "Hello World";
-      el.ariaLabel = "This is the label";
-      el.ariaDescription = "This is the description";
-
-      root.innerHTML = /*html*/ `
-        <span #:bind="title"></span>
-        
-        <ul>
-          <li #:bind="ariaLabel"></li>
-          <li #:bind="ariaDescription"></li>
-        </ul>
-      `;
-
-      const render = template().bind(el);
-
-      render();
-
-      assert.equal(
-        root.innerHTML
-          .split("\n")
-          .map((res) => res.trim())
-          .join(""),
-        '<span #:bind="title">Hello World</span><ul><li #:bind="ariaLabel">This is the label</li><li #:bind="ariaDescription">This is the description</li></ul>',
-      );
-    });
-  },
-  function attributeNodes(el: HTMLElement, root: HTMLElement | ShadowRoot) {
-    it(`should intialize template attributes ${root instanceof ShadowRoot ? "(ShadowDOM)" : "(LightDOM)"}`, () => {
-      el.ariaLabel = "This is the label";
-      el.ariaDescription = "This is the description";
-
-      root.innerHTML = /*html*/ `
-        <ul #:aria-label="ariaLabel" #:aria-description="ariaDescription"></ul>
-      `;
-
-      const render = template().bind(el);
-
-      render();
-
-      assert.equal(
-        root.innerHTML
-          .split("\n")
-          .map((res) => res.trim())
-          .join(""),
-        '<ul #:aria-label="ariaLabel" #:aria-description="ariaDescription" aria-label="This is the label" aria-description="This is the description"></ul>',
-      );
-    });
-  },
-  function customGetter(el: HTMLElement, root: HTMLElement | ShadowRoot) {
-    it(`should use custom getter for values ${root instanceof ShadowRoot ? "(ShadowDOM)" : "(LightDOM)"}`, () => {
-      const data: Record<string, string> = {
-        title: "Hello World",
-        ariaLabel: "This is the label",
-        ariaDescription: "This is the description",
-      };
-
-      root.innerHTML = /*html*/ `
-        <span #:bind="title"></span>
-        
-        <ul>
-          <li #:bind="ariaLabel"></li>
-          <li #:bind="ariaDescription"></li>
-        </ul>
-      `;
-
-      const render = template({ value: (key) => data[key] }).bind(el);
-
-      render();
-
-      assert.equal(
-        root.innerHTML
-          .split("\n")
-          .map((res) => res.trim())
-          .join(""),
-        '<span #:bind="title">Hello World</span><ul><li #:bind="ariaLabel">This is the label</li><li #:bind="ariaDescription">This is the description</li></ul>',
-      );
-    });
-  },
-  function customPrefix(el: HTMLElement, root: HTMLElement | ShadowRoot) {
-    it(`should use custom getter for values ${root instanceof ShadowRoot ? "(ShadowDOM)" : "(LightDOM)"}`, () => {
-      el.title = "Hello World";
-      el.ariaLabel = "This is the label";
-      el.ariaDescription = "This is the description";
-
-      root.innerHTML = /*html*/ `
-        <span x-bind="title"></span>
-        
-        <ul x-aria-label="ariaLabel">
-          <li x-bind="ariaLabel"></li>
-          <li x-bind="ariaDescription"></li>
-        </ul>
-      `;
-
-      const render = template({ tokenPrefix: "x-" }).bind(el);
-
-      render();
-
-      assert.equal(
-        root.innerHTML
-          .split("\n")
-          .map((res) => res.trim())
-          .join(""),
-        '<span x-bind="title">Hello World</span><ul x-aria-label="ariaLabel" aria-label="This is the label"><li x-bind="ariaLabel">This is the label</li><li x-bind="ariaDescription">This is the description</li></ul>',
-      );
-    });
-  },
-];
-
-for (const test of TESTS) {
-  const lightEl = document.createElement("div");
-  test(lightEl, lightEl);
-
-  const shadowEl = document.createElement("div");
-  test(shadowEl, shadowEl.attachShadow({ mode: "open" }));
-}

package/src/lib/template.ts

@@ -1,130 +0,0 @@
-type Updater = () => void;
-class Updates extends Set<Updater> {}
-type TemplateValueGetter = (key: string) => string;
-
-export interface TemplateOpts {
-  value?: TemplateValueGetter;
-  tokenPrefix?: string;
-}
-
-export interface RenderOpts {
-  refresh?: boolean;
-}
-
-export function template({ tokenPrefix = "#:", value }: TemplateOpts = {}) {
-  // Track all nodes that can be updated and their associated property
-  let updates: Updates | null = null;
-
-  return function render<T extends HTMLElement>(
-    this: T,
-    opts?: RenderOpts,
-  ): void {
-    if (!updates || opts?.refresh) {
-      updates = findUpdates(this, {
-        tokenPrefix,
-        value: value ?? ((key: string) => getTemplateValue(this, key)),
-      });
-    } else {
-      for (const update of updates) {
-        update();
-      }
-    }
-  };
-}
-
-function findUpdates(el: HTMLElement, opts: Required<TemplateOpts>): Updates {
-  const iterator = document.createTreeWalker(
-    el.shadowRoot ?? el,
-    NodeFilter.SHOW_ELEMENT,
-  );
-  const updates = new Updates();
-
-  while (iterator.nextNode()) {
-    const res = trackElement(iterator.currentNode, updates, opts);
-
-    if (res !== null) {
-      iterator.currentNode = res;
-    }
-  }
-
-  return updates;
-}
-
-/**
- * configures and tracks a given Node so that it can be updated in place later.
- */
-function trackElement(
-  node: Node,
-  updates: Updates,
-  opts: Required<TemplateOpts>,
-): Node | null {
-  const element = node as Element;
-  const getter = opts.value;
-  const tokenPrefix = opts.tokenPrefix;
-
-  for (const attr of element.attributes) {
-    const nodeValue = attr.value.trim();
-    const realAttributeName = attr.name.replace(tokenPrefix, "");
-
-    let update: Updater | null = null;
-
-    if (attr.name.startsWith(`${tokenPrefix}bind`)) {
-      update = () => {
-        const value = getter(attr.value);
-
-        if (element.textContent !== value) {
-          element.textContent = getter(attr.value);
-        }
-      };
-    } else if (attr.name.startsWith(tokenPrefix)) {
-      const isBooleanAttr = nodeValue.startsWith("!");
-      const isPositive = nodeValue.startsWith("!!");
-      const propertyKey = nodeValue.replaceAll("!", "");
-
-      if (isBooleanAttr) {
-        update = () => {
-          const value = isPositive
-            ? !!getter(propertyKey)
-            : !getter(propertyKey);
-
-          if (value) {
-            element.setAttribute(realAttributeName, "");
-          } else {
-            element.removeAttribute(realAttributeName);
-          }
-        };
-      } else {
-        const realAttribute = document.createAttribute(realAttributeName);
-        element.setAttributeNode(realAttribute);
-
-        update = () => {
-          const value = getter(nodeValue);
-
-          if (realAttribute.value !== value) {
-            realAttribute.value = value;
-          }
-        };
-      }
-    }
-
-    if (update) {
-      updates.add(update);
-
-      update();
-    }
-  }
-
-  return null;
-}
-
-export function getTemplateValue(obj: object, key: string): any {
-  const parsed = key.split(".");
-
-  let pointer: any = obj;
-
-  for (const part of parsed) {
-    pointer = pointer[part];
-  }
-
-  return pointer;
-}