@htmlplus/element 2.5.1 → 2.7.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/element.js

@@ -13,7 +13,12 @@ export function Element() {
         const tag = getTag(constructor);
         if (customElements.get(tag))
             return;
-        class Plus extends HTMLElement {
+        customElements.define(tag, proxy(constructor));
+    };
+}
+const proxy = (constructor) => {
+    var _a;
+    return _a = class Plus extends HTMLElement {
             constructor() {
                 super();
                 this.attachShadow({
@@ -54,11 +59,10 @@ export function Element() {
             disconnectedCallback() {
                 call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_DISCONNECTED);
             }
-        }
+        },
         // TODO
-        Plus.formAssociated = constructor['formAssociated'];
+        _a.formAssociated = constructor['formAssociated'],
         // TODO
-        Plus.observedAttributes = constructor['observedAttributes'];
-        customElements.define(tag, Plus);
-    };
-}
+        _a.observedAttributes = constructor['observedAttributes'],
+        _a;
+};

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

package/transformer/plugins/customElement.js

@@ -280,7 +280,9 @@ export const customElement = (options) => {
         if (options.typings) {
             visitor(ast, {
                 Program(path) {
-                    const attributes = context.classProperties.map((property) => {
+                    const attributes = context
+                        .classProperties.filter((property) => !t.isClassMethod(property))
+                        .map((property) => {
                         const key = property.key;
                         const typeAnnotation = property.typeAnnotation;
                         return Object.assign(t.tSPropertySignature(t.stringLiteral(kebabCase(key.name)), typeAnnotation), {
@@ -310,8 +312,13 @@ export const customElement = (options) => {
                     });
                     const properties = context.classProperties.map((property) => {
                         const key = property.key;
-                        const typeAnnotation = property.typeAnnotation;
-                        return Object.assign(t.tSPropertySignature(t.identifier(key.name), typeAnnotation), {
+                        // TODO
+                        const readonly = property.readonly || !!property['returnType'];
+                        // TODO
+                        const typeAnnotation = (property.typeAnnotation ||
+                            property['returnType']);
+                        return Object.assign(t.tsPropertySignature(t.identifier(key.name), typeAnnotation), {
+                            readonly,
                             optional: property.optional,
                             leadingComments: t.cloneNode(property, true).leadingComments
                         });

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));
-        });
-    };
-}