@joist/element 3.0.6 → 3.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/element",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "type": "module",
   "main": "./target/lib.js",
   "module": "./target/lib.js",
@@ -13,6 +13,7 @@
     }
   },
   "files": [
+    "src",
     "target"
   ],
   "sideEffects": false,

package/src/lib/attr.test.ts

@@ -0,0 +1,80 @@
+import { expect, fixture, html } from '@open-wc/testing';
+
+import { attr } from './attr.js';
+
+describe('observable: attr()', () => {
+  it('should write default value to attribute', async () => {
+    class MyElement extends HTMLElement {
+      @attr accessor value1 = 'hello'; // no attribute
+      @attr accessor value2 = 0; // number
+      @attr accessor value3 = true; // boolean
+    }
+
+    customElements.define('attr-test-1', MyElement);
+
+    const el = await fixture(html`<attr-test-1></attr-test-1>`);
+
+    expect(el.getAttribute('value1')).to.equal('hello');
+    expect(el.getAttribute('value2')).to.equal('0');
+    expect(el.getAttribute('value3')).to.equal('');
+  });
+
+  it('should read and parse the correct values', async () => {
+    class MyElement extends HTMLElement {
+      @attr accessor value1 = 100; // no attribute
+      @attr accessor value2 = 0; // number
+      @attr accessor value3 = false; // boolean
+      @attr accessor value4 = 'hello'; // string
+    }
+
+    customElements.define('attr-test-2', MyElement);
+
+    const el = await fixture<MyElement>(
+      html`<attr-test-2 value2="2" value3 value4="world"></attr-test-2>`
+    );
+
+    expect(el.value1).to.equal(100);
+    expect(el.value2).to.equal(2);
+    expect(el.value3).to.equal(true);
+    expect(el.value4).to.equal('world');
+  });
+
+  it('should not write falsy props to attributes', async () => {
+    class MyElement extends HTMLElement {
+      @attr accessor value1 = undefined;
+      @attr accessor value2 = null;
+      @attr accessor value3 = '';
+    }
+
+    customElements.define('attr-test-3', MyElement);
+
+    const el = await fixture<MyElement>(html`<attr-test-3></attr-test-3>`);
+
+    expect(el.hasAttribute('value1')).to.be.false;
+    expect(el.hasAttribute('value2')).to.be.false;
+    expect(el.hasAttribute('value3')).to.be.false;
+  });
+
+  it('should update attributes when props are changed', async () => {
+    class MyElement extends HTMLElement {
+      @attr accessor value1 = 'hello'; // no attribute
+      @attr accessor value2 = 0; // number
+      @attr accessor value3 = true; // boolean
+      @attr accessor value4 = false; // boolean
+    }
+
+    customElements.define('attr-test-4', MyElement);
+
+    const el = await fixture<MyElement>(html`<attr-test-4></attr-test-4>`);
+
+    el.value1 = 'world';
+    el.value2 = 100;
+    el.value3 = false;
+    el.value4 = true;
+
+    expect(el.getAttribute('value1')).to.equal('world');
+    expect(el.getAttribute('value2')).to.equal('100');
+    expect(el.hasAttribute('value3')).to.be.false;
+    expect(el.hasAttribute('value4')).to.be.true;
+  });
+});

package/src/lib/attr.ts

@@ -0,0 +1,91 @@
+export function attr<This extends HTMLElement>(
+  { get, set }: ClassAccessorDecoratorTarget<This, unknown>,
+  ctx: ClassAccessorDecoratorContext<This>
+): ClassAccessorDecoratorResult<This, any> {
+  return {
+    init(value: unknown) {
+      if (typeof ctx.name === 'string') {
+        if (this.hasAttribute(ctx.name)) {
+          const attr = this.getAttribute(ctx.name);
+
+          // treat as boolean
+          if (attr === '') {
+            return true;
+          }
+
+          // treat as number
+          if (typeof value === 'number') {
+            return Number(attr);
+          }
+
+          // treat as string
+          return attr;
+        }
+
+        /**
+         * should set attributes AFTER init to allow setup to complete
+         * this causes attribute changed callback to fire
+         * If the user attempts to read or write to this property in that cb it will fail
+         * this also normalizes when the attributeChangedCallback is called in different rendering scenarios
+         */
+        Promise.resolve().then(() => {
+          const cached = get.call(this);
+
+          if (cached !== null && cached !== undefined && cached !== '') {
+            if (typeof cached === 'boolean') {
+              if (cached === true) {
+                // set boolean attribute
+                this.setAttribute(ctx.name.toString(), '');
+              }
+            } else {
+              // set key/value attribute
+              this.setAttribute(ctx.name.toString(), String(cached));
+            }
+          }
+        });
+      }
+
+      return value;
+    },
+    set(value: unknown) {
+      if (typeof ctx.name === 'string') {
+        if (typeof value === 'boolean') {
+          if (value) {
+            this.setAttribute(ctx.name, '');
+          } else {
+            this.removeAttribute(ctx.name);
+          }
+        } else {
+          this.setAttribute(ctx.name, String(value));
+        }
+      }
+
+      return set.call(this, value);
+    },
+    get() {
+      const ogValue = get.call(this);
+
+      if (typeof ctx.name === 'string') {
+        const attr = this.getAttribute(ctx.name);
+
+        if (attr !== null) {
+          // treat as boolean
+          if (attr === '') {
+            return true;
+          }
+
+          // treat as number
+          if (typeof ogValue === 'number') {
+            return Number(attr);
+          }
+
+          // treat as string
+          return attr;
+        }
+      }
+
+      // no readable value return original
+      return ogValue;
+    },
+  };
+}

package/src/lib/listen.ts

@@ -0,0 +1,14 @@
+export function listen<This extends HTMLElement>(
+  event: string,
+  root: (el: This) => ShadowRoot | This = (el) => el.shadowRoot || el
+) {
+  return (value: (e: Event) => void, ctx: ClassMethodDecoratorContext<This>) => {
+    ctx.addInitializer(function () {
+      // method initializers are run before fields and accessors.
+      // we want to wait till after all have run so we can check if there is a shadowRoot or not.
+      Promise.resolve().then(() => {
+        root(this).addEventListener(event, value.bind(this));
+      });
+    });
+  };
+}

package/src/lib/result.ts

@@ -0,0 +1,27 @@
+export abstract class ShadowResult {
+  strings: TemplateStringsArray;
+  values: any[];
+
+  #shadow: ShadowRoot | undefined = undefined;
+
+  get shadow() {
+    if (!this.#shadow) {
+      throw new Error('ShadowResult has not been applied');
+    }
+
+    return this.#shadow;
+  }
+
+  constructor(raw: TemplateStringsArray, ...values: any[]) {
+    this.strings = raw;
+    this.values = values;
+  }
+
+  execute(root: ShadowRoot) {
+    this.#shadow = root;
+
+    this.apply(root);
+  }
+
+  abstract apply(root: ShadowRoot): void;
+}

package/src/lib/shadow.test.ts

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

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

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

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

package/src/lib/tag-name.ts

@@ -0,0 +1,11 @@
+export function tagName(_val: unknown, _ctx: ClassFieldDecoratorContext) {
+  return function (this: CustomElementConstructor, val: string) {
+    Promise.resolve().then(() => {
+      if (!customElements.get(val)) {
+        customElements.define(val, this);
+      }
+    });
+
+    return val;
+  };
+}

package/src/lib/tags.test.ts

@@ -0,0 +1,28 @@
+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/src/lib/tags.ts

@@ -0,0 +1,94 @@
+/**
+ * NOTE: TemplateStringsArray can be used to cache via a WeakMap.
+ *
+ * function html(strs: TemplateStringsArray) {
+ *   return strs
+ * }
+ *
+ * class Foo {
+ *   hello = html`world`;
+ * }
+ *
+ * // these will be the same instance of TemplateStringsArray
+ * new Foo().hello === new Foo().hello
+ */
+
+import { ShadowResult } from './result.js';
+
+type Tags = keyof HTMLElementTagNameMap;
+type SVGTags = keyof SVGElementTagNameMap;
+type MathTags = keyof MathMLElementTagNameMap;
+
+export const htmlTemplateCache = new WeakMap<TemplateStringsArray, HTMLTemplateElement>();
+
+export 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;
+  query<K extends Tags>(query: K) {
+    return this.shadow.querySelector<K>(query);
+  }
+
+  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>;
+  queryAll<K extends Tags>(query: K) {
+    return this.shadow.querySelectorAll<K>(query);
+  }
+
+  /**
+   * THe HTMLTemplateElement itself will be cached but a new instance of the result returned
+   */
+  apply(root: ShadowRoot): void {
+    let template: HTMLTemplateElement;
+
+    if (htmlTemplateCache.has(this.strings)) {
+      template = htmlTemplateCache.get(this.strings) as HTMLTemplateElement;
+    } else {
+      template = document.createElement('template');
+
+      template.innerHTML = concat(this.strings);
+      htmlTemplateCache.set(this.strings, template);
+    }
+
+    root.append(template.content.cloneNode(true));
+  }
+}
+
+export function html(strings: TemplateStringsArray, ...values: any[]): HTMLResult {
+  return new HTMLResult(strings, ...values);
+}
+
+export const styleSheetCache = new WeakMap<TemplateStringsArray, CSSStyleSheet>();
+
+export class CSSResult extends ShadowResult {
+  apply(root: ShadowRoot): void {
+    let sheet: CSSStyleSheet;
+
+    if (styleSheetCache.has(this.strings)) {
+      sheet = styleSheetCache.get(this.strings) as CSSStyleSheet;
+    } else {
+      sheet = new CSSStyleSheet();
+
+      sheet.replaceSync(concat(this.strings));
+    }
+
+    root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+  }
+}
+
+export function css(strings: TemplateStringsArray): CSSResult {
+  return new CSSResult(strings);
+}
+
+function concat(strings: TemplateStringsArray) {
+  let res = '';
+
+  for (let i = 0; i < strings.length; i++) {
+    res += strings[i];
+  }
+
+  return res;
+}

package/src/lib.ts

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

package/target/lib/listen.js

@@ -1,7 +1,9 @@
 export function listen(event, root = (el) => el.shadowRoot || el) {
     return (value, ctx) => {
         ctx.addInitializer(function () {
-            root(this).addEventListener(event, value.bind(this));
+            Promise.resolve().then(() => {
+                root(this).addEventListener(event, value.bind(this));
+            });
         });
     };
 }

package/target/lib/listen.js.map

@@ -1 +1 @@
-{"version":3,"file":"listen.js","sourceRoot":"","sources":["../../src/lib/listen.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CACpB,KAAa,EACb,OAAwC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,UAAU,IAAI,EAAE;IAEnE,OAAO,CAAC,KAAyB,EAAE,GAAsC,EAAE,EAAE;QAC3E,GAAG,CAAC,cAAc,CAAC;YACjB,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACvD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"listen.js","sourceRoot":"","sources":["../../src/lib/listen.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CACpB,KAAa,EACb,OAAwC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,UAAU,IAAI,EAAE;IAEnE,OAAO,CAAC,KAAyB,EAAE,GAAsC,EAAE,EAAE;QAC3E,GAAG,CAAC,cAAc,CAAC;YAGjB,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;gBAC1B,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YACvD,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}

package/target/lib/tag-name.d.ts

@@ -1 +1 @@
-export declare function tagName(_val: unknown, ctx: ClassFieldDecoratorContext): (this: CustomElementConstructor, val: string) => string;
+export declare function tagName(_val: unknown, _ctx: ClassFieldDecoratorContext): (this: CustomElementConstructor, val: string) => string;

package/target/lib/tag-name.js

@@ -1,11 +1,10 @@
-export function tagName(_val, ctx) {
+export function tagName(_val, _ctx) {
     return function (val) {
-        if (!ctx.static) {
-            throw new Error('tagName can only be used on static fields');
-        }
-        if (!customElements.get(val)) {
-            customElements.define(val, this);
-        }
+        Promise.resolve().then(() => {
+            if (!customElements.get(val)) {
+                customElements.define(val, this);
+            }
+        });
         return val;
     };
 }

package/target/lib/tag-name.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag-name.js","sourceRoot":"","sources":["../../src/lib/tag-name.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,OAAO,CAAC,IAAa,EAAE,GAA+B;IACpE,OAAO,UAA0C,GAAW;QAC1D,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE;YACf,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;SAC9D;QAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;YAC5B,cAAc,CAAC,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;SAClC;QAED,OAAO,GAAG,CAAC;IACb,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"tag-name.js","sourceRoot":"","sources":["../../src/lib/tag-name.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,OAAO,CAAC,IAAa,EAAE,IAAgC;IACrE,OAAO,UAA0C,GAAW;QAC1D,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;YAC1B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;gBAC5B,cAAc,CAAC,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;aAClC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,CAAC;IACb,CAAC,CAAC;AACJ,CAAC"}