@htmlplus/element 0.3.1 → 0.4.0

package/README.md

@@ -941,8 +941,8 @@ const { start, next, finish } = compiler(...plugins);
 TODO
 
 ```js
-import compiler from '@htmlplus/element/compiler';
-import { customElement, extract, parse, read, style, validate } from '@htmlplus/element/compiler';
+import compiler from '@htmlplus/element/compiler/index.js';
+import { customElement, extract, parse, read, style, validate } from '@htmlplus/element/compiler/index.js';
 
 const { start, next, finish } = compiler(
   read(),

package/client/decorators/attributes.d.ts

@@ -0,0 +1,2 @@
+import { PlusElement } from '../../types/index.js';
+export declare function Attributes(): (target: PlusElement, propertyKey: PropertyKey) => void;

package/client/decorators/attributes.js

@@ -0,0 +1,13 @@
+import * as CONSTANTS from '../../constants/index.js';
+import { appendToMethod, host, sync } from '../utils/index.js';
+export function Attributes() {
+    return function (target, propertyKey) {
+        const updates = new Map();
+        appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
+            updates.set(this, sync(host(this)));
+        });
+        appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function () {
+            updates.get(this)(this[propertyKey]);
+        });
+    };
+}

package/client/decorators/bind.d.ts

@@ -0,0 +1,4 @@
+export declare function Bind(): (target: Object, propertyKey: PropertyKey, descriptor: PropertyDescriptor) => {
+    configurable: boolean;
+    get(): any;
+};

package/client/decorators/bind.js

@@ -0,0 +1,17 @@
+import { defineProperty } from '../utils/index.js';
+export function Bind() {
+    return function (target, propertyKey, descriptor) {
+        return {
+            configurable: true,
+            get() {
+                const value = descriptor === null || descriptor === void 0 ? void 0 : descriptor.value.bind(this);
+                defineProperty(this, propertyKey, {
+                    value,
+                    configurable: true,
+                    writable: true
+                });
+                return value;
+            }
+        };
+    };
+}

package/client/decorators/element.d.ts

@@ -0,0 +1,2 @@
+import { PlusElement } from '../../types/index.js';
+export declare function Element(tag?: string): (constructor: PlusElement) => void;

package/client/decorators/element.js

@@ -0,0 +1,53 @@
+import { camelCase, paramCase } from 'change-case';
+import * as CONSTANTS from '../../constants/index.js';
+import { call, getMembers, isServer, parseValue, request } from '../utils/index.js';
+import * as uhtml from '../vendor/uhtml.js';
+export function Element(tag) {
+    return function (constructor) {
+        if (isServer())
+            return;
+        const members = getMembers(constructor);
+        class Plus extends HTMLElement {
+            constructor() {
+                super();
+                this.attachShadow({ mode: 'open' });
+                // TODO
+                this.plus = new constructor();
+                this.plus[CONSTANTS.API_HOST] = () => this;
+                this.plus['uhtml'] = uhtml;
+                this.plus[CONSTANTS.API_READY] = true;
+            }
+            static get observedAttributes() {
+                return Object.keys(members)
+                    .filter((key) => members[key][0] != CONSTANTS.TYPE_FUNCTION)
+                    .map((key) => paramCase(key));
+            }
+            adoptedCallback() {
+                call(this.plus, CONSTANTS.LIFECYCLE_ADOPTED);
+            }
+            // TODO
+            attributeChangedCallback(name, prev, next) {
+                const key = camelCase(name);
+                const [type] = members[key];
+                const parsed = parseValue(next, type);
+                this.plus[key] = parsed;
+            }
+            connectedCallback() {
+                call(this.plus, CONSTANTS.LIFECYCLE_CONNECTED);
+                request(this.plus)
+                    .then(() => {
+                    call(this.plus, CONSTANTS.LIFECYCLE_LOADED);
+                })
+                    .catch((error) => {
+                    throw error;
+                });
+            }
+            disconnectedCallback() {
+                call(this.plus, CONSTANTS.LIFECYCLE_DISCONNECTED);
+            }
+        }
+        if (customElements.get(tag))
+            return;
+        customElements.define(tag, Plus);
+    };
+}

package/client/decorators/event.d.ts

@@ -0,0 +1,21 @@
+import { PlusElement } from '../../types/index.js';
+export declare type EventEmitter<T = any> = (data?: T) => CustomEvent<T>;
+export interface EventOptions {
+    /**
+     * A string custom event name to override the default.
+     */
+    name?: string;
+    /**
+     * A Boolean indicating whether the event bubbles up through the DOM or not. default is `false`.
+     */
+    bubbles?: boolean;
+    /**
+     * A Boolean indicating whether the event is cancelable. default is `false`.
+     */
+    cancelable?: boolean;
+    /**
+     * A Boolean value indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM. The default is false.
+     */
+    composed?: boolean;
+}
+export declare function Event<T = any>(options?: EventOptions): (target: PlusElement, propertyKey: PropertyKey) => void;

package/client/decorators/event.js

@@ -0,0 +1,17 @@
+import { defineProperty, dispatch, host } from '../utils/index.js';
+export function Event(options = {}) {
+    return function (target, propertyKey) {
+        defineProperty(target, propertyKey, {
+            get() {
+                return (detail) => {
+                    var _a;
+                    (_a = options.bubbles) !== null && _a !== void 0 ? _a : (options.bubbles = false);
+                    const name = options.name || String(propertyKey);
+                    const event = new CustomEvent(name, Object.assign(Object.assign({}, options), { detail }));
+                    dispatch(host(this), event);
+                    return event;
+                };
+            }
+        });
+    };
+}

package/client/decorators/index.d.ts

@@ -0,0 +1,9 @@
+export * from './attributes.js';
+export * from './bind.js';
+export * from './element.js';
+export * from './event.js';
+export * from './listen.js';
+export * from './method.js';
+export * from './property.js';
+export * from './state.js';
+export * from './watch.js';

package/client/decorators/index.js

@@ -0,0 +1,9 @@
+export * from './attributes.js';
+export * from './bind.js';
+export * from './element.js';
+export * from './event.js';
+export * from './listen.js';
+export * from './method.js';
+export * from './property.js';
+export * from './state.js';
+export * from './watch.js';

package/client/decorators/listen.d.ts

@@ -0,0 +1,12 @@
+import { PlusElement } from '../../types/index.js';
+export interface ListenOptions {
+    target?: 'host' | 'body' | 'document' | 'window';
+    once?: boolean;
+    passive?: boolean;
+    signal?: AbortSignal;
+    capture?: boolean;
+}
+export declare function Listen(name: string, options?: ListenOptions): (target: PlusElement, propertyKey: PropertyKey, descriptor: PropertyDescriptor) => {
+    configurable: boolean;
+    get(): any;
+};

package/client/decorators/listen.js

@@ -0,0 +1,31 @@
+import * as CONSTANTS from '../../constants/index.js';
+import { appendToMethod, host, on, off } from '../utils/index.js';
+import { Bind } from './bind.js';
+const defaults = {
+    target: 'host'
+};
+export function Listen(name, options = defaults) {
+    return function (target, propertyKey, 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 host(instance);
+                default:
+                    return host(instance);
+            }
+        };
+        appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
+            on(element(this), name, this[propertyKey], options);
+        });
+        appendToMethod(target, CONSTANTS.LIFECYCLE_DISCONNECTED, function () {
+            off(element(this), name, this[propertyKey], options);
+        });
+        return Bind()(target, propertyKey, descriptor);
+    };
+}

package/client/decorators/method.d.ts

@@ -0,0 +1,2 @@
+import { PlusElement } from '../../types/index.js';
+export declare function Method(): (target: PlusElement, propertyKey: PropertyKey) => void;

package/client/decorators/method.js

@@ -0,0 +1,11 @@
+import * as CONSTANTS from '../../constants/index.js';
+import { appendToMethod, defineProperty, host } from '../utils/index.js';
+export function Method() {
+    return function (target, propertyKey) {
+        appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
+            defineProperty(host(this), propertyKey, {
+                get: () => this[propertyKey].bind(this)
+            });
+        });
+    };
+}

package/client/decorators/property.d.ts

@@ -0,0 +1,8 @@
+import { PlusElement } from '../../types/index.js';
+export interface PropertyOptions {
+    /**
+     * Whether property value is reflected back to the associated attribute. default is `false`.
+     */
+    reflect?: boolean;
+}
+export declare function Property(options?: PropertyOptions): (target: PlusElement, propertyKey: PropertyKey) => void;

package/client/decorators/property.js

@@ -0,0 +1,45 @@
+import { paramCase } from 'change-case';
+import * as CONSTANTS from '../../constants/index.js';
+import { defineProperty, getMembers, host, parseValue, request, updateAttribute, appendToMethod } from '../utils/index.js';
+export function Property(options) {
+    return function (target, propertyKey) {
+        const name = String(propertyKey);
+        const attribute = paramCase(name);
+        const type = getMembers(target)[name].at(0);
+        const values = new Map();
+        function get() {
+            return values.get(this);
+        }
+        function set(input) {
+            const value = values.get(this);
+            if (input === value)
+                return;
+            values.set(this, input);
+            const isReady = !!this[CONSTANTS.API_READY];
+            request(this, { [name]: [input, value, !this[CONSTANTS.API_READY]] }).then(() => {
+                const element = host(this);
+                const has = element.hasAttribute(attribute);
+                if (!isReady && has)
+                    return;
+                if (!(options === null || options === void 0 ? void 0 : options.reflect))
+                    return;
+                const raw = element.getAttribute(attribute);
+                const parsed = parseValue(raw, type);
+                if (input === parsed)
+                    return;
+                updateAttribute(element, attribute, input);
+            });
+        }
+        defineProperty(target, propertyKey, { get, set });
+        appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
+            const element = host(this);
+            const get = () => {
+                return this[propertyKey];
+            };
+            const set = (input) => {
+                this[propertyKey] = input;
+            };
+            defineProperty(element, propertyKey, { get, set });
+        });
+    };
+}

package/client/decorators/state.d.ts

@@ -0,0 +1,2 @@
+import { PlusElement } from '../../types/index.js';
+export declare function State(): (target: PlusElement, propertyKey: PropertyKey) => void;

package/client/decorators/state.js

@@ -0,0 +1,23 @@
+import * as CONSTANTS from '../../constants/index.js';
+import { defineProperty, request } from '../utils/index.js';
+export function State() {
+    return function (target, propertyKey) {
+        const name = String(propertyKey);
+        const values = new Map();
+        function get() {
+            return values.get(this);
+        }
+        function set(input) {
+            const value = values.get(this);
+            if (input === value)
+                return;
+            values.set(this, input);
+            request(this, { [name]: [input, value, !this[CONSTANTS.API_READY]] })
+                .then(() => undefined)
+                .catch((error) => {
+                throw error;
+            });
+        }
+        defineProperty(target, propertyKey, { get, set });
+    };
+}

package/client/decorators/watch.d.ts

@@ -0,0 +1,8 @@
+import { PlusElement } from '../../types/index.js';
+/**
+ * Monitors properties and states to catch changes.
+ * The decorated method will be invoked after any
+ * changes with the key, newValue, and oldValue as parameters.
+ * If the arguments aren't defined, all of the properties and states are considered.
+ */
+export declare function Watch(keys?: Array<string>, immediate?: boolean): (target: PlusElement, propertyKey: PropertyKey) => void;

package/client/decorators/watch.js

@@ -0,0 +1,34 @@
+import * as CONSTANTS from '../../constants/index.js';
+import { appendToMethod } from '../utils/index.js';
+/**
+ * Monitors properties and states to catch changes.
+ * The decorated method will be invoked after any
+ * changes with the key, newValue, and oldValue as parameters.
+ * If the arguments aren't defined, all of the properties and states are considered.
+ */
+export function Watch(keys, immediate) {
+    return function (target, propertyKey) {
+        // Registers a lifecycle to detect changes.
+        appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function ([states]) {
+            // Gets all keys
+            const keys = Object.keys(states);
+            // Loops the keys
+            for (const key of keys) {
+                // Finds current key in keys
+                const has = keys === null || keys === void 0 ? void 0 : keys.some((x) => x == key);
+                // Checks the existence of key
+                if (!has && !!(keys === null || keys === void 0 ? void 0 : keys.length))
+                    continue;
+                // Gets the current state
+                const state = states === null || states === void 0 ? void 0 : states[key];
+                // Destructs the state
+                const [next, prev, isInitial] = state;
+                // TODO
+                if (!immediate && isInitial)
+                    continue;
+                // Invokes the method with parameters.
+                this[propertyKey](next, prev, key);
+            }
+        });
+    };
+}

package/client/helpers/classes.d.ts

@@ -0,0 +1 @@
+export declare const classes: (input: any, smart?: boolean | undefined) => string;

package/client/helpers/classes.js

@@ -0,0 +1,62 @@
+import { paramCase } from 'change-case';
+import { typeOf } from '../utils/index.js';
+export const classes = (input, smart) => {
+    const result = [];
+    switch (typeOf(input)) {
+        case 'array': {
+            input.forEach((item) => {
+                const value = classes(item, smart);
+                if (!value)
+                    return;
+                result.push(value);
+            });
+            break;
+        }
+        case 'object': {
+            const keys = Object.keys(input);
+            for (const key of keys) {
+                const value = input[key];
+                const name = paramCase(key);
+                const type = typeOf(value);
+                if (!smart) {
+                    if (!value)
+                        continue;
+                    result.push(name);
+                    continue;
+                }
+                switch (type) {
+                    case 'boolean': {
+                        if (!value)
+                            continue;
+                        result.push(`${name}`);
+                        break;
+                    }
+                    case 'number': {
+                        result.push(`${name}-${value}`);
+                        break;
+                    }
+                    case 'string': {
+                        switch (value) {
+                            case '':
+                            case 'true':
+                                result.push(`${name}`);
+                                break;
+                            case 'false':
+                                break;
+                            default:
+                                result.push(`${name}-${value}`);
+                                break;
+                        }
+                        break;
+                    }
+                }
+            }
+            break;
+        }
+        case 'string': {
+            result.push(input);
+            break;
+        }
+    }
+    return result.join(' ');
+};

package/client/helpers/direction.d.ts

@@ -0,0 +1,3 @@
+import { PlusElement } from '../../types/index.js';
+export declare type Direction = 'ltr' | 'rtl';
+export declare const direction: (target: PlusElement) => Direction;

package/client/helpers/direction.js

@@ -0,0 +1,4 @@
+import { host } from '../utils/index.js';
+export const direction = (target) => {
+    return getComputedStyle(host(target)).getPropertyValue('direction').toLowerCase();
+};

package/client/helpers/index.d.ts

@@ -0,0 +1,9 @@
+export * from './classes.js';
+export * from './direction.js';
+export * from './isRTL.js';
+export * from './query.js';
+export * from './queryAll.js';
+export * from './slots.js';
+export * from './styles.js';
+export * from './toUnit.js';
+export { host, isServer, on, off } from '../utils/index.js';

package/client/helpers/index.js

@@ -0,0 +1,9 @@
+export * from './classes.js';
+export * from './direction.js';
+export * from './isRTL.js';
+export * from './query.js';
+export * from './queryAll.js';
+export * from './slots.js';
+export * from './styles.js';
+export * from './toUnit.js';
+export { host, isServer, on, off } from '../utils/index.js';

package/client/helpers/isRTL.d.ts

@@ -0,0 +1,2 @@
+import { PlusElement } from '../../types/index.js';
+export declare const isRTL: (target: PlusElement) => boolean;

package/client/helpers/isRTL.js

@@ -0,0 +1,2 @@
+import { direction } from './direction.js';
+export const isRTL = (target) => direction(target) == 'rtl';

package/client/helpers/query.d.ts

@@ -0,0 +1,3 @@
+export declare function query<K extends keyof HTMLElementTagNameMap>(target: any, selectors: K): HTMLElementTagNameMap[K] | null;
+export declare function query<K extends keyof SVGElementTagNameMap>(target: any, selectors: K): SVGElementTagNameMap[K] | null;
+export declare function query<E extends Element = Element>(target: any, selectors: string): E | null;

package/client/helpers/query.js

@@ -0,0 +1,5 @@
+import { host } from '../utils/index.js';
+export function query(target, selectors) {
+    var _a, _b;
+    return (_b = (_a = host(target)) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(selectors);
+}

package/client/helpers/queryAll.d.ts

@@ -0,0 +1,3 @@
+export declare function queryAll<K extends keyof HTMLElementTagNameMap>(target: any, selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
+export declare function queryAll<K extends keyof SVGElementTagNameMap>(target: any, selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
+export declare function queryAll<E extends Element = Element>(target: any, selectors: string): NodeListOf<E>;

package/client/helpers/queryAll.js

@@ -0,0 +1,5 @@
+import { host } from '../utils/index.js';
+export function queryAll(target, selectors) {
+    var _a, _b;
+    return (_b = (_a = host(target)) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll(selectors);
+}

package/client/helpers/slots.d.ts

@@ -0,0 +1,6 @@
+import { PlusElement } from '../../types/index.js';
+declare type Slots = {
+    [key: string]: boolean;
+};
+export declare const slots: (target: PlusElement) => Slots;
+export {};

package/client/helpers/slots.js

@@ -0,0 +1,15 @@
+import { defineProperty } from '../utils/index.js';
+import { queryAll } from './queryAll.js';
+export const slots = (target) => {
+    var _a;
+    const result = {};
+    (_a = queryAll(target, 'slot')) === null || _a === void 0 ? void 0 : _a.forEach((slot) => {
+        const name = slot.name || 'default';
+        defineProperty(result, name, {
+            get() {
+                return !!slot.assignedNodes().filter((node) => { var _a; return node.nodeName != '#text' || ((_a = node.nodeValue) === null || _a === void 0 ? void 0 : _a.trim()); }).length;
+            }
+        });
+    });
+    return result;
+};

package/client/helpers/styles.d.ts

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

package/client/helpers/styles.js

@@ -0,0 +1,17 @@
+import { paramCase } from 'change-case';
+import { typeOf } from '../utils/index.js';
+export const styles = (input) => {
+    switch (typeOf(input)) {
+        case 'array':
+            return input.join('; ');
+        case 'object':
+            return Object.keys(input)
+                .filter((key) => input[key] !== undefined && input[key] !== null)
+                .map((key) => `${key.startsWith('--') ? '--' : ''}${paramCase(key)}: ${input[key]}`)
+                .join('; ');
+        case 'string':
+            return input;
+        default:
+            return '';
+    }
+};

package/client/helpers/toUnit.d.ts

@@ -0,0 +1 @@
+export declare const toUnit: (input: string | number, unit?: string) => string | undefined;

package/client/helpers/toUnit.js

@@ -0,0 +1,7 @@
+export const toUnit = (input, unit = 'px') => {
+    if (input == null || input === '')
+        return undefined;
+    if (isNaN(+input))
+        return String(input);
+    return `${Number(input)}${unit}`;
+};

package/client/index.d.ts

@@ -0,0 +1,3 @@
+export * from './decorators/index.js';
+export * from './helpers/index.js';
+export * from './services/index.js';

package/client/index.js

@@ -0,0 +1,3 @@
+export * from './decorators/index.js';
+export * from './helpers/index.js';
+export * from './services/index.js';

package/client/services/index.d.ts

@@ -0,0 +1 @@
+export * from './link.js';

package/client/services/index.js

@@ -0,0 +1 @@
+export * from './link.js';

package/client/services/link.d.ts

@@ -0,0 +1,4 @@
+export declare type LinkConfig = {
+    scope?: Function;
+};
+export declare const createLink: (namespace: string) => any;