@htmlplus/element 0.3.1 → 0.3.2

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/docs.d.ts

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

package/compiler/plugins/docs.js

@@ -0,0 +1,320 @@
+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) => {
+    const name = 'docs';
+    const start = (global) => {
+        global.docs = {
+            prefix: options.prefix,
+            components: []
+        };
+    };
+    const next = (context, global) => {
+        var _a;
+        const tags = getTags(context.class);
+        const development = tags.some((tag) => tag.key == 'development');
+        const experimental = tags.some((tag) => tag.key == 'experimental');
+        const externals = fs.existsSync(path.resolve(context.directoryPath || '', 'externals'));
+        const examples = (() => {
+            const items = [];
+            const source = path.join(context.directoryPath || '', 'examples');
+            if (!fs.existsSync(source))
+                return items;
+            return fs
+                .readdirSync(source)
+                .filter((file) => file.endsWith('.md'))
+                .map((file) => {
+                const item = {};
+                const regex = /```\w+\s\[\w+(:\w+)?\]\s[\S\s]*?```/g;
+                const filePath = path.join(source, file);
+                const content = fs.readFileSync(filePath, 'utf8');
+                item.key = path.basename(filePath).replace('.md', '');
+                item.title = capitalCase(item.key);
+                item.readme = content.replace(regex, '').trim();
+                item.codes = (content.match(regex) || []).map((section) => {
+                    try {
+                        const lines = section.split('\n');
+                        const key = ((lines[0].match(/\[\w+(:\w+)?\]/) || []).shift() || '').replace('[', '').replace(']', '');
+                        const type = ((lines[0].match(/```\w+/) || []).pop() || '').replace('```', '');
+                        const value = lines.slice(1, -1).join('\n');
+                        return {
+                            key,
+                            type,
+                            value
+                        };
+                    }
+                    catch (_a) { }
+                });
+                return item;
+            });
+        })();
+        const readme = (() => {
+            try {
+                const source = path.resolve(context.directoryPath || '', `${context.fileName}.md`);
+                return fs.readFileSync(source, 'utf8');
+            }
+            catch (_a) { }
+        })();
+        const description = (() => {
+            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 properties = (context.classProperties || []).map((property) => {
+            var _a;
+            const tags = getTags(property);
+            const name = property.key['name'];
+            const attribute = paramCase(name);
+            // TODO
+            const initializer = getInitializer(property.value);
+            // TODO
+            const reflect = (() => {
+                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;
+            })();
+            const required = !property.optional;
+            // TODO
+            const { type, members } = (() => {
+                const ast = getType(context.fileAST, (property.typeAnnotation || {})['typeAnnotation'], {
+                    directory: context.directoryPath
+                });
+                return printType(ast);
+            })();
+            const experimental = tags.some((tag) => tag.key == 'experimental');
+            const description = (_a = tags.find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
+            const model = tags.some((tag) => tag.key == 'model');
+            return {
+                name,
+                attribute,
+                initializer,
+                reflect,
+                required,
+                type,
+                experimental,
+                description,
+                members,
+                model
+            };
+        });
+        const parts = tags
+            .filter((tag) => tag.key == 'part')
+            .map((tag) => {
+            var _a;
+            const sections = ((_a = tag.value) === null || _a === void 0 ? void 0 : _a.split('-')) || [];
+            const name = sections[0].trim();
+            const description = sections.slice(1).join('-').trim();
+            return {
+                name,
+                description
+            };
+        });
+        const methods = (context.classMethods || []).map((method) => {
+            var _a;
+            const tags = getTags(method);
+            const name = method.key['name'];
+            const experimental = tags.some((tag) => tag.key == 'experimental');
+            // TODO
+            // const params = printType(getType(
+            //     context.ast,
+            //     method.params,
+            //     {
+            //         directory: context.directory,
+            //     }
+            // ));
+            // console.log(111, params)
+            // TODO: returnType
+            const type = (() => {
+                try {
+                    return printType(getType(context.fileAST, (method.returnType || {})['typeAnnotation'], {
+                        directory: context.directoryPath
+                    }));
+                }
+                catch (_a) { }
+            })();
+            // TODO
+            const signature = `${method.key['name']}(${''}) => ${type}`;
+            const description = (_a = tags.find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
+            // TODO
+            const parameters = [
+            // {
+            //     "name": "offsetX",
+            //     "description": "Moving size (px) in the `horizontal` direction. Use `null` to ignore this."
+            // },
+            // {
+            //     "name": "offsetY",
+            //     "description": "Moving size (px) in the `vertical` direction. Use `null` to ignore this."
+            // }
+            ];
+            return {
+                name,
+                experimental,
+                type,
+                signature,
+                description,
+                parameters
+            };
+        });
+        const slots = tags
+            .filter((tag) => tag.key == 'slot')
+            .map((tag) => {
+            var _a;
+            const sections = ((_a = tag.value) === null || _a === void 0 ? void 0 : _a.split('-')) || [];
+            const name = sections[0].trim();
+            const description = sections.slice(1).join('-').trim();
+            return {
+                name,
+                description
+            };
+        });
+        const events = (context.classEvents || []).map((event) => {
+            var _a;
+            const tags = getTags(event);
+            const name = event.key['name'];
+            const cancelable = (() => {
+                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;
+            })();
+            // TODO
+            const detail = (() => {
+                try {
+                    return printType(getType(context.fileAST, (event.typeAnnotation || {})['typeAnnotation'].typeParameters.params[0], {
+                        directory: context.directoryPath
+                    }));
+                }
+                catch (_a) { }
+            })();
+            const experimental = tags.some((tag) => tag.key == 'experimental');
+            const description = (_a = tags.find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
+            const model = tags.some((tag) => tag.key == 'model');
+            return {
+                name,
+                cancelable,
+                detail,
+                experimental,
+                description,
+                model
+            };
+        });
+        const styles = (() => {
+            const styles = [];
+            try {
+                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();
+                    styles.push({
+                        name,
+                        initializer,
+                        description
+                    });
+                });
+            }
+            catch (_a) { }
+            return styles;
+        })();
+        // TODO
+        const lastModified = 0;
+        // glob
+        //     .sync(path.join(context.directory, '**/*.*'))
+        //     .reduce((result, file) => {
+        //         const state = fs.statSync(file);
+        //         return result > state.mtime ? result : state.mtime
+        //     }, 0);
+        const group = ((_a = tags.find((tag) => tag.key == 'group')) === null || _a === void 0 ? void 0 : _a.value) || null;
+        const main = (group && context.componentKey == group) || !group;
+        // TODO
+        // context.types = (() => {
+        //     return [];
+        // })();
+        global.docs.components.push({
+            key: context.componentKey,
+            tag: context.componentTag,
+            title: capitalCase(context.componentKey || ''),
+            main,
+            group,
+            development,
+            experimental,
+            // TODO
+            deprecated: false,
+            externals,
+            lastModified,
+            // TODO
+            tags: [],
+            // TODO
+            source: context.componentKey,
+            description,
+            readme,
+            properties,
+            slots,
+            events,
+            styles,
+            parts,
+            methods,
+            examples
+        });
+    };
+    const finish = (global) => {
+        global.docs.components = global.docs.components.sort((a, b) => (a.key > b.key ? 1 : -1));
+        // TODO
+        // fs.ensureDirSync(path.dirname(options.dist));
+        // TODO
+        // fs.writeJSONSync(options.dist, global.docs, { replacer: null, spaces: 2 });
+    };
+    return {
+        name,
+        start,
+        next,
+        finish
+    };
+};

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;
+};