@htmlplus/element 0.5.9 → 0.6.1

package/compiler/plugins/index.d.ts

@@ -9,4 +9,5 @@ export * from './read.js';
 export * from './readme.js';
 export * from './style.js';
 export * from './validate.js';
+export * from './visualStudioCode.js';
 export * from './webTypes.js';

package/compiler/plugins/index.js

@@ -9,4 +9,5 @@ export * from './read.js';
 export * from './readme.js';
 export * from './style.js';
 export * from './validate.js';
+export * from './visualStudioCode.js';
 export * from './webTypes.js';

package/compiler/plugins/visualStudioCode.d.ts

@@ -1,6 +1,8 @@
-import { Plugin } from '../../types';
+import { Context, Plugin } from '../../types';
 export declare const VISUAL_STUDIO_CODE_OPTIONS: Partial<VisualStudioCodeOptions>;
 export interface VisualStudioCodeOptions {
     destination: string;
+    reference?: (context: Context) => string;
+    transformer?: (context: Context, component: any) => any;
 }
 export declare const visualStudioCode: (options: VisualStudioCodeOptions) => Plugin;

package/compiler/plugins/visualStudioCode.js

@@ -1,28 +1,77 @@
+import { paramCase } from 'change-case';
+import fs from 'fs-extra';
+import path from 'path';
+import { getTags, getType, print } from '../utils/index.js';
 export const VISUAL_STUDIO_CODE_OPTIONS = {};
 export const visualStudioCode = (options) => {
     const name = 'visualStudioCode';
     options = Object.assign({}, VISUAL_STUDIO_CODE_OPTIONS, options);
     const finish = (global) => {
-        // TODO
-        // {
-        //   version: 1.1,
-        //   tags: [
-        //     {
-        //       name: context.componentKey,
-        //       description: {
-        //         kind: 'markdown',
-        //         value: description
-        //       },
-        //       attributes: properties,
-        //       references: [
-        //         {
-        //           name: 'Source code',
-        //           url: `https://github.com/htmlplus/core/tree/main/src/components/${context.directoryName}/${context.fileName}.tsx`
-        //         }
-        //       ]
-        //     }
-        //   ]
-        // };
+        var _a, _b, _c, _d, _e;
+        const contexts = global.contexts.sort((a, b) => {
+            return a.componentTag.toUpperCase() > b.componentTag.toUpperCase() ? +1 : -1;
+        });
+        const json = {
+            $schema: 'TODO',
+            version: 1.1,
+            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 = {
+                name: context.componentTag,
+                description: description,
+                attributes: [],
+                references: [
+                    {
+                        name: 'Source code',
+                        url: (_b = options.reference) === null || _b === void 0 ? void 0 : _b.call(options, context)
+                    }
+                ]
+            };
+            for (const property of context.classProperties || []) {
+                const attribute = {
+                    name: paramCase(property.key['name']),
+                    description: (_c = getTags(property).find((tag) => !tag.key)) === null || _c === void 0 ? void 0 : _c.value,
+                    values: []
+                };
+                const type = print(getType(context.fileAST, (_d = property.typeAnnotation) === null || _d === void 0 ? void 0 : _d['typeAnnotation'], {
+                    directory: context.directoryPath
+                }));
+                const sections = type.split('|');
+                for (const section of sections) {
+                    const trimmed = section.trim();
+                    if (!trimmed)
+                        continue;
+                    const isBoolean = /bool|boolean|Boolean/.test(trimmed);
+                    const isNumber = !isNaN(trimmed);
+                    const isString = /^("|'|`)/.test(trimmed);
+                    if (isBoolean) {
+                        attribute.values.push({
+                            name: 'false'
+                        }, {
+                            name: 'true'
+                        });
+                    }
+                    else if (isNumber) {
+                        attribute.values.push({
+                            name: trimmed
+                        });
+                    }
+                    else if (isString) {
+                        attribute.values.push({
+                            name: trimmed.slice(1, -1)
+                        });
+                    }
+                }
+                tag.attributes.push(attribute);
+            }
+            const transformed = ((_e = options.transformer) === null || _e === void 0 ? void 0 : _e.call(options, context, tag)) || tag;
+            json.tags.push(transformed);
+        }
+        const dirname = path.dirname(options.destination);
+        fs.ensureDirSync(dirname);
+        fs.writeJSONSync(options.destination, json, { encoding: 'utf8', spaces: 2 });
     };
     return { name, finish };
 };

package/compiler/plugins/webTypes.js

@@ -1,13 +1,16 @@
 import { paramCase } from 'change-case';
 import fs from 'fs-extra';
 import path from 'path';
-import { getInitializer, getTags, hasTag, parseTag, print } from '../utils/index.js';
+import { getInitializer, getTags, getType, hasTag, parseTag, print } from '../utils/index.js';
 export const WEB_TYPES_OPTIONS = {};
 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;
+        const contexts = global.contexts.sort((a, b) => {
+            return a.componentTag.toUpperCase() > b.componentTag.toUpperCase() ? +1 : -1;
+        });
         const json = {
             '$schema': 'http://json.schemastore.org/web-types',
             'name': options.packageName,
@@ -33,27 +36,16 @@ export const webTypes = (options) => {
                 experimental: hasTag(member, 'experimental')
             });
         };
-        for (const context of global.contexts) {
+        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), {
                     name: paramCase(property.key['name']),
                     value: {
                         // kind: TODO
-                        /**
-                         * For Example
-                         * 01) type: "''"
-                         * 02) type: "null"
-                         * 03) type: "undefined"
-                         * 04) type: "boolean"
-                         * 05) type: "string"
-                         * 06) type: "number"
-                         * 07) type: "boolean | string | number"
-                         * 08) type: "string[]"
-                         * 09) type: "1 | 2 | 3"
-                         * 10) type: "'Value-1' | 'Value-2'"
-                         */
-                        type: print((_a = property.typeAnnotation) === null || _a === void 0 ? void 0 : _a['typeAnnotation'])
+                        type: print(getType(context.fileAST, (_a = property.typeAnnotation) === null || _a === void 0 ? void 0 : _a['typeAnnotation'], {
+                            directory: context.directoryPath
+                        }))
                         // required: TODO
                         // default: TODO
                     },

package/compiler/utils/getType.d.ts

@@ -1,2 +1,2 @@
 import { File, Node } from '@babel/types';
-export declare const getType: (file: File, node: Node, options: any) => any;
+export declare const getType: (file: File, node: Node, options: any) => Node;

package/compiler/utils/getType.js

@@ -4,7 +4,6 @@ import fs from 'fs-extra';
 import { dirname, resolve } from 'path';
 import { join } from 'path';
 import { visitor } from './visitor.js';
-// TODO: return type
 export const getType = (file, node, options) => {
     if (!node)
         return node;
@@ -68,6 +67,24 @@ export const getType = (file, node, options) => {
             if (path.node.id.name != node.typeName['name'])
                 return;
             result = path.node.typeAnnotation;
+            switch (result.type) {
+                case 'TSUnionType':
+                    const types = [];
+                    for (const prev of result.types) {
+                        const next = getType(file, prev, options);
+                        if (next.type == 'TSUnionType') {
+                            next.types.forEach((type) => types.push(type));
+                        }
+                        else {
+                            types.push(next);
+                        }
+                    }
+                    result.types = types;
+                    break;
+                default:
+                    result = getType(file, result, options);
+                    break;
+            }
             path.stop();
         }
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.5.9",
+  "version": "0.6.1",
   "license": "MIT",
   "author": "Masood Abdolian <m.abdolian@gmail.com>",
   "description": "A powerful library for building scalable, reusable, fast, tastable and lightweight design system for any web technologies. Powerd by Web Component.",