@htmlplus/element 3.4.5 → 3.4.7

package/dist/client.d.ts

@@ -225,16 +225,19 @@ declare function Watch(keys?: string | string[], immediate?: boolean): (target:
  */
 declare const classes: (input: unknown, smart?: boolean) => string;
 
+interface HTMLPlusElements {
+}
+type BreakpointConfig = {
+    type: 'container' | 'media';
+    min?: number;
+    max?: number;
+};
 /**
  * TODO
  */
-interface Config {
+type Config<Namespace extends string, Breakpoints extends string> = {
     breakpoints?: {
-        [key: string]: {
-            type: 'container' | 'media';
-            min?: number;
-            max?: number;
-        };
+        [key in Breakpoints]: BreakpointConfig;
     };
     event?: {
         resolver?: (parameters: unknown) => CustomEvent | undefined;
@@ -243,26 +246,24 @@ interface Config {
         [key: string]: unknown;
     };
     elements?: {
-        [key: string]: {
+        [K in keyof HTMLPlusElements as K extends `${Namespace}-${string}` ? K : never]?: {
             properties?: {
-                [key: string]: {
-                    default?: unknown;
+                [Prop in keyof HTMLPlusElements[K]['properties']]?: {
+                    default?: HTMLPlusElements[K]['properties'][Prop];
                 };
             };
             variants?: {
-                [key: string]: {
-                    properties: {
-                        [key: string]: unknown;
-                    };
+                [M in HTMLPlusElements[K]['properties']['variant']]?: {
+                    properties?: Partial<HTMLPlusElements[K]['properties']>;
                 };
             };
         };
     };
-}
+};
 /**
  * TODO
  */
-interface ConfigOptions {
+type ConfigOptions = {
     /**
      * TODO
      */
@@ -271,23 +272,23 @@ interface ConfigOptions {
      * TODO
      */
     override?: boolean;
-}
+};
 /**
  * TODO
  */
-declare const getConfig: (namespace: string) => Config;
+declare const getConfig: <N extends string, B extends string>(namespace: N) => Config<N, B>;
 /**
  * TODO
  */
-declare const getConfigCreator: (namespace: string) => () => Config;
+declare const getConfigCreator: <N extends string, B extends string>(namespace: N) => () => Config<N, B>;
 /**
  * TODO
  */
-declare const setConfig: (namespace: string, config: Config, options?: ConfigOptions) => void;
+declare const setConfig: <N extends string, B extends string>(namespace: N, config: Config<N, B>, options?: ConfigOptions) => void;
 /**
  * TODO
  */
-declare const setConfigCreator: (namespace: string) => (config: Config, options?: ConfigOptions) => void;
+declare const setConfigCreator: <N extends string, B extends string>(namespace: N) => (config: Config<N, B>, options?: ConfigOptions) => void;
 
 type Direction = 'ltr' | 'rtl';
 /**
@@ -382,4 +383,4 @@ type OverridableValue<Base, Overrides = unknown> = {
 } ? never : Unlisted<Base>);
 
 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, _internal_a_, _internal_h_, _internal_s_, classes, direction, dispatch, getConfig, getConfigCreator, host, isCSSColor, isCSSUnit, isRTL, off, on, query, queryAll, setConfig, setConfigCreator, slots, toUnit };
-export type { Config, ConfigOptions, EventEmitter, EventOptions, ListenOptions, OverridableValue, OverridesConfig, PropertyOptions };
+export type { Config, ConfigOptions, EventEmitter, EventOptions, HTMLPlusElements, ListenOptions, OverridableValue, OverridesConfig, PropertyOptions };

package/dist/client.js

@@ -268,7 +268,9 @@ const isCSSColor = (input) => {
 };
 
 const isCSSUnit = (input) => {
-    return /^\d+(\.\d+)?(px|pt|cm|mm|in|em|rem|%|vw|vh)$/.test(input);
+    const option = new Option();
+    option.style.width = input;
+    return option.style.width !== '';
 };
 
 /**
@@ -1514,7 +1516,10 @@ const proxy = (constructor) => {
                 const properties = getConfig(namespace).elements?.[tag]?.properties;
                 if (!properties)
                     return;
-                const defaults = Object.fromEntries(Object.entries(properties).map(([key, value]) => [key, value?.default]));
+                const defaults = Object.fromEntries(Object.entries(properties).map(([key, value]) => [
+                    key,
+                    value?.default
+                ]));
                 Object.assign(this, defaults);
             })();
             // TODO
@@ -2042,13 +2047,13 @@ function Style() {
         });
     };
 }
-const toCssString = (input, parent) => {
+const toCssString = (input) => {
     if (typeof input === 'string') {
         return input.trim();
     }
     if (Array.isArray(input)) {
         return input
-            .map((item) => toCssString(item, parent))
+            .map((item) => toCssString(item))
             .filter(Boolean)
             .join('\n');
     }
@@ -2064,13 +2069,13 @@ const toCssString = (input, parent) => {
             continue;
         const cssKey = key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
         if (typeof value === 'object') {
-            result += `${cssKey} {${toCssString(value, cssKey)}}`;
+            result += `${cssKey} {${toCssString(value)}}`;
         }
         else {
             result += `${cssKey}: ${value};`;
         }
     }
-    return parent ? result : `:host {${result}}`;
+    return result;
 };
 
 function Variant() {

package/dist/transformer.js

@@ -3,9 +3,9 @@ import { parse as parse$1 } from '@babel/parser';
 import fs from 'fs-extra';
 import { glob } from 'glob';
 import template from '@babel/template';
-import { pascalCase, kebabCase, camelCase, capitalCase } from 'change-case';
+import { pascalCase, kebabCase, capitalCase } from 'change-case';
 import path, { join, resolve, dirname } from 'node:path';
-import { COMMENT_AUTO_ADDED, DECORATOR_PROPERTY, STATIC_TAG, DECORATOR_PROPERTY_TYPE, INTERNAL_STYLES_IMPORTED, INTERNAL_STYLES_LOCAL, INTERNAL_PATH, INTERNAL_HTML_IMPORTED, INTERNAL_HTML_LOCAL, ELEMENT_HOST_NAME, TYPE_OBJECT, TYPE_NULL, TYPE_ARRAY, TYPE_STRING, TYPE_ENUM, TYPE_NUMBER, TYPE_DATE, TYPE_BOOLEAN, INTERNAL_ATTRIBUTES_IMPORTED, INTERNAL_ATTRIBUTES_LOCAL, DECORATOR_CSS_VARIABLE, DECORATOR_EVENT, DECORATOR_METHOD, DECORATOR_STATE, STATIC_STYLE, STYLE_IMPORTED, PACKAGE_NAME, DECORATOR_ELEMENT, KEY } from './constants.js';
+import { COMMENT_AUTO_ADDED, DECORATOR_PROPERTY, STATIC_TAG, DECORATOR_PROPERTY_TYPE, PACKAGE_NAME, INTERNAL_STYLES_IMPORTED, INTERNAL_STYLES_LOCAL, INTERNAL_PATH, INTERNAL_HTML_IMPORTED, INTERNAL_HTML_LOCAL, ELEMENT_HOST_NAME, TYPE_OBJECT, TYPE_NULL, TYPE_ARRAY, TYPE_STRING, TYPE_ENUM, TYPE_NUMBER, TYPE_DATE, TYPE_BOOLEAN, INTERNAL_ATTRIBUTES_IMPORTED, INTERNAL_ATTRIBUTES_LOCAL, DECORATOR_CSS_VARIABLE, DECORATOR_EVENT, DECORATOR_METHOD, DECORATOR_STATE, STATIC_STYLE, STYLE_IMPORTED, DECORATOR_ELEMENT, KEY } from './constants.js';
 import core from '@babel/traverse';
 import core$1 from '@babel/generator';
 import ora from 'ora';
@@ -667,7 +667,7 @@ const customElement = (userOptions) => {
                         // biome-ignore lint: TODO
                         event.typeAnnotation?.['typeAnnotation']?.typeParameters));
                         const functionType = t.tsFunctionType(undefined, [parameter], t.tsTypeAnnotation(t.tsVoidKeyword()));
-                        const signature = t.tSPropertySignature(t.identifier(camelCase(`on-${key.name}`)), t.tsTypeAnnotation(functionType));
+                        const signature = t.tSPropertySignature(t.identifier(key.name), t.tsTypeAnnotation(functionType));
                         signature.optional = true;
                         signature.leadingComments = t.cloneNode(event, true).leadingComments;
                         return signature;
@@ -700,50 +700,170 @@ const customElement = (userOptions) => {
                         return signature;
                     })
                         .filter((property) => !!property);
+                    const attributeMapper = (context.classProperties ?? [])
+                        .filter((property) => t.isIdentifier(property.key))
+                        .map((property) => {
+                        return `'${property.key.name}': '${extractAttribute(property) || kebabCase(property.key.name)}'`;
+                    })
+                        .join(',\n');
+                    const overridableKeys = (context.classProperties ?? [])
+                        .filter((property) => {
+                        if (!t.isIdentifier(property.key))
+                            return false;
+                        const isOverridableValue = 
+                        // biome-ignore lint: TODO
+                        property.typeAnnotation?.typeAnnotation?.typeName?.name ===
+                            'OverridableValue';
+                        return isOverridableValue;
+                    })
+                        .map((property) => `'${property.key.name}'`)
+                        .join(' | ');
                     const ast = template.default.ast(`
               // THE FOLLOWING TYPES HAVE BEEN ADDED AUTOMATICALLY
 
-							type Filter<Base, Overrides> = {
-								[K in keyof Base as K extends keyof Overrides
-									? Overrides[K] extends never
-										? never
-										: K
-									: K]: Base[K];
+							type Filter<
+								Base,
+								Disables,
+								Mapper extends Record<PropertyKey, PropertyKey> | undefined = undefined
+							> = {
+								[K in keyof Base as
+									Mapper extends Record<PropertyKey, PropertyKey>
+										? {
+												[P in keyof Mapper as Mapper[P]]: P
+											}[K] extends infer PropKey
+												? PropKey extends keyof Disables
+													? [Disables[PropKey]] extends [false]
+														? never
+														: K
+													: K
+												: K
+										: K extends keyof Disables
+											? [Disables[K]] extends [false]
+												? never
+												: K
+											: K
+								]: Base[K];
+							};
+
+							type Override<
+								Base,
+								Overrides,
+								AllowedKeys,
+								Mapper extends Record<PropertyKey, PropertyKey> | undefined = undefined
+							> = {
+								[K in keyof Base]:
+									Mapper extends Record<PropertyKey, PropertyKey>
+										? {
+												[P in keyof Mapper as Mapper[P]]: P
+											}[K] extends infer PropKey
+												? PropKey extends AllowedKeys
+													? PropKey extends keyof Overrides
+														? Overrides[PropKey]
+														: Base[K]
+													: Base[K]
+												: Base[K]
+										: K extends AllowedKeys
+											? K extends keyof Overrides
+												? Overrides[K]
+												: Base[K]
+											: Base[K];
 							};
 
-              export interface ${context.className}AttributesBase {
+							export type ${context.className}AttributesMapper = {
+								${attributeMapper}
+							};
+
+							export type ${context.className}OverridableKeys = ${overridableKeys || 'never'};
+
+							export interface ${context.className}Disables {}
+
+							export interface ${context.className}Overrides {}
+
+							export type ${context.className}Attributes = Filter<
+								${context.className}AttributesOverridden, 
+								${context.className}Disables, 
+								${context.className}AttributesMapper
+							>;
+
+							export type ${context.className}AttributesOverridden = Override<
+								${context.className}AttributesBase, 
+								${context.className}Overrides, 
+								${context.className}OverridableKeys, 
+								${context.className}AttributesMapper
+							>;
+
+              export type ${context.className}AttributesBase = {
                 ${attributes.map(print).join('')}
               }
 
-							export interface ${context.className}AttributesDisables { }
-
-							export type ${context.className}Attributes = Filter<${context.className}AttributesBase, ${context.className}AttributesDisables>;
+							export type ${context.className}Events = Filter<
+								${context.className}EventsBase, 
+								${context.className}Disables
+							>;
 
-              export interface ${context.className}EventsBase {
+              export type ${context.className}EventsBase = {
                 ${events.map(print).join('')}
               }
 
-							export interface ${context.className}EventsDisables { }
+							export type ${context.className}EventsJSX = Filter<
+								${context.className}EventsBaseJSX, 
+								${context.className}Disables, 
+								{
+									${events.map((event) => `${print(event.key)}: 'on${pascalCase(print(event.key))}';`).join('')}
+								}
+							>;
+
+							export type ${context.className}EventsBaseJSX = {
+                ${events
+                        .map((event) => ({
+                        ...event,
+                        key: t.identifier(`on${pascalCase(print(event.key))}`)
+                    }))
+                        .map(print)
+                        .join('')}
+							};
 
-							export type ${context.className}Events = Filter<${context.className}EventsBase, ${context.className}EventsDisables>;
+							export type ${context.className}Methods = Filter<
+								${context.className}MethodsBase, 
+								${context.className}Disables
+							>;
 
-              export interface ${context.className}MethodsBase {
+              export type ${context.className}MethodsBase = {
                 ${methods.map(print).join('')}
               }
 
-							export interface ${context.className}MethodsDisables { }
+							export type ${context.className}Properties = Filter<
+								${context.className}PropertiesOverridden, 
+								${context.className}Disables
+							>;
 
-							export type ${context.className}Methods = Filter<${context.className}MethodsBase, ${context.className}MethodsDisables>;
+							export type ${context.className}PropertiesOverridden = Override<
+								${context.className}PropertiesBase, 
+								${context.className}Overrides, 
+								${context.className}OverridableKeys
+							>;
 
-              export interface ${context.className}PropertiesBase {
+              export type ${context.className}PropertiesBase = {
                 ${properties.map(print).join('')}
               }
 
-							export interface ${context.className}PropertiesDisables { }
+							declare module '${PACKAGE_NAME}' {
+							  interface HTMLPlusElements {
+									'${context.elementTagName}': {
+										properties: ${context.className}PropertiesOverridden;
+									}
+								}
+							}
 
-							export type ${context.className}Properties = Filter<${context.className}PropertiesBase, ${context.className}PropertiesDisables>;
+              export type ${context.className}Element = globalThis.${context.elementInterfaceName};
 
-              export interface ${context.className}JSX extends ${context.className}Events, ${context.className}Properties { }
+              export type ${context.className}JSX = ${context.className}Attributes & ${context.className}EventsJSX;
+                
+							export namespace JSX {
+								interface IntrinsicElements {
+									"${context.elementTagName}": ${context.className}JSX;
+								}
+							}
     
               declare global {
                 interface ${context.elementInterfaceName} extends HTMLElement, ${context.className}Methods, ${context.className}Properties { }
@@ -757,34 +877,14 @@ const customElement = (userOptions) => {
                   "${context.elementTagName}": ${context.elementInterfaceName};
                 }
               }
-                
-							export namespace JSX {
-								interface IntrinsicElements {
-									"${context.elementTagName}": ${context.className}Attributes & ${context.className}Events;
-								}
-							}
 							
 							declare module "react" {
 								namespace JSX {
 									interface IntrinsicElements {
-										"${context.elementTagName}": ${context.className}Attributes & ${context.className}Events & Omit<DetailedHTMLProps<HTMLAttributes<${context.elementInterfaceName}>, ${context.elementInterfaceName}>, keyof (${context.className}Attributes & ${context.className}Events)>;
+										"${context.elementTagName}": ${context.className}JSX & Omit<DetailedHTMLProps<HTMLAttributes<${context.elementInterfaceName}>, ${context.elementInterfaceName}>, keyof ${context.className}JSX>;
 									}
 								}
 							}
-
-							${['@builder.io/qwik', 'inferno', 'preact', 'solid-js']
-                        .map((key) => `
-									declare module "${key}" {
-										namespace JSX {
-											interface IntrinsicElements {
-												"${context.elementTagName}": ${context.className}Attributes & ${context.className}Events & Omit<HTMLAttributes<${context.elementInterfaceName}>, keyof (${context.className}Attributes & ${context.className}Events)>;
-											}
-										}
-									}
-								`)
-                        .join('\n')}
-
-              export type ${context.className}Element = globalThis.${context.elementInterfaceName}
             `, {
                         plugins: ['typescript'],
                         preserveComments: true
@@ -817,37 +917,6 @@ 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.4.5",
+	"version": "3.4.7",
 	"description": "A powerful library for building scalable, reusable, fast, tastable and lightweight design system for any web technologies. Powered by Web Component.",
 	"keywords": [
 		"components",