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

package/src/lib/query.test.ts

@@ -1,54 +1,53 @@
-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', () => {
-    @element({
-      tagName: 'query-test-1',
-      shadow: [
-        html`
-          <form>
-            <input id="fname" name="fname" />
-            <input id="lname" name="lname" />
-          </form>
-        `
-      ]
-    })
-    class MyElement extends HTMLElement {
-      fname = query<HTMLInputElement>('#fname');
-      lname = query<HTMLInputElement>('#lname');
-    }
+it('should work', () => {
+  @element({
+    tagName: 'query-test-1',
+    shadow: [
+      html`
+        <form>
+          <input id="fname" name="fname" />
+          <input id="lname" name="lname" />
+        </form>
+      `
+    ]
+  })
+  class MyElement extends HTMLElement {
+    fname = query<HTMLInputElement>('#fname');
+    lname = query<HTMLInputElement>('#lname');
+  }
 
-    const el = new MyElement();
+  const el = new MyElement();
 
-    expect(el.fname()).to.equal(el.shadowRoot?.querySelector('#fname'));
-    expect(el.lname()).to.equal(el.shadowRoot?.querySelector('#lname'));
-  });
+  expect(el.fname()).to.equal(el.shadowRoot?.querySelector('#fname'));
+  expect(el.lname()).to.equal(el.shadowRoot?.querySelector('#lname'));
+});
 
-  it('should patch the selected item', () => {
-    @element({
-      tagName: 'query-test-2',
-      shadow: [
-        html`
-          <form>
-            <input id="fname" name="fname" />
-            <input id="lname" name="lname" />
-          </form>
-        `
-      ]
-    })
-    class MyElement extends HTMLElement {
-      fname = query<HTMLInputElement>('#fname');
-      lname = query<HTMLInputElement>('#lname');
-    }
+it('should patch the selected item', () => {
+  @element({
+    tagName: 'query-test-2',
+    shadow: [
+      html`
+        <form>
+          <input id="fname" name="fname" />
+          <input id="lname" name="lname" />
+        </form>
+      `
+    ]
+  })
+  class MyElement extends HTMLElement {
+    fname = query<HTMLInputElement>('#fname');
+    lname = query<HTMLInputElement>('#lname');
+  }
 
-    const el = new MyElement();
-    el.fname({ value: 'Foo' });
-    el.lname({ value: 'Bar' });
+  const el = new MyElement();
+  el.fname({ value: 'Foo' });
+  el.lname({ value: 'Bar' });
 
-    expect(el.shadowRoot?.querySelector<HTMLInputElement>('#fname')?.value).to.equal('Foo');
-    expect(el.shadowRoot?.querySelector<HTMLInputElement>('#lname')?.value).to.equal('Bar');
-  });
+  expect(el.shadowRoot?.querySelector<HTMLInputElement>('#fname')?.value).to.equal('Foo');
+  expect(el.shadowRoot?.querySelector<HTMLInputElement>('#lname')?.value).to.equal('Bar');
 });

package/src/lib/query.ts

@@ -7,7 +7,7 @@ type QueryResult<T> = (updates?: Partial<T>) => T;
 export function query<K extends Tags>(selectors: K): QueryResult<HTMLElementTagNameMap[K]>;
 export function query<K extends SVGTags>(selectors: K): QueryResult<SVGElementTagNameMap[K]>;
 export function query<K extends MathTags>(selectors: K): QueryResult<MathMLElementTagNameMap[K]>;
-export function query<E extends Element = Element>(selectors: string): QueryResult<E>;
+export function query<E extends HTMLElement = HTMLElement>(selectors: string): QueryResult<E>;
 export function query<K extends Tags>(query: K): QueryResult<HTMLElementTagNameMap[K]> {
   let res: HTMLElementTagNameMap[K] | null = null;
 

package/src/lib/result.ts

@@ -1,23 +1,3 @@
-export interface ShadowResult {
-  run(el: HTMLElement): void;
-}
-
-export abstract class JoistShadowResult implements ShadowResult {
-  strings;
-  values;
-
-  constructor(raw: TemplateStringsArray, ...values: any[]) {
-    this.strings = raw;
-    this.values = values;
-  }
-
-  run(el: HTMLElement) {
-    if (!el.shadowRoot) {
-      throw new Error('ShadowResult has not been applied');
-    }
-
-    this.setup(el.shadowRoot);
-  }
-
-  abstract setup(root: ShadowRoot): void;
+export interface ShadowResult<T extends HTMLElement> {
+  apply(el: T): void;
 }

package/src/lib/tags.ts

@@ -1,28 +1,43 @@
-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<T> {
+  #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<T extends HTMLElement> implements ShadowResult<T> {
+  #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];
+    }
   }
 }
 
-export function css(strings: TemplateStringsArray): CSSResult {
+export function css<T extends HTMLElement>(strings: TemplateStringsArray): CSSResult<T> {
   return new CSSResult(strings);
 }
 

package/src/lib/template.test.ts

@@ -0,0 +1,65 @@
+import { assert } from 'chai';
+
+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)'}`, () => {
+      el.title = 'Hello World';
+      el.ariaLabel = 'This is the label';
+      el.ariaDescription = 'This is the description';
+
+      root.innerHTML = /*html*/ `
+        <!--#: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: 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();
+
+      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' }));
+}

package/src/lib/template.ts

@@ -0,0 +1,132 @@
+const TOKEN_PREFIX = '#:';
+
+class NodeMap extends Map<Node, string> {}
+
+export interface TemplateOpts {}
+
+export interface RenderOpts {
+  refresh?: boolean;
+}
+
+export function template(_templateOpts?: TemplateOpts) {
+  // make sure we only initialize once
+  let initialized = false;
+
+  // 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);
+    }
+
+    // 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
+  );
+
+  while (iterator.nextNode()) {
+    const res = trackNode(el, iterator.currentNode, nodes);
+
+    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;
+    }
+  }
+}
+
+/**
+ * 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();
+
+      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 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, '');
+
+          attr.value = Reflect.get(el, propertyKey);
+
+          nodes.set(attr, propertyKey);
+        }
+      }
+
+      break;
+    }
+  }
+
+  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, '');
+
+  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);
+    }
+  }
+}

package/src/lib.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/attr.d.ts

@@ -1,4 +1,4 @@
 export interface AttrOpts {
-    observe?: boolean;
+    observed?: 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

@@ -6,7 +6,7 @@ export function attr(opts) {
         meta.attrs.push({
             propName: ctx.name,
             attrName,
-            observe: opts?.observe ?? true
+            observe: opts?.observed ?? true
         });
         return {
             set(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;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,QAAQ,IAAI,IAAI;SAChC,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"}