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

package/src/lib/tags.ts

@@ -1,24 +1,39 @@
-import { JoistShadowResult } from './result.js';
+import { ShadowResult } from './result.js';
 
-export class HTMLResult extends JoistShadowResult {
-  setup(root: ShadowRoot): void {
-    let template = document.createElement('template');
-    template.innerHTML = concat(this.strings);
+export class HTMLResult<T extends HTMLElement> implements ShadowResult {
+  #template;
 
-    root.append(template.content.cloneNode(true));
+  constructor(raw: TemplateStringsArray, ..._values: any[]) {
+    this.#template = document.createElement('template');
+    this.#template.innerHTML = concat(raw);
+  }
+
+  apply(el: T): void {
+    if (el.shadowRoot) {
+      el.shadowRoot.append(this.#template.content.cloneNode(true));
+    }
   }
 }
 
-export function html(strings: TemplateStringsArray, ...values: any[]): HTMLResult {
+export function html<T extends HTMLElement>(
+  strings: TemplateStringsArray,
+  ...values: any[]
+): HTMLResult<T> {
   return new HTMLResult(strings, ...values);
 }
 
-export class CSSResult extends JoistShadowResult {
-  setup(root: ShadowRoot): void {
-    let sheet = new CSSStyleSheet();
-    sheet.replaceSync(concat(this.strings));
+export class CSSResult implements ShadowResult {
+  #sheet;
+
+  constructor(raw: TemplateStringsArray, ..._values: any[]) {
+    this.#sheet = new CSSStyleSheet();
+    this.#sheet.replaceSync(concat(raw));
+  }
 
-    root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+  apply(el: HTMLElement): void {
+    if (el.shadowRoot) {
+      el.shadowRoot.adoptedStyleSheets = [...el.shadowRoot.adoptedStyleSheets, this.#sheet];
+    }
   }
 }
 

package/src/lib/template.test.ts

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

package/src/lib/template.ts

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

package/src/lib.ts

@@ -1,5 +1,6 @@
-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 } from './lib/element.js';
+export { query } from './lib/query.js';
+export { ready } from './lib/lifecycle.js';

package/target/lib/attr.d.ts

@@ -1,4 +1,5 @@
 export interface AttrOpts {
-    observe?: boolean;
+    observed?: boolean;
+    reflect?: boolean;
 }
 export declare function attr(opts?: AttrOpts): <This extends HTMLElement>({ get, set }: ClassAccessorDecoratorTarget<This, unknown>, ctx: ClassAccessorDecoratorContext<This>) => ClassAccessorDecoratorResult<This, any>;

package/target/lib/attr.js

@@ -3,37 +3,28 @@ export function attr(opts) {
     return function attrDecorator({ get, set }, ctx) {
         const attrName = parseAttrName(ctx.name);
         const meta = metadataStore.read(ctx.metadata);
-        meta.attrs.push({
+        const reflect = opts?.reflect ?? true;
+        meta.attrs.set(attrName, {
             propName: ctx.name,
-            attrName,
-            observe: opts?.observe ?? true
+            observe: opts?.observed ?? true,
+            reflect,
+            getPropValue: get,
+            setPropValue: set
         });
         return {
             set(value) {
-                if (value === true) {
-                    this.setAttribute(attrName, '');
-                }
-                else if (value === false) {
-                    this.removeAttribute(attrName);
-                }
-                else {
-                    this.setAttribute(attrName, String(value));
-                }
-                set.call(this, value);
-            },
-            get() {
-                const ogValue = get.call(this);
-                const attr = this.getAttribute(attrName);
-                if (attr !== null) {
-                    if (attr === '') {
-                        return true;
+                if (reflect) {
+                    if (value === true) {
+                        this.setAttribute(attrName, '');
+                    }
+                    else if (value === false) {
+                        this.removeAttribute(attrName);
                     }
-                    if (typeof ogValue === 'number') {
-                        return Number(attr);
+                    else {
+                        this.setAttribute(attrName, String(value));
                     }
-                    return attr;
                 }
-                return ogValue;
+                set.call(this, value);
             }
         };
     };

package/target/lib/attr.js.map

@@ -1 +1 @@
-{"version":3,"file":"attr.js","sourceRoot":"","sources":["../../src/lib/attr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAM9C,MAAM,UAAU,IAAI,CAAC,IAAe;IAClC,OAAO,SAAS,aAAa,CAC3B,EAAE,GAAG,EAAE,GAAG,EAA+C,EACzD,GAAwC;QAExC,MAAM,QAAQ,GAAG,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAE9C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;YACd,QAAQ,EAAE,GAAG,CAAC,IAAI;YAClB,QAAQ;YACR,OAAO,EAAE,IAAI,EAAE,OAAO,IAAI,IAAI;SAC/B,CAAC,CAAC;QAEH,OAAO;YACL,GAAG,CAAC,KAAc;gBAChB,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;oBACnB,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;gBAClC,CAAC;qBAAM,IAAI,KAAK,KAAK,KAAK,EAAE,CAAC;oBAC3B,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;gBACjC,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;gBAC7C,CAAC;gBAED,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YACxB,CAAC;YACD,GAAG;gBACD,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;gBAEzC,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;oBAElB,IAAI,IAAI,KAAK,EAAE,EAAE,CAAC;wBAChB,OAAO,IAAI,CAAC;oBACd,CAAC;oBAGD,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;wBAChC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;oBACtB,CAAC;oBAGD,OAAO,IAAI,CAAC;gBACd,CAAC;gBAGD,OAAO,OAAO,CAAC;YACjB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,GAAoB;IACzC,IAAI,KAAa,CAAC;IAElB,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QAC5B,IAAI,GAAG,CAAC,WAAW,EAAE,CAAC;YACpB,KAAK,GAAG,GAAG,CAAC,WAAW,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;SAAM,CAAC;QACN,KAAK,GAAG,GAAG,CAAC;IACd,CAAC;IAED,OAAO,KAAK,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAClD,CAAC"}
+{"version":3,"file":"attr.js","sourceRoot":"","sources":["../../src/lib/attr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAO9C,MAAM,UAAU,IAAI,CAAC,IAAe;IAClC,OAAO,SAAS,aAAa,CAC3B,EAAE,GAAG,EAAE,GAAG,EAA+C,EACzD,GAAwC;QAExC,MAAM,QAAQ,GAAG,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC9C,MAAM,OAAO,GAAG,IAAI,EAAE,OAAO,IAAI,IAAI,CAAC;QAEtC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE;YACvB,QAAQ,EAAE,GAAG,CAAC,IAAI;YAClB,OAAO,EAAE,IAAI,EAAE,QAAQ,IAAI,IAAI;YAC/B,OAAO;YACP,YAAY,EAAE,GAAG;YACjB,YAAY,EAAE,GAAG;SAClB,CAAC,CAAC;QAEH,OAAO;YACL,GAAG,CAAC,KAAc;gBAChB,IAAI,OAAO,EAAE,CAAC;oBACZ,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;wBACnB,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;oBAClC,CAAC;yBAAM,IAAI,KAAK,KAAK,KAAK,EAAE,CAAC;wBAC3B,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;oBACjC,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;oBAC7C,CAAC;gBACH,CAAC;gBAED,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YACxB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,GAAoB;IACzC,IAAI,KAAa,CAAC;IAElB,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QAC5B,IAAI,GAAG,CAAC,WAAW,EAAE,CAAC;YACpB,KAAK,GAAG,GAAG,CAAC,WAAW,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;SAAM,CAAC;QACN,KAAK,GAAG,GAAG,CAAC;IACd,CAAC;IAED,OAAO,KAAK,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAClD,CAAC"}