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

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.3",
+  "version": "4.0.0-next.5",
   "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,86 +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>`
-      ]
-    })
-    class MyElement extends HTMLElement {}
-
-    const el = new MyElement();
-
-    expect(el.shadowRoot!.adoptedStyleSheets.length).to.equal(1);
-    expect(el.shadowRoot!.innerHTML).to.equal(`<slot></slot>`);
-  });
+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 {}
+
+  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>`);
 });

package/src/lib/element.ts

@@ -1,9 +1,9 @@
 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 function element<
@@ -30,13 +30,15 @@ export function element<
         super(...args);
 
         if (opts?.shadow) {
-          this.attachShadow({ mode: 'open' });
+          if (!this.shadowRoot) {
+            this.attachShadow({ mode: 'open' });
+          }
 
           for (let res of opts.shadow) {
             if (typeof res === 'function') {
               res(this as unknown as Instance);
             } else {
-              res.run(this);
+              res.apply(this as unknown as Instance);
             }
           }
         }
@@ -44,13 +46,19 @@ export function element<
         for (let [event, { cb, root }] of meta.listeners) {
           root(this).addEventListener(event, cb.bind(this));
         }
+
+        for (let cb of meta.onReady) {
+          cb.call(this);
+        }
       }
 
       connectedCallback() {
-        reflectAttributeValues(this, meta.attrs);
+        if (this.isConnected) {
+          reflectAttributeValues(this, meta.attrs);
 
-        if (super.connectedCallback) {
-          super.connectedCallback();
+          if (super.connectedCallback) {
+            super.connectedCallback();
+          }
         }
       }
     };

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/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> {

package/src/lib/query.test.ts

@@ -0,0 +1,53 @@
+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',
+    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();
+
+  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');
+  }
+
+  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');
+});

package/src/lib/query.ts

@@ -0,0 +1,37 @@
+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, updates?: Partial<HTMLElementTagNameMap[K]>) {
+    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');
+    }
+
+    if (updates) {
+      for (let update in updates) {
+        Reflect.set(res, update, updates[update]);
+      }
+    }
+
+    return res;
+  };
+}