@htmlplus/element 0.1.3 → 0.1.6

package/dist/client/decorators/element.js

@@ -93,8 +93,7 @@ export function Element(tag) {
                 this.plus[name] = parseValue(next, type);
                 if (!this.plus[CONSTANTS.TOKEN_API][CONSTANTS.TOKEN_API_READY])
                     return;
-                this.plus[CONSTANTS.TOKEN_API][CONSTANTS.TOKEN_API_REQUEST]()
-                    .catch((error) => {
+                this.plus[CONSTANTS.TOKEN_API][CONSTANTS.TOKEN_API_REQUEST]().catch((error) => {
                     throw error;
                 });
             }

package/dist/client/decorators/event.d.ts

@@ -1,3 +1,21 @@
-import { EventOptions, PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types/index.js';
 export declare type EventEmitter<T = any> = (data?: T) => CustomEvent<T>;
+export interface EventOptions {
+    /**
+     * A string custom event name to override the default.
+     */
+    name?: string;
+    /**
+     * A Boolean indicating whether the event bubbles up through the DOM or not. default is `false`.
+     */
+    bubbles?: boolean;
+    /**
+     * A Boolean indicating whether the event is cancelable. default is `false`.
+     */
+    cancelable?: boolean;
+    /**
+     * A Boolean value indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM. The default is false.
+     */
+    composed?: boolean;
+}
 export declare function Event<T = any>(options?: EventOptions): (target: PlusElement, propertyKey: PropertyKey) => void;

package/dist/client/decorators/index.js

@@ -3,7 +3,6 @@ export * from './bind.js';
 export * from './element.js';
 export * from './event.js';
 export * from './listen.js';
-// export * from './listen-options.js';
 export * from './method.js';
 export * from './property.js';
 export * from './state.js';

package/dist/client/decorators/listen.d.ts

@@ -1,4 +1,11 @@
-import { ListenOptions, PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types/index.js';
+export interface ListenOptions {
+    target?: 'host' | 'body' | 'document' | 'window';
+    once?: boolean;
+    passive?: boolean;
+    signal?: AbortSignal;
+    capture?: boolean;
+}
 export declare function Listen(name: string, options?: ListenOptions): (target: PlusElement, propertyKey: PropertyKey, descriptor: PropertyDescriptor) => {
     configurable: boolean;
     get(): any;

package/dist/client/decorators/property.d.ts

@@ -1,2 +1,12 @@
-import { PlusElement, PropertyOptions } from '../../types/index.js';
+import { PlusElement } from '../../types/index.js';
+export interface PropertyOptions {
+    /**
+     * TODO
+     */
+    attribute?: boolean | string;
+    /**
+     * Whether property value is reflected back to the associated attribute. default is `false`.
+     */
+    reflect?: boolean;
+}
 export declare function Property(options?: PropertyOptions): (target: PlusElement, propertyKey: PropertyKey) => void;

package/dist/client/helpers/direction.d.ts

@@ -1,2 +1,2 @@
-import { Direction } from '../../types/index.js';
+export declare type Direction = 'ltr' | 'rtl';
 export declare const direction: (target: any) => Direction;

package/dist/client/helpers/slots.js

@@ -1,5 +1,5 @@
-import { queryAll } from './query-all.js';
 import { defineProperty } from '../utils/index.js';
+import { queryAll } from './query-all.js';
 export const slots = (target) => {
     var _a;
     const result = {};

package/dist/client/utils/api.d.ts

@@ -1,2 +1,6 @@
-import { Api } from '../../types/index.js';
+export interface Api {
+    ready: boolean;
+    host(): HTMLElement;
+    request(states?: any): Promise<boolean>;
+}
 export declare const api: (target: any) => Api;

package/dist/client/utils/host.js

@@ -1,2 +1,2 @@
-import { api } from '../utils/index.js';
+import { api } from './api.js';
 export const host = (target) => api(target).host();

package/dist/compiler/compiler.js

@@ -12,7 +12,7 @@ const log = (namespace, message) => {
     logUpdate(`${new Date().toLocaleTimeString()} [@htmlplus/element]${namespace ? `[${namespace}]` : ''} ${message}`);
 };
 export default (...plugins) => {
-    const global = {
+    let global = {
         contexts: {}
     };
     const start = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -20,7 +20,7 @@ export default (...plugins) => {
         for (const plugin of plugins) {
             if (!plugin.start)
                 continue;
-            yield plugin.start(global);
+            global = (yield plugin.start(global)) || global;
             log(plugin.name, 'Started successfully.');
         }
     });
@@ -43,7 +43,7 @@ export default (...plugins) => {
         for (const plugin of plugins) {
             if (!plugin.finish)
                 continue;
-            yield plugin.finish(global);
+            global = (yield plugin.finish(global)) || global;
             log(plugin.name, 'Finished successfully.');
         }
         log(undefined, 'Finished.');

package/dist/compiler/index.d.ts

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

package/dist/compiler/index.js

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

package/dist/compiler/plugins/attach.js

@@ -1,5 +1,4 @@
 import t from '@babel/types';
-import { pascalCase } from 'change-case';
 import * as CONSTANTS from '../../configs/constants.js';
 import { visitor } from '../utils/index.js';
 const defaults = {
@@ -48,43 +47,36 @@ export const attach = (options) => {
             ]), undefined, undefined, undefined, true));
         }
         if (options.typings) {
-            const className = pascalCase(context.componentTag.split('-').slice(1).join('-'));
-            const elementName = `HTML${className}Element`;
             visitor(context.fileAST, {
                 Program(path) {
                     path.node.body.push(Object.assign(t.tsModuleDeclaration(t.identifier('global'), t.tsModuleBlock([
-                        t.tsInterfaceDeclaration(t.identifier(elementName), null, [], t.tsInterfaceBody([
+                        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(elementName), {
+                            t.variableDeclarator(Object.assign(t.identifier(context.componentInterfaceName), {
                                 typeAnnotation: t.tSTypeAnnotation(t.tSTypeLiteral([
-                                    t.tSPropertySignature(t.identifier('prototype'), t.tsTypeAnnotation(t.tSTypeReference(t.identifier(elementName)))),
-                                    t.tSConstructSignatureDeclaration(null, [], t.tSTypeAnnotation(t.tSTypeReference(t.identifier(elementName))))
+                                    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(className), 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(className))])))
-                        ])),
-                        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(className))))
-                            ]))
-                        ])))
+                            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/docs.js

@@ -1,5 +1,6 @@
 import { capitalCase, paramCase } from 'change-case';
 import fs from 'fs';
+// import glob from 'glob';
 import path from 'path';
 import { getInitializer, getTags, getType, printType } from '../utils/index.js';
 export const docs = (options) => {

package/dist/compiler/plugins/extract.js

@@ -1,5 +1,5 @@
 import * as t from '@babel/types';
-import { paramCase } from 'change-case';
+import { pascalCase, paramCase } from 'change-case';
 import fs from 'fs';
 import path from 'path';
 import * as CONSTANTS from '../../configs/constants.js';
@@ -43,7 +43,19 @@ export const extract = (options) => {
         context.fileExtension = path.extname(context.filePath);
         context.fileName = path.basename(context.filePath, context.fileExtension);
         context.className = (_b = (_a = context.class) === null || _a === void 0 ? void 0 : _a.id) === null || _b === void 0 ? void 0 : _b.name;
-        context.componentKey = paramCase(context.className);
+        // TODO
+        // context.componentKey = paramCase(context.className);
+        context.componentClassName = pascalCase(context.componentTag.split('-').slice(1).join('-'));
+        context.componentInterfaceName = `HTML${context.componentClassName}Element`;
+        // TODO
+        // const componentClassName           = "DialogBody";              [OK]
+        // const componentInterfaceName       = "HTMLDialogBodyElement";   [OK]
+        // const componentTag                 = "plus-dialog-body";        [OK]
+        // const componentClassNameInCategory = "Body";                    [RAW]
+        // const componentKey                 = "dialog-body-1";           [RAW]
+        // const fileName                     = "dialogBodyNew";           [OK]
+        // const className                    = "DialogBody1";             [OK]
+        // const category                     = "Dialog";                  [RAW]
         (() => {
             const stylePath = path.join(context.directoryPath, `${context.fileName}.scss`);
             if (!fs.existsSync(stylePath))

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

@@ -1,3 +1,4 @@
+export * from './react.proxy/index.js';
 export * from './attach.js';
 export * from './docs.js';
 export * from './extract.js';

package/dist/compiler/plugins/index.js

@@ -1,3 +1,4 @@
+export * from './react.proxy/index.js';
 export * from './attach.js';
 export * from './docs.js';
 export * from './extract.js';

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

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

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

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

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

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

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

@@ -0,0 +1,119 @@
+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) => {
+        options = Object.assign(Object.assign({}, defaults), options);
+        global = Object.assign(Object.assign({}, global), { options });
+        const config = { cwd: __dirname(import.meta.url) };
+        const isEmpty = isDirectoryEmpty(options.dist);
+        const skip = [];
+        const getKey = (component) => component.componentClassName;
+        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
+                };
+            };
+            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);
+        }
+        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);
+            }
+        }
+        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/README.md.hbs

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

package/dist/compiler/plugins/react.proxy/templates/_.gitignore.hbs

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

package/dist/compiler/plugins/react.proxy/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/dist/compiler/plugins/react.proxy/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/dist/compiler/plugins/react.proxy/templates/src/components/index.ts.hbs

@@ -0,0 +1,13 @@
+{{#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/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

@@ -0,0 +1,23 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated */
+
+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/react.proxy/templates/src/index.ts.hbs

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

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

@@ -0,0 +1,277 @@
+/**
+ * version 0.0.9
+ */
+import { camelCase, paramCase, pascalCase } from 'change-case';
+import React from 'react';
+
+type EventHandlerType = (event: Event) => any;
+
+type FinalPropsType<ElementType> = Omit<PropsType<ElementType>, 'forwardedRef'>;
+
+type Mutable<T> = { -readonly [P in keyof T]-?: T[P] };
+
+interface ExtraType {
+  props?: Array<string>;
+  events?: Array<string>;
+}
+
+interface PropsType<ElementType> extends React.HTMLAttributes<ElementType> {
+  forwardedRef: React.RefObject<ElementType>;
+  ref?: React.Ref<any>;
+}
+
+export interface StyleReactProps {
+  class?: string;
+  className?: string;
+  style?: {
+    [key: string]: any;
+  };
+}
+
+const arrayToMap = (array: string[] | DOMTokenList) => {
+  const map = new Map<string, string>();
+
+  (array as string[]).forEach((s: string) => map.set(s, s));
+
+  return map;
+};
+
+const getCustomEvent = (name: string, events: Array<string>) => {
+  // TODO
+  name = camelCase(name.slice(3));
+
+  const event = events.find((event) => event.endsWith(name));
+
+  if (!event) return;
+
+  return event;
+};
+
+const forwardRef = <ElementType, PropType>(ReactComponent: any) => {
+  const forwardRef = (
+    props: PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & StyleReactProps,
+    ref: React.Ref<ElementType>
+  ) => {
+    const { children, ...remainedProps } = props;
+
+    const newProps = {
+      ...remainedProps,
+      forwardedRef: ref
+    };
+
+    return React.createElement(ReactComponent, newProps, children);
+  };
+
+  forwardRef.displayName = ReactComponent.displayName;
+
+  return React.forwardRef(forwardRef);
+};
+
+const isEvent = (name: string) => {
+  return name.indexOf('on') === 0 && name[2] === name[2].toUpperCase();
+};
+
+const isPrimitive = (value: any) => {
+  const type = typeof value;
+
+  const match = type.match(/boolean|string|number/);
+
+  return match;
+};
+
+const getProps = <ElementType>(ref: React.Ref<ElementType>, props: PropsType<ElementType>, extra: ExtraType) => {
+  const { forwardedRef } = props;
+
+  const result: FinalPropsType<ElementType> = {
+    ref: mergeRefs(forwardedRef, ref)
+  };
+
+  Object.keys(props).forEach((name) => {
+    if (name === 'children' || name === 'className' || name === 'forwardedRef' || name === 'ref') return;
+
+    const value = props[name];
+
+    if (isEvent(name)) {
+      if (typeof document === 'undefined') return;
+
+      const event = getCustomEvent(name, extra.events);
+
+      if (event) return;
+
+      result[name] = value;
+    } else if (extra.props.includes(name)) {
+      if (!isPrimitive(value)) return;
+
+      result[paramCase(name)] = value;
+    } else {
+      result[name] = value;
+    }
+  });
+
+  return result;
+};
+
+const mergeRefs =
+  <ElementType>(...refs: React.Ref<ElementType>[]) =>
+  (value: ElementType) => {
+    return refs.forEach((ref) => {
+      if (typeof ref === 'function') return ref(value);
+
+      if (ref == null) return;
+
+      (ref as Mutable<React.RefObject<ElementType>>).current = value;
+    });
+  };
+
+const setClass = <ElementType>(element: ElementType, props: PropsType<ElementType>) => {
+  const classes: string[] = [];
+
+  const current = arrayToMap((element as any).classList);
+
+  const prev: string = element['$class'];
+  const next: string = props.className || (props as any).class;
+
+  const prevClass = arrayToMap(prev ? prev.split(' ') : []);
+  const nextClass = arrayToMap(next ? next.split(' ') : []);
+
+  current.forEach((key) => {
+    if (nextClass.has(key)) {
+      classes.push(key);
+
+      nextClass.delete(key);
+    } else if (!prevClass.has(key)) {
+      classes.push(key);
+    }
+  });
+
+  nextClass.forEach((key) => classes.push(key));
+
+  const className = classes.join(' ');
+
+  (element as any).className = className;
+
+  element['$class'] = className;
+};
+
+const setEvent = (element: Element, name: string, handler: EventHandlerType) => {
+  const events = element['$events'] || (element['$events'] = {});
+
+  const previous = events[name];
+
+  previous && element.removeEventListener(name, previous);
+
+  function callback(event: Event) {
+    handler && handler.call(this, event);
+  }
+
+  element.addEventListener(name, (events[name] = callback));
+};
+
+const setProps = <ElementType>(element: ElementType, props: PropsType<ElementType>, extra: ExtraType) => {
+  if (!(element instanceof Element)) return;
+
+  setClass<ElementType>(element, props);
+
+  Object.keys(props).forEach((name) => {
+    if (
+      name === 'children' ||
+      name === 'class' ||
+      name === 'className' ||
+      name === 'forwardedRef' ||
+      name === 'ref' ||
+      name === 'style'
+    )
+      return;
+
+    const value = props[name];
+
+    if (isEvent(name)) {
+      if (typeof document === 'undefined') return;
+
+      const event = getCustomEvent(name, extra.events);
+
+      if (!event) return;
+
+      setEvent(element, event, value);
+    } else if (extra.props.includes(name)) {
+      if (isPrimitive(value)) {
+        element.setAttribute(paramCase(name), value);
+      } else {
+        element[name] = value;
+      }
+    } else {
+      element[name] = value;
+    }
+  });
+};
+
+export const proxy = <ElementType, PropType>(
+  tagName: string,
+  props: Array<string> = [],
+  events: Array<string> = []
+) => {
+  const extra: ExtraType = {
+    props,
+    events
+  };
+
+  const ReactComponent = class extends React.Component<PropsType<ElementType>> {
+    element!: ElementType;
+
+    setElement = (element: ElementType) => {
+      this.element = element;
+    };
+
+    constructor(props: PropsType<ElementType>) {
+      super(props);
+    }
+
+    componentDidMount() {
+      this.componentDidUpdate(/*this.props*/);
+    }
+
+    componentDidUpdate(/*prevProps: InternalProps<ElementType>*/) {
+      setProps<ElementType>(this.element as any, this.props, extra);
+    }
+
+    componentWillUnmount() {
+      if (!this.element) return;
+
+      const events = this.element['$events'] || {};
+
+      Object.keys(events).forEach((name) => {
+        const handler = events[name];
+
+        (this.element as any).removeEventListener(name, handler);
+      });
+
+      delete this.element['$events'];
+    }
+
+    render() {
+      const { children } = this.props;
+
+      const props = getProps<ElementType>(this.setElement, this.props, extra);
+
+      return React.createElement(tagName, props, children);
+    }
+  };
+
+  // TODO
+  // const ReactComponentNew = (props: InternalPropsType<ElementType>) => {
+
+  //   const { children } = props;
+
+  //   const ref = useRef(null);
+
+  //   const newProps: FinalPropsType<ElementType> = getProps(ref, props, events);
+
+  //   useEffect(() => setProps(ref.current, props, events));
+
+  //   return React.createElement(tagName, newProps, children);
+  // }
+
+  ReactComponent['displayName'] = pascalCase(tagName);
+
+  return forwardRef<ElementType, PropType>(ReactComponent);
+};

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

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "declaration": true,
+    "declarationDir": "dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": ["es6", "dom", "es2016", "es2017"],
+    "sourceMap": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  },
+  "include": ["src"],
+  "exclude": ["dist", "node_modules"]
+}

package/dist/compiler/utils/__dirname.d.ts

@@ -0,0 +1 @@
+export declare const __dirname: (url: string | URL) => string;

package/dist/compiler/utils/__dirname.js

@@ -0,0 +1,5 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+export const __dirname = (url) => {
+    return dirname(fileURLToPath(url));
+};

package/dist/compiler/utils/index.d.ts

@@ -1,7 +1,10 @@
+export * from './__dirname.js';
 export * from './get-initializer.js';
 export * from './get-tags.js';
 export * from './get-type.js';
 export * from './has-decorator.js';
+export * from './is-directory-empty.js';
 export * from './print-type.js';
 export * from './print.js';
+export * from './render-template.js';
 export * from './visitor.js';

package/dist/compiler/utils/index.js

@@ -1,7 +1,10 @@
+export * from './__dirname.js';
 export * from './get-initializer.js';
 export * from './get-tags.js';
 export * from './get-type.js';
 export * from './has-decorator.js';
+export * from './is-directory-empty.js';
 export * from './print-type.js';
 export * from './print.js';
+export * from './render-template.js';
 export * from './visitor.js';

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

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

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

@@ -0,0 +1,10 @@
+import fs from 'fs';
+export const isDirectoryEmpty = (directory) => {
+    try {
+        const files = fs.readdirSync(directory);
+        return !files.length;
+    }
+    catch (_a) {
+        return true;
+    }
+};

package/dist/compiler/utils/render-template.d.ts

@@ -0,0 +1 @@
+export declare const renderTemplate: (source: string | Array<string>, destination: string, options?: any) => (context: any) => void;

package/dist/compiler/utils/render-template.js

@@ -0,0 +1,25 @@
+import glob from 'fast-glob';
+import fs from 'fs';
+import handlebars from 'handlebars';
+import path from 'path';
+export const renderTemplate = (source, destination, options) => (context) => {
+    const files = glob.sync(source, options);
+    for (const file of files) {
+        const from = path.resolve((options === null || options === void 0 ? void 0 : options.cwd) || '', file);
+        const to = path.join(destination, path
+            .normalize(file)
+            .split(path.sep)
+            .slice(1)
+            .map((section) => handlebars.compile(section)(context))
+            .join(path.sep)
+            .replace('_.', '.')
+            .replace('.hbs', ''));
+        const directory = path.dirname(to);
+        const raw = fs.readFileSync(from, 'utf8');
+        const template = handlebars.compile(raw)(context);
+        if (!fs.existsSync(directory)) {
+            fs.mkdirSync(directory, { recursive: true });
+        }
+        fs.writeFileSync(to, template, 'utf8');
+    }
+};

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/dist/types/context.d.ts

@@ -1,6 +1,8 @@
 import { ClassBody, ClassDeclaration, ClassMethod, ClassProperty, File } from '@babel/types';
 export interface Context {
     script?: string;
+    componentClassName?: string;
+    componentInterfaceName?: string;
     componentKey?: string;
     componentTag?: string;
     directoryName?: string;

package/dist/types/index.d.ts

@@ -1,8 +1,3 @@
-export * from './api.js';
 export * from './context.js';
-export * from './direction.js';
-export * from './event-options.js';
-export * from './listen-options.js';
 export * from './plugin.js';
 export * from './plus-element.js';
-export * from './property-options.js';

package/dist/types/index.js

@@ -1,8 +1,3 @@
-export * from './api.js';
 export * from './context.js';
-export * from './direction.js';
-export * from './event-options.js';
-export * from './listen-options.js';
 export * from './plugin.js';
 export * from './plus-element.js';
-export * from './property-options.js';

package/dist/types/plugin.d.ts

@@ -1,7 +1,8 @@
 import { Context } from './context.js';
+export declare type Return<T> = void | T | Promise<T>;
 export declare type Plugin = {
     name: string;
-    start?: (global: any) => void;
-    next?: (context: Context, global: any) => void | Context | Promise<Context>;
-    finish?: (global: any) => void;
+    start?: (global: any) => Return<any>;
+    next?: (context: Context, global: any) => Return<Context>;
+    finish?: (global: any) => Return<any>;
 };

package/package.json

@@ -1,16 +1,19 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.1.3",
+  "version": "0.1.6",
   "license": "MIT",
   "author": "Masood Abdolian <m.abdolian@gmail.com>",
   "description": "Compiler of HTMLPlus",
   "type": "module",
   "scripts": {
-    "build": "npm run clean && tsc",
+    "prebuild": "npm run clean",
+    "build": "tsc",
     "build:watch": "tsc -w",
+    "postbuild": "node scripts/build.post.js",
     "clean": "rimraf dist",
-    "prettier": "prettier --write .",
-    "start": "node src/dev/start.js"
+    "format": "prettier --write .",
+    "dev:start": "node src/dev/start.js",
+    "dev:build": "node src/dev/build.js"
   },
   "exports": {
     ".": {
@@ -78,6 +81,8 @@
     "@babel/types": "^7.16.0",
     "@types/node": "^16.11.11",
     "change-case": "^4.1.2",
+    "fast-glob": "^3.2.11",
+    "handlebars": "^4.7.7",
     "log-update": "^5.0.0",
     "sass": "^1.43.4",
     "ts-node": "^10.4.0",
@@ -86,6 +91,7 @@
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^3.1.1",
+    "cpy": "^9.0.0",
     "prettier": "^2.5.0",
     "rimraf": "^3.0.2",
     "vite": "^2.7.10"

package/dist/client/decorators/listen-options.d.ts

@@ -1,2 +0,0 @@
-import { ListenOptions as ListenOptionsBase } from '../../types/index.js';
-export declare function ListenOptions(options?: Omit<ListenOptionsBase, 'target'>): void;

package/dist/client/decorators/listen-options.js

@@ -1,2 +0,0 @@
-// TODO
-export function ListenOptions(options = {}) { }

package/dist/types/api.d.ts

@@ -1,5 +0,0 @@
-export interface Api {
-    ready: boolean;
-    host(): HTMLElement;
-    request(states?: any): Promise<boolean>;
-}

package/dist/types/api.js

@@ -1 +0,0 @@
-export {};

package/dist/types/direction.d.ts

@@ -1 +0,0 @@
-export declare type Direction = 'ltr' | 'rtl';

package/dist/types/direction.js

@@ -1 +0,0 @@
-export {};

package/dist/types/event-options.d.ts

@@ -1,18 +0,0 @@
-export interface EventOptions {
-    /**
-     * A string custom event name to override the default.
-     */
-    name?: string;
-    /**
-     * A Boolean indicating whether the event bubbles up through the DOM or not. default is `false`.
-     */
-    bubbles?: boolean;
-    /**
-     * A Boolean indicating whether the event is cancelable. default is `false`.
-     */
-    cancelable?: boolean;
-    /**
-     * A Boolean value indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM. The default is false.
-     */
-    composed?: boolean;
-}

package/dist/types/event-options.js

@@ -1 +0,0 @@
-export {};

package/dist/types/listen-options.d.ts

@@ -1,7 +0,0 @@
-export interface ListenOptions {
-    target?: 'host' | 'body' | 'document' | 'window';
-    once?: boolean;
-    passive?: boolean;
-    signal?: AbortSignal;
-    capture?: boolean;
-}

package/dist/types/listen-options.js

@@ -1 +0,0 @@
-export {};

package/dist/types/property-options.d.ts

@@ -1,10 +0,0 @@
-export interface PropertyOptions {
-    /**
-     * TODO
-     */
-    attribute?: boolean | string;
-    /**
-     * Whether property value is reflected back to the associated attribute. default is `false`.
-     */
-    reflect?: boolean;
-}

package/dist/types/property-options.js

@@ -1 +0,0 @@
-export {};