@htmlplus/element 2.11.0 → 2.13.0

package/client/decorators/property.js

@@ -1,94 +0,0 @@
-import { kebabCase } from 'change-case';
-import * as CONSTANTS from '../../constants/index.js';
-import { appendToMethod, defineProperty, host, request, toProperty, updateAttribute } from '../utils/index.js';
-/**
- * Creates a reactive property, reflecting a corresponding attribute value,
- * and updates the element when the property is set.
- */
-export function Property(options) {
-    return function (target, key, descriptor) {
-        // Creates a unique symbol for the lock flag.
-        const locked = Symbol();
-        // Converts property name to string.
-        const name = String(key);
-        // Calculates attribute.
-        const attribute = options?.attribute || kebabCase(name);
-        // Registers an attribute that is intricately linked to the property.
-        (target.constructor['observedAttributes'] ||= []).push(attribute);
-        // TODO
-        if (attribute) {
-            // TODO
-            target.constructor[CONSTANTS.MAPPER] ||= {};
-            // TODO
-            target.constructor[CONSTANTS.MAPPER][attribute] = name;
-        }
-        // TODO: This feature is an experimental
-        // When the property is a getter function.
-        if (descriptor) {
-            // Checks the reflection.
-            if (options?.reflect) {
-                // Stores the original getter function.
-                const getter = descriptor.get;
-                // Defines a new getter function.
-                descriptor.get = function () {
-                    const value = getter?.apply(this);
-                    this[locked] = true;
-                    updateAttribute(this, attribute, value);
-                    this[locked] = false;
-                    return value;
-                };
-                // TODO: Check the lifecycle
-                appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function () {
-                    // Calls the getter function to update the related attribute.
-                    this[key];
-                });
-            }
-        }
-        // When the property is normal.
-        else {
-            // Creates a unique symbol.
-            const symbol = Symbol();
-            // Defines a getter function to use in the target class.
-            function get() {
-                return this[symbol];
-            }
-            // Defines a setter function to use in the target class.
-            function set(next) {
-                const previous = this[symbol];
-                if (next === previous)
-                    return;
-                this[symbol] = next;
-                request(this, name, previous, (skipped) => {
-                    if (skipped)
-                        return;
-                    if (!options?.reflect)
-                        return;
-                    this[locked] = true;
-                    updateAttribute(this, attribute, next);
-                    this[locked] = false;
-                });
-            }
-            // Attaches the getter and setter functions to the current property of the target class.
-            defineProperty(target, key, { get, set });
-        }
-        // TODO: Check the lifecycle
-        appendToMethod(target, CONSTANTS.LIFECYCLE_CONSTRUCTED, function () {
-            // Defines a getter function to use in the host element.
-            const get = () => {
-                return this[key];
-            };
-            // Defines a setter function to use in the host element.
-            const set = descriptor
-                ? undefined
-                : (input) => {
-                    if (this[locked]) {
-                        return;
-                    }
-                    this[key] = toProperty(input, options?.type);
-                };
-            // TODO: Check the configuration.
-            // Attaches the getter and setter functions to the current property of the host element.
-            defineProperty(host(this), key, { get, set, configurable: true });
-        });
-    };
-}

package/client/decorators/query.d.ts

@@ -1,9 +0,0 @@
-/**
- * Selects the first element in the shadow dom that matches a specified CSS selector.
- *
- * @param selectors A string containing one or more selectors to match.
- * This string must be a valid CSS selector string; if it isn't, a `SyntaxError` exception is thrown. See
- * [Locating DOM elements using selectors](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
- * for more about selectors and how to manage them.
- */
-export declare function Query(selectors: string): (target: import("../../types/index.js").HTMLPlusElement, key: PropertyKey) => void;

package/client/decorators/query.js

@@ -1,12 +0,0 @@
-import { query, toDecorator } from '../utils/index.js';
-/**
- * Selects the first element in the shadow dom that matches a specified CSS selector.
- *
- * @param selectors A string containing one or more selectors to match.
- * This string must be a valid CSS selector string; if it isn't, a `SyntaxError` exception is thrown. See
- * [Locating DOM elements using selectors](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
- * for more about selectors and how to manage them.
- */
-export function Query(selectors) {
-    return toDecorator(query, selectors);
-}

package/client/decorators/queryAll.d.ts

@@ -1,12 +0,0 @@
-/**
- * Selects all elements in the shadow dom that match a specified CSS selector.
- *
- * @param selectors A string containing one or more selectors to match against.
- * This string must be a valid
- * [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors)
- * string; if it's not, a `SyntaxError` exception is thrown. See
- * [Locating DOM elements using selectors](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
- * for more information about using selectors to identify elements.
- * Multiple selectors may be specified by separating them using commas.
- */
-export declare function QueryAll(selectors: string): (target: import("../../types/index.js").HTMLPlusElement, key: PropertyKey) => void;

package/client/decorators/queryAll.js

@@ -1,15 +0,0 @@
-import { queryAll, toDecorator } from '../utils/index.js';
-/**
- * Selects all elements in the shadow dom that match a specified CSS selector.
- *
- * @param selectors A string containing one or more selectors to match against.
- * This string must be a valid
- * [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors)
- * string; if it's not, a `SyntaxError` exception is thrown. See
- * [Locating DOM elements using selectors](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
- * for more information about using selectors to identify elements.
- * Multiple selectors may be specified by separating them using commas.
- */
-export function QueryAll(selectors) {
-    return toDecorator(queryAll, selectors);
-}

package/client/decorators/slots.d.ts

@@ -1,4 +0,0 @@
-/**
- * Returns the slots name.
- */
-export declare function Slots(): (target: import("../../types/index.js").HTMLPlusElement, key: PropertyKey) => void;

package/client/decorators/slots.js

@@ -1,7 +0,0 @@
-import { slots, toDecorator } from '../utils/index.js';
-/**
- * Returns the slots name.
- */
-export function Slots() {
-    return toDecorator(slots);
-}

package/client/decorators/state.d.ts

@@ -1,6 +0,0 @@
-import { HTMLPlusElement } from '../../types/index.js';
-/**
- * Applying this decorator to any `class property` will trigger the
- * element to re-render upon the desired property changes.
- */
-export declare function State(): (target: HTMLPlusElement, key: PropertyKey) => void;

package/client/decorators/state.js

@@ -1,23 +0,0 @@
-import { defineProperty, request } from '../utils/index.js';
-/**
- * Applying this decorator to any `class property` will trigger the
- * element to re-render upon the desired property changes.
- */
-export function State() {
-    return function (target, key) {
-        const name = String(key);
-        const symbol = Symbol();
-        function get() {
-            return this[symbol];
-        }
-        function set(next) {
-            const previous = this[symbol];
-            if (next === previous)
-                return;
-            this[symbol] = next;
-            request(this, name, previous);
-        }
-        // TODO: configurable
-        defineProperty(target, key, { get, set, configurable: true });
-    };
-}

package/client/decorators/watch.d.ts

@@ -1,11 +0,0 @@
-import { HTMLPlusElement } from '../../types/index.js';
-/**
- * Monitors `@Property` and `@State` to detect changes.
- * The decorated method will be called after any changes,
- * with the `key`, `newValue`, and `oldValue` as parameters.
- * If the `key` is not defined, all `@Property` and `@State` are considered.
- *
- * @param keys Collection of `@Property` and `@State` names.
- * @param immediate Triggers the callback immediately after initialization.
- */
-export declare function Watch(keys?: string | string[], immediate?: boolean): (target: HTMLPlusElement, key: PropertyKey) => void;

package/client/decorators/watch.js

@@ -1,31 +0,0 @@
-import * as CONSTANTS from '../../constants/index.js';
-import { appendToMethod } from '../utils/index.js';
-/**
- * Monitors `@Property` and `@State` to detect changes.
- * The decorated method will be called after any changes,
- * with the `key`, `newValue`, and `oldValue` as parameters.
- * If the `key` is not defined, all `@Property` and `@State` are considered.
- *
- * @param keys Collection of `@Property` and `@State` names.
- * @param immediate Triggers the callback immediately after initialization.
- */
-export function Watch(keys, immediate) {
-    return function (target, key) {
-        // Gets all keys
-        const all = [keys].flat().filter((item) => item);
-        // Registers a lifecycle to detect changes.
-        appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function (states) {
-            // Skips the logic if 'immediate' wasn't passed.
-            if (!immediate && !this[CONSTANTS.API_RENDER_COMPLETED])
-                return;
-            // Loops the keys.
-            states.forEach((previous, item) => {
-                // Skips the current key.
-                if (all.length && !all.includes(item))
-                    return;
-                // Invokes the method with parameters.
-                this[key](this[item], previous, item);
-            });
-        });
-    };
-}

package/client/index.d.ts

@@ -1,2 +0,0 @@
-export * from './decorators/index.js';
-export { classes, direction, dispatch, getConfig, host, isCSSColor, isRTL, query, queryAll, on, off, slots, toUnit, setConfig, type Config, type ConfigOptions } from './utils/index.js';

package/client/index.js

@@ -1,2 +0,0 @@
-export * from './decorators/index.js';
-export { classes, direction, dispatch, getConfig, host, isCSSColor, isRTL, query, queryAll, on, off, slots, toUnit, setConfig } from './utils/index.js';

package/client/utils/appendToMethod.d.ts

@@ -1 +0,0 @@
-export declare const appendToMethod: (target: Object, key: PropertyKey, handler: (this: any, ...parameters: Array<any>) => void) => void;

package/client/utils/appendToMethod.js

@@ -1,15 +0,0 @@
-export const appendToMethod = (target, key, handler) => {
-    // Gets the previous function
-    const previous = target[key];
-    // Creates new function
-    function next(...parameters) {
-        // Calls the previous
-        const result = previous?.bind(this)(...parameters);
-        // Calls the appended
-        handler.bind(this)(...parameters);
-        // Returns the result
-        return result;
-    }
-    // Replaces the next with the previous one
-    target[key] = next;
-};

package/client/utils/attributes.d.ts

@@ -1,2 +0,0 @@
-import { HTMLPlusElement } from '../../types/index.js';
-export declare const attributes: (target: HTMLElement | HTMLPlusElement, attributes: any[]) => void;

package/client/utils/attributes.js

@@ -1,33 +0,0 @@
-import { off, on } from './event.js';
-import { host } from './host.js';
-import { isEvent } from './isEvent.js';
-import { toEvent } from './toEvent.js';
-import { updateAttribute } from './updateAttribute.js';
-const symbol = Symbol();
-export const attributes = (target, attributes) => {
-    const element = host(target);
-    const prev = element[symbol] || {};
-    const next = Object.assign({}, ...attributes);
-    const prevClass = (prev.class || '').split(' ');
-    const nextClass = (next.class || '').split(' ');
-    const newClass = element.className
-        .split(' ')
-        .filter((key) => !prevClass.includes(key) && !nextClass.includes(key))
-        .concat(nextClass)
-        .filter((key) => key)
-        .join(' ');
-    updateAttribute(element, 'class', newClass || undefined);
-    if (prev.style || next.style)
-        element.setAttribute('style', next.style || '');
-    for (const key in prev)
-        isEvent(key) && off(element, toEvent(key), prev[key]);
-    for (const key in next) {
-        if (['class', 'style'].includes(key))
-            continue;
-        if (isEvent(key))
-            on(element, toEvent(key), next[key]);
-        else
-            updateAttribute(element, key, next[key]);
-    }
-    element[symbol] = { ...next };
-};

package/client/utils/call.d.ts

@@ -1 +0,0 @@
-export declare const call: (target: Object, key: PropertyKey, ...parameters: Array<any>) => any;

package/client/utils/call.js

@@ -1,3 +0,0 @@
-export const call = (target, key, ...parameters) => {
-    return target[key]?.call(target, ...parameters);
-};

package/client/utils/classes.d.ts

@@ -1,4 +0,0 @@
-/**
- * TODO
- */
-export declare const classes: (input: any, smart?: boolean) => string;

package/client/utils/classes.js

@@ -1,45 +0,0 @@
-import { kebabCase } from 'change-case';
-import { typeOf } from './typeOf.js';
-/**
- * TODO
- */
-export const classes = (input, smart) => {
-    const result = [];
-    switch (typeOf(input)) {
-        case 'array': {
-            for (const item of input) {
-                result.push(classes(item, smart));
-            }
-            break;
-        }
-        case 'object': {
-            const keys = Object.keys(input);
-            for (const key of keys) {
-                const value = input[key];
-                const name = kebabCase(key);
-                const type = typeOf(value);
-                if (!smart) {
-                    value && result.push(name);
-                    continue;
-                }
-                switch (type) {
-                    case 'boolean': {
-                        value && result.push(`${name}`);
-                        break;
-                    }
-                    case 'number':
-                    case 'string': {
-                        result.push(`${name}-${value}`);
-                        break;
-                    }
-                }
-            }
-            break;
-        }
-        case 'string': {
-            result.push(input);
-            break;
-        }
-    }
-    return result.filter((item) => item).join(' ');
-};

package/client/utils/config.d.ts

@@ -1,39 +0,0 @@
-/**
- * TODO
- */
-export interface Config {
-    event?: {
-        resolver?: (parameters: any) => CustomEvent | undefined;
-    };
-    asset?: {
-        [key: string]: any;
-    };
-    element?: {
-        [key: string]: {
-            property?: {
-                [key: string]: any;
-            };
-        };
-    };
-}
-/**
- * TODO
- */
-export interface ConfigOptions {
-    /**
-     * TODO
-     */
-    force?: boolean;
-    /**
-     * TODO
-     */
-    override?: boolean;
-}
-/**
- * TODO
- */
-export declare const getConfig: (...keys: string[]) => any;
-/**
- * TODO
- */
-export declare const setConfig: (config: Config, options?: ConfigOptions) => void;

package/client/utils/config.js

@@ -1,28 +0,0 @@
-import { isServer } from './isServer.js';
-import { merge } from './merge.js';
-const DEFAULTS = {
-    element: {}
-};
-/**
- * TODO
- */
-export const getConfig = (...keys) => {
-    if (isServer())
-        return;
-    let config = window[`$htmlplus$`];
-    for (const key of keys) {
-        if (!config)
-            break;
-        config = config[key];
-    }
-    return config;
-};
-/**
- * TODO
- */
-export const setConfig = (config, options) => {
-    if (isServer())
-        return;
-    const previous = options?.override ? {} : window[`$htmlplus$`];
-    window[`$htmlplus$`] = merge({}, DEFAULTS, previous, config);
-};

package/client/utils/defineProperty.d.ts

@@ -1 +0,0 @@
-export declare const defineProperty: <T>(o: T, p: PropertyKey, attributes: PropertyDescriptor & ThisType<any>) => T;

package/client/utils/defineProperty.js

@@ -1 +0,0 @@
-export const defineProperty = Object.defineProperty;

package/client/utils/direction.d.ts

@@ -1,6 +0,0 @@
-import { HTMLPlusElement } from '../../types/index.js';
-/**
- * Indicates whether the [Direction](https://mdn.io/css-direction)
- * of the element is `Right-To-Left` or `Left-To-Right`.
- */
-export declare const direction: (target: HTMLElement | HTMLPlusElement) => "ltr" | "rtl";

package/client/utils/direction.js

@@ -1,8 +0,0 @@
-import { host } from './host.js';
-/**
- * Indicates whether the [Direction](https://mdn.io/css-direction)
- * of the element is `Right-To-Left` or `Left-To-Right`.
- */
-export const direction = (target) => {
-    return getComputedStyle(host(target)).getPropertyValue('direction');
-};

package/client/utils/event.d.ts

@@ -1,13 +0,0 @@
-import { HTMLPlusElement } from '../../types/index.js';
-/**
- * TODO
- */
-export declare const dispatch: <T = any>(target: HTMLElement | HTMLPlusElement, type: string, eventInitDict?: CustomEventInit<T>) => CustomEvent<T>;
-/**
- * TODO
- */
-export declare const on: (target: Window | Document | HTMLElement | HTMLPlusElement, type: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void;
-/**
- * TODO
- */
-export declare const off: (target: Window | Document | HTMLElement | HTMLPlusElement, type: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void;

package/client/utils/event.js

@@ -1,48 +0,0 @@
-import { host } from './host.js';
-const outsides = [];
-/**
- * TODO
- */
-export const dispatch = (target, type, eventInitDict) => {
-    const event = new CustomEvent(type, eventInitDict);
-    host(target).dispatchEvent(event);
-    return event;
-};
-/**
- * TODO
- */
-export const on = (target, type, handler, options) => {
-    const element = host(target);
-    if (type != 'outside') {
-        return element.addEventListener(type, handler, options);
-    }
-    const callback = (event) => {
-        !event.composedPath().some((item) => item == element) && handler(event);
-    };
-    type = 'ontouchstart' in window.document.documentElement ? 'touchstart' : 'click';
-    on(document, type, callback, options);
-    outsides.push({
-        callback,
-        element,
-        handler,
-        options,
-        type
-    });
-};
-/**
- * TODO
- */
-export const off = (target, type, handler, options) => {
-    const element = host(target);
-    if (type != 'outside') {
-        return element.removeEventListener(type, handler, options);
-    }
-    const index = outsides.findIndex((outside) => {
-        return outside.element == element && outside.handler == handler && outside.options == options;
-    });
-    const outside = outsides[index];
-    if (!outside)
-        return;
-    off(document, outside.type, outside.callback, outside.options);
-    outsides.splice(index, 1);
-};

package/client/utils/getFramework.d.ts

@@ -1,2 +0,0 @@
-import { HTMLPlusElement } from '../../types/index.js';
-export declare const getFramework: (target: HTMLElement | HTMLPlusElement) => string | undefined;

package/client/utils/getFramework.js

@@ -1,20 +0,0 @@
-import { host } from './host.js';
-export const getFramework = (target) => {
-    const element = host(target);
-    if ('_qc_' in element)
-        return 'qwik';
-    if ('_$owner' in element)
-        return 'solid';
-    if ('__svelte_meta' in element)
-        return 'svelte';
-    if ('__vnode' in element)
-        return 'vue';
-    const keys = Object.keys(element);
-    const has = (input) => keys.some((key) => key.startsWith(input));
-    if (has('_blazor'))
-        return 'blazor';
-    if (has('__react'))
-        return 'react';
-    if (has('__zone_symbol__'))
-        return 'angular';
-};

package/client/utils/getStyles.d.ts

@@ -1,2 +0,0 @@
-import { HTMLPlusElement } from '../../types/index.js';
-export declare const getStyles: (target: HTMLPlusElement) => string | undefined;

package/client/utils/getStyles.js

@@ -1,4 +0,0 @@
-import * as CONSTANTS from '../../constants/index.js';
-export const getStyles = (target) => {
-    return target.constructor[CONSTANTS.STATIC_STYLE] ?? target[CONSTANTS.STATIC_STYLE];
-};

package/client/utils/getTag.d.ts

@@ -1,2 +0,0 @@
-import { HTMLPlusElement } from '../../types/index.js';
-export declare const getTag: (target: HTMLPlusElement) => string | undefined;

package/client/utils/getTag.js

@@ -1,4 +0,0 @@
-import * as CONSTANTS from '../../constants/index.js';
-export const getTag = (target) => {
-    return target.constructor[CONSTANTS.STATIC_TAG] ?? target[CONSTANTS.STATIC_TAG];
-};

package/client/utils/host.d.ts

@@ -1,5 +0,0 @@
-import { HTMLPlusElement } from '../../types/index.js';
-/**
- * Indicates the host of the element.
- */
-export declare const host: (target: HTMLElement | HTMLPlusElement) => HTMLElement;

package/client/utils/host.js

@@ -1,12 +0,0 @@
-import * as CONSTANTS from '../../constants/index.js';
-/**
- * Indicates the host of the element.
- */
-export const host = (target) => {
-    try {
-        return target[CONSTANTS.API_HOST]();
-    }
-    catch {
-        return target;
-    }
-};

package/client/utils/index.d.ts

@@ -1,32 +0,0 @@
-export * from './appendToMethod.js';
-export * from './attributes.js';
-export * from './call.js';
-export * from './classes.js';
-export * from './config.js';
-export * from './defineProperty.js';
-export * from './direction.js';
-export * from './event.js';
-export * from './getFramework.js';
-export * from './getStyles.js';
-export * from './getTag.js';
-export * from './host.js';
-export * from './isCSSColor.js';
-export * from './isEvent.js';
-export * from './isRTL.js';
-export * from './isServer.js';
-export * from './merge.js';
-export * from './query.js';
-export * from './queryAll.js';
-export * from './request.js';
-export * from './shadowRoot.js';
-export * from './slots.js';
-export * from './styles.js';
-export * from './task.js';
-export * from './toBoolean.js';
-export * from './toDecorator.js';
-export * from './toEvent.js';
-export * from './toProperty.js';
-export * from './toUnit.js';
-export * from './typeOf.js';
-export * from './uhtml.js';
-export * from './updateAttribute.js';