@joist/element 4.0.1-next.0 → 4.0.1

package/README.md

@@ -1,42 +1,155 @@
 # 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 {}
 ```
 
-#### Example:
+## Attributes
 
-```TS
-import { tagName, shadow, css, html, attr, listen, element } from '@joist/element';
+Attributes can be managed using the `@attr` decorator. This decorator will read attribute values and and write properties back to attributes;
 
-@element
+```ts
+@element({
+  tagName: 'my-element'
+})
 export class MyElement extends HTMLElement {
-  // define a custom element
-  @tagName static tagName = 'my-element';
-
-  // apply styles to shadow dom
-  @shadow styles = css`
-    :host {
-      display: block;
-      color: red;
-    }
-  `;
-
-  // apply html to shadow dom
-  @shadow template = html`
-    <slot></slot>
-  `;
-
-  // define attributes
-  @attr accessor value = 0;
-
-  // listen for events
-  @listen('click') onClick() {
-    console.log('clicked!')
+  @attr()
+  accessor greeting = 'Hello World';
+}
+```
+
+## HTML and CSS
+
+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. 
+Any new tagged template literal that returns a `ShadowResult` can be used.
+
+```ts
+@element({
+  tagName: 'my-element',
+  shadowDom: [
+    css`
+      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
+  }
+}
+```
+
+## Query
+
+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`
+      <label for="my-input">
+        <slot></slot>
+      </label>
+
+      <input id="my-input" />
+    `
+  ]
+})
+export class MyElement extends HTMLElement {
+  @observe()
+  value: string;
+
+  #input = query('input');
+
+  @effect()
+  onChange() {
+    const input = this.#input({ value: this.value});
+  }
+}
+```
+
+## QueryAll
+
+The `queryAll` function will get all elements that match the given query. A patching function can be passed to update any or all items in the list
+
+```ts
+@element({
+  tagName: 'my-element',
+  shadowDom: [
+    html`
+      <input id="first" />
+      <input id="second" />
+    `
+  ]
+})
+export class MyElement extends HTMLElement {
+  @observe()
+  value: string;
+
+  #inputs = queryAll('input');
+
+  @effect()
+  onChange() {
+    this.#input(() => {
+      return { value: this.value }
+    })
   }
 }
 ```

package/package.json

@@ -1,16 +1,13 @@
 {
   "name": "@joist/element",
-  "version": "4.0.1-next.0",
+  "version": "4.0.1",
   "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 { type AttrChangedCallback, metadataStore } from "./metadata.js";
+
+export function attrChanged(name: string) {
+  return function attrChangedDecorator<This extends HTMLElement>(
+    cb: AttrChangedCallback,
+    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,64 +1,192 @@
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect } from "chai";
 
-import { attr } from './attr.js';
+import { attr } from "./attr.js";
+import { element } from "./element.js";
 
-describe('@attr()', () => {
-  it('should read and parse the correct values', async () => {
-    class MyElement extends HTMLElement {
-      @attr accessor value1 = 100; // no attribute
-      @attr accessor value2 = 0; // number
-      @attr accessor value3 = false; // boolean
-      @attr accessor value4 = 'hello'; // string
-    }
+it("should read and parse the correct values", () => {
+  @element({
+    tagName: "attr-test-1",
+  })
+  class MyElement extends HTMLElement {
+    @attr()
+    accessor value1 = 100; // no attribute
 
-    customElements.define('attr-test-2', MyElement);
+    @attr()
+    accessor value2 = 0; // number
 
-    const el = await fixture<MyElement>(
-      html`<attr-test-2 value2="2" value3 value4="world"></attr-test-2>`
-    );
+    @attr()
+    accessor value3 = false; // boolean
 
-    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 value4 = "hello"; // string
+  }
 
-  it('should not write falsy props to attributes', async () => {
-    class MyElement extends HTMLElement {
-      @attr accessor value1 = undefined;
-      @attr accessor value2 = null;
-      @attr accessor value3 = '';
-    }
+  const container = document.createElement("div");
+  container.innerHTML = /*html*/ `
+    <attr-test-1 value2="2" value3 value4="world"></attr-test-1>
+  `;
+
+  document.body.append(container);
+
+  const el = document.querySelector("attr-test-1") as MyElement;
+
+  expect(el.value1).to.equal(100);
+  expect(el.value2).to.equal(2);
+  expect(el.value3).to.equal(true);
+  expect(el.value4).to.equal("world");
+
+  container.remove();
+});
+
+it("should not write falsy props to attributes", async () => {
+  @element({
+    tagName: "attr-test-2",
+  })
+  class MyElement extends HTMLElement {
+    @attr()
+    accessor value1 = undefined;
+
+    @attr()
+    accessor value2 = null;
+
+    @attr()
+    accessor value3 = "";
+  }
+
+  const el = new MyElement();
+
+  expect(el.hasAttribute("value1")).to.be.false;
+  expect(el.hasAttribute("value2")).to.be.false;
+  expect(el.hasAttribute("value3")).to.be.false;
+});
+
+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;
 
-    customElements.define('attr-test-3', MyElement);
+  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 value2 = "Value 2";
+  const value3 = Symbol("Value from SYMBOL");
+
+  @element({
+    tagName: "attr-test-4",
+  })
+  class MyElement extends HTMLElement {
+    @attr()
+    accessor Value1 = "hello";
+
+    @attr()
+    accessor [value2] = 0;
+
+    @attr()
+    accessor [value3] = true;
+  }
+
+  const el = new MyElement();
 
-    const el = await fixture<MyElement>(html`<attr-test-3></attr-test-3>`);
+  document.body.append(el);
 
-    expect(el.hasAttribute('value1')).to.be.false;
-    expect(el.hasAttribute('value2')).to.be.false;
-    expect(el.hasAttribute('value3')).to.be.false;
-  });
+  expect([...el.attributes].map((attr) => attr.name)).to.deep.equal([
+    "value1",
+    "value-2",
+    "value-from-symbol",
+  ]);
 
-  it('should update attributes when props are changed', async () => {
+  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'; // no attribute
-      @attr accessor value2 = 0; // number
-      @attr accessor value3 = true; // boolean
-      @attr accessor value4 = false; // boolean
+      @attr()
+      accessor [value] = true;
     }
 
-    customElements.define('attr-test-4', MyElement);
+    new MyElement();
+  }).to.throw("Cannot handle Symbol property without description");
+});
+
+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");
 
-    const el = await fixture<MyElement>(html`<attr-test-4></attr-test-4>`);
+  document.body.append(el);
 
-    el.value1 = 'world';
-    el.value2 = 100;
-    el.value3 = false;
-    el.value4 = true;
+  expect(el.value).to.equal("TEST");
 
-    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;
-  });
+  el.remove();
 });

package/src/lib/attr.ts

@@ -1,46 +1,66 @@
-import { metadataStore } from './metadata.js';
-
-export function attr<This extends HTMLElement>(
-  { get, set }: ClassAccessorDecoratorTarget<This, unknown>,
-  ctx: ClassAccessorDecoratorContext<This>
-): ClassAccessorDecoratorResult<This, any> {
-  const name = String(ctx.name);
-  const meta = metadataStore.read(ctx.metadata);
-  meta.attrs.push(name);
-
-  return {
-    set(value: unknown) {
-      if (value === true) {
-        this.setAttribute(name, '');
-      } else if (value === false) {
-        this.removeAttribute(name);
-      } else {
-        this.setAttribute(name, String(value));
-      }
-
-      set.call(this, value);
-    },
-    get() {
-      const ogValue = get.call(this);
-      const attr = this.getAttribute(name);
-
-      if (attr !== null) {
-        // treat as boolean
-        if (attr === '') {
-          return true;
-        }
+import { metadataStore } from "./metadata.js";
+
+export interface AttrOpts {
+  name?: string;
+  observed?: boolean;
+  reflect?: boolean;
+}
+
+export function attr(opts?: AttrOpts) {
+  return function attrDecorator<This extends HTMLElement>(
+    { get, set }: ClassAccessorDecoratorTarget<This, unknown>,
+    ctx: ClassAccessorDecoratorContext<This>,
+  ): ClassAccessorDecoratorResult<This, any> {
+    const attrName = opts?.name ?? parseAttrName(ctx.name);
+    const meta = metadataStore.read<This>(ctx.metadata);
+    const reflect = opts?.reflect ?? true;
+
+    meta.attrs.set(attrName, {
+      propName: ctx.name,
+      observe: opts?.observed ?? true,
+      reflect,
+      getPropValue: get,
+      setPropValue: set,
+    });
+
+    return {
+      set(value: unknown) {
+        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);
 
-        // treat as number
-        if (typeof ogValue === 'number') {
-          return Number(attr);
+            if (this.getAttribute(attrName) !== strValue) {
+              this.setAttribute(attrName, strValue);
+            }
+          }
         }
 
-        // treat as string
-        return attr;
-      }
+        set.call(this, value);
+      },
+    };
+  };
+}
+
+function parseAttrName(val: string | symbol): string {
+  let value: string;
 
-      // no readable value return original
-      return ogValue;
+  if (typeof val === "symbol") {
+    if (val.description) {
+      value = val.description;
+    } else {
+      throw new Error("Cannot handle Symbol property without description");
     }
-  };
+  } else {
+    value = val;
+  }
+
+  return value.toLowerCase().replaceAll(" ", "-");
 }