@htmlplus/element 0.5.6 → 0.5.8

package/bundlers/rollup.js

@@ -1,6 +1,6 @@
 import { compiler } from '../compiler/index.js';
 export const rollup = (...plugins) => {
-    const { start, next, finish } = compiler(...plugins);
+    const { start, run, finish } = compiler(...plugins);
     return {
         name: 'htmlplus',
         async buildStart() {
@@ -9,7 +9,7 @@ export const rollup = (...plugins) => {
         async load(id) {
             if (!id.endsWith('.tsx'))
                 return;
-            const { isInvalid, script } = await next(id);
+            const { isInvalid, script } = await run(id);
             if (isInvalid)
                 return;
             return script;

package/bundlers/vite.js

@@ -1,7 +1,7 @@
 import path from 'path';
 import { compiler } from '../compiler/index.js';
 export const vite = (...plugins) => {
-    const { start, next, finish } = compiler(...plugins);
+    const { start, run, finish } = compiler(...plugins);
     return {
         name: 'htmlplus',
         async buildStart() {
@@ -10,7 +10,7 @@ export const vite = (...plugins) => {
         async load(id) {
             if (!id.endsWith('.tsx'))
                 return;
-            let { isInvalid, script, stylePath } = await next(id);
+            let { isInvalid, script, stylePath } = await run(id);
             if (isInvalid)
                 return;
             if (script && stylePath) {

package/client/decorators/element.js

@@ -1,22 +1,29 @@
 import { camelCase, paramCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
-import { call, getMembers, isServer, parseValue, request } from '../utils/index.js';
+import { call, fromAttribute, getMembers, isServer, request } from '../utils/index.js';
 export function Element(tag) {
     return function (constructor) {
         if (isServer())
             return;
         if (customElements.get(tag))
             return;
+        const members = getMembers(constructor);
         class Plus extends HTMLElement {
             constructor() {
                 super();
                 this.attachShadow({ mode: 'open' });
                 this[CONSTANTS.API_INSTANCE] = new constructor();
+                Object.keys(members)
+                    .filter((key) => members[key].type != CONSTANTS.TYPE_FUNCTION)
+                    .forEach((key) => {
+                    members[key].default = this[CONSTANTS.API_INSTANCE][key];
+                });
                 this[CONSTANTS.API_INSTANCE][CONSTANTS.API_HOST] = () => this;
             }
-            // TODO: ignore functions
             static get observedAttributes() {
-                return Object.keys(getMembers(constructor)).map((key) => paramCase(key));
+                return Object.keys(members)
+                    .filter((key) => members[key].type != CONSTANTS.TYPE_FUNCTION)
+                    .map((key) => paramCase(key));
             }
             adoptedCallback() {
                 call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_ADOPTED);
@@ -27,8 +34,8 @@ export function Element(tag) {
                 if (instance[CONSTANTS.API_LOCKED])
                     return;
                 const name = camelCase(attribute);
-                const type = (_a = getMembers(instance)[name]) === null || _a === void 0 ? void 0 : _a.type;
-                const value = parseValue(next, type);
+                const type = (_a = members[name]) === null || _a === void 0 ? void 0 : _a.type;
+                const value = fromAttribute(next, type);
                 if (instance[name] === value)
                     return;
                 instance[name] = value;

package/client/decorators/listen.d.ts

@@ -12,9 +12,9 @@ export interface ListenOptions {
 export declare const ListenOptionsDefault: ListenOptions;
 /**
  * Will be called whenever the specified event is delivered to the target.
- * [More](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).
- * @param type TODO
- * @param options TODO
+ * [More](https://mdn.io/addEventListener).
+ * @param type A case-sensitive string representing the [event type](https://mdn.io/events) to listen for.
+ * @param options An object that specifies characteristics about the event listener.
  */
 export declare function Listen(type: string, options?: ListenOptions): (target: PlusElement, propertyKey: PropertyKey, descriptor: PropertyDescriptor) => {
     configurable: boolean;

package/client/decorators/listen.js

@@ -9,9 +9,9 @@ export const ListenOptionsDefault = {
 };
 /**
  * Will be called whenever the specified event is delivered to the target.
- * [More](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).
- * @param type TODO
- * @param options TODO
+ * [More](https://mdn.io/addEventListener).
+ * @param type A case-sensitive string representing the [event type](https://mdn.io/events) to listen for.
+ * @param options An object that specifies characteristics about the event listener.
  */
 export function Listen(type, options) {
     return function (target, propertyKey, descriptor) {

package/client/decorators/property.d.ts

@@ -4,5 +4,9 @@ export interface PropertyOptions {
      * Whether property value is reflected back to the associated attribute. default is `false`.
      */
     reflect?: boolean;
+    /**
+     * TODO
+     */
+    type?: number;
 }
 export declare function Property(options?: PropertyOptions): (target: PlusElement, propertyKey: PropertyKey) => void;

package/client/decorators/property.js

@@ -1,9 +1,10 @@
 import * as CONSTANTS from '../../constants/index.js';
-import { defineProperty, host, request, appendToMethod, updateAttribute, getConfig, getMembers, getTag } from '../utils/index.js';
+import { addMember, appendToMethod, defineProperty, getConfig, getMembers, getTag, host, request, updateAttribute } from '../utils/index.js';
 export function Property(options) {
     return function (target, propertyKey) {
         const name = String(propertyKey);
         const symbol = Symbol();
+        addMember(target.constructor, name, options);
         function get() {
             return this[symbol];
         }
@@ -25,7 +26,7 @@ export function Property(options) {
             var _a;
             const element = host(this);
             // TODO: experimental for global config
-            if (((_a = getMembers(this)[name]) === null || _a === void 0 ? void 0 : _a.default) === this[name]) {
+            if (((_a = getMembers(this.constructor)[name]) === null || _a === void 0 ? void 0 : _a.default) === this[name]) {
                 const config = getConfig('component', getTag(target), 'property', name);
                 if (typeof config != 'undefined')
                     this[name] = config;

package/client/decorators/watch.js

@@ -15,15 +15,15 @@ export function Watch(keys, immediate) {
         // Registers a lifecycle to detect changes.
         appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function (states) {
             // Skips the logic if 'immediate' wasn't passed.
-            if (!immediate && !this[CONSTANTS.API_LOADED])
+            if (!immediate && !this[CONSTANTS.API_RENDER_COMPLETED])
                 return;
             // Loops the keys.
-            states.forEach((prev, key) => {
+            states.forEach((previous, key) => {
                 // Skips the current key.
                 if (all.length && !all.includes(key))
                     return;
                 // Invokes the method with parameters.
-                this[propertyKey](this[key], prev, key);
+                this[propertyKey](this[key], previous, key);
             });
         });
     };

package/client/utils/addMember.d.ts

@@ -0,0 +1,2 @@
+import { PlusElement } from '../../types';
+export declare const addMember: (target: PlusElement, key: string, data: any) => void;

package/client/utils/addMember.js

@@ -0,0 +1,6 @@
+import * as CONSTANTS from '../../constants/index.js';
+export const addMember = (target, key, data) => {
+    var _a;
+    target[_a = CONSTANTS.STATIC_MEMBERS] || (target[_a] = {});
+    target[CONSTANTS.STATIC_MEMBERS][key] = data;
+};

package/client/utils/appendToMethod.js

@@ -1,7 +1,15 @@
 export const appendToMethod = (target, propertyKey, handler) => {
-    const callback = target[propertyKey];
-    target[propertyKey] = function (...parameters) {
+    // Gets the previous function
+    const previous = target[propertyKey];
+    // Creates new function
+    function next(...parameters) {
+        // Calls the previous
+        const result = previous === null || previous === void 0 ? void 0 : previous.bind(this)(...parameters);
+        // Calls the appended
         handler.bind(this)(...parameters);
-        return callback === null || callback === void 0 ? void 0 : callback.bind(this)(...parameters);
-    };
+        // Returns the result
+        return result;
+    }
+    // Replaces the next with the previous one
+    target[propertyKey] = next;
 };

package/client/utils/fromAttribute.d.ts

@@ -0,0 +1 @@
+export declare const fromAttribute: (input: any, type: any) => any;

package/client/utils/fromAttribute.js

@@ -0,0 +1,53 @@
+import * as CONSTANTS from '../../constants/index.js';
+import { typeOf } from './typeOf.js';
+export const fromAttribute = (input, type) => {
+    const string = `${input}`;
+    if (CONSTANTS.TYPE_BOOLEAN & type) {
+        if (string === '')
+            return true;
+        if (string === 'false')
+            return false;
+        if (string === 'true')
+            return true;
+    }
+    if (CONSTANTS.TYPE_NUMBER & type) {
+        if (string != '' && !isNaN(input)) {
+            return parseFloat(input);
+        }
+    }
+    if (CONSTANTS.TYPE_NULL & type) {
+        if (string === 'null') {
+            return null;
+        }
+    }
+    if (CONSTANTS.TYPE_DATE & type) {
+        const value = new Date(input);
+        if (value.toString() != 'Invalid Date') {
+            return value;
+        }
+    }
+    if (CONSTANTS.TYPE_ARRAY & type) {
+        try {
+            const value = JSON.parse(input);
+            if (typeOf(value) == 'array') {
+                return value;
+            }
+        }
+        catch (_a) { }
+    }
+    if (CONSTANTS.TYPE_OBJECT & type) {
+        try {
+            const value = JSON.parse(input);
+            if (typeOf(value) == 'object') {
+                return value;
+            }
+        }
+        catch (_b) { }
+    }
+    if (CONSTANTS.TYPE_UNDEFINED & type) {
+        if (string === 'undefined') {
+            return undefined;
+        }
+    }
+    return input;
+};

package/client/utils/getMembers.js

@@ -1,5 +1,5 @@
 import * as CONSTANTS from '../../constants/index.js';
 // TODO
 export const getMembers = (target) => {
-    return target.constructor[CONSTANTS.STATIC_MEMBERS] || target[CONSTANTS.STATIC_MEMBERS] || {};
+    return target[CONSTANTS.STATIC_MEMBERS] || {};
 };

package/client/utils/index.d.ts

@@ -1,7 +1,9 @@
+export * from './addMember.js';
 export * from './appendToMethod.js';
 export * from './call.js';
 export * from './config.js';
 export * from './defineProperty.js';
+export * from './fromAttribute.js';
 export * from './getFramework.js';
 export * from './getMembers.js';
 export * from './getStyles.js';
@@ -11,7 +13,6 @@ export * from './isEvent.js';
 export * from './isServer.js';
 export * from './off.js';
 export * from './on.js';
-export * from './parseValue.js';
 export * from './request.js';
 export * from './shadowRoot.js';
 export * from './syncAttributes.js';

package/client/utils/index.js

@@ -1,7 +1,9 @@
+export * from './addMember.js';
 export * from './appendToMethod.js';
 export * from './call.js';
 export * from './config.js';
 export * from './defineProperty.js';
+export * from './fromAttribute.js';
 export * from './getFramework.js';
 export * from './getMembers.js';
 export * from './getStyles.js';
@@ -11,7 +13,6 @@ export * from './isEvent.js';
 export * from './isServer.js';
 export * from './off.js';
 export * from './on.js';
-export * from './parseValue.js';
 export * from './request.js';
 export * from './shadowRoot.js';
 export * from './syncAttributes.js';

package/client/utils/request.js

@@ -55,10 +55,10 @@ export const request = (target, name, previous, callback) => {
             });
             // Calls the lifecycle's callback after the rendering phase.
             call(target, CONSTANTS.LIFECYCLE_UPDATED, states);
-            // TODO: releated to the @Watch decorator.
-            target[CONSTANTS.API_LOADED] = true;
             // Clears stacks.
             stacks.clear();
+            // TODO: releated to the @Watch decorator.
+            target[CONSTANTS.API_RENDER_COMPLETED] = true;
         }
     }));
     // Calls the micro task.

package/client/utils/task.js

@@ -1,23 +1,23 @@
 export const task = (options) => {
-    let isPending, updatePromise;
+    let isPending, promise;
     const run = () => {
         if (options.canStart && !options.canStart())
             return Promise.resolve(false);
         if (!isPending)
-            updatePromise = enqueue();
-        return updatePromise;
+            promise = enqueue();
+        return promise;
     };
     const enqueue = async () => {
         isPending = true;
         try {
-            await updatePromise;
+            await promise;
         }
         catch (error) {
             Promise.reject(error);
         }
         // TODO: maybe is optional
         if (!isPending)
-            return updatePromise;
+            return promise;
         try {
             if (options.canRun && !options.canRun())
                 return (isPending = false);

package/compiler/compiler.d.ts

@@ -1,6 +1,6 @@
 import { Context, Plugin } from '../types';
 export declare const compiler: (...plugins: Array<Plugin>) => {
     start: () => Promise<void>;
-    next: (filePath: string) => Promise<Context>;
+    run: (filePath: string) => Promise<Context>;
     finish: () => Promise<void>;
 };

package/compiler/compiler.js

@@ -19,38 +19,33 @@ export const compiler = (...plugins) => {
             if (!plugin.start)
                 continue;
             log(`Plugin '${plugin.name}' is starting...`);
-            await plugin.start(global);
+            global = (await plugin.start(global)) || global;
             log(`Plugin '${plugin.name}' started successfully.`);
         }
         log(`Plugins started successfully.`, true);
     };
-    const next = async (filePath) => {
-        var _a;
+    const run = async (filePath) => {
         const key = filePath.split(/[\/|\\]/g).pop();
         let context = {
             filePath
         };
+        const parsed = path.parse(filePath);
         for (const plugin of plugins) {
-            if (!plugin.next)
+            if (!plugin.run)
                 continue;
-            log(`Plugin '${plugin.name}' is executing on '${path.basename(filePath)}' file.`);
-            const output = await plugin.next(context, global);
-            // TODO
-            if (output) {
-                context.outputs = ((_a = context.outputs) !== null && _a !== void 0 ? _a : [])
-                    .filter((output) => {
-                    if (plugin.name != output.name)
-                        return true;
-                    if (plugin.options && plugin.options != output.options)
-                        return true;
-                })
-                    .concat({
-                    name: plugin.name,
-                    options: plugin.options,
-                    output
-                });
+            log(`Plugin '${plugin.name}' is executing on '${path.basename(parsed.dir)}/${parsed.base}' file.`);
+            try {
+                context = (await plugin.run(context, global)) || context;
             }
-            global.contexts = global.contexts.filter((current) => current.filePath != context.filePath).concat(context);
+            catch (error) {
+                log(`Error in '${plugin.name}' plugin on '${path.basename(parsed.dir)}/${parsed.base}' file.`, true);
+                throw error;
+            }
+            global.contexts = global.contexts
+                .filter((current) => {
+                return current.filePath != context.filePath;
+            })
+                .concat(context);
             log(`Plugin '${plugin.name}' executed successfully on '${path.basename(filePath)}' file.`);
             if (context.isInvalid)
                 break;
@@ -66,11 +61,11 @@ export const compiler = (...plugins) => {
             if (!plugin.finish)
                 continue;
             log(`Plugin '${plugin.name}' is finishing...`);
-            await plugin.finish(global);
+            global = (await plugin.finish(global)) || global;
             log(`Plugin '${plugin.name}' finished successfully.`);
         }
         log(`Plugins finished successfully.`, true);
         log(`Finished.`, true);
     };
-    return { start, next, finish };
+    return { start, run, finish };
 };

package/compiler/plugins/assets.d.ts

@@ -1,11 +1,8 @@
-import { Context } from '../../types';
+import { Context, Plugin } from '../../types';
 export declare const ASSETS_OPTIONS: Partial<AssetsOptions>;
 export type AssetsOptions = {
     once?: boolean;
     destination: (context: Context) => string;
     source?: (context: Context) => string;
 };
-export declare const assets: (options: AssetsOptions) => {
-    name: string;
-    next: (context: Context) => void;
-};
+export declare const assets: (options: AssetsOptions) => Plugin;

package/compiler/plugins/assets.js

@@ -13,7 +13,7 @@ export const assets = (options) => {
     const name = 'assets';
     options = Object.assign({}, ASSETS_OPTIONS, options);
     const sources = new Set();
-    const next = (context) => {
+    const run = (context) => {
         var _a, _b;
         const source = (_a = options.source) === null || _a === void 0 ? void 0 : _a.call(options, context);
         if (!source)
@@ -29,5 +29,5 @@ export const assets = (options) => {
         fs.copySync(source, destination);
         context.assets = source;
     };
-    return { name, next };
+    return { name, run };
 };

package/compiler/plugins/copy.d.ts

@@ -1,13 +1,9 @@
+import { Plugin } from '../../types';
 export declare const COPY_OPTIONS: Partial<CopyOptions>;
 export interface CopyOptions {
-    at?: 'start' | 'next' | 'finish';
+    at?: 'start' | 'run' | 'finish';
     destination: string;
     source: string;
     transformer?: (content: string) => string;
 }
-export declare const copy: (options: CopyOptions) => {
-    name: string;
-    start: () => void;
-    next: () => void;
-    finish: () => void;
-};
+export declare const copy: (options: CopyOptions) => Plugin;

package/compiler/plugins/copy.js

@@ -19,11 +19,11 @@ export const copy = (options) => {
     const start = () => {
         copy('start');
     };
-    const next = () => {
-        copy('next');
+    const run = () => {
+        copy('run');
     };
     const finish = () => {
         copy('finish');
     };
-    return { name, start, next, finish };
+    return { name, start, run, finish };
 };

package/compiler/plugins/customElement.d.ts

@@ -1,9 +1,6 @@
-import { Context } from '../../types';
+import { Plugin } from '../../types';
 export declare const CUSTOM_ELEMENT_OPTIONS: Partial<CustomElementOptions>;
 export interface CustomElementOptions {
     typings?: boolean;
 }
-export declare const customElement: (options?: CustomElementOptions) => {
-    name: string;
-    next: (context: Context) => void;
-};
+export declare const customElement: (options?: CustomElementOptions) => Plugin;

package/compiler/plugins/customElement.js

@@ -1,7 +1,7 @@
 import t from '@babel/types';
 import { pascalCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
-import { addDependency, print, visitor } from '../utils/index.js';
+import { addDependency, getType, print, visitor } from '../utils/index.js';
 export const CUSTOM_ELEMENT_OPTIONS = {
     // prefix: undefined,
     typings: true
@@ -10,7 +10,7 @@ export const CUSTOM_ELEMENT_OPTIONS = {
 export const customElement = (options) => {
     const name = 'customElement';
     options = Object.assign({}, CUSTOM_ELEMENT_OPTIONS, options);
-    const next = (context) => {
+    const run = (context) => {
         const ast = t.cloneNode(context.fileAST, true);
         // attaches name
         visitor(ast, {
@@ -98,49 +98,112 @@ export const customElement = (options) => {
                 t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_DEPENDENCY, true);
             }
         });
+        // adds type to properties
+        visitor(ast, {
+            Decorator(path) {
+                var _a, _b;
+                const { expression } = path.node;
+                if (((_a = expression.callee) === null || _a === void 0 ? void 0 : _a.name) != CONSTANTS.DECORATOR_PROPERTY)
+                    return;
+                let type = 0;
+                const extract = (input) => {
+                    switch (input === null || input === void 0 ? void 0 : input.type) {
+                        case 'BooleanLiteral':
+                            type |= CONSTANTS.TYPE_BOOLEAN;
+                            break;
+                        case 'NumericLiteral':
+                            type |= CONSTANTS.TYPE_NUMBER;
+                            break;
+                        case 'StringLiteral':
+                            type |= CONSTANTS.TYPE_ENUM;
+                            break;
+                        case 'TSArrayType':
+                            type |= CONSTANTS.TYPE_ARRAY;
+                            break;
+                        case 'TSBooleanKeyword':
+                            type |= CONSTANTS.TYPE_BOOLEAN;
+                            break;
+                        case 'TSLiteralType':
+                            extract(input.literal);
+                            break;
+                        case 'TSNullKeyword':
+                            type |= CONSTANTS.TYPE_NULL;
+                            break;
+                        case 'TSNumberKeyword':
+                            type |= CONSTANTS.TYPE_NUMBER;
+                            break;
+                        case 'TSObjectKeyword':
+                            type |= CONSTANTS.TYPE_OBJECT;
+                            break;
+                        case 'TSStringKeyword':
+                            type |= CONSTANTS.TYPE_STRING;
+                            break;
+                        case 'TSTypeLiteral':
+                            type |= CONSTANTS.TYPE_OBJECT;
+                            break;
+                        case 'TSTypeReference':
+                            if (!input.typeName)
+                                break;
+                            switch (input.typeName.name) {
+                                case 'Array':
+                                    type |= CONSTANTS.TYPE_ARRAY;
+                                    break;
+                                case 'Boolean':
+                                    type |= CONSTANTS.TYPE_BOOLEAN;
+                                    break;
+                                case 'bool':
+                                    type |= CONSTANTS.TYPE_BOOLEAN;
+                                    break;
+                                case 'Date':
+                                    type |= CONSTANTS.TYPE_DATE;
+                                    break;
+                                case 'Number':
+                                    type |= CONSTANTS.TYPE_NUMBER;
+                                    break;
+                                case 'Object':
+                                    type |= CONSTANTS.TYPE_OBJECT;
+                                    break;
+                            }
+                            break;
+                        case 'TSUnionType':
+                            input.types.forEach(extract);
+                            break;
+                    }
+                };
+                extract(getType(ast, (_b = path.parentPath.node.typeAnnotation) === null || _b === void 0 ? void 0 : _b.typeAnnotation, { directory: context.directoryPath }));
+                if (!expression.arguments.length) {
+                    expression.arguments.push(t.objectExpression([]));
+                }
+                const [argument] = expression.arguments;
+                argument.properties = argument.properties.filter((property) => {
+                    return property.key.name != CONSTANTS.STATIC_MEMBERS_TYPE;
+                });
+                argument.properties.push(t.objectProperty(t.identifier(CONSTANTS.STATIC_MEMBERS_TYPE), t.numericLiteral(type)));
+            }
+        });
         // attaches members
         visitor(ast, {
             ClassDeclaration(path) {
                 const { body, id } = path.node;
                 if (id.name != context.className)
                     return;
-                const node = t.classProperty(t.identifier(CONSTANTS.STATIC_MEMBERS), t.objectExpression([
-                    ...context.classProperties.map((property) => {
-                        var _a, _b, _c, _d, _e, _f;
-                        const properties = [];
-                        if (property.value) {
-                            properties.push(t.objectProperty(t.identifier(CONSTANTS.STATIC_MEMBERS_INITIALIZER), property.value));
-                        }
-                        const type = (() => {
-                            var _a, _b;
-                            switch ((_b = (_a = property.typeAnnotation) === null || _a === void 0 ? void 0 : _a.typeAnnotation) === null || _b === void 0 ? void 0 : _b.type) {
-                                case 'TSBooleanKeyword':
-                                    return t.stringLiteral(CONSTANTS.TYPE_BOOLEAN);
-                                case 'TSStringKeyword':
-                                    return t.stringLiteral(CONSTANTS.TYPE_STRING);
-                                case 'TSNumberKeyword':
-                                    return t.stringLiteral(CONSTANTS.TYPE_NUMBER);
-                            }
-                        })();
-                        if (type) {
-                            properties.push(t.objectProperty(t.identifier(CONSTANTS.STATIC_MEMBERS_TYPE), type));
-                        }
-                        // TODO
-                        // prettier-ignore
-                        (_f = (_e = (_d = (_c = (_b = (_a = property === null || property === void 0 ? void 0 : property.decorators) === null || _a === void 0 ? void 0 : _a.find((decorator) => {
-                            var _a, _b;
-                            return ((_b = (_a = decorator.expression) === null || _a === void 0 ? void 0 : _a['callee']) === null || _b === void 0 ? void 0 : _b.name) == CONSTANTS.DECORATOR_PROPERTY;
-                        })) === null || _b === void 0 ? void 0 : _b.expression) === null || _c === void 0 ? void 0 : _c['arguments']) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.properties) === null || _f === void 0 ? void 0 : _f.forEach((property) => properties.push(property));
-                        return t.objectProperty(t.identifier(property.key['name']), t.objectExpression(properties));
-                    }),
-                    ...context.classMethods.map((method) => t.objectProperty(t.identifier(method.key['name']), t.objectExpression([
-                        t.objectProperty(t.identifier(CONSTANTS.STATIC_MEMBERS_TYPE), t.stringLiteral(CONSTANTS.TYPE_FUNCTION))
-                    ])))
-                ]), undefined, undefined, undefined, true);
+                const node = t.classProperty(t.identifier(CONSTANTS.STATIC_MEMBERS), t.objectExpression(context.classMethods.map((method) => t.objectProperty(t.identifier(method.key['name']), t.objectExpression([
+                    t.objectProperty(t.identifier(CONSTANTS.STATIC_MEMBERS_TYPE), t.numericLiteral(CONSTANTS.TYPE_FUNCTION))
+                ])))), undefined, undefined, undefined, true);
                 t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_PROPERTY, true);
                 body.body.unshift(node);
             }
         });
+        // removes methods decorators
+        visitor(ast, {
+            Decorator(path) {
+                var _a;
+                const { expression } = path.node;
+                if (((_a = expression.callee) === null || _a === void 0 ? void 0 : _a.name) != CONSTANTS.DECORATOR_METHOD)
+                    return;
+                path.remove();
+            }
+        });
         // attaches typings
         if (options === null || options === void 0 ? void 0 : options.typings) {
             visitor(ast, {
@@ -209,5 +272,5 @@ export const customElement = (options) => {
         // TODO
         context.script = print(ast);
     };
-    return { name, next };
+    return { name, run };
 };

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

@@ -1,4 +1,4 @@
-import { Context, Global } from '../../../types';
+import { Context, Plugin } from '../../../types';
 export declare const CUSTOM_ELEMENT_REACT_OPTIONS: Partial<CustomElementReactOptions>;
 export interface CustomElementReactOptions {
     compact?: boolean;
@@ -13,7 +13,4 @@ export interface CustomElementReactOptions {
         local: string;
     };
 }
-export declare const customElementReact: (options: CustomElementReactOptions) => {
-    name: string;
-    finish: (global: Global) => void;
-};
+export declare const customElementReact: (options: CustomElementReactOptions) => Plugin;

package/compiler/plugins/document.d.ts

@@ -1,10 +1,7 @@
-import { Context, Global } from '../../types';
+import { Context, Plugin } from '../../types';
 export declare const DOCUMENT_OPTIONS: Partial<DocumentOptions>;
 export interface DocumentOptions {
     destination: string;
     transformer?: (context: Context, element: any) => any;
 }
-export declare const document: (options: DocumentOptions) => {
-    name: string;
-    finish: (global: Global) => void;
-};
+export declare const document: (options: DocumentOptions) => Plugin;

package/compiler/plugins/extract.d.ts

@@ -1,9 +1,6 @@
-import { Context } from '../../types';
+import { Plugin } from '../../types';
 export declare const EXTRACT_OPTIONS: Partial<ExtractOptions>;
 export interface ExtractOptions {
     prefix?: string;
 }
-export declare const extract: (options?: ExtractOptions) => {
-    name: string;
-    next: (context: Context) => void;
-};
+export declare const extract: (options?: ExtractOptions) => Plugin;

package/compiler/plugins/extract.js

@@ -7,7 +7,7 @@ export const EXTRACT_OPTIONS = {};
 export const extract = (options) => {
     const name = 'extract';
     options = Object.assign({}, EXTRACT_OPTIONS, options);
-    const next = (context) => {
+    const run = (context) => {
         var _a, _b;
         visitor(context.fileAST, {
             ClassDeclaration: {
@@ -71,5 +71,5 @@ export const extract = (options) => {
         context.classHasUnmount = (context.classMembers || []).some((member) => member['key'].name == CONSTANTS.LIFECYCLE_DISCONNECTED);
         context.classRender = (context.classMembers || []).find((member) => member['key'].name == CONSTANTS.METHOD_RENDER);
     };
-    return { name, next };
+    return { name, run };
 };

package/compiler/plugins/parse.d.ts

@@ -1,8 +1,5 @@
 import { ParserOptions } from '@babel/parser';
-import { Context } from '../../types';
+import { Plugin } from '../../types';
 export declare const PARSE_OPTIONS: Partial<ParseOptions>;
 export type ParseOptions = ParserOptions;
-export declare const parse: (options?: ParseOptions) => {
-    name: string;
-    next: (context: Context) => void;
-};
+export declare const parse: (options?: ParseOptions) => Plugin;

package/compiler/plugins/parse.js

@@ -6,9 +6,9 @@ export const PARSE_OPTIONS = {
 export const parse = (options) => {
     const name = 'parse';
     options = Object.assign({}, PARSE_OPTIONS, options);
-    const next = (context) => {
+    const run = (context) => {
         var _a;
         context.fileAST = (_a = context.fileAST) !== null && _a !== void 0 ? _a : parser(context.fileContent, options);
     };
-    return { name, next };
+    return { name, run };
 };

package/compiler/plugins/read.d.ts

@@ -1,11 +1,8 @@
 /// <reference types="node" />
-import { Context } from '../../types';
+import { Plugin } from '../../types';
 export declare const READ_OPTIONS: Partial<ReadOptions>;
 export type ReadOptions = {
     encoding: BufferEncoding;
     flag?: string | undefined;
 };
-export declare const read: (options?: ReadOptions) => {
-    name: string;
-    next: (context: Context) => void;
-};
+export declare const read: (options?: ReadOptions) => Plugin;

package/compiler/plugins/read.js

@@ -5,9 +5,9 @@ export const READ_OPTIONS = {
 export const read = (options) => {
     const name = 'read';
     options = Object.assign({}, READ_OPTIONS, options);
-    const next = (context) => {
+    const run = (context) => {
         var _a;
         context.fileContent = (_a = context.fileContent) !== null && _a !== void 0 ? _a : fs.readFileSync(context.filePath, options);
     };
-    return { name, next };
+    return { name, run };
 };

package/compiler/plugins/readme.d.ts

@@ -1,9 +1,6 @@
-import { Context, Global } from '../../types';
+import { Context, Plugin } from '../../types';
 export declare const README_OPTIONS: Partial<ReadmeOptions>;
 export type ReadmeOptions = {
     source?: (context: Context) => string;
 };
-export declare const readme: (options: ReadmeOptions) => {
-    name: string;
-    finish: (global: Global) => void;
-};
+export declare const readme: (options: ReadmeOptions) => Plugin;

package/compiler/plugins/style.d.ts

@@ -1,9 +1,6 @@
-import { Context } from '../../types';
+import { Context, Plugin } from '../../types';
 export declare const STYLE_OPTIONS: Partial<StyleOptions>;
 export type StyleOptions = {
     source?: (context: Context) => string | string[];
 };
-export declare const style: (options?: StyleOptions) => {
-    name: string;
-    next: (context: Context) => void;
-};
+export declare const style: (options?: StyleOptions) => Plugin;

package/compiler/plugins/style.js

@@ -17,7 +17,7 @@ export const STYLE_OPTIONS = {
 export const style = (options) => {
     const name = 'style';
     options = Object.assign({}, STYLE_OPTIONS, options);
-    const next = (context) => {
+    const run = (context) => {
         var _a;
         const sources = [(_a = options === null || options === void 0 ? void 0 : options.source) === null || _a === void 0 ? void 0 : _a.call(options, context)].flat();
         for (const source of sources) {
@@ -37,5 +37,5 @@ export const style = (options) => {
         t.addComment(property, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_PROPERTY, true);
         context.class.body.body.unshift(property);
     };
-    return { name, next };
+    return { name, run };
 };

package/compiler/plugins/validate.d.ts

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

package/compiler/plugins/validate.js

@@ -2,7 +2,7 @@ import * as CONSTANTS from '../../constants/index.js';
 import { hasDecorator, visitor } from '../utils/index.js';
 export const validate = () => {
     const name = 'validate';
-    const next = (context) => {
+    const run = (context) => {
         let hasValidImport;
         visitor(context.fileAST, {
             ImportDeclaration(path) {
@@ -33,5 +33,5 @@ export const validate = () => {
         });
         context.isInvalid = !hasValidImport || !hasValidExport;
     };
-    return { name, next };
+    return { name, run };
 };

package/compiler/plugins/visualStudioCode.d.ts

@@ -1,9 +1,6 @@
-import { Global } from '../../types';
+import { Plugin } from '../../types';
 export declare const VISUAL_STUDIO_CODE_OPTIONS: Partial<VisualStudioCodeOptions>;
 export interface VisualStudioCodeOptions {
     destination: string;
 }
-export declare const visualStudioCode: (options: VisualStudioCodeOptions) => {
-    name: string;
-    finish: (global: Global) => void;
-};
+export declare const visualStudioCode: (options: VisualStudioCodeOptions) => Plugin;

package/compiler/plugins/webTypes.d.ts

@@ -1,4 +1,4 @@
-import { Context, Global } from '../../types';
+import { Context, Plugin } from '../../types';
 export declare const WEB_TYPES_OPTIONS: Partial<WebTypesOptions>;
 export interface WebTypesOptions {
     destination: string;
@@ -7,7 +7,4 @@ export interface WebTypesOptions {
     reference?: (context: Context) => string;
     transformer?: (context: Context, component: any) => any;
 }
-export declare const webTypes: (options: WebTypesOptions) => {
-    name: string;
-    finish: (global: Global) => void;
-};
+export declare const webTypes: (options: WebTypesOptions) => Plugin;

package/compiler/utils/getType.d.ts

@@ -1,2 +1,2 @@
-import { File } from '@babel/types';
-export declare const getType: (file: File, node: any, options: any) => any;
+import { File, Node } from '@babel/types';
+export declare const getType: (file: File, node: Node, options: any) => any;

package/compiler/utils/getType.js

@@ -1,6 +1,8 @@
 import { parse } from '@babel/parser';
+import glob from 'fast-glob';
 import fs from 'fs-extra';
 import { dirname, resolve } from 'path';
+import { join } from 'path';
 import { visitor } from './visitor.js';
 // TODO: return type
 export const getType = (file, node, options) => {
@@ -12,7 +14,7 @@ export const getType = (file, node, options) => {
     let result;
     visitor(file, {
         ClassDeclaration(path) {
-            if (path.node.id.name != node.typeName.name)
+            if (path.node.id.name != node.typeName['name'])
                 return;
             result = path.node;
             path.stop();
@@ -20,7 +22,7 @@ export const getType = (file, node, options) => {
         ImportDeclaration(path) {
             for (const specifier of path.node.specifiers) {
                 const alias = specifier.local.name;
-                if (alias != node.typeName.name)
+                if (alias != node.typeName['name'])
                     continue;
                 let key;
                 switch (specifier.type) {
@@ -35,14 +37,18 @@ export const getType = (file, node, options) => {
                         break;
                 }
                 try {
+                    const reference = glob
+                        .sync(['.ts*', '/index.ts*'].map((key) => {
+                        return join(directory, path.node.source.value).replace(/\\/g, '/') + key;
+                    }))
+                        .find((reference) => fs.existsSync(reference));
+                    const content = fs.readFileSync(reference, 'utf8');
                     const filePath = resolve(directory, path.node.source.value + '.ts');
-                    path.$ast =
-                        path.$ast ||
-                            parse(fs.readFileSync(filePath, 'utf8'), {
-                                allowImportExportEverywhere: true,
-                                plugins: ['typescript'],
-                                ranges: false
-                            });
+                    path.$ast || (path.$ast = parse(content, {
+                        allowImportExportEverywhere: true,
+                        plugins: ['typescript'],
+                        ranges: false
+                    }));
                     result = getType(path.$ast, node, {
                         directory: dirname(filePath)
                     });
@@ -53,15 +59,15 @@ export const getType = (file, node, options) => {
             }
         },
         TSInterfaceDeclaration(path) {
-            if (path.node.id.name != node.typeName.name)
+            if (path.node.id.name != node.typeName['name'])
                 return;
             result = path.node;
             path.stop();
         },
         TSTypeAliasDeclaration(path) {
-            if (path.node.id.name != node.typeName.name)
+            if (path.node.id.name != node.typeName['name'])
                 return;
-            result = path.node;
+            result = path.node.typeAnnotation;
             path.stop();
         }
     });

package/constants/index.d.ts

@@ -3,9 +3,9 @@ export declare const API_ATTRIBUTES_SYNCER: unique symbol;
 export declare const API_CONNECTED: unique symbol;
 export declare const API_HOST: unique symbol;
 export declare const API_INSTANCE: unique symbol;
-export declare const API_LOADED: unique symbol;
 export declare const API_LOCKED: unique symbol;
 export declare const API_REQUEST: unique symbol;
+export declare const API_RENDER_COMPLETED: unique symbol;
 export declare const API_STACKS: unique symbol;
 export declare const COMMENT_AUTO_ADDED_DEPENDENCY = " THIS DEPENDENCY IS AUTO-ADDED, DO NOT EDIT MANUALY";
 export declare const COMMENT_AUTO_ADDED_PROPERTY = " THIS PROPERTY IS AUTO-ADDED, DO NOT EDIT MANUALY";
@@ -27,10 +27,15 @@ export declare const STATIC_MEMBERS_TYPE = "type";
 export declare const STATIC_STYLES = "STYLES";
 export declare const STATIC_TAG = "TAG";
 export declare const STYLE_IMPORTED = "STYLE_IMPORTED";
-export declare const TYPE_BOOLEAN = "Boolean";
-export declare const TYPE_DATE = "Date";
-export declare const TYPE_FUNCTION = "Function";
-export declare const TYPE_STRING = "String";
-export declare const TYPE_NUMBER = "Number";
+export declare const TYPE_ARRAY = 1;
+export declare const TYPE_BOOLEAN = 2;
+export declare const TYPE_DATE = 4;
+export declare const TYPE_ENUM = 8;
+export declare const TYPE_FUNCTION = 16;
+export declare const TYPE_NULL = 32;
+export declare const TYPE_NUMBER = 64;
+export declare const TYPE_OBJECT = 128;
+export declare const TYPE_STRING = 256;
+export declare const TYPE_UNDEFINED = 512;
 export declare const UTIL_STYLE_MAPPER = "styles";
 export declare const VENDOR_UHTML_PATH = "@htmlplus/element/client/vendors/uhtml.js";

package/constants/index.js

@@ -4,9 +4,9 @@ export const API_ATTRIBUTES_SYNCER = Symbol();
 export const API_CONNECTED = Symbol();
 export const API_HOST = Symbol();
 export const API_INSTANCE = Symbol();
-export const API_LOADED = Symbol();
 export const API_LOCKED = Symbol();
 export const API_REQUEST = Symbol();
+export const API_RENDER_COMPLETED = Symbol();
 export const API_STACKS = Symbol();
 // comments
 export const COMMENT_AUTO_ADDED_DEPENDENCY = ' THIS DEPENDENCY IS AUTO-ADDED, DO NOT EDIT MANUALY';
@@ -35,11 +35,16 @@ export const STATIC_TAG = 'TAG';
 // style
 export const STYLE_IMPORTED = 'STYLE_IMPORTED';
 // types
-export const TYPE_BOOLEAN = 'Boolean';
-export const TYPE_DATE = 'Date';
-export const TYPE_FUNCTION = 'Function';
-export const TYPE_STRING = 'String';
-export const TYPE_NUMBER = 'Number';
+export const TYPE_ARRAY = 1;
+export const TYPE_BOOLEAN = 2;
+export const TYPE_DATE = 4;
+export const TYPE_ENUM = 8;
+export const TYPE_FUNCTION = 16;
+export const TYPE_NULL = 32;
+export const TYPE_NUMBER = 64;
+export const TYPE_OBJECT = 128;
+export const TYPE_STRING = 256;
+export const TYPE_UNDEFINED = 512;
 // utils
 export const UTIL_STYLE_MAPPER = 'styles';
 // vendors

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.5.6",
+  "version": "0.5.8",
   "license": "MIT",
   "author": "Masood Abdolian <m.abdolian@gmail.com>",
   "description": "A powerful library for building scalable, reusable, fast, tastable and lightweight design system for any web technologies. Powerd by Web Component.",

package/types/context.d.ts

@@ -3,11 +3,6 @@ export interface Context {
     customElementNames?: Array<string>;
     isInvalid?: boolean;
     script?: string;
-    outputs?: Array<{
-        name: string;
-        options?: any;
-        output?: any;
-    }>;
     assets?: string;
     class?: ClassDeclaration;
     classEvents?: Array<ClassProperty>;

package/types/plugin.d.ts

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

package/client/utils/parseValue.d.ts

@@ -1 +0,0 @@
-export declare const parseValue: (value: any, type: any) => any;

package/client/utils/parseValue.js

@@ -1,15 +0,0 @@
-import * as CONSTANTS from '../../constants/index.js';
-import { toBoolean } from './toBoolean.js';
-// TODO: input type & validate date
-export const parseValue = (value, type) => {
-    switch (type) {
-        case CONSTANTS.TYPE_BOOLEAN:
-            return toBoolean(value);
-        case CONSTANTS.TYPE_DATE:
-            return new Date(value);
-        case CONSTANTS.TYPE_NUMBER:
-            return isNaN(value) ? value : parseFloat(value);
-        default:
-            return value;
-    }
-};