@rupertsworld/observable 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rupertsworld/observable",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Observable properties mixin and ObservableElement with attribute reflection",
   "type": "module",
   "main": "dist/index.js",
@@ -9,6 +9,7 @@
     "dist"
   ],
   "scripts": {
+    "prepublishOnly": "npm run build",
     "build": "tsc -p tsconfig.json",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test": "vitest run --environment happy-dom",

package/dist/html-element.d.ts

@@ -1,36 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,190 +0,0 @@
-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/reactive-element.d.ts

@@ -1,41 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,190 +0,0 @@
-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) { }
-}