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

package/src/lib/element.test.ts

@@ -1,93 +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
 
-    const el = await fixture<MyElement>(litHtml`<element-1></element-1>`);
+    @attr({ reflect: false })
+    accessor value4 = 'foo';
+  }
 
-    expect(el.getAttribute('value1')).to.equal('hello');
-    expect(el.getAttribute('value2')).to.equal('0');
-    expect(el.getAttribute('value3')).to.equal('');
-  });
+  const el = new MyElement();
 
-  it('should register attributes', async () => {
-    @element({
-      tagName: 'element-2'
-    })
-    class MyElement extends HTMLElement {
-      @attr()
-      accessor value1 = 'hello'; // no attribute
+  document.body.append(el);
 
-      @attr()
-      accessor value2 = 0; // number
+  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 value3 = true; // boolean
+  el.remove();
+});
 
-      @attr({ observe: false }) // should be filtered out
-      accessor value4 = 'hello world';
-    }
+// 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);
+});
 
-    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>`,
-        (el) => {
+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 {}
+      }
+    ]
+  })
+  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();
+  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>`);
-  });
+  assert.equal(el.shadowRoot, null);
 });

package/src/lib/element.ts

@@ -1,23 +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 const LifeCycle = {
-  onInit: Symbol('onInit')
-};
+interface ElementConstructor {
+  new (...args: any[]): HTMLElement;
+}
 
-export function element<
-  Target extends CustomElementConstructor,
-  Instance extends InstanceType<Target>
->(opts?: ElementOpts<Instance>) {
-  return function elementDecorator(Base: Target, ctx: ClassDecoratorContext<Target>) {
+export function element<T extends ElementConstructor>(opts?: ElementOpts) {
+  return function elementDecorator(Base: T, ctx: ClassDecoratorContext<T>): 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);
@@ -25,68 +23,126 @@ 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[] = Array.from(meta.attrs.keys());
 
-      constructor(...args: any[]) {
-        super(...args);
+        #removeListeners: Set<Function> = new Set();
 
-        if (opts?.shadow) {
-          if (!this.shadowRoot) {
-            this.attachShadow({ mode: 'open' });
-          }
+        constructor(...args: any[]) {
+          super(...args);
+
+          if (opts?.shadowDom) {
+            if (!this.shadowRoot) {
+              this.attachShadow(opts.shadowDomOpts ?? { mode: 'open' });
+            }
 
-          for (let res of opts.shadow) {
-            if (typeof res === 'function') {
-              res(this as unknown as Instance);
-            } else {
-              res.run(this);
+            for (let res of opts.shadowDom) {
+              res.apply(this);
             }
           }
+
+          for (let cb of meta.onReady) {
+            cb.call(this);
+          }
         }
 
-        for (let [event, { cb, root }] of meta.listeners) {
-          root(this).addEventListener(event, cb.bind(this));
+        attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+          const attr = meta.attrs.get(name);
+          const cbs = meta.attrChanges.get(name);
+
+          if (attr) {
+            if (oldValue !== newValue) {
+              const ogValue = attr.getPropValue.call(this);
+
+              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 (cbs) {
+              for (let cb of cbs) {
+                cb.call(this, oldValue, newValue);
+              }
+            }
+
+            if (super.attributeChangedCallback) {
+              super.attributeChangedCallback(name, oldValue, newValue);
+            }
+          }
         }
 
-        if (LifeCycle.onInit in this) {
-          const onInit = Reflect.get(this, LifeCycle.onInit);
+        connectedCallback() {
+          if (this.isConnected) {
+            for (let { event, cb, selector } of meta.listeners) {
+              const root = selector(this);
 
-          if (typeof onInit === 'function') {
-            onInit();
+              if (root) {
+                const thisCb = cb.bind(this);
+
+                root.addEventListener(event, thisCb);
+
+                this.#removeListeners.add(() => {
+                  root.removeEventListener(event, thisCb);
+                });
+              } else {
+                throw new Error(`could not add listener to ${root}`);
+              }
+            }
+
+            reflectAttributeValues(this, meta.attrs);
+
+            if (super.connectedCallback) {
+              super.connectedCallback();
+            }
           }
         }
-      }
 
-      connectedCallback() {
-        if (this.isConnected) {
-          reflectAttributeValues(this, meta.attrs);
+        disconnectedCallback(): void {
+          for (let remove of this.#removeListeners) {
+            remove();
+          }
 
-          if (super.connectedCallback) {
-            super.connectedCallback();
+          if (super.disconnectedCallback) {
+            super.disconnectedCallback();
           }
         }
       }
     };
+
+    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
+            if (!el.hasAttribute(attrName)) {
+              el.setAttribute(attrName, '');
+            }
+          }
+        } else {
+          // set key/value attribute
+          const strValue = String(value);
 
-    // reflect values back to attributes
-    if (value !== null && value !== undefined && value !== '') {
-      if (typeof value === 'boolean') {
-        if (value === true) {
-          // set boolean attribute
-          el.setAttribute(attrName, '');
+          if (el.getAttribute(attrName) !== strValue) {
+            el.setAttribute(attrName, strValue);
+          }
         }
-      } 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): void {
+    const metadata = metadataStore.read(ctx.metadata);
+
+    metadata.onReady.add(val);
+  };
+}

package/src/lib/listen.test.ts

@@ -0,0 +1,104 @@
+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();
+
+    document.body.append(el);
+
+    el.dispatchEvent(new Event('click'));
+
+    el.remove();
+  });
+
+  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();
+
+    document.body.append(el);
+
+    el.shadowRoot!.dispatchEvent(new Event('click'));
+
+    el.remove();
+  });
+
+  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();
+
+    document.body.append(el);
+
+    el.dispatchEvent(new CustomEvent());
+
+    el.remove();
+  });
+
+  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();
+
+    document.body.append(el);
+
+    el.dispatchEvent(new Event('click'));
+
+    el.remove();
+  });
+});

package/src/lib/listen.ts

@@ -1,15 +1,35 @@
-import { ListenerRootSelector, metadataStore } from './metadata.js';
+import { ListenerSelector, metadataStore } from './metadata.js';
 
-export function listen<This extends HTMLElement>(event: string, root?: ListenerRootSelector) {
+export function listen<This extends HTMLElement>(
+  event: string,
+  selector?: ListenerSelector<This> | string
+) {
   return function listenDecorator(
-    value: (e: Event) => void,
+    value: (e: any) => void,
     ctx: ClassMethodDecoratorContext<This>
-  ) {
-    const metadata = metadataStore.read(ctx.metadata);
+  ): void {
+    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,32 @@
 
 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 AttrChangeMetadata extends Map<string, Set<Function>> {}
+
+export class ElementMetadata<T> {
+  attrs: AttrMetadata = new AttrMetadata();
+  attrChanges: AttrChangeMetadata = new AttrChangeMetadata();
+  listeners: Listener<T>[] = [];
+  onReady: Set<Function> = new Set();
+}
+
+export class MetadataStore extends WeakMap<object, ElementMetadata<unknown>> {
+  read<T>(value: object): ElementMetadata<T> {
     if (!this.has(value)) {
       this.set(value, new ElementMetadata());
     }
@@ -23,4 +36,4 @@ export class MetadataStore extends WeakMap<object, ElementMetadata> {
   }
 }
 
-export const metadataStore = new MetadataStore();
+export const metadataStore: MetadataStore = new MetadataStore();