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

package/README.md

@@ -1,39 +1,126 @@
 # Element
 
-Create a shadow root and apply styles and html as defined
+Utilities for building web compnennts. Especially targeted at
 
-#### Installation:
+## Table of Contents
+
+- [Installation](#installation)
+- [Custom Element](#custom-element)
+- [Attributes](#attributes)
+- [Styles](#styles)
+- [Listeners](#listeners)
+- [Queries](#queries)
+
+## Installation
 
 ```BASH
-npm i @joist/element
+npm i @joist/element@next
+```
+
+## Custom Element
+
+To define a custom element decorate your custom element class and add a tagName
+
+```ts
+@element({
+  tagName: 'my-element'
+})
+export class MyElement extends HTMLElement {}
+```
+
+## Attributes
+
+Attributes can be managed using the `@attr` decorator. This decorator will read attribute values and and write properties back to attributes;
+
+```ts
+@element({
+  tagName: 'my-element'
+})
+export class MyElement extends HTMLElement {
+  @attr()
+  accessor greeting = 'Hello World';
+}
 ```
 
-#### Example:
+## HTML and CSS
 
-```TS
-import { tagName, css, html, attr, listen, element } from '@joist/element';
+HTML templates can be applied by passing the result of the `html` tag to the shaodw list.
+CSS can be applied by passing the result of the `css` tag to the shadow list.
 
+```ts
 @element({
   tagName: 'my-element',
-  shadow: [
+  shadowDom: [
     css`
-      :host {
-        display: block;
+      h1 {
         color: red;
       }
     `,
+    html`<h1>Hello World</h1>`
+  ]
+})
+export class MyElement extends HTMLElement {}
+```
+
+## Listeners
+
+The `@listen` decorator allows you to easy setup event listeners. By default the listener will be attached to the shadow root if it exists or the host element if it doesn't. This can be customized by pass a selector function to the decorator
+
+```ts
+@element({
+  tagName: 'my-element',
+  shadowDom: []
+})
+export class MyElement extends HTMLElement {
+  @listen('eventname')
+  onEventName1() {
+    // all listener to the shadow root
+  }
+
+  @listen('eventname', (host) => host)
+  onEventName2() {
+    // all listener to the host element
+  }
+
+  @listen('eventname', (host) => host.querySelector('button'))
+  onEventName3() {
+    // add listener to a button found in the light dom
+  }
+
+  @listen('eventname', '#test')
+  onEventName4() {
+    // add listener to element with the id of "test" that is found in the shadow dom
+  }
+}
+```
+
+## Queries
+
+The `query` function will query for a particular element and allow you to easily patch that element with new properties.
+
+```ts
+@element({
+  tagName: 'my-element',
+  shadowDom: [
     html`
-      <slot></slot>
+      <label for="my-input">
+        <slot></slot>
+      </label>
+
+      <input id="my-input" />
     `
   ]
 })
 export class MyElement extends HTMLElement {
-  @attr()
-  accessor value = 0;
+  @observe()
+  value: string;
+
+  #input = query('input');
 
-  @listen('click')
-  onClick() {
-    console.log('clicked!')
+  @effect()
+  onChange() {
+    const input = this.#input();
+    input.value = this.value;
   }
 }
 ```

package/package.json

@@ -1,16 +1,13 @@
 {
   "name": "@joist/element",
-  "version": "4.0.0-next.4",
+  "version": "4.0.0-next.41",
   "type": "module",
   "main": "./target/lib.js",
   "module": "./target/lib.js",
   "exports": {
-    ".": {
-      "import": "./target/lib.js"
-    },
-    "./*": {
-      "import": "./target/lib/*.js"
-    }
+    ".": "./target/lib.js",
+    "./*": "./target/lib/*",
+    "./package.json": "./package.json"
   },
   "files": [
     "src",
@@ -20,7 +17,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 +28,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 +54,7 @@
     "test": {
       "command": "wtr --config wtr.config.mjs",
       "files": [
+        "vitest.config.js",
         "target/**"
       ],
       "output": [],

package/src/lib/attr-changed.test.ts

@@ -0,0 +1,34 @@
+import { assert } from 'chai';
+
+import { attrChanged } from './attr-changed.js';
+import { attr } from './attr.js';
+import { element } from './element.js';
+
+it('should call specific attrbute callback', () => {
+  let args: string[] = [];
+
+  @element({
+    tagName: 'attr-changed-1'
+  })
+  class MyElement extends HTMLElement {
+    @attr()
+    accessor test = 'hello';
+
+    @attrChanged('test')
+    onTestChanged(oldValue: string, newValue: string) {
+      args = [oldValue, newValue];
+    }
+  }
+
+  const el = new MyElement();
+
+  document.body.append(el);
+
+  assert.deepEqual(args, [null, 'hello']);
+
+  el.setAttribute('test', 'world');
+
+  assert.deepEqual(args, ['hello', 'world']);
+
+  el.remove();
+});

package/src/lib/attr-changed.ts

@@ -0,0 +1,15 @@
+import { metadataStore } from './metadata.js';
+
+export function attrChanged(name: string) {
+  return function attrChangedDecorator<This extends HTMLElement>(
+    cb: Function,
+    ctx: ClassMethodDecoratorContext<This>
+  ): void {
+    const meta = metadataStore.read(ctx.metadata);
+    const val = meta.attrChanges.get(name) ?? new Set();
+
+    val.add(cb);
+
+    meta.attrChanges.set(name, val);
+  };
+}

package/src/lib/attr.test.ts

@@ -1,129 +1,191 @@
-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 = await fixture<MyElement>(html`<attr-test-3></attr-test-3>`);
+  const el = new MyElement();
 
-    el.value1 = 'world';
-    el.value2 = 100;
-    el.value3 = false;
-    el.value4 = true;
+  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;
-  });
+  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;
+});
+
+it('should normalize attribute names', async () => {
+  const value3 = Symbol('Value from SYMBOL');
+
+  @element({
+    tagName: 'attr-test-4'
+  })
+  class MyElement extends HTMLElement {
+    @attr()
+    accessor Value1 = 'hello';
+
+    @attr()
+    accessor ['Value 2'] = 0;
+
+    @attr()
+    accessor [value3] = true;
+  }
+
+  const el = new MyElement();
+
+  document.body.append(el);
 
-  it('should normalize attribute names', async () => {
-    const value3 = Symbol('Value from SYMBOL');
+  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';
+      accessor [value] = true;
+    }
 
-      @attr()
-      accessor ['Value 2'] = 0;
+    new MyElement();
+  }).to.throw('Cannot handle Symbol property without description');
+});
 
-      @attr()
-      accessor [value3] = true;
-    }
+it('should not reflect property to attribute', async () => {
+  @element({
+    tagName: 'attr-test-5'
+  })
+  class MyElement extends HTMLElement {
+    @attr({ reflect: false })
+    accessor value = 'foo';
+  }
+
+  const el = new MyElement();
+  el.value = 'bar';
+
+  expect(el.value).to.equal('bar');
+
+  expect(el.hasAttribute('value')).to.be.false;
+});
+
+it('non reflective attributes should still read new attribute values', async () => {
+  @element({
+    tagName: 'attr-test-6'
+  })
+  class MyElement extends HTMLElement {
+    @attr({ reflect: false })
+    accessor value = 'foo';
+  }
+
+  const el = new MyElement();
+  el.setAttribute('value', 'bar');
+
+  expect(el.value).to.equal('bar');
+});
+
+it('should allow a manually defined attribute name', async () => {
+  @element({
+    tagName: 'attr-test-7'
+  })
+  class MyElement extends HTMLElement {
+    @attr({
+      name: 'aria-label'
+    })
+    accessor value = '';
+  }
+
+  const el = new MyElement();
+  el.setAttribute('aria-label', 'TEST');
+
+  document.body.append(el);
+
+  expect(el.value).to.equal('TEST');
 
-    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');
-  });
+  el.remove();
 });

package/src/lib/attr.ts

@@ -1,7 +1,9 @@
 import { metadataStore } from './metadata.js';
 
 export interface AttrOpts {
-  observe?: boolean;
+  name?: string;
+  observed?: boolean;
+  reflect?: boolean;
 }
 
 export function attr(opts?: AttrOpts) {
@@ -9,48 +11,39 @@ export function attr(opts?: AttrOpts) {
     { get, set }: ClassAccessorDecoratorTarget<This, unknown>,
     ctx: ClassAccessorDecoratorContext<This>
   ): ClassAccessorDecoratorResult<This, any> {
-    const attrName = parseAttrName(ctx.name);
-    const meta = metadataStore.read(ctx.metadata);
+    const attrName = opts?.name ?? parseAttrName(ctx.name);
+    const meta = metadataStore.read<This>(ctx.metadata);
+    const reflect = opts?.reflect ?? true;
 
-    meta.attrs.push({
+    meta.attrs.set(attrName, {
       propName: ctx.name,
-      attrName,
-      observe: opts?.observe ?? true
+      observe: opts?.observed ?? true,
+      reflect,
+      getPropValue: get,
+      setPropValue: set
     });
 
     return {
       set(value: unknown) {
-        if (value === true) {
-          this.setAttribute(attrName, '');
-        } else if (value === false) {
-          this.removeAttribute(attrName);
-        } else {
-          this.setAttribute(attrName, String(value));
-        }
-
-        set.call(this, value);
-      },
-      get() {
-        const ogValue = get.call(this);
-        const attr = this.getAttribute(attrName);
+        if (reflect) {
+          if (value === true) {
+            if (!this.hasAttribute(attrName)) {
+              this.setAttribute(attrName, '');
+            }
+          } else if (value === false) {
+            if (this.hasAttribute(attrName)) {
+              this.removeAttribute(attrName);
+            }
+          } else {
+            const strValue = String(value);
 
-        if (attr !== null) {
-          // treat as boolean
-          if (attr === '') {
-            return true;
+            if (this.getAttribute(attrName) !== strValue) {
+              this.setAttribute(attrName, strValue);
+            }
           }
-
-          // treat as number
-          if (typeof ogValue === 'number') {
-            return Number(attr);
-          }
-
-          // treat as string
-          return attr;
         }
 
-        // no readable value return original
-        return ogValue;
+        set.call(this, value);
       }
     };
   };