@htmlplus/element 0.3.1 → 0.4.0

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

@@ -0,0 +1,278 @@
+/**************************************************
+ * 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/compiler/plugins/customElementReact/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/compiler/plugins/document.d.ts

@@ -0,0 +1,10 @@
+import { Context } from '../../types/index.js';
+export interface DocumentOptions {
+    destination: string;
+}
+export declare const document: (options: DocumentOptions) => {
+    name: string;
+    start: (global: any) => void;
+    next: (context: Context, global: any) => void;
+    finish: (global: any) => void;
+};

package/compiler/plugins/document.js

@@ -0,0 +1,254 @@
+import { capitalCase, paramCase } from 'change-case';
+import fs from 'fs';
+import glob from 'glob';
+import path from 'path';
+import { getInitializer, getTag, getTags, getTypeReference, hasTag, parseTag, print } from '../utils/index.js';
+export const document = (options) => {
+    const name = 'document';
+    const start = (global) => {
+        global.document = {
+            components: []
+        };
+    };
+    const next = (context, global) => {
+        var _a;
+        const events = context.classEvents.map((event) => {
+            var _a, _b, _c;
+            const isCancelable = (() => {
+                if (!event.decorators)
+                    return false;
+                try {
+                    for (const decorator of event.decorators) {
+                        for (const argument of decorator.expression['arguments']) {
+                            for (const property of argument.properties) {
+                                if (property.key.name != 'cancelable')
+                                    continue;
+                                if (property.value.type != 'BooleanLiteral')
+                                    continue;
+                                if (!property.value.value)
+                                    continue;
+                                return true;
+                            }
+                        }
+                    }
+                }
+                catch (_a) { }
+                return false;
+            })();
+            const description = (_a = getTags(event).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
+            const detail = print((_b = event.typeAnnotation) === null || _b === void 0 ? void 0 : _b['typeAnnotation']);
+            const detailReference = getTypeReference(context.fileAST, (_c = event.typeAnnotation) === null || _c === void 0 ? void 0 : _c['typeAnnotation'].typeParameters.params[0]);
+            const isExperimental = hasTag(event, 'experimental');
+            const isModel = hasTag(event, 'model');
+            const name = event.key['name'];
+            const tags = getTags(event);
+            return {
+                description,
+                detail,
+                detailReference,
+                isCancelable,
+                isExperimental,
+                isModel,
+                name,
+                tags
+            };
+        });
+        const group = (_a = getTag(context.class, 'group')) === null || _a === void 0 ? void 0 : _a.value;
+        const isDeprecated = hasTag(context.class, 'deprecated');
+        const isExperimental = hasTag(context.class, 'experimental');
+        const lastModified = glob
+            .sync(path.join(context.directoryPath, '**/*.*'))
+            .map((file) => fs.statSync(file).mtime)
+            .sort((a, b) => (a > b ? 1 : -1))
+            .pop();
+        const methods = context.classMethods.map((method) => {
+            var _a, _b, _c;
+            const description = (_a = getTags(method).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
+            const isAsync = method.async;
+            const isDeprecated = hasTag(method, 'deprecated');
+            const isExperimental = hasTag(method, 'experimental');
+            const name = method.key['name'];
+            const returns = print((_b = method.returnType) === null || _b === void 0 ? void 0 : _b['typeAnnotation']) || 'void';
+            const returnsReference = getTypeReference(context.fileAST, (_c = method.returnType) === null || _c === void 0 ? void 0 : _c['typeAnnotation']);
+            const tags = getTags(method);
+            // TODO
+            const parameters = method.params.map((param) => {
+                var _a, _b, _c;
+                return ({
+                    description: (_a = getTags(method, 'param')
+                        .map((tag) => parseTag(tag, ' '))
+                        .find((tag) => tag.name == param['name'])) === null || _a === void 0 ? void 0 : _a.description,
+                    isOptional: !!param['optional'],
+                    name: param['name'],
+                    type: print((_b = param === null || param === void 0 ? void 0 : param['typeAnnotation']) === null || _b === void 0 ? void 0 : _b.typeAnnotation) || undefined,
+                    typeReference: getTypeReference(context.fileAST, (_c = param === null || param === void 0 ? void 0 : param['typeAnnotation']) === null || _c === void 0 ? void 0 : _c.typeAnnotation)
+                });
+            });
+            const signature = [
+                method.key['name'],
+                '(',
+                parameters
+                    .map((parameter) => {
+                    var _a;
+                    let string = '';
+                    string += parameter.name;
+                    string += parameter.isOptional ? '?' : '';
+                    string += parameter.type ? ': ' : '';
+                    string += (_a = parameter.type) !== null && _a !== void 0 ? _a : '';
+                    return string;
+                })
+                    .join(', '),
+                ')',
+                ' => ',
+                returns
+            ].join('');
+            return {
+                description,
+                isAsync,
+                isDeprecated,
+                isExperimental,
+                name,
+                returns,
+                returnsReference,
+                tags,
+                parameters,
+                signature
+            };
+        });
+        const parts = getTags(context.class, 'part').map((tag) => parseTag(tag));
+        const properties = context.classProperties.map((property) => {
+            var _a, _b, _c;
+            const attribute = paramCase(property.key['name']);
+            const description = (_a = getTags(property).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
+            // TODO
+            const hasReflect = (() => {
+                if (!property.decorators)
+                    return false;
+                try {
+                    for (const decorator of property.decorators) {
+                        for (const argument of decorator.expression['arguments']) {
+                            for (const property of argument.properties) {
+                                if (property.key.name != 'reflect')
+                                    continue;
+                                if (property.value.type != 'BooleanLiteral')
+                                    continue;
+                                if (!property.value.value)
+                                    continue;
+                                return true;
+                            }
+                        }
+                    }
+                }
+                catch (_a) { }
+                return false;
+            })();
+            // TODO
+            const initializer = getInitializer(property.value);
+            const isDeprecated = hasTag(property, 'deprecated');
+            const isExperimental = hasTag(property, 'experimental');
+            const isModel = hasTag(property, 'model');
+            const isRequired = !property.optional;
+            const name = property.key['name'];
+            const tags = getTags(property);
+            const type = print((_b = property.typeAnnotation) === null || _b === void 0 ? void 0 : _b['typeAnnotation']);
+            const typeReference = getTypeReference(context.fileAST, (_c = property.typeAnnotation) === null || _c === void 0 ? void 0 : _c['typeAnnotation']);
+            return {
+                attribute,
+                description,
+                hasReflect,
+                initializer,
+                isDeprecated,
+                isExperimental,
+                isModel,
+                isRequired,
+                name,
+                tags,
+                type,
+                typeReference
+            };
+        });
+        const readme = (() => {
+            try {
+                const source = path.join(context.directoryPath, `${context.fileName}.md`);
+                return fs.readFileSync(source, 'utf8');
+            }
+            catch (_a) { }
+        })();
+        const readmeDescription = (() => {
+            const content = readme || '';
+            if (!content.startsWith('# '))
+                return '';
+            const sections = content.split('\n');
+            for (let i = 1; i < sections.length; i++) {
+                const section = sections[i].trim();
+                if (!section)
+                    continue;
+                return section;
+            }
+            return '';
+        })();
+        const slots = getTags(context.class, 'slot').map((tag) => parseTag(tag));
+        // TODO
+        const styles = (() => {
+            if (!context.stylePath)
+                return [];
+            return fs
+                .readFileSync(context.stylePath, 'utf8')
+                .split('@prop')
+                .slice(1)
+                .map((section) => {
+                var _a;
+                let [description, name] = section.split(/\n/);
+                name = name.split(':').slice(0, -1).join(':').trim();
+                description = description.trim();
+                let [initializer] = ((_a = context.styleParsed) === null || _a === void 0 ? void 0 : _a.split(name).slice(1, 2)) || [];
+                if (initializer)
+                    initializer = initializer.split(/;|}/)[0].replace(':', '').trim();
+                return {
+                    description,
+                    initializer,
+                    name
+                };
+            });
+        })();
+        const tag = context.componentTag;
+        const tags = getTags(context.class);
+        const title = capitalCase(context.componentKey);
+        global.document.components.push({
+            // TODO
+            // main
+            // development
+            // source
+            events,
+            group,
+            isDeprecated,
+            isExperimental,
+            key: context.componentKey,
+            lastModified,
+            methods,
+            parts,
+            properties,
+            readme,
+            readmeDescription,
+            slots,
+            styles,
+            tag,
+            tags,
+            title
+        });
+    };
+    const finish = (global) => {
+        const dirname = path.dirname(options.destination);
+        global.document.components = global.document.components.sort((a, b) => (a.title > b.title ? 1 : -1));
+        if (!fs.existsSync(dirname))
+            fs.mkdirSync(dirname, { recursive: true });
+        JSON.stringify(global.document, null, 2);
+        fs.writeFileSync(options.destination, JSON.stringify(global.document, null, 2), 'utf8');
+    };
+    return {
+        name,
+        start,
+        next,
+        finish
+    };
+};

package/compiler/plugins/external.d.ts

@@ -0,0 +1,9 @@
+import { Context } from '../../types/index.js';
+export declare type ExternalOptions = {
+    source?: (context: Context) => string;
+    destination: (context: Context) => string;
+};
+export declare const external: (options: ExternalOptions) => {
+    name: string;
+    next: (context: Context) => void;
+};

package/compiler/plugins/external.js

@@ -0,0 +1,25 @@
+import fs from 'fs-extra';
+import path from 'path';
+const defaults = {
+    source(context) {
+        return path.join(context.directoryPath, 'external');
+    },
+    destination(context) {
+        return '';
+    }
+};
+export const external = (options) => {
+    const name = 'external';
+    options = Object.assign(Object.assign({}, defaults), options);
+    const next = (context) => {
+        var _a;
+        const source = (_a = options.source) === null || _a === void 0 ? void 0 : _a.call(options, context);
+        if (!source || !fs.existsSync(source))
+            return;
+        fs.copySync(source, options.destination(context));
+    };
+    return {
+        name,
+        next
+    };
+};

package/compiler/plugins/extract.d.ts

@@ -0,0 +1,8 @@
+import { Context } from '../../types/index.js';
+export interface ExtractOptions {
+    prefix?: string;
+}
+export declare const extract: (options?: ExtractOptions | undefined) => {
+    name: string;
+    next: (context: Context) => void;
+};

package/compiler/plugins/extract.js

@@ -0,0 +1,62 @@
+import * as t from '@babel/types';
+import { pascalCase, paramCase } from 'change-case';
+import path from 'path';
+import * as CONSTANTS from '../../constants/index.js';
+import { hasDecorator, visitor } from '../utils/index.js';
+export const extract = (options) => {
+    const name = 'extract';
+    const next = (context) => {
+        var _a, _b;
+        visitor(context.fileAST, {
+            ClassDeclaration: {
+                exit(path) {
+                    var _a, _b;
+                    context.class = path.node;
+                    context.classMembers = ((_b = (_a = context.class) === null || _a === void 0 ? void 0 : _a.body) === null || _b === void 0 ? void 0 : _b.body) || [];
+                    path.skip();
+                }
+            },
+            Decorator(path) {
+                var _a;
+                const name = (_a = path.node.expression.callee) === null || _a === void 0 ? void 0 : _a.name;
+                // TODO
+                if (CONSTANTS.DECORATOR_ELEMENT == name) {
+                    const [argument] = path.node.expression.arguments;
+                    if (argument) {
+                        context.componentTag = argument === null || argument === void 0 ? void 0 : argument.value;
+                        return;
+                    }
+                    context.componentTag = paramCase(path.parent.id.name);
+                    if (options === null || options === void 0 ? void 0 : options.prefix)
+                        context.componentTag = options.prefix + '-' + context.componentTag;
+                    path.replaceWith(t.decorator(t.callExpression(t.identifier(name), [
+                        t.stringLiteral(context.componentTag),
+                        ...path.node.expression.arguments.slice(1)
+                    ])));
+                    return;
+                }
+            }
+        });
+        context.directoryPath = path.dirname(context.filePath);
+        context.directoryName = path.basename(context.directoryPath);
+        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;
+        // TODO
+        context.componentClassName = pascalCase(context.componentTag);
+        context.componentClassNamePrune = pascalCase(context.componentTag.split('-').slice(1).join('-'));
+        context.componentInterfaceName = `HTML${context.componentClassName}Element`;
+        context.componentKey = paramCase(context.componentClassNamePrune);
+        context.classEvents = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_EVENT));
+        context.classMethods = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_METHOD));
+        context.classProperties = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_PROPERTY));
+        context.classStates = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_STATE));
+        context.classHasMount = (context.classMembers || []).some((member) => member['key'].name == CONSTANTS.LIFECYCLE_CONNECTED);
+        context.classHasUnmount = (context.classMembers || []).some((member) => member['key'].name == CONSTANTS.LIFECYCLE_DISCONNECTED);
+        context.classRender = (context.classMembers || []).find((member) => member['key'].name == CONSTANTS.METHOD_RENDER);
+    };
+    return {
+        name,
+        next
+    };
+};

package/compiler/plugins/index.d.ts

@@ -0,0 +1,9 @@
+export * from './customElementReact/index.js';
+export * from './customElement.js';
+export * from './document.js';
+export * from './external.js';
+export * from './extract.js';
+export * from './parse.js';
+export * from './read.js';
+export * from './style.js';
+export * from './validate.js';

package/compiler/plugins/index.js

@@ -0,0 +1,9 @@
+export * from './customElementReact/index.js';
+export * from './customElement.js';
+export * from './document.js';
+export * from './external.js';
+export * from './extract.js';
+export * from './parse.js';
+export * from './read.js';
+export * from './style.js';
+export * from './validate.js';