@htmlplus/element 3.3.1 → 3.4.1

package/dist/client.d.ts

@@ -141,17 +141,9 @@ 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> = {
+type OverridesConfig<Breakpoint extends string, Properties = unknown> = {
     [Key in Breakpoint]?: Partial<Properties>;
 };
-interface ElementPropertiesAutoGenerated {
-}
 declare function Overrides(): (target: HTMLPlusElement, key: string) => void;
 
 /**
@@ -215,6 +207,8 @@ declare function State(): (target: HTMLPlusElement, key: PropertyKey) => void;
 
 declare function Style(): (target: HTMLPlusElement, key: PropertyKey) => void;
 
+declare function Variant(): (target: HTMLPlusElement, key: string) => void;
+
 /**
  * Monitors `@Property` and `@State` to detect changes.
  * The decorated method will be called after any changes,
@@ -255,6 +249,13 @@ interface Config {
                     default?: unknown;
                 };
             };
+            variants?: {
+                [key: string]: {
+                    properties: {
+                        [key: string]: unknown;
+                    };
+                };
+            };
         };
     };
 }
@@ -319,6 +320,8 @@ declare const host: (target: HTMLElement | HTMLPlusElement) => HTMLElement;
  */
 declare const isCSSColor: (input: string) => boolean;
 
+declare const isCSSUnit: (input: string) => boolean;
+
 /**
  * Indicates whether the direction of the element is `Right-To-Left` or not.
  */
@@ -342,10 +345,6 @@ type Slots = {
  */
 declare const slots: (target: HTMLElement | HTMLPlusElement) => Slots;
 
-declare const toCSSColor: (input: string) => string | undefined;
-
-declare const toCSSUnit: (input?: number | string | null) => string | undefined;
-
 /**
  * Converts a value to a unit.
  */
@@ -365,6 +364,12 @@ declare class Hole {
     values: any;
 }
 
+type OverridableValue<Base, Overrides = unknown> = Exclude<Base, {
+    [K in keyof Overrides]: Overrides[K] extends false ? K : never;
+}[keyof Overrides]> | {
+    [K in keyof Overrides]: Overrides[K] extends true ? K : never;
+}[keyof Overrides];
+
 declare const attributes: (target: HTMLElement | HTMLPlusElement, attributes: unknown[]) => void;
 declare const html: ((template: any, ...values: any[]) => Hole) & {
     for(ref: any, id: any): any;
@@ -372,5 +377,5 @@ declare const html: ((template: any, ...values: any[]) => Hole) & {
 };
 declare const styles: (input: object) => string;
 
-export { Bind, Consumer, Debounce, Direction$1 as 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 };
+export { Bind, Consumer, Debounce, Direction$1 as Direction, Element$1 as Element, Event, Host, IsRTL, Listen, Method, Overrides, Property, Provider, Query, QueryAll, Slots$1 as Slots, State, Style, Variant, Watch, attributes as a, classes, direction, dispatch, getConfig, getConfigCreator, html as h, host, isCSSColor, isCSSUnit, isRTL, off, on, query, queryAll, styles as s, setConfig, setConfigCreator, slots, toUnit };
+export type { Config, ConfigOptions, EventEmitter, EventOptions, ListenOptions, OverridableValue, OverridesConfig, 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, TYPE_STRING, 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, API_DEFAULTS } from './constants.js';
 
 /**
  * Indicates the host of the element.
@@ -267,6 +267,10 @@ const isCSSColor = (input) => {
     return option.style.color !== '';
 };
 
+const isCSSUnit = (input) => {
+    return /^\d+(\.\d+)?(px|pt|cm|mm|in|em|rem|%|vw|vh)$/.test(input);
+};
+
 /**
  * Indicates whether the direction of the element is `Right-To-Left` or not.
  */
@@ -1215,22 +1219,6 @@ const styles$1 = (input) => {
         .join('; ');
 };
 
-const toCSSColor = (input) => {
-    return isCSSColor(input) ? input : undefined;
-};
-
-const toCSSUnit = (input) => {
-    if (input === undefined || input === null || input === '') {
-        return;
-    }
-    if (typeof input === 'number' || (typeof input === 'string' && !Number.isNaN(Number(input)))) {
-        return `${input}px`;
-    }
-    if (/^\d+(\.\d+)?(px|pt|cm|mm|in|em|rem|%|vw|vh)$/.test(input)) {
-        return input;
-    }
-};
-
 function toDecorator(util, ...args) {
     return (target, key) => {
         defineProperty(target, key, {
@@ -1810,15 +1798,20 @@ function Overrides() {
             const overrideKeys = Object.keys(overrides);
             const containerKeys = overrideKeys.filter((breakpoint) => breakpoint in containers);
             const mediaKeys = overrideKeys.filter((breakpoint) => breakpoint in medias);
-            let timeout = -1;
             let next = {};
-            const apply = (key) => {
-                clearTimeout(timeout);
-                Object.assign(next, overrides[key]);
-                timeout = window.setTimeout(() => {
-                    Object.assign(host(this), overrides[key]);
+            let scheduled = false;
+            const apply = (overrideKey) => {
+                overrideKey && Object.assign(next, overrides[overrideKey]);
+                if (scheduled)
+                    return;
+                scheduled = true;
+                queueMicrotask(() => {
+                    scheduled = false;
+                    const defaults = Object.assign({}, this[API_DEFAULTS], next);
+                    delete defaults[key];
+                    Object.assign(host(this), defaults);
                     next = {};
-                }, 0);
+                });
             };
             for (const overrideKey of overrideKeys) {
                 if (activeKeys.delete(overrideKey))
@@ -1838,6 +1831,7 @@ function Overrides() {
                                     apply(containerKey);
                                 }
                             }
+                            apply();
                         };
                         containerQueryList.addEventListener('change', change);
                         const disposer = () => {
@@ -1860,6 +1854,7 @@ function Overrides() {
                                     apply(mediaKey);
                                 }
                             }
+                            apply();
                         };
                         mediaQueryList.addEventListener('change', change);
                         const disposer = () => {
@@ -1967,6 +1962,11 @@ function Property(options) {
                 }
             }
         });
+        // TODO
+        wrapMethod('before', target, LIFECYCLE_CONNECTED, function () {
+            this[API_DEFAULTS] ||= {};
+            this[API_DEFAULTS][key] = this[key];
+        });
         // Attach getter and setter to the host element on construction
         wrapMethod('before', target, LIFECYCLE_CONSTRUCTED, function () {
             const get = () => {
@@ -2131,6 +2131,23 @@ const toCssString = (input, parent) => {
     return parent ? result : `:host {${result}}`;
 };
 
+function Variant() {
+    return (target, key) => {
+        wrapMethod('after', target, LIFECYCLE_UPDATE, function (states) {
+            if (!states.has(key))
+                return;
+            const namespace = getNamespace(target) || '';
+            const tag = getTag(this) || '';
+            const properties = getConfig(namespace).elements?.[tag]?.variants?.[this[key]]?.properties;
+            if (!properties)
+                return;
+            const defaults = Object.assign({}, this[API_DEFAULTS], properties);
+            delete defaults[key];
+            Object.assign(this, defaults);
+        });
+    };
+}
+
 /**
  * Monitors `@Property` and `@State` to detect changes.
  * The decorated method will be called after any changes,
@@ -2165,4 +2182,4 @@ const attributes = attributes$2;
 const html = html$1;
 const styles = styles$1;
 
-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 };
+export { Bind, Consumer, Debounce, Direction, Element, Event, Host, IsRTL, Listen, Method, Overrides, Property, Provider, Query, QueryAll, Slots, State, Style, Variant, Watch, attributes as a, classes, direction, dispatch, getConfig, getConfigCreator, html as h, host, isCSSColor, isCSSUnit, isRTL, off, on, query, queryAll, styles as s, setConfig, setConfigCreator, slots, toUnit };

package/dist/constants.d.ts

@@ -1,6 +1,7 @@
 declare const KEY = "htmlplus";
 declare const PACKAGE_NAME = "@htmlplus/element";
 declare const API_CONNECTED: unique symbol;
+declare const API_DEFAULTS: unique symbol;
 declare const API_HOST: unique symbol;
 declare const API_REQUEST: unique symbol;
 declare const API_RENDER_COMPLETED: unique symbol;
@@ -45,4 +46,4 @@ declare const UTILS_STYLES_IMPORTED = "styles";
 declare const UTILS_STYLES_LOCAL = "UTILS_STYLES";
 declare const UTILS_PATH = "@htmlplus/element/internal.js";
 
-export { API_CONNECTED, API_HOST, API_RENDER_COMPLETED, API_REQUEST, API_STACKS, API_STYLE, COMMENT_AUTO_ADDED, DECORATOR_CSS_VARIABLE, DECORATOR_ELEMENT, DECORATOR_EVENT, DECORATOR_METHOD, DECORATOR_PROPERTY, DECORATOR_PROPERTY_TYPE, DECORATOR_STATE, ELEMENT_HOST_NAME, KEY, LIFECYCLE_ADOPTED, LIFECYCLE_CONNECTED, LIFECYCLE_CONSTRUCTED, LIFECYCLE_DISCONNECTED, LIFECYCLE_READY, LIFECYCLE_UPDATE, LIFECYCLE_UPDATED, METHOD_RENDER, PACKAGE_NAME, STATIC_STYLE, STATIC_TAG, STYLE_IMPORTED, TYPE_ARRAY, TYPE_BIGINT, TYPE_BOOLEAN, TYPE_DATE, TYPE_ENUM, TYPE_FUNCTION, TYPE_NULL, TYPE_NUMBER, TYPE_OBJECT, TYPE_STRING, TYPE_UNDEFINED, UTILS_ATTRIBUTES_IMPORTED, UTILS_ATTRIBUTES_LOCAL, UTILS_HTML_IMPORTED, UTILS_HTML_LOCAL, UTILS_PATH, UTILS_STYLES_IMPORTED, UTILS_STYLES_LOCAL };
+export { API_CONNECTED, API_DEFAULTS, API_HOST, API_RENDER_COMPLETED, API_REQUEST, API_STACKS, API_STYLE, COMMENT_AUTO_ADDED, DECORATOR_CSS_VARIABLE, DECORATOR_ELEMENT, DECORATOR_EVENT, DECORATOR_METHOD, DECORATOR_PROPERTY, DECORATOR_PROPERTY_TYPE, DECORATOR_STATE, ELEMENT_HOST_NAME, KEY, LIFECYCLE_ADOPTED, LIFECYCLE_CONNECTED, LIFECYCLE_CONSTRUCTED, LIFECYCLE_DISCONNECTED, LIFECYCLE_READY, LIFECYCLE_UPDATE, LIFECYCLE_UPDATED, METHOD_RENDER, PACKAGE_NAME, STATIC_STYLE, STATIC_TAG, STYLE_IMPORTED, TYPE_ARRAY, TYPE_BIGINT, TYPE_BOOLEAN, TYPE_DATE, TYPE_ENUM, TYPE_FUNCTION, TYPE_NULL, TYPE_NUMBER, TYPE_OBJECT, TYPE_STRING, TYPE_UNDEFINED, UTILS_ATTRIBUTES_IMPORTED, UTILS_ATTRIBUTES_LOCAL, UTILS_HTML_IMPORTED, UTILS_HTML_LOCAL, UTILS_PATH, UTILS_STYLES_IMPORTED, UTILS_STYLES_LOCAL };

package/dist/constants.js

@@ -2,6 +2,7 @@ const KEY = 'htmlplus';
 const PACKAGE_NAME = '@htmlplus/element';
 // APIs
 const API_CONNECTED = Symbol();
+const API_DEFAULTS = Symbol();
 const API_HOST = Symbol();
 const API_REQUEST = Symbol();
 const API_RENDER_COMPLETED = Symbol();
@@ -56,4 +57,4 @@ const UTILS_STYLES_IMPORTED = 'styles';
 const UTILS_STYLES_LOCAL = 'UTILS_STYLES';
 const UTILS_PATH = '@htmlplus/element/internal.js';
 
-export { API_CONNECTED, API_HOST, API_RENDER_COMPLETED, API_REQUEST, API_STACKS, API_STYLE, COMMENT_AUTO_ADDED, DECORATOR_CSS_VARIABLE, DECORATOR_ELEMENT, DECORATOR_EVENT, DECORATOR_METHOD, DECORATOR_PROPERTY, DECORATOR_PROPERTY_TYPE, DECORATOR_STATE, ELEMENT_HOST_NAME, KEY, LIFECYCLE_ADOPTED, LIFECYCLE_CONNECTED, LIFECYCLE_CONSTRUCTED, LIFECYCLE_DISCONNECTED, LIFECYCLE_READY, LIFECYCLE_UPDATE, LIFECYCLE_UPDATED, METHOD_RENDER, PACKAGE_NAME, STATIC_STYLE, STATIC_TAG, STYLE_IMPORTED, TYPE_ARRAY, TYPE_BIGINT, TYPE_BOOLEAN, TYPE_DATE, TYPE_ENUM, TYPE_FUNCTION, TYPE_NULL, TYPE_NUMBER, TYPE_OBJECT, TYPE_STRING, TYPE_UNDEFINED, UTILS_ATTRIBUTES_IMPORTED, UTILS_ATTRIBUTES_LOCAL, UTILS_HTML_IMPORTED, UTILS_HTML_LOCAL, UTILS_PATH, UTILS_STYLES_IMPORTED, UTILS_STYLES_LOCAL };
+export { API_CONNECTED, API_DEFAULTS, API_HOST, API_RENDER_COMPLETED, API_REQUEST, API_STACKS, API_STYLE, COMMENT_AUTO_ADDED, DECORATOR_CSS_VARIABLE, DECORATOR_ELEMENT, DECORATOR_EVENT, DECORATOR_METHOD, DECORATOR_PROPERTY, DECORATOR_PROPERTY_TYPE, DECORATOR_STATE, ELEMENT_HOST_NAME, KEY, LIFECYCLE_ADOPTED, LIFECYCLE_CONNECTED, LIFECYCLE_CONSTRUCTED, LIFECYCLE_DISCONNECTED, LIFECYCLE_READY, LIFECYCLE_UPDATE, LIFECYCLE_UPDATED, METHOD_RENDER, PACKAGE_NAME, STATIC_STYLE, STATIC_TAG, STYLE_IMPORTED, TYPE_ARRAY, TYPE_BIGINT, TYPE_BOOLEAN, TYPE_DATE, TYPE_ENUM, TYPE_FUNCTION, TYPE_NULL, TYPE_NUMBER, TYPE_OBJECT, TYPE_STRING, TYPE_UNDEFINED, UTILS_ATTRIBUTES_IMPORTED, UTILS_ATTRIBUTES_LOCAL, UTILS_HTML_IMPORTED, UTILS_HTML_LOCAL, UTILS_PATH, UTILS_STYLES_IMPORTED, UTILS_STYLES_LOCAL };

package/dist/transformer.js

@@ -754,8 +754,10 @@ const customElement = (userOptions) => {
                         preserveComments: true
                     });
                     path.node.body.push(...ast);
-                },
-                // TODO
+                }
+            });
+            // TODO
+            visitor(ast, {
                 TSTypeReference(path) {
                     if (!t.isIdentifier(path.node.typeName))
                         return;
@@ -779,6 +781,37 @@ const customElement = (userOptions) => {
                     path.skip();
                 }
             });
+            // TODO
+            visitor(ast, {
+                TSTypeReference(path) {
+                    if (!t.isIdentifier(path.node.typeName))
+                        return;
+                    if (path.node.typeName.name !== 'OverridableValue')
+                        return;
+                    const property = path.findParent((p) => p.isTSPropertySignature());
+                    if (!property)
+                        return;
+                    if (!t.isTSPropertySignature(property.node))
+                        return;
+                    // biome-ignore lint: TODO
+                    const name = property.node.key.name || property.node.key.extra.rawValue;
+                    if (!name)
+                        return;
+                    if (!path.node.typeParameters?.params)
+                        return;
+                    if (path.node.typeParameters.params.length > 1)
+                        return;
+                    const interfaceName = pascalCase(`${context.className}-${name}-Overrides`);
+                    path.node.typeParameters.params[1] = t.identifier(interfaceName);
+                    path.skip();
+                    const has = ast.program.body.some((child) => t.isExportNamedDeclaration(child) &&
+                        t.isInterfaceDeclaration(child.declaration) &&
+                        child.declaration.id.name === interfaceName);
+                    if (has)
+                        return;
+                    ast.program.body.push(t.exportNamedDeclaration(t.interfaceDeclaration(t.identifier(interfaceName), undefined, undefined, t.objectTypeAnnotation([]))));
+                }
+            });
         }
         context.script = print(ast);
     };

package/package.json

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