@joist/element 4.2.3-next.2 → 4.2.3-next.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/element",
-  "version": "4.2.3-next.2",
+  "version": "4.2.3-next.20",
   "type": "module",
   "main": "./target/lib.js",
   "module": "./target/lib.js",
@@ -13,7 +13,9 @@
     "src",
     "target"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "**/define.js"
+  ],
   "description": "Intelligently apply styles to WebComponents",
   "repository": {
     "type": "git",

package/src/lib/attr.test.ts

@@ -1,4 +1,5 @@
-import { expect } from "chai";
+import { expect, assert } from "chai";
+import { effect, observe } from "@joist/observable";
 
 import { attr } from "./attr.js";
 import { element } from "./element.js";
@@ -138,23 +139,6 @@ it("should throw an error for symbols with no description", async () => {
   }).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",
@@ -190,3 +174,70 @@ it("should allow a manually defined attribute name", async () => {
 
   el.remove();
 });
+
+it("should update property when attribute changes", async () => {
+  @element({
+    tagName: "attr-test-8",
+  })
+  class MyElement extends HTMLElement {
+    @attr()
+    accessor value = "foo";
+
+    @attr()
+    accessor count = 0;
+
+    @attr()
+    accessor enabled = false;
+  }
+
+  const el = new MyElement();
+  document.body.append(el);
+
+  // Test string property
+  el.setAttribute("value", "bar");
+  expect(el.value).to.equal("bar");
+
+  // Test number property
+  el.setAttribute("count", "42");
+  expect(el.count).to.equal(42);
+
+  // Test boolean property
+  el.setAttribute("enabled", "");
+  expect(el.enabled).to.equal(true);
+
+  el.removeAttribute("enabled");
+  expect(el.enabled).to.equal(false);
+
+  el.remove();
+});
+
+it("setters should be called when attributes change", async () => {
+  let callCount = 0;
+
+  @element({
+    tagName: "attr-test-9",
+  })
+  class MyElement extends HTMLElement {
+    @attr()
+    @observe()
+    accessor value = "foo";
+
+    @effect()
+    onValueChange() {
+      callCount++;
+    }
+  }
+
+  const el = new MyElement();
+  document.body.append(el);
+
+  el.setAttribute("value", "bar");
+
+  // needs to wait for the mutation observer to run
+  await Promise.resolve();
+  await Promise.resolve();
+
+  assert.equal(callCount, 1);
+
+  el.remove();
+});

package/src/lib/attr.ts

@@ -6,9 +6,9 @@ export interface AttrOpts {
   reflect?: boolean;
 }
 
-export function attr(opts?: AttrOpts) {
-  return function attrDecorator<This extends HTMLElement>(
-    { get, set }: ClassAccessorDecoratorTarget<This, unknown>,
+export function attr<This extends HTMLElement>(opts?: AttrOpts) {
+  return function attrDecorator(
+    base: ClassAccessorDecoratorTarget<This, unknown>,
     ctx: ClassAccessorDecoratorContext<This>,
   ): ClassAccessorDecoratorResult<This, any> {
     const attrName = opts?.name ?? parseAttrName(ctx.name);
@@ -19,11 +19,29 @@ export function attr(opts?: AttrOpts) {
       propName: ctx.name,
       observe: opts?.observed ?? true,
       reflect,
-      getPropValue: get,
-      setPropValue: set,
+      access: base,
     });
 
     return {
+      get() {
+        const ogValue = base.get.call(this);
+
+        if (typeof ogValue === "boolean") {
+          return this.hasAttribute(attrName);
+        }
+
+        const attrValue = this.getAttribute(attrName);
+
+        if (attrValue === null) {
+          return ogValue;
+        }
+
+        if (typeof ogValue === "number") {
+          return Number(attrValue);
+        }
+
+        return attrValue;
+      },
       set(value: unknown) {
         if (reflect) {
           if (value === true) {
@@ -43,7 +61,7 @@ export function attr(opts?: AttrOpts) {
           }
         }
 
-        set.call(this, value);
+        base.set.call(this, value);
       },
     };
   };

package/src/lib/element.test.ts

@@ -34,31 +34,39 @@ it("should write default value to attribute", async () => {
   el.remove();
 });
 
-// TODO: Figure out test
-// 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 register attributes", async () => {
+  const observedAttrs: string[] = [];
+
+  @element({
+    tagName: "element-2",
+  })
+  class MyElement extends HTMLElement {
+    @attr()
+    accessor value1 = "hello";
+
+    @attr()
+    accessor value2 = 0;
+
+    @attr()
+    accessor value3 = true;
+
+    @attr({ observed: false })
+    accessor value4 = "hello world";
+
+    attributeChangedCallback(name: string) {
+      observedAttrs.push(name);
+    }
+  }
+
+  const el = new MyElement();
+
+  el.setAttribute("value1", "foo");
+  el.setAttribute("value2", "1");
+  el.setAttribute("value3", "false");
+  el.setAttribute("value4", "bar");
+
+  expect(observedAttrs).to.deep.equal(["value1", "value2", "value3"]);
+});
 
 it("should attach shadow root when the shadow property exists", async () => {
   @element({

package/src/lib/element.ts

@@ -47,28 +47,27 @@ export function element<T extends ElementConstructor>(opts?: ElementOpts) {
           }
         }
 
-        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);
 
           if (attr) {
             if (oldValue !== newValue) {
-              const ogValue = attr.getPropValue.call(this);
+              const sourceValue = attr.access.get.call(this);
+              let value: string | number | boolean;
 
-              if (newValue === "") {
+              if (typeof sourceValue === "boolean") {
                 // treat as boolean
-                attr.setPropValue.call(this, true);
-              } else if (typeof ogValue === "number") {
+                value = newValue !== null;
+              } else if (typeof sourceValue === "number") {
                 // treat as number
-                attr.setPropValue.call(this, Number(newValue));
+                value = Number(newValue);
               } else {
                 // treat as string
-                attr.setPropValue.call(this, newValue);
+                value = newValue;
               }
+
+              attr.access.set.call(this, value);
             }
 
             if (cbs) {
@@ -86,13 +85,13 @@ export function element<T extends ElementConstructor>(opts?: ElementOpts) {
         }
 
         connectedCallback() {
-          if (this.isConnected) {
+          if (!this.#abortController) {
+            this.#abortController = new AbortController();
+
             for (const { event, cb, selector } of meta.listeners) {
               const root = selector(this);
 
               if (root) {
-                this.#abortController = new AbortController();
-
                 root.addEventListener(event, cb.bind(this), {
                   signal: this.#abortController.signal,
                 });
@@ -100,12 +99,12 @@ export function element<T extends ElementConstructor>(opts?: ElementOpts) {
                 throw new Error(`could not add listener to ${root}`);
               }
             }
+          }
 
-            reflectAttributeValues(this, meta.attrs);
+          reflectAttributeValues(this, meta.attrs);
 
-            if (super.connectedCallback) {
-              super.connectedCallback();
-            }
+          if (super.connectedCallback) {
+            super.connectedCallback();
           }
         }
 
@@ -126,13 +125,10 @@ export function element<T extends ElementConstructor>(opts?: ElementOpts) {
   };
 }
 
-function reflectAttributeValues<T extends HTMLElement>(
-  el: T,
-  attrs: AttrMetadata,
-) {
-  for (const [attrName, { getPropValue, reflect }] of attrs) {
+function reflectAttributeValues<T extends HTMLElement>(el: T, attrs: AttrMetadata) {
+  for (const [attrName, { access, reflect }] of attrs) {
     if (reflect) {
-      const value = getPropValue.call(el);
+      const value = access.get.call(el);
 
       // reflect values back to attributes
       if (value !== null && value !== undefined && value !== "") {
@@ -143,7 +139,8 @@ function reflectAttributeValues<T extends HTMLElement>(
               el.setAttribute(attrName, "");
             }
           }
-        } else {
+        } else if (!el.hasAttribute(attrName)) {
+          // only set parent attribute if it doesn't exist
           // set key/value attribute
           const strValue = String(value);
 

package/src/lib/listen.test.ts

@@ -102,3 +102,78 @@ describe("@listen()", () => {
     el.remove();
   });
 });
+
+it("should remove event listeners during cleanup", () => {
+  let clickCount = 0;
+
+  @element({
+    tagName: "listener-cleanup",
+    shadowDom: [],
+  })
+  class MyElement extends HTMLElement {
+    @listen("click")
+    onClick1() {
+      clickCount++;
+    }
+
+    @listen("click")
+    onClick2() {
+      clickCount++;
+    }
+  }
+
+  const el = new MyElement();
+  document.body.append(el);
+
+  // First click should increment counter
+  el.shadowRoot?.dispatchEvent(new Event("click"));
+  assert.equal(clickCount, 2);
+
+  // Remove element which should cleanup listeners
+  el.remove();
+
+  // Second click after removal should not increment counter
+  el.shadowRoot?.dispatchEvent(new Event("click"));
+  assert.equal(clickCount, 2);
+});
+
+it("should not add event listeners multiple times when element is moved", () => {
+  let clickCount = 0;
+
+  @element({
+    tagName: "listener-move",
+    shadowDom: [],
+  })
+  class MyElement extends HTMLElement {
+    @listen("click")
+    onClick() {
+      clickCount++;
+    }
+  }
+
+  const el = new MyElement();
+  const container1 = document.createElement("div");
+  const container2 = document.createElement("div");
+
+  document.body.append(container1);
+  document.body.append(container2);
+
+  // Add to first container
+  container1.append(el);
+
+  // Click should increment once
+  el.shadowRoot?.dispatchEvent(new Event("click"));
+  assert.equal(clickCount, 1);
+
+  // Move to second container
+  container2.append(el);
+
+  // Click should still only increment once
+  el.shadowRoot?.dispatchEvent(new Event("click"));
+  assert.equal(clickCount, 2);
+
+  // Cleanup
+  el.remove();
+  container1.remove();
+  container2.remove();
+});

package/src/lib/metadata.ts

@@ -4,8 +4,10 @@ export interface AttrDef {
   propName: string | symbol;
   observe: boolean;
   reflect: boolean;
-  getPropValue: () => unknown;
-  setPropValue: (value: unknown) => void;
+  access: {
+    get: () => unknown;
+    set: (value: unknown) => void;
+  };
 }
 
 export type ListenerSelector<T> = (el: T) => EventTarget | null;
@@ -16,11 +18,7 @@ export interface Listener<T> {
   selector: ListenerSelector<T>;
 }
 
-export type AttrChangedCallback = (
-  name: string,
-  oldValue: string,
-  newValue: string,
-) => void;
+export type AttrChangedCallback = (name: string, oldValue: string, newValue: string) => void;
 
 export class AttrMetadata extends Map<string, AttrDef> {}
 export class AttrChangeMetadata extends Map<string, Set<AttrChangedCallback>> {}

package/target/lib/attr.d.ts

@@ -3,4 +3,4 @@ export interface AttrOpts {
     observed?: boolean;
     reflect?: boolean;
 }
-export declare function attr(opts?: AttrOpts): <This extends HTMLElement>({ get, set }: ClassAccessorDecoratorTarget<This, unknown>, ctx: ClassAccessorDecoratorContext<This>) => ClassAccessorDecoratorResult<This, any>;
+export declare function attr<This extends HTMLElement>(opts?: AttrOpts): (base: ClassAccessorDecoratorTarget<This, unknown>, ctx: ClassAccessorDecoratorContext<This>) => ClassAccessorDecoratorResult<This, any>;

package/target/lib/attr.js

@@ -1,6 +1,6 @@
 import { metadataStore } from "./metadata.js";
 export function attr(opts) {
-    return function attrDecorator({ get, set }, ctx) {
+    return function attrDecorator(base, ctx) {
         const attrName = opts?.name ?? parseAttrName(ctx.name);
         const meta = metadataStore.read(ctx.metadata);
         const reflect = opts?.reflect ?? true;
@@ -8,10 +8,23 @@ export function attr(opts) {
             propName: ctx.name,
             observe: opts?.observed ?? true,
             reflect,
-            getPropValue: get,
-            setPropValue: set,
+            access: base,
         });
         return {
+            get() {
+                const ogValue = base.get.call(this);
+                if (typeof ogValue === "boolean") {
+                    return this.hasAttribute(attrName);
+                }
+                const attrValue = this.getAttribute(attrName);
+                if (attrValue === null) {
+                    return ogValue;
+                }
+                if (typeof ogValue === "number") {
+                    return Number(attrValue);
+                }
+                return attrValue;
+            },
             set(value) {
                 if (reflect) {
                     if (value === true) {
@@ -31,7 +44,7 @@ export function attr(opts) {
                         }
                     }
                 }
-                set.call(this, value);
+                base.set.call(this, value);
             },
         };
     };

package/target/lib/attr.js.map

@@ -1 +1 @@
-{"version":3,"file":"attr.js","sourceRoot":"","sources":["../../src/lib/attr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAQ9C,MAAM,UAAU,IAAI,CAAC,IAAe;IAClC,OAAO,SAAS,aAAa,CAC3B,EAAE,GAAG,EAAE,GAAG,EAA+C,EACzD,GAAwC;QAExC,MAAM,QAAQ,GAAG,IAAI,EAAE,IAAI,IAAI,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACvD,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAO,GAAG,CAAC,QAAQ,CAAC,CAAC;QACpD,MAAM,OAAO,GAAG,IAAI,EAAE,OAAO,IAAI,IAAI,CAAC;QAEtC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE;YACvB,QAAQ,EAAE,GAAG,CAAC,IAAI;YAClB,OAAO,EAAE,IAAI,EAAE,QAAQ,IAAI,IAAI;YAC/B,OAAO;YACP,YAAY,EAAE,GAAG;YACjB,YAAY,EAAE,GAAG;SAClB,CAAC,CAAC;QAEH,OAAO;YACL,GAAG,CAAC,KAAc;gBAChB,IAAI,OAAO,EAAE,CAAC;oBACZ,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;wBACnB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC;4BACjC,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;wBAClC,CAAC;oBACH,CAAC;yBAAM,IAAI,KAAK,KAAK,KAAK,EAAE,CAAC;wBAC3B,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC;4BAChC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;wBACjC,CAAC;oBACH,CAAC;yBAAM,CAAC;wBACN,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;wBAE/B,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,QAAQ,EAAE,CAAC;4BAC7C,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;wBACxC,CAAC;oBACH,CAAC;gBACH,CAAC;gBAED,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YACxB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,GAAoB;IACzC,IAAI,KAAa,CAAC;IAElB,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QAC5B,IAAI,GAAG,CAAC,WAAW,EAAE,CAAC;YACpB,KAAK,GAAG,GAAG,CAAC,WAAW,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;SAAM,CAAC;QACN,KAAK,GAAG,GAAG,CAAC;IACd,CAAC;IAED,OAAO,KAAK,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAClD,CAAC"}
+{"version":3,"file":"attr.js","sourceRoot":"","sources":["../../src/lib/attr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAQ9C,MAAM,UAAU,IAAI,CAA2B,IAAe;IAC5D,OAAO,SAAS,aAAa,CAC3B,IAAiD,EACjD,GAAwC;QAExC,MAAM,QAAQ,GAAG,IAAI,EAAE,IAAI,IAAI,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACvD,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAO,GAAG,CAAC,QAAQ,CAAC,CAAC;QACpD,MAAM,OAAO,GAAG,IAAI,EAAE,OAAO,IAAI,IAAI,CAAC;QAEtC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE;YACvB,QAAQ,EAAE,GAAG,CAAC,IAAI;YAClB,OAAO,EAAE,IAAI,EAAE,QAAQ,IAAI,IAAI;YAC/B,OAAO;YACP,MAAM,EAAE,IAAI;SACb,CAAC,CAAC;QAEH,OAAO;YACL,GAAG;gBACD,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAEpC,IAAI,OAAO,OAAO,KAAK,SAAS,EAAE,CAAC;oBACjC,OAAO,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;gBACrC,CAAC;gBAED,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;gBAE9C,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;oBACvB,OAAO,OAAO,CAAC;gBACjB,CAAC;gBAED,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;oBAChC,OAAO,MAAM,CAAC,SAAS,CAAC,CAAC;gBAC3B,CAAC;gBAED,OAAO,SAAS,CAAC;YACnB,CAAC;YACD,GAAG,CAAC,KAAc;gBAChB,IAAI,OAAO,EAAE,CAAC;oBACZ,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;wBACnB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC;4BACjC,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;wBAClC,CAAC;oBACH,CAAC;yBAAM,IAAI,KAAK,KAAK,KAAK,EAAE,CAAC;wBAC3B,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC;4BAChC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;wBACjC,CAAC;oBACH,CAAC;yBAAM,CAAC;wBACN,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;wBAE/B,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,QAAQ,EAAE,CAAC;4BAC7C,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;wBACxC,CAAC;oBACH,CAAC;gBACH,CAAC;gBAED,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YAC7B,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,GAAoB;IACzC,IAAI,KAAa,CAAC;IAElB,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QAC5B,IAAI,GAAG,CAAC,WAAW,EAAE,CAAC;YACpB,KAAK,GAAG,GAAG,CAAC,WAAW,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;SAAM,CAAC;QACN,KAAK,GAAG,GAAG,CAAC;IACd,CAAC;IAED,OAAO,KAAK,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAClD,CAAC"}