@htmlplus/element 2.1.0 → 2.1.2

package/client/index.d.ts

@@ -1,2 +1,2 @@
 export * from './decorators/index.js';
-export { classes, direction, getConfig, host, isCSSColor, isRTL, query, queryAll, on, off, slots, styles, toUnit, setConfig, type Config, type ConfigOptions } from './utils/index.js';
+export { classes, direction, getConfig, host, isCSSColor, isRTL, query, queryAll, on, off, slots, toUnit, setConfig, type Config, type ConfigOptions } from './utils/index.js';

package/client/index.js

@@ -1,2 +1,2 @@
 export * from './decorators/index.js';
-export { classes, direction, getConfig, host, isCSSColor, isRTL, query, queryAll, on, off, slots, styles, toUnit, setConfig } from './utils/index.js';
+export { classes, direction, getConfig, host, isCSSColor, isRTL, query, queryAll, on, off, slots, toUnit, setConfig } from './utils/index.js';

package/client/utils/styles.d.ts

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

package/client/utils/styles.js

@@ -1,20 +1,10 @@
 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':
-            return input.join('; ');
-        case 'object':
-            return Object.keys(input)
-                .filter((key) => input[key] !== undefined && input[key] !== null)
-                .map((key) => `${key.startsWith('--') ? '--' : ''}${kebabCase(key)}: ${input[key]}`)
-                .join('; ');
-        case 'string':
-            return input;
-        default:
-            return '';
-    }
+    return Object.keys(input)
+        .filter((key) => input[key] !== undefined && input[key] !== null)
+        .map((key) => `${key.startsWith('--') ? '--' : ''}${kebabCase(key)}: ${input[key]}`)
+        .join('; ');
 };

package/constants/index.d.ts

@@ -6,14 +6,14 @@ export declare const API_LOCKED: unique symbol;
 export declare const API_REQUEST: unique symbol;
 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 COMMENT_AUTO_ADDED = " THIS IS AUTO-ADDED, DO NOT EDIT MANUALY";
+export declare const DECORATOR_CSS_VARIABLE = "@Property()";
 export declare const DECORATOR_ELEMENT = "Element";
 export declare const DECORATOR_EVENT = "Event";
 export declare const DECORATOR_PROPERTY = "Property";
 export declare const DECORATOR_STATE = "State";
 export declare const DECORATOR_METHOD = "Method";
+export declare const ELEMENT_HOST_NAME = "host";
 export declare const LIFECYCLE_ADOPTED = "adoptedCallback";
 export declare const LIFECYCLE_CONNECT = "connectCallback";
 export declare const LIFECYCLE_CONNECTED = "connectedCallback";

package/constants/index.js

@@ -1,5 +1,5 @@
 export const PACKAGE_NAME = '@htmlplus/element';
-// apis
+// APIs
 export const API_CONNECTED = Symbol();
 export const API_HOST = Symbol();
 export const API_INSTANCE = Symbol();
@@ -8,16 +8,17 @@ export const API_REQUEST = Symbol();
 export const API_RENDER_COMPLETED = Symbol();
 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';
+export const COMMENT_AUTO_ADDED = ' THIS IS AUTO-ADDED, DO NOT EDIT MANUALY';
 // CSS decorators
-export const CSS_DECORATOR_PROPERTY = '@Property()';
+export const DECORATOR_CSS_VARIABLE = '@Property()';
 // decorators
 export const DECORATOR_ELEMENT = 'Element';
 export const DECORATOR_EVENT = 'Event';
 export const DECORATOR_PROPERTY = 'Property';
 export const DECORATOR_STATE = 'State';
 export const DECORATOR_METHOD = 'Method';
+// element
+export const ELEMENT_HOST_NAME = 'host';
 // lifecycle
 export const LIFECYCLE_ADOPTED = 'adoptedCallback';
 export const LIFECYCLE_CONNECT = 'connectCallback';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "license": "MIT",
   "sideEffects": false,
   "author": "Masood Abdolian <m.abdolian@gmail.com>",
@@ -32,32 +32,32 @@
   },
   "homepage": "https://github.com/htmlplus/element#readme",
   "dependencies": {
-    "@babel/generator": "^7.20.4",
-    "@babel/parser": "^7.20.3",
-    "@babel/template": "^7.22.15",
-    "@babel/traverse": "^7.20.1",
-    "@babel/types": "^7.20.2",
-    "@types/node": "^18.11.9",
-    "change-case": "^5.1.2",
-    "fast-glob": "^3.2.12",
-    "fs-extra": "^10.1.0",
-    "handlebars": "^4.7.7",
-    "ora": "^6.1.2",
-    "typescript": "^4.9.3"
+    "@babel/generator": "^7.23.6",
+    "@babel/parser": "^7.23.9",
+    "@babel/template": "^7.23.9",
+    "@babel/traverse": "^7.23.9",
+    "@babel/types": "^7.23.9",
+    "@types/node": "^20.11.19",
+    "change-case": "^5.4.3",
+    "fs-extra": "^11.2.0",
+    "glob": "^10.3.10",
+    "handlebars": "^4.7.8",
+    "ora": "^8.0.1",
+    "typescript": "^4.9.5"
   },
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^11.1.0",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^9.2.4",
-    "@semantic-release/npm": "^11.0.1",
+    "@semantic-release/github": "^9.2.6",
+    "@semantic-release/npm": "^11.0.2",
     "@semantic-release/release-notes-generator": "^12.1.0",
-    "@trivago/prettier-plugin-sort-imports": "^4.0.0",
-    "cpy": "^9.0.1",
-    "prettier": "^2.8.0",
-    "rimraf": "^3.0.2",
-    "semantic-release": "^22.0.8",
-    "tsx": "^4.6.2",
-    "vite": "^3.2.4"
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "cpy": "^11.0.0",
+    "prettier": "^3.2.5",
+    "rimraf": "^5.0.5",
+    "semantic-release": "^23.0.2",
+    "tsx": "^4.7.1",
+    "vite": "^5.1.3"
   }
 }

package/transformer/plugins/assets.d.ts

@@ -1,7 +1,6 @@
 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;
 }

package/transformer/plugins/assets.js

@@ -1,7 +1,6 @@
 import fs from 'fs-extra';
 import path from 'path';
 export const ASSETS_OPTIONS = {
-    once: true,
     destination(context) {
         return path.join('dist', 'assets', context.fileName);
     },
@@ -12,18 +11,16 @@ export const ASSETS_OPTIONS = {
 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);
+    const finish = (global) => {
+        for (const context of global.contexts) {
+            context.assetsDestination = options.destination(context);
+            context.assetsSource = options.source(context);
+            if (!context.assetsSource)
+                return;
+            if (!fs.existsSync(context.assetsSource))
+                return;
+            fs.copySync(context.assetsSource, context.assetsDestination);
+        }
     };
-    return { name, run };
+    return { name, finish };
 };

package/transformer/plugins/customElement.js

@@ -13,22 +13,20 @@ export const customElement = (options) => {
     options = Object.assign({}, CUSTOM_ELEMENT_OPTIONS, options);
     const run = (context) => {
         const ast = t.cloneNode(context.fileAST, true);
-        // TODO
         context.elementTagName = `${options.prefix || ''}${context.elementKey}`;
-        // TODO
         context.elementInterfaceName = `HTML${pascalCase(context.elementTagName)}Element`;
-        // attaches name
+        // attach tag name
         visitor(ast, {
             ClassDeclaration(path) {
                 const { body, id } = path.node;
                 if (id.name != context.className)
                     return;
                 const node = t.classProperty(t.identifier(CONSTANTS.STATIC_TAG), t.stringLiteral(context.elementTagName), undefined, undefined, undefined, true);
-                t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_PROPERTY, true);
+                t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED, true);
                 body.body.unshift(node);
             }
         });
-        // attaches style mapper for 'style' attribute
+        // attach style mapper for 'style' attribute
         visitor(ast, {
             JSXAttribute(path) {
                 const { name, value } = path.node;
@@ -44,7 +42,7 @@ export const customElement = (options) => {
                 path.skip();
             }
         });
-        // replaces 'className' attribute with 'class'
+        // replace 'className' attribute with 'class'
         visitor(ast, {
             JSXAttribute(path) {
                 const { name, value } = path.node;
@@ -66,7 +64,8 @@ export const customElement = (options) => {
                 path.replaceWith(t.jsxAttribute(t.jsxIdentifier(name.name.toLowerCase()), value));
             }
         });
-        // converts 'jsx' to 'uhtml' syntax
+        // TODO
+        // convert 'jsx' to 'uhtml' syntax
         visitor(ast, {
             enter(path) {
                 const { type } = path.node;
@@ -95,7 +94,7 @@ export const customElement = (options) => {
                     switch (node.type) {
                         case 'JSXElement':
                             const attributes = node.openingElement.attributes;
-                            const isHost = node.openingElement.name.name == 'host';
+                            const isHost = node.openingElement.name.name == CONSTANTS.ELEMENT_HOST_NAME;
                             // TODO
                             if (isHost) {
                                 const children = node.children.map(render).flat();
@@ -176,7 +175,7 @@ export const customElement = (options) => {
                 path.replaceWith(transform(render(path.node)));
             }
         });
-        // adds type to properties
+        // add type to properties
         visitor(ast, {
             Decorator(path) {
                 var _a, _b;
@@ -273,7 +272,7 @@ export const customElement = (options) => {
                 argument.properties.push(t.objectProperty(t.identifier(CONSTANTS.STATIC_MEMBERS_TYPE), t.numericLiteral(type)));
             }
         });
-        // attaches typings
+        // attach typings
         if (options.typings) {
             visitor(ast, {
                 Program(path) {

package/transformer/plugins/document.js

@@ -1,6 +1,6 @@
 import { capitalCase, kebabCase } from 'change-case';
 import fs from 'fs-extra';
-import glob from 'glob';
+import { glob } from 'glob';
 import path from 'path';
 import * as CONSTANTS from '../../constants/index.js';
 import { getInitializer, getTag, getTags, getTypeReference, hasTag, parseTag, print } from '../utils/index.js';
@@ -181,7 +181,7 @@ export const document = (options) => {
                     return [];
                 return fs
                     .readFileSync(context.stylePath, 'utf8')
-                    .split(CONSTANTS.CSS_DECORATOR_PROPERTY)
+                    .split(CONSTANTS.DECORATOR_CSS_VARIABLE)
                     .slice(1)
                     .map((section) => {
                     const [first, second] = section.split(/\n/);

package/transformer/plugins/style.js

@@ -35,7 +35,7 @@ export const style = (options) => {
         const { local } = addDependency(context.fileAST, context.stylePath, CONSTANTS.STYLE_IMPORTED, undefined, true);
         // TODO: remove 'local!'
         const property = t.classProperty(t.identifier(CONSTANTS.STATIC_STYLES), t.identifier(local), undefined, null, undefined, true);
-        t.addComment(property, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_PROPERTY, true);
+        t.addComment(property, 'leading', CONSTANTS.COMMENT_AUTO_ADDED, true);
         context.class.body.body.unshift(property);
     };
     return { name, run };

package/transformer/utils/addDependency.js

@@ -55,7 +55,7 @@ export function addDependency(path, source, local, imported, comment) {
         (file.program || file).body.unshift(declaration);
         // TODO
         if (comment) {
-            t.addComment(declaration, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_DEPENDENCY, true);
+            t.addComment(declaration, 'leading', CONSTANTS.COMMENT_AUTO_ADDED, true);
         }
     }
     return {

package/transformer/utils/getType.js

@@ -1,5 +1,5 @@
 import { parse } from '@babel/parser';
-import glob from 'fast-glob';
+import { glob } from 'glob';
 import fs from 'fs-extra';
 import { dirname, resolve } from 'path';
 import { join } from 'path';

package/transformer/utils/index.d.ts

@@ -1,13 +1,9 @@
-export * from './__dirname.js';
 export * from './addDependency.js';
 export * from './getInitializer.js';
 export * from './getType.js';
 export * from './getTypeReference.js';
 export * from './hasDecorator.js';
-export * from './isDirectoryEmpty.js';
 export * from './printType.js';
 export * from './print.js';
-export * from './removeUnusedImport.js';
-export * from './renderTemplate.js';
 export * from './tags.js';
 export * from './visitor.js';

package/transformer/utils/index.js

@@ -1,13 +1,9 @@
-export * from './__dirname.js';
 export * from './addDependency.js';
 export * from './getInitializer.js';
 export * from './getType.js';
 export * from './getTypeReference.js';
 export * from './hasDecorator.js';
-export * from './isDirectoryEmpty.js';
 export * from './printType.js';
 export * from './print.js';
-export * from './removeUnusedImport.js';
-export * from './renderTemplate.js';
 export * from './tags.js';
 export * from './visitor.js';

package/transformer/utils/__dirname.d.ts

@@ -1 +0,0 @@
-export declare const __dirname: (url: string | URL) => string;

package/transformer/utils/__dirname.js

@@ -1,5 +0,0 @@
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-export const __dirname = (url) => {
-    return dirname(fileURLToPath(url));
-};

package/transformer/utils/isDirectoryEmpty.d.ts

@@ -1 +0,0 @@
-export declare const isDirectoryEmpty: (directory: string) => boolean;

package/transformer/utils/isDirectoryEmpty.js

@@ -1,10 +0,0 @@
-import fs from 'fs-extra';
-export const isDirectoryEmpty = (directory) => {
-    try {
-        const files = fs.readdirSync(directory);
-        return !files.length;
-    }
-    catch (_a) {
-        return true;
-    }
-};

package/transformer/utils/removeUnusedImport.d.ts

@@ -1 +0,0 @@
-export declare const removeUnusedImport: (ast: any) => void;

package/transformer/utils/removeUnusedImport.js

@@ -1,49 +0,0 @@
-import t from '@babel/types';
-import { visitor } from './visitor.js';
-// TODO
-export const removeUnusedImport = (ast) => {
-    visitor(ast, {
-        Program: {
-            exit(path) {
-                for (const entry of Object.entries(path.scope.bindings)) {
-                    let { kind, path, referenced, referencePaths } = entry[1];
-                    if (kind !== 'module')
-                        continue;
-                    if (referenced) {
-                        referenced = false;
-                        for (const referencePath of referencePaths) {
-                            let find = true;
-                            let parent = referencePath;
-                            while (parent) {
-                                if (!parent.node) {
-                                    find = false;
-                                    break;
-                                }
-                                parent = parent.parentPath;
-                            }
-                            if (!find)
-                                continue;
-                            referenced = true;
-                            break;
-                        }
-                    }
-                    if (referenced)
-                        continue;
-                    const source = path.parentPath.get('source');
-                    if (!t.isStringLiteral(source))
-                        continue;
-                    if (path.isImportSpecifier()) {
-                        path.remove();
-                        if (path.parentPath.node.specifiers.length)
-                            continue;
-                        path.parentPath.remove();
-                        continue;
-                    }
-                    if (!path.parentPath)
-                        continue;
-                    path.parentPath.remove();
-                }
-            }
-        }
-    });
-};

package/transformer/utils/renderTemplate.d.ts

@@ -1 +0,0 @@
-export declare const renderTemplate: (source: string | Array<string>, destination: string, options?: any) => (context: any) => void;

package/transformer/utils/renderTemplate.js

@@ -1,25 +0,0 @@
-import glob from 'fast-glob';
-import fs from 'fs-extra';
-import handlebars from 'handlebars';
-import path from 'path';
-export const renderTemplate = (source, destination, options) => (context) => {
-    const files = glob.sync(source, options);
-    for (const file of files) {
-        // TODO
-        const from = path.resolve((options === null || options === void 0 ? void 0 : options.cwd) || '', file);
-        // TODO
-        const to = path.join(destination, path
-            .normalize(file)
-            .split(path.sep)
-            .slice(1)
-            .map((section) => handlebars.compile(section)(context))
-            .join(path.sep)
-            .replace('_.', '.')
-            .replace('.hbs', ''));
-        const directory = path.dirname(to);
-        const raw = fs.readFileSync(from, 'utf8');
-        const template = handlebars.compile(raw)(context);
-        fs.ensureDirSync(directory);
-        fs.writeFileSync(to, template, 'utf8');
-    }
-};