@htmlplus/element 2.6.0 → 2.8.0

package/README.md

@@ -142,6 +142,11 @@ In the `index.html` file.
 
 </details>
 
+<details>
+  <summary>Consumer</summary>
+TODO
+</details>
+
 <details>
   <summary>Direction</summary>
   
@@ -468,6 +473,11 @@ Parameters:
   The configuration for property decorator.
   <br />
   <br />
+  - `attribute` (Optional)
+    <br />
+    Specifies the name of the attribute related to the property.
+    <br />
+    <br />
   - `reflect` (Optional)
     <br />
     Whether property value is reflected back to the associated attribute. default is `false`.
@@ -475,7 +485,7 @@ Parameters:
     <br />
   - `type` (Optional)
     <br />
-    Do not set the value to this property. This value is automatically set during transforming.
+    Specifies the property `type` and supports [data types](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures). If this value is not set, it will be set automatically during transforming.
     <br />
     <br />
 
@@ -503,6 +513,11 @@ In the `index.html` file.
 
 </details>
 
+<details>
+  <summary>Provider</summary>
+TODO
+</details>
+
 <details>
   <summary>Query</summary>
 
@@ -758,6 +773,13 @@ TODO
 
 </details>
 
+<details>
+  <summary>dispatch</summary>
+
+TODO
+
+</details>
+
 <details>
   <summary>host</summary>
   
@@ -835,15 +857,6 @@ TODO
 
 </details>
 
-<details>
-  <summary>styles</summary>
-  
-Converts a JavaScript object containing CSS styles to a CSS string.
-
-TODO
-
-</details>
-
 <details>
   <summary>toUnit</summary>
 
@@ -882,13 +895,6 @@ TODO
 
 </details>
 
-<details>
-  <summary>connectCallback</summary>
-
-TODO
-
-</details>
-
 <details>
   <summary>connectedCallback</summary>
 

package/client/decorators/element.js

@@ -13,7 +13,12 @@ export function Element() {
         const tag = getTag(constructor);
         if (customElements.get(tag))
             return;
-        class Plus extends HTMLElement {
+        customElements.define(tag, proxy(constructor));
+    };
+}
+const proxy = (constructor) => {
+    var _a;
+    return _a = class Plus extends HTMLElement {
             constructor() {
                 super();
                 this.attachShadow({
@@ -29,12 +34,15 @@ export function Element() {
             adoptedCallback() {
                 call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_ADOPTED);
             }
-            attributeChangedCallback(attribute, prev, next) {
+            attributeChangedCallback(key, prev, next) {
+                var _a;
                 // ensures the integrity of readonly properties to prevent potential errors.
                 try {
-                    this[camelCase(attribute)] = next;
+                    const attribute = (_a = constructor[CONSTANTS.MAPPER]) === null || _a === void 0 ? void 0 : _a[key];
+                    const property = attribute || camelCase(key);
+                    this[property] = next;
                 }
-                catch (_a) { }
+                catch (_b) { }
             }
             connectedCallback() {
                 const instance = this[CONSTANTS.API_INSTANCE];
@@ -54,11 +62,10 @@ export function Element() {
             disconnectedCallback() {
                 call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_DISCONNECTED);
             }
-        }
+        },
         // TODO
-        Plus.formAssociated = constructor['formAssociated'];
+        _a.formAssociated = constructor['formAssociated'],
         // TODO
-        Plus.observedAttributes = constructor['observedAttributes'];
-        customElements.define(tag, Plus);
-    };
-}
+        _a.observedAttributes = constructor['observedAttributes'],
+        _a;
+};

package/client/decorators/property.d.ts

@@ -3,14 +3,20 @@ import { HTMLPlusElement } from '../../types';
  * The configuration for property decorator.
  */
 export interface PropertyOptions {
+    /**
+     * Specifies the name of the attribute related to the property.
+     */
+    attribute?: string;
     /**
      * Whether property value is reflected back to the associated attribute. default is `false`.
      */
     reflect?: boolean;
     /**
-     * Do not set the value to this property. This value is automatically set during transforming.
+     * Specifies the property `type` and supports
+     * [data types](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures).
+     * If this value is not set, it will be set automatically during transforming.
      */
-    type?: number;
+    type?: any;
 }
 /**
  * Creates a reactive property, reflecting a corresponding attribute value,

package/client/decorators/property.js

@@ -7,11 +7,22 @@ import { appendToMethod, defineProperty, host, request, toProperty, updateAttrib
  */
 export function Property(options) {
     return function (target, key, descriptor) {
-        var _a;
+        var _a, _b, _c;
+        // Creates a unique symbol for the lock flag.
+        const locked = Symbol();
         // Converts property name to string.
         const name = String(key);
+        // Calculates attribute.
+        const attribute = (options === null || options === void 0 ? void 0 : options.attribute) || kebabCase(name);
         // Registers an attribute that is intricately linked to the property.
-        ((_a = target.constructor)['observedAttributes'] || (_a['observedAttributes'] = [])).push(kebabCase(name));
+        ((_a = target.constructor)['observedAttributes'] || (_a['observedAttributes'] = [])).push(attribute);
+        // TODO
+        if (attribute) {
+            // TODO
+            (_b = target.constructor)[_c = CONSTANTS.MAPPER] || (_b[_c] = {});
+            // TODO
+            target.constructor[CONSTANTS.MAPPER][attribute] = name;
+        }
         // TODO: This feature is an experimental
         // When the property is a getter function.
         if (descriptor) {
@@ -22,15 +33,15 @@ export function Property(options) {
                 // Defines a new getter function.
                 descriptor.get = function () {
                     const value = getter === null || getter === void 0 ? void 0 : getter.apply(this);
-                    this[CONSTANTS.API_LOCKED] = true;
-                    updateAttribute(this, name, value);
-                    this[CONSTANTS.API_LOCKED] = false;
+                    this[locked] = true;
+                    updateAttribute(this, attribute, value);
+                    this[locked] = false;
                     return value;
                 };
                 // TODO: Check the lifecycle
                 appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function () {
                     // Calls the getter function to update the related attribute.
-                    this[name];
+                    this[key];
                 });
             }
         }
@@ -53,9 +64,9 @@ export function Property(options) {
                         return;
                     if (!(options === null || options === void 0 ? void 0 : options.reflect))
                         return;
-                    this[CONSTANTS.API_LOCKED] = true;
-                    updateAttribute(this, name, next);
-                    this[CONSTANTS.API_LOCKED] = false;
+                    this[locked] = true;
+                    updateAttribute(this, attribute, next);
+                    this[locked] = false;
                 });
             }
             // Attaches the getter and setter functions to the current property of the target class.
@@ -71,7 +82,7 @@ export function Property(options) {
             const set = descriptor
                 ? undefined
                 : (input) => {
-                    if (this[CONSTANTS.API_LOCKED]) {
+                    if (this[locked]) {
                         return;
                     }
                     this[key] = toProperty(input, options === null || options === void 0 ? void 0 : options.type);

package/client/utils/toProperty.d.ts

@@ -1 +1 @@
-export declare const toProperty: (input: any, type: number | undefined) => any;
+export declare const toProperty: (input: any, type?: any) => any;

package/client/utils/toProperty.js

@@ -4,7 +4,7 @@ export const toProperty = (input, type) => {
     if (type === undefined)
         return input;
     const string = `${input}`;
-    if (CONSTANTS.TYPE_BOOLEAN & type) {
+    if (CONSTANTS.TYPE_BOOLEAN & type || type === Boolean) {
         if (string === '')
             return true;
         if (string === 'true')
@@ -12,23 +12,23 @@ export const toProperty = (input, type) => {
         if (string === 'false')
             return false;
     }
-    if (CONSTANTS.TYPE_NUMBER & type) {
+    if (CONSTANTS.TYPE_NUMBER & type || type === Number) {
         if (string != '' && !isNaN(input)) {
             return parseFloat(input);
         }
     }
-    if (CONSTANTS.TYPE_NULL & type) {
+    if (CONSTANTS.TYPE_NULL & type || type === null) {
         if (string === 'null') {
             return null;
         }
     }
-    if (CONSTANTS.TYPE_DATE & type) {
+    if (CONSTANTS.TYPE_DATE & type || type === Date) {
         const value = new Date(input);
         if (value.toString() != 'Invalid Date') {
             return value;
         }
     }
-    if (CONSTANTS.TYPE_ARRAY & type) {
+    if (CONSTANTS.TYPE_ARRAY & type || type === Array) {
         try {
             const value = JSON.parse(input);
             if (typeOf(value) == 'array') {
@@ -37,7 +37,7 @@ export const toProperty = (input, type) => {
         }
         catch (_a) { }
     }
-    if (CONSTANTS.TYPE_OBJECT & type) {
+    if (CONSTANTS.TYPE_OBJECT & type || type === Object) {
         try {
             const value = JSON.parse(input);
             if (typeOf(value) == 'object') {
@@ -46,7 +46,7 @@ export const toProperty = (input, type) => {
         }
         catch (_b) { }
     }
-    if (CONSTANTS.TYPE_UNDEFINED & type) {
+    if (CONSTANTS.TYPE_UNDEFINED & type || type === undefined) {
         if (string === 'undefined') {
             return undefined;
         }

package/constants/index.d.ts

@@ -1,8 +1,8 @@
 export declare const PACKAGE_NAME = "@htmlplus/element";
+export declare const MAPPER: 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_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;

package/constants/index.js

@@ -1,9 +1,10 @@
 export const PACKAGE_NAME = '@htmlplus/element';
+// TODO
+export const MAPPER = Symbol();
 // APIs
 export const API_CONNECTED = Symbol();
 export const API_HOST = Symbol();
 export const API_INSTANCE = Symbol();
-export const API_LOCKED = Symbol();
 export const API_REQUEST = Symbol();
 export const API_RENDER_COMPLETED = Symbol();
 export const API_STACKS = Symbol();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "license": "MIT",
   "sideEffects": false,
   "author": "Masood Abdolian <m.abdolian@gmail.com>",

package/transformer/plugins/customElement.js

@@ -2,7 +2,7 @@ import template from '@babel/template';
 import t from '@babel/types';
 import { camelCase, kebabCase, pascalCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
-import { addDependency, getType, print, visitor } from '../utils/index.js';
+import { addDependency, extractAttribute, getType, print, visitor } from '../utils/index.js';
 export const CUSTOM_ELEMENT_OPTIONS = {
     prefix: undefined,
     typings: true
@@ -185,6 +185,16 @@ export const customElement = (options) => {
                 const { expression } = path.node;
                 if (((_a = expression.callee) === null || _a === void 0 ? void 0 : _a.name) != CONSTANTS.DECORATOR_PROPERTY)
                     return;
+                if (!expression.arguments.length) {
+                    expression.arguments.push(t.objectExpression([]));
+                }
+                const [argument] = expression.arguments;
+                const filtered = argument.properties.filter((property) => {
+                    return property.key.name != CONSTANTS.DECORATOR_PROPERTY_TYPE;
+                });
+                if (argument.properties.length != filtered.length)
+                    return;
+                argument.properties = filtered;
                 let type = 0;
                 const extract = (input) => {
                     var _a;
@@ -266,13 +276,6 @@ export const customElement = (options) => {
                     }
                 };
                 extract(getType(context.directoryPath, ast, (_b = path.parentPath.node.typeAnnotation) === null || _b === void 0 ? void 0 : _b.typeAnnotation));
-                if (!expression.arguments.length) {
-                    expression.arguments.push(t.objectExpression([]));
-                }
-                const [argument] = expression.arguments;
-                argument.properties = argument.properties.filter((property) => {
-                    return property.key.name != CONSTANTS.DECORATOR_PROPERTY_TYPE;
-                });
                 argument.properties.push(t.objectProperty(t.identifier(CONSTANTS.DECORATOR_PROPERTY_TYPE), t.numericLiteral(type)));
             }
         });
@@ -280,10 +283,12 @@ export const customElement = (options) => {
         if (options.typings) {
             visitor(ast, {
                 Program(path) {
-                    const attributes = context.classProperties.map((property) => {
-                        const key = property.key;
+                    const attributes = context
+                        .classProperties.filter((property) => !t.isClassMethod(property))
+                        .map((property) => {
+                        const key = extractAttribute(property) || kebabCase(property.key['name']);
                         const typeAnnotation = property.typeAnnotation;
-                        return Object.assign(t.tSPropertySignature(t.stringLiteral(kebabCase(key.name)), typeAnnotation), {
+                        return Object.assign(t.tSPropertySignature(t.stringLiteral(kebabCase(key)), typeAnnotation), {
                             optional: property.optional,
                             leadingComments: t.cloneNode(property, true).leadingComments
                         });
@@ -310,8 +315,13 @@ export const customElement = (options) => {
                     });
                     const properties = context.classProperties.map((property) => {
                         const key = property.key;
-                        const typeAnnotation = property.typeAnnotation;
-                        return Object.assign(t.tSPropertySignature(t.identifier(key.name), typeAnnotation), {
+                        // TODO
+                        const readonly = property.readonly || !!property['returnType'];
+                        // TODO
+                        const typeAnnotation = (property.typeAnnotation ||
+                            property['returnType']);
+                        return Object.assign(t.tsPropertySignature(t.identifier(key.name), typeAnnotation), {
+                            readonly,
                             optional: property.optional,
                             leadingComments: t.cloneNode(property, true).leadingComments
                         });

package/transformer/plugins/document.js

@@ -3,7 +3,7 @@ import fs from 'fs-extra';
 import { glob } from 'glob';
 import path from 'path';
 import * as CONSTANTS from '../../constants/index.js';
-import { extractFromComment, getInitializer, getTypeReference, print } from '../utils/index.js';
+import { extractAttribute, extractFromComment, getInitializer, getTypeReference, print } from '../utils/index.js';
 export const DOCUMENT_OPTIONS = {
     destination: path.join('dist', 'document.json')
 };
@@ -117,7 +117,7 @@ export const document = (options) => {
             });
             const properties = context.classProperties.map((property) => {
                 var _a, _b, _c;
-                const attribute = kebabCase(property.key['name']);
+                const attribute = extractAttribute(property) || kebabCase(property.key['name']);
                 // TODO
                 const initializer = getInitializer(property.value);
                 const name = property.key['name'];

package/transformer/plugins/visualStudioCode.js

@@ -1,7 +1,7 @@
 import { kebabCase } from 'change-case';
 import fs from 'fs-extra';
 import path from 'path';
-import { extractFromComment, getType, print } from '../utils/index.js';
+import { extractAttribute, extractFromComment, getType, print } from '../utils/index.js';
 export const VISUAL_STUDIO_CODE_OPTIONS = {
     destination: path.join('dist', 'visual-studio-code.json')
 };
@@ -31,7 +31,7 @@ export const visualStudioCode = (options) => {
             }, extractFromComment(context.class, ['description']));
             for (const property of context.classProperties || []) {
                 const attribute = Object.assign({
-                    name: kebabCase(property.key['name']),
+                    name: extractAttribute(property) || kebabCase(property.key['name']),
                     values: []
                 }, extractFromComment(property, ['description']));
                 const type = print(getType(context.directoryPath, context.fileAST, (_c = property.typeAnnotation) === null || _c === void 0 ? void 0 : _c['typeAnnotation']));

package/transformer/plugins/webTypes.js

@@ -1,7 +1,7 @@
 import { kebabCase } from 'change-case';
 import fs from 'fs-extra';
 import path from 'path';
-import { extractFromComment, getInitializer, getType, print } from '../utils/index.js';
+import { extractAttribute, extractFromComment, getInitializer, getType, print } from '../utils/index.js';
 export const WEB_TYPES_OPTIONS = {
     destination: path.join('dist', 'web-types.json'),
     packageName: '',
@@ -35,7 +35,7 @@ export const webTypes = (options) => {
             const attributes = (_a = context.classProperties) === null || _a === void 0 ? void 0 : _a.map((property) => {
                 var _a;
                 return Object.assign({
-                    name: kebabCase(property.key['name']),
+                    name: extractAttribute(property) || kebabCase(property.key['name']),
                     value: {
                         // kind: TODO
                         type: print(getType(context.directoryPath, context.fileAST, (_a = property.typeAnnotation) === null || _a === void 0 ? void 0 : _a['typeAnnotation']))

package/transformer/utils/extractAttribute.d.ts

@@ -0,0 +1,2 @@
+import t from '@babel/types';
+export declare const extractAttribute: (property: t.ClassProperty) => string | undefined;

package/transformer/utils/extractAttribute.js

@@ -0,0 +1,10 @@
+import * as CONSTANTS from '../../constants/index.js';
+export const extractAttribute = (property) => {
+    try {
+        return property.decorators
+            .find((decorator) => decorator.expression.callee.name == CONSTANTS.DECORATOR_PROPERTY)
+            .expression.arguments[0].properties.find((property) => property.key.name == 'attribute').value
+            .value;
+    }
+    catch (_a) { }
+};

package/transformer/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from './addDependency.js';
+export * from './extractAttribute.js';
 export * from './extractFromComment.js';
 export * from './getInitializer.js';
 export * from './getType.js';

package/transformer/utils/index.js

@@ -1,4 +1,5 @@
 export * from './addDependency.js';
+export * from './extractAttribute.js';
 export * from './extractFromComment.js';
 export * from './getInitializer.js';
 export * from './getType.js';