@htmlplus/element 0.5.7 → 0.5.8

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/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/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/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/compiler/compiler.js

@@ -29,11 +29,18 @@ export const compiler = (...plugins) => {
         let context = {
             filePath
         };
+        const parsed = path.parse(filePath);
         for (const plugin of plugins) {
             if (!plugin.run)
                 continue;
-            log(`Plugin '${plugin.name}' is executing on '${path.basename(filePath)}' file.`);
-            context = (await plugin.run(context, global)) || context;
+            log(`Plugin '${plugin.name}' is executing on '${path.basename(parsed.dir)}/${parsed.base}' file.`);
+            try {
+                context = (await plugin.run(context, global)) || 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;

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
@@ -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, {

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

@@ -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

@@ -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.7",
+  "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/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;
-    }
-};