@htmlplus/element 0.3.1 → 0.4.0

package/compiler/compiler.d.ts

@@ -0,0 +1,7 @@
+import { Context, Plugin } from '../types/index.js';
+declare const _default: (...plugins: Array<Plugin>) => {
+    start: () => Promise<void>;
+    next: (filePath: string) => Promise<Context>;
+    finish: () => Promise<void>;
+};
+export default _default;

package/compiler/compiler.js

@@ -0,0 +1,72 @@
+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 () => {
+        logger.start('Starting...').succeed();
+        for (const plugin of plugins) {
+            if (!plugin.start)
+                continue;
+            logger.start(`Plugin '${plugin.name}' starting...`);
+            await plugin.start(global);
+            logger.start(`Plugin '${plugin.name}' started successfully.`);
+        }
+        logger.start(`Plugins started successfully.`).succeed();
+    };
+    const next = async (filePath) => {
+        var _a;
+        const key = filePath.split(/[\/|\\]/g).pop();
+        let context = {
+            filePath
+        };
+        for (const plugin of plugins) {
+            if (!plugin.next)
+                continue;
+            logger.start(`Plugin '${plugin.name}' executing...`);
+            const output = await plugin.next(context, global);
+            // 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
+                });
+            }
+            logger.start(`Plugin '${plugin.name}' executed successfully.`);
+            global.contexts = global.contexts.filter((current) => current.filePath != context.filePath).concat(context);
+            if (context.isInvalid)
+                break;
+        }
+        if (context.isInvalid)
+            logger.start(`File '${key}' break executing because file is invalid.`).succeed();
+        return context;
+    };
+    const finish = async () => {
+        logger.start('Finishing...').succeed();
+        for (const plugin of plugins) {
+            if (!plugin.finish)
+                continue;
+            logger.start(`Plugin '${plugin.name}' finishing...`);
+            await plugin.finish(global);
+            logger.start(`Plugin '${plugin.name}' finished successfully.`);
+        }
+        logger.start(`Plugins finished successfully.`).succeed();
+    };
+    return {
+        start,
+        next,
+        finish
+    };
+};

package/compiler/index.d.ts

@@ -0,0 +1,2 @@
+export { default as default } from './compiler.js';
+export * from './plugins/index.js';

package/compiler/index.js

@@ -0,0 +1,2 @@
+export { default as default } from './compiler.js';
+export * from './plugins/index.js';

package/compiler/plugins/customElement.d.ts

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

package/compiler/plugins/customElement.js

@@ -0,0 +1,157 @@
+import t from '@babel/types';
+import * as CONSTANTS from '../../constants/index.js';
+import { print, visitor } from '../utils/index.js';
+const defaults = {
+    typings: true
+};
+export const customElement = (options) => {
+    const name = 'customElement';
+    options = Object.assign({}, defaults, options);
+    const next = (context) => {
+        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(ast, {
+            JSXAttribute: {
+                exit(path) {
+                    var _a;
+                    if (((_a = path.node.value) === null || _a === void 0 ? void 0 : _a.type) == 'JSXExpressionContainer') {
+                        let node = path.node;
+                        if (path.node.name.name == 'ref') {
+                            node = t.jsxAttribute(path.node.name, t.jSXExpressionContainer(t.arrowFunctionExpression([t.identifier('$element')], t.assignmentExpression('=', path.node.value.expression, t.identifier('$element')))));
+                        }
+                        path.replaceWith(t.jsxIdentifier(print(node).replace('={', '=${')));
+                        path.skip();
+                        return;
+                    }
+                }
+            },
+            JSXElement: {
+                exit(path) {
+                    if (path.parent.type == 'JSXElement' || path.parent.type == 'JSXFragment') {
+                        path.replaceWith(t.identifier(print(path.node)));
+                        return;
+                    }
+                    else {
+                        path.replaceWith(t.memberExpression(t.memberExpression(t.thisExpression(), t.identifier('uhtml')), t.identifier(`html\`${print(path.node)}\``)));
+                        return;
+                    }
+                }
+            },
+            JSXFragment: {
+                exit(path) {
+                    path.replaceWith(t.memberExpression(t.memberExpression(t.thisExpression(), t.identifier('uhtml')), t.identifier(['html`', ...path.node.children.map((child) => print(child)), '`'].join(''))));
+                }
+            },
+            JSXExpressionContainer: {
+                exit(path) {
+                    if (path.parent.type == 'JSXElement' || path.parent.type == 'JSXFragment') {
+                        path.replaceWith(t.identifier('$' + print(path.node)));
+                        return;
+                    }
+                }
+            },
+            JSXSpreadAttribute: {
+                enter(path) {
+                    // TODO
+                    path.replaceWith(t.jsxAttribute(t.jsxIdentifier('.dataset'), t.jsxExpressionContainer(path.node.argument)));
+                }
+            }
+        });
+        // attach members
+        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;
+                        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
+        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,
+        next
+    };
+};

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

@@ -0,0 +1,12 @@
+import { Global } from '../../../types/index.js';
+export interface CustomElementReactOptions {
+    compact?: boolean;
+    destination: string;
+    eventName?: (eventName: string) => string;
+    importerComponent?: (context: any) => string;
+    importerComponentType?: (context: any) => string;
+}
+export declare const customElementReact: (options: CustomElementReactOptions) => {
+    name: string;
+    finish: (global: Global) => void;
+};

package/compiler/plugins/customElementReact/customElementReact.js

@@ -0,0 +1,129 @@
+import { __dirname, isDirectoryEmpty, renderTemplate } from '../../utils/index.js';
+const defaults = {
+    compact: false,
+    destination: '',
+    eventName: undefined,
+    importerComponent(context) {
+        return `YOUR_CORE_PACKAGE_NAME#${context.componentClassName}`;
+    },
+    importerComponentType(context) {
+        return `YOUR_CORE_PACKAGE_NAME#JSX.${context.componentClassName}`;
+    }
+};
+export const customElementReact = (options) => {
+    const name = 'customElementReact';
+    const finish = (global) => {
+        options = Object.assign(Object.assign({}, defaults), options);
+        // TODO
+        const globalNew = {
+            contexts: global.contexts.reduce((previous, current) => (Object.assign(Object.assign({}, previous), { [current.filePath]: current })), {}),
+            options
+        };
+        const config = { cwd: __dirname(import.meta.url) };
+        const isEmpty = isDirectoryEmpty(options.destination);
+        const skip = [];
+        const getKey = (component) => component.componentClassName;
+        for (const key in globalNew.contexts) {
+            const context = globalNew.contexts[key];
+            const parse = (input) => {
+                const [source, key] = input.split('#');
+                const [root, ...sub] = key.split('.');
+                const variable = ['Type', ...sub].join('.');
+                return {
+                    source,
+                    variable,
+                    root
+                };
+            };
+            const classEvents = context.classEvents.map((classEvent) => {
+                var _a;
+                const name = ((_a = options.eventName) === null || _a === void 0 ? void 0 : _a.call(options, classEvent.key.name)) || classEvent.key.name;
+                return Object.assign(Object.assign({}, classEvent), { converted: 'on' + name.charAt(0).toUpperCase() + name.slice(1) });
+            });
+            const fileName = context.fileName;
+            const importerComponent = parse(options.importerComponent(context));
+            const importerComponentType = parse(options.importerComponentType(context));
+            const state = Object.assign(Object.assign({}, context), { classEvents,
+                fileName,
+                importerComponent,
+                importerComponentType,
+                options });
+            const patterns = [
+                'templates/src/components/*fileName*.ts.hbs',
+                '!templates/src/components/*fileName*.compact.ts.hbs'
+            ];
+            renderTemplate(patterns, options.destination, config)(state);
+        }
+        if (options.compact) {
+            globalNew.groups = Object.values(globalNew.contexts)
+                .sort((a, b) => getKey(b).length - getKey(a).length)
+                .map((component, index, components) => ({
+                key: getKey(component),
+                components: components.filter((current) => getKey(current).startsWith(getKey(component)))
+            }))
+                .sort((a, b) => b.components.length - a.components.length)
+                .filter((group) => {
+                if (skip.includes(group.key))
+                    return;
+                group.components.forEach((component) => skip.push(getKey(component)));
+                return true;
+            })
+                .map((group) => {
+                const all = group.components
+                    .reverse()
+                    .map((component, index) => {
+                    const componentClassNameInCategory = getKey(component).replace(group.key, '');
+                    const parse = (input) => {
+                        const [source, key] = input.split('#');
+                        const [root, ...sub] = key.split('.');
+                        const local = root + (index + 1);
+                        const variable = [local, ...sub].join('.');
+                        return {
+                            source,
+                            variable,
+                            root,
+                            local
+                        };
+                    };
+                    const importerComponent = parse(options.importerComponent(component));
+                    const importerComponentType = parse(options.importerComponentType(component));
+                    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),
+                    root: all.at(0),
+                    single: all.length == 1
+                };
+            })
+                .sort((a, b) => (getKey(a.root) < getKey(b.root) ? -1 : 0));
+            for (const group of globalNew.groups) {
+                if (group.single)
+                    continue;
+                const state = Object.assign({ fileName: group.root.fileName, options }, group);
+                const patterns = ['templates/src/components/*fileName*.compact.ts.hbs'];
+                renderTemplate(patterns, options.destination, config)(state);
+            }
+        }
+        if (isEmpty) {
+            const patterns = [
+                'templates/**',
+                '!templates/src/components/*fileName*.ts.hbs',
+                '!templates/src/components/*fileName*.compact.ts.hbs'
+            ];
+            renderTemplate(patterns, options.destination, config)(globalNew);
+        }
+        if (!isEmpty) {
+            const patterns = ['templates/src/proxy*', 'templates/src/components/index*'];
+            renderTemplate(patterns, options.destination, config)(globalNew);
+        }
+    };
+    return {
+        name,
+        finish
+    };
+};

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

@@ -0,0 +1 @@
+export * from './customElementReact.js';

package/compiler/plugins/customElementReact/index.js

@@ -0,0 +1 @@
+export * from './customElementReact.js';

package/compiler/plugins/customElementReact/templates/README.md.hbs

@@ -0,0 +1 @@
+# React output target for your custom element.

package/compiler/plugins/customElementReact/templates/_.gitignore.hbs

@@ -0,0 +1,2 @@
+dist
+node_modules

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

@@ -0,0 +1,37 @@
+{  
+  "name": "YOUR_REACT_PACKAGE_NAME",
+  "version": "0.0.0",
+  "type": "module",
+  "description": "React output target for your custom element.",
+  "exports": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "prebuild": "npm run clean",
+    "build": "rollup -c",
+    "clean": "rimraf dist"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "YOUR_CORE_PACKAGE_NAME": "latest",
+    "change-case": "^4.1.2"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^15.0.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@types/react": "^16.9.49",
+    "glob": "^7.2.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.27.1",
+    "rollup-plugin-peer-deps-external": "^2.2.3",
+    "rollup-plugin-typescript2": "^0.27.2",
+    "typescript": "^4.0.2"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0 || ^17.0.0",
+    "react-dom": "^16.0.0 || ^17.0.0"
+  }
+}

package/compiler/plugins/customElementReact/templates/rollup.config.js.hbs

@@ -0,0 +1,21 @@
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import glob from 'glob';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import typescript from 'rollup-plugin-typescript2';
+
+export default {
+  input: glob.sync('src/**/*.ts'),
+  output: [
+    {
+      dir: 'dist',
+      format: 'esm',
+    },
+  ],
+  plugins: [
+    peerDepsExternal(), 
+    resolve(), 
+    commonjs(), 
+    typescript(),
+  ],
+};

package/compiler/plugins/customElementReact/templates/src/components/index.ts.hbs

@@ -0,0 +1,17 @@
+/**************************************************
+ * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
+ **************************************************/
+
+{{#if options.compact}}
+{{#each groups}}
+{{#if single}}
+export * from './{{root.fileName}}';
+{{else}}
+export * from './{{root.fileName}}.compact';
+{{/if}}
+{{/each}}
+{{else}}
+{{#each contexts}}
+export * from './{{fileName}}';
+{{/each}}
+{{/if}}

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

@@ -0,0 +1,18 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**************************************************
+ * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
+ **************************************************/
+ 
+{{#each all}}
+import { {{componentClassNamePrune}} } from './{{fileName}}';
+{{/each}}
+
+const All = /*@__PURE__*/ Object.assign({{root.componentClassNamePrune}}, {
+  {{#each filterd}}
+  {{componentClassNameInCategory}}: {{componentClassNamePrune}},
+  {{/each}}
+});
+
+export { All as {{root.componentClassNamePrune}} }

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

@@ -0,0 +1,26 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**************************************************
+ * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
+ **************************************************/
+
+import { proxy } from '../proxy';
+
+{{!-- import { {{importerComponent.root}} as Component } from '{{importerComponent.source}}'; --}}
+import '{{importerComponent.source}}';
+import type { {{importerComponentType.root}} as Type } from '{{importerComponentType.source}}';
+
+type Rename<T, R extends { [K in keyof R]: K extends keyof T ? PropertyKey : "Error: key not in T" }> = { [P in keyof T as P extends keyof R ? R[P] : P]: T[P] }
+
+type Renamed = Rename<{{importerComponentType.variable}}, { 
+  {{#each classEvents}}
+  {{key.name}}: '{{converted}}',
+  {{/each}}
+}>
+
+export const {{componentClassNamePrune}} = /*@__PURE__*/ proxy<{{componentInterfaceName}}, Renamed>(
+  '{{componentTag}}', 
+  [{{#each classProperties}}'{{key.name}}', {{/each}}], 
+  [{{#each classEvents}}'{{key.name}}', {{/each}}],
+);

package/compiler/plugins/customElementReact/templates/src/index.ts.hbs

@@ -0,0 +1 @@
+export * from './components';