@htmlplus/element 3.2.6 → 3.3.1

package/dist/transformer.js

@@ -1,99 +1,29 @@
-import generator from '@babel/generator';
 import t from '@babel/types';
-import traverse from '@babel/traverse';
 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 ora from 'ora';
 import path, { join, resolve, dirname } from 'node:path';
-import { KEY, COMMENT_AUTO_ADDED, DECORATOR_PROPERTY, STATIC_TAG, UTILS_STYLES_LOCAL, UTILS_PATH, ELEMENT_HOST_NAME, UTILS_HTML_LOCAL, DECORATOR_PROPERTY_TYPE, TYPE_OBJECT, TYPE_NULL, TYPE_ARRAY, TYPE_STRING, TYPE_ENUM, TYPE_NUMBER, TYPE_DATE, TYPE_BOOLEAN, UTILS_ATTRIBUTES_LOCAL, UTILS_STYLES_IMPORTED, UTILS_ATTRIBUTES_IMPORTED, UTILS_HTML_IMPORTED, DECORATOR_CSS_VARIABLE, DECORATOR_EVENT, DECORATOR_METHOD, DECORATOR_STATE, STATIC_STYLE, STYLE_IMPORTED, PACKAGE_NAME, DECORATOR_ELEMENT } from './constants.js';
-
-const logger = ora({
-    color: 'yellow'
-});
-const log = (message, persist) => {
-    const content = `${new Date().toLocaleTimeString()} [${KEY}] ${message}`;
-    const log = logger.start(content);
-    if (!persist)
-        return;
-    log.succeed();
-};
-const transformer = (...plugins) => {
-    let global = {
-        contexts: []
-    };
-    const start = async () => {
-        log(`Started.`, true);
-        log(`${plugins.length} plugins detected.`, true);
-        log(`Plugins are starting.`, true);
-        for (const plugin of plugins) {
-            if (!plugin.start)
-                continue;
-            log(`Plugin '${plugin.name}' is starting.`);
-            global = (await plugin.start(global)) || global;
-            log(`Plugin '${plugin.name}' started successfully.`);
-        }
-        log(`Plugins have been successfully started.`, true);
-    };
-    const run = async (filePath) => {
-        path.join(filePath).split(path.sep).pop();
-        let context = {
-            filePath
-        };
-        const parsed = path.parse(filePath);
-        for (const plugin of plugins) {
-            if (!plugin.run)
-                continue;
-            const source = path.join(parsed.dir).split(path.sep).slice(-2).concat(parsed.base).join('/');
-            log(`Plugin '${plugin.name}' is executing on '${source}' file.`);
-            try {
-                context = (await plugin.run(context, global)) || context;
-            }
-            catch (error) {
-                log(`Error in '${plugin.name}' plugin on '${source}' file.\n`, true);
-                throw error;
-            }
-            global.contexts = global.contexts
-                .filter((current) => {
-                return current.filePath != context.filePath;
-            })
-                .concat(context);
-            log(`Plugin '${plugin.name}' executed successfully on '${source}' file.`);
-        }
-        logger.stop();
-        return context;
-    };
-    const finish = async () => {
-        log(`Plugins are finishing.`, true);
-        for (const plugin of plugins) {
-            if (!plugin.finish)
-                continue;
-            log(`Plugin '${plugin.name}' is finishing.`);
-            global = (await plugin.finish(global)) || global;
-            log(`Plugin '${plugin.name}' finished successfully.`);
-        }
-        log(`Plugins have been successfully finished.`, true);
-        log(`Finished.`, true);
-    };
-    return { global, start, run, finish };
-};
+import { COMMENT_AUTO_ADDED, DECORATOR_PROPERTY, STATIC_TAG, DECORATOR_PROPERTY_TYPE, UTILS_STYLES_IMPORTED, UTILS_STYLES_LOCAL, UTILS_PATH, UTILS_HTML_IMPORTED, UTILS_HTML_LOCAL, ELEMENT_HOST_NAME, TYPE_OBJECT, TYPE_NULL, TYPE_ARRAY, TYPE_STRING, TYPE_ENUM, TYPE_NUMBER, TYPE_DATE, TYPE_BOOLEAN, UTILS_ATTRIBUTES_IMPORTED, UTILS_ATTRIBUTES_LOCAL, DECORATOR_CSS_VARIABLE, DECORATOR_EVENT, DECORATOR_METHOD, DECORATOR_STATE, STATIC_STYLE, STYLE_IMPORTED, PACKAGE_NAME, DECORATOR_ELEMENT, KEY } from './constants.js';
+import core from '@babel/traverse';
+import core$1 from '@babel/generator';
+import ora from 'ora';
 
 const ASSETS_OPTIONS = {
     destination(context) {
-        return path.join('dist', 'assets', context.fileName);
+        return path.join('dist', 'assets', context.fileName || '');
     },
     source(context) {
-        return path.join(context.directoryPath, 'assets');
+        return path.join(context.directoryPath || '', 'assets');
     },
     json(context) {
-        return path.join('dist', 'assets', context.fileName + '.json');
+        return path.join('dist', 'assets', `${context.fileName || ''}.json`);
     }
 };
-const assets = (options) => {
+const assets = (userOptions) => {
     const name = 'assets';
-    options = Object.assign({}, ASSETS_OPTIONS, options);
+    const options = Object.assign({}, ASSETS_OPTIONS, userOptions);
     const finish = (global) => {
         for (const context of global.contexts) {
             context.assetsDestination = options.destination(context);
@@ -115,16 +45,16 @@ const assets = (options) => {
 };
 
 const COPY_OPTIONS = {
-    at: 'start'
+    at: 'start',
+    transformer: (content) => content
 };
-const copy = (options) => {
+const copy = (userOptions) => {
     const name = 'copy';
-    options = Object.assign({}, COPY_OPTIONS, options);
+    const options = Object.assign({}, COPY_OPTIONS, userOptions);
     const copy = (caller) => {
-        if (options.at != caller)
+        if (options.at !== caller)
             return;
-        let content;
-        content = fs.readFileSync(options.source, 'utf8');
+        let content = fs.readFileSync(options.source, 'utf8');
         if (options.transformer)
             content = options.transformer(content);
         fs.ensureDirSync(path.dirname(options.destination));
@@ -142,11 +72,10 @@ const copy = (options) => {
     return { name, start, run, finish };
 };
 
-// TODO: options type
-const visitor = (ast, options) => {
-    (traverse.default || traverse)(ast, options);
-};
+const traverse = (core.default || core);
+const visitor = traverse;
 
+// biome-ignore-all lint: TODO
 function addDependency(path, source, local, imported, comment) {
     const isDefault = local && !imported;
     const isImport = local && imported;
@@ -158,7 +87,7 @@ function addDependency(path, source, local, imported, comment) {
     file = file.node || file;
     visitor(file, {
         ImportDeclaration(path) {
-            if (path.node.source.value != source)
+            if (path.node.source.value !== source)
                 return;
             declaration = path.node;
         }
@@ -169,10 +98,10 @@ function addDependency(path, source, local, imported, comment) {
         };
     let specifier = declaration?.specifiers.find((specifier) => {
         if (isDefault) {
-            return specifier.type == 'ImportDefaultSpecifier';
+            return specifier.type === 'ImportDefaultSpecifier';
         }
         else if (isImport) {
-            return specifier.imported?.name == imported;
+            return specifier.imported?.name === imported;
         }
     });
     if (specifier)
@@ -211,10 +140,11 @@ function addDependency(path, source, local, imported, comment) {
 
 const extractAttribute = (property) => {
     try {
+        // biome-ignore lint: Keep using `any` type because of complexity
         return property.decorators
-            .find((decorator) => decorator.expression.callee.name == DECORATOR_PROPERTY)
-            .expression.arguments[0].properties.find((property) => property.key.name == 'attribute').value
-            .value;
+            .find((decorator) => decorator.expression.callee.name === DECORATOR_PROPERTY)
+            .expression.arguments.at(0)
+            .properties.find((property) => property.key.name === 'attribute').value.value;
     }
     catch { }
 };
@@ -225,12 +155,12 @@ const extractFromComment = (node, whitelist) => {
         description: ''
     };
     const lines = node.leadingComments
-        ?.map((comment) => {
-        if (comment.type == 'CommentLine')
+        ?.flatMap((comment) => {
+        if (comment.type === 'CommentLine') {
             return comment.value;
+        }
         return comment.value.split('\n');
     })
-        ?.flat()
         ?.map((line) => line.trim().replace(/^\*/, '').trim())
         ?.filter((line) => line.trim());
     for (const line of lines || []) {
@@ -240,7 +170,7 @@ const extractFromComment = (node, whitelist) => {
         }
         if (!normalized.length)
             normalized.push('');
-        normalized[normalized.length - 1] += ' ' + line;
+        normalized[normalized.length - 1] += ` ${line}`;
     }
     for (const line of normalized) {
         if (!line.startsWith('@')) {
@@ -255,11 +185,14 @@ const extractFromComment = (node, whitelist) => {
         const type = groups[2]?.trim().slice(1, -1);
         const name = groups[3]?.trim();
         const description = groups[4]?.trim();
+        // TODO
+        // const [, tag, type, name, description] = groups.map((g) => g?.trim() || '');
         if (name && description) {
-            const key = tag + 's';
+            const key = `${tag}s`;
             if (whitelist && !whitelist.includes(key))
                 continue;
-            (result[key] ||= []).push({ name, type, description });
+            result[key] ||= [];
+            result[key].push({ name, type, description });
         }
         else {
             const key = tag;
@@ -272,18 +205,30 @@ const extractFromComment = (node, whitelist) => {
 };
 
 const getInitializer = (node) => {
+    // biome-ignore lint: Keep using `any` type because of complexity
     return node?.extra?.raw || node?.['value'];
 };
 
+const getTypeReferenceName = (ref) => {
+    switch (ref.typeName.type) {
+        case 'Identifier':
+            return ref.typeName.name;
+        default:
+            return undefined;
+    }
+};
 const getType = (directory, file, node) => {
     if (!node)
         return node;
-    if (node.type != 'TSTypeReference')
+    if (node.type !== 'TSTypeReference')
         return node;
     let result;
+    const typeName = getTypeReferenceName(node);
+    if (!typeName)
+        return node;
     visitor(file, {
         ClassDeclaration(path) {
-            if (path.node.id.name != node.typeName['name'])
+            if (path.node.id?.name !== typeName)
                 return;
             result = path.node;
             path.stop();
@@ -291,31 +236,25 @@ const getType = (directory, file, node) => {
         ImportDeclaration(path) {
             for (const specifier of path.node.specifiers) {
                 const alias = specifier.local.name;
-                if (alias != node.typeName['name'])
+                if (alias !== typeName)
                     continue;
-                switch (specifier.type) {
-                    case 'ImportNamespaceSpecifier':
-                        break;
-                    case 'ImportDefaultSpecifier':
-                        break;
-                    case 'ImportSpecifier':
-                        specifier.imported.name;
-                        break;
-                }
                 try {
                     const reference = glob
                         .sync(['.ts*', '/index.ts*'].map((key) => {
                         return join(directory, path.node.source.value).replace(/\\/g, '/') + key;
                     }))
-                        .find((reference) => fs.existsSync(reference));
+                        .find((reference) => reference && fs.existsSync(reference));
+                    if (!reference)
+                        continue;
                     const content = fs.readFileSync(reference, 'utf8');
-                    const filePath = resolve(directory, path.node.source.value + '.ts');
-                    path.$ast ||= parse$1(content, {
+                    const filePath = resolve(directory, `${path.node.source.value}.ts`);
+                    const pathWithAst = path;
+                    pathWithAst.$ast ||= parse$1(content, {
                         allowImportExportEverywhere: true,
                         plugins: ['typescript'],
                         ranges: false
                     });
-                    result = getType(dirname(filePath), path.$ast, node);
+                    result = getType(dirname(filePath), pathWithAst.$ast, node);
                 }
                 catch { }
                 path.stop();
@@ -323,32 +262,35 @@ const getType = (directory, file, node) => {
             }
         },
         TSInterfaceDeclaration(path) {
-            if (path.node.id.name != node.typeName['name'])
+            if (path.node.id.name !== typeName)
                 return;
             result = path.node;
             path.stop();
         },
         TSTypeAliasDeclaration(path) {
-            if (path.node.id.name != node.typeName['name'])
+            if (path.node.id.name !== typeName)
                 return;
-            result = path.node.typeAnnotation;
-            switch (result.type) {
-                case 'TSUnionType':
+            const typeAnnotation = path.node.typeAnnotation;
+            switch (typeAnnotation.type) {
+                case 'TSUnionType': {
                     const types = [];
-                    for (const prev of result.types) {
+                    for (const prev of typeAnnotation.types) {
                         const next = getType(directory, file, prev);
-                        if (next.type == 'TSUnionType') {
-                            next.types.forEach((type) => types.push(type));
+                        if (next.type === 'TSUnionType') {
+                            types.push(...next.types);
                         }
                         else {
                             types.push(next);
                         }
                     }
-                    result.types = types;
+                    typeAnnotation.types = types;
+                    result = typeAnnotation;
                     break;
-                default:
-                    result = getType(directory, file, result);
+                }
+                default: {
+                    result = getType(directory, file, typeAnnotation);
                     break;
+                }
             }
             path.stop();
         }
@@ -359,24 +301,17 @@ const getType = (directory, file, node) => {
 const getTypeReference = (file, node) => {
     if (!node)
         return;
-    if (node.type != 'TSTypeReference')
+    if (node.type !== 'TSTypeReference')
         return;
     let result;
     visitor(file, {
         ImportDeclaration(path) {
             for (const specifier of path.node.specifiers) {
                 const alias = specifier.local.name;
-                if (alias != node.typeName['name'])
+                if (node.typeName.type !== 'Identifier')
+                    continue;
+                if (alias !== node.typeName.name)
                     continue;
-                switch (specifier.type) {
-                    case 'ImportNamespaceSpecifier':
-                        break;
-                    case 'ImportDefaultSpecifier':
-                        break;
-                    case 'ImportSpecifier':
-                        specifier.imported.name;
-                        break;
-                }
                 result = path.node.source.value;
                 path.stop();
                 break;
@@ -387,38 +322,51 @@ const getTypeReference = (file, node) => {
 };
 
 const hasDecorator = (node, name) => {
+    if ('decorators' in node === false)
+        return false;
     if (!node.decorators)
         return false;
-    return !!node.decorators.some((decorator) => decorator.expression.callee?.name == name);
+    for (const decorator of node.decorators) {
+        const expression = decorator.expression;
+        if (!t.isCallExpression(expression))
+            continue;
+        if (!t.isIdentifier(expression.callee))
+            continue;
+        if (expression.callee.name === name) {
+            return true;
+        }
+    }
+    return false;
 };
 
-// TODO: add options
+const generator = (core$1.default || core$1);
 const print = (ast) => {
-    // TODO: the `ast` should not be undefined
     if (!ast)
         return '';
-    return (generator.default || generator)(ast, { decoratorsBeforeExport: true }).code;
+    return generator(ast, { decoratorsBeforeExport: true }).code;
 };
 
 const CUSTOM_ELEMENT_OPTIONS = {
-    prefix: undefined,
+    prefix: '',
     typings: true
 };
 // TODO: support {variable && jsxElement}
-const customElement = (options) => {
+const customElement = (userOptions) => {
     const name = 'customElement';
-    options = Object.assign({}, CUSTOM_ELEMENT_OPTIONS, options);
+    const options = Object.assign({}, CUSTOM_ELEMENT_OPTIONS, userOptions);
     const run = (context) => {
+        if (!context.fileAST)
+            return;
         const ast = t.cloneNode(context.fileAST, true);
-        context.elementTagName = `${options.prefix || ''}${context.elementKey}`;
+        context.elementTagName = `${options.prefix}${context.elementKey}`;
         context.elementInterfaceName = `HTML${pascalCase(context.elementTagName)}Element`;
         // attach tag name
         visitor(ast, {
             ClassDeclaration(path) {
                 const { body, id } = path.node;
-                if (id.name != context.className)
+                if (id?.name !== context.className)
                     return;
-                const node = t.classProperty(t.identifier(STATIC_TAG), t.stringLiteral(context.elementTagName), undefined, undefined, undefined, true);
+                const node = t.classProperty(t.identifier(STATIC_TAG), t.stringLiteral(context.elementTagName || ''), undefined, undefined, undefined, true);
                 t.addComment(node, 'leading', COMMENT_AUTO_ADDED, true);
                 body.body.unshift(node);
             }
@@ -427,15 +375,18 @@ const customElement = (options) => {
         visitor(ast, {
             JSXAttribute(path) {
                 const { name, value } = path.node;
-                if (name.name != 'style')
+                if (name.name !== 'style')
                     return;
                 if (!value)
                     return;
-                if (value.type != 'JSXExpressionContainer')
+                if (value.type !== 'JSXExpressionContainer')
+                    return;
+                if (!value.expression)
+                    return;
+                if (value.expression.type === 'JSXEmptyExpression')
                     return;
                 const { local } = addDependency(path, UTILS_PATH, UTILS_STYLES_LOCAL, UTILS_STYLES_IMPORTED);
-                // TODO: remove 'local!'
-                path.replaceWith(t.jsxAttribute(t.jsxIdentifier('style'), t.jsxExpressionContainer(t.callExpression(t.identifier(local), [value.expression]))));
+                path.replaceWith(t.jsxAttribute(t.jsxIdentifier('style'), t.jsxExpressionContainer(t.callExpression(t.identifier(local || ''), [value.expression]))));
                 path.skip();
             }
         });
@@ -443,10 +394,14 @@ const customElement = (options) => {
         visitor(ast, {
             JSXAttribute(path) {
                 const { name, value } = path.node;
-                if (name.name != 'className')
+                if (name.name !== 'className')
+                    return;
+                if (!value)
+                    return;
+                if (!t.isJSXOpeningElement(path.parent))
                     return;
-                const hasClass = path.parentPath.node.attributes.some((attribute) => {
-                    return attribute.name?.name == 'class';
+                const hasClass = path.parent.attributes.some((attribute) => {
+                    return t.isJSXAttribute(attribute) && attribute.name.name === 'class';
                 });
                 if (hasClass)
                     return path.remove();
@@ -457,12 +412,14 @@ const customElement = (options) => {
         visitor(ast, {
             JSXAttribute(path) {
                 const { name, value } = path.node;
-                if (name.name == 'value') {
-                    name.name = '.' + name.name;
+                if (!t.isJSXIdentifier(name))
+                    return;
+                if (name.name === 'value') {
+                    name.name = `.${name.name}`;
                     return;
                 }
-                if (name.name == 'disabled') {
-                    name.name = '.' + name.name;
+                if (name.name === 'disabled') {
+                    name.name = `.${name.name}`;
                     return;
                 }
                 const key = ['tabIndex', 'viewBox'];
@@ -480,7 +437,7 @@ const customElement = (options) => {
                     return;
                 const TODO = (node, attributes) => {
                     const { local } = addDependency(path, UTILS_PATH, UTILS_ATTRIBUTES_LOCAL, UTILS_ATTRIBUTES_IMPORTED);
-                    return t.callExpression(t.identifier(local), [
+                    return t.callExpression(t.identifier(local || ''), [
                         node,
                         t.arrayExpression(attributes.map((attribute) => {
                             switch (attribute.type) {
@@ -488,7 +445,7 @@ const customElement = (options) => {
                                     return attribute.argument;
                                 default:
                                     return t.objectExpression([
-                                        t.objectProperty(t.stringLiteral(attribute.name.name), attribute.value?.type == 'JSXExpressionContainer'
+                                        t.objectProperty(t.stringLiteral(attribute.name.name), attribute.value?.type === 'JSXExpressionContainer'
                                             ? attribute.value.expression
                                             : attribute.value || t.booleanLiteral(true))
                                     ]);
@@ -498,22 +455,22 @@ const customElement = (options) => {
                 };
                 const render = (node) => {
                     switch (node.type) {
-                        case 'JSXElement':
+                        case 'JSXElement': {
                             const attributes = node.openingElement.attributes;
-                            const isHost = node.openingElement.name.name == ELEMENT_HOST_NAME;
+                            const isHost = node.openingElement.name.name === ELEMENT_HOST_NAME;
                             // TODO
                             if (isHost) {
-                                const children = node.children.map(render).flat();
+                                const children = node.children.flatMap(render);
                                 if (!attributes.length)
                                     return children;
                                 return [TODO(t.thisExpression(), attributes), ...children];
                             }
                             const name = node.openingElement.name.name;
-                            const children = node.children.map(render).flat();
+                            const children = node.children.flatMap(render);
                             const parts = [];
                             parts.push('<', name);
                             const hasSpreadAttribute = attributes.some((attribute) => {
-                                return attribute.type == 'JSXSpreadAttribute';
+                                return attribute.type === 'JSXSpreadAttribute';
                             });
                             if (hasSpreadAttribute) {
                                 parts.push(' ', 'ref=', t.arrowFunctionExpression([t.identifier('$element')], TODO(t.identifier('$element'), attributes)));
@@ -522,7 +479,7 @@ const customElement = (options) => {
                                 for (const attribute of attributes) {
                                     switch (attribute.type) {
                                         case 'JSXAttribute':
-                                            if (attribute.name.name == 'dangerouslySetInnerHTML') {
+                                            if (attribute.name.name === 'dangerouslySetInnerHTML') {
                                                 try {
                                                     parts.push(' ', '.innerHTML');
                                                     parts.push('=');
@@ -556,12 +513,13 @@ const customElement = (options) => {
                                 parts.push('<', '/', name, '>');
                             }
                             return parts;
+                        }
                         case 'JSXFragment':
-                            return node.children.map(render).flat();
+                            return node.children.flatMap(render);
                         case 'JSXText':
                             return [node.extra.raw];
                         case 'JSXExpressionContainer':
-                            if (node.expression.type == 'JSXEmptyExpression')
+                            if (node.expression.type === 'JSXEmptyExpression')
                                 return [];
                             return [node.expression];
                     }
@@ -572,7 +530,7 @@ const customElement = (options) => {
                     let i = 0;
                     while (i < parts.length + 1) {
                         let quasi = '';
-                        while (typeof parts[i] == 'string') {
+                        while (typeof parts[i] === 'string') {
                             quasi += parts[i].replace(/[\\`]/g, (s) => `\\${s}`);
                             i += 1;
                         }
@@ -585,7 +543,7 @@ const customElement = (options) => {
                     // TODO
                     // if (!expressions.length) return template;
                     const { local } = addDependency(path, UTILS_PATH, UTILS_HTML_LOCAL, UTILS_HTML_IMPORTED, true);
-                    return t.taggedTemplateExpression(t.identifier(local), templateLiteral);
+                    return t.taggedTemplateExpression(t.identifier(local || ''), templateLiteral);
                 };
                 path.replaceWith(transform(render(path.node)));
             }
@@ -594,14 +552,22 @@ const customElement = (options) => {
         visitor(ast, {
             Decorator(path) {
                 const { expression } = path.node;
-                if (expression.callee?.name != DECORATOR_PROPERTY)
+                if (!t.isCallExpression(expression))
+                    return;
+                if (!t.isIdentifier(expression.callee))
+                    return;
+                if (expression.callee.name !== DECORATOR_PROPERTY)
                     return;
                 if (!expression.arguments.length) {
                     expression.arguments.push(t.objectExpression([]));
                 }
                 const [argument] = expression.arguments;
+                if (!t.isObjectExpression(argument))
+                    return;
                 const property = argument.properties.find((property) => {
-                    return property.key.name == DECORATOR_PROPERTY_TYPE;
+                    return (t.isObjectProperty(property) &&
+                        t.isIdentifier(property.key) &&
+                        property.key.name === DECORATOR_PROPERTY_TYPE);
                 });
                 if (property)
                     return;
@@ -652,20 +618,25 @@ const customElement = (options) => {
                             input.types.forEach(extract);
                             break;
                         // TODO
-                        case 'TSParenthesizedType':
-                            if (input?.typeAnnotation?.type != 'TSIntersectionType')
+                        case 'TSParenthesizedType': {
+                            if (input?.typeAnnotation?.type !== 'TSIntersectionType')
                                 break;
                             let types = input.types || input.typeAnnotation.types;
-                            if (types.length != 2)
+                            if (types.length !== 2)
                                 return;
-                            types = types.filter((type) => type.type != 'TSTypeLiteral');
-                            if (types.length != 1)
+                            types = types.filter((type) => type.type !== 'TSTypeLiteral');
+                            if (types.length !== 1)
                                 return;
                             extract(types[0]);
                             break;
+                        }
                     }
                 };
-                extract(getType(context.directoryPath, ast, path.parentPath.node.typeAnnotation?.typeAnnotation));
+                if (context.directoryPath) {
+                    extract(
+                    // biome-ignore lint: TODO
+                    getType(context.directoryPath, ast, path.parent['typeAnnotation']?.typeAnnotation));
+                }
                 argument.properties.push(t.objectProperty(t.identifier(DECORATOR_PROPERTY_TYPE), t.numericLiteral(type)));
             }
         });
@@ -673,49 +644,62 @@ const customElement = (options) => {
         if (options.typings) {
             visitor(ast, {
                 Program(path) {
-                    const attributes = context
-                        .classProperties.filter((property) => !t.isClassMethod(property))
+                    const attributes = (context.classProperties || [])
+                        .filter((property) => !t.isClassMethod(property))
                         .map((property) => {
-                        const key = extractAttribute(property) || kebabCase(property.key['name']);
-                        const typeAnnotation = property.typeAnnotation;
-                        return Object.assign(t.tSPropertySignature(t.stringLiteral(kebabCase(key)), typeAnnotation), {
-                            optional: property.optional,
-                            leadingComments: t.cloneNode(property, true).leadingComments
-                        });
+                        const keyName = extractAttribute(property) ??
+                            (t.isIdentifier(property.key) ? kebabCase(property.key.name) : '');
+                        const typeAnnotation = property.typeAnnotation
+                            ? property.typeAnnotation
+                            : undefined;
+                        const signature = t.tSPropertySignature(t.stringLiteral(kebabCase(keyName)), typeAnnotation);
+                        signature.optional = property.optional ?? false;
+                        signature.leadingComments = t.cloneNode(property, true).leadingComments;
+                        return signature;
                     });
-                    const events = context.classEvents.map((event) => {
+                    const events = (context.classEvents ?? [])
+                        .map((event) => {
+                        if (!t.isIdentifier(event.key))
+                            return null;
                         const key = event.key;
-                        const typeAnnotation = event.typeAnnotation;
-                        return Object.assign(t.tSPropertySignature(t.identifier(camelCase('on-' + key.name)), t.tsTypeAnnotation(t.tsFunctionType(undefined, [
-                            Object.assign({}, t.identifier('event'), {
-                                typeAnnotation: t.tsTypeAnnotation(t.tsTypeReference(t.identifier('CustomEvent'), typeAnnotation?.['typeAnnotation']?.typeParameters))
-                            })
-                        ], t.tsTypeAnnotation(t.tsVoidKeyword())))), {
-                            optional: true,
-                            leadingComments: t.cloneNode(event, true).leadingComments
-                        });
-                    });
-                    const methods = context.classMethods.map((method) => {
-                        return Object.assign(t.tsMethodSignature(method.key, undefined, method.params, // TODO
-                        method.returnType // TODO
-                        ), {
-                            leadingComments: t.cloneNode(method, true).leadingComments
-                        });
-                    });
-                    const properties = context.classProperties.map((property) => {
+                        const parameter = t.identifier('event');
+                        parameter.typeAnnotation = t.tsTypeAnnotation(t.tsTypeReference(t.identifier('CustomEvent'), 
+                        // 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));
+                        signature.optional = true;
+                        signature.leadingComments = t.cloneNode(event, true).leadingComments;
+                        return signature;
+                    })
+                        .filter((event) => !!event);
+                    const methods = (context.classMethods ?? [])
+                        .map((method) => {
+                        if (!t.isIdentifier(method.key))
+                            return null;
+                        const parameters = (method.params ?? []);
+                        const returnType = method.returnType;
+                        const signature = t.tsMethodSignature(method.key, undefined, parameters, returnType);
+                        signature.leadingComments = t.cloneNode(method, true).leadingComments;
+                        return signature;
+                    })
+                        .filter((method) => !!method);
+                    const properties = (context.classProperties ?? [])
+                        .map((property) => {
+                        if (!t.isIdentifier(property.key))
+                            return null;
                         const key = property.key;
-                        // TODO
+                        // biome-ignore lint: TODO
                         const readonly = property.readonly || !!property['returnType'];
-                        // TODO
-                        const typeAnnotation = (property.typeAnnotation ||
-                            property['returnType']);
-                        return Object.assign(t.tsPropertySignature(t.identifier(key.name), typeAnnotation), {
-                            readonly,
-                            optional: property.optional,
-                            leadingComments: t.cloneNode(property, true).leadingComments
-                        });
-                    });
-                    // prettier-ignore
+                        // biome-ignore lint: TODO
+                        const typeAnnotation = property.typeAnnotation || property['returnType'];
+                        const signature = t.tsPropertySignature(t.identifier(key.name), typeAnnotation);
+                        signature.readonly = readonly;
+                        signature.optional = property.optional ?? false;
+                        signature.leadingComments = t.cloneNode(property, true).leadingComments;
+                        return signature;
+                    })
+                        .filter((property) => !!property);
                     const ast = template.default.ast(`
               // THE FOLLOWING TYPES HAVE BEEN ADDED AUTOMATICALLY
 
@@ -751,9 +735,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 +743,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 +754,29 @@ const customElement = (options) => {
                         preserveComments: true
                     });
                     path.node.body.push(...ast);
+                },
+                // TODO
+                TSTypeReference(path) {
+                    if (!t.isIdentifier(path.node.typeName))
+                        return;
+                    if (path.node.typeName.name !== 'OverridesConfig')
+                        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;
+                    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();
                 }
             });
         }
@@ -782,12 +785,14 @@ const customElement = (options) => {
     return { name, run };
 };
 
+// biome-ignore-all lint: TODO
 const DOCUMENT_OPTIONS = {
-    destination: path.join('dist', 'document.json')
+    destination: path.join('dist', 'document.json'),
+    transformer: (_context, element) => element
 };
-const document = (options) => {
+const document = (userOptions) => {
     const name = 'document';
-    options = Object.assign({}, DOCUMENT_OPTIONS, options);
+    const options = Object.assign({}, DOCUMENT_OPTIONS, userOptions);
     const finish = (global) => {
         const json = {
             elements: []
@@ -801,9 +806,9 @@ const document = (options) => {
                         for (const decorator of event.decorators) {
                             for (const argument of decorator.expression['arguments']) {
                                 for (const property of argument.properties) {
-                                    if (property.key.name != 'cancelable')
+                                    if (property.key.name !== 'cancelable')
                                         continue;
-                                    if (property.value.type != 'BooleanLiteral')
+                                    if (property.value.type !== 'BooleanLiteral')
                                         continue;
                                     if (!property.value.value)
                                         continue;
@@ -836,7 +841,8 @@ const document = (options) => {
                 const comments = extractFromComment(method);
                 // TODO
                 const parameters = method.params.map((param) => ({
-                    description: comments.params?.find((item) => item.name == param['name'])?.description,
+                    description: comments.params?.find((item) => item.name === param['name'])
+                        ?.description,
                     required: !param['optional'],
                     name: param['name'],
                     type: print(param?.['typeAnnotation']?.typeAnnotation) || undefined,
@@ -876,7 +882,7 @@ const document = (options) => {
                     returns
                 }, 
                 // TODO
-                returns != 'void' &&
+                returns !== 'void' &&
                     comments.returns && {
                     tags: [
                         {
@@ -891,7 +897,7 @@ const document = (options) => {
                 // TODO
                 const initializer = getInitializer(property.value);
                 const name = property.key['name'];
-                const readonly = property['kind'] == 'get';
+                const readonly = property['kind'] === 'get';
                 // TODO
                 const reflects = (() => {
                     if (!property.decorators)
@@ -900,9 +906,9 @@ const document = (options) => {
                         for (const decorator of property.decorators) {
                             for (const argument of decorator.expression['arguments']) {
                                 for (const property of argument.properties) {
-                                    if (property.key.name != 'reflect')
+                                    if (property.key.name !== 'reflect')
                                         continue;
-                                    if (property.value.type != 'BooleanLiteral')
+                                    if (property.value.type !== 'BooleanLiteral')
                                         continue;
                                     if (!property.value.value)
                                         continue;
@@ -978,7 +984,10 @@ const document = (options) => {
         json.elements = json.elements.sort((a, b) => (a.title > b.title ? 1 : -1));
         const dirname = path.dirname(options.destination);
         fs.ensureDirSync(dirname);
-        fs.writeJSONSync(options.destination, json, { encoding: 'utf8', spaces: 2 });
+        fs.writeJSONSync(options.destination, json, {
+            encoding: 'utf8',
+            spaces: 2
+        });
     };
     return { name, finish };
 };
@@ -986,11 +995,13 @@ const document = (options) => {
 const extract = () => {
     const name = 'extract';
     const run = (context) => {
-        const { declaration, leadingComments } = context.fileAST?.program.body.find((child) => {
+        const body = context.fileAST?.program.body.find((child) => {
             return t.isExportNamedDeclaration(child);
         });
-        context.class = declaration;
-        context.class.leadingComments = leadingComments; // TODO
+        context.class = body?.declaration;
+        if (context.class) {
+            context.class.leadingComments = body?.leadingComments; // TODO
+        }
         context.classMembers = context.class?.body?.body || [];
         context.className = context.class?.id?.name;
         context.elementKey = kebabCase(context.className || '');
@@ -1006,11 +1017,11 @@ const PARSE_OPTIONS = {
     sourceType: 'module',
     plugins: [['decorators', { decoratorsBeforeExport: true }], 'jsx', 'typescript']
 };
-const parse = (options) => {
+const parse = (userOptions) => {
     const name = 'parse';
-    options = Object.assign({}, PARSE_OPTIONS, options);
+    const options = Object.assign({}, PARSE_OPTIONS, userOptions);
     const run = (context) => {
-        context.fileAST = parse$1(context.fileContent, options);
+        context.fileAST = parse$1(context.fileContent || '', options);
     };
     return { name, run };
 };
@@ -1031,12 +1042,12 @@ const read = () => {
 
 const README_OPTIONS = {
     source(context) {
-        return path.join(context.directoryPath, `${context.fileName}.md`);
+        return path.join(context.directoryPath || '', `${context.fileName}.md`);
     }
 };
-const readme = (options) => {
+const readme = (userOptions) => {
     const name = 'readme';
-    options = Object.assign({}, README_OPTIONS, options);
+    const options = Object.assign({}, README_OPTIONS, userOptions);
     const finish = (global) => {
         for (const context of global.contexts) {
             context.readmePath = options.source(context);
@@ -1054,18 +1065,14 @@ const readme = (options) => {
 
 const STYLE_OPTIONS = {
     source(context) {
-        return [
-            path.join(context.directoryPath, `${context.fileName}.css`),
-            path.join(context.directoryPath, `${context.fileName}.less`),
-            path.join(context.directoryPath, `${context.fileName}.sass`),
-            path.join(context.directoryPath, `${context.fileName}.scss`),
-            path.join(context.directoryPath, `${context.fileName}.styl`)
-        ];
+        return ['css', 'less', 'sass', 'scss', 'styl'].map((key) => {
+            return path.join(context.directoryPath || '', `${context.fileName}.${key}`);
+        });
     }
 };
-const style = (options) => {
+const style = (userOptions) => {
     const name = 'style';
-    options = Object.assign({}, STYLE_OPTIONS, options);
+    const options = Object.assign({}, STYLE_OPTIONS, userOptions);
     const run = (context) => {
         const sources = [options.source(context)].flat();
         for (const source of sources) {
@@ -1081,11 +1088,12 @@ const style = (options) => {
         context.styleContent = fs.readFileSync(context.stylePath, 'utf8');
         context.styleExtension = path.extname(context.stylePath);
         context.styleName = path.basename(context.stylePath, context.styleExtension);
+        if (!context.fileAST)
+            return;
         const { local } = addDependency(context.fileAST, context.stylePath, STYLE_IMPORTED, undefined, true);
-        // TODO: remove 'local!'
-        const property = t.classProperty(t.identifier(STATIC_STYLE), t.identifier(local), undefined, null, undefined, true);
+        const property = t.classProperty(t.identifier(STATIC_STYLE), t.identifier(local || ''), undefined, null, undefined, true);
         t.addComment(property, 'leading', COMMENT_AUTO_ADDED, true);
-        context.class.body.body.unshift(property);
+        context.class?.body.body.unshift(property);
     };
     return { name, run };
 };
@@ -1094,30 +1102,36 @@ const validate = () => {
     const name = 'validate';
     const run = (context) => {
         context.skipped = true;
+        if (!context.fileAST)
+            return;
         visitor(context.fileAST, {
             ImportDeclaration(path) {
                 if (path.node.source?.value !== PACKAGE_NAME)
                     return;
                 for (const specifier of path.node.specifiers) {
-                    if (specifier.imported.name !== DECORATOR_ELEMENT)
+                    if (!t.isImportSpecifier(specifier) ||
+                        !t.isIdentifier(specifier.imported) ||
+                        specifier.imported.name !== DECORATOR_ELEMENT) {
                         continue;
+                    }
                     const binding = path.scope.getBinding(specifier.imported.name);
-                    if (binding.references == 0)
-                        break;
+                    if (!binding || binding.references === 0) {
+                        continue;
+                    }
                     const referencePaths = binding.referencePaths.filter((referencePath) => {
-                        if (t.isCallExpression(referencePath.parent) &&
-                            t.isDecorator(referencePath.parentPath.parent) &&
-                            t.isClassDeclaration(referencePath.parentPath.parentPath.parent) &&
-                            t.isExportNamedDeclaration(referencePath.parentPath.parentPath.parentPath.parent))
-                            return true;
+                        return (t.isCallExpression(referencePath.parent) &&
+                            t.isDecorator(referencePath.parentPath?.parent) &&
+                            t.isClassDeclaration(referencePath.parentPath.parentPath?.parent) &&
+                            t.isExportNamedDeclaration(referencePath.parentPath.parentPath.parentPath?.parent));
                     });
                     if (referencePaths.length > 1) {
                         throw new Error('In each file, only one custom element can be defined. \n' +
                             'If more than one @Element() decorator is used in the file, it will result in an error.\n');
                     }
                     context.skipped = false;
-                    if (referencePaths.length == 1)
+                    if (referencePaths.length === 1) {
                         break;
+                    }
                     throw new Error('It appears that the class annotated with the @Element() decorator is not being exported correctly.');
                 }
                 path.stop();
@@ -1128,12 +1142,15 @@ const validate = () => {
     return { name, run };
 };
 
+// biome-ignore-all lint: TODO
 const VISUAL_STUDIO_CODE_OPTIONS = {
-    destination: path.join('dist', 'visual-studio-code.json')
+    destination: path.join('dist', 'visual-studio-code.json'),
+    reference: () => '',
+    transformer: (_context, element) => element
 };
-const visualStudioCode = (options) => {
+const visualStudioCode = (userOptions) => {
     const name = 'visualStudioCode';
-    options = Object.assign({}, VISUAL_STUDIO_CODE_OPTIONS, options);
+    const options = Object.assign({}, VISUAL_STUDIO_CODE_OPTIONS, userOptions);
     const finish = (global) => {
         const contexts = global.contexts.sort((a, b) => {
             return a.elementKey.toUpperCase() > b.elementKey.toUpperCase() ? 1 : -1;
@@ -1193,34 +1210,40 @@ const visualStudioCode = (options) => {
         }
         const dirname = path.dirname(options.destination);
         fs.ensureDirSync(dirname);
-        fs.writeJSONSync(options.destination, json, { encoding: 'utf8', spaces: 2 });
+        fs.writeJSONSync(options.destination, json, {
+            encoding: 'utf8',
+            spaces: 2
+        });
     };
     return { name, finish };
 };
 
+// biome-ignore-all lint: TODO
 const WEB_TYPES_OPTIONS = {
     destination: path.join('dist', 'web-types.json'),
     packageName: '',
-    packageVersion: ''
+    packageVersion: '',
+    reference: () => '',
+    transformer: (_context, element) => element
 };
-const webTypes = (options) => {
+const webTypes = (userOptions) => {
     const name = 'webTypes';
-    options = Object.assign({}, WEB_TYPES_OPTIONS, options);
+    const options = Object.assign({}, WEB_TYPES_OPTIONS, userOptions);
     const finish = (global) => {
         const contexts = global.contexts.sort((a, b) => {
-            return a.elementKey.toUpperCase() > b.elementKey.toUpperCase() ? 1 : -1;
+            return (a.elementKey ?? '').toUpperCase().localeCompare((b.elementKey ?? '').toUpperCase());
         });
         const json = {
-            '$schema': 'http://json.schemastore.org/web-types',
-            'name': options.packageName,
-            'version': options.packageVersion,
+            $schema: 'http://json.schemastore.org/web-types',
+            name: options.packageName,
+            version: options.packageVersion,
             'description-markup': 'markdown',
             'framework-config': {
                 'enable-when': {
                     'node-packages': [options.packageName]
                 }
             },
-            'contributions': {
+            contributions: {
                 html: {
                     elements: []
                 }
@@ -1251,9 +1274,9 @@ const webTypes = (options) => {
                 default: getInitializer(property.value)
             }, extractFromComment(property, ['description', 'deprecated', 'experimental'])));
             const element = Object.assign({
-                'name': context.elementKey,
+                name: context.elementKey,
                 'doc-url': options.reference?.(context),
-                'js': {
+                js: {
                     events,
                     properties: [].concat(properties, methods)
                 },
@@ -1264,9 +1287,81 @@ const webTypes = (options) => {
         }
         const dirname = path.dirname(options.destination);
         fs.ensureDirSync(dirname);
-        fs.writeJSONSync(options.destination, json, { encoding: 'utf8', spaces: 2 });
+        fs.writeJSONSync(options.destination, json, {
+            encoding: 'utf8',
+            spaces: 2
+        });
     };
     return { name, finish };
 };
 
+const logger = ora({
+    color: 'yellow'
+});
+const log = (message, persist) => {
+    const content = `${new Date().toLocaleTimeString()} [${KEY}] ${message}`;
+    const log = logger.start(content);
+    if (!persist)
+        return;
+    log.succeed();
+};
+const transformer = (...plugins) => {
+    let global = {
+        contexts: []
+    };
+    const start = async () => {
+        log(`Started.`, true);
+        log(`${plugins.length} plugins detected.`, true);
+        log(`Plugins are starting.`, true);
+        for (const plugin of plugins) {
+            if (!plugin.start)
+                continue;
+            log(`Plugin '${plugin.name}' is starting.`);
+            global = (await plugin.start(global)) || global;
+            log(`Plugin '${plugin.name}' started successfully.`);
+        }
+        log(`Plugins have been successfully started.`, true);
+    };
+    const run = async (filePath) => {
+        let context = {
+            filePath
+        };
+        const parsed = path.parse(filePath);
+        for (const plugin of plugins) {
+            if (!plugin.run)
+                continue;
+            const source = path.join(parsed.dir).split(path.sep).slice(-2).concat(parsed.base).join('/');
+            log(`Plugin '${plugin.name}' is executing on '${source}' file.`);
+            try {
+                context = (await plugin.run(context, global)) || context;
+            }
+            catch (error) {
+                log(`Error in '${plugin.name}' plugin on '${source}' file.\n`, true);
+                throw error;
+            }
+            global.contexts = global.contexts
+                .filter((current) => {
+                return current.filePath !== context.filePath;
+            })
+                .concat(context);
+            log(`Plugin '${plugin.name}' executed successfully on '${source}' file.`);
+        }
+        logger.stop();
+        return context;
+    };
+    const finish = async () => {
+        log(`Plugins are finishing.`, true);
+        for (const plugin of plugins) {
+            if (!plugin.finish)
+                continue;
+            log(`Plugin '${plugin.name}' is finishing.`);
+            global = (await plugin.finish(global)) || global;
+            log(`Plugin '${plugin.name}' finished successfully.`);
+        }
+        log(`Plugins have been successfully finished.`, true);
+        log(`Finished.`, true);
+    };
+    return { global, start, run, finish };
+};
+
 export { ASSETS_OPTIONS, COPY_OPTIONS, CUSTOM_ELEMENT_OPTIONS, DOCUMENT_OPTIONS, PARSE_OPTIONS, README_OPTIONS, STYLE_OPTIONS, VISUAL_STUDIO_CODE_OPTIONS, WEB_TYPES_OPTIONS, assets, copy, customElement, document, extract, parse, read, readme, style, transformer, validate, visualStudioCode, webTypes };