@htmlplus/element 0.3.0 → 0.3.1

package/dist/compiler/plugins/componentDependencyResolver.js

@@ -1,40 +0,0 @@
-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/dist/compiler/plugins/customElement.d.ts

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

package/dist/compiler/plugins/customElement.js

@@ -1,138 +0,0 @@
-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/dist/compiler/plugins/customElementReact/customElementReact.d.ts

@@ -1,12 +0,0 @@
-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/dist/compiler/plugins/customElementReact/customElementReact.js

@@ -1,125 +0,0 @@
-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/dist/compiler/plugins/customElementReact/index.d.ts

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

package/dist/compiler/plugins/customElementReact/index.js

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

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

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

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

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

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

@@ -1,37 +0,0 @@
-{  
-  "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/dist/compiler/plugins/customElementReact/templates/rollup.config.js.hbs

@@ -1,21 +0,0 @@
-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/dist/compiler/plugins/customElementReact/templates/src/components/index.ts.hbs

@@ -1,17 +0,0 @@
-/**************************************************
- * 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/dist/compiler/plugins/customElementReact/templates/src/components/{{fileName}}.compact.ts.hbs

@@ -1,18 +0,0 @@
-/* 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/dist/compiler/plugins/customElementReact/templates/src/components/{{fileName}}.ts.hbs

@@ -1,26 +0,0 @@
-/* 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/dist/compiler/plugins/customElementReact/templates/src/index.ts.hbs

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