@htmlplus/element 2.11.0 → 2.13.0

package/bundlers/rollup.d.ts

@@ -1,7 +0,0 @@
-import { TransformerPlugin } from '../transformer/index.js';
-export declare const htmlplus: (...plugins: Array<TransformerPlugin>) => {
-    name: string;
-    buildStart(): Promise<void>;
-    load(id: any): Promise<string | undefined>;
-    buildEnd(error?: Error): Promise<void>;
-};

package/bundlers/rollup.js

@@ -1,23 +0,0 @@
-import { transformer } from '../transformer/index.js';
-export const htmlplus = (...plugins) => {
-    const { start, run, finish } = transformer(...plugins);
-    return {
-        name: 'htmlplus',
-        async buildStart() {
-            await start();
-        },
-        async load(id) {
-            if (!id.endsWith('.tsx'))
-                return;
-            const { script, skipped } = await run(id);
-            if (skipped)
-                return;
-            return script;
-        },
-        async buildEnd(error) {
-            if (error)
-                throw error;
-            await finish();
-        }
-    };
-};

package/bundlers/vite.d.ts

@@ -1,8 +0,0 @@
-import { TransformerPlugin } from '../transformer/index.js';
-export declare const htmlplus: (...plugins: Array<TransformerPlugin>) => {
-    name: string;
-    buildStart(): Promise<void>;
-    load(id: any): Promise<string | undefined>;
-    buildEnd(): Promise<void>;
-    writeBundle(options: any, bundles: any): Promise<void>;
-};

package/client/decorators/bind.d.ts

@@ -1,8 +0,0 @@
-/**
- * Used to bind a method of a class to the current context,
- * making it easier to reference `this` within the method.
- */
-export declare function Bind(): (target: Object, key: PropertyKey, descriptor: PropertyDescriptor) => {
-    configurable: boolean;
-    get(): any;
-};

package/client/decorators/bind.js

@@ -1,21 +0,0 @@
-import { defineProperty } from '../utils/index.js';
-/**
- * Used to bind a method of a class to the current context,
- * making it easier to reference `this` within the method.
- */
-export function Bind() {
-    return function (target, key, descriptor) {
-        return {
-            configurable: true,
-            get() {
-                const value = descriptor?.value.bind(this);
-                defineProperty(this, key, {
-                    value,
-                    configurable: true,
-                    writable: true
-                });
-                return value;
-            }
-        };
-    };
-}

package/client/decorators/context.d.ts

@@ -1,3 +0,0 @@
-import { HTMLPlusElement } from '../../types/index.js';
-export declare function Provider(namespace: string): (target: HTMLPlusElement, key: PropertyKey, descriptor: PropertyDescriptor) => void;
-export declare function Consumer(namespace: string): (target: HTMLPlusElement, key: PropertyKey) => void;

package/client/decorators/context.js

@@ -1,121 +0,0 @@
-import * as CONSTANTS from '../../constants/index.js';
-import { appendToMethod, dispatch, off, on } from '../utils/index.js';
-export function Provider(namespace) {
-    return function (target, key, descriptor) {
-        const symbol = Symbol();
-        const [MAIN, SUB] = namespace.split('.');
-        const prefix = `htmlplus:${MAIN}`;
-        const cleanups = (instance) => {
-            return (instance[symbol] ||= new Map());
-        };
-        const update = (instance) => {
-            const options = {};
-            options.detail = descriptor.get.call(instance);
-            dispatch(instance, `${prefix}:update`, options);
-            if (!SUB)
-                return;
-            options.bubbles = true;
-            dispatch(instance, `${prefix}:${instance[SUB]}:update`, options);
-        };
-        // TODO
-        appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
-            const cleanup = () => {
-                off(this, `${prefix}:presence`, onPresence);
-                cleanups(this).delete(prefix);
-            };
-            const onPresence = (event) => {
-                event.stopPropagation();
-                event.detail(this, descriptor.get.call(this));
-            };
-            on(this, `${prefix}:presence`, onPresence);
-            cleanups(this).set(prefix, cleanup);
-        });
-        appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATE, function (states) {
-            update(this);
-            if (cleanups(this).size && !states.has(SUB))
-                return;
-            cleanups(this).get(`${prefix}:${states.get(SUB)}`)?.();
-            const type = `${prefix}:${this[SUB]}`;
-            const cleanup = () => {
-                off(window, `${type}:presence`, onPresence);
-                cleanups(this).delete(type);
-                dispatch(window, `${type}:disconnect`);
-            };
-            const onPresence = () => {
-                update(this);
-            };
-            on(window, `${type}:presence`, onPresence);
-            cleanups(this).set(type, cleanup);
-        });
-        appendToMethod(target, CONSTANTS.LIFECYCLE_DISCONNECTED, function () {
-            cleanups(this).forEach((cleanup) => cleanup());
-        });
-    };
-}
-export function Consumer(namespace) {
-    return function (target, key) {
-        const symbol = Symbol();
-        const [MAIN, SUB] = namespace.split('.');
-        const prefix = `htmlplus:${MAIN}`;
-        const cleanups = (instance) => {
-            return (instance[symbol] ||= new Map());
-        };
-        const update = (instance, state) => {
-            instance[key] = state;
-        };
-        // TODO
-        appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
-            // TODO
-            if (SUB && this[SUB])
-                return;
-            // TODO
-            let connected;
-            const options = {
-                bubbles: true
-            };
-            options.detail = (parent, state) => {
-                // TODO
-                connected = true;
-                update(this, state);
-                const cleanup = () => {
-                    off(parent, `${prefix}:update`, onUpdate);
-                    cleanups(this).delete(prefix);
-                    update(this, undefined);
-                };
-                const onUpdate = (event) => {
-                    update(this, event.detail);
-                };
-                on(parent, `${prefix}:update`, onUpdate);
-                cleanups(this).set(prefix, cleanup);
-            };
-            dispatch(this, `${prefix}:presence`, options);
-            // TODO: When the `Provider` element is activated after the `Consumer` element.
-            !connected && setTimeout(() => dispatch(this, `${prefix}:presence`, options));
-        });
-        appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATE, function (states) {
-            if (cleanups(this).size && !states.has(SUB))
-                return;
-            cleanups(this).get(`${prefix}:${states.get(SUB)}`)?.();
-            const type = `${prefix}:${this[SUB]}`;
-            const cleanup = () => {
-                off(window, `${type}:disconnect`, onDisconnect);
-                off(window, `${type}:update`, onUpdate);
-                cleanups(this).delete(type);
-                update(this, undefined);
-            };
-            const onDisconnect = () => {
-                update(this, undefined);
-            };
-            const onUpdate = (event) => {
-                update(this, event.detail);
-            };
-            on(window, `${type}:disconnect`, onDisconnect);
-            on(window, `${type}:update`, onUpdate);
-            cleanups(this).set(type, cleanup);
-            dispatch(window, `${type}:presence`);
-        });
-        appendToMethod(target, CONSTANTS.LIFECYCLE_DISCONNECTED, function () {
-            cleanups(this).forEach((cleanup) => cleanup());
-        });
-    };
-}

package/client/decorators/direction.d.ts

@@ -1,5 +0,0 @@
-/**
- * Indicates whether the [Direction](https://mdn.io/css-direction)
- * of the element is `Right-To-Left` or `Left-To-Right`.
- */
-export declare function Direction(): (target: import("../../types/index.js").HTMLPlusElement, key: PropertyKey) => void;

package/client/decorators/direction.js

@@ -1,8 +0,0 @@
-import { direction, toDecorator } from '../utils/index.js';
-/**
- * Indicates whether the [Direction](https://mdn.io/css-direction)
- * of the element is `Right-To-Left` or `Left-To-Right`.
- */
-export function Direction() {
-    return toDecorator(direction);
-}

package/client/decorators/element.d.ts

@@ -1,7 +0,0 @@
-import { HTMLPlusElement } from '../../types/index.js';
-/**
- * The class marked with this decorator is considered a
- * [Custom Element](https://mdn.io/using-custom-elements),
- * and its name, in kebab-case, serves as the element name.
- */
-export declare function Element(): (constructor: HTMLPlusElement) => void;

package/client/decorators/element.js

@@ -1,65 +0,0 @@
-import { camelCase } from 'change-case';
-import * as CONSTANTS from '../../constants/index.js';
-import { call, getConfig, getTag, isServer, request } from '../utils/index.js';
-/**
- * The class marked with this decorator is considered a
- * [Custom Element](https://mdn.io/using-custom-elements),
- * and its name, in kebab-case, serves as the element name.
- */
-export function Element() {
-    return function (constructor) {
-        if (isServer())
-            return;
-        const tag = getTag(constructor);
-        if (customElements.get(tag))
-            return;
-        customElements.define(tag, proxy(constructor));
-    };
-}
-const proxy = (constructor) => {
-    return class Plus extends HTMLElement {
-        static formAssociated = constructor['formAssociated'];
-        static observedAttributes = constructor['observedAttributes'];
-        constructor() {
-            super();
-            this.attachShadow({
-                mode: 'open',
-                delegatesFocus: constructor['delegatesFocus'],
-                slotAssignment: constructor['slotAssignment']
-            });
-            const instance = (this[CONSTANTS.API_INSTANCE] = new constructor());
-            instance[CONSTANTS.API_HOST] = () => this;
-            call(instance, CONSTANTS.LIFECYCLE_CONSTRUCTED);
-        }
-        adoptedCallback() {
-            call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_ADOPTED);
-        }
-        attributeChangedCallback(key, prev, next) {
-            // Ensures the integrity of readonly properties to prevent potential errors.
-            try {
-                const attribute = constructor[CONSTANTS.MAPPER]?.[key];
-                const property = attribute || camelCase(key);
-                this[property] = next;
-            }
-            catch { }
-        }
-        connectedCallback() {
-            const instance = this[CONSTANTS.API_INSTANCE];
-            // TODO: experimental for global config
-            Object.assign(instance, getConfig('element', getTag(instance), 'property'));
-            instance[CONSTANTS.API_CONNECTED] = true;
-            const connect = () => {
-                request(instance, undefined, undefined, () => {
-                    call(instance, CONSTANTS.LIFECYCLE_LOADED);
-                });
-            };
-            const callback = call(instance, CONSTANTS.LIFECYCLE_CONNECTED);
-            if (!callback?.then)
-                return connect();
-            callback.then(() => connect());
-        }
-        disconnectedCallback() {
-            call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_DISCONNECTED);
-        }
-    };
-};

package/client/decorators/event.d.ts

@@ -1,35 +0,0 @@
-import { HTMLPlusElement } from '../../types/index.js';
-/**
- * A function type that generates a `CustomEvent`.
- */
-export type EventEmitter<T = any> = (data?: T) => CustomEvent<T>;
-/**
- * An object that configures
- * [options](https://developer.mozilla.org/docs/Web/API/Event/EventEvent#options)
- * for the event dispatcher.
- */
-export interface EventOptions {
-    /**
-     * A boolean value indicating whether the event bubbles.
-     * The default is `false`.
-     */
-    bubbles?: boolean;
-    /**
-     * A boolean value indicating whether the event can be cancelled.
-     * The default is `false`.
-     */
-    cancelable?: boolean;
-    /**
-     * A boolean value indicating whether the event will trigger listeners outside of a shadow root
-     * (see [Event.composed](https://mdn.io/event-composed) for more details).
-     * The default is `false`.
-     */
-    composed?: boolean;
-}
-/**
- * Provides the capability to dispatch a [CustomEvent](https://mdn.io/custom-event)
- * from an element.
- *
- * @param options An object that configures options for the event dispatcher.
- */
-export declare function Event<T = any>(options?: EventOptions): (target: HTMLPlusElement, key: PropertyKey) => void;

package/client/decorators/event.js

@@ -1,53 +0,0 @@
-import { kebabCase, pascalCase } from 'change-case';
-import { defineProperty, dispatch, getConfig, getFramework, host } from '../utils/index.js';
-/**
- * Provides the capability to dispatch a [CustomEvent](https://mdn.io/custom-event)
- * from an element.
- *
- * @param options An object that configures options for the event dispatcher.
- */
-export function Event(options = {}) {
-    return function (target, key) {
-        defineProperty(target, key, {
-            get() {
-                return (detail) => {
-                    const element = host(this);
-                    const framework = getFramework(this);
-                    options.bubbles ??= false;
-                    let type = String(key);
-                    switch (framework) {
-                        // TODO: Experimental
-                        case 'blazor':
-                            options.bubbles = true;
-                            type = pascalCase(type);
-                            try {
-                                window['Blazor'].registerCustomEventType(type, {
-                                    createEventArgs: (event) => ({
-                                        detail: event.detail
-                                    })
-                                });
-                            }
-                            catch { }
-                            break;
-                        case 'qwik':
-                        case 'solid':
-                            type = pascalCase(type).toLowerCase();
-                            break;
-                        case 'react':
-                        case 'preact':
-                            type = pascalCase(type);
-                            break;
-                        default:
-                            type = kebabCase(type);
-                            break;
-                    }
-                    let event;
-                    event ||= getConfig('event', 'resolver')?.({ detail, element, framework, options, type });
-                    event && element.dispatchEvent(event);
-                    event ||= dispatch(this, type, { ...options, detail });
-                    return event;
-                };
-            }
-        });
-    };
-}

package/client/decorators/host.d.ts

@@ -1,4 +0,0 @@
-/**
- * Indicates the host of the element.
- */
-export declare function Host(): (target: import("../../types/index.js").HTMLPlusElement, key: PropertyKey) => void;

package/client/decorators/host.js

@@ -1,7 +0,0 @@
-import { host, toDecorator } from '../utils/index.js';
-/**
- * Indicates the host of the element.
- */
-export function Host() {
-    return toDecorator(host);
-}

package/client/decorators/index.d.ts

@@ -1,15 +0,0 @@
-export * from './bind.js';
-export * from './context.js';
-export * from './direction.js';
-export * from './element.js';
-export * from './event.js';
-export * from './host.js';
-export * from './isRTL.js';
-export * from './listen.js';
-export * from './method.js';
-export * from './property.js';
-export * from './query.js';
-export * from './queryAll.js';
-export * from './slots.js';
-export * from './state.js';
-export * from './watch.js';

package/client/decorators/index.js

@@ -1,15 +0,0 @@
-export * from './bind.js';
-export * from './context.js';
-export * from './direction.js';
-export * from './element.js';
-export * from './event.js';
-export * from './host.js';
-export * from './isRTL.js';
-export * from './listen.js';
-export * from './method.js';
-export * from './property.js';
-export * from './query.js';
-export * from './queryAll.js';
-export * from './slots.js';
-export * from './state.js';
-export * from './watch.js';

package/client/decorators/isRTL.d.ts

@@ -1,4 +0,0 @@
-/**
- * Indicates whether the direction of the element is `Right-To-Left` or not.
- */
-export declare function IsRTL(): (target: import("../../types/index.js").HTMLPlusElement, key: PropertyKey) => void;

package/client/decorators/isRTL.js

@@ -1,7 +0,0 @@
-import { isRTL, toDecorator } from '../utils/index.js';
-/**
- * Indicates whether the direction of the element is `Right-To-Left` or not.
- */
-export function IsRTL() {
-    return toDecorator(isRTL);
-}

package/client/decorators/listen.d.ts

@@ -1,52 +0,0 @@
-import { HTMLPlusElement } from '../../types/index.js';
-/**
- * An object that configures
- * [options](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener#options)
- * for the event listener.
- */
-export interface ListenOptions {
-    /**
-     * A boolean value indicating that events of this type will be dispatched to the registered
-     * `listener` before being dispatched to any `EventTarget` beneath it in the DOM tree.
-     * If not specified, defaults to `false`.
-     */
-    capture?: boolean;
-    /**
-     * A boolean value indicating that the `listener` should be invoked at most once after being added.
-     * If `true`, the `listener` would be automatically removed when invoked.
-     * If not specified, defaults to `false`.
-     */
-    once?: boolean;
-    /**
-     * A boolean value that, if `true`,
-     * indicates that the function specified by `listener` will never call
-     * [preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault).
-     * If a passive listener does call `preventDefault()`,
-     * the user agent will do nothing other than generate a console warning.
-     */
-    passive?: boolean;
-    /**
-     * An [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal).
-     * The listener will be removed when the given `AbortSignal` object's
-     * [abort()](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort) method is called.
-     * If not specified, no `AbortSignal` is associated with the listener.
-     */
-    signal?: AbortSignal;
-    /**
-     * The target element, defaults to `host`.
-     */
-    target?: 'host' | 'body' | 'document' | 'window';
-}
-/**
- * Will be called whenever the specified event is delivered to the target
- * [More](https://mdn.io/add-event-listener).
- *
- * @param type A case-sensitive string representing the [Event Type](https://mdn.io/events) to listen for.
- * @param options An object that configures
- * [options](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener#options)
- * for the event listener.
- */
-export declare function Listen(type: string, options?: ListenOptions): (target: HTMLPlusElement, key: PropertyKey, descriptor: PropertyDescriptor) => {
-    configurable: boolean;
-    get(): any;
-};

package/client/decorators/listen.js

@@ -1,37 +0,0 @@
-import * as CONSTANTS from '../../constants/index.js';
-import { appendToMethod, on, off } from '../utils/index.js';
-import { Bind } from './bind.js';
-/**
- * Will be called whenever the specified event is delivered to the target
- * [More](https://mdn.io/add-event-listener).
- *
- * @param type A case-sensitive string representing the [Event Type](https://mdn.io/events) to listen for.
- * @param options An object that configures
- * [options](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener#options)
- * for the event listener.
- */
-export function Listen(type, options) {
-    return function (target, key, descriptor) {
-        const element = (instance) => {
-            switch (options?.target) {
-                case 'body':
-                    return window.document.body;
-                case 'document':
-                    return window.document;
-                case 'window':
-                    return window;
-                case 'host':
-                    return instance;
-                default:
-                    return instance;
-            }
-        };
-        appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
-            on(element(this), type, this[key], options);
-        });
-        appendToMethod(target, CONSTANTS.LIFECYCLE_DISCONNECTED, function () {
-            off(element(this), type, this[key], options);
-        });
-        return Bind()(target, key, descriptor);
-    };
-}

package/client/decorators/method.d.ts

@@ -1,6 +0,0 @@
-import { HTMLPlusElement } from '../../types/index.js';
-/**
- * Provides a way to encapsulate functionality within an element
- * and invoke it as needed, both internally and externally.
- */
-export declare function Method(): (target: HTMLPlusElement, key: PropertyKey) => void;

package/client/decorators/method.js

@@ -1,15 +0,0 @@
-import * as CONSTANTS from '../../constants/index.js';
-import { appendToMethod, defineProperty, host } from '../utils/index.js';
-/**
- * Provides a way to encapsulate functionality within an element
- * and invoke it as needed, both internally and externally.
- */
-export function Method() {
-    return function (target, key) {
-        appendToMethod(target, CONSTANTS.LIFECYCLE_CONSTRUCTED, function () {
-            defineProperty(host(this), key, {
-                get: () => this[key].bind(this)
-            });
-        });
-    };
-}

package/client/decorators/property.d.ts

@@ -1,25 +0,0 @@
-import { HTMLPlusElement } from '../../types/index.js';
-/**
- * The configuration for property decorator.
- */
-export interface PropertyOptions {
-    /**
-     * Specifies the name of the attribute related to the property.
-     */
-    attribute?: string;
-    /**
-     * Whether property value is reflected back to the associated attribute. default is `false`.
-     */
-    reflect?: boolean;
-    /**
-     * Specifies the property `type` and supports
-     * [data types](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures).
-     * If this value is not set, it will be set automatically during transforming.
-     */
-    type?: any;
-}
-/**
- * Creates a reactive property, reflecting a corresponding attribute value,
- * and updates the element when the property is set.
- */
-export declare function Property(options?: PropertyOptions): (target: HTMLPlusElement, key: PropertyKey, descriptor?: PropertyDescriptor) => void;