@htmlplus/element 2.2.0 → 2.3.0

package/README.md

@@ -475,7 +475,7 @@ Parameters:
     <br />
   - `type` (Optional)
     <br />
-    Do not set the value to this property. This value is automatically set during transpiling.
+    Do not set the value to this property. This value is automatically set during transforming.
     <br />
     <br />
 

package/client/decorators/element.js

@@ -1,6 +1,6 @@
-import { camelCase, kebabCase } from 'change-case';
+import { camelCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
-import { call, getConfig, getMembers, getTag, isServer, request, toProperty } from '../utils/index.js';
+import { call, getConfig, getTag, isServer, request } from '../utils/index.js';
 /**
  * The class marked with this decorator is considered a
  * [Custom Element](https://mdn.io/using-custom-elements),
@@ -13,17 +13,11 @@ export function Element() {
         const tag = getTag(constructor);
         if (customElements.get(tag))
             return;
-        const members = getMembers(constructor);
         class Plus extends HTMLElement {
             constructor() {
                 super();
                 this.attachShadow({ mode: 'open' });
                 const instance = (this[CONSTANTS.API_INSTANCE] = new constructor());
-                Object.keys(members).forEach((key) => {
-                    if (members[key].type != CONSTANTS.TYPE_FUNCTION) {
-                        members[key].default = instance[key];
-                    }
-                });
                 instance[CONSTANTS.API_HOST] = () => this;
                 // TODO
                 call(instance, CONSTANTS.LIFECYCLE_CONSTRUCTED);
@@ -32,25 +26,23 @@ export function Element() {
             static get formAssociated() {
                 return constructor['formAssociated'];
             }
+            // TODO
             static get observedAttributes() {
-                return Object.keys(members)
-                    .filter((key) => members[key].type != CONSTANTS.TYPE_FUNCTION)
-                    .map((key) => kebabCase(key));
+                return constructor['observedAttributes'];
             }
             adoptedCallback() {
                 call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_ADOPTED);
             }
             attributeChangedCallback(attribute, prev, next) {
-                var _a;
                 const instance = this[CONSTANTS.API_INSTANCE];
                 if (instance[CONSTANTS.API_LOCKED])
                     return;
                 const name = camelCase(attribute);
-                const type = (_a = members[name]) === null || _a === void 0 ? void 0 : _a.type;
-                const value = toProperty(next, type);
-                if (instance[name] === value)
-                    return;
-                instance[name] = value;
+                // ensures the integrity of readonly properties to prevent potential errors.
+                try {
+                    this[name] = next;
+                }
+                catch (_a) { }
             }
             connectedCallback() {
                 const instance = this[CONSTANTS.API_INSTANCE];

package/client/decorators/method.js

@@ -6,7 +6,7 @@ import { appendToMethod, defineProperty, host } from '../utils/index.js';
  */
 export function Method() {
     return function (target, propertyKey) {
-        appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
+        appendToMethod(target, CONSTANTS.LIFECYCLE_CONSTRUCTED, function () {
             defineProperty(host(this), propertyKey, {
                 get: () => this[propertyKey].bind(this)
             });

package/client/decorators/property.d.ts

@@ -8,7 +8,7 @@ export interface PropertyOptions {
      */
     reflect?: boolean;
     /**
-     * Do not set the value to this property. This value is automatically set during transpiling.
+     * Do not set the value to this property. This value is automatically set during transforming.
      */
     type?: number;
 }
@@ -16,4 +16,4 @@ export interface PropertyOptions {
  * Creates a reactive property, reflecting a corresponding attribute value,
  * and updates the element when the property is set.
  */
-export declare function Property(options?: PropertyOptions): (target: PlusElement, propertyKey: PropertyKey) => void;
+export declare function Property(options?: PropertyOptions): (target: PlusElement, propertyKey: PropertyKey, descriptor?: PropertyDescriptor) => void;

package/client/decorators/property.js

@@ -1,44 +1,80 @@
+import { kebabCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
-import { addMember, appendToMethod, defineProperty, host, request, toProperty, updateAttribute } from '../utils/index.js';
+import { appendToMethod, defineProperty, host, request, toProperty, updateAttribute } from '../utils/index.js';
 /**
  * Creates a reactive property, reflecting a corresponding attribute value,
  * and updates the element when the property is set.
  */
 export function Property(options) {
-    return function (target, propertyKey) {
+    return function (target, propertyKey, descriptor) {
+        var _a;
+        // Converts property name to string.
         const name = String(propertyKey);
-        const symbol = Symbol();
-        addMember(target.constructor, name, options);
-        function get() {
-            return this[symbol];
+        // Registers an attribute that is intricately linked to the property.
+        ((_a = target.constructor)['observedAttributes'] || (_a['observedAttributes'] = [])).push(kebabCase(name));
+        // TODO: This feature is an experimental
+        // When the property is a getter function.
+        if (descriptor) {
+            // Checks the reflection.
+            if (options === null || options === void 0 ? void 0 : options.reflect) {
+                // Stores the original getter function.
+                const getter = descriptor.get;
+                // Defines a new getter function.
+                descriptor.get = function () {
+                    const value = getter === null || getter === void 0 ? void 0 : getter.apply(this);
+                    target[CONSTANTS.API_LOCKED] = true;
+                    updateAttribute(host(this), name, value);
+                    target[CONSTANTS.API_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];
+                });
+            }
         }
-        function set(next) {
-            const previous = this[symbol];
-            if (next === previous)
-                return;
-            this[symbol] = next;
-            request(this, name, previous, (skipped) => {
-                if (!(options === null || options === void 0 ? void 0 : options.reflect) || skipped)
+        // When the property is normal.
+        else {
+            // Creates a unique symbol.
+            const symbol = Symbol();
+            // Defines a getter function to use in the target class.
+            function get() {
+                return this[symbol];
+            }
+            // Defines a setter function to use in the target class.
+            function set(next) {
+                const previous = this[symbol];
+                if (next === previous)
                     return;
-                target[CONSTANTS.API_LOCKED] = true;
-                updateAttribute(host(this), name, next);
-                target[CONSTANTS.API_LOCKED] = false;
-            });
+                this[symbol] = next;
+                request(this, name, previous, (skipped) => {
+                    if (!(options === null || options === void 0 ? void 0 : options.reflect) || skipped)
+                        return;
+                    target[CONSTANTS.API_LOCKED] = true;
+                    updateAttribute(host(this), name, next);
+                    target[CONSTANTS.API_LOCKED] = false;
+                });
+            }
+            // Attaches the getter and setter functions to the current property of the target class.
+            defineProperty(target, propertyKey, { get, set });
         }
-        defineProperty(target, propertyKey, { get, set });
-        // TODO: check the lifecycle
+        // TODO: Check the lifecycle
         appendToMethod(target, CONSTANTS.LIFECYCLE_CONSTRUCTED, function () {
+            // Gets the host element from the target class.
             const element = host(this);
-            // TODO: experimental for isolated options
-            if (element === this)
-                return;
+            // Defines a getter function to use in the host element.
             const get = () => {
                 return this[propertyKey];
             };
-            const set = (input) => {
-                this[propertyKey] = toProperty(input, options === null || options === void 0 ? void 0 : options.type);
-            };
-            // TODO: configurable
+            // Defines a setter function to use in the host element.
+            const set = descriptor
+                ? undefined
+                : (input) => {
+                    this[propertyKey] = toProperty(input, options === null || options === void 0 ? void 0 : options.type);
+                };
+            // TODO: Check the configuration.
+            // Attaches the getter and setter functions to the current property of the host element.
             defineProperty(element, propertyKey, { get, set, configurable: true });
         });
     };

package/client/utils/getStyles.js

@@ -1,5 +1,5 @@
 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];
+    return (_a = target.constructor[CONSTANTS.STATIC_STYLE]) !== null && _a !== void 0 ? _a : target[CONSTANTS.STATIC_STYLE];
 };

package/client/utils/index.d.ts

@@ -1,4 +1,3 @@
-export * from './addMember.js';
 export * from './appendToMethod.js';
 export * from './attributes.js';
 export * from './call.js';
@@ -8,7 +7,6 @@ export * from './defineProperty.js';
 export * from './direction.js';
 export * from './event.js';
 export * from './getFramework.js';
-export * from './getMembers.js';
 export * from './getStyles.js';
 export * from './getTag.js';
 export * from './host.js';

package/client/utils/index.js

@@ -1,4 +1,3 @@
-export * from './addMember.js';
 export * from './appendToMethod.js';
 export * from './attributes.js';
 export * from './call.js';
@@ -8,7 +7,6 @@ export * from './defineProperty.js';
 export * from './direction.js';
 export * from './event.js';
 export * from './getFramework.js';
-export * from './getMembers.js';
 export * from './getStyles.js';
 export * from './getTag.js';
 export * from './host.js';

package/client/utils/toProperty.js

@@ -7,10 +7,10 @@ export const toProperty = (input, type) => {
     if (CONSTANTS.TYPE_BOOLEAN & type) {
         if (string === '')
             return true;
-        if (string === 'false')
-            return false;
         if (string === 'true')
             return true;
+        if (string === 'false')
+            return false;
     }
     if (CONSTANTS.TYPE_NUMBER & type) {
         if (string != '' && !isNaN(input)) {

package/constants/index.d.ts

@@ -11,6 +11,7 @@ export declare const DECORATOR_CSS_VARIABLE = "@Property()";
 export declare const DECORATOR_ELEMENT = "Element";
 export declare const DECORATOR_EVENT = "Event";
 export declare const DECORATOR_PROPERTY = "Property";
+export declare const DECORATOR_PROPERTY_TYPE = "type";
 export declare const DECORATOR_STATE = "State";
 export declare const DECORATOR_METHOD = "Method";
 export declare const ELEMENT_HOST_NAME = "host";
@@ -23,11 +24,8 @@ export declare const LIFECYCLE_LOADED = "loadedCallback";
 export declare const LIFECYCLE_UPDATE = "updateCallback";
 export declare const LIFECYCLE_UPDATED = "updatedCallback";
 export declare const METHOD_RENDER = "render";
-export declare const STATIC_MEMBERS = "MEMBERS";
-export declare const STATIC_MEMBERS_INITIALIZER = "default";
-export declare const STATIC_MEMBERS_TYPE = "type";
-export declare const STATIC_STYLES = "STYLES";
-export declare const STATIC_TAG = "TAG";
+export declare const STATIC_STYLE = "style";
+export declare const STATIC_TAG = "tag";
 export declare const STYLE_IMPORTED = "STYLE_IMPORTED";
 export declare const TYPE_ARRAY: number;
 export declare const TYPE_BOOLEAN: number;

package/constants/index.js

@@ -15,6 +15,7 @@ export const DECORATOR_CSS_VARIABLE = '@Property()';
 export const DECORATOR_ELEMENT = 'Element';
 export const DECORATOR_EVENT = 'Event';
 export const DECORATOR_PROPERTY = 'Property';
+export const DECORATOR_PROPERTY_TYPE = 'type';
 export const DECORATOR_STATE = 'State';
 export const DECORATOR_METHOD = 'Method';
 // element
@@ -31,11 +32,8 @@ export const LIFECYCLE_UPDATED = 'updatedCallback';
 // methods
 export const METHOD_RENDER = 'render';
 // statics
-export const STATIC_MEMBERS = 'MEMBERS';
-export const STATIC_MEMBERS_INITIALIZER = 'default';
-export const STATIC_MEMBERS_TYPE = 'type';
-export const STATIC_STYLES = 'STYLES';
-export const STATIC_TAG = 'TAG';
+export const STATIC_STYLE = 'style';
+export const STATIC_TAG = 'tag';
 // style
 export const STYLE_IMPORTED = 'STYLE_IMPORTED';
 // types

package/package.json

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

package/transformer/plugins/customElement.js

@@ -273,9 +273,9 @@ export const customElement = (options) => {
                 }
                 const [argument] = expression.arguments;
                 argument.properties = argument.properties.filter((property) => {
-                    return property.key.name != CONSTANTS.STATIC_MEMBERS_TYPE;
+                    return property.key.name != CONSTANTS.DECORATOR_PROPERTY_TYPE;
                 });
-                argument.properties.push(t.objectProperty(t.identifier(CONSTANTS.STATIC_MEMBERS_TYPE), t.numericLiteral(type)));
+                argument.properties.push(t.objectProperty(t.identifier(CONSTANTS.DECORATOR_PROPERTY_TYPE), t.numericLiteral(type)));
             }
         });
         // attach typings

package/transformer/plugins/document.js

@@ -116,11 +116,12 @@ export const document = (options) => {
                 });
             });
             const properties = context.classProperties.map((property) => {
-                var _a, _b;
+                var _a, _b, _c;
                 const attribute = kebabCase(property.key['name']);
                 // TODO
                 const initializer = getInitializer(property.value);
                 const name = property.key['name'];
+                const readonly = property['kind'] == 'get';
                 // TODO
                 const reflects = (() => {
                     if (!property.decorators)
@@ -143,13 +144,17 @@ export const document = (options) => {
                     catch (_a) { }
                     return false;
                 })();
-                const required = !property.optional;
-                const type = print((_a = property.typeAnnotation) === null || _a === void 0 ? void 0 : _a['typeAnnotation']);
-                const typeReference = getTypeReference(context.fileAST, (_b = property.typeAnnotation) === null || _b === void 0 ? void 0 : _b['typeAnnotation']);
+                const required = 'optional' in property && !property.optional;
+                // TODO
+                const type = property['returnType']
+                    ? print((_a = property['returnType']) === null || _a === void 0 ? void 0 : _a['typeAnnotation'])
+                    : print((_b = property.typeAnnotation) === null || _b === void 0 ? void 0 : _b['typeAnnotation']);
+                const typeReference = getTypeReference(context.fileAST, (_c = property.typeAnnotation) === null || _c === void 0 ? void 0 : _c['typeAnnotation']);
                 return Object.assign({
                     attribute,
                     initializer,
                     name,
+                    readonly,
                     reflects,
                     required,
                     type,

package/transformer/plugins/style.js

@@ -34,7 +34,7 @@ export const style = (options) => {
         context.styleName = path.basename(context.stylePath, context.styleExtension);
         const { local } = addDependency(context.fileAST, context.stylePath, CONSTANTS.STYLE_IMPORTED, undefined, true);
         // TODO: remove 'local!'
-        const property = t.classProperty(t.identifier(CONSTANTS.STATIC_STYLES), t.identifier(local), undefined, null, undefined, true);
+        const property = t.classProperty(t.identifier(CONSTANTS.STATIC_STYLE), t.identifier(local), undefined, null, undefined, true);
         t.addComment(property, 'leading', CONSTANTS.COMMENT_AUTO_ADDED, true);
         context.class.body.body.unshift(property);
     };

package/client/utils/addMember.d.ts

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

package/client/utils/addMember.js

@@ -1,6 +0,0 @@
-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/getMembers.d.ts

@@ -1,8 +0,0 @@
-import * as CONSTANTS from '../../constants/index.js';
-import { PlusElement } from '../../types';
-export declare const getMembers: (target: PlusElement) => {
-    [member: string]: {
-        default?: any;
-        type?: any;
-    };
-};

package/client/utils/getMembers.js

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