@htmlplus/element 2.3.0 → 2.4.0

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

@@ -16,20 +16,16 @@ export function Element() {
         class Plus extends HTMLElement {
             constructor() {
                 super();
-                this.attachShadow({ mode: 'open' });
+                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'];
-            }
-            // TODO
-            static get observedAttributes() {
-                return constructor['observedAttributes'];
-            }
             adoptedCallback() {
                 call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_ADOPTED);
             }
@@ -64,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) {
+    return function (target, key) {
         appendToMethod(target, CONSTANTS.LIFECYCLE_CONSTRUCTED, function () {
-            defineProperty(host(this), propertyKey, {
-                get: () => this[propertyKey].bind(this)
+            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.
  */
@@ -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, descriptor?: PropertyDescriptor) => void;
+export declare function Property(options?: PropertyOptions): (target: HTMLPlusElement, key: PropertyKey, descriptor?: PropertyDescriptor) => void;

package/client/decorators/property.js

@@ -6,10 +6,10 @@ import { appendToMethod, defineProperty, host, request, toProperty, updateAttrib
  * and updates the element when the property is set.
  */
 export function Property(options) {
-    return function (target, propertyKey, descriptor) {
+    return function (target, key, descriptor) {
         var _a;
         // Converts property name to string.
-        const name = String(propertyKey);
+        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
@@ -22,8 +22,10 @@ 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;
-                    updateAttribute(host(this), name, value);
+                    updateAttribute(this, name, value);
+                    // TODO: target or this
                     target[CONSTANTS.API_LOCKED] = false;
                     return value;
                 };
@@ -51,31 +53,31 @@ export function Property(options) {
                 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(host(this), name, next);
+                    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, propertyKey, { get, set });
+            defineProperty(target, key, { get, set });
         }
         // TODO: Check the lifecycle
         appendToMethod(target, CONSTANTS.LIFECYCLE_CONSTRUCTED, function () {
-            // Gets the host element from the target class.
-            const element = host(this);
             // Defines a getter function to use in the host element.
             const get = () => {
-                return this[propertyKey];
+                return this[key];
             };
             // 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);
+                    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(element, propertyKey, { get, set, configurable: true });
+            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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "2.3.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();

package/types/index.d.ts

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