@htmlplus/element 0.3.0 → 0.3.1

package/dist/compiler/plugins/customElementReact/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/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"]
-}

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

@@ -1,11 +0,0 @@
-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/dist/compiler/plugins/docs.js

@@ -1,320 +0,0 @@
-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/dist/compiler/plugins/extract.d.ts

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