@htmlplus/element 0.2.0 → 0.3.2

package/README.md

@@ -258,6 +258,36 @@ export class MyCounter {
 
 </details>
 
+<details>
+  <summary>Attributes</summary>
+
+TODO
+
+```tsx
+import { Attributes, Element } from '@htmlplus/element';
+
+@Element('my-button')
+export class MyButton {
+
+  @Attributes()
+  get attributes() {
+    return {
+      role: 'button'
+    }
+  }
+
+  render() {
+    return <button><slot /></button>
+  }
+}
+```
+
+```html
+<my-button role="button"></my-button>
+```
+
+</details>
+
 <details>
   <summary>Watch</summary>
 
@@ -912,15 +942,15 @@ TODO
 
 ```js
 import compiler from '@htmlplus/element/compiler';
-import { read, parse, extract, attach, uhtml, print } from '@htmlplus/element/compiler';
+import { customElement, extract, parse, read, style, validate } from '@htmlplus/element/compiler';
 
 const { start, next, finish } = compiler(
   read(),
   parse(),
+  validate(),
   extract(),
-  attach(),
-  uhtml(),
-  print(),
+  style(),
+  customElement(),
 );
 
 await start();

package/{dist/client → client}/decorators/attributes.js

@@ -1,4 +1,4 @@
-import * as CONSTANTS from '../../configs/constants.js';
+import * as CONSTANTS from '../../constants/index.js';
 import { appendToMethod, host, sync } from '../utils/index.js';
 export function Attributes() {
     return function (target, propertyKey) {

package/{dist/client → client}/decorators/element.js

@@ -1,5 +1,5 @@
 import { camelCase, paramCase } from 'change-case';
-import * as CONSTANTS from '../../configs/constants.js';
+import * as CONSTANTS from '../../constants/index.js';
 import { call, getMembers, isServer, parseValue, request } from '../utils/index.js';
 export function Element(tag) {
     return function (constructor) {

package/{dist/client → client}/decorators/listen.js

@@ -1,4 +1,4 @@
-import * as CONSTANTS from '../../configs/constants.js';
+import * as CONSTANTS from '../../constants/index.js';
 import { appendToMethod, host, on, off } from '../utils/index.js';
 import { Bind } from './bind.js';
 const defaults = {

package/{dist/client → client}/decorators/watch.js

@@ -1,4 +1,4 @@
-import * as CONSTANTS from '../../configs/constants.js';
+import * as CONSTANTS from '../../constants/index.js';
 import { appendToMethod } from '../utils/index.js';
 // TODO: support * key
 export function Watch(...keys) {

package/{dist/client → client}/utils/get-members.js

@@ -1,4 +1,4 @@
-import * as CONSTANTS from '../../configs/constants.js';
+import * as CONSTANTS from '../../constants/index.js';
 export const getMembers = (target) => {
     var _a;
     return (_a = target.constructor[CONSTANTS.STATIC_MEMBERS]) !== null && _a !== void 0 ? _a : target[CONSTANTS.STATIC_MEMBERS];

package/{dist/client → client}/utils/get-styles.js

@@ -1,4 +1,4 @@
-import * as CONSTANTS from '../../configs/constants.js';
+import * as CONSTANTS from '../../constants/index.js';
 export const getStyles = (target) => {
     var _a;
     return (_a = target.constructor[CONSTANTS.STATIC_STYLES]) !== null && _a !== void 0 ? _a : target[CONSTANTS.STATIC_STYLES];

package/{dist/client → client}/utils/host.js

@@ -1,4 +1,4 @@
-import * as CONSTANTS from '../../configs/constants.js';
+import * as CONSTANTS from '../../constants/index.js';
 export const host = (target) => {
     return target[CONSTANTS.API_HOST]();
 };

package/{dist/client → client}/utils/is-ready.js

@@ -1,4 +1,4 @@
-import * as CONSTANTS from '../../configs/constants.js';
+import * as CONSTANTS from '../../constants/index.js';
 export const isReady = (target) => {
     return target[CONSTANTS.API_READY];
 };

package/{dist/client → client}/utils/on-ready.js

@@ -1,4 +1,4 @@
-import * as CONSTANTS from '../../configs/constants.js';
+import * as CONSTANTS from '../../constants/index.js';
 export function onReady(target, callback) {
     var _a;
     var _b;

package/{dist/client → client}/utils/parse-value.js

@@ -1,4 +1,4 @@
-import * as CONSTANTS from '../../configs/constants.js';
+import * as CONSTANTS from '../../constants/index.js';
 import { toBoolean } from './to-boolean.js';
 // TODO: input type & validate date
 export const parseValue = (value, type) => {

package/{dist/client → client}/utils/render.js

@@ -1,5 +1,5 @@
 import { html, render as renderer } from 'uhtml';
-import * as CONSTANTS from '../../configs/constants.js';
+import * as CONSTANTS from '../../constants/index.js';
 import { call } from './call.js';
 import { getStyles } from './get-styles.js';
 import { host } from './host.js';

package/{dist/client → client}/utils/request.js

@@ -1,5 +1,8 @@
-import * as CONSTANTS from '../../configs/constants.js';
-import { call, isReady, render, task } from '../utils/index.js';
+import * as CONSTANTS from '../../constants/index.js';
+import { call } from '../utils/call';
+import { isReady } from '../utils/is-ready';
+import { render } from '../utils/render';
+import { task } from '../utils/task';
 const targets = new Map();
 export const request = (target, state) => {
     if (!isReady(target))

package/compiler/compiler.js

@@ -0,0 +1,55 @@
+import logUpdate from 'log-update';
+const log = (namespace, message, persist) => {
+    logUpdate(`${new Date().toLocaleTimeString()} [@htmlplus/element]${namespace ? `[${namespace}]` : ''} ${message}`);
+    persist && logUpdate.done();
+};
+export default (...plugins) => {
+    let global = {
+        contexts: []
+    };
+    const start = async () => {
+        log(undefined, 'Starting...', true);
+        for (const plugin of plugins) {
+            if (plugin.start) {
+                global = (await plugin.start(global)) || global;
+            }
+            log(plugin.name, 'Started successfully.');
+        }
+        log(undefined, `${plugins.length} Plugins started successfully.`, true);
+    };
+    const next = async (filePath) => {
+        const key = filePath.split(/[\/|\\]/g).pop();
+        let context = {
+            filePath
+        };
+        log(`${key}`, 'Executing...');
+        for (const plugin of plugins) {
+            if (!plugin.next)
+                continue;
+            context = (await plugin.next(context, global)) || context;
+            global.contexts = global.contexts.filter((current) => current.filePath != context.filePath).concat(context);
+            if (context.isInvalid)
+                break;
+        }
+        if (context.isInvalid)
+            log(key, 'Break executing because file is invalid.');
+        else
+            log(key, 'Executed successfully.');
+        return context;
+    };
+    const finish = async () => {
+        log(undefined, 'Finishing...', true);
+        for (const plugin of plugins) {
+            if (plugin.finish) {
+                global = (await plugin.finish(global)) || global;
+            }
+            log(plugin.name, 'Finished successfully.');
+        }
+        log(undefined, `${plugins.length} Plugins finished successfully.`, true);
+    };
+    return {
+        start,
+        next,
+        finish
+    };
+};

package/compiler/plugins/componentDependencyResolver.d.ts

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

package/compiler/plugins/componentDependencyResolver.js

@@ -0,0 +1,40 @@
+import { visitor } from '../utils/index.js';
+export const componentDependencyResolver = () => {
+    const name = 'componentDependencyResolver';
+    const next = (context, global) => {
+        var _a, _b, _c, _d;
+        if (!context.dependenciesUnresolved) {
+            visitor(context.fileAST, {
+                JSXOpeningElement(path) {
+                    var _a, _b, _c;
+                    const name = path.node.name.name;
+                    if (!name.includes('-'))
+                        return;
+                    const find = (_a = context.dependenciesUnresolved) === null || _a === void 0 ? void 0 : _a.includes(name);
+                    if (find)
+                        return;
+                    (_b = context.dependenciesUnresolved) !== null && _b !== void 0 ? _b : (context.dependenciesUnresolved = []);
+                    (_c = context.dependenciesUnresolved) === null || _c === void 0 ? void 0 : _c.push(name);
+                }
+            });
+        }
+        for (const current of global.contexts) {
+            if (!((_a = current.dependenciesUnresolved) === null || _a === void 0 ? void 0 : _a.length))
+                continue;
+            const dependencies = global.contexts.filter((context) => { var _a; return (_a = current.dependenciesUnresolved) === null || _a === void 0 ? void 0 : _a.includes(context.componentTag); });
+            for (const dependency of dependencies) {
+                if ((_b = current.dependencies) === null || _b === void 0 ? void 0 : _b.some((item) => item.componentTag == dependency.componentTag))
+                    continue;
+                (_c = current.dependencies) !== null && _c !== void 0 ? _c : (current.dependencies = []);
+                current.dependencies.push(dependency);
+                current.dependenciesUnresolved = (_d = current.dependenciesUnresolved) === null || _d === void 0 ? void 0 : _d.filter((current) => current != dependency.componentTag);
+                // TODO
+                // current.fileAST!.program.body.unshift(t.importDeclaration([], t.stringLiteral(dependency.filePath!)));
+            }
+        }
+    };
+    return {
+        name,
+        next
+    };
+};

package/{dist/compiler/plugins/uhtml.d.ts → compiler/plugins/customElement.d.ts}

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

package/compiler/plugins/customElement.js

@@ -0,0 +1,138 @@
+import t from '@babel/types';
+import * as CONSTANTS from '../../constants/index.js';
+import { print, visitor } from '../utils/index.js';
+export const customElement = () => {
+    const name = 'customElement';
+    const next = (context) => {
+        // attach uhtml importer
+        context.fileAST.program.body.unshift(t.importDeclaration([t.importSpecifier(t.identifier('html'), t.identifier('html'))], t.stringLiteral('@htmlplus/element/runtime')));
+        // jsx to uhtml syntax
+        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)));
+                }
+            }
+        });
+        // attach members
+        context.class.body.body.unshift(t.classProperty(t.identifier(CONSTANTS.STATIC_MEMBERS), t.objectExpression([
+            ...context.classProperties.map((property) => {
+                var _a, _b;
+                const type = (_b = (_a = property.typeAnnotation) === null || _a === void 0 ? void 0 : _a.typeAnnotation) === null || _b === void 0 ? void 0 : _b.type;
+                const elements = [];
+                switch (type) {
+                    case 'TSBooleanKeyword':
+                        elements.push(t.stringLiteral(CONSTANTS.TYPE_BOOLEAN));
+                        break;
+                    case 'TSStringKeyword':
+                        elements.push(t.stringLiteral(CONSTANTS.TYPE_STRING));
+                        break;
+                    case 'TSNumberKeyword':
+                        elements.push(t.stringLiteral(CONSTANTS.TYPE_NUMBER));
+                        break;
+                    default:
+                        elements.push(t.nullLiteral());
+                        break;
+                }
+                if (property.value)
+                    elements.push(property.value);
+                return t.objectProperty(t.identifier(property.key['name']), t.arrayExpression(elements));
+            }),
+            ...context.classMethods.map((method) => {
+                const elements = [t.stringLiteral(CONSTANTS.TYPE_FUNCTION)];
+                return t.objectProperty(t.identifier(method.key['name']), t.arrayExpression(elements));
+            })
+        ]), undefined, undefined, undefined, true));
+        // attach typings
+        visitor(context.fileAST, {
+            Program(path) {
+                path.node.body.push(Object.assign(t.tsModuleDeclaration(t.identifier('global'), t.tsModuleBlock([
+                    t.tsInterfaceDeclaration(t.identifier(context.componentInterfaceName), null, [], t.tsInterfaceBody([
+                        ...context.classProperties.map((property) => Object.assign(t.tSPropertySignature(property.key, property.typeAnnotation), {
+                            optional: property.optional,
+                            leadingComments: property.leadingComments
+                        }))
+                    ])),
+                    t.variableDeclaration('var', [
+                        t.variableDeclarator(Object.assign(t.identifier(context.componentInterfaceName), {
+                            typeAnnotation: t.tSTypeAnnotation(t.tSTypeLiteral([
+                                t.tSPropertySignature(t.identifier('prototype'), t.tsTypeAnnotation(t.tSTypeReference(t.identifier(context.componentInterfaceName)))),
+                                t.tSConstructSignatureDeclaration(null, [], t.tSTypeAnnotation(t.tSTypeReference(t.identifier(context.componentInterfaceName))))
+                            ]))
+                        }))
+                    ]),
+                    t.tsInterfaceDeclaration(t.identifier('HTMLElementTagNameMap'), null, [], t.tsInterfaceBody([
+                        t.tSPropertySignature(t.stringLiteral(context.componentTag), t.tSTypeAnnotation(t.tSIntersectionType([t.tSTypeReference(t.identifier(context.componentInterfaceName))])))
+                    ]))
+                ])), {
+                    declare: true,
+                    global: true
+                }));
+                path.node.body.push(t.exportNamedDeclaration(t.tsInterfaceDeclaration(
+                // TODO
+                t.identifier(context.componentClassName + 'JSX'), null, [], t.tsInterfaceBody([
+                    ...context.classProperties.map((property) => Object.assign(t.tSPropertySignature(property.key, property.typeAnnotation), {
+                        optional: property.optional,
+                        leadingComments: property.leadingComments
+                    })),
+                    ...context.classEvents.map((event) => {
+                        var _a, _b;
+                        return Object.assign(t.tSPropertySignature(event.key, t.tsTypeAnnotation(t.tsFunctionType(undefined, [
+                            Object.assign({}, t.identifier('event'), {
+                                typeAnnotation: t.tsTypeAnnotation(t.tsTypeReference(t.identifier('CustomEvent'), (_b = (_a = event.typeAnnotation) === null || _a === void 0 ? void 0 : _a['typeAnnotation']) === null || _b === void 0 ? void 0 : _b.typeParameters))
+                            })
+                        ], t.tsTypeAnnotation(t.tsVoidKeyword())))), {
+                            optional: true,
+                            leadingComments: event.leadingComments
+                        });
+                    })
+                ]))));
+            }
+        });
+        context.script = print(context.fileAST);
+    };
+    return {
+        name,
+        next
+    };
+};

package/compiler/plugins/customElementReact/customElementReact.d.ts

@@ -0,0 +1,12 @@
+import { Global } from '../../../types/index.js';
+export interface CustomElementReactOptions {
+    compact?: boolean;
+    dist: string;
+    eventName?: (eventName: string) => string;
+    importerComponent?: (context: any) => string;
+    importerComponentType?: (context: any) => string;
+}
+export declare const customElementReact: (options: CustomElementReactOptions) => {
+    name: string;
+    finish: (global: Global) => void;
+};