@htmlplus/element 0.1.1 → 0.1.2

package/dist/client/decorators/attributes.js

@@ -1,16 +1,13 @@
 import * as CONSTANTS from '../../configs/constants.js';
-import { host } from '../helpers/index.js';
-import { defineMethod, sync } from '../utils/index.js';
+import { appendToMethod, host, sync } from '../utils/index.js';
 export function Attributes() {
     return function (target, propertyKey) {
         let update;
-        defineMethod(target, CONSTANTS.TOKEN_LIFECYCLE_CONNECTED, function (instance, callback, args) {
-            update = sync(host(instance));
-            return callback === null || callback === void 0 ? void 0 : callback(...args);
+        appendToMethod(target, CONSTANTS.TOKEN_LIFECYCLE_CONNECTED, function () {
+            update = sync(host(this));
         });
-        defineMethod(target, CONSTANTS.TOKEN_LIFECYCLE_UPDATED, function (instance, callback, args) {
-            update(instance[propertyKey]);
-            return callback === null || callback === void 0 ? void 0 : callback(...args);
+        appendToMethod(target, CONSTANTS.TOKEN_LIFECYCLE_UPDATED, function () {
+            update(this[propertyKey]);
         });
     };
 }

package/dist/client/decorators/bind.d.ts

@@ -1 +1,4 @@
-export declare function Bind(): (target: Object, propertyKey: PropertyKey, descriptor?: PropertyDescriptor | undefined) => import("../utils/decorator.js").DecoratorSetupReturn | undefined;
+export declare function Bind(): (target: Object, propertyKey: PropertyKey, descriptor: PropertyDescriptor) => {
+    configurable: boolean;
+    get(): any;
+};

package/dist/client/decorators/bind.js

@@ -1,11 +1,10 @@
-import { decorator, defineProperty } from '../utils/index.js';
 export function Bind() {
-    const setup = (target, propertyKey, descriptor) => {
+    return function (target, propertyKey, descriptor) {
         return {
             configurable: true,
             get() {
                 const value = descriptor === null || descriptor === void 0 ? void 0 : descriptor.value.bind(this);
-                defineProperty(this, propertyKey, {
+                Object.defineProperty(this, propertyKey, {
                     value,
                     configurable: true,
                     writable: true
@@ -14,5 +13,4 @@ export function Bind() {
             }
         };
     };
-    return decorator(setup);
 }

package/dist/client/decorators/element.js

@@ -1,6 +1,9 @@
-import { defineElement, proxy } from '../utils/index.js';
+import { isServer, proxy } from '../utils/index.js';
 export function Element(tag) {
     return function (constructor) {
-        defineElement(tag, proxy(constructor));
+        if (isServer())
+            return;
+        // TODO: remove as any
+        customElements.define(tag, proxy(constructor));
     };
 }

package/dist/client/decorators/event.d.ts

@@ -1,3 +1,3 @@
-import { EventOptions } from '../../types/index.js';
+import { EventOptions, PlusElement } from '../../types/index.js';
 export declare type EventEmitter<T = any> = (data?: T) => CustomEvent<T>;
-export declare function Event<T = any>(options?: EventOptions): (target: Object, propertyKey: PropertyKey, descriptor?: PropertyDescriptor | undefined) => import("../utils/decorator.js").DecoratorSetupReturn | undefined;
+export declare function Event<T = any>(options?: EventOptions): (target: PlusElement, propertyKey: PropertyKey) => void;

package/dist/client/decorators/event.js

@@ -1,18 +1,18 @@
-import { host } from '../helpers/index.js';
-import { decorator } from '../utils/index.js';
+import { host } from '../utils/index.js';
 // TODO: add global hook
 export function Event(options = {}) {
-    const setup = (target, propertyKey) => {
-        return {
+    return function (target, propertyKey) {
+        Object.defineProperty(target, propertyKey, {
             get() {
                 return (detail) => {
+                    var _a;
+                    (_a = options.bubbles) !== null && _a !== void 0 ? _a : (options.bubbles = false);
                     const name = options.name || String(propertyKey);
                     const event = new CustomEvent(name, Object.assign(Object.assign({}, options), { detail }));
                     host(this).dispatchEvent(event);
                     return event;
                 };
             }
-        };
+        });
     };
-    return decorator(setup);
 }

package/dist/client/decorators/listen.d.ts

@@ -1,2 +1,5 @@
 import { ListenOptions, PlusElement } from '../../types/index.js';
-export declare function Listen(name: string, options?: ListenOptions): (target: PlusElement, propertyKey: PropertyKey, descriptor: PropertyDescriptor) => import("../utils/decorator.js").DecoratorSetupReturn | undefined;
+export declare function Listen(name: string, options?: ListenOptions): (target: PlusElement, propertyKey: PropertyKey, descriptor: PropertyDescriptor) => {
+    configurable: boolean;
+    get(): any;
+};

package/dist/client/decorators/listen.js

@@ -1,6 +1,5 @@
 import * as CONSTANTS from '../../configs/constants.js';
-import { host } from '../helpers/index.js';
-import { defineMethod } from '../utils/index.js';
+import { appendToMethod, host, on, off } from '../utils/index.js';
 import { Bind } from './bind.js';
 const defaults = {
     target: 'host'
@@ -20,15 +19,11 @@ export function Listen(name, options = defaults) {
                     return host(instance);
             }
         };
-        defineMethod(target, CONSTANTS.TOKEN_LIFECYCLE_CONNECTED, function (instance, callback, args) {
-            var _a;
-            (_a = element(instance)) === null || _a === void 0 ? void 0 : _a.addEventListener(name, instance[propertyKey], options);
-            return callback === null || callback === void 0 ? void 0 : callback(...args);
+        appendToMethod(target, CONSTANTS.TOKEN_LIFECYCLE_CONNECTED, function () {
+            on(element(this), name, this[propertyKey], options);
         });
-        defineMethod(target, CONSTANTS.TOKEN_LIFECYCLE_DISCONNECTED, function (instance, callback, args) {
-            var _a;
-            (_a = element(instance)) === null || _a === void 0 ? void 0 : _a.removeEventListener(name, instance[propertyKey], options);
-            return callback === null || callback === void 0 ? void 0 : callback(...args);
+        appendToMethod(target, CONSTANTS.TOKEN_LIFECYCLE_DISCONNECTED, function () {
+            off(element(this), name, this[propertyKey], options);
         });
         return Bind()(target, propertyKey, descriptor);
     };

package/dist/client/decorators/method.d.ts

@@ -1 +1,2 @@
-export declare function Method(): (target: Object, propertyKey: PropertyKey, descriptor?: PropertyDescriptor | undefined) => import("../utils/decorator.js").DecoratorSetupReturn | undefined;
+import { PlusElement } from '../../types/index.js';
+export declare function Method(): (target: PlusElement, propertyKey: PropertyKey) => void;

package/dist/client/decorators/method.js

@@ -1,16 +1,12 @@
-import { host } from '../helpers/index.js';
-import { decorator, defineProperty } from '../utils/index.js';
+import { host, onReady } from '../utils/index.js';
 export function Method() {
-    const setup = (target, propertyKey) => {
-        return {
-            onReady() {
-                defineProperty(host(this), propertyKey, {
-                    get: () => {
-                        return this[propertyKey].bind(this);
-                    }
-                });
-            }
-        };
+    return function (target, propertyKey) {
+        onReady(target, function () {
+            Object.defineProperty(host(this), propertyKey, {
+                get: () => {
+                    return this[propertyKey].bind(this);
+                }
+            });
+        });
     };
-    return decorator(setup);
 }

package/dist/client/decorators/property.d.ts

@@ -1,2 +1,2 @@
-import { PropertyOptions } from '../../types/index.js';
-export declare function Property(options?: PropertyOptions): (target: Object, propertyKey: PropertyKey, descriptor?: PropertyDescriptor | undefined) => import("../utils/decorator.js").DecoratorSetupReturn | undefined;
+import { PlusElement, PropertyOptions } from '../../types/index.js';
+export declare function Property(options?: PropertyOptions): (target: PlusElement, propertyKey: PropertyKey) => void;

package/dist/client/decorators/property.js

@@ -1,10 +1,9 @@
 import * as CONSTANTS from '../../configs/constants.js';
-import { host } from '../helpers/index.js';
-import { api, decorator, defineProperty, parseValue, updateAttribute } from '../utils/index.js';
+import { api, host, onReady, parseValue, updateAttribute } from '../utils/index.js';
 export function Property(options) {
-    const setup = (target, propertyKey) => {
+    return function (target, propertyKey) {
         let prev, next;
-        return {
+        Object.defineProperty(target, propertyKey, {
             get() {
                 return next;
             },
@@ -26,18 +25,17 @@ export function Property(options) {
                     updateAttribute(element, name, next);
                 api(this).request({ [propertyKey]: [next, prev] });
                 prev = next;
-            },
-            onReady() {
-                defineProperty(host(this), propertyKey, {
-                    get: () => {
-                        return this[propertyKey];
-                    },
-                    set: (value) => {
-                        this[propertyKey] = value;
-                    }
-                });
             }
-        };
+        });
+        onReady(target, function () {
+            Object.defineProperty(host(this), propertyKey, {
+                get: () => {
+                    return this[propertyKey];
+                },
+                set: (value) => {
+                    this[propertyKey] = value;
+                }
+            });
+        });
     };
-    return decorator(setup);
 }

package/dist/client/decorators/state.d.ts

@@ -1 +1,2 @@
-export declare function State(): (target: Object, propertyKey: PropertyKey, descriptor?: PropertyDescriptor | undefined) => import("../utils/decorator.js").DecoratorSetupReturn | undefined;
+import { PlusElement } from '../../types/index.js';
+export declare function State(): (target: PlusElement, propertyKey: PropertyKey) => void;

package/dist/client/decorators/state.js

@@ -1,9 +1,8 @@
-import { host } from '../helpers/index.js';
-import { api, decorator, defineProperty } from '../utils/index.js';
+import { api, host, onReady } from '../utils/index.js';
 export function State() {
-    const setup = (target, propertyKey) => {
+    return function (target, propertyKey) {
         let prev, next;
-        return {
+        Object.defineProperty(target, propertyKey, {
             get() {
                 return next;
             },
@@ -16,18 +15,17 @@ export function State() {
                     return;
                 api(this).request({ [propertyKey]: [next, prev] });
                 prev = next;
-            },
-            onReady() {
-                defineProperty(host(this), propertyKey, {
-                    get: () => {
-                        return this[propertyKey];
-                    },
-                    set: (value) => {
-                        this[propertyKey] = value;
-                    }
-                });
             }
-        };
+        });
+        onReady(target, function () {
+            Object.defineProperty(host(this), propertyKey, {
+                get: () => {
+                    return this[propertyKey];
+                },
+                set: (value) => {
+                    this[propertyKey] = value;
+                }
+            });
+        });
     };
-    return decorator(setup);
 }

package/dist/client/decorators/watch.js

@@ -1,18 +1,17 @@
 import * as CONSTANTS from '../../configs/constants.js';
-import { defineMethod } from '../utils/index.js';
+import { appendToMethod } from '../utils/index.js';
 // TODO: support * key
 export function Watch(...keys) {
     return function (target, propertyKey) {
         if (!keys.length)
             return;
-        defineMethod(target, CONSTANTS.TOKEN_LIFECYCLE_UPDATED, function (instance, callback, args) {
+        appendToMethod(target, CONSTANTS.TOKEN_LIFECYCLE_UPDATED, function (args) {
             const [states] = args;
             for (const key of keys) {
                 if (states === null || states === void 0 ? void 0 : states[key]) {
-                    instance[propertyKey](...states[key], key);
+                    this[propertyKey](...states[key], key);
                 }
             }
-            return callback === null || callback === void 0 ? void 0 : callback(...args);
         });
     };
 }

package/dist/client/helpers/direction.js

@@ -1,4 +1,4 @@
-import { host } from './host.js';
+import { host } from '../utils/index.js';
 export const direction = (target) => {
     return getComputedStyle(host(target)).getPropertyValue('direction').toLowerCase();
 };

package/dist/client/helpers/index.d.ts

@@ -1,11 +1,9 @@
 export * from './classes.js';
 export * from './direction.js';
-export * from './event.js';
-export * from './host.js';
 export * from './is-rtl.js';
-export * from './is-server.js';
 export * from './query.js';
 export * from './query-all.js';
 export * from './slots.js';
 export * from './styles.js';
 export * from './to-unit.js';
+export { host, isServer, on, off } from '../utils/index.js';

package/dist/client/helpers/index.js

@@ -1,11 +1,9 @@
 export * from './classes.js';
 export * from './direction.js';
-export * from './event.js';
-export * from './host.js';
 export * from './is-rtl.js';
-export * from './is-server.js';
 export * from './query.js';
 export * from './query-all.js';
 export * from './slots.js';
 export * from './styles.js';
 export * from './to-unit.js';
+export { host, isServer, on, off } from '../utils/index.js';

package/dist/client/helpers/query-all.js

@@ -1,4 +1,4 @@
-import { host } from './host.js';
+import { host } from '../utils/index.js';
 export function queryAll(target, selectors) {
     var _a, _b;
     return (_b = (_a = host(target)) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll(selectors);

package/dist/client/helpers/query.js

@@ -1,4 +1,4 @@
-import { host } from './host.js';
+import { host } from '../utils/index.js';
 export function query(target, selectors) {
     var _a, _b;
     return (_b = (_a = host(target)) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(selectors);

package/dist/client/helpers/slots.js

@@ -1,11 +1,10 @@
-import { defineProperty } from '../utils/index.js';
 import { queryAll } from './query-all.js';
 export const slots = (target) => {
     var _a;
     const result = {};
     (_a = queryAll(target, 'slot')) === null || _a === void 0 ? void 0 : _a.forEach((slot) => {
         const name = slot.name || 'default';
-        defineProperty(result, name, {
+        Object.defineProperty(result, name, {
             get() {
                 return !!slot.assignedNodes().filter((node) => { var _a; return node.nodeName != '#text' || ((_a = node.nodeValue) === null || _a === void 0 ? void 0 : _a.trim()); }).length;
             }

package/dist/client/services/link.js

@@ -1,4 +1,4 @@
-import { host } from '../helpers/index.js';
+import { host } from '../utils/index.js';
 const links = new Map();
 // TODO: return type
 export const createLink = (namespace) => {

package/dist/client/utils/append-to-method.d.ts

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

package/dist/client/utils/append-to-method.js

@@ -0,0 +1,7 @@
+export const appendToMethod = (target, propertyKey, handler) => {
+    const callback = target[propertyKey];
+    target[propertyKey] = function () {
+        handler.bind(this)(Array.from(arguments));
+        return callback === null || callback === void 0 ? void 0 : callback.bind(this)(arguments);
+    };
+};

package/dist/client/utils/index.d.ts

@@ -1,10 +1,10 @@
 export * from './api.js';
-export * from './decorator.js';
-export * from './define-element.js';
-export * from './define-method.js';
-export * from './define-property.js';
+export * from './append-to-method.js';
+export * from './event.js';
+export * from './host.js';
 export * from './is-event.js';
 export * from './is-server.js';
+export * from './on-ready.js';
 export * from './parse-value.js';
 export * from './proxy.js';
 export * from './sync.js';

package/dist/client/utils/index.js

@@ -1,10 +1,10 @@
 export * from './api.js';
-export * from './decorator.js';
-export * from './define-element.js';
-export * from './define-method.js';
-export * from './define-property.js';
+export * from './append-to-method.js';
+export * from './event.js';
+export * from './host.js';
 export * from './is-event.js';
 export * from './is-server.js';
+export * from './on-ready.js';
 export * from './parse-value.js';
 export * from './proxy.js';
 export * from './sync.js';

package/dist/client/utils/on-ready.d.ts

@@ -0,0 +1 @@
+export declare function onReady(target: any, callback: (this: any) => void): void;

package/dist/client/utils/on-ready.js

@@ -0,0 +1,4 @@
+export function onReady(target, callback) {
+    var _a;
+    ((_a = target['setup']) !== null && _a !== void 0 ? _a : (target['setup'] = [])).push(callback);
+}

package/dist/client/utils/proxy.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { html, render } from 'uhtml';
 import * as CONSTANTS from '../../configs/constants.js';
 import { isServer } from './is-server.js';
@@ -9,6 +18,60 @@ export const proxy = (Class) => {
         };
     let host, instance;
     const members = Class[CONSTANTS.TOKEN_STATIC_MEMBERS] || {};
+    // TODO
+    let states;
+    let isPending = false;
+    let updatePromise;
+    const request = (state) => {
+        if (!true /*hasChange*/)
+            return;
+        states = Object.assign(Object.assign({}, (states || {})), state);
+        if (isPending)
+            return;
+        updatePromise = enqueue();
+    };
+    const enqueue = () => __awaiter(void 0, void 0, void 0, function* () {
+        isPending = true;
+        try {
+            yield updatePromise;
+        }
+        catch (error) {
+            Promise.reject(error);
+        }
+        const result = perform();
+        if (result != null)
+            yield result;
+        return !isPending;
+    });
+    const perform = () => {
+        if (!isPending)
+            return;
+        try {
+            if (true /*shouldUpdate*/) {
+                // TODO
+                // call(CONSTANTS.TOKEN_LIFECYCLE_UPDATE, [allStates]);
+                render(host.shadowRoot, () => {
+                    const markup = call(CONSTANTS.TOKEN_METHOD_RENDER);
+                    const styles = Class[CONSTANTS.TOKEN_STATIC_STYLES];
+                    if (!styles && !markup)
+                        return html ``;
+                    if (!styles)
+                        return markup;
+                    if (!markup)
+                        return html `<style>${styles}</style>`;
+                    return html `<style>${styles}</style>${markup}`;
+                });
+                // TODO
+                call(CONSTANTS.TOKEN_LIFECYCLE_UPDATED, [states]);
+                states = undefined;
+            }
+            isPending = false;
+        }
+        catch (error) {
+            isPending = false;
+            throw error;
+        }
+    };
     const call = (key, args) => {
         var _a;
         return (_a = instance[key]) === null || _a === void 0 ? void 0 : _a.apply(instance, args);
@@ -19,30 +82,6 @@ export const proxy = (Class) => {
     const set = (key, value) => {
         instance[CONSTANTS.TOKEN_API][key] = value;
     };
-    // TODO
-    let timeout, allStates;
-    const request = (states) => {
-        clearTimeout(timeout);
-        allStates = Object.assign(Object.assign({}, (allStates || {})), states);
-        timeout = setTimeout(() => {
-            // TODO
-            // call(CONSTANTS.TOKEN_LIFECYCLE_UPDATE, [allStates]);
-            render(host.shadowRoot, () => {
-                const markup = call(CONSTANTS.TOKEN_METHOD_RENDER);
-                const styles = Class[CONSTANTS.TOKEN_STATIC_STYLES];
-                if (!styles && !markup)
-                    return html ``;
-                if (!styles)
-                    return markup;
-                if (!markup)
-                    return html `<style>${styles}</style>`;
-                return html `<style>${styles}</style>${markup}`;
-            });
-            // TODO
-            call(CONSTANTS.TOKEN_LIFECYCLE_UPDATED, [allStates]);
-            allStates = undefined;
-        });
-    };
     return class extends HTMLElement {
         constructor() {
             var _a, _b;
@@ -74,7 +113,8 @@ export const proxy = (Class) => {
         connectedCallback() {
             call(CONSTANTS.TOKEN_LIFECYCLE_CONNECTED);
             request();
-            call(CONSTANTS.TOKEN_LIFECYCLE_LOADED);
+            // TODO
+            setTimeout(() => call(CONSTANTS.TOKEN_LIFECYCLE_LOADED));
             set(CONSTANTS.TOKEN_API_READY, true);
         }
         disconnectedCallback() {

package/dist/client/utils/sync.js

@@ -1,3 +1,4 @@
+import { on, off } from './event.js';
 import { isEvent } from './is-event.js';
 import { toEvent } from './to-event.js';
 import { updateAttribute } from './update-attribute.js';
@@ -16,12 +17,12 @@ export const sync = (node) => {
         if (prev.style || next.style)
             node.setAttribute('style', next.style || '');
         for (const key in prev)
-            isEvent(key) && node.removeEventListener(toEvent(key), prev[key]);
+            isEvent(key) && off(node, toEvent(key), prev[key]);
         for (const key in next) {
             if (['class', 'style'].includes(key))
                 continue;
             if (isEvent(key))
-                node.addEventListener(toEvent(key), next[key]);
+                on(node, toEvent(key), next[key]);
             else
                 updateAttribute(node, key, next[key]);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "MIT",
   "author": "Masood Abdolian <m.abdolian@gmail.com>",
   "description": "Compiler of HTMLPlus",

package/dist/client/helpers/is-server.d.ts

@@ -1 +0,0 @@
-export { isServer } from '../utils/index.js';

package/dist/client/helpers/is-server.js

@@ -1 +0,0 @@
-export { isServer } from '../utils/index.js';

package/dist/client/utils/decorator.d.ts

@@ -1,5 +0,0 @@
-export declare type DecoratorSetup = (target: Object, propertyKey: PropertyKey, descriptor?: PropertyDescriptor) => DecoratorSetupReturn;
-export declare type DecoratorSetupReturn = PropertyDescriptor & {
-    onReady?(): void;
-};
-export declare const decorator: (setup: DecoratorSetup) => (target: Object, propertyKey: PropertyKey, descriptor?: PropertyDescriptor | undefined) => DecoratorSetupReturn | undefined;

package/dist/client/utils/decorator.js

@@ -1,14 +0,0 @@
-import { defineProperty } from './define-property.js';
-export const decorator = (setup) => {
-    return function (target, propertyKey, descriptor) {
-        var _a;
-        const options = setup(target, propertyKey, descriptor);
-        // TODO
-        if (options.onReady)
-            ((_a = target['setup']) !== null && _a !== void 0 ? _a : (target['setup'] = [])).push(options.onReady);
-        if (descriptor)
-            return options;
-        if (Object.keys(options).some((key) => ['configurable', 'enumerable', 'value', 'writable', 'get', 'set'].includes(key)))
-            defineProperty(target, propertyKey, options);
-    };
-};

package/dist/client/utils/define-element.d.ts

@@ -1 +0,0 @@
-export declare const defineElement: (name: string, Class: any) => void;

package/dist/client/utils/define-element.js

@@ -1,7 +0,0 @@
-import { isServer } from './is-server.js';
-// TODO: Class type
-export const defineElement = (name, Class) => {
-    if (isServer())
-        return;
-    window.customElements.define(name, Class);
-};

package/dist/client/utils/define-method.d.ts

@@ -1 +0,0 @@
-export declare const defineMethod: <T>(target: T, propertyKey: PropertyKey, handler: any) => void;

package/dist/client/utils/define-method.js

@@ -1,7 +0,0 @@
-// TODO: handler type
-export const defineMethod = (target, propertyKey, handler) => {
-    const callback = target[propertyKey];
-    target[propertyKey] = function (...args) {
-        return handler(this, callback === null || callback === void 0 ? void 0 : callback.bind(this), args);
-    };
-};

package/dist/client/utils/define-property.d.ts

@@ -1 +0,0 @@
-export declare const defineProperty: <T>(o: T, p: PropertyKey, attributes: PropertyDescriptor & ThisType<any>) => T;

package/dist/client/utils/define-property.js

@@ -1 +0,0 @@
-export const defineProperty = Object.defineProperty;