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

package/src/lib/element.test.ts

@@ -1,86 +1,117 @@
-import { expect, fixture, html as litHtml } from '@open-wc/testing';
+import { expect, assert } from 'chai';
 
 import { attr } from './attr.js';
 import { element } from './element.js';
 import { css, html } from './tags.js';
 
-describe('@element()', () => {
-  it('should write default value to attribute', async () => {
-    @element({
-      tagName: 'element-1'
-    })
-    class MyElement extends HTMLElement {
-      @attr()
-      accessor value1 = 'hello'; // no attribute
+it('should write default value to attribute', async () => {
+  @element({
+    tagName: 'element-1'
+  })
+  class MyElement extends HTMLElement {
+    @attr()
+    accessor value1 = 'hello'; // no attribute
 
-      @attr()
-      accessor value2 = 0; // number
+    @attr()
+    accessor value2 = 0; // number
 
-      @attr()
-      accessor value3 = true; // boolean
-    }
+    @attr()
+    accessor value3 = true; // boolean
+
+    @attr({ reflect: false })
+    accessor value4 = 'foo';
+  }
 
-    const el = await fixture<MyElement>(litHtml`<element-1></element-1>`);
+  const el = new MyElement();
 
-    expect(el.getAttribute('value1')).to.equal('hello');
-    expect(el.getAttribute('value2')).to.equal('0');
-    expect(el.getAttribute('value3')).to.equal('');
-  });
+  document.body.append(el);
 
-  it('should register attributes', async () => {
-    @element({
-      tagName: 'element-2'
-    })
-    class MyElement extends HTMLElement {
-      @attr()
-      accessor value1 = 'hello'; // no attribute
+  expect(el.getAttribute('value1')).to.equal('hello');
+  expect(el.getAttribute('value2')).to.equal('0');
+  expect(el.getAttribute('value3')).to.equal('');
+  expect(el.getAttribute('value4')).to.equal(null);
 
-      @attr()
-      accessor value2 = 0; // number
+  el.remove();
+});
 
-      @attr()
-      accessor value3 = true; // boolean
+// TODO: Figure out test
+// it('should register attributes', async () => {
+//   @element({
+//     tagName: 'element-2'
+//   })
+//   class MyElement extends HTMLElement {
+//     @attr()
+//     accessor value1 = 'hello'; // no attribute
+
+//     @attr()
+//     accessor value2 = 0; // number
+
+//     @attr()
+//     accessor value3 = true; // boolean
+
+//     @attr({ observed: false }) // should be filtered out
+//     accessor value4 = 'hello world';
+//   }
+
+//   expect(Reflect.get(MyElement, 'observedAttributes')).to.deep.equal([
+//     'value1',
+//     'value2',
+//     'value3'
+//   ]);
+// });
+
+it('should attach shadow root when the shadow property exists', async () => {
+  @element({
+    tagName: 'element-3',
+    shadowDom: []
+  })
+  class MyElement extends HTMLElement {}
+
+  const el = new MyElement();
+
+  expect(el.shadowRoot).to.be.instanceOf(ShadowRoot);
+});
 
-      @attr({ observe: false }) // should be filtered out
-      accessor value4 = 'hello world';
+it('should apply html and css', async () => {
+  @element({
+    tagName: 'element-4',
+    shadowDom: [
+      css`
+        :host {
+          display: contents;
+        }
+      `,
+      html`<slot></slot>`,
+      {
+        apply(el) {
+          const div = document.createElement('div');
+          div.innerHTML = 'hello world';
+
+          el.append(div);
+        }
+      }
+    ]
+  })
+  class MyElement extends HTMLElement {}
+
+  const el = new MyElement();
+
+  expect(el.shadowRoot!.adoptedStyleSheets.length).to.equal(1);
+  expect(el.shadowRoot!.innerHTML).to.equal(`<slot></slot>`);
+  expect(el.innerHTML).to.equal(`<div>hello world</div>`);
+});
+
+it('should the correct shadow dom mode', async () => {
+  @element({
+    tagName: 'element-5',
+    shadowDom: [],
+    shadowDomOpts: {
+      mode: 'closed'
     }
+  })
+  class MyElement extends HTMLElement {}
+
+  const el = new MyElement();
 
-    expect(Reflect.get(MyElement, 'observedAttributes')).to.deep.equal([
-      'value1',
-      'value2',
-      'value3'
-    ]);
-  });
-
-  it('should attach shadow root when the shadow property exists', async () => {
-    @element({
-      tagName: 'element-3',
-      shadow: []
-    })
-    class MyElement extends HTMLElement {}
-
-    const el = new MyElement();
-
-    expect(el.shadowRoot).to.be.instanceOf(ShadowRoot);
-  });
-
-  it('should apply html and css', async () => {
-    @element({
-      tagName: 'element-4',
-      shadow: [
-        css`
-          :host {
-            display: contents;
-          }
-        `,
-        html`<slot></slot>`
-      ]
-    })
-    class MyElement extends HTMLElement {}
-
-    const el = new MyElement();
-
-    expect(el.shadowRoot!.adoptedStyleSheets.length).to.equal(1);
-    expect(el.shadowRoot!.innerHTML).to.equal(`<slot></slot>`);
-  });
+  assert.equal(el.shadowRoot, null);
 });

package/src/lib/element.ts

@@ -1,19 +1,21 @@
-import { AttrDef, metadataStore } from './metadata.js';
+import { AttrMetadata, metadataStore } from './metadata.js';
 import { ShadowResult } from './result.js';
 
-export interface ElementOpts<T> {
+export interface ElementOpts {
   tagName?: string;
-  shadow?: Array<ShadowResult | ((el: T) => void)>;
+  shadowDom?: ShadowResult[];
+  shadowDomOpts?: ShadowRootInit;
 }
 
-export function element<
-  Target extends CustomElementConstructor,
-  Instance extends InstanceType<Target>
->(opts?: ElementOpts<Instance>) {
-  return function elementDecorator(Base: Target, ctx: ClassDecoratorContext<Target>) {
+interface ElementConstructor {
+  new (...args: any[]): HTMLElement;
+}
+
+export function element<T extends ElementConstructor>(opts?: ElementOpts) {
+  return function elementDecorator(Base: T, ctx: ClassDecoratorContext<T>) {
     const meta = metadataStore.read(ctx.metadata);
 
-    ctx.addInitializer(function (this: Target) {
+    ctx.addInitializer(function () {
       if (opts?.tagName) {
         if (!customElements.get(opts.tagName)) {
           customElements.define(opts.tagName, this);
@@ -21,56 +23,103 @@ export function element<
       }
     });
 
-    return class JoistElement extends Base {
-      static observedAttributes = meta.attrs
-        .filter(({ observe }) => observe) // filter out attributes that are not to be observed
-        .map(({ attrName }) => attrName);
+    const def = {
+      [Base.name]: class extends Base {
+        static observedAttributes: string[] = [];
+
+        static {
+          for (let [attrName] of meta.attrs) {
+            this.observedAttributes.push(attrName);
+          }
+        }
+
+        constructor(...args: any[]) {
+          super(...args);
 
-      constructor(...args: any[]) {
-        super(...args);
+          if (opts?.shadowDom) {
+            if (!this.shadowRoot) {
+              this.attachShadow(opts.shadowDomOpts ?? { mode: 'open' });
+            }
+
+            for (let res of opts.shadowDom) {
+              res.apply(this);
+            }
+          }
 
-        if (opts?.shadow) {
-          this.attachShadow({ mode: 'open' });
+          for (let { event, cb, selector } of meta.listeners) {
+            const root = selector(this);
 
-          for (let res of opts.shadow) {
-            if (typeof res === 'function') {
-              res(this as unknown as Instance);
+            if (root) {
+              root.addEventListener(event, cb.bind(this));
             } else {
-              res.run(this);
+              throw new Error(`could not add listener to ${root}`);
             }
           }
+
+          for (let cb of meta.onReady) {
+            cb.call(this);
+          }
         }
 
-        for (let [event, { cb, root }] of meta.listeners) {
-          root(this).addEventListener(event, cb.bind(this));
+        connectedCallback() {
+          if (this.isConnected) {
+            reflectAttributeValues(this, meta.attrs);
+
+            if (super.connectedCallback) {
+              super.connectedCallback();
+            }
+          }
         }
-      }
 
-      connectedCallback() {
-        reflectAttributeValues(this, meta.attrs);
+        attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+          const attr = meta.attrs.get(name);
+
+          if (attr) {
+            if (oldValue !== newValue) {
+              const ogValue = attr.getPropValue.call(this);
 
-        if (super.connectedCallback) {
-          super.connectedCallback();
+              if (newValue === '') {
+                // treat as boolean
+                attr.setPropValue.call(this, true);
+              } else if (typeof ogValue === 'number') {
+                // treat as number
+                attr.setPropValue.call(this, Number(newValue));
+              } else {
+                // treat as string
+                attr.setPropValue.call(this, newValue);
+              }
+            }
+
+            if (attr.observe) {
+              if (super.attributeChangedCallback) {
+                super.attributeChangedCallback(name, oldValue, newValue);
+              }
+            }
+          }
         }
       }
     };
+
+    return def[Base.name];
   };
 }
 
-function reflectAttributeValues(el: HTMLElement, attrs: AttrDef[]) {
-  for (let { propName, attrName } of attrs) {
-    const value = Reflect.get(el, propName);
+function reflectAttributeValues<T extends HTMLElement>(el: T, attrs: AttrMetadata) {
+  for (let [attrName, { getPropValue, reflect }] of attrs) {
+    if (reflect) {
+      const value = getPropValue.call(el);
 
-    // reflect values back to attributes
-    if (value !== null && value !== undefined && value !== '') {
-      if (typeof value === 'boolean') {
-        if (value === true) {
-          // set boolean attribute
-          el.setAttribute(attrName, '');
+      // reflect values back to attributes
+      if (value !== null && value !== undefined && value !== '') {
+        if (typeof value === 'boolean') {
+          if (value === true) {
+            // set boolean attribute
+            el.setAttribute(attrName, '');
+          }
+        } else {
+          // set key/value attribute
+          el.setAttribute(attrName, String(value));
         }
-      } else {
-        // set key/value attribute
-        el.setAttribute(attrName, String(value));
       }
     }
   }

package/src/lib/lifecycle.test.ts

@@ -0,0 +1,31 @@
+import { assert } from 'chai';
+import { element } from './element.js';
+import { ready } from './lifecycle.js';
+
+it('should call all callbacks when template is ready', () => {
+  @element({
+    tagName: 'template-ready-1'
+  })
+  class MyElement extends HTMLElement {
+    callCount: Record<string, number> = {};
+
+    @ready()
+    onTemplateReady1() {
+      this.callCount['onTemplateReady1'] ??= 0;
+      this.callCount['onTemplateReady1']++;
+    }
+
+    @ready()
+    onTemplateReady2() {
+      this.callCount['onTemplateReady2'] ??= 0;
+      this.callCount['onTemplateReady2']++;
+    }
+  }
+
+  const el = new MyElement();
+
+  assert.deepEqual(el.callCount, {
+    onTemplateReady1: 1,
+    onTemplateReady2: 1
+  });
+});

package/src/lib/lifecycle.ts

@@ -0,0 +1,9 @@
+import { metadataStore } from './metadata.js';
+
+export function ready() {
+  return function readyDecorator(val: Function, ctx: ClassMethodDecoratorContext) {
+    const metadata = metadataStore.read(ctx.metadata);
+
+    metadata.onReady.add(val);
+  };
+}

package/src/lib/listen.test.ts

@@ -0,0 +1,88 @@
+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',
+      shadowDom: []
+    })
+    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',
+      shadowDom: []
+    })
+    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,32 @@
-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>
-  ) {
-    const metadata = metadataStore.read(ctx.metadata);
+export function listen<This extends HTMLElement>(
+  event: string,
+  selector?: ListenerSelector<This> | string
+) {
+  return function listenDecorator(value: (e: any) => void, ctx: ClassMethodDecoratorContext<This>) {
+    const metadata = metadataStore.read<This>(ctx.metadata);
 
-    metadata.listeners.set(event, {
+    let selectorInternal: ListenerSelector<This> = (el) => el.shadowRoot ?? el;
+
+    if (selector) {
+      if (typeof selector === 'string') {
+        selectorInternal = (el: This) => {
+          if (el.shadowRoot) {
+            return el.shadowRoot.querySelector(selector);
+          }
+
+          return el.querySelector(selector);
+        };
+      } else {
+        selectorInternal = selector;
+      }
+    }
+
+    metadata.listeners.push({
+      event,
       cb: value,
-      root: root ?? ((el: HTMLElement) => el.shadowRoot ?? el)
+      selector: selectorInternal
     });
   };
 }

package/src/lib/metadata.ts

@@ -2,19 +2,30 @@
 
 export interface AttrDef {
   propName: string | symbol;
-  attrName: string;
   observe: boolean;
+  reflect: boolean;
+  getPropValue: Function;
+  setPropValue: Function;
 }
 
-export type ListenerRootSelector = (el: HTMLElement) => HTMLElement | ShadowRoot;
+export type ListenerSelector<T> = (el: T) => Element | ShadowRoot | null;
 
-export class ElementMetadata {
-  attrs: AttrDef[] = [];
-  listeners = new Map<string, { cb: (e: Event) => void; root: ListenerRootSelector }>();
+export interface Listener<T> {
+  event: string;
+  cb: (e: Event) => void;
+  selector: ListenerSelector<T>;
 }
 
-export class MetadataStore extends WeakMap<object, ElementMetadata> {
-  read(value: object) {
+export class AttrMetadata extends Map<string, AttrDef> {}
+
+export class ElementMetadata<T> {
+  attrs = new AttrMetadata();
+  listeners: Listener<T>[] = [];
+  onReady = new Set<Function>();
+}
+
+export class MetadataStore extends WeakMap<object, ElementMetadata<unknown>> {
+  read<T>(value: object): ElementMetadata<T> {
     if (!this.has(value)) {
       this.set(value, new ElementMetadata());
     }

package/src/lib/query.test.ts

@@ -0,0 +1,28 @@
+import { expect } from 'chai';
+
+import { element } from './element.js';
+import { query } from './query.js';
+import { html } from './tags.js';
+
+it('should work', () => {
+  @element({
+    tagName: 'query-test-1',
+    shadowDom: [
+      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();
+
+  expect(el.fname()).to.equal(el.shadowRoot?.querySelector('#fname'));
+  expect(el.lname()).to.equal(el.shadowRoot?.querySelector('#lname'));
+});

package/src/lib/query.ts

@@ -0,0 +1,31 @@
+type Tags = keyof HTMLElementTagNameMap;
+type SVGTags = keyof SVGElementTagNameMap;
+type MathTags = keyof MathMLElementTagNameMap;
+
+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 HTMLElement = HTMLElement>(selectors: string): QueryResult<E>;
+export function query<K extends Tags>(query: K): QueryResult<HTMLElementTagNameMap[K]> {
+  let res: HTMLElementTagNameMap[K] | null = null;
+
+  return function (this: HTMLElement) {
+    if (res) {
+      return res;
+    }
+
+    if (this.shadowRoot) {
+      res = this.shadowRoot.querySelector<K>(query);
+    } else {
+      res = this.querySelector<K>(query);
+    }
+
+    if (!res) {
+      throw new Error('could not find element');
+    }
+
+    return res;
+  };
+}

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;
+  apply(el: Element): void;
 }