@htmlplus/element 0.1.9 → 0.3.1

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

@@ -1,11 +0,0 @@
-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

@@ -1,121 +0,0 @@
-import { __dirname, isDirectoryEmpty, renderTemplate } from '../../utils/index.js';
-const defaults = {
-    compact: false,
-    dist: '',
-    eventName: undefined,
-    importerComponent(context) {
-        return `YOUR_CORE_PACKAGE_NAME#${context.componentClassName}`;
-    },
-    importerComponentType(context) {
-        return `YOUR_CORE_PACKAGE_NAME#JSX.${context.componentClassName}`;
-    }
-};
-export const 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) => {
-                var _a;
-                const name = ((_a = options.eventName) === null || _a === void 0 ? void 0 : _a.call(options, classEvent.key.name)) || classEvent.key.name;
-                return Object.assign(Object.assign({}, classEvent), { converted: 'on' + name.charAt(0).toUpperCase() + name.slice(1) });
-            });
-            const fileName = context.fileName;
-            const importerComponent = parse(options.importerComponent(context));
-            const importerComponentType = parse(options.importerComponentType(context));
-            const state = Object.assign(Object.assign({}, context), { classEvents,
-                fileName,
-                importerComponent,
-                importerComponentType,
-                options });
-            const patterns = [
-                'templates/src/components/*fileName*.ts.hbs',
-                '!templates/src/components/*fileName*.compact.ts.hbs'
-            ];
-            renderTemplate(patterns, options.dist, config)(state);
-        }
-        if (options.compact) {
-            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

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

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

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

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

@@ -1,37 +0,0 @@
-{  
-  "name": "YOUR_REACT_PACKAGE_NAME",
-  "version": "0.0.0",
-  "type": "module",
-  "description": "React output target for your custom element.",
-  "exports": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "scripts": {
-    "prebuild": "npm run clean",
-    "build": "rollup -c",
-    "clean": "rimraf dist"
-  },
-  "files": [
-    "dist"
-  ],
-  "dependencies": {
-    "YOUR_CORE_PACKAGE_NAME": "latest",
-    "change-case": "^4.1.2"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^15.0.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@types/react": "^16.9.49",
-    "glob": "^7.2.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.27.1",
-    "rollup-plugin-peer-deps-external": "^2.2.3",
-    "rollup-plugin-typescript2": "^0.27.2",
-    "typescript": "^4.0.2"
-  },
-  "peerDependencies": {
-    "react": "^16.0.0 || ^17.0.0",
-    "react-dom": "^16.0.0 || ^17.0.0"
-  }
-}

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

@@ -1,21 +0,0 @@
-import commonjs from '@rollup/plugin-commonjs';
-import resolve from '@rollup/plugin-node-resolve';
-import glob from 'glob';
-import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-import typescript from 'rollup-plugin-typescript2';
-
-export default {
-  input: glob.sync('src/**/*.ts'),
-  output: [
-    {
-      dir: 'dist',
-      format: 'esm',
-    },
-  ],
-  plugins: [
-    peerDepsExternal(), 
-    resolve(), 
-    commonjs(), 
-    typescript(),
-  ],
-};

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

@@ -1,17 +0,0 @@
-/**************************************************
- * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
- **************************************************/
-
-{{#if options.compact}}
-{{#each groups}}
-{{#if single}}
-export * from './{{root.fileName}}';
-{{else}}
-export * from './{{root.fileName}}.compact';
-{{/if}}
-{{/each}}
-{{else}}
-{{#each contexts}}
-export * from './{{fileName}}';
-{{/each}}
-{{/if}}

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

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

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

@@ -1,26 +0,0 @@
-/* eslint-disable */
-/* tslint:disable */
-
-/**************************************************
- * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
- **************************************************/
-
-import { proxy } from '../proxy';
-
-{{!-- import { {{importerComponent.root}} as Component } from '{{importerComponent.source}}'; --}}
-import '{{importerComponent.source}}';
-import type { {{importerComponentType.root}} as Type } from '{{importerComponentType.source}}';
-
-type Rename<T, R extends { [K in keyof R]: K extends keyof T ? PropertyKey : "Error: key not in T" }> = { [P in keyof T as P extends keyof R ? R[P] : P]: T[P] }
-
-type Renamed = Rename<{{importerComponentType.variable}}, { 
-  {{#each classEvents}}
-  {{key.name}}: '{{converted}}',
-  {{/each}}
-}>
-
-export const {{componentClassName}} = /*@__PURE__*/ proxy<{{componentInterfaceName}}, Renamed>(
-  '{{componentTag}}', 
-  [{{#each classProperties}}'{{key.name}}', {{/each}}], 
-  [{{#each classEvents}}'{{key.name}}', {{/each}}],
-);

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

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

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

@@ -1,278 +0,0 @@
-/**************************************************
- * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
- **************************************************/
- 
-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

@@ -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"]
-}

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

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

package/dist/compiler/plugins/read.js

@@ -1,13 +0,0 @@
-import fs from 'fs';
-export const read = () => {
-    const name = 'read';
-    const next = (context) => {
-        if (!!context.fileContent)
-            return;
-        context.fileContent = fs.readFileSync(context.filePath, 'utf8');
-    };
-    return {
-        name,
-        next
-    };
-};

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

@@ -1,6 +0,0 @@
-import core from 'sass';
-import { Context } from '../../types/index.js';
-export declare const sass: (options?: core.Options<"sync"> | undefined) => {
-    name: string;
-    next: (context: Context) => void;
-};

package/dist/compiler/plugins/sass.js

@@ -1,15 +0,0 @@
-import core from 'sass';
-export const sass = (options) => {
-    const name = 'sass';
-    const next = (context) => {
-        if (!context.stylePath)
-            return;
-        const { css, loadedUrls } = core.compile(context.stylePath, Object.assign(Object.assign({}, (options || {})), { style: 'compressed' }));
-        context.styleParsed = css.toString();
-        context.styleDependencies = []; // TODO loadedUrls;
-    };
-    return {
-        name,
-        next
-    };
-};

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

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

package/dist/compiler/plugins/uhtml.js

@@ -1,59 +0,0 @@
-import t from '@babel/types';
-import { print, visitor } from '../utils/index.js';
-export const uhtml = () => {
-    const name = 'uhtml';
-    const next = (context) => {
-        context.fileAST.program.body.unshift(t.importDeclaration([t.importSpecifier(t.identifier('html'), t.identifier('html'))], t.stringLiteral('@htmlplus/element/runtime')));
-        visitor(context.fileAST, {
-            JSXAttribute: {
-                exit(path) {
-                    var _a;
-                    if (((_a = path.node.value) === null || _a === void 0 ? void 0 : _a.type) == 'JSXExpressionContainer') {
-                        let node = path.node;
-                        if (path.node.name.name == 'ref') {
-                            node = t.jsxAttribute(path.node.name, t.jSXExpressionContainer(t.arrowFunctionExpression([t.identifier('$element')], t.assignmentExpression('=', path.node.value.expression, t.identifier('$element')))));
-                        }
-                        path.replaceWith(t.jsxIdentifier(print(node).replace('={', '=${')));
-                        path.skip();
-                        return;
-                    }
-                }
-            },
-            JSXElement: {
-                exit(path) {
-                    if (path.parent.type == 'JSXElement' || path.parent.type == 'JSXFragment') {
-                        path.replaceWith(t.identifier(print(path.node)));
-                        return;
-                    }
-                    else {
-                        path.replaceWith(t.identifier('html`' + print(path.node) + '`'));
-                        return;
-                    }
-                }
-            },
-            JSXFragment: {
-                exit(path) {
-                    path.replaceWith(t.identifier(['html`', ...path.node.children.map((child) => print(child)), '`'].join('')));
-                }
-            },
-            JSXExpressionContainer: {
-                exit(path) {
-                    if (path.parent.type == 'JSXElement' || path.parent.type == 'JSXFragment') {
-                        path.replaceWith(t.identifier('$' + print(path.node)));
-                        return;
-                    }
-                }
-            },
-            JSXSpreadAttribute: {
-                enter(path) {
-                    // TODO
-                    path.replaceWith(t.jsxAttribute(t.jsxIdentifier('.dataset'), t.jsxExpressionContainer(path.node.argument)));
-                }
-            }
-        });
-    };
-    return {
-        name,
-        next
-    };
-};

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

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