@rupertsworld/observable 0.1.0

package/README.md

@@ -0,0 +1,150 @@
+# @rupertsworld/observable
+
+Observable properties for classes and custom elements.
+
+## Why?
+
+Reacting to property changes typically means writing boilerplate getters/setters or remembering to call update functions. This library provides a declarative `observedProperties` pattern that works on any class — and extends naturally to custom elements with attribute reflection.
+
+## Install
+
+```bash
+npm install @rupertsworld/observable
+```
+
+## Quick Examples
+
+### Any class with `observable(Base)`
+
+```ts
+import { observable } from "@rupertsworld/observable";
+
+class Model extends observable(Object) {
+  static observedProperties = ["data"];
+
+  data = null;
+
+  propertyChangedCallback(name: string, oldValue: unknown, newValue: unknown) {
+    console.log(`${name} changed from`, oldValue, "to", newValue);
+  }
+}
+
+const model = new Model();
+model.data = { foo: 1 }; // logs: "data changed from null to { foo: 1 }"
+```
+
+### `Observable` with typed events
+
+`Observable` is `observable(EventTarget)` — use it when you want to dispatch events:
+
+```ts
+import { Observable } from "@rupertsworld/observable";
+
+class ChangeEvent extends Event {
+  type = "change" as const;
+  constructor(public property: string, public value: unknown) {
+    super("change");
+  }
+}
+
+class Counter extends Observable<ChangeEvent> {
+  static observedProperties = ["count"];
+
+  count = 0;
+
+  propertyChangedCallback(name: string, _oldValue: unknown, newValue: unknown) {
+    this.dispatchEvent(new ChangeEvent(name, newValue));
+  }
+}
+
+const counter = new Counter();
+counter.addEventListener("change", (e) => {
+  console.log(e.property, e.value); // typed
+});
+counter.count = 5; // logs: "count" 5
+```
+
+### Custom elements with `ObservableElement`
+
+```ts
+import { ObservableElement } from "@rupertsworld/observable";
+
+class MyCounter extends ObservableElement {
+  static observedProperties = {
+    count: { type: Number, attribute: "count" },
+  };
+
+  count = 0;
+
+  connectedCallback() {
+    this.render();
+    this.addEventListener("click", () => this.count++);
+  }
+
+  propertyChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    this.innerHTML = `<button>Count: ${this.count}</button>`;
+  }
+}
+
+customElements.define("my-counter", MyCounter);
+```
+
+```html
+<my-counter count="5"></my-counter>
+```
+
+The `count` property:
+
+- Syncs with the `count` attribute automatically
+- Coerces strings to numbers
+- Triggers `propertyChangedCallback` when changed
+
+## Typed Events
+
+You can add type safety for custom events by passing a generic parameter:
+
+```ts
+class CountChangeEvent extends Event {
+  type = "count-change";
+}
+
+class MyCounter extends ObservableElement<CountChangeEvent> {
+  // ...
+
+  propertyChangedCallback(name: string) {
+    if (name === "count") {
+      this.dispatchEvent(new CountChangeEvent('count-change'));
+    }
+    this.render();
+  }
+}
+```
+
+```ts
+const counter = document.querySelector("my-counter") as MyCounter;
+
+counter.addEventListener("countchange", (e) => {
+  console.log(e.count); // typed as number
+});
+```
+
+## Features
+
+- **Works on any class** — `observable(Base)` mixin works with `Object`, `EventTarget`, or any base
+- **Reactive properties** — declare once, get automatic getters/setters
+- **Attribute sync** — `ObservableElement` keeps properties and attributes in sync
+- **Type coercion** — `Number`, `Boolean`, `String`, `Object` built-in
+- **Typed events** — optional strong typing for `addEventListener`/`dispatchEvent`
+- **Drop-in replacement** — `ObservableElement` behaves exactly like native `HTMLElement`
+
+## Documentation
+
+See [docs/SPEC.md](docs/SPEC.md) for the full API reference.
+
+## License
+
+MIT

package/dist/html-element.d.ts

@@ -0,0 +1,36 @@
+import type { EventNames, EventForType } from "@rupertsworld/event-target";
+type NativeHTMLElement = InstanceType<typeof globalThis.HTMLElement>;
+type ReducedHTMLElement = Omit<NativeHTMLElement, "addEventListener" | "removeEventListener" | "dispatchEvent">;
+/** Supported type constructors for property coercion. */
+type ObservedType = StringConstructor | NumberConstructor | BooleanConstructor | ObjectConstructor;
+/** Configuration for a single observed property. */
+export type ObservedPropertyConfig = {
+    type: ObservedType;
+    /** If set, syncs this property to/from the named attribute. */
+    attribute?: string;
+};
+/** Map of property names to their observation config. */
+export type ObservedPropertyMap = Record<string, ObservedPropertyConfig>;
+export interface BaseElement<T extends Event = Event> extends ReducedHTMLElement {
+    addEventListener<K extends EventNames<T>>(type: K, listener: ((ev: EventForType<T, K>) => void) | null, options?: boolean | AddEventListenerOptions): void;
+    addEventListener<K extends EventNames<T>>(type: K, listener: EventListener | EventListenerObject | null, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends EventNames<T>>(type: K, listener: ((ev: EventForType<T, K>) => void) | null, options?: boolean | EventListenerOptions): void;
+    removeEventListener<K extends EventNames<T>>(type: K, listener: EventListener | EventListenerObject | null, options?: boolean | EventListenerOptions): void;
+    dispatchEvent(event: T): boolean;
+}
+/**
+ * Base class for custom elements with reactive observed properties.
+ *
+ * Define `static observedProperties` to automatically sync properties with
+ * attributes and receive `propertyChangedCallback` notifications.
+ */
+export declare class BaseElement<T extends Event = Event> extends globalThis.HTMLElement {
+    static observedProperties?: ObservedPropertyMap;
+    static get observedAttributes(): string[];
+    constructor();
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    /** Override to react to observed property changes. */
+    propertyChangedCallback(_name: string, _oldValue: unknown, _newValue: unknown): void;
+}
+export {};
+//# sourceMappingURL=html-element.d.ts.map

package/dist/html-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-element.d.ts","sourceRoot":"","sources":["../src/html-element.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE3E,KAAK,iBAAiB,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,WAAW,CAAC,CAAC;AAErE,KAAK,kBAAkB,GAAG,IAAI,CAC5B,iBAAiB,EACjB,kBAAkB,GAAG,qBAAqB,GAAG,eAAe,CAC7D,CAAC;AAEF,yDAAyD;AACzD,KAAK,YAAY,GACb,iBAAiB,GACjB,iBAAiB,GACjB,kBAAkB,GAClB,iBAAiB,CAAC;AAEtB,oDAAoD;AACpD,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,YAAY,CAAC;IACnB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,yDAAyD;AACzD,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC;AAoLzE,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,KAAK,GAAG,KAAK,CAAE,SAAQ,kBAAkB;IAC9E,gBAAgB,CAAC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,EACtC,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,GAAG,IAAI,EACnD,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,gBAAgB,CAAC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,EACtC,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,aAAa,GAAG,mBAAmB,GAAG,IAAI,EACpD,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,mBAAmB,CAAC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,EACzC,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,GAAG,IAAI,EACnD,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IAER,mBAAmB,CAAC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,EACzC,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,aAAa,GAAG,mBAAmB,GAAG,IAAI,EACpD,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IAER,aAAa,CAAC,KAAK,EAAE,CAAC,GAAG,OAAO,CAAC;CAClC;AAED;;;;;GAKG;AACH,qBAAa,WAAW,CAAC,CAAC,SAAS,KAAK,GAAG,KAAK,CAAE,SAAQ,UAAU,CAAC,WAAW;IAC9E,MAAM,CAAC,kBAAkB,CAAC,EAAE,mBAAmB,CAAC;IAEhD,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAWxC;;IAgBD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IA0BvF,sDAAsD;IACtD,uBAAuB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,GAAG,IAAI;CACrF"}

package/dist/html-element.js

@@ -0,0 +1,190 @@
+const stateByInstance = new WeakMap();
+const setupByConstructor = new WeakSet();
+const managedProps = new WeakMap();
+const asRecord = (obj) => obj;
+function coerceFromAttribute(type, value) {
+    if (type === Boolean) {
+        if (value === null)
+            return false;
+        return value !== "false";
+    }
+    if (value === null)
+        return null;
+    if (type === Number)
+        return Number(value);
+    if (type === Object)
+        return JSON.parse(value);
+    return value;
+}
+function serializeToAttribute(type, value) {
+    if (value == null)
+        return null;
+    if (type === Boolean)
+        return value ? "" : "false";
+    if (type === Object)
+        return JSON.stringify(value);
+    return String(value);
+}
+function configForAttribute(ctor, attr) {
+    for (const [prop, config] of Object.entries(ctor.observedProperties ?? {})) {
+        if (config.attribute === attr)
+            return { prop, config };
+    }
+    return null;
+}
+function getState(instance) {
+    let state = stateByInstance.get(instance);
+    if (!state) {
+        state = {
+            constructing: true,
+            syncingFromAttribute: null,
+            syncingToAttribute: null,
+            values: new Map(),
+        };
+        stateByInstance.set(instance, state);
+    }
+    return state;
+}
+function isManaged(ctor, prop) {
+    return managedProps.get(ctor)?.has(prop) ?? false;
+}
+function wrapUserAttributeCallback(ctor) {
+    const desc = Object.getOwnPropertyDescriptor(ctor.prototype, "attributeChangedCallback");
+    if (!desc || typeof desc.value !== "function")
+        return;
+    const userFn = desc.value;
+    if (userFn === BaseElement.prototype.attributeChangedCallback)
+        return;
+    Object.defineProperty(ctor.prototype, "attributeChangedCallback", {
+        configurable: true,
+        writable: true,
+        value(name, oldVal, newVal) {
+            BaseElement.prototype.attributeChangedCallback.call(this, name, oldVal, newVal);
+            userFn.call(this, name, oldVal, newVal);
+        },
+    });
+}
+function setup(ctor) {
+    wrapUserAttributeCallback(ctor);
+    const observed = ctor.observedProperties ?? {};
+    const managed = new Set();
+    managedProps.set(ctor, managed);
+    for (const [prop, config] of Object.entries(observed)) {
+        const existing = Object.getOwnPropertyDescriptor(ctor.prototype, prop);
+        if (existing?.get || existing?.set) {
+            throw new Error(`Observed property "${prop}" cannot define a custom getter/setter. ` +
+                `Use propertyChangedCallback for side effects instead.`);
+        }
+        if (existing)
+            continue;
+        managed.add(prop);
+        const attr = config.attribute;
+        Object.defineProperty(ctor.prototype, prop, {
+            enumerable: true,
+            configurable: true,
+            get() {
+                return getState(this).values.get(prop);
+            },
+            set(next) {
+                const state = getState(this);
+                const prev = state.values.get(prop);
+                if (Object.is(prev, next))
+                    return;
+                state.values.set(prop, next);
+                if (attr && state.syncingFromAttribute !== attr && state.syncingToAttribute !== attr) {
+                    const serialized = serializeToAttribute(config.type, next);
+                    state.syncingToAttribute = attr;
+                    try {
+                        serialized === null ? this.removeAttribute(attr) : this.setAttribute(attr, serialized);
+                    }
+                    finally {
+                        state.syncingToAttribute = null;
+                    }
+                }
+                if (!state.constructing || state.syncingFromAttribute !== null) {
+                    this.propertyChangedCallback(prop, prev, next);
+                }
+            },
+        });
+    }
+}
+function initializeProperties(el, ctor) {
+    const state = getState(el);
+    const observed = ctor.observedProperties ?? {};
+    const rec = asRecord(el);
+    for (const [prop, config] of Object.entries(observed)) {
+        if (!isManaged(ctor, prop))
+            continue;
+        const hasOwn = Object.prototype.hasOwnProperty.call(el, prop);
+        const ownValue = hasOwn ? rec[prop] : undefined;
+        if (hasOwn)
+            delete rec[prop];
+        const attr = config.attribute;
+        if (attr && el.hasAttribute(attr)) {
+            const coerced = coerceFromAttribute(config.type, el.getAttribute(attr));
+            state.syncingFromAttribute = attr;
+            try {
+                rec[prop] = coerced;
+            }
+            finally {
+                state.syncingFromAttribute = null;
+            }
+            continue;
+        }
+        if (hasOwn)
+            rec[prop] = ownValue;
+    }
+    state.constructing = false;
+}
+/**
+ * Base class for custom elements with reactive observed properties.
+ *
+ * Define `static observedProperties` to automatically sync properties with
+ * attributes and receive `propertyChangedCallback` notifications.
+ */
+export class BaseElement extends globalThis.HTMLElement {
+    static observedProperties;
+    static get observedAttributes() {
+        const ctor = this;
+        if (!setupByConstructor.has(ctor)) {
+            setup(ctor);
+            setupByConstructor.add(ctor);
+        }
+        return Object.values(this.observedProperties ?? {})
+            .map((c) => c.attribute)
+            .filter((a) => Boolean(a));
+    }
+    constructor() {
+        super();
+        const ctor = this.constructor;
+        if (!setupByConstructor.has(ctor)) {
+            setup(ctor);
+            setupByConstructor.add(ctor);
+        }
+        getState(this);
+        queueMicrotask(() => initializeProperties(this, ctor));
+    }
+    attributeChangedCallback(name, _old, value) {
+        const ctor = this.constructor;
+        const found = configForAttribute(ctor, name);
+        if (!found || !isManaged(ctor, found.prop))
+            return;
+        const state = getState(this);
+        if (state.syncingToAttribute === name)
+            return;
+        const coerced = coerceFromAttribute(found.config.type, value);
+        const rec = asRecord(this);
+        if (Object.prototype.hasOwnProperty.call(this, found.prop)) {
+            delete rec[found.prop];
+        }
+        state.syncingFromAttribute = name;
+        try {
+            rec[found.prop] = coerced;
+        }
+        finally {
+            state.syncingFromAttribute = null;
+        }
+    }
+    /** Override to react to observed property changes. */
+    propertyChangedCallback(_name, _oldValue, _newValue) { }
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { Observable, observable } from "./observable";
+export { ObservableElement } from "./observable-element";
+export type { ObservablePropertyConfig, ObservablePropertyMap, ObservedProperties, } from "./observable-element";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,YAAY,EACV,wBAAwB,EACxB,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,sBAAsB,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { Observable, observable } from "./observable";
+export { ObservableElement } from "./observable-element";

package/dist/observable-element.d.ts

@@ -0,0 +1,33 @@
+import type { EventForType, EventNames } from "@rupertsworld/event-target";
+type NativeHTMLElement = InstanceType<typeof globalThis.HTMLElement>;
+type ReducedHTMLElement = Omit<NativeHTMLElement, "addEventListener" | "removeEventListener" | "dispatchEvent">;
+type ObservedType = StringConstructor | NumberConstructor | BooleanConstructor | ObjectConstructor;
+export type ObservablePropertyConfig = {
+    type?: ObservedType;
+    attribute?: string | false;
+};
+export type ObservablePropertyMap = Record<string, ObservablePropertyConfig>;
+export type ObservedProperties = string[] | ObservablePropertyMap;
+type ObservableInstance = {
+    propertyChangedCallback(name: string, oldValue: unknown, newValue: unknown): void;
+};
+export type ObservableElementConstructor = Function & {
+    observedProperties?: ObservedProperties;
+    prototype: ObservableInstance;
+};
+export interface ObservableElement<T extends Event = Event> extends ReducedHTMLElement {
+    addEventListener<K extends EventNames<T>>(type: K, listener: ((ev: EventForType<T, K>) => void) | null, options?: boolean | AddEventListenerOptions): void;
+    addEventListener<K extends EventNames<T>>(type: K, listener: EventListener | EventListenerObject | null, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends EventNames<T>>(type: K, listener: ((ev: EventForType<T, K>) => void) | null, options?: boolean | EventListenerOptions): void;
+    removeEventListener<K extends EventNames<T>>(type: K, listener: EventListener | EventListenerObject | null, options?: boolean | EventListenerOptions): void;
+    dispatchEvent(event: T): boolean;
+}
+export declare class ObservableElement<T extends Event = Event> extends globalThis.HTMLElement {
+    static observedProperties?: ObservedProperties;
+    static get observedAttributes(): string[];
+    constructor();
+    attributeChangedCallback(name: string, _oldValue: string | null, value: string | null): void;
+    propertyChangedCallback(_name: string, _oldValue: unknown, _newValue: unknown): void;
+}
+export {};
+//# sourceMappingURL=observable-element.d.ts.map

package/dist/observable-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"observable-element.d.ts","sourceRoot":"","sources":["../src/observable-element.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAE3E,KAAK,iBAAiB,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,WAAW,CAAC,CAAC;AACrE,KAAK,kBAAkB,GAAG,IAAI,CAC5B,iBAAiB,EACjB,kBAAkB,GAAG,qBAAqB,GAAG,eAAe,CAC7D,CAAC;AAIF,KAAK,YAAY,GACb,iBAAiB,GACjB,iBAAiB,GACjB,kBAAkB,GAClB,iBAAiB,CAAC;AAEtB,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAC;AAC7E,MAAM,MAAM,kBAAkB,GAAG,MAAM,EAAE,GAAG,qBAAqB,CAAC;AAOlE,KAAK,kBAAkB,GAAG;IACxB,uBAAuB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CACnF,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG,QAAQ,GAAG;IACpD,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,SAAS,EAAE,kBAAkB,CAAC;CAC/B,CAAC;AAsMF,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,KAAK,GAAG,KAAK,CAAE,SAAQ,kBAAkB;IACpF,gBAAgB,CAAC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,EACtC,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,GAAG,IAAI,EACnD,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,gBAAgB,CAAC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,EACtC,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,aAAa,GAAG,mBAAmB,GAAG,IAAI,EACpD,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,mBAAmB,CAAC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,EACzC,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,GAAG,IAAI,EACnD,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IAER,mBAAmB,CAAC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,EACzC,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,aAAa,GAAG,mBAAmB,GAAG,IAAI,EACpD,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IAER,aAAa,CAAC,KAAK,EAAE,CAAC,GAAG,OAAO,CAAC;CAClC;AAED,qBAAa,iBAAiB,CAAC,CAAC,SAAS,KAAK,GAAG,KAAK,CAAE,SAAQ,UAAU,CAAC,WAAW;IACpF,MAAM,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IAE/C,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAOxC;;IAUD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAuB5F,uBAAuB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,GAAG,IAAI;CACrF"}

package/dist/observable-element.js

@@ -0,0 +1,222 @@
+const stateByInstance = new WeakMap();
+const setupByConstructor = new WeakSet();
+const managedProps = new WeakMap();
+const normalizedConfigsByConstructor = new WeakMap();
+const userAttributeCallbackWrapped = new WeakSet();
+const asRecord = (obj) => obj;
+function coerceFromAttribute(type, value) {
+    if (type === Boolean) {
+        if (value === null)
+            return false;
+        return value !== "false";
+    }
+    if (value === null)
+        return null;
+    if (type === Number)
+        return Number(value);
+    if (type === Object)
+        return JSON.parse(value);
+    return value;
+}
+function serializeToAttribute(type, value) {
+    if (value == null)
+        return null;
+    if (type === Boolean)
+        return value ? "" : "false";
+    if (type === Object)
+        return JSON.stringify(value);
+    return String(value);
+}
+function normalizeObservedProperties(observed) {
+    const normalized = new Map();
+    if (!observed)
+        return normalized;
+    if (Array.isArray(observed)) {
+        for (const prop of observed) {
+            normalized.set(prop, { attribute: false });
+        }
+        return normalized;
+    }
+    for (const [prop, config] of Object.entries(observed)) {
+        normalized.set(prop, {
+            type: config.type,
+            attribute: config.attribute ?? false,
+        });
+    }
+    return normalized;
+}
+function getState(instance) {
+    let state = stateByInstance.get(instance);
+    if (!state) {
+        state = {
+            constructing: true,
+            syncingFromAttribute: null,
+            syncingToAttribute: null,
+            values: new Map(),
+        };
+        stateByInstance.set(instance, state);
+    }
+    return state;
+}
+function getConfigs(ctor) {
+    return normalizedConfigsByConstructor.get(ctor) ?? new Map();
+}
+function isManaged(ctor, prop) {
+    return managedProps.get(ctor)?.has(prop) ?? false;
+}
+function reflectedAttribute(config) {
+    return typeof config.attribute === "string" ? config.attribute : null;
+}
+function configForAttribute(ctor, attr) {
+    for (const [prop, config] of getConfigs(ctor)) {
+        if (reflectedAttribute(config) === attr)
+            return { prop, config };
+    }
+    return null;
+}
+function ensureSetup(ctor) {
+    if (setupByConstructor.has(ctor))
+        return;
+    const normalized = normalizeObservedProperties(ctor.observedProperties);
+    normalizedConfigsByConstructor.set(ctor, normalized);
+    const managed = new Set();
+    managedProps.set(ctor, managed);
+    for (const [prop, config] of normalized) {
+        const attr = reflectedAttribute(config);
+        if (attr && !config.type) {
+            throw new Error(`Observed property "${prop}" requires a "type" when "attribute" is set.`);
+        }
+        const existing = Object.getOwnPropertyDescriptor(ctor.prototype, prop);
+        if (existing?.get || existing?.set) {
+            throw new Error(`Observed property "${prop}" cannot define a custom getter/setter. ` +
+                `Use propertyChangedCallback for side effects instead.`);
+        }
+        if (existing)
+            continue;
+        managed.add(prop);
+        Object.defineProperty(ctor.prototype, prop, {
+            enumerable: true,
+            configurable: true,
+            get() {
+                return getState(this).values.get(prop);
+            },
+            set(next) {
+                const state = getState(this);
+                const prev = state.values.get(prop);
+                if (Object.is(prev, next))
+                    return;
+                state.values.set(prop, next);
+                const attribute = reflectedAttribute(config);
+                if (attribute &&
+                    state.syncingFromAttribute !== attribute &&
+                    state.syncingToAttribute !== attribute) {
+                    const serialized = serializeToAttribute(config.type, next);
+                    state.syncingToAttribute = attribute;
+                    try {
+                        const el = this;
+                        serialized === null ? el.removeAttribute(attribute) : el.setAttribute(attribute, serialized);
+                    }
+                    finally {
+                        state.syncingToAttribute = null;
+                    }
+                }
+                if (!state.constructing || state.syncingFromAttribute !== null || prev !== undefined) {
+                    this.propertyChangedCallback(prop, prev, next);
+                }
+            },
+        });
+    }
+    setupByConstructor.add(ctor);
+}
+function initializeProperties(instance, ctor) {
+    ensureSetup(ctor);
+    const state = getState(instance);
+    const rec = asRecord(instance);
+    const configs = getConfigs(ctor);
+    for (const [prop, config] of configs) {
+        if (!isManaged(ctor, prop))
+            continue;
+        const hasOwn = Object.prototype.hasOwnProperty.call(instance, prop);
+        const ownValue = hasOwn ? rec[prop] : undefined;
+        if (hasOwn)
+            delete rec[prop];
+        const attr = reflectedAttribute(config);
+        if (attr && instance.hasAttribute(attr)) {
+            const coerced = coerceFromAttribute(config.type, instance.getAttribute(attr));
+            state.syncingFromAttribute = attr;
+            try {
+                rec[prop] = coerced;
+            }
+            finally {
+                state.syncingFromAttribute = null;
+            }
+            continue;
+        }
+        if (hasOwn)
+            rec[prop] = ownValue;
+    }
+    state.constructing = false;
+}
+export class ObservableElement extends globalThis.HTMLElement {
+    static observedProperties;
+    static get observedAttributes() {
+        const ctor = this;
+        ensureSetup(ctor);
+        wrapUserAttributeCallback(ctor);
+        return [...getConfigs(ctor).values()]
+            .map((config) => reflectedAttribute(config))
+            .filter((attr) => Boolean(attr));
+    }
+    constructor() {
+        super();
+        const ctor = this.constructor;
+        ensureSetup(ctor);
+        getState(this);
+        queueMicrotask(() => initializeProperties(this, ctor));
+    }
+    attributeChangedCallback(name, _oldValue, value) {
+        const ctor = this.constructor;
+        ensureSetup(ctor);
+        const found = configForAttribute(ctor, name);
+        if (!found || !isManaged(ctor, found.prop))
+            return;
+        const state = getState(this);
+        if (state.syncingToAttribute === name)
+            return;
+        const rec = asRecord(this);
+        if (Object.prototype.hasOwnProperty.call(this, found.prop)) {
+            delete rec[found.prop];
+        }
+        state.syncingFromAttribute = name;
+        try {
+            rec[found.prop] = coerceFromAttribute(found.config.type, value);
+        }
+        finally {
+            state.syncingFromAttribute = null;
+        }
+    }
+    propertyChangedCallback(_name, _oldValue, _newValue) { }
+}
+function wrapUserAttributeCallback(ctor) {
+    if (userAttributeCallbackWrapped.has(ctor))
+        return;
+    const desc = Object.getOwnPropertyDescriptor(ctor.prototype, "attributeChangedCallback");
+    if (!desc || typeof desc.value !== "function") {
+        userAttributeCallbackWrapped.add(ctor);
+        return;
+    }
+    const userFn = desc.value;
+    if (userFn === ObservableElement.prototype.attributeChangedCallback) {
+        userAttributeCallbackWrapped.add(ctor);
+        return;
+    }
+    Object.defineProperty(ctor.prototype, "attributeChangedCallback", {
+        configurable: true,
+        writable: true,
+        value(name, oldValue, newValue) {
+            ObservableElement.prototype.attributeChangedCallback.call(this, name, oldValue, newValue);
+            userFn.call(this, name, oldValue, newValue);
+        },
+    });
+    userAttributeCallbackWrapped.add(ctor);
+}

package/dist/observable.d.ts

@@ -0,0 +1,16 @@
+type Constructor<T = object> = abstract new (...args: any[]) => T;
+type ObservableInstance = {
+    propertyChangedCallback(name: string, oldValue: unknown, newValue: unknown): void;
+};
+type ObservableClass<TBase extends Constructor> = TBase & Constructor<InstanceType<TBase> & ObservableInstance> & {
+    observedProperties?: string[];
+};
+export declare function observable<TBase extends Constructor>(Base: TBase): ObservableClass<TBase>;
+declare const Observable_base: ObservableClass<{
+    new (): EventTarget;
+    prototype: EventTarget;
+}>;
+export declare class Observable extends Observable_base {
+}
+export {};
+//# sourceMappingURL=observable.d.ts.map

package/dist/observable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"observable.d.ts","sourceRoot":"","sources":["../src/observable.ts"],"names":[],"mappings":"AAAA,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,IAAI,QAAQ,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAIlE,KAAK,kBAAkB,GAAG;IACxB,uBAAuB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CACnF,CAAC;AA8FF,KAAK,eAAe,CAAC,KAAK,SAAS,WAAW,IAAI,KAAK,GACrD,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,kBAAkB,CAAC,GAAG;IACtD,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC/B,CAAC;AAEJ,wBAAgB,UAAU,CAAC,KAAK,SAAS,WAAW,EAAE,IAAI,EAAE,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,CAgBzF;;;;;AAED,qBAAa,UAAW,SAAQ,eAAuB;CAAG"}

package/dist/observable.js

@@ -0,0 +1,80 @@
+const stateByInstance = new WeakMap();
+const setupByConstructor = new WeakSet();
+const managedProps = new WeakMap();
+const asRecord = (obj) => obj;
+function getState(instance) {
+    let state = stateByInstance.get(instance);
+    if (!state) {
+        state = {
+            constructing: true,
+            values: new Map(),
+        };
+        stateByInstance.set(instance, state);
+    }
+    return state;
+}
+function ensureSetup(ctor) {
+    if (setupByConstructor.has(ctor))
+        return;
+    const observed = ctor.observedProperties ?? [];
+    const managed = new Set();
+    managedProps.set(ctor, managed);
+    for (const prop of observed) {
+        const existing = Object.getOwnPropertyDescriptor(ctor.prototype, prop);
+        if (existing?.get || existing?.set) {
+            throw new Error(`Observed property "${prop}" cannot define a custom getter/setter. ` +
+                `Use propertyChangedCallback for side effects instead.`);
+        }
+        if (existing)
+            continue;
+        managed.add(prop);
+        Object.defineProperty(ctor.prototype, prop, {
+            enumerable: true,
+            configurable: true,
+            get() {
+                return getState(this).values.get(prop);
+            },
+            set(next) {
+                const state = getState(this);
+                const prev = state.values.get(prop);
+                if (Object.is(prev, next))
+                    return;
+                state.values.set(prop, next);
+                if (!state.constructing || prev !== undefined) {
+                    this.propertyChangedCallback(prop, prev, next);
+                }
+            },
+        });
+    }
+    setupByConstructor.add(ctor);
+}
+function initializeProperties(instance, ctor) {
+    ensureSetup(ctor);
+    const state = getState(instance);
+    const rec = asRecord(instance);
+    for (const prop of managedProps.get(ctor) ?? []) {
+        const hasOwn = Object.prototype.hasOwnProperty.call(instance, prop);
+        const ownValue = hasOwn ? rec[prop] : undefined;
+        if (hasOwn)
+            delete rec[prop];
+        if (hasOwn)
+            rec[prop] = ownValue;
+    }
+    state.constructing = false;
+}
+export function observable(Base) {
+    class ObservableMixin extends Base {
+        static observedProperties;
+        constructor(...args) {
+            super(...args);
+            const ctor = this.constructor;
+            ensureSetup(ctor);
+            getState(this);
+            queueMicrotask(() => initializeProperties(this, ctor));
+        }
+        propertyChangedCallback(_name, _oldValue, _newValue) { }
+    }
+    return ObservableMixin;
+}
+export class Observable extends observable(EventTarget) {
+}

package/dist/reactive-element.d.ts

@@ -0,0 +1,41 @@
+type EventNames<U extends Event> = U extends unknown ? U extends {
+    type: infer T extends string;
+} ? T : never : never;
+type EventForType<U extends Event, K extends string> = Extract<U, {
+    type: K;
+}>;
+type NativeHTMLElement = InstanceType<typeof globalThis.HTMLElement>;
+type ReducedHTMLElement = Omit<NativeHTMLElement, "addEventListener" | "removeEventListener" | "dispatchEvent">;
+/** Supported type constructors for property coercion. */
+type ObservedType = StringConstructor | NumberConstructor | BooleanConstructor | ObjectConstructor;
+/** Configuration for a single observed property. */
+export type ObservedPropertyConfig = {
+    type: ObservedType;
+    /** If set, syncs this property to/from the named attribute. */
+    attribute?: string;
+};
+/** Map of property names to their observation config. */
+export type ObservedPropertyMap = Record<string, ObservedPropertyConfig>;
+export interface BaseElement<T extends Event = Event> extends ReducedHTMLElement {
+    addEventListener<K extends EventNames<T>>(type: K, listener: ((ev: EventForType<T, K>) => void) | null, options?: boolean | AddEventListenerOptions): void;
+    addEventListener<K extends EventNames<T>>(type: K, listener: EventListener | EventListenerObject | null, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends EventNames<T>>(type: K, listener: ((ev: EventForType<T, K>) => void) | null, options?: boolean | EventListenerOptions): void;
+    removeEventListener<K extends EventNames<T>>(type: K, listener: EventListener | EventListenerObject | null, options?: boolean | EventListenerOptions): void;
+    dispatchEvent(event: T): boolean;
+}
+/**
+ * Base class for custom elements with reactive observed properties.
+ *
+ * Define `static observedProperties` to automatically sync properties with
+ * attributes and receive `propertyChangedCallback` notifications.
+ */
+export declare class BaseElement<T extends Event = Event> extends globalThis.HTMLElement {
+    static observedProperties?: ObservedPropertyMap;
+    static get observedAttributes(): string[];
+    constructor();
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    /** Override to react to observed property changes. */
+    propertyChangedCallback(_name: string, _oldValue: unknown, _newValue: unknown): void;
+}
+export {};
+//# sourceMappingURL=reactive-element.d.ts.map

package/dist/reactive-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactive-element.d.ts","sourceRoot":"","sources":["../src/reactive-element.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,CAAC,CAAC,SAAS,KAAK,IAAI,CAAC,SAAS,OAAO,GAChD,CAAC,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC,SAAS,MAAM,CAAA;CAAE,GACxC,CAAC,GACD,KAAK,GACP,KAAK,CAAC;AAEV,KAAK,YAAY,CAAC,CAAC,SAAS,KAAK,EAAE,CAAC,SAAS,MAAM,IAAI,OAAO,CAAC,CAAC,EAAE;IAAE,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC,CAAC;AAE/E,KAAK,iBAAiB,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,WAAW,CAAC,CAAC;AAErE,KAAK,kBAAkB,GAAG,IAAI,CAC5B,iBAAiB,EACjB,kBAAkB,GAAG,qBAAqB,GAAG,eAAe,CAC7D,CAAC;AAEF,yDAAyD;AACzD,KAAK,YAAY,GACb,iBAAiB,GACjB,iBAAiB,GACjB,kBAAkB,GAClB,iBAAiB,CAAC;AAEtB,oDAAoD;AACpD,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,YAAY,CAAC;IACnB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,yDAAyD;AACzD,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC;AAoLzE,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,KAAK,GAAG,KAAK,CAAE,SAAQ,kBAAkB;IAC9E,gBAAgB,CAAC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,EACtC,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,GAAG,IAAI,EACnD,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,gBAAgB,CAAC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,EACtC,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,aAAa,GAAG,mBAAmB,GAAG,IAAI,EACpD,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,mBAAmB,CAAC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,EACzC,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,GAAG,IAAI,EACnD,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IAER,mBAAmB,CAAC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,EACzC,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,aAAa,GAAG,mBAAmB,GAAG,IAAI,EACpD,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IAER,aAAa,CAAC,KAAK,EAAE,CAAC,GAAG,OAAO,CAAC;CAClC;AAED;;;;;GAKG;AACH,qBAAa,WAAW,CAAC,CAAC,SAAS,KAAK,GAAG,KAAK,CAAE,SAAQ,UAAU,CAAC,WAAW;IAC9E,MAAM,CAAC,kBAAkB,CAAC,EAAE,mBAAmB,CAAC;IAEhD,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAWxC;;IAgBD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IA0BvF,sDAAsD;IACtD,uBAAuB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,GAAG,IAAI;CACrF"}

package/dist/reactive-element.js

@@ -0,0 +1,190 @@
+const stateByInstance = new WeakMap();
+const setupByConstructor = new WeakSet();
+const managedProps = new WeakMap();
+const asRecord = (obj) => obj;
+function coerceFromAttribute(type, value) {
+    if (type === Boolean) {
+        if (value === null)
+            return false;
+        return value !== "false";
+    }
+    if (value === null)
+        return null;
+    if (type === Number)
+        return Number(value);
+    if (type === Object)
+        return JSON.parse(value);
+    return value;
+}
+function serializeToAttribute(type, value) {
+    if (value == null)
+        return null;
+    if (type === Boolean)
+        return value ? "" : "false";
+    if (type === Object)
+        return JSON.stringify(value);
+    return String(value);
+}
+function configForAttribute(ctor, attr) {
+    for (const [prop, config] of Object.entries(ctor.observedProperties ?? {})) {
+        if (config.attribute === attr)
+            return { prop, config };
+    }
+    return null;
+}
+function getState(instance) {
+    let state = stateByInstance.get(instance);
+    if (!state) {
+        state = {
+            constructing: true,
+            syncingFromAttribute: null,
+            syncingToAttribute: null,
+            values: new Map(),
+        };
+        stateByInstance.set(instance, state);
+    }
+    return state;
+}
+function isManaged(ctor, prop) {
+    return managedProps.get(ctor)?.has(prop) ?? false;
+}
+function wrapUserAttributeCallback(ctor) {
+    const desc = Object.getOwnPropertyDescriptor(ctor.prototype, "attributeChangedCallback");
+    if (!desc || typeof desc.value !== "function")
+        return;
+    const userFn = desc.value;
+    if (userFn === BaseElement.prototype.attributeChangedCallback)
+        return;
+    Object.defineProperty(ctor.prototype, "attributeChangedCallback", {
+        configurable: true,
+        writable: true,
+        value(name, oldVal, newVal) {
+            BaseElement.prototype.attributeChangedCallback.call(this, name, oldVal, newVal);
+            userFn.call(this, name, oldVal, newVal);
+        },
+    });
+}
+function setup(ctor) {
+    wrapUserAttributeCallback(ctor);
+    const observed = ctor.observedProperties ?? {};
+    const managed = new Set();
+    managedProps.set(ctor, managed);
+    for (const [prop, config] of Object.entries(observed)) {
+        const existing = Object.getOwnPropertyDescriptor(ctor.prototype, prop);
+        if (existing?.get || existing?.set) {
+            throw new Error(`Observed property "${prop}" cannot define a custom getter/setter. ` +
+                `Use propertyChangedCallback for side effects instead.`);
+        }
+        if (existing)
+            continue;
+        managed.add(prop);
+        const attr = config.attribute;
+        Object.defineProperty(ctor.prototype, prop, {
+            enumerable: true,
+            configurable: true,
+            get() {
+                return getState(this).values.get(prop);
+            },
+            set(next) {
+                const state = getState(this);
+                const prev = state.values.get(prop);
+                if (Object.is(prev, next))
+                    return;
+                state.values.set(prop, next);
+                if (attr && state.syncingFromAttribute !== attr && state.syncingToAttribute !== attr) {
+                    const serialized = serializeToAttribute(config.type, next);
+                    state.syncingToAttribute = attr;
+                    try {
+                        serialized === null ? this.removeAttribute(attr) : this.setAttribute(attr, serialized);
+                    }
+                    finally {
+                        state.syncingToAttribute = null;
+                    }
+                }
+                if (!state.constructing || state.syncingFromAttribute !== null) {
+                    this.propertyChangedCallback(prop, prev, next);
+                }
+            },
+        });
+    }
+}
+function initializeProperties(el, ctor) {
+    const state = getState(el);
+    const observed = ctor.observedProperties ?? {};
+    const rec = asRecord(el);
+    for (const [prop, config] of Object.entries(observed)) {
+        if (!isManaged(ctor, prop))
+            continue;
+        const hasOwn = Object.prototype.hasOwnProperty.call(el, prop);
+        const ownValue = hasOwn ? rec[prop] : undefined;
+        if (hasOwn)
+            delete rec[prop];
+        const attr = config.attribute;
+        if (attr && el.hasAttribute(attr)) {
+            const coerced = coerceFromAttribute(config.type, el.getAttribute(attr));
+            state.syncingFromAttribute = attr;
+            try {
+                rec[prop] = coerced;
+            }
+            finally {
+                state.syncingFromAttribute = null;
+            }
+            continue;
+        }
+        if (hasOwn)
+            rec[prop] = ownValue;
+    }
+    state.constructing = false;
+}
+/**
+ * Base class for custom elements with reactive observed properties.
+ *
+ * Define `static observedProperties` to automatically sync properties with
+ * attributes and receive `propertyChangedCallback` notifications.
+ */
+export class BaseElement extends globalThis.HTMLElement {
+    static observedProperties;
+    static get observedAttributes() {
+        const ctor = this;
+        if (!setupByConstructor.has(ctor)) {
+            setup(ctor);
+            setupByConstructor.add(ctor);
+        }
+        return Object.values(this.observedProperties ?? {})
+            .map((c) => c.attribute)
+            .filter((a) => Boolean(a));
+    }
+    constructor() {
+        super();
+        const ctor = this.constructor;
+        if (!setupByConstructor.has(ctor)) {
+            setup(ctor);
+            setupByConstructor.add(ctor);
+        }
+        getState(this);
+        queueMicrotask(() => initializeProperties(this, ctor));
+    }
+    attributeChangedCallback(name, _old, value) {
+        const ctor = this.constructor;
+        const found = configForAttribute(ctor, name);
+        if (!found || !isManaged(ctor, found.prop))
+            return;
+        const state = getState(this);
+        if (state.syncingToAttribute === name)
+            return;
+        const coerced = coerceFromAttribute(found.config.type, value);
+        const rec = asRecord(this);
+        if (Object.prototype.hasOwnProperty.call(this, found.prop)) {
+            delete rec[found.prop];
+        }
+        state.syncingFromAttribute = name;
+        try {
+            rec[found.prop] = coerced;
+        }
+        finally {
+            state.syncingFromAttribute = null;
+        }
+    }
+    /** Override to react to observed property changes. */
+    propertyChangedCallback(_name, _oldValue, _newValue) { }
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@rupertsworld/observable",
+  "version": "0.1.0",
+  "description": "Observable properties mixin and ObservableElement with attribute reflection",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run --environment happy-dom",
+    "example": "vite --config example/vite.config.js"
+  },
+  "devDependencies": {
+    "happy-dom": "latest",
+    "typescript": "latest",
+    "vite": "latest",
+    "vitest": "latest"
+  },
+  "dependencies": {
+    "@rupertsworld/event-target": "^0.1.1"
+  }
+}