@htmlplus/element 2.4.0 → 2.5.0

package/client/decorators/element.js

@@ -30,13 +30,9 @@ export function Element() {
                 call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_ADOPTED);
             }
             attributeChangedCallback(attribute, prev, next) {
-                const instance = this[CONSTANTS.API_INSTANCE];
-                if (instance[CONSTANTS.API_LOCKED])
-                    return;
-                const name = camelCase(attribute);
                 // ensures the integrity of readonly properties to prevent potential errors.
                 try {
-                    this[name] = next;
+                    this[camelCase(attribute)] = next;
                 }
                 catch (_a) { }
             }
@@ -44,14 +40,13 @@ export function Element() {
                 const instance = this[CONSTANTS.API_INSTANCE];
                 // TODO: experimental for global config
                 Object.assign(instance, getConfig('element', getTag(instance), 'property'));
+                instance[CONSTANTS.API_CONNECTED] = true;
                 const connect = () => {
-                    instance[CONSTANTS.API_CONNECTED] = true;
-                    call(instance, CONSTANTS.LIFECYCLE_CONNECTED);
                     request(instance, undefined, undefined, () => {
                         call(instance, CONSTANTS.LIFECYCLE_LOADED);
                     });
                 };
-                const callback = call(instance, CONSTANTS.LIFECYCLE_CONNECT);
+                const callback = call(instance, CONSTANTS.LIFECYCLE_CONNECTED);
                 if (!(callback === null || callback === void 0 ? void 0 : callback.then))
                     return connect();
                 callback.then(() => connect());

package/client/decorators/property.js

@@ -22,11 +22,9 @@ export function Property(options) {
                 // Defines a new getter function.
                 descriptor.get = function () {
                     const value = getter === null || getter === void 0 ? void 0 : getter.apply(this);
-                    // TODO: target or this
-                    target[CONSTANTS.API_LOCKED] = true;
+                    this[CONSTANTS.API_LOCKED] = true;
                     updateAttribute(this, name, value);
-                    // TODO: target or this
-                    target[CONSTANTS.API_LOCKED] = false;
+                    this[CONSTANTS.API_LOCKED] = false;
                     return value;
                 };
                 // TODO: Check the lifecycle
@@ -51,13 +49,13 @@ export function Property(options) {
                     return;
                 this[symbol] = next;
                 request(this, name, previous, (skipped) => {
-                    if (!(options === null || options === void 0 ? void 0 : options.reflect) || skipped)
+                    if (skipped)
                         return;
-                    // TODO: target or this
-                    target[CONSTANTS.API_LOCKED] = true;
+                    if (!(options === null || options === void 0 ? void 0 : options.reflect))
+                        return;
+                    this[CONSTANTS.API_LOCKED] = true;
                     updateAttribute(this, name, next);
-                    // TODO: target or this
-                    target[CONSTANTS.API_LOCKED] = false;
+                    this[CONSTANTS.API_LOCKED] = false;
                 });
             }
             // Attaches the getter and setter functions to the current property of the target class.
@@ -73,6 +71,9 @@ export function Property(options) {
             const set = descriptor
                 ? undefined
                 : (input) => {
+                    if (this[CONSTANTS.API_LOCKED]) {
+                        return;
+                    }
                     this[key] = toProperty(input, options === null || options === void 0 ? void 0 : options.type);
                 };
             // TODO: Check the configuration.

package/constants/index.d.ts

@@ -16,7 +16,6 @@ export declare const DECORATOR_STATE = "State";
 export declare const DECORATOR_METHOD = "Method";
 export declare const ELEMENT_HOST_NAME = "host";
 export declare const LIFECYCLE_ADOPTED = "adoptedCallback";
-export declare const LIFECYCLE_CONNECT = "connectCallback";
 export declare const LIFECYCLE_CONNECTED = "connectedCallback";
 export declare const LIFECYCLE_CONSTRUCTED = "constructedCallback";
 export declare const LIFECYCLE_DISCONNECTED = "disconnectedCallback";

package/constants/index.js

@@ -22,7 +22,6 @@ export const DECORATOR_METHOD = 'Method';
 export const ELEMENT_HOST_NAME = 'host';
 // lifecycle
 export const LIFECYCLE_ADOPTED = 'adoptedCallback';
-export const LIFECYCLE_CONNECT = 'connectCallback';
 export const LIFECYCLE_CONNECTED = 'connectedCallback';
 export const LIFECYCLE_CONSTRUCTED = 'constructedCallback';
 export const LIFECYCLE_DISCONNECTED = 'disconnectedCallback';

package/package.json

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

package/types/index.d.ts

@@ -1,7 +1,9 @@
-/**
- * @deprecated Use `HTMLPlusElement` instead.
- */
-export interface PlusElement {
-}
-export interface HTMLPlusElement extends PlusElement {
+export interface HTMLPlusElement {
+    adoptedCallback?(): void;
+    connectedCallback?(): void;
+    constructedCallback?(): void;
+    disconnectedCallback?(): void;
+    loadedCallback?(): void;
+    updateCallback?(states: Map<string, any>): void;
+    updatedCallback?(states: Map<string, any>): void;
 }