@easemate/web-kit 0.1.0

package/build/decorators/Prop.cjs

@@ -0,0 +1,273 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Prop = Prop;
+const renderQueue = new WeakMap();
+const cleanupRegistry = new WeakMap();
+const observerRegistry = new WeakMap();
+const internalMutations = new WeakMap();
+const scheduleRender = (instance) => {
+    if (typeof instance.requestRender === 'function') {
+        instance.requestRender();
+        return;
+    }
+    if (typeof instance.render !== 'function') {
+        return;
+    }
+    if (renderQueue.get(instance)) {
+        return;
+    }
+    renderQueue.set(instance, true);
+    requestAnimationFrame(() => {
+        renderQueue.delete(instance);
+        instance.render?.();
+    });
+};
+const toKebabCase = (value) => String(value)
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/[_\s]+/g, '-')
+    .toLowerCase();
+const registerCleanup = (instance, cleanup) => {
+    let callbacks = cleanupRegistry.get(instance);
+    if (!callbacks) {
+        callbacks = new Set();
+        cleanupRegistry.set(instance, callbacks);
+        const original = instance.disconnectedCallback;
+        instance.disconnectedCallback = function (...args) {
+            const registered = cleanupRegistry.get(this);
+            registered?.forEach((callback) => {
+                try {
+                    callback();
+                }
+                catch (error) {
+                    console.error('[Prop] cleanup failed', error);
+                }
+            });
+            cleanupRegistry.delete(this);
+            if (typeof original === 'function') {
+                return original.apply(this, args);
+            }
+            return undefined;
+        };
+    }
+    callbacks.add(cleanup);
+};
+const markInternalMutation = (host, attribute) => {
+    let attributes = internalMutations.get(host);
+    if (!attributes) {
+        attributes = new Set();
+        internalMutations.set(host, attributes);
+    }
+    attributes.add(attribute);
+};
+const isInternalMutation = (host, attribute) => {
+    const attributes = internalMutations.get(host);
+    if (!attributes) {
+        return false;
+    }
+    const hasAttribute = attributes.has(attribute);
+    if (hasAttribute) {
+        attributes.delete(attribute);
+        if (attributes.size === 0) {
+            internalMutations.delete(host);
+        }
+    }
+    return hasAttribute;
+};
+const observeAttribute = (host, attribute, handler) => {
+    let entry = observerRegistry.get(host);
+    if (!entry) {
+        const callbacks = new Map();
+        const observer = new MutationObserver((records) => {
+            records.forEach((record) => {
+                const attributeName = record.attributeName;
+                if (!attributeName) {
+                    return;
+                }
+                if (isInternalMutation(host, attributeName)) {
+                    return;
+                }
+                const listeners = callbacks.get(attributeName);
+                if (!listeners) {
+                    return;
+                }
+                const currentValue = record.target.getAttribute(attributeName);
+                for (const listener of listeners) {
+                    listener(currentValue);
+                }
+            });
+        });
+        observer.observe(host, { attributes: true });
+        entry = { observer, callbacks };
+        observerRegistry.set(host, entry);
+        registerCleanup(host, () => {
+            observer.disconnect();
+            observerRegistry.delete(host);
+        });
+    }
+    let listeners = entry.callbacks.get(attribute);
+    if (!listeners) {
+        listeners = new Set();
+        entry.callbacks.set(attribute, listeners);
+    }
+    listeners.add(handler);
+};
+const updateAttribute = (host, attribute, value) => {
+    markInternalMutation(host, attribute);
+    if (value === undefined || value === null || value === false) {
+        host.removeAttribute(attribute);
+        return;
+    }
+    if (value === true) {
+        host.setAttribute(attribute, '');
+        return;
+    }
+    host.setAttribute(attribute, String(value));
+};
+const resolveType = (type) => {
+    if (!type) {
+        return null;
+    }
+    if (type === Boolean || type === 'boolean') {
+        return 'boolean';
+    }
+    if (type === Number || type === 'number') {
+        return 'number';
+    }
+    if (type === Object || type === Array || type === 'json') {
+        return 'json';
+    }
+    return 'string';
+};
+const typeParsers = {
+    boolean(value) {
+        return value !== null;
+    },
+    number(value) {
+        if (value === null || value === '') {
+            return null;
+        }
+        const parsed = Number(value);
+        return Number.isNaN(parsed) ? null : parsed;
+    },
+    json(value) {
+        if (!value) {
+            return null;
+        }
+        try {
+            return JSON.parse(value);
+        }
+        catch (error) {
+            console.warn('[Prop] failed to parse JSON attribute', error);
+            return null;
+        }
+    },
+    string(value) {
+        return value;
+    }
+};
+const typeFormatters = {
+    boolean(value) {
+        return value ? '' : null;
+    },
+    number(value) {
+        if (value === null || value === undefined || value === '') {
+            return null;
+        }
+        return String(value);
+    },
+    json(value) {
+        if (value === null || value === undefined) {
+            return null;
+        }
+        try {
+            return JSON.stringify(value);
+        }
+        catch {
+            return null;
+        }
+    },
+    string(value) {
+        if (value === null || value === undefined) {
+            return null;
+        }
+        return String(value);
+    }
+};
+const defaultCompare = (previous, next) => previous === next;
+function Prop(options = {}) {
+    const { attribute, reflect = true, type, parse, format, defaultValue, compare = defaultCompare, onChange, onAttributeChange } = options;
+    const resolvedType = resolveType(type);
+    const parseValue = parse
+        ? parse
+        : function (value) {
+            if (!resolvedType) {
+                return value;
+            }
+            return typeParsers[resolvedType].call(this, value);
+        };
+    const formatValue = format
+        ? format
+        : function (value) {
+            if (!resolvedType) {
+                return value ?? null;
+            }
+            return typeFormatters[resolvedType].call(this, value);
+        };
+    return (accessor, context) => {
+        if (context.kind !== 'accessor') {
+            throw new Error('@Prop requires the "accessor" keyword on the property.');
+        }
+        const attributeName = attribute ?? toKebabCase(context.name);
+        context.addInitializer(function () {
+            if (!reflect) {
+                return;
+            }
+            observeAttribute(this, attributeName, (rawValue) => {
+                if (isInternalMutation(this, attributeName)) {
+                    return;
+                }
+                const parsed = parseValue.call(this, rawValue);
+                const previous = accessor.get.call(this);
+                if (compare(previous, parsed)) {
+                    return;
+                }
+                accessor.set.call(this, parsed);
+                onAttributeChange?.call(this, parsed, previous);
+                scheduleRender(this);
+            });
+        });
+        return {
+            get() {
+                return accessor.get.call(this);
+            },
+            set(value) {
+                const previous = accessor.get.call(this);
+                if (compare(previous, value)) {
+                    return;
+                }
+                accessor.set.call(this, value);
+                if (reflect) {
+                    const formatted = formatValue.call(this, value);
+                    updateAttribute(this, attributeName, formatted);
+                }
+                onChange?.call(this, value, previous);
+                scheduleRender(this);
+            },
+            init(initialValue) {
+                let value = initialValue;
+                if (this.hasAttribute(attributeName)) {
+                    value = parseValue.call(this, this.getAttribute(attributeName));
+                }
+                else if (value === undefined && defaultValue !== undefined) {
+                    value =
+                        typeof defaultValue === 'function' ? defaultValue.call(this) : defaultValue;
+                }
+                if (reflect) {
+                    const formatted = formatValue.call(this, value);
+                    updateAttribute(this, attributeName, formatted);
+                }
+                return value;
+            }
+        };
+    };
+}

package/build/decorators/Prop.d.cts

@@ -0,0 +1,22 @@
+type RenderHost = HTMLElement & {
+    requestRender?(): void;
+    render?(): void;
+    connectedCallback?(): void;
+    disconnectedCallback?(...args: unknown[]): void;
+};
+type PropTypeDescriptor = BooleanConstructor | NumberConstructor | StringConstructor | ObjectConstructor | ArrayConstructor | 'boolean' | 'number' | 'string' | 'json';
+type Formatter<TValue, THost extends RenderHost> = (this: THost, value: TValue) => string | null | undefined;
+type Parser<TValue, THost extends RenderHost> = (this: THost, value: string | null) => TValue;
+interface PropOptions<TValue, THost extends RenderHost> {
+    attribute?: string;
+    reflect?: boolean;
+    type?: PropTypeDescriptor;
+    parse?: Parser<TValue, THost>;
+    format?: Formatter<TValue, THost>;
+    defaultValue?: TValue | ((this: THost) => TValue);
+    compare?: (previous: TValue, next: TValue) => boolean;
+    onChange?: (this: THost, next: TValue, previous: TValue) => void;
+    onAttributeChange?: (this: THost, next: TValue, previous: TValue) => void;
+}
+export declare function Prop<TValue, THost extends RenderHost = RenderHost>(options?: PropOptions<TValue, THost>): (accessor: ClassAccessorDecoratorTarget<THost, TValue>, context: ClassAccessorDecoratorContext<THost, TValue>) => ClassAccessorDecoratorResult<THost, TValue>;
+export {};

package/build/decorators/Prop.d.ts

@@ -0,0 +1,22 @@
+type RenderHost = HTMLElement & {
+    requestRender?(): void;
+    render?(): void;
+    connectedCallback?(): void;
+    disconnectedCallback?(...args: unknown[]): void;
+};
+type PropTypeDescriptor = BooleanConstructor | NumberConstructor | StringConstructor | ObjectConstructor | ArrayConstructor | 'boolean' | 'number' | 'string' | 'json';
+type Formatter<TValue, THost extends RenderHost> = (this: THost, value: TValue) => string | null | undefined;
+type Parser<TValue, THost extends RenderHost> = (this: THost, value: string | null) => TValue;
+interface PropOptions<TValue, THost extends RenderHost> {
+    attribute?: string;
+    reflect?: boolean;
+    type?: PropTypeDescriptor;
+    parse?: Parser<TValue, THost>;
+    format?: Formatter<TValue, THost>;
+    defaultValue?: TValue | ((this: THost) => TValue);
+    compare?: (previous: TValue, next: TValue) => boolean;
+    onChange?: (this: THost, next: TValue, previous: TValue) => void;
+    onAttributeChange?: (this: THost, next: TValue, previous: TValue) => void;
+}
+export declare function Prop<TValue, THost extends RenderHost = RenderHost>(options?: PropOptions<TValue, THost>): (accessor: ClassAccessorDecoratorTarget<THost, TValue>, context: ClassAccessorDecoratorContext<THost, TValue>) => ClassAccessorDecoratorResult<THost, TValue>;
+export {};

package/build/decorators/Prop.js

@@ -0,0 +1,270 @@
+const renderQueue = new WeakMap();
+const cleanupRegistry = new WeakMap();
+const observerRegistry = new WeakMap();
+const internalMutations = new WeakMap();
+const scheduleRender = (instance) => {
+    if (typeof instance.requestRender === 'function') {
+        instance.requestRender();
+        return;
+    }
+    if (typeof instance.render !== 'function') {
+        return;
+    }
+    if (renderQueue.get(instance)) {
+        return;
+    }
+    renderQueue.set(instance, true);
+    requestAnimationFrame(() => {
+        renderQueue.delete(instance);
+        instance.render?.();
+    });
+};
+const toKebabCase = (value) => String(value)
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/[_\s]+/g, '-')
+    .toLowerCase();
+const registerCleanup = (instance, cleanup) => {
+    let callbacks = cleanupRegistry.get(instance);
+    if (!callbacks) {
+        callbacks = new Set();
+        cleanupRegistry.set(instance, callbacks);
+        const original = instance.disconnectedCallback;
+        instance.disconnectedCallback = function (...args) {
+            const registered = cleanupRegistry.get(this);
+            registered?.forEach((callback) => {
+                try {
+                    callback();
+                }
+                catch (error) {
+                    console.error('[Prop] cleanup failed', error);
+                }
+            });
+            cleanupRegistry.delete(this);
+            if (typeof original === 'function') {
+                return original.apply(this, args);
+            }
+            return undefined;
+        };
+    }
+    callbacks.add(cleanup);
+};
+const markInternalMutation = (host, attribute) => {
+    let attributes = internalMutations.get(host);
+    if (!attributes) {
+        attributes = new Set();
+        internalMutations.set(host, attributes);
+    }
+    attributes.add(attribute);
+};
+const isInternalMutation = (host, attribute) => {
+    const attributes = internalMutations.get(host);
+    if (!attributes) {
+        return false;
+    }
+    const hasAttribute = attributes.has(attribute);
+    if (hasAttribute) {
+        attributes.delete(attribute);
+        if (attributes.size === 0) {
+            internalMutations.delete(host);
+        }
+    }
+    return hasAttribute;
+};
+const observeAttribute = (host, attribute, handler) => {
+    let entry = observerRegistry.get(host);
+    if (!entry) {
+        const callbacks = new Map();
+        const observer = new MutationObserver((records) => {
+            records.forEach((record) => {
+                const attributeName = record.attributeName;
+                if (!attributeName) {
+                    return;
+                }
+                if (isInternalMutation(host, attributeName)) {
+                    return;
+                }
+                const listeners = callbacks.get(attributeName);
+                if (!listeners) {
+                    return;
+                }
+                const currentValue = record.target.getAttribute(attributeName);
+                for (const listener of listeners) {
+                    listener(currentValue);
+                }
+            });
+        });
+        observer.observe(host, { attributes: true });
+        entry = { observer, callbacks };
+        observerRegistry.set(host, entry);
+        registerCleanup(host, () => {
+            observer.disconnect();
+            observerRegistry.delete(host);
+        });
+    }
+    let listeners = entry.callbacks.get(attribute);
+    if (!listeners) {
+        listeners = new Set();
+        entry.callbacks.set(attribute, listeners);
+    }
+    listeners.add(handler);
+};
+const updateAttribute = (host, attribute, value) => {
+    markInternalMutation(host, attribute);
+    if (value === undefined || value === null || value === false) {
+        host.removeAttribute(attribute);
+        return;
+    }
+    if (value === true) {
+        host.setAttribute(attribute, '');
+        return;
+    }
+    host.setAttribute(attribute, String(value));
+};
+const resolveType = (type) => {
+    if (!type) {
+        return null;
+    }
+    if (type === Boolean || type === 'boolean') {
+        return 'boolean';
+    }
+    if (type === Number || type === 'number') {
+        return 'number';
+    }
+    if (type === Object || type === Array || type === 'json') {
+        return 'json';
+    }
+    return 'string';
+};
+const typeParsers = {
+    boolean(value) {
+        return value !== null;
+    },
+    number(value) {
+        if (value === null || value === '') {
+            return null;
+        }
+        const parsed = Number(value);
+        return Number.isNaN(parsed) ? null : parsed;
+    },
+    json(value) {
+        if (!value) {
+            return null;
+        }
+        try {
+            return JSON.parse(value);
+        }
+        catch (error) {
+            console.warn('[Prop] failed to parse JSON attribute', error);
+            return null;
+        }
+    },
+    string(value) {
+        return value;
+    }
+};
+const typeFormatters = {
+    boolean(value) {
+        return value ? '' : null;
+    },
+    number(value) {
+        if (value === null || value === undefined || value === '') {
+            return null;
+        }
+        return String(value);
+    },
+    json(value) {
+        if (value === null || value === undefined) {
+            return null;
+        }
+        try {
+            return JSON.stringify(value);
+        }
+        catch {
+            return null;
+        }
+    },
+    string(value) {
+        if (value === null || value === undefined) {
+            return null;
+        }
+        return String(value);
+    }
+};
+const defaultCompare = (previous, next) => previous === next;
+export function Prop(options = {}) {
+    const { attribute, reflect = true, type, parse, format, defaultValue, compare = defaultCompare, onChange, onAttributeChange } = options;
+    const resolvedType = resolveType(type);
+    const parseValue = parse
+        ? parse
+        : function (value) {
+            if (!resolvedType) {
+                return value;
+            }
+            return typeParsers[resolvedType].call(this, value);
+        };
+    const formatValue = format
+        ? format
+        : function (value) {
+            if (!resolvedType) {
+                return value ?? null;
+            }
+            return typeFormatters[resolvedType].call(this, value);
+        };
+    return (accessor, context) => {
+        if (context.kind !== 'accessor') {
+            throw new Error('@Prop requires the "accessor" keyword on the property.');
+        }
+        const attributeName = attribute ?? toKebabCase(context.name);
+        context.addInitializer(function () {
+            if (!reflect) {
+                return;
+            }
+            observeAttribute(this, attributeName, (rawValue) => {
+                if (isInternalMutation(this, attributeName)) {
+                    return;
+                }
+                const parsed = parseValue.call(this, rawValue);
+                const previous = accessor.get.call(this);
+                if (compare(previous, parsed)) {
+                    return;
+                }
+                accessor.set.call(this, parsed);
+                onAttributeChange?.call(this, parsed, previous);
+                scheduleRender(this);
+            });
+        });
+        return {
+            get() {
+                return accessor.get.call(this);
+            },
+            set(value) {
+                const previous = accessor.get.call(this);
+                if (compare(previous, value)) {
+                    return;
+                }
+                accessor.set.call(this, value);
+                if (reflect) {
+                    const formatted = formatValue.call(this, value);
+                    updateAttribute(this, attributeName, formatted);
+                }
+                onChange?.call(this, value, previous);
+                scheduleRender(this);
+            },
+            init(initialValue) {
+                let value = initialValue;
+                if (this.hasAttribute(attributeName)) {
+                    value = parseValue.call(this, this.getAttribute(attributeName));
+                }
+                else if (value === undefined && defaultValue !== undefined) {
+                    value =
+                        typeof defaultValue === 'function' ? defaultValue.call(this) : defaultValue;
+                }
+                if (reflect) {
+                    const formatted = formatValue.call(this, value);
+                    updateAttribute(this, attributeName, formatted);
+                }
+                return value;
+            }
+        };
+    };
+}

package/build/decorators/Query.cjs

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Query = Query;
+const defaultOptions = {
+    all: false,
+    closest: false,
+    from: 'shadow',
+    fallback: null
+};
+const resolveFallback = (fallback, host) => {
+    if (typeof fallback === 'function') {
+        return fallback(host);
+    }
+    return fallback;
+};
+const resolveRoot = (host, option) => {
+    switch (option) {
+        case 'document':
+            return document;
+        case 'light':
+            return host;
+        default:
+            return host.renderRoot ?? host.shadowRoot ?? host;
+    }
+};
+const resolveQuery = (host, selector, options) => {
+    if (options.closest) {
+        const result = host.closest(selector);
+        return result ?? resolveFallback(options.fallback, host) ?? null;
+    }
+    const root = resolveRoot(host, options.from);
+    if (!root) {
+        return options.all
+            ? (resolveFallback(options.fallback, host) ?? [])
+            : (resolveFallback(options.fallback, host) ?? null);
+    }
+    if (options.all) {
+        const elements = Array.from(root.querySelectorAll(selector));
+        return elements.length > 0
+            ? elements
+            : (resolveFallback(options.fallback, host) ?? []);
+    }
+    const match = root.querySelector(selector);
+    return match ?? resolveFallback(options.fallback, host) ?? null;
+};
+const createQueryDecorator = (selector, options) => {
+    return (_target, context) => {
+        if (context.kind === 'accessor') {
+            const descriptor = {
+                get() {
+                    return resolveQuery(this, selector, options);
+                },
+                set(_value) {
+                    // Readonly accessor
+                }
+            };
+            return descriptor;
+        }
+        context.addInitializer(function () {
+            Object.defineProperty(this, context.name, {
+                configurable: true,
+                enumerable: true,
+                get: () => resolveQuery(this, selector, options)
+            });
+        });
+        return;
+    };
+};
+function Query(selector, userOptions) {
+    if (!selector) {
+        throw new Error('@Query requires a selector.');
+    }
+    if (userOptions) {
+        const merged = { ...defaultOptions, ...userOptions };
+        return createQueryDecorator(selector, merged);
+    }
+    const merged = defaultOptions;
+    return createQueryDecorator(selector, merged);
+}

package/build/decorators/Query.d.cts

@@ -0,0 +1,27 @@
+type QueryRoot = 'shadow' | 'light' | 'document';
+type QueryHost = HTMLElement & {
+    renderRoot?: ShadowRoot | DocumentFragment | HTMLElement;
+};
+type QueryFallback<TResult, THost extends QueryHost> = TResult | ((host: THost) => TResult);
+interface BaseQueryOptions<TResult, THost extends QueryHost> {
+    from?: QueryRoot;
+    fallback?: QueryFallback<TResult, THost>;
+}
+interface QueryAllOptions<TElement extends Element, THost extends QueryHost> extends BaseQueryOptions<TElement[], THost> {
+    all: true;
+    closest?: false;
+}
+interface QueryClosestOptions<THost extends QueryHost> extends BaseQueryOptions<Element | null, THost> {
+    closest: true;
+    all?: false;
+}
+interface QuerySingleOptions<TElement extends Element, THost extends QueryHost> extends BaseQueryOptions<TElement | null, THost> {
+    all?: false;
+    closest?: false;
+}
+type QueryOptions<TElement extends Element, THost extends QueryHost> = QueryAllOptions<TElement, THost> | QueryClosestOptions<THost> | QuerySingleOptions<TElement, THost>;
+type QueryReturnType<TElement extends Element, THost extends QueryHost, TOptions extends QueryOptions<TElement, THost>> = TOptions extends QueryAllOptions<TElement, THost> ? TElement[] : TOptions extends QueryClosestOptions<THost> ? Element | null : TElement | null;
+type QueryDecorator<TElement extends Element, THost extends QueryHost, TOptions extends QueryOptions<TElement, THost>> = (target: ClassAccessorDecoratorTarget<THost, QueryReturnType<TElement, THost, TOptions>> | undefined, context: ClassFieldDecoratorContext<THost, QueryReturnType<TElement, THost, TOptions>> | ClassAccessorDecoratorContext<THost, QueryReturnType<TElement, THost, TOptions>>) => ClassAccessorDecoratorResult<THost, QueryReturnType<TElement, THost, TOptions>> | undefined;
+export declare function Query<TElement extends Element, THost extends QueryHost, TOptions extends QueryOptions<TElement, THost>>(selector: string, userOptions: TOptions): QueryDecorator<TElement, THost, TOptions>;
+export declare function Query<TElement extends Element = Element, THost extends QueryHost = QueryHost>(selector: string): QueryDecorator<TElement, THost, QuerySingleOptions<TElement, THost>>;
+export {};