@joist/element 4.0.0-next.5 → 4.0.0-next.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/element",
-  "version": "4.0.0-next.5",
+  "version": "4.0.0-next.7",
   "type": "module",
   "main": "./target/lib.js",
   "module": "./target/lib.js",
@@ -9,7 +9,7 @@
       "import": "./target/lib.js"
     },
     "./*": {
-      "import": "./target/lib/*.js"
+      "import": "./target/lib"
     }
   },
   "files": [

package/src/lib/element.ts

@@ -43,7 +43,7 @@ export function element<
           }
         }
 
-        for (let [event, { cb, root }] of meta.listeners) {
+        for (let [event, { cb, selector: root }] of meta.listeners) {
           root(this).addEventListener(event, cb.bind(this));
         }
 

package/src/lib/listen.test.ts

@@ -0,0 +1,87 @@
+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) => {
+    @element({
+      tagName: 'listener-1'
+    })
+    class MyElement extends HTMLElement {
+      @listen('click')
+      onClick(e: Event) {
+        assert.equal(e.type, 'click');
+
+        done();
+      }
+    }
+
+    const el = new MyElement();
+
+    el.dispatchEvent(new Event('click'));
+  });
+
+  it('should add listener to the shadow root if available', (done) => {
+    @element({
+      tagName: 'listener-2',
+      shadow: []
+    })
+    class MyElement extends HTMLElement {
+      @listen('click')
+      onClick(e: Event) {
+        assert.equal(e.type, 'click');
+
+        done();
+      }
+    }
+
+    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');
+      }
+    }
+
+    @element({
+      tagName: 'listener-3'
+    })
+    class MyElement extends HTMLElement {
+      @listen('customevent')
+      onClick(e: CustomEvent) {
+        assert.equal(e.type, 'customevent');
+
+        done();
+      }
+    }
+
+    const el = new MyElement();
+
+    el.dispatchEvent(new CustomEvent());
+  });
+
+  it('should respect a provided selector function', (done) => {
+    @element({
+      tagName: 'listener-4',
+      shadow: []
+    })
+    class MyElement extends HTMLElement {
+      @listen('click', (host) => host)
+      onClick(e: Event) {
+        assert.equal(e.type, 'click');
+
+        done();
+      }
+    }
+
+    const el = new MyElement();
+
+    el.dispatchEvent(new Event('click'));
+  });
+});

package/src/lib/listen.ts

@@ -1,15 +1,12 @@
-import { ListenerRootSelector, metadataStore } from './metadata.js';
+import { ListenerSelector, metadataStore } from './metadata.js';
 
-export function listen<This extends HTMLElement>(event: string, root?: ListenerRootSelector) {
-  return function listenDecorator(
-    value: (e: Event) => void,
-    ctx: ClassMethodDecoratorContext<This>
-  ) {
+export function listen<This extends HTMLElement>(event: string, selector?: ListenerSelector) {
+  return function listenDecorator(value: (e: any) => void, ctx: ClassMethodDecoratorContext<This>) {
     const metadata = metadataStore.read(ctx.metadata);
 
     metadata.listeners.set(event, {
       cb: value,
-      root: root ?? ((el: HTMLElement) => el.shadowRoot ?? el)
+      selector: selector ?? ((el: HTMLElement) => el.shadowRoot ?? el)
     });
   };
 }

package/src/lib/metadata.ts

@@ -6,11 +6,11 @@ export interface AttrDef {
   observe: boolean;
 }
 
-export type ListenerRootSelector = (el: HTMLElement) => HTMLElement | ShadowRoot;
+export type ListenerSelector = (el: HTMLElement) => HTMLElement | ShadowRoot;
 
 export class ElementMetadata {
   attrs: AttrDef[] = [];
-  listeners = new Map<string, { cb: (e: Event) => void; root: ListenerRootSelector }>();
+  listeners = new Map<string, { cb: (e: Event) => void; selector: ListenerSelector }>();
   onReady = new Set<Function>();
 }
 

package/src/lib/template.test.ts

@@ -5,30 +5,30 @@ import { template } from './template.js';
 // Run all tests with both shadow and light dom
 const TESTS = [
   function comments(el: HTMLElement, root: HTMLElement | ShadowRoot) {
-    it(`should intialize template comments ${root instanceof ShadowRoot ? '(ShadowDOM)' : '(LightDOM)'}`, () => {
+    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*/ `
-        <!--#:title-->
+        <span #:bind="title"></span>
         
         <ul>
-          <li><!--#:ariaLabel--></li>
-          <li><!--#:ariaDescription--></li>
+          <li #:bind="ariaLabel"></li>
+          <li #:bind="ariaDescription"></li>
         </ul>
       `;
 
-      const render = template();
+      const render = template().bind(el);
 
-      render.call(el);
+      render();
 
       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>'
+        '<span #:bind="title">Hello World</span><ul><li #:bind="ariaLabel">This is the label</li><li #:bind="ariaDescription">This is the description</li></ul>'
       );
     });
   },
@@ -38,19 +38,49 @@ const TESTS = [
       el.ariaDescription = 'This is the description';
 
       root.innerHTML = /*html*/ `
-        <ul aria-label="#:ariaLabel" aria-description="#:ariaDescription"></ul>
+        <ul #:aria-label="ariaLabel" #:aria-description="ariaDescription"></ul>
       `;
 
-      const render = template();
+      const render = template().bind(el);
 
-      render.call(el);
+      render();
 
       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>'
+        '<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>'
       );
     });
   }

package/src/lib/template.ts

@@ -1,132 +1,115 @@
 const TOKEN_PREFIX = '#:';
 
-class NodeMap extends Map<Node, string> {}
+type Updater = () => void;
+class Updates extends Set<Updater> {}
+type TemplateValueGetter = (key: string) => string;
 
-export interface TemplateOpts {}
-
-export interface RenderOpts {
-  refresh?: boolean;
+export interface TemplateOpts {
+  value?: TemplateValueGetter;
 }
 
-export function template(_templateOpts?: TemplateOpts) {
-  // make sure we only initialize once
-  let initialized = false;
+export interface RenderOpts {}
 
+export function template(templateOpts?: TemplateOpts) {
   // Track all nodes that can be updated and their associated property
-  const nodes = new NodeMap();
-
-  return function render<T extends HTMLElement>(this: T, renderOpts?: RenderOpts) {
-    if (renderOpts?.refresh) {
-      initialized = false;
-      nodes.clear();
-    }
-
-    if (initialized) {
-      return updateNodes(this, nodes);
+  let updates: Updates | null = null;
+
+  return function render<T extends HTMLElement>(this: T) {
+    if (!updates) {
+      updates = findUpdates(
+        this,
+        templateOpts?.value ?? ((key: string) => getTemplateValue(this, key))
+      );
+    } else {
+      for (let update of updates) {
+        update();
+      }
     }
-
-    // find and track nodes
-    initializeNodes(this, nodes);
-
-    initialized = true;
   };
 }
 
-function initializeNodes(el: HTMLElement, nodes: NodeMap) {
-  const iterator = document.createTreeWalker(
-    el.shadowRoot || el,
-    NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT
-  );
+function findUpdates(el: HTMLElement, getter: TemplateValueGetter): Updates {
+  const iterator = document.createTreeWalker(el.shadowRoot ?? el, NodeFilter.SHOW_ELEMENT);
+  const updates = new Updates();
 
   while (iterator.nextNode()) {
-    const res = trackNode(el, iterator.currentNode, nodes);
+    const res = trackElement(iterator.currentNode, updates, getter);
 
     if (res !== null) {
       iterator.currentNode = res;
     }
   }
-}
-
-function updateNodes(el: HTMLElement, nodes: NodeMap) {
-  for (let [node, prop] of nodes) {
-    const value = Reflect.get(el, prop);
 
-    const isAttribute = node.nodeType === Node.ATTRIBUTE_NODE;
-
-    if (isAttribute && isBooleanAttributeNode(node as Attr)) {
-      manageBooleanAttribute(el, node as Attr);
-    } else if (value !== node.nodeValue) {
-      node.nodeValue = value;
-    }
-  }
+  return updates;
 }
 
 /**
  * configures and tracks a given Node so that it can be updated in place later.
  */
-function trackNode(el: HTMLElement, node: Node, nodes: NodeMap): Node | null {
-  switch (node.nodeType) {
-    case Node.COMMENT_NODE: {
-      const nodeValue = node.nodeValue?.trim();
+function trackElement(node: Node, updates: Updates, getter: TemplateValueGetter): Node | null {
+  const element = node as Element;
 
-      if (nodeValue?.startsWith(TOKEN_PREFIX)) {
-        if (node.parentNode) {
-          const propertyKey = nodeValue.replace(TOKEN_PREFIX, '');
-          const textNode = document.createTextNode(Reflect.get(el, propertyKey));
+  for (let attr of element.attributes) {
+    const nodeValue = attr.value.trim();
+    const realAttributeName = attr.name.replace(TOKEN_PREFIX, '');
 
-          node.parentNode.replaceChild(textNode, node);
+    let update: Updater | null = null;
 
-          nodes.set(textNode, propertyKey);
+    if (attr.name.startsWith(`${TOKEN_PREFIX}bind`)) {
+      update = () => {
+        const value = getter(attr.value);
 
-          return textNode;
+        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;
+          }
+        };
       }
-
-      break;
     }
 
-    case Node.ELEMENT_NODE: {
-      const element = node as Element;
-
-      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, '');
+    if (update) {
+      updates.add(update);
 
-          attr.value = Reflect.get(el, propertyKey);
-
-          nodes.set(attr, propertyKey);
-        }
-      }
-
-      break;
+      update();
     }
   }
 
   return null;
 }
 
-function isBooleanAttributeNode(attr: Attr) {
-  return attr.name.startsWith(TOKEN_PREFIX);
-}
-
-function manageBooleanAttribute(el: HTMLElement, attr: Attr) {
-  const realAttributeName = attr.name.replace(TOKEN_PREFIX, '');
+export function getTemplateValue(obj: object, key: string) {
+  const parsed = key.split('.');
 
-  if (attr.ownerElement) {
-    let value = attr.value.startsWith('!')
-      ? !Reflect.get(el, attr.value.replace('!', ''))
-      : Reflect.get(el, attr.value);
+  let pointer: any = obj;
 
-    if (value) {
-      attr.ownerElement.setAttribute(realAttributeName, '');
-    } else {
-      attr.ownerElement.removeAttribute(realAttributeName);
-    }
+  for (let part of parsed) {
+    pointer = pointer[part];
   }
+
+  return pointer;
 }

package/src/lib.ts

@@ -3,5 +3,5 @@ export { attr } from './lib/attr.js';
 export { listen } from './lib/listen.js';
 export { element } from './lib/element.js';
 export { query } from './lib/query.js';
-export { template } from './lib/template.js';
+export { template, getTemplateValue } from './lib/template.js';
 export { ready } from './lib/lifecycle.js';

package/target/lib/element.js

@@ -28,7 +28,7 @@ export function element(opts) {
                         }
                     }
                 }
-                for (let [event, { cb, root }] of meta.listeners) {
+                for (let [event, { cb, selector: root }] of meta.listeners) {
                     root(this).addEventListener(event, cb.bind(this));
                 }
                 for (let cb of meta.onReady) {

package/target/lib/element.js.map

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

package/target/lib/listen.d.ts

@@ -1,2 +1,2 @@
-import { ListenerRootSelector } from './metadata.js';
-export declare function listen<This extends HTMLElement>(event: string, root?: ListenerRootSelector): (value: (e: Event) => void, ctx: ClassMethodDecoratorContext<This>) => void;
+import { ListenerSelector } from './metadata.js';
+export declare function listen<This extends HTMLElement>(event: string, selector?: ListenerSelector): (value: (e: any) => void, ctx: ClassMethodDecoratorContext<This>) => void;

package/target/lib/listen.js

@@ -1,10 +1,10 @@
 import { metadataStore } from './metadata.js';
-export function listen(event, root) {
+export function listen(event, selector) {
     return function listenDecorator(value, ctx) {
         const metadata = metadataStore.read(ctx.metadata);
         metadata.listeners.set(event, {
             cb: value,
-            root: root ?? ((el) => el.shadowRoot ?? el)
+            selector: selector ?? ((el) => el.shadowRoot ?? el)
         });
     };
 }

package/target/lib/listen.js.map

@@ -1 +1 @@
-{"version":3,"file":"listen.js","sourceRoot":"","sources":["../../src/lib/listen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,aAAa,EAAE,MAAM,eAAe,CAAC;AAEpE,MAAM,UAAU,MAAM,CAA2B,KAAa,EAAE,IAA2B;IACzF,OAAO,SAAS,eAAe,CAC7B,KAAyB,EACzB,GAAsC;QAEtC,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAElD,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,EAAE;YAC5B,EAAE,EAAE,KAAK;YACT,IAAI,EAAE,IAAI,IAAI,CAAC,CAAC,EAAe,EAAE,EAAE,CAAC,EAAE,CAAC,UAAU,IAAI,EAAE,CAAC;SACzD,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"listen.js","sourceRoot":"","sources":["../../src/lib/listen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,aAAa,EAAE,MAAM,eAAe,CAAC;AAEhE,MAAM,UAAU,MAAM,CAA2B,KAAa,EAAE,QAA2B;IACzF,OAAO,SAAS,eAAe,CAAC,KAAuB,EAAE,GAAsC;QAC7F,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAElD,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,EAAE;YAC5B,EAAE,EAAE,KAAK;YACT,QAAQ,EAAE,QAAQ,IAAI,CAAC,CAAC,EAAe,EAAE,EAAE,CAAC,EAAE,CAAC,UAAU,IAAI,EAAE,CAAC;SACjE,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}

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

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

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',
+                    shadow: []
+                })];
+            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',
+                    shadow: []
+                })];
+            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":"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"}

package/target/lib/metadata.d.ts

@@ -3,12 +3,12 @@ export interface AttrDef {
     attrName: string;
     observe: boolean;
 }
-export type ListenerRootSelector = (el: HTMLElement) => HTMLElement | ShadowRoot;
+export type ListenerSelector = (el: HTMLElement) => HTMLElement | ShadowRoot;
 export declare class ElementMetadata {
     attrs: AttrDef[];
     listeners: Map<string, {
         cb: (e: Event) => void;
-        root: ListenerRootSelector;
+        selector: ListenerSelector;
     }>;
     onReady: Set<Function>;
 }

package/target/lib/template.d.ts

@@ -1,6 +1,9 @@
+type TemplateValueGetter = (key: string) => string;
 export interface TemplateOpts {
+    value?: TemplateValueGetter;
 }
 export interface RenderOpts {
-    refresh?: boolean;
 }
-export declare function template(_templateOpts?: TemplateOpts): <T extends HTMLElement>(this: T, renderOpts?: RenderOpts) => void;
+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

@@ -1,91 +1,83 @@
 const TOKEN_PREFIX = '#:';
-class NodeMap extends Map {
+class Updates extends Set {
 }
-export function template(_templateOpts) {
-    let initialized = false;
-    const nodes = new NodeMap();
-    return function render(renderOpts) {
-        if (renderOpts?.refresh) {
-            initialized = false;
-            nodes.clear();
+export function template(templateOpts) {
+    let updates = null;
+    return function render() {
+        if (!updates) {
+            updates = findUpdates(this, templateOpts?.value ?? ((key) => getTemplateValue(this, key)));
         }
-        if (initialized) {
-            return updateNodes(this, nodes);
+        else {
+            for (let update of updates) {
+                update();
+            }
         }
-        initializeNodes(this, nodes);
-        initialized = true;
     };
 }
-function initializeNodes(el, nodes) {
-    const iterator = document.createTreeWalker(el.shadowRoot || el, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT);
+function findUpdates(el, getter) {
+    const iterator = document.createTreeWalker(el.shadowRoot ?? el, NodeFilter.SHOW_ELEMENT);
+    const updates = new Updates();
     while (iterator.nextNode()) {
-        const res = trackNode(el, iterator.currentNode, nodes);
+        const res = trackElement(iterator.currentNode, updates, getter);
         if (res !== null) {
             iterator.currentNode = res;
         }
     }
+    return updates;
 }
-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;
+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);
                 }
-            }
-            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);
-                }
+        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;
+                    }
+                };
             }
-            break;
+        }
+        if (update) {
+            updates.add(update);
+            update();
         }
     }
     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);
-        }
+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

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

package/target/lib/template.test.js

@@ -2,24 +2,24 @@ 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)'}`, () => {
+        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 = `
-        <!--#:title-->
+        <span #:bind="title"></span>
         
         <ul>
-          <li><!--#:ariaLabel--></li>
-          <li><!--#:ariaDescription--></li>
+          <li #:bind="ariaLabel"></li>
+          <li #:bind="ariaDescription"></li>
         </ul>
       `;
-            const render = template();
-            render.call(el);
+            const render = template().bind(el);
+            render();
             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>');
+                .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) {
@@ -27,14 +27,37 @@ const TESTS = [
             el.ariaLabel = 'This is the label';
             el.ariaDescription = 'This is the description';
             root.innerHTML = `
-        <ul aria-label="#:ariaLabel" aria-description="#:ariaDescription"></ul>
+        <ul #:aria-label="ariaLabel" #:aria-description="ariaDescription"></ul>
       `;
-            const render = template();
-            render.call(el);
+            const render = template().bind(el);
+            render();
             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>');
+                .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>');
         });
     }
 ];

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

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

package/target/lib.d.ts

@@ -3,5 +3,5 @@ export { attr } from './lib/attr.js';
 export { listen } from './lib/listen.js';
 export { element } from './lib/element.js';
 export { query } from './lib/query.js';
-export { template } from './lib/template.js';
+export { template, getTemplateValue } from './lib/template.js';
 export { ready } from './lib/lifecycle.js';

package/target/lib.js

@@ -3,6 +3,6 @@ export { attr } from './lib/attr.js';
 export { listen } from './lib/listen.js';
 export { element } from './lib/element.js';
 export { query } from './lib/query.js';
-export { template } from './lib/template.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,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"}
+{"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"}