@joist/element 4.0.0-next.4 → 4.0.0-next.6

package/target/lib/query.test.js

@@ -1,80 +1,78 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import { expect } from '@open-wc/testing';
+import { expect } from 'chai';
 import { element } from './element.js';
 import { query } from './query.js';
 import { html } from './tags.js';
-describe('query', () => {
-    it('should work', () => {
-        let MyElement = (() => {
-            let _classDecorators = [element({
-                    tagName: 'query-test-1',
-                    shadow: [
-                        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'));
-    });
-    it('should patch the selected item', () => {
-        let MyElement = (() => {
-            let _classDecorators = [element({
-                    tagName: 'query-test-2',
-                    shadow: [
-                        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();
-        el.fname({ value: 'Foo' });
-        el.lname({ value: 'Bar' });
-        expect(el.shadowRoot?.querySelector('#fname')?.value).to.equal('Foo');
-        expect(el.shadowRoot?.querySelector('#lname')?.value).to.equal('Bar');
-    });
+it('should work', () => {
+    let MyElement = (() => {
+        let _classDecorators = [element({
+                tagName: 'query-test-1',
+                shadow: [
+                    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'));
+});
+it('should patch the selected item', () => {
+    let MyElement = (() => {
+        let _classDecorators = [element({
+                tagName: 'query-test-2',
+                shadow: [
+                    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();
+    el.fname({ value: 'Foo' });
+    el.lname({ value: 'Bar' });
+    expect(el.shadowRoot?.querySelector('#fname')?.value).to.equal('Foo');
+    expect(el.shadowRoot?.querySelector('#lname')?.value).to.equal('Bar');
 });
 //# sourceMappingURL=query.test.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"query.test.js","sourceRoot":"","sources":["../../src/lib/query.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IACrB,EAAE,CAAC,aAAa,EAAE,GAAG,EAAE;YAYf,SAAS;oCAXd,OAAO,CAAC;oBACP,OAAO,EAAE,cAAc;oBACvB,MAAM,EAAE;wBACN,IAAI,CAAA;;;;;SAKH;qBACF;iBACF,CAAC;;;;8BACsB,WAAW;iCAAnB,SAAQ,WAAW;;;;oBAAnC,6KAGC;;;oBAHK,uDAAS;;gBACb,KAAK,GAAG,KAAK,CAAmB,QAAQ,CAAC,CAAC;gBAC1C,KAAK,GAAG,KAAK,CAAmB,QAAQ,CAAC,CAAC;;;;QAG5C,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;QAE3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;QACpE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,GAAG,EAAE;YAYlC,SAAS;oCAXd,OAAO,CAAC;oBACP,OAAO,EAAE,cAAc;oBACvB,MAAM,EAAE;wBACN,IAAI,CAAA;;;;;SAKH;qBACF;iBACF,CAAC;;;;8BACsB,WAAW;iCAAnB,SAAQ,WAAW;;;;oBAAnC,6KAGC;;;oBAHK,uDAAS;;gBACb,KAAK,GAAG,KAAK,CAAmB,QAAQ,CAAC,CAAC;gBAC1C,KAAK,GAAG,KAAK,CAAmB,QAAQ,CAAC,CAAC;;;;QAG5C,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;QAC3B,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QAC3B,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QAE3B,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAmB,QAAQ,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACxF,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAmB,QAAQ,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC1F,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"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,MAAM,EAAE;oBACN,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;AAEH,EAAE,CAAC,gCAAgC,EAAE,GAAG,EAAE;QAYlC,SAAS;gCAXd,OAAO,CAAC;gBACP,OAAO,EAAE,cAAc;gBACvB,MAAM,EAAE;oBACN,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;IAC3B,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;IAC3B,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;IAE3B,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAmB,QAAQ,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACxF,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAmB,QAAQ,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AAC1F,CAAC,CAAC,CAAC"}

package/target/lib/result.d.ts

@@ -1,10 +1,3 @@
-export interface ShadowResult {
-    run(el: HTMLElement): void;
-}
-export declare abstract class JoistShadowResult implements ShadowResult {
-    strings: TemplateStringsArray;
-    values: any[];
-    constructor(raw: TemplateStringsArray, ...values: any[]);
-    run(el: HTMLElement): void;
-    abstract setup(root: ShadowRoot): void;
+export interface ShadowResult<T extends HTMLElement> {
+    apply(el: T): void;
 }

package/target/lib/result.js

@@ -1,15 +1,2 @@
-export class JoistShadowResult {
-    strings;
-    values;
-    constructor(raw, ...values) {
-        this.strings = raw;
-        this.values = values;
-    }
-    run(el) {
-        if (!el.shadowRoot) {
-            throw new Error('ShadowResult has not been applied');
-        }
-        this.setup(el.shadowRoot);
-    }
-}
+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,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,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;IAC5B,CAAC;CAGF"}
+{"version":3,"file":"result.js","sourceRoot":"","sources":["../../src/lib/result.ts"],"names":[],"mappings":""}

package/target/lib/tags.d.ts

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

package/target/lib/tags.js

@@ -1,19 +1,28 @@
-import { JoistShadowResult } from './result.js';
-export class HTMLResult extends JoistShadowResult {
-    setup(root) {
-        let template = document.createElement('template');
-        template.innerHTML = concat(this.strings);
-        root.append(template.content.cloneNode(true));
+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));
+        }
     }
 }
 export function html(strings, ...values) {
     return new HTMLResult(strings, ...values);
 }
-export class CSSResult extends JoistShadowResult {
-    setup(root) {
-        let sheet = new CSSStyleSheet();
-        sheet.replaceSync(concat(this.strings));
-        root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+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];
+        }
     }
 }
 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":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,OAAO,UAAW,SAAQ,iBAAiB;IAC/C,KAAK,CAAC,IAAgB;QACpB,IAAI,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAClD,QAAQ,CAAC,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAE1C,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,OAAO,SAAU,SAAQ,iBAAiB;IAC9C,KAAK,CAAC,IAAgB;QACpB,IAAI,KAAK,GAAG,IAAI,aAAa,EAAE,CAAC;QAChC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;QAExC,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,CAAwB,OAA6B;IACtE,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,6 @@
+export interface TemplateOpts {
+}
+export interface RenderOpts {
+    refresh?: boolean;
+}
+export declare function template(_templateOpts?: TemplateOpts): <T extends HTMLElement>(this: T, renderOpts?: RenderOpts) => void;

package/target/lib/template.js

@@ -0,0 +1,91 @@
+const TOKEN_PREFIX = '#:';
+class NodeMap extends Map {
+}
+export function template(_templateOpts) {
+    let initialized = false;
+    const nodes = new NodeMap();
+    return function render(renderOpts) {
+        if (renderOpts?.refresh) {
+            initialized = false;
+            nodes.clear();
+        }
+        if (initialized) {
+            return updateNodes(this, nodes);
+        }
+        initializeNodes(this, nodes);
+        initialized = true;
+    };
+}
+function initializeNodes(el, nodes) {
+    const iterator = document.createTreeWalker(el.shadowRoot || el, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT);
+    while (iterator.nextNode()) {
+        const res = trackNode(el, iterator.currentNode, nodes);
+        if (res !== null) {
+            iterator.currentNode = res;
+        }
+    }
+}
+function updateNodes(el, nodes) {
+    for (let [node, prop] of nodes) {
+        const value = Reflect.get(el, prop);
+        const isAttribute = node.nodeType === Node.ATTRIBUTE_NODE;
+        if (isAttribute && isBooleanAttributeNode(node)) {
+            manageBooleanAttribute(el, node);
+        }
+        else if (value !== node.nodeValue) {
+            node.nodeValue = value;
+        }
+    }
+}
+function trackNode(el, node, nodes) {
+    switch (node.nodeType) {
+        case Node.COMMENT_NODE: {
+            const nodeValue = node.nodeValue?.trim();
+            if (nodeValue?.startsWith(TOKEN_PREFIX)) {
+                if (node.parentNode) {
+                    const propertyKey = nodeValue.replace(TOKEN_PREFIX, '');
+                    const textNode = document.createTextNode(Reflect.get(el, propertyKey));
+                    node.parentNode.replaceChild(textNode, node);
+                    nodes.set(textNode, propertyKey);
+                    return textNode;
+                }
+            }
+            break;
+        }
+        case Node.ELEMENT_NODE: {
+            const element = node;
+            for (let attr of element.attributes) {
+                const nodeValue = attr.value.trim();
+                if (isBooleanAttributeNode(attr)) {
+                    manageBooleanAttribute(el, attr);
+                    nodes.set(attr, attr.value);
+                }
+                else if (nodeValue.startsWith(TOKEN_PREFIX)) {
+                    const propertyKey = nodeValue.replace(TOKEN_PREFIX, '');
+                    attr.value = Reflect.get(el, propertyKey);
+                    nodes.set(attr, propertyKey);
+                }
+            }
+            break;
+        }
+    }
+    return null;
+}
+function isBooleanAttributeNode(attr) {
+    return attr.name.startsWith(TOKEN_PREFIX);
+}
+function manageBooleanAttribute(el, attr) {
+    const realAttributeName = attr.name.replace(TOKEN_PREFIX, '');
+    if (attr.ownerElement) {
+        let value = attr.value.startsWith('!')
+            ? !Reflect.get(el, attr.value.replace('!', ''))
+            : Reflect.get(el, attr.value);
+        if (value) {
+            attr.ownerElement.setAttribute(realAttributeName, '');
+        }
+        else {
+            attr.ownerElement.removeAttribute(realAttributeName);
+        }
+    }
+}
+//# 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,47 @@
+import { assert } from 'chai';
+import { template } from './template.js';
+const TESTS = [
+    function comments(el, root) {
+        it(`should intialize template comments ${root instanceof ShadowRoot ? '(ShadowDOM)' : '(LightDOM)'}`, () => {
+            el.title = 'Hello World';
+            el.ariaLabel = 'This is the label';
+            el.ariaDescription = 'This is the description';
+            root.innerHTML = `
+        <!--#:title-->
+        
+        <ul>
+          <li><!--#:ariaLabel--></li>
+          <li><!--#:ariaDescription--></li>
+        </ul>
+      `;
+            const render = template();
+            render.call(el);
+            assert.equal(root.innerHTML
+                .split('\n')
+                .map((res) => res.trim())
+                .join(''), 'Hello World<ul><li>This is the label</li><li>This is the description</li></ul>');
+        });
+    },
+    function attributes(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();
+            render.call(el);
+            assert.equal(root.innerHTML
+                .split('\n')
+                .map((res) => res.trim())
+                .join(''), '<ul aria-label="This is the label" aria-description="This is the description"></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

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

@@ -0,0 +1 @@
+{"version":3,"file":"template.test.js","sourceRoot":"","sources":["../../src/lib/template.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,MAAM,KAAK,GAAG;IACZ,SAAS,QAAQ,CAAC,EAAe,EAAE,IAA8B;QAC/D,EAAE,CAAC,sCAAsC,IAAI,YAAY,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,EAAE,EAAE,GAAG,EAAE;YACzG,EAAE,CAAC,KAAK,GAAG,aAAa,CAAC;YACzB,EAAE,CAAC,SAAS,GAAG,mBAAmB,CAAC;YACnC,EAAE,CAAC,eAAe,GAAG,yBAAyB,CAAC;YAE/C,IAAI,CAAC,SAAS,GAAY;;;;;;;OAOzB,CAAC;YAEF,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAC;YAE1B,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAEhB,MAAM,CAAC,KAAK,CACV,IAAI,CAAC,SAAS;iBACX,KAAK,CAAC,IAAI,CAAC;iBACX,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;iBACxB,IAAI,CAAC,EAAE,CAAC,EACX,gFAAgF,CACjF,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IACD,SAAS,UAAU,CAAC,EAAe,EAAE,IAA8B;QACjE,EAAE,CAAC,wCAAwC,IAAI,YAAY,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,EAAE,EAAE,GAAG,EAAE;YAC3G,EAAE,CAAC,SAAS,GAAG,mBAAmB,CAAC;YACnC,EAAE,CAAC,eAAe,GAAG,yBAAyB,CAAC;YAE/C,IAAI,CAAC,SAAS,GAAY;;OAEzB,CAAC;YAEF,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAC;YAE1B,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAEhB,MAAM,CAAC,KAAK,CACV,IAAI,CAAC,SAAS;iBACX,KAAK,CAAC,IAAI,CAAC;iBACX,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;iBACxB,IAAI,CAAC,EAAE,CAAC,EACX,qFAAqF,CACtF,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;CACF,CAAC;AAEF,KAAK,IAAI,IAAI,IAAI,KAAK,EAAE,CAAC;IACvB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAEvB,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC/C,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AAC1D,CAAC"}

package/target/lib.d.ts

@@ -1,6 +1,7 @@
-export { JoistShadowResult as TemplateResult } from './lib/result.js';
 export { css, html, HTMLResult, CSSResult } from './lib/tags.js';
 export { attr } from './lib/attr.js';
 export { listen } from './lib/listen.js';
-export { element, LifeCycle } from './lib/element.js';
+export { element } from './lib/element.js';
 export { query } from './lib/query.js';
+export { template } from './lib/template.js';
+export { ready } from './lib/lifecycle.js';

package/target/lib.js

@@ -1,7 +1,8 @@
-export { JoistShadowResult as TemplateResult } from './lib/result.js';
 export { css, html, HTMLResult, CSSResult } from './lib/tags.js';
 export { attr } from './lib/attr.js';
 export { listen } from './lib/listen.js';
-export { element, LifeCycle } from './lib/element.js';
+export { element } from './lib/element.js';
 export { query } from './lib/query.js';
+export { template } from './lib/template.js';
+export { ready } from './lib/lifecycle.js';
 //# sourceMappingURL=lib.js.map

package/target/lib.js.map

@@ -1 +1 @@
-{"version":3,"file":"lib.js","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,IAAI,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtE,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,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,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,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC"}