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

package/README.md

@@ -11,7 +11,7 @@ npm i @joist/element
 #### Example:
 
 ```TS
-import { tagName, css, html, attr, listen, element } from '@joist/element';
+import { css, html, attr, listen, element } from '@joist/element';
 
 @element({
   tagName: 'my-element',
@@ -23,7 +23,7 @@ import { tagName, css, html, attr, listen, element } from '@joist/element';
       }
     `,
     html`
-      <slot></slot>
+      <!--#:value-->
     `
   ]
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/element",
-  "version": "4.0.0-next.4",
+  "version": "4.0.0-next.6",
   "type": "module",
   "main": "./target/lib.js",
   "module": "./target/lib.js",
@@ -20,7 +20,7 @@
   "description": "Intelligently apply styles to WebComponents",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/deebloo/joist.git"
+    "url": "git+https://github.com/joist-framework/joist.git"
   },
   "keywords": [
     "TypeScript",
@@ -31,7 +31,7 @@
   "author": "deebloo",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/deebloo/joist/issues"
+    "url": "https://github.com/joist-framework/joist/issues"
   },
   "publishConfig": {
     "access": "public"
@@ -57,6 +57,7 @@
     "test": {
       "command": "wtr --config wtr.config.mjs",
       "files": [
+        "vitest.config.js",
         "target/**"
       ],
       "output": [],

package/src/lib/attr.test.ts

@@ -1,129 +1,138 @@
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect } from 'chai';
 
 import { attr } from './attr.js';
 import { element } from './element.js';
 
-describe('@attr()', () => {
-  it('should read and parse the correct values', async () => {
-    @element({
-      tagName: 'attr-test-1'
-    })
-    class MyElement extends HTMLElement {
-      @attr()
-      accessor value1 = 100; // no attribute
+it('should read and parse the correct values', () => {
+  @element({
+    tagName: 'attr-test-1'
+  })
+  class MyElement extends HTMLElement {
+    @attr()
+    accessor value1 = 100; // no attribute
 
-      @attr()
-      accessor value2 = 0; // number
+    @attr()
+    accessor value2 = 0; // number
 
-      @attr()
-      accessor value3 = false; // boolean
+    @attr()
+    accessor value3 = false; // boolean
 
-      @attr()
-      accessor value4 = 'hello'; // string
-    }
+    @attr()
+    accessor value4 = 'hello'; // string
+  }
 
-    const el = await fixture<MyElement>(
-      html`<attr-test-1 value2="2" value3 value4="world"></attr-test-1>`
-    );
+  const container = document.createElement('div');
+  container.innerHTML = /*html*/ `
+    <attr-test-1 value2="2" value3 value4="world"></attr-test-1>
+  `;
 
-    expect(el.value1).to.equal(100);
-    expect(el.value2).to.equal(2);
-    expect(el.value3).to.equal(true);
-    expect(el.value4).to.equal('world');
-  });
+  document.body.append(container);
 
-  it('should not write falsy props to attributes', async () => {
-    @element({
-      tagName: 'attr-test-2'
-    })
-    class MyElement extends HTMLElement {
-      @attr()
-      accessor value1 = undefined;
+  const el = document.querySelector('attr-test-1') as MyElement;
 
-      @attr()
-      accessor value2 = null;
+  expect(el.value1).to.equal(100);
+  expect(el.value2).to.equal(2);
+  expect(el.value3).to.equal(true);
+  expect(el.value4).to.equal('world');
 
-      @attr()
-      accessor value3 = '';
-    }
+  container.remove();
+});
 
-    const el = await fixture<MyElement>(html`<attr-test-2></attr-test-2>`);
+it('should not write falsy props to attributes', async () => {
+  @element({
+    tagName: 'attr-test-2'
+  })
+  class MyElement extends HTMLElement {
+    @attr()
+    accessor value1 = undefined;
 
-    expect(el.hasAttribute('value1')).to.be.false;
-    expect(el.hasAttribute('value2')).to.be.false;
-    expect(el.hasAttribute('value3')).to.be.false;
-  });
+    @attr()
+    accessor value2 = null;
 
-  it('should update attributes when props are changed', async () => {
-    @element({
-      tagName: 'attr-test-3'
-    })
-    class MyElement extends HTMLElement {
-      @attr()
-      accessor value1 = 'hello'; // no attribute
+    @attr()
+    accessor value3 = '';
+  }
 
-      @attr()
-      accessor value2 = 0; // number
+  const el = new MyElement();
 
-      @attr()
-      accessor value3 = true; // boolean
+  expect(el.hasAttribute('value1')).to.be.false;
+  expect(el.hasAttribute('value2')).to.be.false;
+  expect(el.hasAttribute('value3')).to.be.false;
+});
 
-      @attr()
-      accessor value4 = false; // boolean
-    }
+it('should update attributes when props are changed', async () => {
+  @element({
+    tagName: 'attr-test-3'
+  })
+  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
+  }
+
+  const el = new MyElement();
+
+  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;
+});
 
-    const el = await fixture<MyElement>(html`<attr-test-3></attr-test-3>`);
+it('should normalize attribute names', async () => {
+  const value3 = Symbol('Value from SYMBOL');
 
-    el.value1 = 'world';
-    el.value2 = 100;
-    el.value3 = false;
-    el.value4 = true;
+  @element({
+    tagName: 'attr-test-4'
+  })
+  class MyElement extends HTMLElement {
+    @attr()
+    accessor Value1 = 'hello';
 
-    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;
-  });
+    @attr()
+    accessor ['Value 2'] = 0;
 
-  it('should normalize attribute names', async () => {
-    const value3 = Symbol('Value from SYMBOL');
+    @attr()
+    accessor [value3] = true;
+  }
+
+  const el = new MyElement();
+
+  document.body.append(el);
+
+  expect([...el.attributes].map((attr) => attr.name)).to.deep.equal([
+    'value1',
+    'value-2',
+    'value-from-symbol'
+  ]);
+
+  el.remove();
+});
+
+it('should throw an error for symbols with no description', async () => {
+  expect(() => {
+    const value = Symbol();
 
     @element({
       tagName: 'attr-test-4'
     })
     class MyElement extends HTMLElement {
       @attr()
-      accessor Value1 = 'hello';
-
-      @attr()
-      accessor ['Value 2'] = 0;
-
-      @attr()
-      accessor [value3] = true;
+      accessor [value] = true;
     }
 
-    const el = await fixture<MyElement>(html`<attr-test-4></attr-test-4>`);
-
-    expect([...el.attributes].map((attr) => attr.name)).to.deep.equal([
-      'value1',
-      'value-2',
-      'value-from-symbol'
-    ]);
-  });
-
-  it('should throw an error for symbols with no description', async () => {
-    expect(() => {
-      const value = Symbol();
-
-      @element({
-        tagName: 'attr-test-4'
-      })
-      class MyElement extends HTMLElement {
-        @attr()
-        accessor [value] = true;
-      }
-
-      new MyElement();
-    }).to.throw('Cannot handle Symbol property without description');
-  });
+    new MyElement();
+  }).to.throw('Cannot handle Symbol property without description');
 });

package/src/lib/attr.ts

@@ -1,7 +1,7 @@
 import { metadataStore } from './metadata.js';
 
 export interface AttrOpts {
-  observe?: boolean;
+  observed?: boolean;
 }
 
 export function attr(opts?: AttrOpts) {
@@ -15,7 +15,7 @@ export function attr(opts?: AttrOpts) {
     meta.attrs.push({
       propName: ctx.name,
       attrName,
-      observe: opts?.observe ?? true
+      observe: opts?.observed ?? true
     });
 
     return {

package/src/lib/element.test.ts

@@ -1,93 +1,97 @@
-import { expect, fixture, html as litHtml } from '@open-wc/testing';
+import { expect } 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
-
-      @attr()
-      accessor value2 = 0; // number
-
-      @attr()
-      accessor value3 = true; // boolean
-    }
-
-    const el = await fixture<MyElement>(litHtml`<element-1></element-1>`);
-
-    expect(el.getAttribute('value1')).to.equal('hello');
-    expect(el.getAttribute('value2')).to.equal('0');
-    expect(el.getAttribute('value3')).to.equal('');
-  });
-
-  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({ observe: 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',
-      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 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 value3 = true; // boolean
+  }
+
+  const el = new MyElement();
+
+  document.body.append(el);
+
+  expect(el.getAttribute('value1')).to.equal('hello');
+  expect(el.getAttribute('value2')).to.equal('0');
+  expect(el.getAttribute('value3')).to.equal('');
+
+  el.remove();
+});
+
+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',
+    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>`,
+      {
+        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();
+  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>`);
-  });
+  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>`);
 });

package/src/lib/element.ts

@@ -1,15 +1,11 @@
 import { AttrDef, metadataStore } from './metadata.js';
 import { ShadowResult } from './result.js';
 
-export interface ElementOpts<T> {
+export interface ElementOpts<T extends HTMLElement> {
   tagName?: string;
-  shadow?: Array<ShadowResult | ((el: T) => void)>;
+  shadow?: Array<ShadowResult<T> | ((el: T) => void)>;
 }
 
-export const LifeCycle = {
-  onInit: Symbol('onInit')
-};
-
 export function element<
   Target extends CustomElementConstructor,
   Instance extends InstanceType<Target>
@@ -42,7 +38,7 @@ export function element<
             if (typeof res === 'function') {
               res(this as unknown as Instance);
             } else {
-              res.run(this);
+              res.apply(this as unknown as Instance);
             }
           }
         }
@@ -51,12 +47,8 @@ export function element<
           root(this).addEventListener(event, cb.bind(this));
         }
 
-        if (LifeCycle.onInit in this) {
-          const onInit = Reflect.get(this, LifeCycle.onInit);
-
-          if (typeof onInit === 'function') {
-            onInit();
-          }
+        for (let cb of meta.onReady) {
+          cb.call(this);
         }
       }
 

package/src/lib/lifecycle.test.ts

@@ -0,0 +1,31 @@
+import { assert } from 'chai';
+import { element } from './element.js';
+import { ready } from './lifecycle';
+
+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.ts

@@ -2,7 +2,7 @@ import { ListenerRootSelector, metadataStore } from './metadata.js';
 
 export function listen<This extends HTMLElement>(event: string, root?: ListenerRootSelector) {
   return function listenDecorator(
-    value: (e: Event) => void,
+    value: <T extends Event>(e: T) => void,
     ctx: ClassMethodDecoratorContext<This>
   ) {
     const metadata = metadataStore.read(ctx.metadata);

package/src/lib/metadata.ts

@@ -11,6 +11,7 @@ export type ListenerRootSelector = (el: HTMLElement) => HTMLElement | ShadowRoot
 export class ElementMetadata {
   attrs: AttrDef[] = [];
   listeners = new Map<string, { cb: (e: Event) => void; root: ListenerRootSelector }>();
+  onReady = new Set<Function>();
 }
 
 export class MetadataStore extends WeakMap<object, ElementMetadata> {