@htmlplus/element 0.1.2 → 0.1.5

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,37 +47,35 @@ 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([
+                        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(className))])))
+                            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(className))))
+                                t.tsPropertySignature(t.stringLiteral(context.componentTag), t.tsTypeAnnotation(t.tsTypeReference(t.identifier(context.componentClassName))))
                             ]))
                         ])))
                     ])), {

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,9 @@
+export interface ReactProxyOptions {
+    dist: string;
+    corePackageName: string;
+    categorize?: boolean;
+}
+export declare const reactProxy: (options: ReactProxyOptions) => {
+    name: string;
+    finish: (global: any) => Promise<void>;
+};

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

@@ -0,0 +1,60 @@
+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';
+export const reactProxy = (options) => {
+    const name = 'react-proxy';
+    const finish = (global) => __awaiter(void 0, void 0, void 0, function* () {
+        const config = { cwd: __dirname(import.meta.url) };
+        const component = 'templates/src/components/*fileName*';
+        global = Object.assign({}, global, { options });
+        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
+            };
+        })
+            .sort((a, b) => (getKey(a.root) < getKey(b.root) ? -1 : 0));
+        if (yield isDirectoryEmpty(options.dist)) {
+            renderTemplate(['templates/**', `!${component}`], options.dist, config)(global);
+        }
+        else {
+            renderTemplate(['templates/src/proxy*', 'templates/src/components/index*'], options.dist, config)(global);
+        }
+        for (const group of global.groups) {
+            renderTemplate(component, options.dist, config)(Object.assign({ options, fileName: group.root.fileName }, group));
+        }
+    });
+    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,36 @@
+{  
+  "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": {
+    "{{options.corePackageName}}": "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",
+    "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,20 @@
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import typescript from 'rollup-plugin-typescript2';
+
+export default {
+  input: 'src/index.ts',
+  output: [
+    {
+      dir: 'dist/components',
+      format: 'esm'
+    }
+  ],
+  plugins: [
+    peerDepsExternal(), 
+    resolve(), 
+    commonjs(), 
+    typescript()
+  ]
+};

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

@@ -0,0 +1,3 @@
+{{#each groups}}
+export * from './{{root.fileName}}';
+{{/each}}

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

@@ -0,0 +1,38 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated */
+
+import { proxy } from '../proxy';
+import type { JSX } from '{{options.corePackageName}}';
+
+{{#each all}}
+import {{componentClassName}} from '{{../options.corePackageName}}/{{fileName}}';
+{{/each}}
+
+{{#each all}}
+const {{componentClassName}} = /*@__PURE__*/ proxy<{{componentInterfaceName}}, JSX.{{componentClassName}}>(
+  '{{componentTag}}', 
+  [
+    {{#each classProperties}}
+    '{{key.name}}',
+    {{/each}}
+  ], 
+  [
+    {{#each classEvents}}
+    '{{key.name}}',
+    {{/each}}
+  ],
+);
+
+{{/each}}
+{{#if single}}
+export { {{root.componentClassName}} }
+{{else}}
+const All = /*@__PURE__*/ Object.assign({{root.componentClassName}}, {
+  {{#each filterd}}
+  {{componentClassNameInCategory}}: {{componentClassName}},
+  {{/each}}
+});
+
+export { All as {{root.componentClassName}} }
+{{/if}}

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) => Promise<boolean>;