@htmlplus/element 0.1.1 → 0.1.4

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

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

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

@@ -0,0 +1,3 @@
+{{#each groups}}
+export * from './{{root.fileName}}';
+{{/each}}

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

@@ -0,0 +1,38 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated */
+
+import { proxy } from '../proxy';
+import type { JSX } from '{{options.corePackageName}}';
+
+{{#each all}}
+import {{componentClassName}} from '{{../options.corePackageName}}/{{fileName}}';
+{{/each}}
+
+{{#each all}}
+const {{componentClassName}} = /*@__PURE__*/ proxy<{{componentInterfaceName}}, JSX.{{componentClassName}}>(
+  '{{componentTag}}', 
+  [
+    {{#each classProperties}}
+    '{{key.name}}',
+    {{/each}}
+  ], 
+  [
+    {{#each classEvents}}
+    '{{key.name}}',
+    {{/each}}
+  ],
+);
+
+{{/each}}
+{{#if single}}
+export { {{root.componentClassName}} }
+{{else}}
+const All = /*@__PURE__*/ Object.assign({{root.componentClassName}}, {
+  {{#each filterd}}
+  {{componentClassNameInCategory}}: {{componentClassName}},
+  {{/each}}
+});
+
+export { All as {{root.componentClassName}} }
+{{/if}}

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

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

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

@@ -0,0 +1,277 @@
+/**
+ * version 0.0.9
+ */
+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

@@ -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/dist/compiler/utils/__dirname.d.ts

@@ -0,0 +1 @@
+export declare const __dirname: (url: string | URL) => string;

package/dist/compiler/utils/__dirname.js

@@ -0,0 +1,5 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+export const __dirname = (url) => {
+    return dirname(fileURLToPath(url));
+};

package/dist/compiler/utils/index.d.ts

@@ -1,7 +1,10 @@
+export * from './__dirname.js';
 export * from './get-initializer.js';
 export * from './get-tags.js';
 export * from './get-type.js';
 export * from './has-decorator.js';
+export * from './is-directory-empty.js';
 export * from './print-type.js';
 export * from './print.js';
+export * from './render-template.js';
 export * from './visitor.js';

package/dist/compiler/utils/index.js

@@ -1,7 +1,10 @@
+export * from './__dirname.js';
 export * from './get-initializer.js';
 export * from './get-tags.js';
 export * from './get-type.js';
 export * from './has-decorator.js';
+export * from './is-directory-empty.js';
 export * from './print-type.js';
 export * from './print.js';
+export * from './render-template.js';
 export * from './visitor.js';

package/dist/compiler/utils/is-directory-empty.d.ts

@@ -0,0 +1 @@
+export declare const isDirectoryEmpty: (directory: string) => Promise<boolean>;

package/dist/compiler/utils/is-directory-empty.js

@@ -0,0 +1,19 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import fs from 'fs';
+export const isDirectoryEmpty = (directory) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const files = yield fs.readdirSync(directory);
+        return !files.length;
+    }
+    catch (_a) {
+        return true;
+    }
+});

package/dist/compiler/utils/render-template.d.ts

@@ -0,0 +1 @@
+export declare const renderTemplate: (source: string | Array<string>, destination: string, options?: any) => (context: any) => void;

package/dist/compiler/utils/render-template.js

@@ -0,0 +1,25 @@
+import glob from 'fast-glob';
+import fs from 'fs';
+import handlebars from 'handlebars';
+import path from 'path';
+export const renderTemplate = (source, destination, options) => (context) => {
+    const files = glob.sync(source, options);
+    for (const file of files) {
+        const from = path.resolve((options === null || options === void 0 ? void 0 : options.cwd) || '', file);
+        const to = path.join(destination, path
+            .normalize(file)
+            .split(path.sep)
+            .slice(1)
+            .map((section) => handlebars.compile(section)(context))
+            .join(path.sep)
+            .replace('_.', '.')
+            .replace('.hbs', ''));
+        const directory = path.dirname(to);
+        const raw = fs.readFileSync(from, 'utf8');
+        const template = handlebars.compile(raw)(context);
+        if (!fs.existsSync(directory)) {
+            fs.mkdirSync(directory, { recursive: true });
+        }
+        fs.writeFileSync(to, template, 'utf8');
+    }
+};

package/dist/types/context.d.ts

@@ -1,6 +1,8 @@
 import { ClassBody, ClassDeclaration, ClassMethod, ClassProperty, File } from '@babel/types';
 export interface Context {
     script?: string;
+    componentClassName?: string;
+    componentInterfaceName?: string;
     componentKey?: string;
     componentTag?: string;
     directoryName?: string;

package/dist/types/index.d.ts

@@ -1,8 +1,3 @@
-export * from './api.js';
 export * from './context.js';
-export * from './direction.js';
-export * from './event-options.js';
-export * from './listen-options.js';
 export * from './plugin.js';
 export * from './plus-element.js';
-export * from './property-options.js';

package/dist/types/index.js

@@ -1,8 +1,3 @@
-export * from './api.js';
 export * from './context.js';
-export * from './direction.js';
-export * from './event-options.js';
-export * from './listen-options.js';
 export * from './plugin.js';
 export * from './plus-element.js';
-export * from './property-options.js';

package/dist/types/plugin.d.ts

@@ -1,7 +1,8 @@
 import { Context } from './context.js';
+export declare type Return<T> = void | T | Promise<T>;
 export declare type Plugin = {
     name: string;
-    start?: (global: any) => void;
-    next?: (context: Context, global: any) => void | Context | Promise<Context>;
-    finish?: (global: any) => void;
+    start?: (global: any) => Return<any>;
+    next?: (context: Context, global: any) => Return<Context>;
+    finish?: (global: any) => Return<any>;
 };

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "license": "MIT",
   "author": "Masood Abdolian <m.abdolian@gmail.com>",
   "description": "Compiler of HTMLPlus",
   "type": "module",
   "scripts": {
-    "build": "npm run clean && tsc",
+    "build": "tsc",
     "build:watch": "tsc -w",
-    "clean": "rimraf dist",
-    "prettier": "prettier --write .",
-    "start": "node src/dev/start.js"
+    "postbuild": "node scripts/build.post.js",
+    "format": "prettier --write .",
+    "dev:start": "node src/dev/start.js",
+    "dev:build": "node src/dev/build.js"
   },
   "exports": {
     ".": {
@@ -78,6 +79,8 @@
     "@babel/types": "^7.16.0",
     "@types/node": "^16.11.11",
     "change-case": "^4.1.2",
+    "fast-glob": "^3.2.11",
+    "handlebars": "^4.7.7",
     "log-update": "^5.0.0",
     "sass": "^1.43.4",
     "ts-node": "^10.4.0",
@@ -86,8 +89,8 @@
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^3.1.1",
+    "cpy": "^9.0.0",
     "prettier": "^2.5.0",
-    "rimraf": "^3.0.2",
     "vite": "^2.7.10"
   }
 }

package/dist/client/decorators/listen-options.d.ts

@@ -1,2 +0,0 @@
-import { ListenOptions as ListenOptionsBase } from '../../types/index.js';
-export declare function ListenOptions(options?: Omit<ListenOptionsBase, 'target'>): void;

package/dist/client/decorators/listen-options.js

@@ -1,2 +0,0 @@
-// TODO
-export function ListenOptions(options = {}) { }

package/dist/client/helpers/is-server.d.ts

@@ -1 +0,0 @@
-export { isServer } from '../utils/index.js';

package/dist/client/helpers/is-server.js

@@ -1 +0,0 @@
-export { isServer } from '../utils/index.js';

package/dist/client/utils/decorator.d.ts

@@ -1,5 +0,0 @@
-export declare type DecoratorSetup = (target: Object, propertyKey: PropertyKey, descriptor?: PropertyDescriptor) => DecoratorSetupReturn;
-export declare type DecoratorSetupReturn = PropertyDescriptor & {
-    onReady?(): void;
-};
-export declare const decorator: (setup: DecoratorSetup) => (target: Object, propertyKey: PropertyKey, descriptor?: PropertyDescriptor | undefined) => DecoratorSetupReturn | undefined;

package/dist/client/utils/decorator.js

@@ -1,14 +0,0 @@
-import { defineProperty } from './define-property.js';
-export const decorator = (setup) => {
-    return function (target, propertyKey, descriptor) {
-        var _a;
-        const options = setup(target, propertyKey, descriptor);
-        // TODO
-        if (options.onReady)
-            ((_a = target['setup']) !== null && _a !== void 0 ? _a : (target['setup'] = [])).push(options.onReady);
-        if (descriptor)
-            return options;
-        if (Object.keys(options).some((key) => ['configurable', 'enumerable', 'value', 'writable', 'get', 'set'].includes(key)))
-            defineProperty(target, propertyKey, options);
-    };
-};

package/dist/client/utils/define-element.d.ts

@@ -1 +0,0 @@
-export declare const defineElement: (name: string, Class: any) => void;

package/dist/client/utils/define-element.js

@@ -1,7 +0,0 @@
-import { isServer } from './is-server.js';
-// TODO: Class type
-export const defineElement = (name, Class) => {
-    if (isServer())
-        return;
-    window.customElements.define(name, Class);
-};

package/dist/client/utils/define-method.d.ts

@@ -1 +0,0 @@
-export declare const defineMethod: <T>(target: T, propertyKey: PropertyKey, handler: any) => void;

package/dist/client/utils/define-method.js

@@ -1,7 +0,0 @@
-// TODO: handler type
-export const defineMethod = (target, propertyKey, handler) => {
-    const callback = target[propertyKey];
-    target[propertyKey] = function (...args) {
-        return handler(this, callback === null || callback === void 0 ? void 0 : callback.bind(this), args);
-    };
-};

package/dist/types/api.d.ts

@@ -1,5 +0,0 @@
-export interface Api {
-    ready: boolean;
-    host(): HTMLElement;
-    request(states?: any): void;
-}

package/dist/types/api.js

@@ -1 +0,0 @@
-export {};

package/dist/types/direction.d.ts

@@ -1 +0,0 @@
-export declare type Direction = 'ltr' | 'rtl';

package/dist/types/direction.js

@@ -1 +0,0 @@
-export {};

package/dist/types/event-options.d.ts

@@ -1,18 +0,0 @@
-export interface EventOptions {
-    /**
-     * A string custom event name to override the default.
-     */
-    name?: string;
-    /**
-     * A Boolean indicating whether the event bubbles up through the DOM or not. default is `false`.
-     */
-    bubbles?: boolean;
-    /**
-     * A Boolean indicating whether the event is cancelable. default is `false`.
-     */
-    cancelable?: boolean;
-    /**
-     * A Boolean value indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM. The default is false.
-     */
-    composed?: boolean;
-}

package/dist/types/event-options.js

@@ -1 +0,0 @@
-export {};

package/dist/types/listen-options.d.ts

@@ -1,7 +0,0 @@
-export interface ListenOptions {
-    target?: 'host' | 'body' | 'document' | 'window';
-    once?: boolean;
-    passive?: boolean;
-    signal?: AbortSignal;
-    capture?: boolean;
-}

package/dist/types/listen-options.js

@@ -1 +0,0 @@
-export {};

package/dist/types/property-options.d.ts

@@ -1,10 +0,0 @@
-export interface PropertyOptions {
-    /**
-     * TODO
-     */
-    attribute?: boolean | string;
-    /**
-     * Whether property value is reflected back to the associated attribute. default is `false`.
-     */
-    reflect?: boolean;
-}

package/dist/types/property-options.js

@@ -1 +0,0 @@
-export {};