@htmlplus/element 0.3.2 → 0.4.1

package/compiler/compiler.js

@@ -1,51 +1,71 @@
-import logUpdate from 'log-update';
-const log = (namespace, message, persist) => {
-    logUpdate(`${new Date().toLocaleTimeString()} [@htmlplus/element]${namespace ? `[${namespace}]` : ''} ${message}`);
-    persist && logUpdate.done();
-};
+import ora from 'ora';
+const logger = ora({
+    color: 'yellow'
+});
 export default (...plugins) => {
     let global = {
         contexts: []
     };
+    logger.start(`${plugins.length} Plugins found.`).succeed();
     const start = async () => {
-        log(undefined, 'Starting...', true);
+        logger.start('Starting...').succeed();
         for (const plugin of plugins) {
-            if (plugin.start) {
-                global = (await plugin.start(global)) || global;
-            }
-            log(plugin.name, 'Started successfully.');
+            if (!plugin.start)
+                continue;
+            logger.start(`Plugin '${plugin.name}' starting...`);
+            await plugin.start(global);
+            logger.start(`Plugin '${plugin.name}' started successfully.`);
         }
-        log(undefined, `${plugins.length} Plugins started successfully.`, true);
+        logger.start(`Plugins started successfully.`).succeed();
     };
     const next = async (filePath) => {
+        var _a;
         const key = filePath.split(/[\/|\\]/g).pop();
         let context = {
             filePath
         };
-        log(`${key}`, 'Executing...');
+        let timeout;
         for (const plugin of plugins) {
             if (!plugin.next)
                 continue;
-            context = (await plugin.next(context, global)) || context;
+            clearTimeout(timeout);
+            logger.start(`Plugin '${plugin.name}' executing...`);
+            const output = await plugin.next(context, global);
+            logger.start(`Plugin '${plugin.name}' executed successfully.`);
+            timeout = setTimeout(() => logger.stop(), 1500);
+            // TODO
+            if (output) {
+                context.outputs = ((_a = context.outputs) !== null && _a !== void 0 ? _a : [])
+                    .filter((output) => {
+                    if (plugin.name != output.name)
+                        return true;
+                    if (plugin.options && plugin.options != output.options)
+                        return true;
+                })
+                    .concat({
+                    name: plugin.name,
+                    options: plugin.options,
+                    output
+                });
+            }
             global.contexts = global.contexts.filter((current) => current.filePath != context.filePath).concat(context);
             if (context.isInvalid)
                 break;
         }
         if (context.isInvalid)
-            log(key, 'Break executing because file is invalid.');
-        else
-            log(key, 'Executed successfully.');
+            logger.start(`File '${key}' break executing because file is invalid.`).succeed();
         return context;
     };
     const finish = async () => {
-        log(undefined, 'Finishing...', true);
+        logger.start('Finishing...').succeed();
         for (const plugin of plugins) {
-            if (plugin.finish) {
-                global = (await plugin.finish(global)) || global;
-            }
-            log(plugin.name, 'Finished successfully.');
+            if (!plugin.finish)
+                continue;
+            logger.start(`Plugin '${plugin.name}' finishing...`);
+            await plugin.finish(global);
+            logger.start(`Plugin '${plugin.name}' finished successfully.`);
         }
-        log(undefined, `${plugins.length} Plugins finished successfully.`, true);
+        logger.start(`Plugins finished successfully.`).succeed();
     };
     return {
         start,

package/compiler/plugins/customElement.d.ts

@@ -1,5 +1,8 @@
 import { Context } from '../../types/index.js';
-export declare const customElement: () => {
+export interface CustomElementOptions {
+    typings?: boolean;
+}
+export declare const customElement: (options?: CustomElementOptions) => {
     name: string;
     next: (context: Context) => void;
 };

package/compiler/plugins/customElement.js

@@ -1,13 +1,24 @@
 import t from '@babel/types';
 import * as CONSTANTS from '../../constants/index.js';
 import { print, visitor } from '../utils/index.js';
-export const customElement = () => {
+const defaults = {
+    typings: true
+};
+export const customElement = (options) => {
     const name = 'customElement';
+    options = Object.assign({}, defaults, options);
     const next = (context) => {
-        // attach uhtml importer
-        context.fileAST.program.body.unshift(t.importDeclaration([t.importSpecifier(t.identifier('html'), t.identifier('html'))], t.stringLiteral('@htmlplus/element/runtime')));
+        const ast = t.cloneNode(context.fileAST, true);
+        // TODO
+        visitor(ast, {
+            ClassDeclaration(path) {
+                if (path.node.id.name != context.className)
+                    return;
+                path.node.body.body.unshift(t.classProperty(t.identifier('uhtml')));
+            }
+        });
         // jsx to uhtml syntax
-        visitor(context.fileAST, {
+        visitor(ast, {
             JSXAttribute: {
                 exit(path) {
                     var _a;
@@ -29,14 +40,14 @@ export const customElement = () => {
                         return;
                     }
                     else {
-                        path.replaceWith(t.identifier('html`' + print(path.node) + '`'));
+                        path.replaceWith(t.memberExpression(t.memberExpression(t.thisExpression(), t.identifier('uhtml')), t.identifier(`html\`${print(path.node)}\``)));
                         return;
                     }
                 }
             },
             JSXFragment: {
                 exit(path) {
-                    path.replaceWith(t.identifier(['html`', ...path.node.children.map((child) => print(child)), '`'].join('')));
+                    path.replaceWith(t.memberExpression(t.memberExpression(t.thisExpression(), t.identifier('uhtml')), t.identifier(['html`', ...path.node.children.map((child) => print(child)), '`'].join(''))));
                 }
             },
             JSXExpressionContainer: {
@@ -55,81 +66,89 @@ export const customElement = () => {
             }
         });
         // attach members
-        context.class.body.body.unshift(t.classProperty(t.identifier(CONSTANTS.STATIC_MEMBERS), t.objectExpression([
-            ...context.classProperties.map((property) => {
-                var _a, _b;
-                const type = (_b = (_a = property.typeAnnotation) === null || _a === void 0 ? void 0 : _a.typeAnnotation) === null || _b === void 0 ? void 0 : _b.type;
-                const elements = [];
-                switch (type) {
-                    case 'TSBooleanKeyword':
-                        elements.push(t.stringLiteral(CONSTANTS.TYPE_BOOLEAN));
-                        break;
-                    case 'TSStringKeyword':
-                        elements.push(t.stringLiteral(CONSTANTS.TYPE_STRING));
-                        break;
-                    case 'TSNumberKeyword':
-                        elements.push(t.stringLiteral(CONSTANTS.TYPE_NUMBER));
-                        break;
-                    default:
-                        elements.push(t.nullLiteral());
-                        break;
-                }
-                if (property.value)
-                    elements.push(property.value);
-                return t.objectProperty(t.identifier(property.key['name']), t.arrayExpression(elements));
-            }),
-            ...context.classMethods.map((method) => {
-                const elements = [t.stringLiteral(CONSTANTS.TYPE_FUNCTION)];
-                return t.objectProperty(t.identifier(method.key['name']), t.arrayExpression(elements));
-            })
-        ]), undefined, undefined, undefined, true));
-        // attach typings
-        visitor(context.fileAST, {
-            Program(path) {
-                path.node.body.push(Object.assign(t.tsModuleDeclaration(t.identifier('global'), t.tsModuleBlock([
-                    t.tsInterfaceDeclaration(t.identifier(context.componentInterfaceName), null, [], t.tsInterfaceBody([
-                        ...context.classProperties.map((property) => Object.assign(t.tSPropertySignature(property.key, property.typeAnnotation), {
-                            optional: property.optional,
-                            leadingComments: property.leadingComments
-                        }))
-                    ])),
-                    t.variableDeclaration('var', [
-                        t.variableDeclarator(Object.assign(t.identifier(context.componentInterfaceName), {
-                            typeAnnotation: t.tSTypeAnnotation(t.tSTypeLiteral([
-                                t.tSPropertySignature(t.identifier('prototype'), t.tsTypeAnnotation(t.tSTypeReference(t.identifier(context.componentInterfaceName)))),
-                                t.tSConstructSignatureDeclaration(null, [], t.tSTypeAnnotation(t.tSTypeReference(t.identifier(context.componentInterfaceName))))
-                            ]))
-                        }))
-                    ]),
-                    t.tsInterfaceDeclaration(t.identifier('HTMLElementTagNameMap'), null, [], t.tsInterfaceBody([
-                        t.tSPropertySignature(t.stringLiteral(context.componentTag), t.tSTypeAnnotation(t.tSIntersectionType([t.tSTypeReference(t.identifier(context.componentInterfaceName))])))
-                    ]))
-                ])), {
-                    declare: true,
-                    global: true
-                }));
-                path.node.body.push(t.exportNamedDeclaration(t.tsInterfaceDeclaration(
-                // TODO
-                t.identifier(context.componentClassName + 'JSX'), null, [], t.tsInterfaceBody([
-                    ...context.classProperties.map((property) => Object.assign(t.tSPropertySignature(property.key, property.typeAnnotation), {
-                        optional: property.optional,
-                        leadingComments: property.leadingComments
-                    })),
-                    ...context.classEvents.map((event) => {
+        visitor(ast, {
+            ClassDeclaration(path) {
+                if (path.node.id.name != context.className)
+                    return;
+                path.node.body.body.unshift(t.classProperty(t.identifier(CONSTANTS.STATIC_MEMBERS), t.objectExpression([
+                    ...context.classProperties.map((property) => {
                         var _a, _b;
-                        return Object.assign(t.tSPropertySignature(event.key, t.tsTypeAnnotation(t.tsFunctionType(undefined, [
-                            Object.assign({}, t.identifier('event'), {
-                                typeAnnotation: t.tsTypeAnnotation(t.tsTypeReference(t.identifier('CustomEvent'), (_b = (_a = event.typeAnnotation) === null || _a === void 0 ? void 0 : _a['typeAnnotation']) === null || _b === void 0 ? void 0 : _b.typeParameters))
-                            })
-                        ], t.tsTypeAnnotation(t.tsVoidKeyword())))), {
-                            optional: true,
-                            leadingComments: event.leadingComments
-                        });
+                        const type = (_b = (_a = property.typeAnnotation) === null || _a === void 0 ? void 0 : _a.typeAnnotation) === null || _b === void 0 ? void 0 : _b.type;
+                        const elements = [];
+                        switch (type) {
+                            case 'TSBooleanKeyword':
+                                elements.push(t.stringLiteral(CONSTANTS.TYPE_BOOLEAN));
+                                break;
+                            case 'TSStringKeyword':
+                                elements.push(t.stringLiteral(CONSTANTS.TYPE_STRING));
+                                break;
+                            case 'TSNumberKeyword':
+                                elements.push(t.stringLiteral(CONSTANTS.TYPE_NUMBER));
+                                break;
+                            default:
+                                elements.push(t.nullLiteral());
+                                break;
+                        }
+                        if (property.value)
+                            elements.push(property.value);
+                        return t.objectProperty(t.identifier(property.key['name']), t.arrayExpression(elements));
+                    }),
+                    ...context.classMethods.map((method) => {
+                        const elements = [t.stringLiteral(CONSTANTS.TYPE_FUNCTION)];
+                        return t.objectProperty(t.identifier(method.key['name']), t.arrayExpression(elements));
                     })
-                ]))));
+                ]), undefined, undefined, undefined, true));
             }
         });
-        context.script = print(context.fileAST);
+        // attach typings
+        if (options === null || options === void 0 ? void 0 : options.typings) {
+            visitor(ast, {
+                Program(path) {
+                    path.node.body.push(Object.assign(t.tsModuleDeclaration(t.identifier('global'), t.tsModuleBlock([
+                        t.tsInterfaceDeclaration(t.identifier(context.componentInterfaceName), null, [], t.tsInterfaceBody([
+                            ...context.classProperties.map((property) => Object.assign(t.tSPropertySignature(property.key, property.typeAnnotation), {
+                                optional: property.optional,
+                                leadingComments: property.leadingComments
+                            }))
+                        ])),
+                        t.variableDeclaration('var', [
+                            t.variableDeclarator(Object.assign(t.identifier(context.componentInterfaceName), {
+                                typeAnnotation: t.tSTypeAnnotation(t.tSTypeLiteral([
+                                    t.tSPropertySignature(t.identifier('prototype'), t.tsTypeAnnotation(t.tSTypeReference(t.identifier(context.componentInterfaceName)))),
+                                    t.tSConstructSignatureDeclaration(null, [], t.tSTypeAnnotation(t.tSTypeReference(t.identifier(context.componentInterfaceName))))
+                                ]))
+                            }))
+                        ]),
+                        t.tsInterfaceDeclaration(t.identifier('HTMLElementTagNameMap'), null, [], t.tsInterfaceBody([
+                            t.tSPropertySignature(t.stringLiteral(context.componentTag), t.tSTypeAnnotation(t.tSIntersectionType([t.tSTypeReference(t.identifier(context.componentInterfaceName))])))
+                        ]))
+                    ])), {
+                        declare: true,
+                        global: true
+                    }));
+                    path.node.body.push(t.exportNamedDeclaration(t.tsInterfaceDeclaration(
+                    // TODO
+                    t.identifier(context.componentClassName + 'JSX'), null, [], t.tsInterfaceBody([
+                        ...context.classProperties.map((property) => Object.assign(t.tSPropertySignature(property.key, property.typeAnnotation), {
+                            optional: property.optional,
+                            leadingComments: property.leadingComments
+                        })),
+                        ...context.classEvents.map((event) => {
+                            var _a, _b;
+                            return Object.assign(t.tSPropertySignature(event.key, t.tsTypeAnnotation(t.tsFunctionType(undefined, [
+                                Object.assign({}, t.identifier('event'), {
+                                    typeAnnotation: t.tsTypeAnnotation(t.tsTypeReference(t.identifier('CustomEvent'), (_b = (_a = event.typeAnnotation) === null || _a === void 0 ? void 0 : _a['typeAnnotation']) === null || _b === void 0 ? void 0 : _b.typeParameters))
+                                })
+                            ], t.tsTypeAnnotation(t.tsVoidKeyword())))), {
+                                optional: true,
+                                leadingComments: event.leadingComments
+                            });
+                        })
+                    ]))));
+                }
+            });
+        }
+        context.script = print(ast);
     };
     return {
         name,

package/compiler/plugins/customElementReact/customElementReact.d.ts

@@ -1,7 +1,7 @@
 import { Global } from '../../../types/index.js';
 export interface CustomElementReactOptions {
     compact?: boolean;
-    dist: string;
+    destination: string;
     eventName?: (eventName: string) => string;
     importerComponent?: (context: any) => string;
     importerComponentType?: (context: any) => string;

package/compiler/plugins/customElementReact/customElementReact.js

@@ -1,7 +1,7 @@
 import { __dirname, isDirectoryEmpty, renderTemplate } from '../../utils/index.js';
 const defaults = {
     compact: false,
-    dist: '',
+    destination: '',
     eventName: undefined,
     importerComponent(context) {
         return `YOUR_CORE_PACKAGE_NAME#${context.componentClassName}`;
@@ -20,7 +20,7 @@ export const customElementReact = (options) => {
             options
         };
         const config = { cwd: __dirname(import.meta.url) };
-        const isEmpty = isDirectoryEmpty(options.dist);
+        const isEmpty = isDirectoryEmpty(options.destination);
         const skip = [];
         const getKey = (component) => component.componentClassName;
         for (const key in globalNew.contexts) {
@@ -52,7 +52,7 @@ export const customElementReact = (options) => {
                 'templates/src/components/*fileName*.ts.hbs',
                 '!templates/src/components/*fileName*.compact.ts.hbs'
             ];
-            renderTemplate(patterns, options.dist, config)(state);
+            renderTemplate(patterns, options.destination, config)(state);
         }
         if (options.compact) {
             globalNew.groups = Object.values(globalNew.contexts)
@@ -69,7 +69,9 @@ export const customElementReact = (options) => {
                 return true;
             })
                 .map((group) => {
-                const all = group.components.reverse().map((component, index) => {
+                const all = group.components
+                    .reverse()
+                    .map((component, index) => {
                     const componentClassNameInCategory = getKey(component).replace(group.key, '');
                     const parse = (input) => {
                         const [source, key] = input.split('#');
@@ -88,7 +90,9 @@ export const customElementReact = (options) => {
                     return Object.assign(Object.assign({}, component), { componentClassNameInCategory,
                         importerComponent,
                         importerComponentType });
-                });
+                })
+                    // TODO: experimental
+                    .sort((a, b) => (b.componentClassName < a.componentClassName ? 0 : -1));
                 return {
                     all,
                     filterd: all.slice(1),
@@ -102,7 +106,7 @@ export const customElementReact = (options) => {
                     continue;
                 const state = Object.assign({ fileName: group.root.fileName, options }, group);
                 const patterns = ['templates/src/components/*fileName*.compact.ts.hbs'];
-                renderTemplate(patterns, options.dist, config)(state);
+                renderTemplate(patterns, options.destination, config)(state);
             }
         }
         if (isEmpty) {
@@ -111,11 +115,11 @@ export const customElementReact = (options) => {
                 '!templates/src/components/*fileName*.ts.hbs',
                 '!templates/src/components/*fileName*.compact.ts.hbs'
             ];
-            renderTemplate(patterns, options.dist, config)(globalNew);
+            renderTemplate(patterns, options.destination, config)(globalNew);
         }
         if (!isEmpty) {
             const patterns = ['templates/src/proxy*', 'templates/src/components/index*'];
-            renderTemplate(patterns, options.dist, config)(globalNew);
+            renderTemplate(patterns, options.destination, config)(globalNew);
         }
     };
     return {

package/compiler/plugins/customElementReact/templates/package.json.hbs

@@ -31,7 +31,7 @@
     "typescript": "^4.0.2"
   },
   "peerDependencies": {
-    "react": "^16.0.0 || ^17.0.0",
-    "react-dom": "^16.0.0 || ^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }

package/compiler/plugins/customElementReact/templates/src/components/{{fileName}}.compact.ts.hbs

@@ -6,13 +6,13 @@
  **************************************************/
  
 {{#each all}}
-import { {{componentClassName}} } from './{{fileName}}';
+import { {{componentClassNamePrune}} } from './{{fileName}}';
 {{/each}}
 
-const All = /*@__PURE__*/ Object.assign({{root.componentClassName}}, {
+const All = /*@__PURE__*/ Object.assign({{root.componentClassNamePrune}}, {
   {{#each filterd}}
-  {{componentClassNameInCategory}}: {{componentClassName}},
+  {{componentClassNameInCategory}}: {{componentClassNamePrune}},
   {{/each}}
 });
 
-export { All as {{root.componentClassName}} }
+export { All as {{root.componentClassNamePrune}} }

package/compiler/plugins/customElementReact/templates/src/components/{{fileName}}.ts.hbs

@@ -19,7 +19,7 @@ type Renamed = Rename<{{importerComponentType.variable}}, {
   {{/each}}
 }>
 
-export const {{componentClassName}} = /*@__PURE__*/ proxy<{{componentInterfaceName}}, Renamed>(
+export const {{componentClassNamePrune}} = /*@__PURE__*/ proxy<{{componentInterfaceName}}, Renamed>(
   '{{componentTag}}', 
   [{{#each classProperties}}'{{key.name}}', {{/each}}], 
   [{{#each classEvents}}'{{key.name}}', {{/each}}],

package/compiler/plugins/{docs.d.ts → document.d.ts}

@@ -1,9 +1,8 @@
 import { Context } from '../../types/index.js';
-export interface DocsOptions {
-    dist: string;
-    prefix: string;
+export interface DocumentOptions {
+    destination: string;
 }
-export declare const docs: (options: DocsOptions) => {
+export declare const document: (options: DocumentOptions) => {
     name: string;
     start: (global: any) => void;
     next: (context: Context, global: any) => void;