@htmlplus/element 1.0.0 → 2.0.0

package/client/utils/classes.js

@@ -1,15 +1,15 @@
 import { kebabCase } from 'change-case';
 import { typeOf } from './typeOf.js';
+/**
+ * TODO
+ */
 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);
-            });
+            for (const item of input) {
+                result.push(classes(item, smart));
+            }
             break;
         }
         case 'object': {
@@ -19,34 +19,17 @@ export const classes = (input, smart) => {
                 const name = kebabCase(key);
                 const type = typeOf(value);
                 if (!smart) {
-                    if (!value)
-                        continue;
-                    result.push(name);
+                    value && result.push(name);
                     continue;
                 }
                 switch (type) {
                     case 'boolean': {
-                        if (!value)
-                            continue;
-                        result.push(`${name}`);
-                        break;
-                    }
-                    case 'number': {
-                        result.push(`${name}-${value}`);
+                        value && result.push(`${name}`);
                         break;
                     }
+                    case 'number':
                     case 'string': {
-                        switch (value) {
-                            case '':
-                            case 'true':
-                                result.push(`${name}`);
-                                break;
-                            case 'false':
-                                break;
-                            default:
-                                result.push(`${name}-${value}`);
-                                break;
-                        }
+                        result.push(`${name}-${value}`);
                         break;
                     }
                 }
@@ -58,5 +41,5 @@ export const classes = (input, smart) => {
             break;
         }
     }
-    return result.join(' ');
+    return result.filter((item) => item).join(' ');
 };

package/client/utils/config.d.ts

@@ -1,8 +1,11 @@
+/**
+ * TODO
+ */
 export interface Config {
     asset?: {
         [key: string]: any;
     };
-    component?: {
+    element?: {
         [key: string]: {
             property?: {
                 [key: string]: any;
@@ -10,5 +13,24 @@ export interface Config {
         };
     };
 }
-export declare const getConfig: (namespace: string, ...parameters: string[]) => any;
-export declare const setConfig: (namespace: string, config: Config, override?: boolean) => void;
+/**
+ * TODO
+ */
+export interface ConfigOptions {
+    /**
+     * TODO
+     */
+    force?: boolean;
+    /**
+     * TODO
+     */
+    override?: boolean;
+}
+/**
+ * TODO
+ */
+export declare const getConfig: (...keys: string[]) => any;
+/**
+ * TODO
+ */
+export declare const setConfig: (config: Config, options?: ConfigOptions) => void;

package/client/utils/config.js

@@ -1,20 +1,28 @@
+import { isServer } from './isServer.js';
 import { merge } from './merge.js';
-let defaults = {
-    component: {}
+const DEFAULTS = {
+    element: {}
 };
-export const getConfig = (namespace, ...parameters) => {
-    if (typeof window == 'undefined')
+/**
+ * TODO
+ */
+export const getConfig = (...keys) => {
+    if (isServer())
         return;
-    let config = window[namespace];
-    for (const parameter of parameters) {
+    let config = window[`$htmlplus$`];
+    for (const key of keys) {
         if (!config)
             break;
-        config = config[parameter];
+        config = config[key];
     }
     return config;
 };
-export const setConfig = (namespace, config, override) => {
-    if (typeof window == 'undefined')
+/**
+ * TODO
+ */
+export const setConfig = (config, options) => {
+    if (isServer())
         return;
-    window[namespace] = merge({}, defaults, override ? {} : window[namespace], config);
+    const previous = (options === null || options === void 0 ? void 0 : options.override) ? {} : window[`$htmlplus$`];
+    window[`$htmlplus$`] = merge({}, DEFAULTS, previous, config);
 };

package/client/utils/direction.d.ts

@@ -1,3 +1,6 @@
 import { PlusElement } from '../../types';
-export type Direction = 'ltr' | 'rtl';
-export declare const direction: (target: PlusElement) => Direction;
+/**
+ * Indicates whether the [Direction](https://mdn.io/css-direction)
+ * of the element is `Right-To-Left` or `Left-To-Right`.
+ */
+export declare const direction: (target: PlusElement) => 'ltr' | 'rtl';

package/client/utils/direction.js

@@ -1,4 +1,8 @@
 import { host } from './host.js';
+/**
+ * Indicates whether the [Direction](https://mdn.io/css-direction)
+ * of the element is `Right-To-Left` or `Left-To-Right`.
+ */
 export const direction = (target) => {
-    return getComputedStyle(host(target)).getPropertyValue('direction').toLowerCase();
+    return getComputedStyle(host(target)).getPropertyValue('direction');
 };

package/client/utils/event.d.ts

@@ -3,6 +3,12 @@ type EventType = 'outside' | (string & {});
 type EventHandler = EventListenerOrEventListenerObject;
 type EventOptions = boolean | AddEventListenerOptions;
 type EventListener = (target: EventTarget, type: EventType, handler: EventHandler, options?: EventOptions) => void;
+/**
+ * TODO
+ */
 export declare const off: EventListener;
+/**
+ * TODO
+ */
 export declare const on: EventListener;
 export {};

package/client/utils/event.js

@@ -1,4 +1,7 @@
 const outsides = [];
+/**
+ * TODO
+ */
 export const off = (target, type, handler, options) => {
     if (type != 'outside')
         return target.removeEventListener(type, handler, options);
@@ -9,6 +12,9 @@ export const off = (target, type, handler, options) => {
     off(document, outside.type, outside.callback, outside.options);
     outsides.splice(index, 1);
 };
+/**
+ * TODO
+ */
 export const on = (target, type, handler, options) => {
     if (type != 'outside')
         return target.addEventListener(type, handler, options);

package/client/utils/host.d.ts

@@ -1,2 +1,5 @@
 import { PlusElement } from '../../types';
+/**
+ * Indicates the host of the element.
+ */
 export declare const host: (target: PlusElement) => HTMLElement;

package/client/utils/host.js

@@ -1,4 +1,7 @@
 import * as CONSTANTS from '../../constants/index.js';
+/**
+ * Indicates the host of the element.
+ */
 export const host = (target) => {
     return target[CONSTANTS.API_HOST]();
 };

package/client/utils/index.d.ts

@@ -9,20 +9,23 @@ export * from './direction.js';
 export * from './event.js';
 export * from './getFramework.js';
 export * from './getMembers.js';
-export * from './getNamespace.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';

package/client/utils/index.js

@@ -9,20 +9,23 @@ export * from './direction.js';
 export * from './event.js';
 export * from './getFramework.js';
 export * from './getMembers.js';
-export * from './getNamespace.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';

package/client/utils/isCSSColor.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 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

@@ -0,0 +1,9 @@
+/**
+ * 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/isRTL.d.ts

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

package/client/utils/isRTL.js

@@ -1,2 +1,5 @@
 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 +1,4 @@
+/**
+ * Indicates whether the current code is running on a server.
+ */
 export declare const isServer: () => boolean;

package/client/utils/isServer.js

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

package/client/utils/query.d.ts

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

package/client/utils/query.js

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

package/client/utils/queryAll.d.ts

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

package/client/utils/queryAll.js

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

package/client/utils/request.d.ts

@@ -1,7 +1,7 @@
 import { PlusElement } from '../../types';
 /**
  * Updates the DOM with a scheduled task.
- * @param target The component instance.
+ * @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.

package/client/utils/request.js

@@ -6,7 +6,7 @@ import { task } from './task.js';
 import { html, render } from './uhtml.js';
 /**
  * Updates the DOM with a scheduled task.
- * @param target The component instance.
+ * @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.

package/client/utils/slots.d.ts

@@ -2,5 +2,8 @@ import { PlusElement } from '../../types';
 type Slots = {
     [key: string]: boolean;
 };
+/**
+ * Returns the slots name.
+ */
 export declare const slots: (target: PlusElement) => Slots;
 export {};

package/client/utils/slots.js

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

package/client/utils/styles.d.ts

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

package/client/utils/styles.js

@@ -1,5 +1,8 @@
 import { kebabCase } from 'change-case';
 import { typeOf } from './typeOf.js';
+/**
+ * Converts a JavaScript object containing CSS styles to a CSS string.
+ */
 export const styles = (input) => {
     switch (typeOf(input)) {
         case 'array':

package/client/utils/toDecorator.d.ts

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

package/client/utils/toDecorator.js

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

package/client/utils/toUnit.d.ts

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

package/client/utils/toUnit.js

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

package/constants/index.d.ts

@@ -8,6 +8,7 @@ export declare const API_RENDER_COMPLETED: unique symbol;
 export declare const API_STACKS: unique symbol;
 export declare const COMMENT_AUTO_ADDED_DEPENDENCY = " THIS DEPENDENCY IS AUTO-ADDED, DO NOT EDIT MANUALY";
 export declare const COMMENT_AUTO_ADDED_PROPERTY = " THIS PROPERTY IS AUTO-ADDED, DO NOT EDIT MANUALY";
+export declare const CSS_DECORATOR_PROPERTY = "@Property()";
 export declare const DECORATOR_ELEMENT = "Element";
 export declare const DECORATOR_EVENT = "Event";
 export declare const DECORATOR_PROPERTY = "Property";

package/constants/index.js

@@ -10,6 +10,8 @@ export const API_STACKS = Symbol();
 // comments
 export const COMMENT_AUTO_ADDED_DEPENDENCY = ' THIS DEPENDENCY IS AUTO-ADDED, DO NOT EDIT MANUALY';
 export const COMMENT_AUTO_ADDED_PROPERTY = ' THIS PROPERTY IS AUTO-ADDED, DO NOT EDIT MANUALY';
+// CSS decorators
+export const CSS_DECORATOR_PROPERTY = '@Property()';
 // decorators
 export const DECORATOR_ELEMENT = 'Element';
 export const DECORATOR_EVENT = 'Event';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "license": "MIT",
   "sideEffects": false,
   "author": "Masood Abdolian <m.abdolian@gmail.com>",
@@ -15,7 +15,7 @@
     "directory": "dist"
   },
   "engines": {
-    "node": ">= 12.7.0"
+    "node": ">= 20.10.0"
   },
   "keywords": [
     "components",
@@ -57,7 +57,7 @@
     "prettier": "^2.8.0",
     "rimraf": "^3.0.2",
     "semantic-release": "^22.0.8",
-    "ts-node": "^10.9.1",
+    "tsx": "^4.6.2",
     "vite": "^3.2.4"
   }
 }

package/transformer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './transformer.js';
+export * from './transformer.types.js';
+export * from './plugins/index.js';

package/transformer/index.js

@@ -0,0 +1,3 @@
+export * from './transformer.js';
+export * from './transformer.types.js';
+export * from './plugins/index.js';

package/transformer/plugins/assets.d.ts

@@ -0,0 +1,8 @@
+import { TransformerPlugin, TransformerPluginContext } from '../transformer.types';
+export declare const ASSETS_OPTIONS: Partial<AssetsOptions>;
+export interface AssetsOptions {
+    once?: boolean;
+    destination?: (context: TransformerPluginContext) => string;
+    source?: (context: TransformerPluginContext) => string;
+}
+export declare const assets: (options?: AssetsOptions) => TransformerPlugin;

package/transformer/plugins/assets.js

@@ -0,0 +1,29 @@
+import fs from 'fs-extra';
+import path from 'path';
+export const ASSETS_OPTIONS = {
+    once: true,
+    destination(context) {
+        return path.join('dist', 'assets', context.fileName);
+    },
+    source(context) {
+        return path.join(context.directoryPath, 'assets');
+    }
+};
+export const assets = (options) => {
+    const name = 'assets';
+    options = Object.assign({}, ASSETS_OPTIONS, options);
+    const sources = new Set();
+    const run = (context) => {
+        context.assetsDestination = options.destination(context);
+        context.assetsSource = options.source(context);
+        if (!context.assetsSource)
+            return;
+        if (!fs.existsSync(context.assetsSource))
+            return;
+        if (options.once && sources.has(context.assetsSource))
+            return;
+        sources.add(context.assetsSource);
+        fs.copySync(context.assetsSource, context.assetsDestination);
+    };
+    return { name, run };
+};

package/{compiler → transformer}/plugins/copy.d.ts

@@ -1,4 +1,4 @@
-import { Plugin } from '../../types';
+import { TransformerPlugin } from '../transformer.types';
 export declare const COPY_OPTIONS: Partial<CopyOptions>;
 export interface CopyOptions {
     at?: 'start' | 'run' | 'finish';
@@ -6,4 +6,4 @@ export interface CopyOptions {
     source: string;
     transformer?: (content: string) => string;
 }
-export declare const copy: (options: CopyOptions) => Plugin;
+export declare const copy: (options: CopyOptions) => TransformerPlugin;

package/{compiler → transformer}/plugins/customElement.d.ts

@@ -1,7 +1,7 @@
-import { Plugin } from '../../types';
+import { TransformerPlugin } from '../transformer.types';
 export declare const CUSTOM_ELEMENT_OPTIONS: Partial<CustomElementOptions>;
 export interface CustomElementOptions {
     prefix?: string;
     typings?: boolean;
 }
-export declare const customElement: (options?: CustomElementOptions) => Plugin;
+export declare const customElement: (options?: CustomElementOptions) => TransformerPlugin;