@joist/element 4.0.0-next.3 → 4.0.0-next.30

package/target/lib/listen.test.js

@@ -0,0 +1,159 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { assert } from 'chai';
+import { element } from './element.js';
+import { listen } from './listen.js';
+describe('@listen()', () => {
+    it('should add listener to an outer HTMLElement', (done) => {
+        let MyElement = (() => {
+            let _classDecorators = [element({
+                    tagName: 'listener-1'
+                })];
+            let _classDescriptor;
+            let _classExtraInitializers = [];
+            let _classThis;
+            let _classSuper = HTMLElement;
+            let _instanceExtraInitializers = [];
+            let _onClick_decorators;
+            var MyElement = class extends _classSuper {
+                static { _classThis = this; }
+                static {
+                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                    _onClick_decorators = [listen('click')];
+                    __esDecorate(this, null, _onClick_decorators, { kind: "method", name: "onClick", static: false, private: false, access: { has: obj => "onClick" in obj, get: obj => obj.onClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+                    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+                    MyElement = _classThis = _classDescriptor.value;
+                    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+                    __runInitializers(_classThis, _classExtraInitializers);
+                }
+                onClick(e) {
+                    assert.equal(e.type, 'click');
+                    done();
+                }
+                constructor() {
+                    super(...arguments);
+                    __runInitializers(this, _instanceExtraInitializers);
+                }
+            };
+            return MyElement = _classThis;
+        })();
+        const el = new MyElement();
+        el.dispatchEvent(new Event('click'));
+    });
+    it('should add listener to the shadow root if available', (done) => {
+        let MyElement = (() => {
+            let _classDecorators = [element({
+                    tagName: 'listener-2',
+                    shadowDom: []
+                })];
+            let _classDescriptor;
+            let _classExtraInitializers = [];
+            let _classThis;
+            let _classSuper = HTMLElement;
+            let _instanceExtraInitializers = [];
+            let _onClick_decorators;
+            var MyElement = class extends _classSuper {
+                static { _classThis = this; }
+                static {
+                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                    _onClick_decorators = [listen('click')];
+                    __esDecorate(this, null, _onClick_decorators, { kind: "method", name: "onClick", static: false, private: false, access: { has: obj => "onClick" in obj, get: obj => obj.onClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+                    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+                    MyElement = _classThis = _classDescriptor.value;
+                    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+                    __runInitializers(_classThis, _classExtraInitializers);
+                }
+                onClick(e) {
+                    assert.equal(e.type, 'click');
+                    done();
+                }
+                constructor() {
+                    super(...arguments);
+                    __runInitializers(this, _instanceExtraInitializers);
+                }
+            };
+            return MyElement = _classThis;
+        })();
+        const el = new MyElement();
+        el.shadowRoot.dispatchEvent(new Event('click'));
+    });
+    it('should restrict argument to an event or an event subtype', (done) => {
+        class CustomEvent extends Event {
+            test = 'Hello World';
+            constructor() {
+                super('customevent');
+            }
+        }
+        let MyElement = (() => {
+            let _classDecorators = [element({
+                    tagName: 'listener-3'
+                })];
+            let _classDescriptor;
+            let _classExtraInitializers = [];
+            let _classThis;
+            let _classSuper = HTMLElement;
+            let _instanceExtraInitializers = [];
+            let _onClick_decorators;
+            var MyElement = class extends _classSuper {
+                static { _classThis = this; }
+                static {
+                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                    _onClick_decorators = [listen('customevent')];
+                    __esDecorate(this, null, _onClick_decorators, { kind: "method", name: "onClick", static: false, private: false, access: { has: obj => "onClick" in obj, get: obj => obj.onClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+                    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+                    MyElement = _classThis = _classDescriptor.value;
+                    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+                    __runInitializers(_classThis, _classExtraInitializers);
+                }
+                onClick(e) {
+                    assert.equal(e.type, 'customevent');
+                    done();
+                }
+                constructor() {
+                    super(...arguments);
+                    __runInitializers(this, _instanceExtraInitializers);
+                }
+            };
+            return MyElement = _classThis;
+        })();
+        const el = new MyElement();
+        el.dispatchEvent(new CustomEvent());
+    });
+    it('should respect a provided selector function', (done) => {
+        let MyElement = (() => {
+            let _classDecorators = [element({
+                    tagName: 'listener-4',
+                    shadowDom: []
+                })];
+            let _classDescriptor;
+            let _classExtraInitializers = [];
+            let _classThis;
+            let _classSuper = HTMLElement;
+            let _instanceExtraInitializers = [];
+            let _onClick_decorators;
+            var MyElement = class extends _classSuper {
+                static { _classThis = this; }
+                static {
+                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                    _onClick_decorators = [listen('click', (host) => host)];
+                    __esDecorate(this, null, _onClick_decorators, { kind: "method", name: "onClick", static: false, private: false, access: { has: obj => "onClick" in obj, get: obj => obj.onClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+                    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+                    MyElement = _classThis = _classDescriptor.value;
+                    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+                    __runInitializers(_classThis, _classExtraInitializers);
+                }
+                onClick(e) {
+                    assert.equal(e.type, 'click');
+                    done();
+                }
+                constructor() {
+                    super(...arguments);
+                    __runInitializers(this, _instanceExtraInitializers);
+                }
+            };
+            return MyElement = _classThis;
+        })();
+        const el = new MyElement();
+        el.dispatchEvent(new Event('click'));
+    });
+});
+//# sourceMappingURL=listen.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"listen.test.js","sourceRoot":"","sources":["../../src/lib/listen.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,6CAA6C,EAAE,CAAC,IAAI,EAAE,EAAE;YAInD,SAAS;oCAHd,OAAO,CAAC;oBACP,OAAO,EAAE,YAAY;iBACtB,CAAC;;;;8BACsB,WAAW;;;iCAAnB,SAAQ,WAAW;;;;2CAChC,MAAM,CAAC,OAAO,CAAC;oBAChB,wKAAA,OAAO,6DAIN;oBANH,6KAOC;;;oBAPK,uDAAS;;gBAEb,OAAO,CAAC,CAAQ;oBACd,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;oBAE9B,IAAI,EAAE,CAAC;gBACT,CAAC;;;oBANG,mDAAS;;;;;QASf,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;QAE3B,EAAE,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qDAAqD,EAAE,CAAC,IAAI,EAAE,EAAE;YAK3D,SAAS;oCAJd,OAAO,CAAC;oBACP,OAAO,EAAE,YAAY;oBACrB,SAAS,EAAE,EAAE;iBACd,CAAC;;;;8BACsB,WAAW;;;iCAAnB,SAAQ,WAAW;;;;2CAChC,MAAM,CAAC,OAAO,CAAC;oBAChB,wKAAA,OAAO,6DAIN;oBANH,6KAOC;;;oBAPK,uDAAS;;gBAEb,OAAO,CAAC,CAAQ;oBACd,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;oBAE9B,IAAI,EAAE,CAAC;gBACT,CAAC;;;oBANG,mDAAS;;;;;QASf,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;QAE3B,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0DAA0D,EAAE,CAAC,IAAI,EAAE,EAAE;QACtE,MAAM,WAAY,SAAQ,KAAK;YAC7B,IAAI,GAAG,aAAa,CAAC;YAErB;gBACE,KAAK,CAAC,aAAa,CAAC,CAAC;YACvB,CAAC;SACF;YAKK,SAAS;oCAHd,OAAO,CAAC;oBACP,OAAO,EAAE,YAAY;iBACtB,CAAC;;;;8BACsB,WAAW;;;iCAAnB,SAAQ,WAAW;;;;2CAChC,MAAM,CAAC,aAAa,CAAC;oBACtB,wKAAA,OAAO,6DAIN;oBANH,6KAOC;;;oBAPK,uDAAS;;gBAEb,OAAO,CAAC,CAAc;oBACpB,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;oBAEpC,IAAI,EAAE,CAAC;gBACT,CAAC;;;oBANG,mDAAS;;;;;QASf,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;QAE3B,EAAE,CAAC,aAAa,CAAC,IAAI,WAAW,EAAE,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE,CAAC,IAAI,EAAE,EAAE;YAKnD,SAAS;oCAJd,OAAO,CAAC;oBACP,OAAO,EAAE,YAAY;oBACrB,SAAS,EAAE,EAAE;iBACd,CAAC;;;;8BACsB,WAAW;;;iCAAnB,SAAQ,WAAW;;;;2CAChC,MAAM,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC;oBAChC,wKAAA,OAAO,6DAIN;oBANH,6KAOC;;;oBAPK,uDAAS;;gBAEb,OAAO,CAAC,CAAQ;oBACd,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;oBAE9B,IAAI,EAAE,CAAC;gBACT,CAAC;;;oBANG,mDAAS;;;;;QASf,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;QAE3B,EAAE,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/metadata.d.ts

@@ -1,17 +1,24 @@
 export interface AttrDef {
     propName: string | symbol;
-    attrName: string;
     observe: boolean;
+    reflect: boolean;
+    getPropValue: Function;
+    setPropValue: Function;
 }
-export type ListenerRootSelector = (el: HTMLElement) => HTMLElement | ShadowRoot;
-export declare class ElementMetadata {
-    attrs: AttrDef[];
-    listeners: Map<string, {
-        cb: (e: Event) => void;
-        root: ListenerRootSelector;
-    }>;
+export type ListenerSelector<T> = (el: T) => Element | ShadowRoot | null;
+export interface Listener<T> {
+    event: string;
+    cb: (e: Event) => void;
+    selector: ListenerSelector<T>;
 }
-export declare class MetadataStore extends WeakMap<object, ElementMetadata> {
-    read(value: object): ElementMetadata;
+export declare class AttrMetadata extends Map<string, AttrDef> {
+}
+export declare class ElementMetadata<T> {
+    attrs: AttrMetadata;
+    listeners: Listener<T>[];
+    onReady: Set<Function>;
+}
+export declare class MetadataStore extends WeakMap<object, ElementMetadata<unknown>> {
+    read<T>(value: object): ElementMetadata<T>;
 }
 export declare const metadataStore: MetadataStore;

package/target/lib/metadata.js

@@ -1,7 +1,10 @@
 Symbol.metadata ??= Symbol('Symbol.metadata');
+export class AttrMetadata extends Map {
+}
 export class ElementMetadata {
-    attrs = [];
-    listeners = new Map();
+    attrs = new AttrMetadata();
+    listeners = [];
+    onReady = new Set();
 }
 export class MetadataStore extends WeakMap {
     read(value) {

package/target/lib/metadata.js.map

@@ -1 +1 @@
-{"version":3,"file":"metadata.js","sourceRoot":"","sources":["../../src/lib/metadata.ts"],"names":[],"mappings":"AAAC,MAAc,CAAC,QAAQ,KAAK,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAUvD,MAAM,OAAO,eAAe;IAC1B,KAAK,GAAc,EAAE,CAAC;IACtB,SAAS,GAAG,IAAI,GAAG,EAAkE,CAAC;CACvF;AAED,MAAM,OAAO,aAAc,SAAQ,OAAgC;IACjE,IAAI,CAAC,KAAa;QAChB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACrB,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,eAAe,EAAE,CAAC,CAAC;QACzC,CAAC;QAED,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,CAAE,CAAC;IAC1B,CAAC;CACF;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,aAAa,EAAE,CAAC"}
+{"version":3,"file":"metadata.js","sourceRoot":"","sources":["../../src/lib/metadata.ts"],"names":[],"mappings":"AAAC,MAAc,CAAC,QAAQ,KAAK,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAkBvD,MAAM,OAAO,YAAa,SAAQ,GAAoB;CAAG;AAEzD,MAAM,OAAO,eAAe;IAC1B,KAAK,GAAG,IAAI,YAAY,EAAE,CAAC;IAC3B,SAAS,GAAkB,EAAE,CAAC;IAC9B,OAAO,GAAG,IAAI,GAAG,EAAY,CAAC;CAC/B;AAED,MAAM,OAAO,aAAc,SAAQ,OAAyC;IAC1E,IAAI,CAAI,KAAa;QACnB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACrB,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,eAAe,EAAE,CAAC,CAAC;QACzC,CAAC;QAED,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,CAAE,CAAC;IAC1B,CAAC;CACF;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,aAAa,EAAE,CAAC"}

package/target/lib/query.d.ts

@@ -0,0 +1,9 @@
+type Tags = keyof HTMLElementTagNameMap;
+type SVGTags = keyof SVGElementTagNameMap;
+type MathTags = keyof MathMLElementTagNameMap;
+type QueryResult<T> = (updates?: Partial<T>) => T;
+export declare function query<K extends Tags>(selectors: K): QueryResult<HTMLElementTagNameMap[K]>;
+export declare function query<K extends SVGTags>(selectors: K): QueryResult<SVGElementTagNameMap[K]>;
+export declare function query<K extends MathTags>(selectors: K): QueryResult<MathMLElementTagNameMap[K]>;
+export declare function query<E extends HTMLElement = HTMLElement>(selectors: string): QueryResult<E>;
+export {};

package/target/lib/query.js

@@ -0,0 +1,19 @@
+export function query(query) {
+    let res = null;
+    return function () {
+        if (res) {
+            return res;
+        }
+        if (this.shadowRoot) {
+            res = this.shadowRoot.querySelector(query);
+        }
+        else {
+            res = this.querySelector(query);
+        }
+        if (!res) {
+            throw new Error('could not find element');
+        }
+        return res;
+    };
+}
+//# sourceMappingURL=query.js.map

package/target/lib/query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"query.js","sourceRoot":"","sources":["../../src/lib/query.ts"],"names":[],"mappings":"AAUA,MAAM,UAAU,KAAK,CAAiB,KAAQ;IAC5C,IAAI,GAAG,GAAoC,IAAI,CAAC;IAEhD,OAAO;QACL,IAAI,GAAG,EAAE,CAAC;YACR,OAAO,GAAG,CAAC;QACb,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAI,KAAK,CAAC,CAAC;QAChD,CAAC;aAAM,CAAC;YACN,GAAG,GAAG,IAAI,CAAC,aAAa,CAAI,KAAK,CAAC,CAAC;QACrC,CAAC;QAED,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,MAAM,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC;QAC5C,CAAC;QAED,OAAO,GAAG,CAAC;IACb,CAAC,CAAC;AACJ,CAAC"}

package/target/lib/query.test.d.ts

@@ -0,0 +1 @@
+export {};

package/target/lib/query.test.js

@@ -0,0 +1,41 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { expect } from 'chai';
+import { element } from './element.js';
+import { query } from './query.js';
+import { html } from './tags.js';
+it('should work', () => {
+    let MyElement = (() => {
+        let _classDecorators = [element({
+                tagName: 'query-test-1',
+                shadowDom: [
+                    html `
+        <form>
+          <input id="fname" name="fname" />
+          <input id="lname" name="lname" />
+        </form>
+      `
+                ]
+            })];
+        let _classDescriptor;
+        let _classExtraInitializers = [];
+        let _classThis;
+        let _classSuper = HTMLElement;
+        var MyElement = class extends _classSuper {
+            static { _classThis = this; }
+            static {
+                const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+                MyElement = _classThis = _classDescriptor.value;
+                if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+                __runInitializers(_classThis, _classExtraInitializers);
+            }
+            fname = query('#fname');
+            lname = query('#lname');
+        };
+        return MyElement = _classThis;
+    })();
+    const el = new MyElement();
+    expect(el.fname()).to.equal(el.shadowRoot?.querySelector('#fname'));
+    expect(el.lname()).to.equal(el.shadowRoot?.querySelector('#lname'));
+});
+//# sourceMappingURL=query.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"query.test.js","sourceRoot":"","sources":["../../src/lib/query.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,EAAE,CAAC,aAAa,EAAE,GAAG,EAAE;QAYf,SAAS;gCAXd,OAAO,CAAC;gBACP,OAAO,EAAE,cAAc;gBACvB,SAAS,EAAE;oBACT,IAAI,CAAA;;;;;OAKH;iBACF;aACF,CAAC;;;;0BACsB,WAAW;6BAAnB,SAAQ,WAAW;;;;gBAAnC,6KAGC;;;gBAHK,uDAAS;;YACb,KAAK,GAAG,KAAK,CAAmB,QAAQ,CAAC,CAAC;YAC1C,KAAK,GAAG,KAAK,CAAmB,QAAQ,CAAC,CAAC;;;;IAG5C,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;IAE3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;IACpE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;AACtE,CAAC,CAAC,CAAC"}

package/target/lib/result.d.ts

@@ -1,12 +1,3 @@
 export interface ShadowResult {
-    run(el: HTMLElement): void;
-}
-export declare abstract class JoistShadowResult implements ShadowResult {
-    #private;
-    strings: TemplateStringsArray;
-    values: any[];
-    get shadow(): ShadowRoot;
-    constructor(raw: TemplateStringsArray, ...values: any[]);
-    run(el: HTMLElement): void;
-    abstract setup(root: ShadowRoot): void;
+    apply(el: Element): void;
 }

package/target/lib/result.js

@@ -1,23 +1,2 @@
-export class JoistShadowResult {
-    strings;
-    values;
-    #shadow = undefined;
-    get shadow() {
-        if (!this.#shadow) {
-            throw new Error('ShadowResult has not been applied');
-        }
-        return this.#shadow;
-    }
-    constructor(raw, ...values) {
-        this.strings = raw;
-        this.values = values;
-    }
-    run(el) {
-        if (!el.shadowRoot) {
-            throw new Error('ShadowResult has not been applied');
-        }
-        this.#shadow = el.shadowRoot;
-        this.setup(this.#shadow);
-    }
-}
+export {};
 //# sourceMappingURL=result.js.map

package/target/lib/result.js.map

@@ -1 +1 @@
-{"version":3,"file":"result.js","sourceRoot":"","sources":["../../src/lib/result.ts"],"names":[],"mappings":"AAIA,MAAM,OAAgB,iBAAiB;IACrC,OAAO,CAAC;IACR,MAAM,CAAC;IAEP,OAAO,GAA2B,SAAS,CAAC;IAE5C,IAAI,MAAM;QACR,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;QACvD,CAAC;QAED,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,YAAY,GAAyB,EAAE,GAAG,MAAa;QACrD,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC;QACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,GAAG,CAAC,EAAe;QACjB,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;YACnB,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;QACvD,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC;QAE7B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3B,CAAC;CAGF"}
+{"version":3,"file":"result.js","sourceRoot":"","sources":["../../src/lib/result.ts"],"names":[],"mappings":""}

package/target/lib/tags.d.ts

@@ -1,11 +1,13 @@
-import { JoistShadowResult } from './result.js';
-export declare const htmlTemplateCache: WeakMap<TemplateStringsArray, HTMLTemplateElement>;
-export declare class HTMLResult extends JoistShadowResult {
-    setup(root: ShadowRoot): void;
+import { ShadowResult } from './result.js';
+export declare class HTMLResult<T extends HTMLElement> implements ShadowResult {
+    #private;
+    constructor(raw: TemplateStringsArray, ..._values: any[]);
+    apply(el: T): void;
 }
-export declare function html(strings: TemplateStringsArray, ...values: any[]): HTMLResult;
-export declare const styleSheetCache: WeakMap<TemplateStringsArray, CSSStyleSheet>;
-export declare class CSSResult extends JoistShadowResult {
-    setup(root: ShadowRoot): void;
+export declare function html<T extends HTMLElement>(strings: TemplateStringsArray, ...values: any[]): HTMLResult<T>;
+export declare class CSSResult implements ShadowResult {
+    #private;
+    constructor(raw: TemplateStringsArray, ..._values: any[]);
+    apply(el: HTMLElement): void;
 }
 export declare function css(strings: TemplateStringsArray): CSSResult;

package/target/lib/tags.js

@@ -1,34 +1,28 @@
-import { JoistShadowResult } from './result.js';
-export const htmlTemplateCache = new WeakMap();
-export class HTMLResult extends JoistShadowResult {
-    setup(root) {
-        let template;
-        if (htmlTemplateCache.has(this.strings)) {
-            template = htmlTemplateCache.get(this.strings);
-        }
-        else {
-            template = document.createElement('template');
-            template.innerHTML = concat(this.strings);
-            htmlTemplateCache.set(this.strings, template);
+export class HTMLResult {
+    #template;
+    constructor(raw, ..._values) {
+        this.#template = document.createElement('template');
+        this.#template.innerHTML = concat(raw);
+    }
+    apply(el) {
+        if (el.shadowRoot) {
+            el.shadowRoot.append(this.#template.content.cloneNode(true));
         }
-        root.append(template.content.cloneNode(true));
     }
 }
 export function html(strings, ...values) {
     return new HTMLResult(strings, ...values);
 }
-export const styleSheetCache = new WeakMap();
-export class CSSResult extends JoistShadowResult {
-    setup(root) {
-        let sheet;
-        if (styleSheetCache.has(this.strings)) {
-            sheet = styleSheetCache.get(this.strings);
-        }
-        else {
-            sheet = new CSSStyleSheet();
-            sheet.replaceSync(concat(this.strings));
+export class CSSResult {
+    #sheet;
+    constructor(raw, ..._values) {
+        this.#sheet = new CSSStyleSheet();
+        this.#sheet.replaceSync(concat(raw));
+    }
+    apply(el) {
+        if (el.shadowRoot) {
+            el.shadowRoot.adoptedStyleSheets = [...el.shadowRoot.adoptedStyleSheets, this.#sheet];
         }
-        root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
     }
 }
 export function css(strings) {

package/target/lib/tags.js.map

@@ -1 +1 @@
-{"version":3,"file":"tags.js","sourceRoot":"","sources":["../../src/lib/tags.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,OAAO,EAA6C,CAAC;AAE1F,MAAM,OAAO,UAAW,SAAQ,iBAAiB;IAC/C,KAAK,CAAC,IAAgB;QACpB,IAAI,QAA6B,CAAC;QAElC,IAAI,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;YACxC,QAAQ,GAAG,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAwB,CAAC;QACxE,CAAC;aAAM,CAAC;YACN,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YAE9C,QAAQ,CAAC,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC1C,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QAChD,CAAC;QAED,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IAChD,CAAC;CACF;AAED,MAAM,UAAU,IAAI,CAAC,OAA6B,EAAE,GAAG,MAAa;IAClE,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE,GAAG,MAAM,CAAC,CAAC;AAC5C,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,OAAO,EAAuC,CAAC;AAElF,MAAM,OAAO,SAAU,SAAQ,iBAAiB;IAC9C,KAAK,CAAC,IAAgB;QACpB,IAAI,KAAoB,CAAC;QAEzB,IAAI,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;YACtC,KAAK,GAAG,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAkB,CAAC;QAC7D,CAAC;aAAM,CAAC;YACN,KAAK,GAAG,IAAI,aAAa,EAAE,CAAC;YAE5B,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;QAC1C,CAAC;QAED,IAAI,CAAC,kBAAkB,GAAG,CAAC,GAAG,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;IAChE,CAAC;CACF;AAED,MAAM,UAAU,GAAG,CAAC,OAA6B;IAC/C,OAAO,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;AAChC,CAAC;AAED,SAAS,MAAM,CAAC,OAA6B;IAC3C,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACxC,GAAG,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC;IAED,OAAO,GAAG,CAAC;AACb,CAAC"}
+{"version":3,"file":"tags.js","sourceRoot":"","sources":["../../src/lib/tags.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,UAAU;IACrB,SAAS,CAAC;IAEV,YAAY,GAAyB,EAAE,GAAG,OAAc;QACtD,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACpD,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IACzC,CAAC;IAED,KAAK,CAAC,EAAK;QACT,IAAI,EAAE,CAAC,UAAU,EAAE,CAAC;YAClB,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;QAC/D,CAAC;IACH,CAAC;CACF;AAED,MAAM,UAAU,IAAI,CAClB,OAA6B,EAC7B,GAAG,MAAa;IAEhB,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE,GAAG,MAAM,CAAC,CAAC;AAC5C,CAAC;AAED,MAAM,OAAO,SAAS;IACpB,MAAM,CAAC;IAEP,YAAY,GAAyB,EAAE,GAAG,OAAc;QACtD,IAAI,CAAC,MAAM,GAAG,IAAI,aAAa,EAAE,CAAC;QAClC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;IACvC,CAAC;IAED,KAAK,CAAC,EAAe;QACnB,IAAI,EAAE,CAAC,UAAU,EAAE,CAAC;YAClB,EAAE,CAAC,UAAU,CAAC,kBAAkB,GAAG,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,kBAAkB,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QACxF,CAAC;IACH,CAAC;CACF;AAED,MAAM,UAAU,GAAG,CAAC,OAA6B;IAC/C,OAAO,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;AAChC,CAAC;AAED,SAAS,MAAM,CAAC,OAA6B;IAC3C,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACxC,GAAG,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC;IAED,OAAO,GAAG,CAAC;AACb,CAAC"}

package/target/lib/template.d.ts

@@ -0,0 +1,11 @@
+type TemplateValueGetter = (key: string) => string;
+export interface TemplateOpts {
+    value?: TemplateValueGetter;
+    tokenPrefix?: string;
+}
+export interface RenderOpts {
+    refresh?: boolean;
+}
+export declare function template({ tokenPrefix, value }?: TemplateOpts): <T extends HTMLElement>(this: T, opts?: RenderOpts) => void;
+export declare function getTemplateValue(obj: object, key: string): any;
+export {};

package/target/lib/template.js

@@ -0,0 +1,87 @@
+class Updates extends Set {
+}
+export function template({ tokenPrefix = '#:', value } = {}) {
+    let updates = null;
+    return function render(opts) {
+        if (!updates || opts?.refresh) {
+            updates = findUpdates(this, {
+                tokenPrefix,
+                value: value ?? ((key) => getTemplateValue(this, key))
+            });
+        }
+        else {
+            for (let update of updates) {
+                update();
+            }
+        }
+    };
+}
+function findUpdates(el, opts) {
+    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;
+}
+function trackElement(node, updates, opts) {
+    const element = node;
+    const getter = opts.value;
+    const tokenPrefix = opts.tokenPrefix;
+    for (let attr of element.attributes) {
+        const nodeValue = attr.value.trim();
+        const realAttributeName = attr.name.replace(tokenPrefix, '');
+        let update = 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 = () => {
+                    let 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, key) {
+    const parsed = key.split('.');
+    let pointer = obj;
+    for (let part of parsed) {
+        pointer = pointer[part];
+    }
+    return pointer;
+}
+//# sourceMappingURL=template.js.map

package/target/lib/template.js.map

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

package/target/lib/template.test.d.ts

@@ -0,0 +1 @@
+export {};

package/target/lib/template.test.js

@@ -0,0 +1,91 @@
+import { assert } from 'chai';
+import { template } from './template.js';
+const TESTS = [
+    function bindableNodes(el, root) {
+        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 = `
+        <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, root) {
+        it(`should intialize template attributes ${root instanceof ShadowRoot ? '(ShadowDOM)' : '(LightDOM)'}`, () => {
+            el.ariaLabel = 'This is the label';
+            el.ariaDescription = 'This is the description';
+            root.innerHTML = `
+        <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, root) {
+        it(`should use custom getter for values ${root instanceof ShadowRoot ? '(ShadowDOM)' : '(LightDOM)'}`, () => {
+            const data = {
+                title: 'Hello World',
+                ariaLabel: 'This is the label',
+                ariaDescription: 'This is the description'
+            };
+            root.innerHTML = `
+        <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, root) {
+        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 = `
+        <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 (let test of TESTS) {
+    const lightEl = document.createElement('div');
+    test(lightEl, lightEl);
+    const shadowEl = document.createElement('div');
+    test(shadowEl, shadowEl.attachShadow({ mode: 'open' }));
+}
+//# sourceMappingURL=template.test.js.map