@htmlplus/element 3.2.6 → 3.3.0

package/dist/client.d.ts

@@ -141,6 +141,19 @@ declare function Listen(type: string, options?: ListenOptions): (target: HTMLPlu
  */
 declare function Method(): (target: HTMLPlusElement, key: PropertyKey, descriptor: PropertyDescriptor) => void;
 
+type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
+type Overwrite<T, U> = DistributiveOmit<T, keyof U> & U;
+type GenerateStringUnion<T> = Extract<{
+    [Key in keyof T]: true extends T[Key] ? Key : never;
+}[keyof T], string>;
+type OverridesConfigBreakpointCreator<T extends string, U = {}> = GenerateStringUnion<Overwrite<Record<T, true>, U>>;
+type OverridesConfig<Breakpoint extends string, Properties = {}> = {
+    [Key in Breakpoint]?: Partial<Properties>;
+};
+interface ElementPropertiesAutoGenerated {
+}
+declare function Overrides(): (target: HTMLPlusElement, key: string) => void;
+
 /**
  * The configuration for property decorator.
  */
@@ -222,16 +235,25 @@ declare const classes: (input: any, smart?: boolean) => string;
  * TODO
  */
 interface Config {
+    breakpoints?: {
+        [key: string]: {
+            type: 'container' | 'media';
+            min?: number;
+            max?: number;
+        };
+    };
     event?: {
         resolver?: (parameters: any) => CustomEvent | undefined;
     };
-    asset?: {
+    assets?: {
         [key: string]: any;
     };
-    element?: {
+    elements?: {
         [key: string]: {
-            property?: {
-                [key: string]: any;
+            properties?: {
+                [key: string]: {
+                    default?: unknown;
+                };
             };
         };
     };
@@ -252,11 +274,19 @@ interface ConfigOptions {
 /**
  * TODO
  */
-declare const getConfig: (...keys: string[]) => any;
+declare const getConfig: (namespace: string) => Config;
+/**
+ * TODO
+ */
+declare const getConfigCreator: (namespace: string) => () => Config;
+/**
+ * TODO
+ */
+declare const setConfig: (namespace: string, config: Config, options?: ConfigOptions) => void;
 /**
  * TODO
  */
-declare const setConfig: (config: Config, options?: ConfigOptions) => void;
+declare const setConfigCreator: (namespace: string) => (config: Config, options?: ConfigOptions) => void;
 
 /**
  * Indicates whether the [Direction](https://mdn.io/css-direction)
@@ -324,5 +354,5 @@ declare const attributes: any;
 declare const html: any;
 declare const styles: any;
 
-export { Bind, Consumer, Debounce, Direction, Element$1 as Element, Event, Host, IsRTL, Listen, Method, Property, Provider, Query, QueryAll, Slots$1 as Slots, State, Style, Watch, attributes as a, classes, direction, dispatch, getConfig, html as h, host, isCSSColor, isRTL, off, on, query, queryAll, styles as s, setConfig, slots, toCSSColor, toCSSUnit, toUnit };
-export type { Config, ConfigOptions, EventEmitter, EventOptions, ListenOptions, PropertyOptions };
+export { Bind, Consumer, Debounce, Direction, Element$1 as Element, Event, Host, IsRTL, Listen, Method, Overrides, Property, Provider, Query, QueryAll, Slots$1 as Slots, State, Style, Watch, attributes as a, classes, direction, dispatch, getConfig, getConfigCreator, html as h, host, isCSSColor, isRTL, off, on, query, queryAll, styles as s, setConfig, setConfigCreator, slots, toCSSColor, toCSSUnit, toUnit };
+export type { Config, ConfigOptions, ElementPropertiesAutoGenerated, EventEmitter, EventOptions, ListenOptions, OverridesConfig, OverridesConfigBreakpointCreator, PropertyOptions };

package/dist/client.js

@@ -1,5 +1,5 @@
 import { kebabCase, pascalCase } from 'change-case';
-import { API_HOST, STATIC_TAG, API_STACKS, API_REQUEST, API_CONNECTED, LIFECYCLE_UPDATE, STATIC_STYLE, API_STYLE, LIFECYCLE_UPDATED, API_RENDER_COMPLETED, METHOD_RENDER, TYPE_BOOLEAN, TYPE_NUMBER, TYPE_NULL, TYPE_DATE, TYPE_ARRAY, TYPE_OBJECT, TYPE_UNDEFINED, KEY, LIFECYCLE_CONNECTED, LIFECYCLE_DISCONNECTED, LIFECYCLE_CONSTRUCTED, LIFECYCLE_ADOPTED, LIFECYCLE_READY } from './constants.js';
+import { API_HOST, STATIC_TAG, API_STACKS, API_REQUEST, API_CONNECTED, LIFECYCLE_UPDATE, STATIC_STYLE, API_STYLE, LIFECYCLE_UPDATED, API_RENDER_COMPLETED, METHOD_RENDER, TYPE_BOOLEAN, TYPE_NUMBER, TYPE_NULL, TYPE_DATE, TYPE_ARRAY, TYPE_OBJECT, TYPE_UNDEFINED, TYPE_STRING, KEY, LIFECYCLE_CONNECTED, LIFECYCLE_DISCONNECTED, LIFECYCLE_CONSTRUCTED, LIFECYCLE_ADOPTED, LIFECYCLE_READY } from './constants.js';
 
 /**
  * Indicates the host of the element.
@@ -163,13 +163,6 @@ const classes = (input, smart) => {
     return result.filter((item) => item).join(' ');
 };
 
-/**
- * Indicates whether the current code is running on a server.
- */
-const isServer = () => {
-    return !(typeof window != 'undefined' && window.document);
-};
-
 const merge = (target, ...sources) => {
     for (const source of sources) {
         if (!source)
@@ -192,31 +185,31 @@ const merge = (target, ...sources) => {
     return target;
 };
 
-const DEFAULTS = {
-    element: {}
+/**
+ * TODO
+ */
+const getConfig = (namespace) => {
+    return globalThis[`$htmlplus:${namespace}$`] || {};
 };
 /**
  * TODO
  */
-const getConfig = (...keys) => {
-    if (isServer())
-        return;
-    let config = window[`$htmlplus$`];
-    for (const key of keys) {
-        if (!config)
-            break;
-        config = config[key];
-    }
-    return config;
+const getConfigCreator = (namespace) => () => {
+    return getConfig(namespace);
 };
 /**
  * TODO
  */
-const setConfig = (config, options) => {
-    if (isServer())
-        return;
-    const previous = options?.override ? {} : window[`$htmlplus$`];
-    window[`$htmlplus$`] = merge({}, DEFAULTS, previous, config);
+const setConfig = (namespace, config, options) => {
+    const previous = options?.override ? {} : globalThis[`$htmlplus:${namespace}$`];
+    const next = merge({}, previous, config);
+    globalThis[`$htmlplus:${namespace}$`] = next;
+};
+/**
+ * TODO
+ */
+const setConfigCreator = (namespace) => (config, options) => {
+    return setConfig(namespace, config, options);
 };
 
 const defineProperty = Object.defineProperty;
@@ -253,6 +246,10 @@ const getTag = (target) => {
     return target.constructor[STATIC_TAG] ?? target[STATIC_TAG];
 };
 
+const getNamespace = (target) => {
+    return getTag(target)?.split('-')?.at(0);
+};
+
 /**
  * Determines whether the given input string is a valid
  * [CSS Color](https://mdn.io/color-value) or not.
@@ -268,6 +265,13 @@ const isCSSColor = (input) => {
  */
 const isRTL = (target) => direction(target) == 'rtl';
 
+/**
+ * Indicates whether the current code is running on a server.
+ */
+const isServer = () => {
+    return !(typeof window != 'undefined' && window.document);
+};
+
 const shadowRoot = (target) => {
     return host(target)?.shadowRoot;
 };
@@ -1266,7 +1270,20 @@ const toProperty = (input, type) => {
             return undefined;
         }
     }
-    return input;
+    if (TYPE_STRING & type || type === String) {
+        return input;
+    }
+    // TODO
+    // if (CONSTANTS.TYPE_BIGINT   & type || type === BigInt)   { }
+    // if (CONSTANTS.TYPE_ENUM     & type || type === TODO)     { }
+    // if (CONSTANTS.TYPE_FUNCTION & type || type === Function) { }
+    try {
+        // TODO
+        return JSON.parse(input);
+    }
+    catch {
+        return input;
+    }
 };
 
 /**
@@ -1526,7 +1543,31 @@ const proxy = (constructor) => {
         }
         connectedCallback() {
             // TODO: experimental for global config
-            Object.assign(this.#instance, getConfig('element', getTag(this.#instance), 'property'));
+            (() => {
+                const namespace = getNamespace(this.#instance);
+                const tag = getTag(this.#instance);
+                const properties = getConfig(namespace).elements?.[tag]?.properties;
+                if (!properties)
+                    return;
+                const defaults = Object.fromEntries(Object.entries(properties).map(([key, value]) => [key, value?.default]));
+                Object.assign(this, defaults);
+            })();
+            // TODO
+            (() => {
+                const key = Object.keys(this).find((key) => key.startsWith('__reactProps'));
+                const props = this[key];
+                if (!props)
+                    return;
+                for (const [key, value] of Object.entries(props)) {
+                    if (this[key] != undefined)
+                        continue;
+                    if (key == 'children')
+                        continue;
+                    if (typeof value != 'object')
+                        continue;
+                    this[key] = value;
+                }
+            })();
             this.#instance[API_CONNECTED] = true;
             call(this.#instance, LIFECYCLE_CONNECTED);
             requestUpdate(this.#instance, undefined, undefined, () => {
@@ -1579,7 +1620,8 @@ function Event(options = {}) {
                     break;
             }
             let event;
-            event ||= getConfig('event', 'resolver')?.({ detail, element, framework, options, type });
+            const resolver = getConfig(getNamespace(target)).event?.resolver;
+            event ||= resolver?.({ detail, element, framework, options, type });
             event && element.dispatchEvent(event);
             event ||= dispatch(this, type, { ...options, detail });
             return event;
@@ -1648,6 +1690,165 @@ function Method() {
     };
 }
 
+const CONTAINER_DATA = Symbol();
+const getContainers = (breakpoints) => {
+    return Object.entries(breakpoints || {}).reduce((result, [key, breakpoint]) => {
+        if (breakpoint.type !== 'container')
+            return result;
+        result[key] = {
+            min: breakpoint.min,
+            max: breakpoint.max
+        };
+        return result;
+    }, {});
+};
+const getMedias = (breakpoints) => {
+    return Object.entries(breakpoints || {}).reduce((result, [key, breakpoint]) => {
+        if (breakpoint.type !== 'media')
+            return result;
+        const parts = [];
+        const min = 'min' in breakpoint ? breakpoint.min : undefined;
+        const max = 'max' in breakpoint ? breakpoint.max : undefined;
+        if (min !== undefined)
+            parts.push(`(min-width: ${min}px)`);
+        if (max !== undefined)
+            parts.push(`(max-width: ${max}px)`);
+        const query = parts.join(' and ');
+        if (query)
+            result[key] = query;
+        return result;
+    }, {});
+};
+const matchContainer = (element, container) => {
+    const $element = element;
+    const getData = () => {
+        if ($element[CONTAINER_DATA])
+            return $element[CONTAINER_DATA];
+        const listeners = new Set();
+        const observer = new ResizeObserver(() => {
+            listeners.forEach((listener) => listener());
+        });
+        observer.observe(element);
+        $element[CONTAINER_DATA] = { listeners, observer };
+        return $element[CONTAINER_DATA];
+    };
+    const getMatches = () => {
+        const width = element.offsetWidth;
+        const matches = (container.min === undefined || width >= container.min) &&
+            (container.max === undefined || width <= container.max);
+        return matches;
+    };
+    const addEventListener = (type, listener) => {
+        getData().listeners.add(listener);
+    };
+    const removeEventListener = (type, listener) => {
+        const data = getData();
+        data.listeners.delete(listener);
+        if (data.listeners.size !== 0)
+            return;
+        data.observer.disconnect();
+        delete $element[CONTAINER_DATA];
+    };
+    return {
+        get matches() {
+            return getMatches();
+        },
+        addEventListener,
+        removeEventListener
+    };
+};
+function Overrides() {
+    return function (target, key) {
+        const DISPOSERS = Symbol();
+        const breakpoints = getConfig(getNamespace(target)).breakpoints || {};
+        const containers = getContainers(breakpoints);
+        const medias = getMedias(breakpoints);
+        wrapMethod('after', target, LIFECYCLE_UPDATE, function (states) {
+            if (!states.has(key))
+                return;
+            const disposers = (this[DISPOSERS] ??= new Map());
+            const overrides = this[key] || {};
+            const activeKeys = new Set(disposers.keys());
+            const overrideKeys = Object.keys(overrides);
+            const containerKeys = overrideKeys.filter((breakpoint) => breakpoint in containers);
+            const mediaKeys = overrideKeys.filter((breakpoint) => breakpoint in medias);
+            let timeout;
+            let next = {};
+            const apply = (key) => {
+                clearTimeout(timeout);
+                Object.assign(next, overrides[key]);
+                timeout = setTimeout(() => {
+                    Object.assign(host(this), overrides[key]);
+                    next = {};
+                }, 0);
+            };
+            for (const overrideKey of overrideKeys) {
+                if (activeKeys.delete(overrideKey))
+                    continue;
+                const breakpoint = breakpoints[overrideKey];
+                if (!breakpoint)
+                    continue;
+                switch (breakpoint.type) {
+                    case 'container': {
+                        const container = containers[overrideKey];
+                        if (!container)
+                            break;
+                        const containerQueryList = matchContainer(host(this), container);
+                        const change = () => {
+                            for (const containerKey of containerKeys) {
+                                if (matchContainer(host(this), containers[containerKey]).matches) {
+                                    apply(containerKey);
+                                }
+                            }
+                        };
+                        containerQueryList.addEventListener('change', change);
+                        const disposer = () => {
+                            containerQueryList.removeEventListener('change', change);
+                        };
+                        disposers.set(overrideKey, disposer);
+                        if (!containerQueryList.matches)
+                            break;
+                        change();
+                        break;
+                    }
+                    case 'media': {
+                        const media = medias[overrideKey];
+                        if (!media)
+                            break;
+                        const mediaQueryList = window.matchMedia(media);
+                        const change = () => {
+                            for (const mediaKey of mediaKeys) {
+                                if (window.matchMedia(medias[mediaKey]).matches) {
+                                    apply(mediaKey);
+                                }
+                            }
+                        };
+                        mediaQueryList.addEventListener('change', change);
+                        const disposer = () => {
+                            mediaQueryList.removeEventListener('change', change);
+                        };
+                        disposers.set(overrideKey, disposer);
+                        if (!mediaQueryList.matches)
+                            break;
+                        change();
+                        break;
+                    }
+                }
+            }
+            for (const activeKey of activeKeys) {
+                const disposer = disposers.get(activeKey);
+                disposer();
+                disposers.delete(activeKey);
+            }
+        });
+        wrapMethod('after', target, LIFECYCLE_DISCONNECTED, function () {
+            const disposers = (this[DISPOSERS] ??= new Map());
+            disposers.forEach((disposer) => disposer());
+            disposers.clear();
+        });
+    };
+}
+
 /**
  * Creates a reactive property, reflecting a corresponding attribute value,
  * and updates the element when the property is set.
@@ -1916,4 +2117,4 @@ const attributes = attributes$2;
 const html = html$1;
 const styles = styles$1;
 
-export { Bind, Consumer, Debounce, Direction, Element, Event, Host, IsRTL, Listen, Method, Property, Provider, Query, QueryAll, Slots, State, Style, Watch, attributes as a, classes, direction, dispatch, getConfig, html as h, host, isCSSColor, isRTL, off, on, query, queryAll, styles as s, setConfig, slots, toCSSColor, toCSSUnit, toUnit };
+export { Bind, Consumer, Debounce, Direction, Element, Event, Host, IsRTL, Listen, Method, Overrides, Property, Provider, Query, QueryAll, Slots, State, Style, Watch, attributes as a, classes, direction, dispatch, getConfig, getConfigCreator, html as h, host, isCSSColor, isRTL, off, on, query, queryAll, styles as s, setConfig, setConfigCreator, slots, toCSSColor, toCSSUnit, toUnit };

package/dist/transformer.js

@@ -751,9 +751,7 @@ const customElement = (options) => {
                 
                 namespace JSX {
                   interface IntrinsicElements {
-                    "${context.elementTagName}": ${context.className}Events & ${context.className}Attributes & {
-                      [key: string]: any;
-                    };
+                    "${context.elementTagName}": ${context.className}Events & ${context.className}Attributes & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
                   }
                 }
               }
@@ -761,9 +759,7 @@ const customElement = (options) => {
               declare module "react" {
                 namespace JSX {
                   interface IntrinsicElements {
-                    "${context.elementTagName}": ${context.className}Events & ${context.className}Attributes & {
-                      [key: string]: any;
-                    };
+                    "${context.elementTagName}": ${context.className}Events & ${context.className}Attributes & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
                   }
                 }
               }
@@ -774,6 +770,22 @@ const customElement = (options) => {
                         preserveComments: true
                     });
                     path.node.body.push(...ast);
+                },
+                // TODO
+                TSTypeReference(path) {
+                    if (path.node.typeName?.name != 'OverridesConfig')
+                        return;
+                    const property = path.findParent((path) => path.isTSPropertySignature());
+                    if (!property)
+                        return;
+                    const name = property.node.key.name || property.node.key.extra.rawValue;
+                    if (!path.node.typeParameters?.params)
+                        return;
+                    path.node.typeParameters.params[1] = t.tsTypeReference(t.identifier('Omit'), t.tsTypeParameterInstantiation([
+                        t.tsTypeReference(t.identifier(`${context.className}Properties`)),
+                        t.tsLiteralType(t.stringLiteral(name))
+                    ]));
+                    path.skip();
                 }
             });
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "3.2.6",
+  "version": "3.3.0",
   "license": "MIT",
   "sideEffects": false,
   "author": "Masood Abdolian <m.abdolian@gmail.com>",