@htmlplus/element 2.1.4 → 2.1.6

package/client/utils/event.js

@@ -5,7 +5,9 @@ const outsides = [];
 export const off = (target, type, handler, options) => {
     if (type != 'outside')
         return target.removeEventListener(type, handler, options);
-    const index = outsides.findIndex((outside) => outside.target == target && outside.handler == handler && outside.options == options);
+    const index = outsides.findIndex((outside) => {
+        return outside.target == target && outside.handler == handler && outside.options == options;
+    });
     const outside = outsides[index];
     if (!outside)
         return;

package/client/utils/merge.js

@@ -8,7 +8,9 @@ export const merge = (target, ...sources) => {
             continue;
         }
         for (const key of Object.keys(source)) {
-            if (target[key] instanceof Object && source[key] instanceof Object && target[key] !== source[key]) {
+            if (target[key] instanceof Object &&
+                source[key] instanceof Object &&
+                target[key] !== source[key]) {
                 target[key] = merge(target[key], source[key]);
             }
             else {

package/client/utils/request.js

@@ -15,52 +15,52 @@ export const request = (target, name, previous, callback) => {
     var _a, _b;
     // Creates/Gets a stacks.
     const stacks = (target[_a = CONSTANTS.API_STACKS] || (target[_a] = new Map()));
-    // Creates/Updates a stack
+    // Creates/Updates a stack.
     const stack = stacks.get(name) || { callbacks: [], previous };
     // Adds the callback to the stack, if exists.
     callback && stack.callbacks.push(callback);
     // Stores the stack.
     stacks.set(name, stack);
-    // Creates/Gets a micro task function.
-    target[_b = CONSTANTS.API_REQUEST] || (target[_b] = task({
-        run: () => {
-            // Skips the rendering phase if DOM isn't ready.
-            if (!target[CONSTANTS.API_CONNECTED])
-                return;
-            // Calculates the states to pass into lifecycles' callbacks.
-            const states = new Map(Array.from(stacks)
-                .filter((stack) => stack[0])
-                .map((stack) => [stack[0], stack[1].previous]));
-            // Calls the lifecycle's callback before the rendering phase.
-            call(target, CONSTANTS.LIFECYCLE_UPDATE, states);
-            // Calculates the template.
-            const template = () => {
-                // Calculates the markup.
-                const markup = call(target, CONSTANTS.METHOD_RENDER);
-                // Calculates the styles.
-                const styles = getStyles(target);
-                // Returns the markup if styles don't exist.
-                if (!styles)
-                    return markup;
-                // Returns the markup and styles together.
-                return html `<style>${styles}</style>${markup}`;
-            };
-            // Renders template to the DOM.
-            render(shadowRoot(target), template);
-            // Invokes requests' callback.
-            stacks.forEach((state) => {
-                state.callbacks.forEach((callback, index, callbacks) => {
-                    callback(callbacks.length - 1 != index);
-                });
+    // Defines a handler.
+    const handler = () => {
+        // Skips the rendering phase if DOM isn't ready.
+        if (!target[CONSTANTS.API_CONNECTED])
+            return;
+        // Calculates the states to pass into lifecycles' callbacks.
+        const states = new Map(Array.from(stacks)
+            .filter((stack) => stack[0])
+            .map((stack) => [stack[0], stack[1].previous]));
+        // Calls the lifecycle's callback before the rendering phase.
+        call(target, CONSTANTS.LIFECYCLE_UPDATE, states);
+        // Calculates the template.
+        const template = () => {
+            // Calculates the markup.
+            const markup = call(target, CONSTANTS.METHOD_RENDER);
+            // Calculates the styles.
+            const styles = getStyles(target);
+            // Returns the markup if styles don't exist.
+            if (!styles)
+                return markup;
+            // Returns the markup and styles together.
+            return html `<style>${styles}</style>${markup}`;
+        };
+        // Renders template to the DOM.
+        render(shadowRoot(target), template);
+        // Invokes requests' callback.
+        stacks.forEach((state) => {
+            state.callbacks.forEach((callback, index, callbacks) => {
+                callback(callbacks.length - 1 != index);
             });
-            // Calls the lifecycle's callback after the rendering phase.
-            call(target, CONSTANTS.LIFECYCLE_UPDATED, states);
-            // Clears stacks.
-            stacks.clear();
-            // TODO: releated to the @Watch decorator.
-            target[CONSTANTS.API_RENDER_COMPLETED] = true;
-        }
-    }));
+        });
+        // Calls the lifecycle's callback after the rendering phase.
+        call(target, CONSTANTS.LIFECYCLE_UPDATED, states);
+        // Clears stacks.
+        stacks.clear();
+        // TODO: releated to the @Watch decorator.
+        target[CONSTANTS.API_RENDER_COMPLETED] = true;
+    };
+    // Creates/Gets a micro task function.
+    target[_b = CONSTANTS.API_REQUEST] || (target[_b] = task({ handler }));
     // Calls the micro task.
     call(target, CONSTANTS.API_REQUEST);
 };

package/client/utils/task.d.ts

@@ -1,6 +1,6 @@
 export interface QueueOptions {
     canStart?: () => boolean;
     canRun?: () => boolean;
-    run: () => void;
+    handler: () => void;
 }
 export declare const task: (options: QueueOptions) => () => Promise<boolean>;

package/client/utils/task.js

@@ -1,14 +1,14 @@
 export const task = (options) => {
-    let isPending, promise;
+    let running, promise;
     const run = () => {
         if (options.canStart && !options.canStart())
             return Promise.resolve(false);
-        if (!isPending)
+        if (!running)
             promise = enqueue();
         return promise;
     };
     const enqueue = async () => {
-        isPending = true;
+        running = true;
         try {
             await promise;
         }
@@ -16,17 +16,17 @@ export const task = (options) => {
             Promise.reject(error);
         }
         // TODO: maybe is optional
-        if (!isPending)
+        if (!running)
             return promise;
         try {
             if (options.canRun && !options.canRun())
-                return (isPending = false);
-            options.run();
-            isPending = false;
+                return (running = false);
+            options.handler();
+            running = false;
             return true;
         }
         catch (error) {
-            isPending = false;
+            running = false;
             throw error;
         }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "license": "MIT",
   "sideEffects": false,
   "author": "Masood Abdolian <m.abdolian@gmail.com>",
@@ -37,11 +37,10 @@
     "@babel/template": "^7.23.9",
     "@babel/traverse": "^7.23.9",
     "@babel/types": "^7.23.9",
-    "@types/node": "^20.11.19",
+    "@types/node": "^20.11.20",
     "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"
   },
@@ -58,6 +57,6 @@
     "rimraf": "^5.0.5",
     "semantic-release": "^23.0.2",
     "tsx": "^4.7.1",
-    "vite": "^5.1.3"
+    "vite": "^5.1.4"
   }
 }

package/transformer/plugins/customElement.js

@@ -48,7 +48,10 @@ export const customElement = (options) => {
                 const { name, value } = path.node;
                 if (name.name != 'className')
                     return;
-                const hasClass = path.parentPath.node.attributes.some((attribute) => { var _a; return ((_a = attribute.name) === null || _a === void 0 ? void 0 : _a.name) == 'class'; });
+                const hasClass = path.parentPath.node.attributes.some((attribute) => {
+                    var _a;
+                    return ((_a = attribute.name) === null || _a === void 0 ? void 0 : _a.name) == 'class';
+                });
                 if (hasClass)
                     return path.remove();
                 path.replaceWith(t.jsxAttribute(t.jsxIdentifier('class'), value));
@@ -108,7 +111,9 @@ export const customElement = (options) => {
                             const children = node.children.map(render).flat();
                             const parts = [];
                             parts.push('<', name);
-                            const hasSpreadAttribute = attributes.some((attribute) => attribute.type == 'JSXSpreadAttribute');
+                            const hasSpreadAttribute = attributes.some((attribute) => {
+                                return attribute.type == 'JSXSpreadAttribute';
+                            });
                             if (hasSpreadAttribute) {
                                 parts.push(' ', TODO(t.identifier('TODO'), attributes));
                             }
@@ -251,7 +256,8 @@ export const customElement = (options) => {
                             break;
                     }
                     // TODO
-                    if ((input === null || input === void 0 ? void 0 : input.type) == 'TSParenthesizedType' && ((_a = input === null || input === void 0 ? void 0 : input.typeAnnotation) === null || _a === void 0 ? void 0 : _a.type) == 'TSIntersectionType') {
+                    if ((input === null || input === void 0 ? void 0 : input.type) == 'TSParenthesizedType' &&
+                        ((_a = input === null || input === void 0 ? void 0 : input.typeAnnotation) === null || _a === void 0 ? void 0 : _a.type) == 'TSIntersectionType') {
                         let types = input.types || input.typeAnnotation.types;
                         if (types.length != 2)
                             return;

package/transformer/plugins/document.js

@@ -3,7 +3,7 @@ import fs from 'fs-extra';
 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';
+import { extractFromComment, getInitializer, getTypeReference, print } from '../utils/index.js';
 export const DOCUMENT_OPTIONS = {
     destination: path.join('dist', 'document.json')
 };
@@ -11,15 +11,13 @@ export const document = (options) => {
     const name = 'document';
     options = Object.assign({}, DOCUMENT_OPTIONS, options);
     const finish = (global) => {
-        var _a, _b, _c, _d;
+        var _a, _b;
         const json = {
             elements: []
         };
         for (const context of global.contexts) {
-            const deprecated = hasTag(context.class, 'deprecated');
-            const description = (_a = getTags(context.class).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
             const events = context.classEvents.map((event) => {
-                var _a, _b, _c;
+                var _a, _b;
                 const cancelable = (() => {
                     if (!event.decorators)
                         return false;
@@ -41,56 +39,41 @@ export const document = (options) => {
                     catch (_a) { }
                     return false;
                 })();
-                const deprecated = hasTag(event, 'deprecated');
-                const description = (_a = getTags(event).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
-                const detail = print((_b = event.typeAnnotation) === null || _b === void 0 ? void 0 : _b['typeAnnotation']);
-                const detailReference = getTypeReference(context.fileAST, (_c = event.typeAnnotation) === null || _c === void 0 ? void 0 : _c['typeAnnotation'].typeParameters.params[0]);
-                const experimental = hasTag(event, 'experimental');
-                const model = hasTag(event, 'model');
+                const detail = print((_a = event.typeAnnotation) === null || _a === void 0 ? void 0 : _a['typeAnnotation']);
+                const detailReference = getTypeReference(context.fileAST, (_b = event.typeAnnotation) === null || _b === void 0 ? void 0 : _b['typeAnnotation'].typeParameters.params[0]);
                 const name = event.key['name'];
-                const tags = getTags(event);
-                return {
+                return Object.assign({
                     cancelable,
-                    deprecated,
-                    description,
                     detail,
                     detailReference,
-                    experimental,
-                    model,
-                    name,
-                    tags
-                };
+                    name
+                }, extractFromComment(event));
             });
-            const experimental = hasTag(context.class, 'experimental');
-            const group = (_b = getTag(context.class, 'group')) === null || _b === void 0 ? void 0 : _b.value;
             const lastModified = glob
                 .sync('**/*.*', { cwd: context.directoryPath })
                 .map((file) => fs.statSync(path.join(context.directoryPath, file)).mtime)
                 .sort((a, b) => (a > b ? 1 : -1))
                 .pop();
             const methods = context.classMethods.map((method) => {
-                var _a, _b, _c;
+                var _a, _b;
                 const async = method.async;
-                const description = (_a = getTags(method).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
-                const deprecated = hasTag(method, 'deprecated');
-                const experimental = hasTag(method, 'experimental');
                 const name = method.key['name'];
+                const comments = extractFromComment(method);
                 // TODO
                 const parameters = method.params.map((param) => {
-                    var _a, _b, _c;
+                    var _a, _b, _c, _d;
                     return ({
-                        description: (_a = getTags(method, 'param')
-                            .map((tag) => parseTag(tag, ' '))
-                            .find((tag) => tag.name == param['name'])) === null || _a === void 0 ? void 0 : _a.description,
+                        description: (_b = (_a = comments.params) === null || _a === void 0 ? void 0 : _a.find((item) => item.name == param['name'])) === null || _b === void 0 ? void 0 : _b.description,
                         required: !param['optional'],
                         name: param['name'],
-                        type: print((_b = param === null || param === void 0 ? void 0 : param['typeAnnotation']) === null || _b === void 0 ? void 0 : _b.typeAnnotation) || undefined,
-                        typeReference: getTypeReference(context.fileAST, (_c = param === null || param === void 0 ? void 0 : param['typeAnnotation']) === null || _c === void 0 ? void 0 : _c.typeAnnotation)
+                        type: print((_c = param === null || param === void 0 ? void 0 : param['typeAnnotation']) === null || _c === void 0 ? void 0 : _c.typeAnnotation) || undefined,
+                        typeReference: getTypeReference(context.fileAST, (_d = param === null || param === void 0 ? void 0 : param['typeAnnotation']) === null || _d === void 0 ? void 0 : _d.typeAnnotation)
                     });
                 });
-                const returns = print((_b = method.returnType) === null || _b === void 0 ? void 0 : _b['typeAnnotation']) || 'void';
-                const returnsReference = getTypeReference(context.fileAST, (_c = method.returnType) === null || _c === void 0 ? void 0 : _c['typeAnnotation']);
-                const tags = getTags(method);
+                // TODO
+                delete comments.params;
+                const returns = print((_a = method.returnType) === null || _a === void 0 ? void 0 : _a['typeAnnotation']) || 'void';
+                const returnsReference = getTypeReference(context.fileAST, (_b = method.returnType) === null || _b === void 0 ? void 0 : _b['typeAnnotation']);
                 const signature = [
                     method.key['name'],
                     '(',
@@ -109,29 +92,34 @@ export const document = (options) => {
                     ' => ',
                     returns
                 ].join('');
-                return {
+                return Object.assign({
                     async,
-                    description,
-                    deprecated,
-                    experimental,
                     name,
                     parameters,
                     returns,
                     returnsReference,
-                    tags,
                     signature
-                };
+                }, comments, 
+                // TODO
+                {
+                    returns
+                }, 
+                // TODO
+                returns != 'void' &&
+                    comments.returns && {
+                    tags: [
+                        {
+                            key: 'returns',
+                            value: `${comments.returns}`
+                        }
+                    ]
+                });
             });
-            const parts = getTags(context.class, 'part').map((tag) => parseTag(tag));
             const properties = context.classProperties.map((property) => {
-                var _a, _b, _c;
+                var _a, _b;
                 const attribute = kebabCase(property.key['name']);
-                const deprecated = hasTag(property, 'deprecated');
-                const description = (_a = getTags(property).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
-                const experimental = hasTag(property, 'experimental');
                 // TODO
                 const initializer = getInitializer(property.value);
-                const model = hasTag(property, 'model');
                 const name = property.key['name'];
                 // TODO
                 const reflects = (() => {
@@ -156,31 +144,23 @@ export const document = (options) => {
                     return false;
                 })();
                 const required = !property.optional;
-                const tags = getTags(property);
-                const type = print((_b = property.typeAnnotation) === null || _b === void 0 ? void 0 : _b['typeAnnotation']);
-                const typeReference = getTypeReference(context.fileAST, (_c = property.typeAnnotation) === null || _c === void 0 ? void 0 : _c['typeAnnotation']);
-                return {
+                const type = print((_a = property.typeAnnotation) === null || _a === void 0 ? void 0 : _a['typeAnnotation']);
+                const typeReference = getTypeReference(context.fileAST, (_b = property.typeAnnotation) === null || _b === void 0 ? void 0 : _b['typeAnnotation']);
+                return Object.assign({
                     attribute,
-                    deprecated,
-                    description,
-                    experimental,
                     initializer,
-                    model,
                     name,
                     reflects,
                     required,
-                    tags,
                     type,
                     typeReference
-                };
+                }, extractFromComment(property));
             });
-            const slots = getTags(context.class, 'slot').map((tag) => parseTag(tag));
             // TODO
             const styles = (() => {
-                if (!context.stylePath)
+                if (!context.styleContent)
                     return [];
-                return fs
-                    .readFileSync(context.stylePath, 'utf8')
+                return context.styleContent
                     .split(CONSTANTS.DECORATOR_CSS_VARIABLE)
                     .slice(1)
                     .map((section) => {
@@ -195,26 +175,18 @@ export const document = (options) => {
                     };
                 });
             })();
-            const tags = getTags(context.class).filter((tag) => !['part', 'slot'].includes(tag.key));
             const title = capitalCase(context.elementKey);
-            const element = {
+            const element = Object.assign({
                 events,
-                group,
-                deprecated,
-                description,
-                experimental,
                 key: context.elementKey,
                 lastModified,
                 methods,
-                parts,
                 properties,
                 readmeContent: context.readmeContent,
-                slots,
                 styles,
-                tags,
                 title
-            };
-            const transformed = ((_d = (_c = options).transformer) === null || _d === void 0 ? void 0 : _d.call(_c, context, element)) || element;
+            }, extractFromComment(context.class));
+            const transformed = ((_b = (_a = options).transformer) === null || _b === void 0 ? void 0 : _b.call(_a, context, element)) || element;
             json.elements.push(transformed);
         }
         json.elements = json.elements.sort((a, b) => (a.title > b.title ? 1 : -1));

package/transformer/plugins/extract.js

@@ -1,34 +1,23 @@
 import t from '@babel/types';
 import { kebabCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
-import { hasDecorator, visitor } from '../utils/index.js';
+import { hasDecorator } from '../utils/index.js';
 export const extract = () => {
     const name = 'extract';
     const run = (context) => {
-        var _a, _b;
-        visitor(context.fileAST, {
-            ClassDeclaration: {
-                exit(path) {
-                    var _a, _b, _c;
-                    context.class = path.node;
-                    context.classMembers = ((_b = (_a = context.class) === null || _a === void 0 ? void 0 : _a.body) === null || _b === void 0 ? void 0 : _b.body) || [];
-                    // TODO
-                    if (path.parentPath.isExportNamedDeclaration() && !((_c = context.class) === null || _c === void 0 ? void 0 : _c.leadingComments)) {
-                        context.class['_leadingComments'] = t.cloneNode(path.parentPath.node, true).leadingComments || [];
-                    }
-                    path.skip();
-                }
-            }
+        var _a, _b, _c, _d, _e;
+        const { declaration, leadingComments } = (_a = context.fileAST) === null || _a === void 0 ? void 0 : _a.program.body.find((child) => {
+            return t.isExportNamedDeclaration(child);
         });
-        context.className = (_b = (_a = context.class) === null || _a === void 0 ? void 0 : _a.id) === null || _b === void 0 ? void 0 : _b.name;
+        context.class = declaration;
+        context.class.leadingComments = leadingComments; // TODO
+        context.classMembers = ((_c = (_b = context.class) === null || _b === void 0 ? void 0 : _b.body) === null || _c === void 0 ? void 0 : _c.body) || [];
+        context.className = (_e = (_d = context.class) === null || _d === void 0 ? void 0 : _d.id) === null || _e === void 0 ? void 0 : _e.name;
         context.elementKey = kebabCase(context.className || '');
-        context.classEvents = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_EVENT));
-        context.classMethods = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_METHOD));
-        context.classProperties = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_PROPERTY));
-        context.classStates = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_STATE));
-        context.classHasMount = (context.classMembers || []).some((member) => member['key'].name == CONSTANTS.LIFECYCLE_CONNECTED);
-        context.classHasUnmount = (context.classMembers || []).some((member) => member['key'].name == CONSTANTS.LIFECYCLE_DISCONNECTED);
-        context.classRender = (context.classMembers || []).find((member) => member['key'].name == CONSTANTS.METHOD_RENDER);
+        context.classEvents = context.classMembers.filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_EVENT));
+        context.classMethods = context.classMembers.filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_METHOD));
+        context.classProperties = context.classMembers.filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_PROPERTY));
+        context.classStates = context.classMembers.filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_STATE));
     };
     return { name, run };
 };

package/transformer/plugins/parse.js

@@ -7,8 +7,7 @@ export const parse = (options) => {
     const name = 'parse';
     options = Object.assign({}, PARSE_OPTIONS, options);
     const run = (context) => {
-        var _a;
-        (_a = context.fileAST) !== null && _a !== void 0 ? _a : (context.fileAST = parser(context.fileContent, options));
+        context.fileAST = parser(context.fileContent, options);
     };
     return { name, run };
 };

package/transformer/plugins/read.js

@@ -7,10 +7,9 @@ export const read = (options) => {
     const name = 'read';
     options = Object.assign({}, READ_OPTIONS, options);
     const run = (context) => {
-        var _a;
         if (!context.filePath)
             return;
-        (_a = context.fileContent) !== null && _a !== void 0 ? _a : (context.fileContent = fs.readFileSync(context.filePath, options));
+        context.fileContent = fs.readFileSync(context.filePath, options);
         context.fileExtension = path.extname(context.filePath);
         context.fileName = path.basename(context.filePath, context.fileExtension);
         context.directoryPath = path.dirname(context.filePath);

package/transformer/plugins/visualStudioCode.js

@@ -1,7 +1,7 @@
 import { kebabCase } from 'change-case';
 import fs from 'fs-extra';
 import path from 'path';
-import { getTags, getType, print } from '../utils/index.js';
+import { extractFromComment, getType, print } from '../utils/index.js';
 export const VISUAL_STUDIO_CODE_OPTIONS = {
     destination: path.join('dist', 'visual-studio-code.json')
 };
@@ -9,7 +9,7 @@ export const visualStudioCode = (options) => {
     const name = 'visualStudioCode';
     options = Object.assign({}, VISUAL_STUDIO_CODE_OPTIONS, options);
     const finish = (global) => {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e;
         const contexts = global.contexts.sort((a, b) => {
             return a.elementKey.toUpperCase() > b.elementKey.toUpperCase() ? +1 : -1;
         });
@@ -19,25 +19,22 @@ export const visualStudioCode = (options) => {
             tags: []
         };
         for (const context of contexts) {
-            const description = (_a = getTags(context.class).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
-            const tag = {
+            const tag = Object.assign({
                 name: context.elementKey,
-                description: description,
                 attributes: [],
                 references: [
                     {
                         name: 'Source code',
-                        url: (_c = (_b = options).reference) === null || _c === void 0 ? void 0 : _c.call(_b, context)
+                        url: (_b = (_a = options).reference) === null || _b === void 0 ? void 0 : _b.call(_a, context)
                     }
                 ]
-            };
+            }, extractFromComment(context.class, ['description']));
             for (const property of context.classProperties || []) {
-                const attribute = {
+                const attribute = Object.assign({
                     name: kebabCase(property.key['name']),
-                    description: (_d = getTags(property).find((tag) => !tag.key)) === null || _d === void 0 ? void 0 : _d.value,
                     values: []
-                };
-                const type = print(getType(context.directoryPath, context.fileAST, (_e = property.typeAnnotation) === null || _e === void 0 ? void 0 : _e['typeAnnotation']));
+                }, extractFromComment(property, ['description']));
+                const type = print(getType(context.directoryPath, context.fileAST, (_c = property.typeAnnotation) === null || _c === void 0 ? void 0 : _c['typeAnnotation']));
                 const sections = type.split('|');
                 for (const section of sections) {
                     const trimmed = section.trim();
@@ -66,7 +63,7 @@ export const visualStudioCode = (options) => {
                 }
                 tag.attributes.push(attribute);
             }
-            const transformed = ((_g = (_f = options).transformer) === null || _g === void 0 ? void 0 : _g.call(_f, context, tag)) || tag;
+            const transformed = ((_e = (_d = options).transformer) === null || _e === void 0 ? void 0 : _e.call(_d, context, tag)) || tag;
             json.tags.push(transformed);
         }
         const dirname = path.dirname(options.destination);

package/transformer/plugins/webTypes.js

@@ -1,7 +1,7 @@
 import { kebabCase } from 'change-case';
 import fs from 'fs-extra';
 import path from 'path';
-import { getInitializer, getTags, getType, hasTag, parseTag, print } from '../utils/index.js';
+import { extractFromComment, getInitializer, getType, print } from '../utils/index.js';
 export const WEB_TYPES_OPTIONS = {
     destination: path.join('dist', 'web-types.json'),
     packageName: '',
@@ -11,7 +11,7 @@ export const webTypes = (options) => {
     const name = 'webTypes';
     options = Object.assign({}, WEB_TYPES_OPTIONS, options);
     const finish = (global) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const contexts = global.contexts.sort((a, b) => {
             return a.elementKey.toUpperCase() > b.elementKey.toUpperCase() ? +1 : -1;
         });
@@ -31,19 +31,10 @@ export const webTypes = (options) => {
                 }
             }
         };
-        const common = (member) => {
-            var _a;
-            return ({
-                name: member.key['name'],
-                description: (_a = getTags(member).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value,
-                deprecated: hasTag(member, 'deprecated'),
-                experimental: hasTag(member, 'experimental')
-            });
-        };
         for (const context of contexts) {
             const attributes = (_a = context.classProperties) === null || _a === void 0 ? void 0 : _a.map((property) => {
                 var _a;
-                return Object.assign(common(property), {
+                return Object.assign({
                     name: kebabCase(property.key['name']),
                     value: {
                         // kind: TODO
@@ -52,41 +43,31 @@ export const webTypes = (options) => {
                         // default: TODO
                     },
                     default: getInitializer(property.value)
-                });
+                }, extractFromComment(property, ['description', 'deprecated', 'experimental']));
             });
-            const description = (_b = getTags(context.class).find((tag) => !tag.key)) === null || _b === void 0 ? void 0 : _b.value;
-            const events = (_c = context.classEvents) === null || _c === void 0 ? void 0 : _c.map((event) => Object.assign(common(event), {
+            const events = (_b = context.classEvents) === null || _b === void 0 ? void 0 : _b.map((event) => Object.assign({
                 name: kebabCase(event.key['name']) // TODO
                 // 'value': TODO
-            }));
-            const methods = (_d = context.classMethods) === null || _d === void 0 ? void 0 : _d.map((method) => Object.assign(common(method), {
-            // 'value': TODO
-            }));
-            const properties = (_e = context.classProperties) === null || _e === void 0 ? void 0 : _e.map((property) => Object.assign(common(property), {
+            }, extractFromComment(event, ['description', 'deprecated', 'experimental'])));
+            const methods = (_c = context.classMethods) === null || _c === void 0 ? void 0 : _c.map((method) => Object.assign({
+                name: method.key['name']
+                // 'value': TODO
+            }, extractFromComment(method, ['description', 'deprecated', 'experimental'])));
+            const properties = (_d = context.classProperties) === null || _d === void 0 ? void 0 : _d.map((property) => Object.assign({
+                name: property.key['name'],
                 // 'value': TODO
                 default: getInitializer(property.value)
-            }));
-            const slots = getTags(context.class, 'slot').map((tag) => {
-                const { description, name } = parseTag(tag);
-                return {
-                    name,
-                    description
-                };
-            });
-            const element = {
+            }, extractFromComment(property, ['description', 'deprecated', 'experimental'])));
+            const element = Object.assign({
                 'name': context.elementKey,
-                'description': description,
-                'doc-url': (_g = (_f = options).reference) === null || _g === void 0 ? void 0 : _g.call(_f, context),
-                'deprecated': hasTag(context.class, 'deprecated'),
-                'experimental': hasTag(context.class, 'experimental'),
+                'doc-url': (_f = (_e = options).reference) === null || _f === void 0 ? void 0 : _f.call(_e, context),
                 'js': {
                     events,
                     properties: [].concat(properties, methods)
                 },
-                attributes,
-                slots
-            };
-            const transformed = ((_j = (_h = options).transformer) === null || _j === void 0 ? void 0 : _j.call(_h, context, element)) || element;
+                attributes
+            }, extractFromComment(context.class, ['description', 'deprecated', 'experimental', 'slots']));
+            const transformed = ((_h = (_g = options).transformer) === null || _h === void 0 ? void 0 : _h.call(_g, context, element)) || element;
             json.contributions.html.elements.push(transformed);
         }
         const dirname = path.dirname(options.destination);

package/transformer/transformer.types.d.ts

@@ -7,13 +7,10 @@ export interface TransformerPluginContext {
     assetsSource?: string;
     class?: ClassDeclaration;
     classEvents?: Array<ClassProperty>;
-    classHasMount?: boolean;
-    classHasUnmount?: boolean;
     classMembers?: ClassBody['body'];
     classMethods?: Array<ClassMethod>;
     className?: string;
     classProperties?: Array<ClassProperty>;
-    classRender?: ClassMethod;
     classStates?: Array<ClassProperty>;
     directoryName?: string;
     directoryPath?: string;
@@ -39,6 +36,9 @@ export interface TransformerPluginContext {
 }
 export interface TransformerPluginGlobal {
     contexts: Array<TransformerPluginContext>;
+    metadata?: {
+        [key: string]: any;
+    };
 }
 export interface TransformerPlugin {
     name: string;

package/transformer/utils/extractFromComment.d.ts

@@ -0,0 +1,4 @@
+import t from '@babel/types';
+export declare const extractFromComment: (node: t.Node, whitelist?: string[]) => {
+    [key: string]: any;
+};

package/transformer/utils/extractFromComment.js

@@ -0,0 +1,48 @@
+export const extractFromComment = (node, whitelist) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const normalized = [];
+    const result = {
+        description: ''
+    };
+    const lines = (_d = (_c = (_b = (_a = node.leadingComments) === null || _a === void 0 ? void 0 : _a.map((comment) => {
+        if (comment.type == 'CommentLine')
+            return comment.value;
+        return comment.value.split('\n');
+    })) === null || _b === void 0 ? void 0 : _b.flat()) === null || _c === void 0 ? void 0 : _c.map((line) => line.trim().replace(/^\*/, '').trim())) === null || _d === void 0 ? void 0 : _d.filter((line) => line.trim());
+    for (const line of lines || []) {
+        if (line.startsWith('@')) {
+            normalized.push(line);
+            continue;
+        }
+        if (!normalized.length)
+            normalized.push('');
+        normalized[normalized.length - 1] += ' ' + line;
+    }
+    for (const line of normalized) {
+        if (!line.startsWith('@')) {
+            result.description = line.trim();
+            continue;
+        }
+        const regex = /@(\w+)(?:\s*({\w+})\s*)?(?:\s*([-a-zA-Z\s]+)\s*-\s*)?(.*)/;
+        const groups = regex.exec(line);
+        if (!groups)
+            continue;
+        const tag = (_e = groups[1]) === null || _e === void 0 ? void 0 : _e.trim();
+        const type = (_f = groups[2]) === null || _f === void 0 ? void 0 : _f.trim().slice(1, -1);
+        const name = (_g = groups[3]) === null || _g === void 0 ? void 0 : _g.trim();
+        const description = (_h = groups[4]) === null || _h === void 0 ? void 0 : _h.trim();
+        if (name && description) {
+            const key = tag + 's';
+            if (whitelist && !whitelist.includes(key))
+                continue;
+            (result[key] || (result[key] = [])).push({ name, type, description });
+        }
+        else {
+            const key = tag;
+            if (whitelist && !whitelist.includes(key))
+                continue;
+            result[key] = description || true;
+        }
+    }
+    return result;
+};

package/transformer/utils/getType.js

@@ -1,6 +1,6 @@
 import { parse } from '@babel/parser';
-import { glob } from 'glob';
 import fs from 'fs-extra';
+import { glob } from 'glob';
 import { dirname, resolve } from 'path';
 import { join } from 'path';
 import { visitor } from './visitor.js';

package/transformer/utils/index.d.ts

@@ -1,9 +1,9 @@
 export * from './addDependency.js';
+export * from './extractFromComment.js';
 export * from './getInitializer.js';
 export * from './getType.js';
 export * from './getTypeReference.js';
 export * from './hasDecorator.js';
 export * from './printType.js';
 export * from './print.js';
-export * from './tags.js';
 export * from './visitor.js';

package/transformer/utils/index.js

@@ -1,9 +1,9 @@
 export * from './addDependency.js';
+export * from './extractFromComment.js';
 export * from './getInitializer.js';
 export * from './getType.js';
 export * from './getTypeReference.js';
 export * from './hasDecorator.js';
 export * from './printType.js';
 export * from './print.js';
-export * from './tags.js';
 export * from './visitor.js';

package/transformer/utils/tags.d.ts

@@ -1,13 +0,0 @@
-import t from '@babel/types';
-export interface Tag {
-    key?: string;
-    value?: string;
-}
-export interface TagParsed {
-    name?: string;
-    description?: string;
-}
-export declare const getTag: (node: t.Node, key?: string) => Tag | undefined;
-export declare const getTags: (node: t.Node, filter?: string) => Array<Tag>;
-export declare const hasTag: (node: t.Node, name: string) => Boolean;
-export declare const parseTag: (tag: Tag, spliter?: string) => TagParsed;

package/transformer/utils/tags.js

@@ -1,44 +0,0 @@
-export const getTag = (node, key) => {
-    return getTags(node, key).pop();
-};
-export const getTags = (node, filter) => {
-    var _a, _b, _c;
-    const tags = [];
-    // TODO
-    const comments = node['_leadingComments'] || node.leadingComments;
-    const lines = (_c = (_b = (_a = comments === null || comments === void 0 ? void 0 : comments.map((comment) => {
-        const { type, value } = comment;
-        if (type == 'CommentLine')
-            return value;
-        return value.replace(/\r\n/g, '\n').split('\n');
-    })) === null || _a === void 0 ? void 0 : _a.flat()) === null || _b === void 0 ? void 0 : _b.filter((line) => line.trim().replace(/\*/g, ''))) === null || _c === void 0 ? void 0 : _c.map((line) => line.replace(/^( +)?(\*+)?( +)?/, ''));
-    for (const line of lines || []) {
-        const has = !!tags.length;
-        const isTag = line.startsWith('@');
-        if (isTag) {
-            const [key, ...values] = line.split(' ');
-            tags.push({
-                key: key.slice(1).trim(),
-                value: values.join(' ').trimStart()
-            });
-            continue;
-        }
-        if (!has)
-            tags.push({ key: '', value: '' });
-        tags[tags.length - 1].value += line;
-    }
-    return tags.filter((tag) => !filter || filter === tag.key);
-};
-export const hasTag = (node, name) => {
-    return getTags(node).some((tag) => tag.key === name);
-};
-export const parseTag = (tag, spliter = ' - ') => {
-    var _a, _b;
-    const sections = ((_a = tag.value) === null || _a === void 0 ? void 0 : _a.split(spliter)) || [];
-    const name = (_b = sections[0]) === null || _b === void 0 ? void 0 : _b.trim();
-    const description = sections.slice(1).join(spliter).trim();
-    return {
-        name,
-        description
-    };
-};