@htmlplus/element 0.6.0 → 0.6.2

package/compiler/plugins/customElement.js

@@ -138,6 +138,9 @@ export const customElement = (options) => {
                         case 'TSStringKeyword':
                             type |= CONSTANTS.TYPE_STRING;
                             break;
+                        case 'TSTupleType':
+                            type |= CONSTANTS.TYPE_ARRAY;
+                            break;
                         case 'TSTypeLiteral':
                             type |= CONSTANTS.TYPE_OBJECT;
                             break;

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

@@ -9,7 +9,7 @@ export const webTypes = (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;
+            return a.componentTag.toUpperCase() > b.componentTag.toUpperCase() ? +1 : -1;
         });
         const json = {
             '$schema': 'http://json.schemastore.org/web-types',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "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.",