@htmlplus/element 2.5.0 → 2.6.0

package/client/decorators/context.d.ts

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

package/client/decorators/context.js

@@ -0,0 +1,114 @@
+import * as CONSTANTS from '../../constants/index.js';
+import { appendToMethod, dispatch, off, on } from '../utils/index.js';
+export function Provider(namespace) {
+    return function (target, key, descriptor) {
+        const symbol = Symbol();
+        const [MAIN, SUB] = namespace.split('.');
+        const prefix = `htmlplus:${MAIN}`;
+        const cleanups = (instance) => {
+            return (instance[symbol] || (instance[symbol] = new Map()));
+        };
+        const update = (instance) => {
+            const options = {};
+            options.detail = descriptor.get.call(instance);
+            dispatch(instance, `${prefix}:update`, options);
+            if (!SUB)
+                return;
+            options.bubbles = true;
+            dispatch(instance, `${prefix}:${instance[SUB]}:update`, options);
+        };
+        // TODO
+        appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
+            const cleanup = () => {
+                off(this, `${prefix}:presence`, onPresence);
+                cleanups(this).delete(prefix);
+            };
+            const onPresence = (event) => {
+                event.stopPropagation();
+                event.detail(this, descriptor.get.call(this));
+            };
+            on(this, `${prefix}:presence`, onPresence);
+            cleanups(this).set(prefix, cleanup);
+        });
+        appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATE, function (states) {
+            var _a;
+            update(this);
+            if (cleanups(this).size && !states.has(SUB))
+                return;
+            (_a = cleanups(this).get(`${prefix}:${states.get(SUB)}`)) === null || _a === void 0 ? void 0 : _a();
+            const type = `${prefix}:${this[SUB]}`;
+            const cleanup = () => {
+                off(window, `${type}:presence`, onPresence);
+                cleanups(this).delete(type);
+                dispatch(window, `${type}:disconnect`);
+            };
+            const onPresence = () => {
+                update(this);
+            };
+            on(window, `${type}:presence`, onPresence);
+            cleanups(this).set(type, cleanup);
+        });
+        appendToMethod(target, CONSTANTS.LIFECYCLE_DISCONNECTED, function () {
+            cleanups(this).forEach((cleanup) => cleanup());
+        });
+    };
+}
+export function Consumer(namespace) {
+    return function (target, key) {
+        const symbol = Symbol();
+        const [MAIN, SUB] = namespace.split('.');
+        const prefix = `htmlplus:${MAIN}`;
+        const cleanups = (instance) => {
+            return (instance[symbol] || (instance[symbol] = new Map()));
+        };
+        const update = (instance, state) => {
+            instance[key] = state;
+        };
+        // TODO
+        appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
+            const options = {
+                bubbles: true
+            };
+            options.detail = (parent, state) => {
+                update(this, state);
+                const cleanup = () => {
+                    off(parent, `${prefix}:update`, onUpdate);
+                    cleanups(this).delete(prefix);
+                    update(this, undefined);
+                };
+                const onUpdate = (event) => {
+                    update(this, event.detail);
+                };
+                on(parent, `${prefix}:update`, onUpdate);
+                cleanups(this).set(prefix, cleanup);
+            };
+            dispatch(this, `${prefix}:presence`, options);
+        });
+        appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATE, function (states) {
+            var _a;
+            if (cleanups(this).size && !states.has(SUB))
+                return;
+            (_a = cleanups(this).get(`${prefix}:${states.get(SUB)}`)) === null || _a === void 0 ? void 0 : _a();
+            const type = `${prefix}:${this[SUB]}`;
+            const cleanup = () => {
+                off(window, `${type}:disconnect`, onDisconnect);
+                off(window, `${type}:update`, onUpdate);
+                cleanups(this).delete(type);
+                update(this, undefined);
+            };
+            const onDisconnect = () => {
+                update(this, undefined);
+            };
+            const onUpdate = (event) => {
+                update(this, event.detail);
+            };
+            on(window, `${type}:disconnect`, onDisconnect);
+            on(window, `${type}:update`, onUpdate);
+            cleanups(this).set(type, cleanup);
+            dispatch(window, `${type}:presence`);
+        });
+        appendToMethod(target, CONSTANTS.LIFECYCLE_DISCONNECTED, function () {
+            cleanups(this).forEach((cleanup) => cleanup());
+        });
+    };
+}

package/client/decorators/index.d.ts

@@ -1,5 +1,5 @@
 export * from './bind.js';
-export * from './consumer.js';
+export * from './context.js';
 export * from './direction.js';
 export * from './element.js';
 export * from './event.js';
@@ -8,7 +8,6 @@ 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,5 +1,5 @@
 export * from './bind.js';
-export * from './consumer.js';
+export * from './context.js';
 export * from './direction.js';
 export * from './element.js';
 export * from './event.js';
@@ -8,7 +8,6 @@ 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/package.json

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

package/types/index.d.ts

@@ -1,9 +1,2 @@
 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;
 }

package/client/decorators/consumer.d.ts

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

package/client/decorators/consumer.js

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

@@ -1,6 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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));
-        });
-    };
-}