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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/element",
-  "version": "4.2.3-next.2",
+  "version": "4.2.3-next.21",
   "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,8 +19,7 @@ export function attr(opts?: AttrOpts) {
       propName: ctx.name,
       observe: opts?.observed ?? true,
       reflect,
-      getPropValue: get,
-      setPropValue: set,
+      access: base,
     });
 
     return {
@@ -43,7 +42,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,24 @@ 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 = newValue;
 
-              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));
-              } else {
-                // treat as string
-                attr.setPropValue.call(this, newValue);
+                value = Number(newValue);
               }
+
+              attr.access.set.call(this, value);
             }
 
             if (cbs) {
@@ -86,13 +82,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 +96,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 +122,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 +136,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,8 +8,7 @@ export function attr(opts) {
             propName: ctx.name,
             observe: opts?.observed ?? true,
             reflect,
-            getPropValue: get,
-            setPropValue: set,
+            access: base,
         });
         return {
             set(value) {
@@ -31,7 +30,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,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"}

package/target/lib/attr.test.js

@@ -1,5 +1,6 @@
 import { __esDecorate, __propKey, __runInitializers } from "tslib";
-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";
 it("should read and parse the correct values", () => {
@@ -288,10 +289,10 @@ it("should throw an error for symbols with no description", async () => {
         new MyElement();
     }).to.throw("Cannot handle Symbol property without description");
 });
-it("should not reflect property to attribute", async () => {
+it("non reflective attributes should still read new attribute values", async () => {
     let MyElement = (() => {
         let _classDecorators = [element({
-                tagName: "attr-test-5",
+                tagName: "attr-test-6",
             })];
         let _classDescriptor;
         let _classExtraInitializers = [];
@@ -322,14 +323,13 @@ it("should not reflect property to attribute", async () => {
         return MyElement = _classThis;
     })();
     const el = new MyElement();
-    el.value = "bar";
+    el.setAttribute("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 () => {
+it("should allow a manually defined attribute name", async () => {
     let MyElement = (() => {
         let _classDecorators = [element({
-                tagName: "attr-test-6",
+                tagName: "attr-test-7",
             })];
         let _classDescriptor;
         let _classExtraInitializers = [];
@@ -342,14 +342,16 @@ it("non reflective attributes should still read new attribute values", async ()
             static { _classThis = this; }
             static {
                 const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                _value_decorators = [attr({ reflect: false })];
+                _value_decorators = [attr({
+                        name: "aria-label",
+                    })];
                 __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
                 __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
                 MyElement = _classThis = _classDescriptor.value;
                 if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
                 __runInitializers(_classThis, _classExtraInitializers);
             }
-            #value_accessor_storage = __runInitializers(this, _value_initializers, "foo");
+            #value_accessor_storage = __runInitializers(this, _value_initializers, "");
             get value() { return this.#value_accessor_storage; }
             set value(value) { this.#value_accessor_storage = value; }
             constructor() {
@@ -360,37 +362,106 @@ it("non reflective attributes should still read new attribute values", async ()
         return MyElement = _classThis;
     })();
     const el = new MyElement();
+    el.setAttribute("aria-label", "TEST");
+    document.body.append(el);
+    expect(el.value).to.equal("TEST");
+    el.remove();
+});
+it("should update property when attribute changes", async () => {
+    let MyElement = (() => {
+        let _classDecorators = [element({
+                tagName: "attr-test-8",
+            })];
+        let _classDescriptor;
+        let _classExtraInitializers = [];
+        let _classThis;
+        let _classSuper = HTMLElement;
+        let _value_decorators;
+        let _value_initializers = [];
+        let _value_extraInitializers = [];
+        let _count_decorators;
+        let _count_initializers = [];
+        let _count_extraInitializers = [];
+        let _enabled_decorators;
+        let _enabled_initializers = [];
+        let _enabled_extraInitializers = [];
+        var MyElement = class extends _classSuper {
+            static { _classThis = this; }
+            static {
+                const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                _value_decorators = [attr()];
+                _count_decorators = [attr()];
+                _enabled_decorators = [attr()];
+                __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+                __esDecorate(this, null, _count_decorators, { kind: "accessor", name: "count", static: false, private: false, access: { has: obj => "count" in obj, get: obj => obj.count, set: (obj, value) => { obj.count = value; } }, metadata: _metadata }, _count_initializers, _count_extraInitializers);
+                __esDecorate(this, null, _enabled_decorators, { kind: "accessor", name: "enabled", static: false, private: false, access: { has: obj => "enabled" in obj, get: obj => obj.enabled, set: (obj, value) => { obj.enabled = value; } }, metadata: _metadata }, _enabled_initializers, _enabled_extraInitializers);
+                __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+                MyElement = _classThis = _classDescriptor.value;
+                if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+                __runInitializers(_classThis, _classExtraInitializers);
+            }
+            #value_accessor_storage = __runInitializers(this, _value_initializers, "foo");
+            get value() { return this.#value_accessor_storage; }
+            set value(value) { this.#value_accessor_storage = value; }
+            #count_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _count_initializers, 0));
+            get count() { return this.#count_accessor_storage; }
+            set count(value) { this.#count_accessor_storage = value; }
+            #enabled_accessor_storage = (__runInitializers(this, _count_extraInitializers), __runInitializers(this, _enabled_initializers, false));
+            get enabled() { return this.#enabled_accessor_storage; }
+            set enabled(value) { this.#enabled_accessor_storage = value; }
+            constructor() {
+                super(...arguments);
+                __runInitializers(this, _enabled_extraInitializers);
+            }
+        };
+        return MyElement = _classThis;
+    })();
+    const el = new MyElement();
+    document.body.append(el);
     el.setAttribute("value", "bar");
     expect(el.value).to.equal("bar");
+    el.setAttribute("count", "42");
+    expect(el.count).to.equal(42);
+    el.setAttribute("enabled", "");
+    expect(el.enabled).to.equal(true);
+    el.removeAttribute("enabled");
+    expect(el.enabled).to.equal(false);
+    el.remove();
 });
-it("should allow a manually defined attribute name", async () => {
+it("setters should be called when attributes change", async () => {
+    let callCount = 0;
     let MyElement = (() => {
         let _classDecorators = [element({
-                tagName: "attr-test-7",
+                tagName: "attr-test-9",
             })];
         let _classDescriptor;
         let _classExtraInitializers = [];
         let _classThis;
         let _classSuper = HTMLElement;
+        let _instanceExtraInitializers = [];
         let _value_decorators;
         let _value_initializers = [];
         let _value_extraInitializers = [];
+        let _onValueChange_decorators;
         var MyElement = class extends _classSuper {
             static { _classThis = this; }
             static {
                 const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                _value_decorators = [attr({
-                        name: "aria-label",
-                    })];
+                _value_decorators = [attr(), observe()];
+                _onValueChange_decorators = [effect()];
                 __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+                __esDecorate(this, null, _onValueChange_decorators, { kind: "method", name: "onValueChange", static: false, private: false, access: { has: obj => "onValueChange" in obj, get: obj => obj.onValueChange }, metadata: _metadata }, null, _instanceExtraInitializers);
                 __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
                 MyElement = _classThis = _classDescriptor.value;
                 if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
                 __runInitializers(_classThis, _classExtraInitializers);
             }
-            #value_accessor_storage = __runInitializers(this, _value_initializers, "");
+            #value_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value_initializers, "foo"));
             get value() { return this.#value_accessor_storage; }
             set value(value) { this.#value_accessor_storage = value; }
+            onValueChange() {
+                callCount++;
+            }
             constructor() {
                 super(...arguments);
                 __runInitializers(this, _value_extraInitializers);
@@ -399,9 +470,11 @@ it("should allow a manually defined attribute name", async () => {
         return MyElement = _classThis;
     })();
     const el = new MyElement();
-    el.setAttribute("aria-label", "TEST");
     document.body.append(el);
-    expect(el.value).to.equal("TEST");
+    el.setAttribute("value", "bar");
+    await Promise.resolve();
+    await Promise.resolve();
+    assert.equal(callCount, 1);
     el.remove();
 });
 //# sourceMappingURL=attr.test.js.map