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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/element",
-  "version": "4.0.0-next.41",
+  "version": "4.0.0-next.44",
   "type": "module",
   "main": "./target/lib.js",
   "module": "./target/lib.js",

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

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

package/src/lib/attr-changed.ts

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

package/src/lib/attr.test.ts

@@ -1,11 +1,11 @@
-import { expect } from 'chai';
+import { expect } from "chai";
 
-import { attr } from './attr.js';
-import { element } from './element.js';
+import { attr } from "./attr.js";
+import { element } from "./element.js";
 
-it('should read and parse the correct values', () => {
+it("should read and parse the correct values", () => {
   @element({
-    tagName: 'attr-test-1'
+    tagName: "attr-test-1",
   })
   class MyElement extends HTMLElement {
     @attr()
@@ -18,29 +18,29 @@ it('should read and parse the correct values', () => {
     accessor value3 = false; // boolean
 
     @attr()
-    accessor value4 = 'hello'; // string
+    accessor value4 = "hello"; // string
   }
 
-  const container = document.createElement('div');
+  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;
+  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');
+  expect(el.value4).to.equal("world");
 
   container.remove();
 });
 
-it('should not write falsy props to attributes', async () => {
+it("should not write falsy props to attributes", async () => {
   @element({
-    tagName: 'attr-test-2'
+    tagName: "attr-test-2",
   })
   class MyElement extends HTMLElement {
     @attr()
@@ -50,23 +50,23 @@ it('should not write falsy props to attributes', async () => {
     accessor value2 = null;
 
     @attr()
-    accessor value3 = '';
+    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;
+  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 () => {
+it("should update attributes when props are changed", async () => {
   @element({
-    tagName: 'attr-test-3'
+    tagName: "attr-test-3",
   })
   class MyElement extends HTMLElement {
     @attr()
-    accessor value1 = 'hello'; // no attribute
+    accessor value1 = "hello"; // no attribute
 
     @attr()
     accessor value2 = 0; // number
@@ -80,29 +80,30 @@ it('should update attributes when props are changed', async () => {
 
   const el = new MyElement();
 
-  el.value1 = 'world';
+  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');
+it("should normalize attribute names", async () => {
+  const value2 = "Value 2";
+  const value3 = Symbol("Value from SYMBOL");
 
   @element({
-    tagName: 'attr-test-4'
+    tagName: "attr-test-4",
   })
   class MyElement extends HTMLElement {
     @attr()
-    accessor Value1 = 'hello';
+    accessor Value1 = "hello";
 
     @attr()
-    accessor ['Value 2'] = 0;
+    accessor [value2] = 0;
 
     @attr()
     accessor [value3] = true;
@@ -113,20 +114,20 @@ it('should normalize attribute names', async () => {
   document.body.append(el);
 
   expect([...el.attributes].map((attr) => attr.name)).to.deep.equal([
-    'value1',
-    'value-2',
-    'value-from-symbol'
+    "value1",
+    "value-2",
+    "value-from-symbol",
   ]);
 
   el.remove();
 });
 
-it('should throw an error for symbols with no description', async () => {
+it("should throw an error for symbols with no description", async () => {
   expect(() => {
     const value = Symbol();
 
     @element({
-      tagName: 'attr-test-4'
+      tagName: "attr-test-4",
     })
     class MyElement extends HTMLElement {
       @attr()
@@ -134,58 +135,58 @@ it('should throw an error for symbols with no description', async () => {
     }
 
     new MyElement();
-  }).to.throw('Cannot handle Symbol property without description');
+  }).to.throw("Cannot handle Symbol property without description");
 });
 
-it('should not reflect property to attribute', async () => {
+it("should not reflect property to attribute", async () => {
   @element({
-    tagName: 'attr-test-5'
+    tagName: "attr-test-5",
   })
   class MyElement extends HTMLElement {
     @attr({ reflect: false })
-    accessor value = 'foo';
+    accessor value = "foo";
   }
 
   const el = new MyElement();
-  el.value = 'bar';
+  el.value = "bar";
 
-  expect(el.value).to.equal('bar');
+  expect(el.value).to.equal("bar");
 
-  expect(el.hasAttribute('value')).to.be.false;
+  expect(el.hasAttribute("value")).to.be.false;
 });
 
-it('non reflective attributes should still read new attribute values', async () => {
+it("non reflective attributes should still read new attribute values", async () => {
   @element({
-    tagName: 'attr-test-6'
+    tagName: "attr-test-6",
   })
   class MyElement extends HTMLElement {
     @attr({ reflect: false })
-    accessor value = 'foo';
+    accessor value = "foo";
   }
 
   const el = new MyElement();
-  el.setAttribute('value', 'bar');
+  el.setAttribute("value", "bar");
 
-  expect(el.value).to.equal('bar');
+  expect(el.value).to.equal("bar");
 });
 
-it('should allow a manually defined attribute name', async () => {
+it("should allow a manually defined attribute name", async () => {
   @element({
-    tagName: 'attr-test-7'
+    tagName: "attr-test-7",
   })
   class MyElement extends HTMLElement {
     @attr({
-      name: 'aria-label'
+      name: "aria-label",
     })
-    accessor value = '';
+    accessor value = "";
   }
 
   const el = new MyElement();
-  el.setAttribute('aria-label', 'TEST');
+  el.setAttribute("aria-label", "TEST");
 
   document.body.append(el);
 
-  expect(el.value).to.equal('TEST');
+  expect(el.value).to.equal("TEST");
 
   el.remove();
 });

package/src/lib/attr.ts

@@ -1,4 +1,4 @@
-import { metadataStore } from './metadata.js';
+import { metadataStore } from "./metadata.js";
 
 export interface AttrOpts {
   name?: string;
@@ -9,7 +9,7 @@ export interface AttrOpts {
 export function attr(opts?: AttrOpts) {
   return function attrDecorator<This extends HTMLElement>(
     { get, set }: ClassAccessorDecoratorTarget<This, unknown>,
-    ctx: ClassAccessorDecoratorContext<This>
+    ctx: ClassAccessorDecoratorContext<This>,
   ): ClassAccessorDecoratorResult<This, any> {
     const attrName = opts?.name ?? parseAttrName(ctx.name);
     const meta = metadataStore.read<This>(ctx.metadata);
@@ -20,7 +20,7 @@ export function attr(opts?: AttrOpts) {
       observe: opts?.observed ?? true,
       reflect,
       getPropValue: get,
-      setPropValue: set
+      setPropValue: set,
     });
 
     return {
@@ -28,7 +28,7 @@ export function attr(opts?: AttrOpts) {
         if (reflect) {
           if (value === true) {
             if (!this.hasAttribute(attrName)) {
-              this.setAttribute(attrName, '');
+              this.setAttribute(attrName, "");
             }
           } else if (value === false) {
             if (this.hasAttribute(attrName)) {
@@ -44,7 +44,7 @@ export function attr(opts?: AttrOpts) {
         }
 
         set.call(this, value);
-      }
+      },
     };
   };
 }
@@ -52,15 +52,15 @@ export function attr(opts?: AttrOpts) {
 function parseAttrName(val: string | symbol): string {
   let value: string;
 
-  if (typeof val === 'symbol') {
+  if (typeof val === "symbol") {
     if (val.description) {
       value = val.description;
     } else {
-      throw new Error('Cannot handle Symbol property without description');
+      throw new Error("Cannot handle Symbol property without description");
     }
   } else {
     value = val;
   }
 
-  return value.toLowerCase().replaceAll(' ', '-');
+  return value.toLowerCase().replaceAll(" ", "-");
 }

package/src/lib/element.test.ts

@@ -1,16 +1,16 @@
-import { expect, assert } from 'chai';
+import { assert, expect } from "chai";
 
-import { attr } from './attr.js';
-import { element } from './element.js';
-import { css, html } from './tags.js';
+import { attr } from "./attr.js";
+import { element } from "./element.js";
+import { css, html } from "./tags.js";
 
-it('should write default value to attribute', async () => {
+it("should write default value to attribute", async () => {
   @element({
-    tagName: 'element-1'
+    tagName: "element-1",
   })
   class MyElement extends HTMLElement {
     @attr()
-    accessor value1 = 'hello'; // no attribute
+    accessor value1 = "hello"; // no attribute
 
     @attr()
     accessor value2 = 0; // number
@@ -19,17 +19,17 @@ it('should write default value to attribute', async () => {
     accessor value3 = true; // boolean
 
     @attr({ reflect: false })
-    accessor value4 = 'foo';
+    accessor value4 = "foo";
   }
 
   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('');
-  expect(el.getAttribute('value4')).to.equal(null);
+  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);
 
   el.remove();
 });
@@ -60,10 +60,10 @@ it('should write default value to attribute', async () => {
 //   ]);
 // });
 
-it('should attach shadow root when the shadow property exists', async () => {
+it("should attach shadow root when the shadow property exists", async () => {
   @element({
-    tagName: 'element-3',
-    shadowDom: []
+    tagName: "element-3",
+    shadowDom: [],
   })
   class MyElement extends HTMLElement {}
 
@@ -72,9 +72,9 @@ it('should attach shadow root when the shadow property exists', async () => {
   expect(el.shadowRoot).to.be.instanceOf(ShadowRoot);
 });
 
-it('should apply html and css', async () => {
+it("should apply html and css", async () => {
   @element({
-    tagName: 'element-4',
+    tagName: "element-4",
     shadowDom: [
       css`
         :host {
@@ -84,30 +84,30 @@ it('should apply html and css', async () => {
       html`<slot></slot>`,
       {
         apply(el) {
-          const div = document.createElement('div');
-          div.innerHTML = 'hello world';
+          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>`);
+  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 () => {
+it("should the correct shadow dom mode", async () => {
   @element({
-    tagName: 'element-5',
+    tagName: "element-5",
     shadowDom: [],
     shadowDomOpts: {
-      mode: 'closed'
-    }
+      mode: "closed",
+    },
   })
   class MyElement extends HTMLElement {}
 

package/src/lib/element.ts

@@ -1,5 +1,5 @@
-import { AttrMetadata, metadataStore } from './metadata.js';
-import { ShadowResult } from './result.js';
+import { type AttrMetadata, metadataStore } from "./metadata.js";
+import type { ShadowResult } from "./result.js";
 
 export interface ElementOpts {
   tagName?: string;
@@ -27,27 +27,31 @@ export function element<T extends ElementConstructor>(opts?: ElementOpts) {
       [Base.name]: class extends Base {
         static observedAttributes: string[] = Array.from(meta.attrs.keys());
 
-        #removeListeners: Set<Function> = new Set();
+        #abortController: AbortController | null = null;
 
         constructor(...args: any[]) {
           super(...args);
 
           if (opts?.shadowDom) {
             if (!this.shadowRoot) {
-              this.attachShadow(opts.shadowDomOpts ?? { mode: 'open' });
+              this.attachShadow(opts.shadowDomOpts ?? { mode: "open" });
             }
 
-            for (let res of opts.shadowDom) {
+            for (const res of opts.shadowDom) {
               res.apply(this);
             }
           }
 
-          for (let cb of meta.onReady) {
+          for (const cb of meta.onReady) {
             cb.call(this);
           }
         }
 
-        attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        attributeChangedCallback(
+          name: string,
+          oldValue: string,
+          newValue: string,
+        ) {
           const attr = meta.attrs.get(name);
           const cbs = meta.attrChanges.get(name);
 
@@ -55,10 +59,10 @@ export function element<T extends ElementConstructor>(opts?: ElementOpts) {
             if (oldValue !== newValue) {
               const ogValue = attr.getPropValue.call(this);
 
-              if (newValue === '') {
+              if (newValue === "") {
                 // treat as boolean
                 attr.setPropValue.call(this, true);
-              } else if (typeof ogValue === 'number') {
+              } else if (typeof ogValue === "number") {
                 // treat as number
                 attr.setPropValue.call(this, Number(newValue));
               } else {
@@ -68,29 +72,29 @@ export function element<T extends ElementConstructor>(opts?: ElementOpts) {
             }
 
             if (cbs) {
-              for (let cb of cbs) {
+              for (const cb of cbs) {
                 cb.call(this, oldValue, newValue);
               }
             }
 
-            if (super.attributeChangedCallback) {
-              super.attributeChangedCallback(name, oldValue, newValue);
+            if (attr.observe) {
+              if (super.attributeChangedCallback) {
+                super.attributeChangedCallback(name, oldValue, newValue);
+              }
             }
           }
         }
 
         connectedCallback() {
           if (this.isConnected) {
-            for (let { event, cb, selector } of meta.listeners) {
+            for (const { event, cb, selector } of meta.listeners) {
               const root = selector(this);
 
               if (root) {
-                const thisCb = cb.bind(this);
-
-                root.addEventListener(event, thisCb);
+                this.#abortController = new AbortController();
 
-                this.#removeListeners.add(() => {
-                  root.removeEventListener(event, thisCb);
+                root.addEventListener(event, cb.bind(this), {
+                  signal: this.#abortController.signal,
                 });
               } else {
                 throw new Error(`could not add listener to ${root}`);
@@ -106,33 +110,37 @@ export function element<T extends ElementConstructor>(opts?: ElementOpts) {
         }
 
         disconnectedCallback(): void {
-          for (let remove of this.#removeListeners) {
-            remove();
+          if (this.#abortController) {
+            this.#abortController.abort();
+            this.#abortController = null;
           }
 
           if (super.disconnectedCallback) {
             super.disconnectedCallback();
           }
         }
-      }
+      },
     };
 
     return def[Base.name];
   };
 }
 
-function reflectAttributeValues<T extends HTMLElement>(el: T, attrs: AttrMetadata) {
-  for (let [attrName, { getPropValue, reflect }] of attrs) {
+function reflectAttributeValues<T extends HTMLElement>(
+  el: T,
+  attrs: AttrMetadata,
+) {
+  for (const [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 !== null && value !== undefined && value !== "") {
+        if (typeof value === "boolean") {
           if (value === true) {
             // set boolean attribute
             if (!el.hasAttribute(attrName)) {
-              el.setAttribute(attrName, '');
+              el.setAttribute(attrName, "");
             }
           }
         } else {

package/src/lib/lifecycle.test.ts

@@ -1,24 +1,24 @@
-import { assert } from 'chai';
-import { element } from './element.js';
-import { ready } from './lifecycle.js';
+import { assert } from "chai";
+import { element } from "./element.js";
+import { ready } from "./lifecycle.js";
 
-it('should call all callbacks when template is ready', () => {
+it("should call all callbacks when template is ready", () => {
   @element({
-    tagName: 'template-ready-1'
+    tagName: "template-ready-1",
   })
   class MyElement extends HTMLElement {
     callCount: Record<string, number> = {};
 
     @ready()
     onTemplateReady1() {
-      this.callCount['onTemplateReady1'] ??= 0;
-      this.callCount['onTemplateReady1']++;
+      this.callCount.onTemplateReady1 ??= 0;
+      this.callCount.onTemplateReady1++;
     }
 
     @ready()
     onTemplateReady2() {
-      this.callCount['onTemplateReady2'] ??= 0;
-      this.callCount['onTemplateReady2']++;
+      this.callCount.onTemplateReady2 ??= 0;
+      this.callCount.onTemplateReady2++;
     }
   }
 
@@ -26,6 +26,6 @@ it('should call all callbacks when template is ready', () => {
 
   assert.deepEqual(el.callCount, {
     onTemplateReady1: 1,
-    onTemplateReady2: 1
+    onTemplateReady2: 1,
   });
 });

package/src/lib/lifecycle.ts

@@ -1,7 +1,10 @@
-import { metadataStore } from './metadata.js';
+import { metadataStore } from "./metadata.js";
 
 export function ready() {
-  return function readyDecorator(val: Function, ctx: ClassMethodDecoratorContext): void {
+  return function readyDecorator(
+    val: () => void,
+    ctx: ClassMethodDecoratorContext,
+  ): void {
     const metadata = metadataStore.read(ctx.metadata);
 
     metadata.onReady.add(val);