@htmlplus/element 2.12.0 → 2.13.0

package/client/utils/index.js

@@ -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';

package/client/utils/isCSSColor.d.ts

@@ -1,5 +0,0 @@
-/**
- * Determines whether the given input string is a valid
- * [CSS Color](https://mdn.io/color-value) or not.
- */
-export declare const isCSSColor: (input: string) => boolean;

package/client/utils/isCSSColor.js

@@ -1,9 +0,0 @@
-/**
- * Determines whether the given input string is a valid
- * [CSS Color](https://mdn.io/color-value) or not.
- */
-export const isCSSColor = (input) => {
-    const option = new Option();
-    option.style.color = input;
-    return option.style.color !== '';
-};

package/client/utils/isEvent.d.ts

@@ -1 +0,0 @@
-export declare const isEvent: (input: string) => boolean;

package/client/utils/isEvent.js

@@ -1,3 +0,0 @@
-export const isEvent = (input) => {
-    return !!input?.match(/on[A-Z]\w+/g);
-};

package/client/utils/isRTL.d.ts

@@ -1,5 +0,0 @@
-import { HTMLPlusElement } from '../../types/index.js';
-/**
- * Indicates whether the direction of the element is `Right-To-Left` or not.
- */
-export declare const isRTL: (target: HTMLPlusElement) => boolean;

package/client/utils/isRTL.js

@@ -1,5 +0,0 @@
-import { direction } from './direction.js';
-/**
- * Indicates whether the direction of the element is `Right-To-Left` or not.
- */
-export const isRTL = (target) => direction(target) == 'rtl';

package/client/utils/isServer.d.ts

@@ -1,4 +0,0 @@
-/**
- * Indicates whether the current code is running on a server.
- */
-export declare const isServer: () => boolean;

package/client/utils/isServer.js

@@ -1,6 +0,0 @@
-/**
- * Indicates whether the current code is running on a server.
- */
-export const isServer = () => {
-    return !(typeof window != 'undefined' && window.document);
-};

package/client/utils/merge.d.ts

@@ -1 +0,0 @@
-export declare const merge: (target: any, ...sources: any[]) => any;

package/client/utils/merge.js

@@ -1,22 +0,0 @@
-import { typeOf } from './typeOf.js';
-export const merge = (target, ...sources) => {
-    for (const source of sources) {
-        if (!source)
-            continue;
-        if (typeOf(source) != 'object') {
-            target = source;
-            continue;
-        }
-        for (const key of Object.keys(source)) {
-            if (target[key] instanceof Object &&
-                source[key] instanceof Object &&
-                target[key] !== source[key]) {
-                target[key] = merge(target[key], source[key]);
-            }
-            else {
-                target[key] = source[key];
-            }
-        }
-    }
-    return target;
-};

package/client/utils/query.d.ts

@@ -1,5 +0,0 @@
-import { HTMLPlusElement } from '../../types/index.js';
-/**
- * Selects the first element in the shadow dom that matches a specified CSS selector.
- */
-export declare function query(target: HTMLPlusElement, selectors: string): Element | null | undefined;

package/client/utils/query.js

@@ -1,7 +0,0 @@
-import { shadowRoot } from './shadowRoot.js';
-/**
- * Selects the first element in the shadow dom that matches a specified CSS selector.
- */
-export function query(target, selectors) {
-    return shadowRoot(target)?.querySelector(selectors);
-}

package/client/utils/queryAll.d.ts

@@ -1,5 +0,0 @@
-import { HTMLPlusElement } from '../../types/index.js';
-/**
- * Selects all elements in the shadow dom that match a specified CSS selector.
- */
-export declare function queryAll(target: HTMLPlusElement, selectors: string): NodeListOf<Element> | undefined;

package/client/utils/queryAll.js

@@ -1,7 +0,0 @@
-import { shadowRoot } from './shadowRoot.js';
-/**
- * Selects all elements in the shadow dom that match a specified CSS selector.
- */
-export function queryAll(target, selectors) {
-    return shadowRoot(target)?.querySelectorAll(selectors);
-}

package/client/utils/request.d.ts

@@ -1,9 +0,0 @@
-import { HTMLPlusElement } from '../../types/index.js';
-/**
- * Updates the DOM with a scheduled task.
- * @param target The element instance.
- * @param name Property/State name.
- * @param previous The previous value of Property/State.
- * @param callback Invoked when the rendering phase is completed.
- */
-export declare const request: (target: HTMLPlusElement, name?: string, previous?: any, callback?: (skipped: boolean) => void) => void;

package/client/utils/request.js

@@ -1,106 +0,0 @@
-import * as CONSTANTS from '../../constants/index.js';
-import { call } from './call.js';
-import { getStyles } from './getStyles.js';
-import { shadowRoot } from './shadowRoot.js';
-import { task } from './task.js';
-import { render } from './uhtml.js';
-/**
- * Updates the DOM with a scheduled task.
- * @param target The element instance.
- * @param name Property/State name.
- * @param previous The previous value of Property/State.
- * @param callback Invoked when the rendering phase is completed.
- */
-export const request = (target, name, previous, callback) => {
-    // Creates/Gets a stacks.
-    const stacks = (target[CONSTANTS.API_STACKS] ||= new Map());
-    // Creates/Updates a stack.
-    const stack = stacks.get(name) || { callbacks: [], previous };
-    // Adds the callback to the stack, if exists.
-    callback && stack.callbacks.push(callback);
-    // Stores the stack.
-    stacks.set(name, stack);
-    // Defines a handler.
-    const handler = () => {
-        // Skips the rendering phase if DOM isn't ready.
-        if (!target[CONSTANTS.API_CONNECTED])
-            return;
-        // Calculates the states to pass into lifecycles' callbacks.
-        const states = new Map(Array.from(stacks)
-            .filter((stack) => stack[0])
-            .map((stack) => [stack[0], stack[1].previous]));
-        // Calls the lifecycle's callback before the rendering phase.
-        call(target, CONSTANTS.LIFECYCLE_UPDATE, states);
-        // Renders template to the DOM.
-        render(shadowRoot(target), () => call(target, CONSTANTS.METHOD_RENDER));
-        // Invokes requests' callback.
-        stacks.forEach((state) => {
-            state.callbacks.forEach((callback, index, callbacks) => {
-                callback(callbacks.length - 1 != index);
-            });
-        });
-        // TODO
-        (() => {
-            const raw = getStyles(target);
-            if (!raw)
-                return;
-            const regex1 = /this-([\w-]+)(?:-([\w-]+))?/g;
-            const regex2 = /(\s*\w+\s*:\s*(undefined|null)\s*;?)/g;
-            const hasGlobal = raw.includes(':global');
-            const hasVariable = raw.includes('this-');
-            let localSheet = target[CONSTANTS.API_STYLE];
-            let globalSheet = target.constructor[CONSTANTS.API_STYLE];
-            if (!hasVariable && localSheet)
-                return;
-            const parsed = raw
-                .replace(regex1, (match, key) => {
-                let value = target;
-                for (const section of key.split('-')) {
-                    value = value?.[section];
-                }
-                return value;
-            })
-                .replace(regex2, '');
-            if (!localSheet) {
-                localSheet = new CSSStyleSheet();
-                target[CONSTANTS.API_STYLE] = localSheet;
-                shadowRoot(target).adoptedStyleSheets.push(localSheet);
-            }
-            const localStyle = parsed;
-            localSheet.replace(localStyle);
-            if (!hasGlobal || globalSheet)
-                return;
-            if (!globalSheet) {
-                globalSheet = new CSSStyleSheet();
-                target.constructor[CONSTANTS.API_STYLE] = globalSheet;
-                document.adoptedStyleSheets.push(globalSheet);
-            }
-            const globalStyle = parsed
-                .split('}')
-                .map((rule) => {
-                let [selectors, properties] = rule.split('{');
-                selectors = selectors
-                    .split(',')
-                    .map((selector) => selector.trim())
-                    .filter((selector) => selector.startsWith(':global'))
-                    .map((selector) => selector.replace(':global', ''))
-                    .map((selector) => selector.trim())
-                    .join(',');
-                return selectors ? `${selectors}{${properties}}` : '';
-            })
-                .filter((selector) => !!selector)
-                .join('');
-            globalSheet.replace(globalStyle);
-        })();
-        // Calls the lifecycle's callback after the rendering phase.
-        call(target, CONSTANTS.LIFECYCLE_UPDATED, states);
-        // Clears stacks.
-        stacks.clear();
-        // TODO: related to the @Watch decorator.
-        target[CONSTANTS.API_RENDER_COMPLETED] = true;
-    };
-    // Creates/Gets a micro task function.
-    target[CONSTANTS.API_REQUEST] ||= task({ handler });
-    // Calls the micro task.
-    call(target, CONSTANTS.API_REQUEST);
-};

package/client/utils/shadowRoot.d.ts

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

package/client/utils/shadowRoot.js

@@ -1,4 +0,0 @@
-import { host } from './host.js';
-export const shadowRoot = (target) => {
-    return host(target)?.shadowRoot;
-};

package/client/utils/slots.d.ts

@@ -1,9 +0,0 @@
-import { HTMLPlusElement } from '../../types/index.js';
-type Slots = {
-    [key: string]: boolean;
-};
-/**
- * Returns the slots name.
- */
-export declare const slots: (target: HTMLElement | HTMLPlusElement) => Slots;
-export {};

package/client/utils/slots.js

@@ -1,18 +0,0 @@
-import { host } from './host.js';
-/**
- * Returns the slots name.
- */
-export const slots = (target) => {
-    const element = host(target);
-    const slots = {};
-    const children = Array.from(element.childNodes);
-    for (const child of children) {
-        if (child.nodeName == '#comment')
-            continue;
-        const name = child['slot'] || (child.nodeValue?.trim() && 'default') || ('slot' in child && 'default');
-        if (!name)
-            continue;
-        slots[name] = true;
-    }
-    return slots;
-};

package/client/utils/styles.d.ts

@@ -1,4 +0,0 @@
-/**
- * Converts a JavaScript object containing CSS styles to a CSS string.
- */
-export declare const styles: (input: object) => string;

package/client/utils/styles.js

@@ -1,10 +0,0 @@
-import { kebabCase } from 'change-case';
-/**
- * Converts a JavaScript object containing CSS styles to a CSS string.
- */
-export const styles = (input) => {
-    return Object.keys(input)
-        .filter((key) => input[key] !== undefined && input[key] !== null)
-        .map((key) => `${key.startsWith('--') ? '--' : ''}${kebabCase(key)}: ${input[key]}`)
-        .join('; ');
-};

package/client/utils/task.d.ts

@@ -1,6 +0,0 @@
-export interface QueueOptions {
-    canStart?: () => boolean;
-    canRun?: () => boolean;
-    handler: () => void;
-}
-export declare const task: (options: QueueOptions) => () => Promise<boolean>;

package/client/utils/task.js

@@ -1,34 +0,0 @@
-export const task = (options) => {
-    let running, promise;
-    const run = () => {
-        if (options.canStart && !options.canStart())
-            return Promise.resolve(false);
-        if (!running)
-            promise = enqueue();
-        return promise;
-    };
-    const enqueue = async () => {
-        running = true;
-        try {
-            await promise;
-        }
-        catch (error) {
-            Promise.reject(error);
-        }
-        // TODO: maybe is optional
-        if (!running)
-            return promise;
-        try {
-            if (options.canRun && !options.canRun())
-                return (running = false);
-            options.handler();
-            running = false;
-            return true;
-        }
-        catch (error) {
-            running = false;
-            throw error;
-        }
-    };
-    return run;
-};

package/client/utils/toBoolean.d.ts

@@ -1 +0,0 @@
-export declare const toBoolean: (input: any) => boolean;

package/client/utils/toBoolean.js

@@ -1,3 +0,0 @@
-export const toBoolean = (input) => {
-    return ![undefined, null, false, 'false'].includes(input);
-};

package/client/utils/toDecorator.d.ts

@@ -1,2 +0,0 @@
-import { HTMLPlusElement } from '../../types/index.js';
-export declare function toDecorator(util: Function, ...parameters: any[]): (target: HTMLPlusElement, key: PropertyKey) => void;

package/client/utils/toDecorator.js

@@ -1,10 +0,0 @@
-import { defineProperty } from './defineProperty.js';
-export function toDecorator(util, ...parameters) {
-    return function (target, key) {
-        defineProperty(target, key, {
-            get() {
-                return util(this, ...parameters);
-            }
-        });
-    };
-}

package/client/utils/toEvent.d.ts

@@ -1 +0,0 @@
-export declare const toEvent: (input: string) => string;

package/client/utils/toEvent.js

@@ -1,3 +0,0 @@
-export const toEvent = (input) => {
-    return input?.slice(2).toLowerCase();
-};

package/client/utils/toProperty.d.ts

@@ -1 +0,0 @@
-export declare const toProperty: (input: any, type?: any) => any;

package/client/utils/toProperty.js

@@ -1,55 +0,0 @@
-import * as CONSTANTS from '../../constants/index.js';
-import { typeOf } from './typeOf.js';
-export const toProperty = (input, type) => {
-    if (type === undefined)
-        return input;
-    const string = `${input}`;
-    if (CONSTANTS.TYPE_BOOLEAN & type || type === Boolean) {
-        if (string === '')
-            return true;
-        if (string === 'true')
-            return true;
-        if (string === 'false')
-            return false;
-    }
-    if (CONSTANTS.TYPE_NUMBER & type || type === Number) {
-        if (string != '' && !isNaN(input)) {
-            return parseFloat(input);
-        }
-    }
-    if (CONSTANTS.TYPE_NULL & type || type === null) {
-        if (string === 'null') {
-            return null;
-        }
-    }
-    if (CONSTANTS.TYPE_DATE & type || type === Date) {
-        const value = new Date(input);
-        if (value.toString() != 'Invalid Date') {
-            return value;
-        }
-    }
-    if (CONSTANTS.TYPE_ARRAY & type || type === Array) {
-        try {
-            const value = JSON.parse(input);
-            if (typeOf(value) == 'array') {
-                return value;
-            }
-        }
-        catch { }
-    }
-    if (CONSTANTS.TYPE_OBJECT & type || type === Object) {
-        try {
-            const value = JSON.parse(input);
-            if (typeOf(value) == 'object') {
-                return value;
-            }
-        }
-        catch { }
-    }
-    if (CONSTANTS.TYPE_UNDEFINED & type || type === undefined) {
-        if (string === 'undefined') {
-            return undefined;
-        }
-    }
-    return input;
-};

package/client/utils/toUnit.d.ts

@@ -1,4 +0,0 @@
-/**
- * Converts a value to a unit.
- */
-export declare const toUnit: (input: string | number, unit?: string) => string;

package/client/utils/toUnit.js

@@ -1,10 +0,0 @@
-/**
- * Converts a value to a unit.
- */
-export const toUnit = (input, unit = 'px') => {
-    if (input === null || input === undefined || input === '')
-        return input;
-    if (isNaN(+input))
-        return String(input);
-    return Number(input) + unit;
-};

package/client/utils/typeOf.d.ts

@@ -1,3 +0,0 @@
-type Types = 'array' | 'boolean' | 'function' | 'number' | 'object' | 'string';
-export declare const typeOf: (input: any) => Types;
-export {};

package/client/utils/typeOf.js

@@ -1,6 +0,0 @@
-export const typeOf = (input) => {
-    return Object.prototype.toString
-        .call(input)
-        .replace(/\[|\]|object| /g, '')
-        .toLowerCase();
-};

package/client/utils/uhtml.d.ts

@@ -1,22 +0,0 @@
-/**
- * Holds all details wrappers needed to render the content further on.
- * @constructor
- * @param {string} type The hole type, either `html` or `svg`.
- * @param {string[]} template The template literals used to the define the content.
- * @param {Array} values Zero, one, or more interpolated values to render.
- */
-export class Hole {
-    constructor(type: any, template: any, values: any);
-    type: any;
-    template: any;
-    values: any;
-}
-export const html: ((template: any, ...values: any[]) => Hole) & {
-    for(ref: any, id: any): any;
-    node: (template: any, ...values: any[]) => any;
-};
-export function render(where: any, what: any): any;
-export const svg: ((template: any, ...values: any[]) => Hole) & {
-    for(ref: any, id: any): any;
-    node: (template: any, ...values: any[]) => any;
-};