@joist/element 3.9.1 → 4.0.0-next.10

package/target/lib/query.js

@@ -0,0 +1,24 @@
+export function query(query) {
+    let res = null;
+    return function (updates) {
+        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');
+        }
+        if (updates) {
+            for (let update in updates) {
+                Reflect.set(res, update, updates[update]);
+            }
+        }
+        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,UAA6B,OAA2C;QAC7E,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,IAAI,OAAO,EAAE,CAAC;YACZ,KAAK,IAAI,MAAM,IAAI,OAAO,EAAE,CAAC;gBAC3B,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;YAC5C,CAAC;QACH,CAAC;QAED,OAAO,GAAG,CAAC;IACb,CAAC,CAAC;AACJ,CAAC"}

package/target/lib/query.test.js

@@ -0,0 +1,78 @@
+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',
+                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

@@ -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,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,9 +1,3 @@
-export declare abstract class ShadowResult {
-    #private;
-    strings: TemplateStringsArray;
-    values: any[];
-    get shadow(): ShadowRoot;
-    constructor(raw: TemplateStringsArray, ...values: any[]);
-    execute(root: ShadowRoot): void;
-    abstract apply(root: ShadowRoot): void;
+export interface ShadowResult<T extends HTMLElement> {
+    apply(el: T): void;
 }

package/target/lib/result.js

@@ -1,20 +1,2 @@
-export class ShadowResult {
-    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;
-    }
-    execute(root) {
-        this.#shadow = root;
-        this.apply(root);
-    }
-}
+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":"AAAA,MAAM,OAAgB,YAAY;IAChC,OAAO,CAAuB;IAC9B,MAAM,CAAQ;IAEd,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,OAAO,CAAC,IAAgB;QACtB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QAEpB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC;CAGF"}
+{"version":3,"file":"result.js","sourceRoot":"","sources":["../../src/lib/result.ts"],"names":[],"mappings":""}

package/target/lib/tags.d.ts

@@ -1,23 +1,13 @@
 import { ShadowResult } from './result.js';
-type Tags = keyof HTMLElementTagNameMap;
-type SVGTags = keyof SVGElementTagNameMap;
-type MathTags = keyof MathMLElementTagNameMap;
-export declare const htmlTemplateCache: WeakMap<TemplateStringsArray, HTMLTemplateElement>;
-export declare class HTMLResult extends ShadowResult {
-    query<K extends Tags>(selectors: K): HTMLElementTagNameMap[K] | null;
-    query<K extends SVGTags>(selectors: K): SVGElementTagNameMap[K] | null;
-    query<K extends MathTags>(selectors: K): MathMLElementTagNameMap[K] | null;
-    query<E extends Element = Element>(selectors: string): E | null;
-    queryAll<K extends Tags>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
-    queryAll<K extends SVGTags>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
-    queryAll<K extends MathTags>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
-    queryAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
-    apply(root: ShadowRoot): void;
+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 const styleSheetCache: WeakMap<TemplateStringsArray, CSSStyleSheet>;
-export declare class CSSResult extends ShadowResult {
-    apply(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 {};
+export declare function css<T extends HTMLElement>(strings: TemplateStringsArray): CSSResult<T>;

package/target/lib/tags.js

@@ -1,40 +1,28 @@
-import { ShadowResult } from './result.js';
-export const htmlTemplateCache = new WeakMap();
-export class HTMLResult extends ShadowResult {
-    query(query) {
-        return this.shadow.querySelector(query);
+export class HTMLResult {
+    #template;
+    constructor(raw, ..._values) {
+        this.#template = document.createElement('template');
+        this.#template.innerHTML = concat(raw);
     }
-    queryAll(query) {
-        return this.shadow.querySelectorAll(query);
-    }
-    apply(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);
+    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 ShadowResult {
-    apply(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,YAAY,EAAE,MAAM,aAAa,CAAC;AAM3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,OAAO,EAA6C,CAAC;AAE1F,MAAM,OAAO,UAAW,SAAQ,YAAY;IAK1C,KAAK,CAAiB,KAAQ;QAC5B,OAAO,IAAI,CAAC,MAAM,CAAC,aAAa,CAAI,KAAK,CAAC,CAAC;IAC7C,CAAC;IAMD,QAAQ,CAAiB,KAAQ;QAC/B,OAAO,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAI,KAAK,CAAC,CAAC;IAChD,CAAC;IAKD,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,YAAY;IACzC,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,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,9 @@
+type TemplateValueGetter = (key: string) => string;
+export interface TemplateOpts {
+    value?: TemplateValueGetter;
+}
+export interface RenderOpts {
+}
+export declare function template(templateOpts?: TemplateOpts): <T extends HTMLElement>(this: T) => void;
+export declare function getTemplateValue(obj: object, key: string): any;
+export {};

package/target/lib/template.js

@@ -0,0 +1,83 @@
+const TOKEN_PREFIX = '#:';
+class Updates extends Set {
+}
+export function template(templateOpts) {
+    let updates = null;
+    return function render() {
+        if (!updates) {
+            updates = findUpdates(this, templateOpts?.value ?? ((key) => getTemplateValue(this, key)));
+        }
+        else {
+            for (let update of updates) {
+                update();
+            }
+        }
+    };
+}
+function findUpdates(el, getter) {
+    const iterator = document.createTreeWalker(el.shadowRoot ?? el, NodeFilter.SHOW_ELEMENT);
+    const updates = new Updates();
+    while (iterator.nextNode()) {
+        const res = trackElement(iterator.currentNode, updates, getter);
+        if (res !== null) {
+            iterator.currentNode = res;
+        }
+    }
+    return updates;
+}
+function trackElement(node, updates, getter) {
+    const element = node;
+    for (let attr of element.attributes) {
+        const nodeValue = attr.value.trim();
+        const realAttributeName = attr.name.replace(TOKEN_PREFIX, '');
+        let update = null;
+        if (attr.name.startsWith(`${TOKEN_PREFIX}bind`)) {
+            update = () => {
+                const value = getter(attr.value);
+                if (element.textContent !== value) {
+                    element.textContent = getter(attr.value);
+                }
+            };
+        }
+        else if (attr.name.startsWith(TOKEN_PREFIX)) {
+            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,70 @@
+import { assert } from 'chai';
+import { template } from './template.js';
+const TESTS = [
+    function comments(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 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().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>');
+        });
+    }
+];
+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,mCAAmC,IAAI,YAAY,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,EAAE,EAAE,GAAG,EAAE;YACtG,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,IAAI,CAAC,EAAE,CAAC,CAAC;YAEnC,MAAM,EAAE,CAAC;YAET,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,wJAAwJ,CACzJ,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,IAAI,CAAC,EAAE,CAAC,CAAC;YAEnC,MAAM,EAAE,CAAC;YAET,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,mJAAmJ,CACpJ,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IACD,SAAS,YAAY,CAAC,EAAe,EAAE,IAA8B;QACnE,EAAE,CAAC,uCAAuC,IAAI,YAAY,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,EAAE,EAAE,GAAG,EAAE;YAC1G,MAAM,IAAI,GAA2B;gBACnC,KAAK,EAAE,aAAa;gBACpB,SAAS,EAAE,mBAAmB;gBAC9B,eAAe,EAAE,yBAAyB;aAC3C,CAAC;YAEF,IAAI,CAAC,SAAS,GAAY;;;;;;;OAOzB,CAAC;YAEF,MAAM,MAAM,GAAG,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAEhE,MAAM,EAAE,CAAC;YAET,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,wJAAwJ,CACzJ,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,7 +1,7 @@
-export { ShadowResult as TemplateResult } from './lib/result.js';
 export { css, html, HTMLResult, CSSResult } from './lib/tags.js';
-export { shadow } from './lib/shadow.js';
 export { attr } from './lib/attr.js';
 export { listen } from './lib/listen.js';
-export { tagName } from './lib/tag-name.js';
 export { element } from './lib/element.js';
+export { query } from './lib/query.js';
+export { template, getTemplateValue } from './lib/template.js';
+export { ready } from './lib/lifecycle.js';

package/target/lib.js

@@ -1,8 +1,8 @@
-export { ShadowResult as TemplateResult } from './lib/result.js';
 export { css, html, HTMLResult, CSSResult } from './lib/tags.js';
-export { shadow } from './lib/shadow.js';
 export { attr } from './lib/attr.js';
 export { listen } from './lib/listen.js';
-export { tagName } from './lib/tag-name.js';
 export { element } from './lib/element.js';
+export { query } from './lib/query.js';
+export { template, getTemplateValue } 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,YAAY,IAAI,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,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,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC"}

package/src/lib/shadow.test.ts

@@ -1,40 +0,0 @@
-import { expect } from '@open-wc/testing';
-
-import { css, html } from './tags.js';
-import { shadow } from './shadow.js';
-
-describe('template', () => {
-  it('should apply a stylesheet', () => {
-    class MyElement extends HTMLElement {
-      @shadow styles = css`
-        :host {
-          display: flex;
-        }
-      `;
-    }
-
-    customElements.define('template-1', MyElement);
-
-    const el = new MyElement();
-
-    expect(el.shadowRoot!.adoptedStyleSheets.length).to.eq(1);
-  });
-
-  it('should apply html', () => {
-    class MyElement extends HTMLElement {
-      @shadow styles = css`
-        :host {
-          display: flex;
-        }
-      `;
-
-      @shadow template = html`<slot></slot>`;
-    }
-
-    customElements.define('template-2', MyElement);
-
-    const el = new MyElement();
-
-    expect(el.shadowRoot?.innerHTML).to.eq('<slot></slot>');
-  });
-});

package/src/lib/shadow.ts

@@ -1,16 +0,0 @@
-import { ShadowResult } from './result.js';
-
-export function shadow<This extends HTMLElement, T extends ShadowResult>(
-  _: undefined,
-  _ctx: ClassFieldDecoratorContext<This, T>
-) {
-  return function (this: This, result: T) {
-    if (!this.shadowRoot) {
-      this.attachShadow({ mode: 'open' });
-    }
-
-    result.execute(this.shadowRoot!);
-
-    return result;
-  };
-}

package/src/lib/tag-name.test.ts

@@ -1,13 +0,0 @@
-import { element } from './element.js';
-import { tagName } from './tag-name.js';
-
-describe('tag-name', () => {
-  it('should define a custom element', async () => {
-    @element
-    class MyElement extends HTMLElement {
-      @tagName static tagName = 'tn-test-1';
-    }
-
-    return customElements.whenDefined(MyElement.tagName);
-  });
-});

package/src/lib/tag-name.ts

@@ -1,10 +0,0 @@
-import { metadataStore } from './metadata.js';
-
-export function tagName<This extends typeof HTMLElement>(
-  _val: unknown,
-  ctx: ClassFieldDecoratorContext<This, string>
-) {
-  const metadata = metadataStore.read(ctx.metadata);
-
-  metadata.tagName = ctx.access.get;
-}

package/src/lib/tags.test.ts

@@ -1,28 +0,0 @@
-import { expect } from '@open-wc/testing';
-import { css, html, htmlTemplateCache, styleSheetCache } from './tags.js';
-
-describe('tags', () => {
-  it('should ensure return the same CSSResult', () => {
-    class Test {
-      styles = css`Hello World`;
-    }
-
-    const a = new Test();
-    const b = new Test();
-
-    expect(a.styles.strings).to.equal(b.styles.strings);
-    expect(styleSheetCache.get(a.styles.strings)).to.equal(styleSheetCache.get(b.styles.strings));
-  });
-
-  it('should cache the HTMLTemplateElement', () => {
-    class Test {
-      dom = html`Hello World`;
-    }
-
-    const a = new Test();
-    const b = new Test();
-
-    expect(a.dom.strings).to.equal(b.dom.strings);
-    expect(htmlTemplateCache.get(a.dom.strings)).to.equal(htmlTemplateCache.get(b.dom.strings));
-  });
-});

package/target/lib/shadow.d.ts

@@ -1,2 +0,0 @@
-import { ShadowResult } from './result.js';
-export declare function shadow<This extends HTMLElement, T extends ShadowResult>(_: undefined, _ctx: ClassFieldDecoratorContext<This, T>): (this: This, result: T) => T;

package/target/lib/shadow.js

@@ -1,10 +0,0 @@
-export function shadow(_, _ctx) {
-    return function (result) {
-        if (!this.shadowRoot) {
-            this.attachShadow({ mode: 'open' });
-        }
-        result.execute(this.shadowRoot);
-        return result;
-    };
-}
-//# sourceMappingURL=shadow.js.map

package/target/lib/shadow.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../src/lib/shadow.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,MAAM,CACpB,CAAY,EACZ,IAAyC;IAEzC,OAAO,UAAsB,MAAS;QACpC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;QACtC,CAAC;QAED,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,UAAW,CAAC,CAAC;QAEjC,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;AACJ,CAAC"}