@htmlplus/element 0.3.1 → 0.3.2

package/compiler/plugins/componentDependencyResolver.js

@@ -0,0 +1,40 @@
+import { visitor } from '../utils/index.js';
+export const componentDependencyResolver = () => {
+    const name = 'componentDependencyResolver';
+    const next = (context, global) => {
+        var _a, _b, _c, _d;
+        if (!context.dependenciesUnresolved) {
+            visitor(context.fileAST, {
+                JSXOpeningElement(path) {
+                    var _a, _b, _c;
+                    const name = path.node.name.name;
+                    if (!name.includes('-'))
+                        return;
+                    const find = (_a = context.dependenciesUnresolved) === null || _a === void 0 ? void 0 : _a.includes(name);
+                    if (find)
+                        return;
+                    (_b = context.dependenciesUnresolved) !== null && _b !== void 0 ? _b : (context.dependenciesUnresolved = []);
+                    (_c = context.dependenciesUnresolved) === null || _c === void 0 ? void 0 : _c.push(name);
+                }
+            });
+        }
+        for (const current of global.contexts) {
+            if (!((_a = current.dependenciesUnresolved) === null || _a === void 0 ? void 0 : _a.length))
+                continue;
+            const dependencies = global.contexts.filter((context) => { var _a; return (_a = current.dependenciesUnresolved) === null || _a === void 0 ? void 0 : _a.includes(context.componentTag); });
+            for (const dependency of dependencies) {
+                if ((_b = current.dependencies) === null || _b === void 0 ? void 0 : _b.some((item) => item.componentTag == dependency.componentTag))
+                    continue;
+                (_c = current.dependencies) !== null && _c !== void 0 ? _c : (current.dependencies = []);
+                current.dependencies.push(dependency);
+                current.dependenciesUnresolved = (_d = current.dependenciesUnresolved) === null || _d === void 0 ? void 0 : _d.filter((current) => current != dependency.componentTag);
+                // TODO
+                // current.fileAST!.program.body.unshift(t.importDeclaration([], t.stringLiteral(dependency.filePath!)));
+            }
+        }
+    };
+    return {
+        name,
+        next
+    };
+};

package/compiler/plugins/customElement.d.ts

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

package/compiler/plugins/customElement.js

@@ -0,0 +1,138 @@
+import t from '@babel/types';
+import * as CONSTANTS from '../../constants/index.js';
+import { print, visitor } from '../utils/index.js';
+export const customElement = () => {
+    const name = 'customElement';
+    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')));
+        // jsx to uhtml syntax
+        visitor(context.fileAST, {
+            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.identifier('html`' + print(path.node) + '`'));
+                        return;
+                    }
+                }
+            },
+            JSXFragment: {
+                exit(path) {
+                    path.replaceWith(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
+        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) => {
+                        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(context.fileAST);
+    };
+    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;
+    dist: 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,125 @@
+import { __dirname, isDirectoryEmpty, renderTemplate } from '../../utils/index.js';
+const defaults = {
+    compact: false,
+    dist: '',
+    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.dist);
+        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.dist, 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 });
+                });
+                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.dist, config)(state);
+            }
+        }
+        if (isEmpty) {
+            const patterns = [
+                'templates/**',
+                '!templates/src/components/*fileName*.ts.hbs',
+                '!templates/src/components/*fileName*.compact.ts.hbs'
+            ];
+            renderTemplate(patterns, options.dist, config)(globalNew);
+        }
+        if (!isEmpty) {
+            const patterns = ['templates/src/proxy*', 'templates/src/components/index*'];
+            renderTemplate(patterns, options.dist, 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 { {{componentClassName}} } from './{{fileName}}';
+{{/each}}
+
+const All = /*@__PURE__*/ Object.assign({{root.componentClassName}}, {
+  {{#each filterd}}
+  {{componentClassNameInCategory}}: {{componentClassName}},
+  {{/each}}
+});
+
+export { All as {{root.componentClassName}} }

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 {{componentClassName}} = /*@__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';