@htmlplus/element 0.1.8 → 0.3.0

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>
 

package/dist/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/decorators/element.js

@@ -1,10 +1,11 @@
-import * as CONSTANTS from '../../configs/constants.js';
-import { call, isServer, parseValue, request } from '../utils/index.js';
+import { camelCase, paramCase } from 'change-case';
+import * as CONSTANTS from '../../constants/index.js';
+import { call, getMembers, isServer, parseValue, request } from '../utils/index.js';
 export function Element(tag) {
     return function (constructor) {
         if (isServer())
             return;
-        const members = constructor[CONSTANTS.STATIC_MEMBERS];
+        const members = getMembers(constructor);
         class Plus extends HTMLElement {
             constructor() {
                 var _a;
@@ -15,15 +16,18 @@ export function Element(tag) {
                 this.attachShadow({ mode: 'open' });
             }
             static get observedAttributes() {
-                return Object.keys(members).filter((key) => members[key][0] != CONSTANTS.TYPE_FUNCTION);
+                return Object.keys(members)
+                    .filter((key) => members[key][0] != CONSTANTS.TYPE_FUNCTION)
+                    .map((key) => paramCase(key));
             }
             adoptedCallback() {
                 call(this.plus, CONSTANTS.LIFECYCLE_ADOPTED);
             }
             attributeChangedCallback(name, prev, next) {
-                const [type] = members[name];
+                const key = camelCase(name);
+                const [type] = members[key];
                 const parsed = parseValue(next, type);
-                this.plus[name] = parsed;
+                this.plus[key] = parsed;
             }
             connectedCallback() {
                 this.plus[CONSTANTS.API_READY] = true;

package/dist/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/decorators/property.js

@@ -1,4 +1,4 @@
-import { defineProperty, getMembers, host, parseValue, request, updateAttribute, onReady } from '../utils/index.js';
+import { defineProperty, getMembers, host, isReady, parseValue, request, updateAttribute, onReady } from '../utils/index.js';
 export function Property(options) {
     return function (target, propertyKey) {
         const values = new Map();
@@ -11,14 +11,20 @@ export function Property(options) {
                 if (value === input)
                     return;
                 values.set(this, input);
+                // TODO
+                const ready = isReady(this);
                 request(this, { [propertyKey]: [input, value] })
                     .then((renderd) => {
+                    const name = String(propertyKey);
+                    const element = host(this);
+                    const hasAttribute = element.hasAttribute(name);
+                    // TODO
+                    if ((options === null || options === void 0 ? void 0 : options.reflect) && !hasAttribute && !renderd && !ready)
+                        updateAttribute(element, name, input);
                     if (!renderd)
                         return;
                     if (!(options === null || options === void 0 ? void 0 : options.reflect))
                         return;
-                    const element = host(this);
-                    const name = String(propertyKey);
                     const raw = element.getAttribute(name);
                     const [type] = getMembers(target)[propertyKey];
                     const parsed = parseValue(raw, type);

package/dist/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/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/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/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/utils/index.d.ts

@@ -6,6 +6,7 @@ export * from './get-members.js';
 export * from './get-styles.js';
 export * from './host.js';
 export * from './is-event.js';
+export * from './is-ready.js';
 export * from './is-server.js';
 export * from './on-ready.js';
 export * from './parse-value.js';

package/dist/client/utils/index.js

@@ -6,6 +6,7 @@ export * from './get-members.js';
 export * from './get-styles.js';
 export * from './host.js';
 export * from './is-event.js';
+export * from './is-ready.js';
 export * from './is-server.js';
 export * from './on-ready.js';
 export * from './parse-value.js';

package/dist/client/utils/is-ready.d.ts

@@ -0,0 +1,2 @@
+import { PlusElement } from '../../types/index.js';
+export declare const isReady: (target: PlusElement) => boolean;

package/dist/client/utils/is-ready.js

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

package/dist/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/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/utils/render.js

@@ -1,6 +1,8 @@
 import { html, render as renderer } from 'uhtml';
-import * as CONSTANTS from '../../configs/constants.js';
-import { call, getStyles, host } from '../utils/index.js';
+import * as CONSTANTS from '../../constants/index.js';
+import { call } from './call.js';
+import { getStyles } from './get-styles.js';
+import { host } from './host.js';
 export const render = (target) => {
     const element = host(target);
     renderer(element.shadowRoot, () => {

package/dist/client/utils/request.js

@@ -1,8 +1,11 @@
-import * as CONSTANTS from '../../configs/constants.js';
-import { call, 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 (!target[CONSTANTS.API_READY])
+    if (!isReady(target))
         return Promise.resolve(false);
     let run = targets.get(target);
     if (run)

package/dist/client/utils/task.js

@@ -1,12 +1,3 @@
-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());
-    });
-};
 export const task = (options) => {
     let states, isPending, updatePromise;
     const run = (state) => {
@@ -18,10 +9,10 @@ export const task = (options) => {
             updatePromise = enqueue();
         return updatePromise;
     };
-    const enqueue = () => __awaiter(void 0, void 0, void 0, function* () {
+    const enqueue = async () => {
         isPending = true;
         try {
-            yield updatePromise;
+            await updatePromise;
         }
         catch (error) {
             Promise.reject(error);
@@ -41,6 +32,6 @@ export const task = (options) => {
             isPending = false;
             throw error;
         }
-    });
+    };
     return run;
 };

package/dist/compiler/compiler.js

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

package/dist/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/dist/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/{print.d.ts → customElement.d.ts}

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

package/dist/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/dist/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;
+};

package/dist/compiler/plugins/{react.proxy/react.proxy.js → customElementReact/customElementReact.js}

@@ -10,17 +10,21 @@ const defaults = {
         return `YOUR_CORE_PACKAGE_NAME#JSX.${context.componentClassName}`;
     }
 };
-export const reactProxy = (options) => {
-    const name = 'react-proxy';
+export const customElementReact = (options) => {
+    const name = 'customElementReact';
     const finish = (global) => {
         options = Object.assign(Object.assign({}, defaults), options);
-        global = Object.assign(Object.assign({}, global), { options });
+        // TODO
+        const globalNew = {
+            contexts: global.contexts.reduce((previous, current) => (Object.assign(Object.assign({}, previous), { [current.filePath]: current })), {}),
+            options
+        };
         const config = { cwd: __dirname(import.meta.url) };
         const isEmpty = isDirectoryEmpty(options.dist);
         const skip = [];
         const getKey = (component) => component.componentClassName;
-        for (const key in global.contexts) {
-            const context = global.contexts[key];
+        for (const key in globalNew.contexts) {
+            const context = globalNew.contexts[key];
             const parse = (input) => {
                 const [source, key] = input.split('#');
                 const [root, ...sub] = key.split('.');
@@ -51,7 +55,7 @@ export const reactProxy = (options) => {
             renderTemplate(patterns, options.dist, config)(state);
         }
         if (options.compact) {
-            global.groups = Object.values(global.contexts)
+            globalNew.groups = Object.values(globalNew.contexts)
                 .sort((a, b) => getKey(b).length - getKey(a).length)
                 .map((component, index, components) => ({
                 key: getKey(component),
@@ -93,7 +97,7 @@ export const reactProxy = (options) => {
                 };
             })
                 .sort((a, b) => (getKey(a.root) < getKey(b.root) ? -1 : 0));
-            for (const group of global.groups) {
+            for (const group of globalNew.groups) {
                 if (group.single)
                     continue;
                 const state = Object.assign({ fileName: group.root.fileName, options }, group);
@@ -107,11 +111,11 @@ export const reactProxy = (options) => {
                 '!templates/src/components/*fileName*.ts.hbs',
                 '!templates/src/components/*fileName*.compact.ts.hbs'
             ];
-            renderTemplate(patterns, options.dist, config)(global);
+            renderTemplate(patterns, options.dist, config)(globalNew);
         }
         if (!isEmpty) {
             const patterns = ['templates/src/proxy*', 'templates/src/components/index*'];
-            renderTemplate(patterns, options.dist, config)(global);
+            renderTemplate(patterns, options.dist, config)(globalNew);
         }
     };
     return {

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

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

package/dist/compiler/plugins/customElementReact/index.js

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

package/dist/compiler/plugins/extract.js

@@ -1,8 +1,7 @@
 import * as t from '@babel/types';
 import { pascalCase, paramCase } from 'change-case';
-import fs from 'fs';
 import path from 'path';
-import * as CONSTANTS from '../../configs/constants.js';
+import * as CONSTANTS from '../../constants/index.js';
 import { hasDecorator, visitor } from '../utils/index.js';
 export const extract = (options) => {
     const name = 'extract';
@@ -56,12 +55,6 @@ export const extract = (options) => {
         // const fileName                     = "dialogBodyNew";           [OK]
         // const className                    = "DialogBody1";             [OK]
         // const category                     = "Dialog";                  [RAW]
-        (() => {
-            const stylePath = path.join(context.directoryPath, `${context.fileName}.scss`);
-            if (!fs.existsSync(stylePath))
-                return;
-            context.stylePath = stylePath;
-        })();
         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));

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

@@ -1,11 +1,7 @@
-export * from './react.proxy/index.js';
-export * from './attach.js';
-export * from './docs.js';
+export * from './customElementReact/index.js';
+export * from './customElement.js';
 export * from './extract.js';
 export * from './parse.js';
-export * from './print.js';
 export * from './read.js';
-export * from './sass.js';
-export * from './uhtml.js';
+export * from './style.js';
 export * from './validate.js';
-export * from './vscode.js';

package/dist/compiler/plugins/index.js

@@ -1,11 +1,7 @@
-export * from './react.proxy/index.js';
-export * from './attach.js';
-export * from './docs.js';
+export * from './customElementReact/index.js';
+export * from './customElement.js';
 export * from './extract.js';
 export * from './parse.js';
-export * from './print.js';
 export * from './read.js';
-export * from './sass.js';
-export * from './uhtml.js';
+export * from './style.js';
 export * from './validate.js';
-export * from './vscode.js';

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

@@ -0,0 +1,12 @@
+import { Options } from 'sass';
+import { Context } from '../../types/index.js';
+export declare type StyleOptions = {
+    extensions?: Array<'scss' | 'css'>;
+    directory?: (context: Context) => string;
+    filename?: (context: Context) => string;
+    sass?: Options<'sync'>;
+};
+export declare const style: (options: StyleOptions) => {
+    name: string;
+    next: (context: Context) => void;
+};

package/dist/compiler/plugins/style.js

@@ -0,0 +1,42 @@
+import t from '@babel/types';
+import fs from 'fs';
+import path from 'path';
+import core from 'sass';
+import * as CONSTANTS from '../../constants/index.js';
+const defaults = {
+    extensions: ['scss', 'css'],
+    directory(context) {
+        return context.directoryPath;
+    },
+    filename(context) {
+        return context.fileName;
+    }
+};
+export const style = (options) => {
+    const name = 'style';
+    options = Object.assign(Object.assign({}, defaults), options);
+    const next = (context) => {
+        const filename = options.filename(context);
+        const directory = options.directory(context);
+        for (let extension of options.extensions) {
+            const stylePath = path.join(directory, `${filename}.${extension}`);
+            if (!fs.existsSync(stylePath))
+                continue;
+            context.stylePath = stylePath;
+            break;
+        }
+        if (!context.stylePath)
+            return;
+        const { css, loadedUrls } = core.compile(context.stylePath, Object.assign(Object.assign({}, (options.sass || {})), { style: 'compressed' }));
+        context.styleParsed = css.toString();
+        // TODO loadedUrls;
+        context.styleDependencies = [];
+        if (!context.styleParsed)
+            return;
+        context.class.body.body.unshift(t.classProperty(t.identifier(CONSTANTS.STATIC_STYLES), t.stringLiteral(context.styleParsed), undefined, null, undefined, true));
+    };
+    return {
+        name,
+        next
+    };
+};

package/dist/compiler/plugins/validate.js

@@ -1,6 +1,38 @@
+import * as CONSTANTS from '../../constants/index.js';
+import { hasDecorator, visitor } from '../utils/index.js';
 export const validate = () => {
     const name = 'validate';
-    const next = (context) => { };
+    const next = (context) => {
+        let hasValidImport;
+        visitor(context.fileAST, {
+            ImportDeclaration(path) {
+                var _a;
+                if (((_a = path.node.source) === null || _a === void 0 ? void 0 : _a.value) !== CONSTANTS.PACKAGE_NAME)
+                    return;
+                for (const specifier of path.node.specifiers) {
+                    if (specifier.imported.name !== CONSTANTS.DECORATOR_ELEMENT)
+                        continue;
+                    hasValidImport = true;
+                    path.stop();
+                }
+            }
+        });
+        let hasValidExport;
+        visitor(context.fileAST, {
+            ExportNamedDeclaration(path) {
+                if (hasValidExport) {
+                    hasValidExport = false;
+                    return path.stop();
+                }
+                if (path.node.declaration.type !== 'ClassDeclaration')
+                    return;
+                if (!hasDecorator(path.node.declaration, CONSTANTS.DECORATOR_ELEMENT))
+                    return;
+                hasValidExport = true;
+            }
+        });
+        context.isInvalid = !hasValidImport || !hasValidExport;
+    };
     return {
         name,
         next

package/dist/{configs/constants.d.ts → constants/index.d.ts}

@@ -1,3 +1,4 @@
+export declare const PACKAGE_NAME = "@htmlplus/element";
 export declare const API_HOST = "$host$";
 export declare const API_READY = "$ready$";
 export declare const API_SETUP = "$setup$";

package/dist/{configs/constants.js → constants/index.js}

@@ -1,3 +1,4 @@
+export const PACKAGE_NAME = '@htmlplus/element';
 // apis
 export const API_HOST = '$host$';
 export const API_READY = '$ready$';

package/dist/types/context.d.ts

@@ -1,5 +1,8 @@
 import { ClassBody, ClassDeclaration, ClassMethod, ClassProperty, File } from '@babel/types';
 export interface Context {
+    dependencies?: Array<Context>;
+    dependenciesUnresolved?: Array<string>;
+    isInvalid?: boolean;
     script?: string;
     componentClassName?: string;
     componentInterfaceName?: string;

package/dist/types/global.d.ts

@@ -0,0 +1,4 @@
+import { Context } from './context.js';
+export interface Global {
+    contexts: Array<Context>;
+}

package/dist/types/global.js

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

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from './context.js';
+export * from './global.js';
 export * from './plugin.js';
 export * from './plus-element.js';

package/dist/types/index.js

@@ -1,3 +1,4 @@
 export * from './context.js';
+export * from './global.js';
 export * from './plugin.js';
 export * from './plus-element.js';

package/dist/types/plugin.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.1.8",
+  "version": "0.3.0",
   "license": "MIT",
   "author": "Masood Abdolian <m.abdolian@gmail.com>",
   "description": "Compiler of HTMLPlus",
@@ -12,8 +12,8 @@
     "postbuild": "node scripts/build.post.js",
     "clean": "rimraf dist",
     "format": "prettier --write .",
-    "dev:start": "node src/dev/start.js",
-    "dev:build": "node src/dev/build.js"
+    "dev:start": "node src/dev/scripts/start.js",
+    "dev:build": "node src/dev/scripts/build.js"
   },
   "exports": {
     ".": {

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

@@ -1,11 +0,0 @@
-import { Context } from '../../types/index.js';
-export interface AttachOptions {
-    dependencies?: boolean;
-    members?: boolean;
-    styles?: boolean;
-    typings?: boolean;
-}
-export declare const attach: (options: AttachOptions) => {
-    name: string;
-    next: (context: Context) => void;
-};

package/dist/compiler/plugins/attach.js

@@ -1,101 +0,0 @@
-import t from '@babel/types';
-import * as CONSTANTS from '../../configs/constants.js';
-import { visitor } from '../utils/index.js';
-const defaults = {
-    dependencies: true,
-    members: true,
-    styles: true,
-    typings: true
-};
-export const attach = (options) => {
-    options = Object.assign({}, defaults, options);
-    const name = 'attach';
-    const next = (context) => {
-        // TODO
-        if (options.dependencies) {
-        }
-        if (options.styles && context.styleParsed)
-            context.class.body.body.unshift(t.classProperty(t.identifier(CONSTANTS.STATIC_STYLES), t.stringLiteral(context.styleParsed), undefined, null, undefined, true));
-        if (options.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));
-        }
-        if (options.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
-                            });
-                        })
-                    ]))));
-                }
-            });
-        }
-    };
-    return {
-        name,
-        next
-    };
-};

package/dist/compiler/plugins/print.js

@@ -1,11 +0,0 @@
-import { print as core } from '../utils/index.js';
-export const print = () => {
-    const name = 'print';
-    const next = (context) => {
-        context.script = core(context.fileAST);
-    };
-    return {
-        name,
-        next
-    };
-};

package/dist/compiler/plugins/react.proxy/index.d.ts

@@ -1 +0,0 @@
-export * from './react.proxy.js';

package/dist/compiler/plugins/react.proxy/index.js

@@ -1 +0,0 @@
-export * from './react.proxy.js';

package/dist/compiler/plugins/react.proxy/react.proxy.d.ts

@@ -1,11 +0,0 @@
-export interface ReactProxyOptions {
-    compact?: boolean;
-    dist: string;
-    eventName?: (eventName: string) => string;
-    importerComponent?: (context: any) => string;
-    importerComponentType?: (context: any) => string;
-}
-export declare const reactProxy: (options: ReactProxyOptions) => {
-    name: string;
-    finish: (global: any) => void;
-};

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

@@ -1,6 +0,0 @@
-import core from 'sass';
-import { Context } from '../../types/index.js';
-export declare const sass: (options?: core.Options<"sync"> | undefined) => {
-    name: string;
-    next: (context: Context) => void;
-};

package/dist/compiler/plugins/sass.js

@@ -1,15 +0,0 @@
-import core from 'sass';
-export const sass = (options) => {
-    const name = 'sass';
-    const next = (context) => {
-        if (!context.stylePath)
-            return;
-        const { css, loadedUrls } = core.compile(context.stylePath, Object.assign(Object.assign({}, (options || {})), { style: 'compressed' }));
-        context.styleParsed = css.toString();
-        context.styleDependencies = []; // TODO loadedUrls;
-    };
-    return {
-        name,
-        next
-    };
-};

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

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

package/dist/compiler/plugins/uhtml.js

@@ -1,59 +0,0 @@
-import t from '@babel/types';
-import { print, visitor } from '../utils/index.js';
-export const uhtml = () => {
-    const name = 'uhtml';
-    const next = (context) => {
-        context.fileAST.program.body.unshift(t.importDeclaration([t.importSpecifier(t.identifier('html'), t.identifier('html'))], t.stringLiteral('@htmlplus/element/runtime')));
-        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)));
-                }
-            }
-        });
-    };
-    return {
-        name,
-        next
-    };
-};