@htmlplus/element 1.1.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "license": "MIT",
   "sideEffects": false,
   "author": "Masood Abdolian <m.abdolian@gmail.com>",

package/transformer/plugins/index.d.ts

@@ -1,6 +1,5 @@
 export * from './assets.js';
 export * from './copy.js';
-export * from './customElementReact/index.js';
 export * from './customElement.js';
 export * from './document.js';
 export * from './extract.js';

package/transformer/plugins/index.js

@@ -1,6 +1,5 @@
 export * from './assets.js';
 export * from './copy.js';
-export * from './customElementReact/index.js';
 export * from './customElement.js';
 export * from './document.js';
 export * from './extract.js';

package/transformer/plugins/customElementReact/customElementReact.d.ts

@@ -1,16 +0,0 @@
-import { TransformerPlugin, TransformerPluginContext } from '../../transformer.types';
-export declare const CUSTOM_ELEMENT_REACT_OPTIONS: Partial<CustomElementReactOptions>;
-export interface CustomElementReactOptions {
-    compact?: boolean;
-    destination: string;
-    eventName?: (eventName: string) => string;
-    importerElement: (context: TransformerPluginContext) => {
-        source: string;
-    };
-    importerElementType: (context: TransformerPluginContext) => {
-        source: string;
-        imported: string;
-        local: string;
-    };
-}
-export declare const customElementReact: (options: CustomElementReactOptions) => TransformerPlugin;

package/transformer/plugins/customElementReact/customElementReact.js

@@ -1,97 +0,0 @@
-import { pascalCase } from 'change-case';
-import { __dirname, isDirectoryEmpty, renderTemplate } from '../../utils/index.js';
-export const CUSTOM_ELEMENT_REACT_OPTIONS = {};
-export const customElementReact = (options) => {
-    const name = 'customElementReact';
-    options = Object.assign({}, CUSTOM_ELEMENT_REACT_OPTIONS, options);
-    const finish = (global) => {
-        // 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.destination);
-        const skip = [];
-        const getKey = (element) => element.className;
-        for (const key in globalNew.contexts) {
-            const context = globalNew.contexts[key];
-            const classEvents = context.classEvents.map((classEvent) => {
-                var _a, _b;
-                const from = 'on' + pascalCase(classEvent.key.name);
-                const to = (_b = (_a = options.eventName) === null || _a === void 0 ? void 0 : _a.call(options, from)) !== null && _b !== void 0 ? _b : from;
-                return Object.assign(Object.assign({}, classEvent), { from,
-                    to });
-            });
-            const fileName = context.fileName;
-            const importerElement = options.importerElement(context);
-            const importerElementType = options.importerElementType(context);
-            const state = Object.assign(Object.assign({}, context), { classEvents,
-                fileName,
-                importerElement,
-                importerElementType,
-                options });
-            const patterns = [
-                'templates/src/components/*fileName*.ts.hbs',
-                '!templates/src/components/*fileName*.compact.ts.hbs'
-            ];
-            renderTemplate(patterns, options.destination, config)(state);
-        }
-        if (options.compact) {
-            globalNew.groups = Object.values(globalNew.contexts)
-                .sort((a, b) => getKey(b).length - getKey(a).length)
-                .map((element, index, elements) => ({
-                key: getKey(element),
-                elements: elements.filter((current) => getKey(current).startsWith(getKey(element)))
-            }))
-                .sort((a, b) => b.elements.length - a.elements.length)
-                .filter((group) => {
-                if (skip.includes(group.key))
-                    return;
-                group.elements.forEach((element) => skip.push(getKey(element)));
-                return true;
-            })
-                .map((group) => {
-                const all = group.elements
-                    .reverse()
-                    .map((element, index) => {
-                    const elementClassNameInCategory = getKey(element).replace(group.key, '');
-                    const importerElement = options.importerElement(element);
-                    const importerElementType = options.importerElementType(element);
-                    return Object.assign(Object.assign({}, element), { elementClassNameInCategory,
-                        importerElement,
-                        importerElementType });
-                })
-                    // TODO: experimental
-                    .sort((a, b) => (getKey(b) < getKey(a) ? 0 : -1));
-                return {
-                    all,
-                    filterd: all.slice(1),
-                    root: all[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.destination, config)(state);
-            }
-        }
-        if (isEmpty) {
-            const patterns = [
-                'templates/**',
-                '!templates/src/components/*fileName*.ts.hbs',
-                '!templates/src/components/*fileName*.compact.ts.hbs'
-            ];
-            renderTemplate(patterns, options.destination, config)(globalNew);
-        }
-        if (!isEmpty) {
-            const patterns = ['templates/src/proxy*', 'templates/src/components/index*'];
-            renderTemplate(patterns, options.destination, config)(globalNew);
-        }
-    };
-    return { name, finish };
-};

package/transformer/plugins/customElementReact/index.d.ts

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

package/transformer/plugins/customElementReact/index.js

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

package/transformer/plugins/customElementReact/templates/README.md.hbs

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

package/transformer/plugins/customElementReact/templates/_.gitignore.hbs

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

package/transformer/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": "^5.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": "^18.0.0",
-    "react-dom": "^18.0.0"
-  }
-}

package/transformer/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/transformer/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/transformer/plugins/customElementReact/templates/src/components/{{fileName}}.compact.ts.hbs

@@ -1,18 +0,0 @@
-/**************************************************
- * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
- **************************************************/
- 
-{{#each all}}
-import { {{className}} } from './{{fileName}}';
-{{/each}}
-
-const All = Object.assign(
-  {{root.className}},
-  {
-    {{#each filterd}}
-    {{elementClassNameInCategory}}: {{className}},
-    {{/each}}
-  }
-);
-
-export { All as {{root.className}} }

package/transformer/plugins/customElementReact/templates/src/components/{{fileName}}.ts.hbs

@@ -1,23 +0,0 @@
-/**************************************************
- * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
- **************************************************/
-import { {{className}} as {{className}}Core } from '{{importerElement.source}}';
-import type { {{className}}Element, {{importerElementType.imported}} as {{importerElementType.local}} } from '{{importerElementType.source}}';
-
-import { proxy } from '../proxy';
-import type { Rename } from '../proxy';
-
-type Renamed = Rename<
-  {{importerElementType.local}},
-  {
-    {{#each classEvents}}
-    {{from}}: '{{to}}';
-    {{/each}}
-  }
->;
-
-export const {{className}} = proxy<{{className}}Element, Renamed>(
-  {{className}}Core.TAG, 
-  [{{#each classProperties}}'{{key.name}}', {{/each}}], 
-  [{{#each classEvents}}'{{key.name}}', {{/each}}],
-);

package/transformer/plugins/customElementReact/templates/src/index.ts.hbs

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

package/transformer/plugins/customElementReact/templates/src/proxy.ts.hbs

@@ -1,269 +0,0 @@
-/**************************************************
- * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
- **************************************************/
-import React from 'react';
-
-import { camelCase, kebabCase, pascalCase } from 'change-case';
-
-export 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 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 as any)[name];
-
-    if (isEvent(name)) {
-      if (typeof document === 'undefined') return;
-
-      const event = getCustomEvent(name, extra.events || []);
-
-      if (event) return;
-
-      (result as any)[name] = value;
-    } else if (extra.props?.includes(name)) {
-      if (!isPrimitive(value)) return;
-
-      (result as any)[kebabCase(name)] = value;
-    } else {
-      (result as any)[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 as any)['$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 as any)['$class'] = className;
-};
-
-const setEvent = (element: Element, name: string, handler: EventHandlerType) => {
-  const events = (element as any)['$events'] || ((element as any)['$events'] = {});
-
-  const previous = events[name];
-
-  previous && element.removeEventListener(pascalCase(name), previous);
-
-  element.addEventListener(
-    pascalCase(name),
-    (events[name] = function callback(event: Event) {
-      handler && handler.call(this, event);
-    })
-  );
-};
-
-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 as any)[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(kebabCase(name), value);
-      } else {
-        (element as any)[name] = value;
-      }
-    } else {
-      (element as any)[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 as any)['$events'] || {};
-
-      Object.keys(events).forEach((name) => {
-        const handler = events[name];
-
-        (this.element as any).removeEventListener(pascalCase(name), handler);
-      });
-
-      delete (this.element as any)['$events'];
-    }
-
-    render() {
-      const { children } = this.props;
-
-      const props = getProps<ElementType>(this.setElement, this.props, extra);
-
-      return React.createElement(tagName, props, children);
-    }
-  };
-
-  (ReactComponent as any)['displayName'] = pascalCase(tagName);
-
-  return forwardRef<ElementType, PropType>(ReactComponent);
-};

package/transformer/plugins/customElementReact/templates/tsconfig.json.hbs

@@ -1,17 +0,0 @@
-{
-  "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"]
-}