@htmlplus/element 2.2.0 → 2.4.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/bind.d.ts

@@ -2,7 +2,7 @@
  * Used to bind a method of a class to the current context,
  * making it easier to reference `this` within the method.
  */
-export declare function Bind(): (target: Object, propertyKey: PropertyKey, descriptor: PropertyDescriptor) => {
+export declare function Bind(): (target: Object, key: PropertyKey, descriptor: PropertyDescriptor) => {
     configurable: boolean;
     get(): any;
 };

package/client/decorators/bind.js

@@ -4,12 +4,12 @@ import { defineProperty } from '../utils/index.js';
  * making it easier to reference `this` within the method.
  */
 export function Bind() {
-    return function (target, propertyKey, descriptor) {
+    return function (target, key, descriptor) {
         return {
             configurable: true,
             get() {
                 const value = descriptor === null || descriptor === void 0 ? void 0 : descriptor.value.bind(this);
-                defineProperty(this, propertyKey, {
+                defineProperty(this, key, {
                     value,
                     configurable: true,
                     writable: true

package/client/decorators/consumer.d.ts

@@ -0,0 +1,6 @@
+import { HTMLPlusElement } from '../../types';
+/**
+ * TODO
+ * @param namespace
+ */
+export declare function Consumer(namespace: string): (target: HTMLPlusElement, key: PropertyKey) => void;

package/client/decorators/consumer.js

@@ -0,0 +1,21 @@
+import * as CONSTANTS from '../../constants/index.js';
+import { appendToMethod, dispatch, host } from '../utils/index.js';
+/**
+ * TODO
+ * @param namespace
+ */
+export function Consumer(namespace) {
+    return function (target, key) {
+        appendToMethod(target, CONSTANTS.LIFECYCLE_CONSTRUCTED, function () {
+            const options = {
+                bubbles: true
+            };
+            options.detail = (state) => {
+                this[key] = state;
+                const successful = !!host(this).parentElement;
+                return successful;
+            };
+            dispatch(this, `internal:context:${namespace}`, options);
+        });
+    };
+}

package/client/decorators/direction.d.ts

@@ -2,4 +2,4 @@
  * Indicates whether the [Direction](https://mdn.io/css-direction)
  * of the element is `Right-To-Left` or `Left-To-Right`.
  */
-export declare function Direction(): (target: import("../../types/index.js").PlusElement, propertyKey: PropertyKey) => void;
+export declare function Direction(): (target: import("../../types/index.js").HTMLPlusElement, key: PropertyKey) => void;

package/client/decorators/element.d.ts

@@ -1,7 +1,7 @@
-import { PlusElement } from '../../types';
+import { HTMLPlusElement } from '../../types';
 /**
  * The class marked with this decorator is considered a
  * [Custom Element](https://mdn.io/using-custom-elements),
  * and its name, in kebab-case, serves as the element name.
  */
-export declare function Element(): (constructor: PlusElement) => void;
+export declare function Element(): (constructor: HTMLPlusElement) => void;

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,44 +13,32 @@ 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];
-                    }
+                this.attachShadow({
+                    mode: 'open',
+                    delegatesFocus: constructor['delegatesFocus'],
+                    slotAssignment: constructor['slotAssignment']
                 });
+                const instance = (this[CONSTANTS.API_INSTANCE] = new constructor());
                 instance[CONSTANTS.API_HOST] = () => this;
                 // TODO
                 call(instance, CONSTANTS.LIFECYCLE_CONSTRUCTED);
             }
-            // TODO
-            static get formAssociated() {
-                return constructor['formAssociated'];
-            }
-            static get observedAttributes() {
-                return Object.keys(members)
-                    .filter((key) => members[key].type != CONSTANTS.TYPE_FUNCTION)
-                    .map((key) => kebabCase(key));
-            }
             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];
@@ -72,6 +60,10 @@ export function Element() {
                 call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_DISCONNECTED);
             }
         }
+        // TODO
+        Plus.formAssociated = constructor['formAssociated'];
+        // TODO
+        Plus.observedAttributes = constructor['observedAttributes'];
         customElements.define(tag, Plus);
     };
 }

package/client/decorators/event.d.ts

@@ -1,4 +1,4 @@
-import { PlusElement } from '../../types';
+import { HTMLPlusElement } from '../../types';
 /**
  * A function type that generates a `CustomEvent`.
  */
@@ -32,4 +32,4 @@ export interface EventOptions {
  *
  * @param options An object that configures options for the event dispatcher.
  */
-export declare function Event<T = any>(options?: EventOptions): (target: PlusElement, propertyKey: PropertyKey) => void;
+export declare function Event<T = any>(options?: EventOptions): (target: HTMLPlusElement, key: PropertyKey) => void;

package/client/decorators/event.js

@@ -1,5 +1,5 @@
 import { kebabCase, pascalCase } from 'change-case';
-import { defineProperty, getConfig, getFramework, host } from '../utils/index.js';
+import { defineProperty, dispatch, getConfig, getFramework, host } from '../utils/index.js';
 /**
  * Provides the capability to dispatch a [CustomEvent](https://mdn.io/custom-event)
  * from an element.
@@ -7,15 +7,15 @@ import { defineProperty, getConfig, getFramework, host } from '../utils/index.js
  * @param options An object that configures options for the event dispatcher.
  */
 export function Event(options = {}) {
-    return function (target, propertyKey) {
-        defineProperty(target, propertyKey, {
+    return function (target, key) {
+        defineProperty(target, key, {
             get() {
                 return (detail) => {
                     var _a, _b;
                     const element = host(this);
-                    const framework = getFramework(element);
+                    const framework = getFramework(this);
                     (_a = options.bubbles) !== null && _a !== void 0 ? _a : (options.bubbles = false);
-                    let type = String(propertyKey);
+                    let type = String(key);
                     switch (framework) {
                         case 'qwik':
                         case 'solid':
@@ -30,8 +30,7 @@ export function Event(options = {}) {
                     }
                     let event;
                     event || (event = (_b = getConfig('event', 'resolver')) === null || _b === void 0 ? void 0 : _b({ detail, element, framework, options, type }));
-                    event || (event = new CustomEvent(type, Object.assign(Object.assign({}, options), { detail })));
-                    element.dispatchEvent(event);
+                    event || (event = dispatch(this, type, Object.assign(Object.assign({}, options), { detail })));
                     return event;
                 };
             }

package/client/decorators/host.d.ts

@@ -1,4 +1,4 @@
 /**
  * Indicates the host of the element.
  */
-export declare function Host(): (target: import("../../types/index.js").PlusElement, propertyKey: PropertyKey) => void;
+export declare function Host(): (target: import("../../types/index.js").HTMLPlusElement, key: PropertyKey) => void;

package/client/decorators/index.d.ts

@@ -1,4 +1,5 @@
 export * from './bind.js';
+export * from './consumer.js';
 export * from './direction.js';
 export * from './element.js';
 export * from './event.js';
@@ -7,6 +8,7 @@ export * from './isRTL.js';
 export * from './listen.js';
 export * from './method.js';
 export * from './property.js';
+export * from './provider.js';
 export * from './query.js';
 export * from './queryAll.js';
 export * from './slots.js';

package/client/decorators/index.js

@@ -1,4 +1,5 @@
 export * from './bind.js';
+export * from './consumer.js';
 export * from './direction.js';
 export * from './element.js';
 export * from './event.js';
@@ -7,6 +8,7 @@ export * from './isRTL.js';
 export * from './listen.js';
 export * from './method.js';
 export * from './property.js';
+export * from './provider.js';
 export * from './query.js';
 export * from './queryAll.js';
 export * from './slots.js';

package/client/decorators/isRTL.d.ts

@@ -1,4 +1,4 @@
 /**
  * Indicates whether the direction of the element is `Right-To-Left` or not.
  */
-export declare function IsRTL(): (target: import("../../types/index.js").PlusElement, propertyKey: PropertyKey) => void;
+export declare function IsRTL(): (target: import("../../types/index.js").HTMLPlusElement, key: PropertyKey) => void;

package/client/decorators/listen.d.ts

@@ -1,4 +1,4 @@
-import { PlusElement } from '../../types';
+import { HTMLPlusElement } from '../../types';
 /**
  * An object that configures
  * [options](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener#options)
@@ -46,7 +46,7 @@ export interface ListenOptions {
  * [options](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener#options)
  * for the event listener.
  */
-export declare function Listen(type: string, options?: ListenOptions): (target: PlusElement, propertyKey: PropertyKey, descriptor: PropertyDescriptor) => {
+export declare function Listen(type: string, options?: ListenOptions): (target: HTMLPlusElement, key: PropertyKey, descriptor: PropertyDescriptor) => {
     configurable: boolean;
     get(): any;
 };

package/client/decorators/listen.js

@@ -1,5 +1,5 @@
 import * as CONSTANTS from '../../constants/index.js';
-import { appendToMethod, host, on, off } from '../utils/index.js';
+import { appendToMethod, on, off } from '../utils/index.js';
 import { Bind } from './bind.js';
 /**
  * Will be called whenever the specified event is delivered to the target
@@ -11,10 +11,9 @@ import { Bind } from './bind.js';
  * for the event listener.
  */
 export function Listen(type, options) {
-    return function (target, propertyKey, descriptor) {
-        options = Object.assign({ target: 'host' }, options);
+    return function (target, key, descriptor) {
         const element = (instance) => {
-            switch (options.target) {
+            switch (options === null || options === void 0 ? void 0 : options.target) {
                 case 'body':
                     return window.document.body;
                 case 'document':
@@ -22,17 +21,17 @@ export function Listen(type, options) {
                 case 'window':
                     return window;
                 case 'host':
-                    return host(instance);
+                    return instance;
                 default:
-                    return host(instance);
+                    return instance;
             }
         };
         appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
-            on(element(this), type, this[propertyKey], options);
+            on(element(this), type, this[key], options);
         });
         appendToMethod(target, CONSTANTS.LIFECYCLE_DISCONNECTED, function () {
-            off(element(this), type, this[propertyKey], options);
+            off(element(this), type, this[key], options);
         });
-        return Bind()(target, propertyKey, descriptor);
+        return Bind()(target, key, descriptor);
     };
 }

package/client/decorators/method.d.ts

@@ -1,6 +1,6 @@
-import { PlusElement } from '../../types';
+import { HTMLPlusElement } from '../../types';
 /**
  * Provides a way to encapsulate functionality within an element
  * and invoke it as needed, both internally and externally.
  */
-export declare function Method(): (target: PlusElement, propertyKey: PropertyKey) => void;
+export declare function Method(): (target: HTMLPlusElement, key: PropertyKey) => void;

package/client/decorators/method.js

@@ -5,10 +5,10 @@ import { appendToMethod, defineProperty, host } from '../utils/index.js';
  * and invoke it as needed, both internally and externally.
  */
 export function Method() {
-    return function (target, propertyKey) {
-        appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
-            defineProperty(host(this), propertyKey, {
-                get: () => this[propertyKey].bind(this)
+    return function (target, key) {
+        appendToMethod(target, CONSTANTS.LIFECYCLE_CONSTRUCTED, function () {
+            defineProperty(host(this), key, {
+                get: () => this[key].bind(this)
             });
         });
     };

package/client/decorators/property.d.ts

@@ -1,4 +1,4 @@
-import { PlusElement } from '../../types';
+import { HTMLPlusElement } from '../../types';
 /**
  * The configuration for property decorator.
  */
@@ -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: HTMLPlusElement, key: PropertyKey, descriptor?: PropertyDescriptor) => void;

package/client/decorators/property.js

@@ -1,45 +1,83 @@
+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) {
-        const name = String(propertyKey);
-        const symbol = Symbol();
-        addMember(target.constructor, name, options);
-        function get() {
-            return this[symbol];
+    return function (target, key, descriptor) {
+        var _a;
+        // Converts property name to string.
+        const name = String(key);
+        // 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);
+                    // TODO: target or this
+                    target[CONSTANTS.API_LOCKED] = true;
+                    updateAttribute(this, name, value);
+                    // TODO: target or this
+                    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;
+                    // TODO: target or this
+                    target[CONSTANTS.API_LOCKED] = true;
+                    updateAttribute(this, name, next);
+                    // TODO: target or this
+                    target[CONSTANTS.API_LOCKED] = false;
+                });
+            }
+            // Attaches the getter and setter functions to the current property of the target class.
+            defineProperty(target, key, { get, set });
         }
-        defineProperty(target, propertyKey, { get, set });
-        // TODO: check the lifecycle
+        // TODO: Check the lifecycle
         appendToMethod(target, CONSTANTS.LIFECYCLE_CONSTRUCTED, function () {
-            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];
+                return this[key];
             };
-            const set = (input) => {
-                this[propertyKey] = toProperty(input, options === null || options === void 0 ? void 0 : options.type);
-            };
-            // TODO: configurable
-            defineProperty(element, propertyKey, { get, set, configurable: true });
+            // Defines a setter function to use in the host element.
+            const set = descriptor
+                ? undefined
+                : (input) => {
+                    this[key] = 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(host(this), key, { get, set, configurable: true });
         });
     };
 }

package/client/decorators/provider.d.ts

@@ -0,0 +1,6 @@
+import { HTMLPlusElement } from '../../types';
+/**
+ * TODO
+ * @param namespace
+ */
+export declare function Provider(namespace: string): (target: HTMLPlusElement, key: PropertyKey, descriptor: PropertyDescriptor) => void;

package/client/decorators/provider.js

@@ -0,0 +1,31 @@
+import * as CONSTANTS from '../../constants/index.js';
+import { appendToMethod, on } from '../utils/index.js';
+/**
+ * TODO
+ * @param namespace
+ */
+export function Provider(namespace) {
+    return function (target, key, descriptor) {
+        const symbol = Symbol();
+        const update = (instance) => (updater) => {
+            const state = descriptor.get.call(instance);
+            const successful = updater(state);
+            if (successful)
+                return;
+            instance[symbol].delete(updater);
+        };
+        appendToMethod(target, CONSTANTS.LIFECYCLE_CONSTRUCTED, function () {
+            this[symbol] || (this[symbol] = new Set());
+            const handler = (event) => {
+                event.stopPropagation();
+                const updater = event.detail;
+                this[symbol].add(updater);
+                update(this)(updater);
+            };
+            on(this, `internal:context:${namespace}`, handler);
+        });
+        appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function () {
+            this[symbol].forEach(update(this));
+        });
+    };
+}

package/client/decorators/query.d.ts

@@ -6,4 +6,4 @@
  * [Locating DOM elements using selectors](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
  * for more about selectors and how to manage them.
  */
-export declare function Query(selectors: string): (target: import("../../types/index.js").PlusElement, propertyKey: PropertyKey) => void;
+export declare function Query(selectors: string): (target: import("../../types/index.js").HTMLPlusElement, key: PropertyKey) => void;

package/client/decorators/queryAll.d.ts

@@ -9,4 +9,4 @@
  * for more information about using selectors to identify elements.
  * Multiple selectors may be specified by separating them using commas.
  */
-export declare function QueryAll(selectors: string): (target: import("../../types/index.js").PlusElement, propertyKey: PropertyKey) => void;
+export declare function QueryAll(selectors: string): (target: import("../../types/index.js").HTMLPlusElement, key: PropertyKey) => void;

package/client/decorators/slots.d.ts

@@ -1,4 +1,4 @@
 /**
  * Returns the slots name.
  */
-export declare function Slots(): (target: import("../../types/index.js").PlusElement, propertyKey: PropertyKey) => void;
+export declare function Slots(): (target: import("../../types/index.js").HTMLPlusElement, key: PropertyKey) => void;

package/client/decorators/state.d.ts

@@ -1,6 +1,6 @@
-import { PlusElement } from '../../types';
+import { HTMLPlusElement } from '../../types';
 /**
  * Applying this decorator to any `class property` will trigger the
  * element to re-render upon the desired property changes.
  */
-export declare function State(): (target: PlusElement, propertyKey: PropertyKey) => void;
+export declare function State(): (target: HTMLPlusElement, key: PropertyKey) => void;

package/client/decorators/state.js

@@ -4,8 +4,8 @@ import { defineProperty, request } from '../utils/index.js';
  * element to re-render upon the desired property changes.
  */
 export function State() {
-    return function (target, propertyKey) {
-        const name = String(propertyKey);
+    return function (target, key) {
+        const name = String(key);
         const symbol = Symbol();
         function get() {
             return this[symbol];
@@ -18,6 +18,6 @@ export function State() {
             request(this, name, previous);
         }
         // TODO: configurable
-        defineProperty(target, propertyKey, { get, set, configurable: true });
+        defineProperty(target, key, { get, set, configurable: true });
     };
 }

package/client/decorators/watch.d.ts

@@ -1,4 +1,4 @@
-import { PlusElement } from '../../types';
+import { HTMLPlusElement } from '../../types';
 /**
  * Monitors `@Property` and `@State` to detect changes.
  * The decorated method will be called after any changes,
@@ -8,4 +8,4 @@ import { PlusElement } from '../../types';
  * @param keys Collection of `@Property` and `@State` names.
  * @param immediate Triggers the callback immediately after initialization.
  */
-export declare function Watch(keys?: string | string[], immediate?: boolean): (target: PlusElement, propertyKey: PropertyKey) => void;
+export declare function Watch(keys?: string | string[], immediate?: boolean): (target: HTMLPlusElement, key: PropertyKey) => void;

package/client/decorators/watch.js

@@ -10,21 +10,21 @@ import { appendToMethod } from '../utils/index.js';
  * @param immediate Triggers the callback immediately after initialization.
  */
 export function Watch(keys, immediate) {
-    return function (target, propertyKey) {
+    return function (target, key) {
         // Gets all keys
-        const all = [keys].flat().filter((key) => key);
+        const all = [keys].flat().filter((item) => item);
         // 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_RENDER_COMPLETED])
                 return;
             // Loops the keys.
-            states.forEach((previous, key) => {
+            states.forEach((previous, item) => {
                 // Skips the current key.
-                if (all.length && !all.includes(key))
+                if (all.length && !all.includes(item))
                     return;
                 // Invokes the method with parameters.
-                this[propertyKey](this[key], previous, key);
+                this[key](this[item], previous, item);
             });
         });
     };

package/client/index.d.ts

@@ -1,2 +1,2 @@
 export * from './decorators/index.js';
-export { classes, direction, getConfig, host, isCSSColor, isRTL, query, queryAll, on, off, slots, toUnit, setConfig, type Config, type ConfigOptions } from './utils/index.js';
+export { classes, direction, dispatch, getConfig, host, isCSSColor, isRTL, query, queryAll, on, off, slots, toUnit, setConfig, type Config, type ConfigOptions } from './utils/index.js';

package/client/index.js

@@ -1,2 +1,2 @@
 export * from './decorators/index.js';
-export { classes, direction, getConfig, host, isCSSColor, isRTL, query, queryAll, on, off, slots, toUnit, setConfig } from './utils/index.js';
+export { classes, direction, dispatch, getConfig, host, isCSSColor, isRTL, query, queryAll, on, off, slots, toUnit, setConfig } from './utils/index.js';

package/client/utils/appendToMethod.d.ts

@@ -1 +1 @@
-export declare const appendToMethod: (target: any, propertyKey: PropertyKey, handler: (this: any, ...parameters: Array<any>) => void) => void;
+export declare const appendToMethod: (target: Object, key: PropertyKey, handler: (this: any, ...parameters: Array<any>) => void) => void;

package/client/utils/appendToMethod.js

@@ -1,6 +1,6 @@
-export const appendToMethod = (target, propertyKey, handler) => {
+export const appendToMethod = (target, key, handler) => {
     // Gets the previous function
-    const previous = target[propertyKey];
+    const previous = target[key];
     // Creates new function
     function next(...parameters) {
         // Calls the previous
@@ -11,5 +11,5 @@ export const appendToMethod = (target, propertyKey, handler) => {
         return result;
     }
     // Replaces the next with the previous one
-    target[propertyKey] = next;
+    target[key] = next;
 };

package/client/utils/attributes.d.ts

@@ -1 +1,2 @@
-export declare const attributes: (element: HTMLElement, attributes: any[]) => void;
+import { HTMLPlusElement } from '../../types';
+export declare const attributes: (target: HTMLElement | HTMLPlusElement, attributes: any[]) => void;

package/client/utils/attributes.js

@@ -1,9 +1,11 @@
 import { off, on } from './event.js';
+import { host } from './host.js';
 import { isEvent } from './isEvent.js';
 import { toEvent } from './toEvent.js';
 import { updateAttribute } from './updateAttribute.js';
 const symbol = Symbol();
-export const attributes = (element, attributes) => {
+export const attributes = (target, attributes) => {
+    const element = host(target);
     const prev = element[symbol] || {};
     const next = Object.assign({}, ...attributes);
     const prevClass = (prev.class || '').split(' ');

package/client/utils/call.d.ts

@@ -1 +1 @@
-export declare const call: (target: any, key: PropertyKey, ...parameters: Array<any>) => any;
+export declare const call: (target: Object, key: PropertyKey, ...parameters: Array<any>) => any;

package/client/utils/direction.d.ts

@@ -1,6 +1,6 @@
-import { PlusElement } from '../../types';
+import { HTMLPlusElement } from '../../types';
 /**
  * Indicates whether the [Direction](https://mdn.io/css-direction)
  * of the element is `Right-To-Left` or `Left-To-Right`.
  */
-export declare const direction: (target: PlusElement) => 'ltr' | 'rtl';
+export declare const direction: (target: HTMLElement | HTMLPlusElement) => 'ltr' | 'rtl';

package/client/utils/event.d.ts

@@ -1,14 +1,13 @@
-type EventTarget = Window | Document | Element;
-type EventType = 'outside' | (string & {});
-type EventHandler = EventListenerOrEventListenerObject;
-type EventOptions = boolean | AddEventListenerOptions;
-type EventListener = (target: EventTarget, type: EventType, handler: EventHandler, options?: EventOptions) => void;
+import { HTMLPlusElement } from '../../types';
 /**
  * TODO
  */
-export declare const off: EventListener;
+export declare const dispatch: <T = any>(target: HTMLElement | HTMLPlusElement, type: string, eventInitDict?: CustomEventInit<T> | undefined) => CustomEvent<T>;
 /**
  * TODO
  */
-export declare const on: EventListener;
-export {};
+export declare const on: (target: Window | Document | HTMLElement | HTMLPlusElement, type: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void;
+/**
+ * TODO
+ */
+export declare const off: (target: Window | Document | HTMLElement | HTMLPlusElement, type: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void;

package/client/utils/event.js

@@ -1,35 +1,48 @@
+import { host } from './host.js';
 const outsides = [];
 /**
  * TODO
  */
-export const off = (target, type, handler, options) => {
-    if (type != 'outside')
-        return target.removeEventListener(type, handler, options);
-    const index = outsides.findIndex((outside) => {
-        return outside.target == target && outside.handler == handler && outside.options == options;
-    });
-    const outside = outsides[index];
-    if (!outside)
-        return;
-    off(document, outside.type, outside.callback, outside.options);
-    outsides.splice(index, 1);
+export const dispatch = (target, type, eventInitDict) => {
+    const event = new CustomEvent(type, eventInitDict);
+    host(target).dispatchEvent(event);
+    return event;
 };
 /**
  * TODO
  */
 export const on = (target, type, handler, options) => {
-    if (type != 'outside')
-        return target.addEventListener(type, handler, options);
+    const element = host(target);
+    if (type != 'outside') {
+        return element.addEventListener(type, handler, options);
+    }
     const callback = (event) => {
-        !event.composedPath().some((item) => item == target) && handler(event);
+        !event.composedPath().some((item) => item == element) && handler(event);
     };
     type = 'ontouchstart' in window.document.documentElement ? 'touchstart' : 'click';
     on(document, type, callback, options);
     outsides.push({
-        target,
-        type,
+        callback,
+        element,
         handler,
         options,
-        callback
+        type
+    });
+};
+/**
+ * TODO
+ */
+export const off = (target, type, handler, options) => {
+    const element = host(target);
+    if (type != 'outside') {
+        return element.removeEventListener(type, handler, options);
+    }
+    const index = outsides.findIndex((outside) => {
+        return outside.element == element && outside.handler == handler && outside.options == options;
     });
+    const outside = outsides[index];
+    if (!outside)
+        return;
+    off(document, outside.type, outside.callback, outside.options);
+    outsides.splice(index, 1);
 };

package/client/utils/getFramework.d.ts

@@ -1 +1,2 @@
-export declare const getFramework: (target: HTMLElement) => string | undefined;
+import { HTMLPlusElement } from '../../types';
+export declare const getFramework: (target: HTMLElement | HTMLPlusElement) => string | undefined;

package/client/utils/getFramework.js

@@ -1,13 +1,15 @@
+import { host } from './host.js';
 export const getFramework = (target) => {
-    if ('_qc_' in target)
+    const element = host(target);
+    if ('_qc_' in element)
         return 'qwik';
-    if ('_$owner' in target)
+    if ('_$owner' in element)
         return 'solid';
-    if ('__svelte_meta' in target)
+    if ('__svelte_meta' in element)
         return 'svelte';
-    if ('__vnode' in target)
+    if ('__vnode' in element)
         return 'vue';
-    const keys = Object.keys(target);
+    const keys = Object.keys(element);
     const has = (input) => keys.some((key) => key.startsWith(input));
     if (has('__zone_symbol__'))
         return 'angular';

package/client/utils/getStyles.d.ts

@@ -1,2 +1,2 @@
-import { PlusElement } from '../../types';
-export declare const getStyles: (target: PlusElement) => string | undefined;
+import { HTMLPlusElement } from '../../types';
+export declare const getStyles: (target: HTMLPlusElement) => string | undefined;

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/getTag.d.ts

@@ -1,2 +1,2 @@
-import { PlusElement } from '../../types';
-export declare const getTag: (target: PlusElement) => string | undefined;
+import { HTMLPlusElement } from '../../types';
+export declare const getTag: (target: HTMLPlusElement) => string | undefined;

package/client/utils/host.d.ts

@@ -1,5 +1,5 @@
-import { PlusElement } from '../../types';
+import { HTMLPlusElement } from '../../types';
 /**
  * Indicates the host of the element.
  */
-export declare const host: (target: PlusElement) => HTMLElement;
+export declare const host: (target: HTMLElement | HTMLPlusElement) => HTMLElement;

package/client/utils/host.js

@@ -3,5 +3,10 @@ import * as CONSTANTS from '../../constants/index.js';
  * Indicates the host of the element.
  */
 export const host = (target) => {
-    return target[CONSTANTS.API_HOST]();
+    try {
+        return target[CONSTANTS.API_HOST]();
+    }
+    catch (_a) {
+        return target;
+    }
 };

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/isRTL.d.ts

@@ -1,5 +1,5 @@
-import { PlusElement } from '../../types';
+import { HTMLPlusElement } from '../../types';
 /**
  * Indicates whether the direction of the element is `Right-To-Left` or not.
  */
-export declare const isRTL: (target: PlusElement) => boolean;
+export declare const isRTL: (target: HTMLPlusElement) => boolean;

package/client/utils/query.d.ts

@@ -1,5 +1,5 @@
-import { PlusElement } from '../../types/index.js';
+import { HTMLPlusElement } from '../../types';
 /**
  * Selects the first element in the shadow dom that matches a specified CSS selector.
  */
-export declare function query(target: PlusElement, selectors: string): Element | null | undefined;
+export declare function query(target: HTMLPlusElement, selectors: string): Element | null | undefined;

package/client/utils/queryAll.d.ts

@@ -1,5 +1,5 @@
-import { PlusElement } from '../../types/index.js';
+import { HTMLPlusElement } from '../../types';
 /**
  * Selects all elements in the shadow dom that match a specified CSS selector.
  */
-export declare function queryAll(target: PlusElement, selectors: string): NodeListOf<Element> | undefined;
+export declare function queryAll(target: HTMLPlusElement, selectors: string): NodeListOf<Element> | undefined;

package/client/utils/request.d.ts

@@ -1,4 +1,4 @@
-import { PlusElement } from '../../types';
+import { HTMLPlusElement } from '../../types';
 /**
  * Updates the DOM with a scheduled task.
  * @param target The element instance.
@@ -6,4 +6,4 @@ import { PlusElement } from '../../types';
  * @param previous The previous value of Property/State.
  * @param callback Invoked when the rendering phase is completed.
  */
-export declare const request: (target: PlusElement, name?: string, previous?: any, callback?: ((skipped: boolean) => void) | undefined) => void;
+export declare const request: (target: HTMLPlusElement, name?: string, previous?: any, callback?: ((skipped: boolean) => void) | undefined) => void;

package/client/utils/shadowRoot.d.ts

@@ -1,2 +1,2 @@
-import { PlusElement } from '../../types';
-export declare const shadowRoot: (target: PlusElement) => ShadowRoot | null;
+import { HTMLPlusElement } from '../../types';
+export declare const shadowRoot: (target: HTMLElement | HTMLPlusElement) => ShadowRoot | null;

package/client/utils/slots.d.ts

@@ -1,9 +1,9 @@
-import { PlusElement } from '../../types';
+import { HTMLPlusElement } from '../../types';
 type Slots = {
     [key: string]: boolean;
 };
 /**
  * Returns the slots name.
  */
-export declare const slots: (target: PlusElement) => Slots;
+export declare const slots: (target: HTMLElement | HTMLPlusElement) => Slots;
 export {};

package/client/utils/slots.js

@@ -4,8 +4,9 @@ import { host } from './host.js';
  */
 export const slots = (target) => {
     var _a;
+    const element = host(target);
     const slots = {};
-    const children = Array.from(host(target).childNodes);
+    const children = Array.from(element.childNodes);
     for (const child of children) {
         if (child.nodeName == '#comment')
             continue;

package/client/utils/toDecorator.d.ts

@@ -1,2 +1,2 @@
-import { PlusElement } from '../../types/index.js';
-export declare function toDecorator(util: Function, ...parameters: any[]): (target: PlusElement, propertyKey: PropertyKey) => void;
+import { HTMLPlusElement } from '../../types';
+export declare function toDecorator(util: Function, ...parameters: any[]): (target: HTMLPlusElement, key: PropertyKey) => void;

package/client/utils/toDecorator.js

@@ -1,7 +1,7 @@
 import { defineProperty } from './defineProperty.js';
 export function toDecorator(util, ...parameters) {
-    return function (target, propertyKey) {
-        defineProperty(target, propertyKey, {
+    return function (target, key) {
+        defineProperty(target, key, {
             get() {
                 return util(this, ...parameters);
             }

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/client/utils/updateAttribute.d.ts

@@ -1 +1,2 @@
-export declare const updateAttribute: (node: Element, key: string, value: any) => void;
+import { HTMLPlusElement } from '../../types';
+export declare const updateAttribute: (target: HTMLElement | HTMLPlusElement, key: string, value: any) => void;

package/client/utils/updateAttribute.js

@@ -1,7 +1,10 @@
 import { kebabCase } from 'change-case';
-export const updateAttribute = (node, key, value) => {
+import { host } from './host.js';
+export const updateAttribute = (target, key, value) => {
+    const element = host(target);
     const name = kebabCase(key);
-    if ([undefined, null, false].includes(value))
-        return node.removeAttribute(name);
-    node.setAttribute(name, value === true ? '' : value);
+    if ([undefined, null, false].includes(value)) {
+        return element.removeAttribute(name);
+    }
+    element.setAttribute(name, value === true ? '' : value);
 };

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.4.0",
   "license": "MIT",
   "sideEffects": false,
   "author": "Masood Abdolian <m.abdolian@gmail.com>",

package/transformer/plugins/customElement.js

@@ -103,9 +103,7 @@ export const customElement = (options) => {
                                 const children = node.children.map(render).flat();
                                 if (!attributes.length)
                                     return children;
-                                const { local } = addDependency(path, CONSTANTS.UTILS_PATH, CONSTANTS.UTILS_HOST_LOCAL, CONSTANTS.UTILS_HOST_IMPORTED);
-                                const host = t.callExpression(t.identifier(local), [t.thisExpression()]);
-                                return [TODO(host, attributes), ...children];
+                                return [TODO(t.thisExpression(), attributes), ...children];
                             }
                             const name = node.openingElement.name.name;
                             const children = node.children.map(render).flat();
@@ -273,9 +271,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/types/index.d.ts

@@ -1,2 +1,7 @@
+/**
+ * @deprecated Use `HTMLPlusElement` instead.
+ */
 export interface PlusElement {
 }
+export interface HTMLPlusElement extends PlusElement {
+}

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] || {};
-};