@htmlplus/element 0.1.5 → 0.1.6

package/dist/compiler/plugins/attach.js

@@ -64,24 +64,19 @@ export const attach = (options) => {
                                 ]))
                             }))
                         ]),
-                        t.tsInterfaceDeclaration(t.identifier(context.componentClassName), null, [], t.tsInterfaceBody([
-                            ...context.classProperties.map((property) => Object.assign(t.tSPropertySignature(property.key, property.typeAnnotation), {
-                                optional: property.optional,
-                                leadingComments: property.leadingComments
-                            }))
-                        ])),
                         t.tsInterfaceDeclaration(t.identifier('HTMLElementTagNameMap'), null, [], t.tsInterfaceBody([
-                            t.tSPropertySignature(t.stringLiteral(context.componentTag), t.tSTypeAnnotation(t.tSIntersectionType([t.tSTypeReference(t.identifier(context.componentClassName))])))
-                        ])),
-                        t.exportNamedDeclaration(t.tSModuleDeclaration(t.identifier('JSX'), t.tsModuleBlock([
-                            t.tsInterfaceDeclaration(t.identifier('IntrinsicElements'), undefined, undefined, t.tsInterfaceBody([
-                                t.tsPropertySignature(t.stringLiteral(context.componentTag), t.tsTypeAnnotation(t.tsTypeReference(t.identifier(context.componentClassName))))
-                            ]))
-                        ])))
+                            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(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
+                        }))
+                    ]))));
                 }
             });
         }

package/dist/compiler/plugins/react.proxy/react.proxy.d.ts

@@ -1,9 +1,11 @@
 export interface ReactProxyOptions {
+    compact?: boolean;
     dist: string;
-    corePackageName: string;
-    categorize?: boolean;
+    eventName?: (eventName: string) => string;
+    importerComponent?: (context: any) => string;
+    importerComponentType?: (context: any) => string;
 }
 export declare const reactProxy: (options: ReactProxyOptions) => {
     name: string;
-    finish: (global: any) => Promise<void>;
+    finish: (global: any) => void;
 };

package/dist/compiler/plugins/react.proxy/react.proxy.js

@@ -1,58 +1,117 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 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 reactProxy = (options) => {
     const name = 'react-proxy';
-    const finish = (global) => __awaiter(void 0, void 0, void 0, function* () {
+    const finish = (global) => {
+        options = Object.assign(Object.assign({}, defaults), options);
+        global = Object.assign(Object.assign({}, global), { options });
         const config = { cwd: __dirname(import.meta.url) };
-        const component = 'templates/src/components/*fileName*';
-        global = Object.assign({}, global, { options });
+        const isEmpty = isDirectoryEmpty(options.dist);
         const skip = [];
         const getKey = (component) => component.componentClassName;
-        global.groups = Object.values(global.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 root = group.components.find((component) => getKey(component) == group.key);
-            const all = group.components
-                .map((component) => (Object.assign(Object.assign({}, component), { componentClassNameInCategory: getKey(component).replace(group.key, '') })))
-                .reverse();
-            const filterd = all.filter((component) => getKey(component) != group.key);
-            return {
-                single: !filterd.length,
-                root,
-                all,
-                filterd
+        for (const key in global.contexts) {
+            const context = global.contexts[key];
+            const parse = (input) => {
+                const [source, key] = input.split('#');
+                const [root, ...sub] = key.split('.');
+                const variable = ['Type', ...sub].join('.');
+                return {
+                    source,
+                    variable,
+                    root
+                };
             };
-        })
-            .sort((a, b) => (getKey(a.root) < getKey(b.root) ? -1 : 0));
-        if (yield isDirectoryEmpty(options.dist)) {
-            renderTemplate(['templates/**', `!${component}`], options.dist, config)(global);
+            const classEvents = context.classEvents.map((classEvent) => {
+                return Object.assign(Object.assign({}, classEvent), { converted: options.eventName(classEvent.key.name) });
+            });
+            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);
         }
-        else {
-            renderTemplate(['templates/src/proxy*', 'templates/src/components/index*'], options.dist, config)(global);
+        if (options.compact) {
+            global.groups = Object.values(global.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 global.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);
+            }
         }
-        for (const group of global.groups) {
-            renderTemplate(component, options.dist, config)(Object.assign({ options, fileName: group.root.fileName }, group));
+        if (isEmpty) {
+            const patterns = [
+                'templates/**',
+                '!templates/src/components/*fileName*.ts.hbs',
+                '!templates/src/components/*fileName*.compact.ts.hbs'
+            ];
+            renderTemplate(patterns, options.dist, config)(global);
         }
-    });
+        if (!isEmpty) {
+            const patterns = ['templates/src/proxy*', 'templates/src/components/index*'];
+            renderTemplate(patterns, options.dist, config)(global);
+        }
+    };
     return {
         name,
         finish

package/dist/compiler/plugins/react.proxy/templates/package.json.hbs

@@ -1,5 +1,5 @@
 {  
-  "name": "your-react-package-name",
+  "name": "YOUR_REACT_PACKAGE_NAME",
   "version": "0.0.0",
   "type": "module",
   "description": "React output target for your custom element.",
@@ -14,13 +14,14 @@
     "dist"
   ],
   "dependencies": {
-    "{{options.corePackageName}}": "latest",
+    "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",

package/dist/compiler/plugins/react.proxy/templates/rollup.config.js.hbs

@@ -1,20 +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: 'src/index.ts',
+  input: glob.sync('src/**/*.ts'),
   output: [
     {
-      dir: 'dist/components',
-      format: 'esm'
-    }
+      dir: 'dist',
+      format: 'esm',
+    },
   ],
   plugins: [
     peerDepsExternal(), 
     resolve(), 
     commonjs(), 
-    typescript()
-  ]
+    typescript(),
+  ],
 };

package/dist/compiler/plugins/react.proxy/templates/src/components/index.ts.hbs

@@ -1,3 +1,13 @@
+{{#if options.compact}}
 {{#each groups}}
+{{#if single}}
 export * from './{{root.fileName}}';
-{{/each}}
+{{else}}
+export * from './{{root.fileName}}.compact';
+{{/if}}
+{{/each}}
+{{else}}
+{{#each contexts}}
+export * from './{{fileName}}';
+{{/each}}
+{{/if}}

package/dist/compiler/plugins/react.proxy/templates/src/components/{{fileName}}.compact.ts.hbs

@@ -0,0 +1,15 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated */
+
+{{#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/react.proxy/templates/src/components/{{fileName}}.ts.hbs

@@ -3,36 +3,21 @@
 /* auto-generated */
 
 import { proxy } from '../proxy';
-import type { JSX } from '{{options.corePackageName}}';
 
-{{#each all}}
-import {{componentClassName}} from '{{../options.corePackageName}}/{{fileName}}';
-{{/each}}
+{{!-- import { {{importerComponent.root}} as Component } from '{{importerComponent.source}}'; --}}
+import '{{importerComponent.source}}';
+import type { {{importerComponentType.root}} as Type } from '{{importerComponentType.source}}';
 
-{{#each all}}
-const {{componentClassName}} = /*@__PURE__*/ proxy<{{componentInterfaceName}}, JSX.{{componentClassName}}>(
-  '{{componentTag}}', 
-  [
-    {{#each classProperties}}
-    '{{key.name}}',
-    {{/each}}
-  ], 
-  [
-    {{#each classEvents}}
-    '{{key.name}}',
-    {{/each}}
-  ],
-);
+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] }
 
-{{/each}}
-{{#if single}}
-export { {{root.componentClassName}} }
-{{else}}
-const All = /*@__PURE__*/ Object.assign({{root.componentClassName}}, {
-  {{#each filterd}}
-  {{componentClassNameInCategory}}: {{componentClassName}},
+type Renamed = Rename<{{importerComponentType.variable}}, { 
+  {{#each classEvents}}
+  {{key.name}}: '{{converted}}',
   {{/each}}
-});
+}>
 
-export { All as {{root.componentClassName}} }
-{{/if}}
+export const {{componentClassName}} = /*@__PURE__*/ proxy<{{componentInterfaceName}}, Renamed>(
+  '{{componentTag}}', 
+  [{{#each classProperties}}'{{key.name}}', {{/each}}], 
+  [{{#each classEvents}}'{{key.name}}', {{/each}}],
+);

package/dist/compiler/utils/is-directory-empty.d.ts

@@ -1 +1 @@
-export declare const isDirectoryEmpty: (directory: string) => Promise<boolean>;
+export declare const isDirectoryEmpty: (directory: string) => boolean;

package/dist/compiler/utils/is-directory-empty.js

@@ -1,19 +1,10 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import fs from 'fs';
-export const isDirectoryEmpty = (directory) => __awaiter(void 0, void 0, void 0, function* () {
+export const isDirectoryEmpty = (directory) => {
     try {
-        const files = yield fs.readdirSync(directory);
+        const files = fs.readdirSync(directory);
         return !files.length;
     }
     catch (_a) {
         return true;
     }
-});
+};

package/dist/runtime/index.d.ts

@@ -1 +1 @@
-export { html, render } from 'uhtml';
+export { html } from 'uhtml';

package/dist/runtime/index.js

@@ -1 +1,2 @@
-export { html, render } from 'uhtml';
+export { html } from 'uhtml';
+// export const html = (...args: any[]): any => {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "license": "MIT",
   "author": "Masood Abdolian <m.abdolian@gmail.com>",
   "description": "Compiler of HTMLPlus",