@htmlplus/element 0.1.6 → 0.1.9

package/dist/client/decorators/attributes.js

@@ -3,10 +3,10 @@ import { appendToMethod, host, sync } from '../utils/index.js';
 export function Attributes() {
     return function (target, propertyKey) {
         let update;
-        appendToMethod(target, CONSTANTS.TOKEN_LIFECYCLE_CONNECTED, function () {
+        appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
             update = sync(host(this));
         });
-        appendToMethod(target, CONSTANTS.TOKEN_LIFECYCLE_UPDATED, function () {
+        appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function () {
             update(this[propertyKey]);
         });
     };

package/dist/client/decorators/element.js

@@ -1,119 +1,49 @@
-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 { camelCase, paramCase } from 'change-case';
 import * as CONSTANTS from '../../configs/constants.js';
-import { isServer, parseValue } from '../utils/index.js';
+import { call, getMembers, isServer, parseValue, request } from '../utils/index.js';
 export function Element(tag) {
     return function (constructor) {
         if (isServer())
             return;
-        const members = constructor[CONSTANTS.TOKEN_STATIC_MEMBERS];
-        const styles = constructor[CONSTANTS.TOKEN_STATIC_STYLES];
-        customElements.define(tag, class extends HTMLElement {
+        const members = getMembers(constructor);
+        class Plus extends HTMLElement {
             constructor() {
-                var _a, _b;
-                var _c, _d;
+                var _a;
                 super();
-                // TODO
                 this.plus = new constructor();
-                // TODO
-                let states, isPending, updatePromise;
-                const request = (state) => {
-                    if (!true /*hasChange*/)
-                        return Promise.resolve(false);
-                    states = Object.assign(Object.assign({}, (states || {})), state);
-                    if (!isPending)
-                        updatePromise = enqueue();
-                    return updatePromise;
-                };
-                const enqueue = () => __awaiter(this, void 0, void 0, function* () {
-                    var _e;
-                    isPending = true;
-                    try {
-                        yield updatePromise;
-                    }
-                    catch (error) {
-                        Promise.reject(error);
-                    }
-                    // TODO: may be not used
-                    if (!isPending)
-                        return updatePromise;
-                    try {
-                        if (!true /*shouldUpdate*/)
-                            return (isPending = false);
-                        console.log('render');
-                        // TODO
-                        // call(CONSTANTS.TOKEN_LIFECYCLE_UPDATE, [allStates]);
-                        render(this.shadowRoot, () => {
-                            var _a;
-                            const markup = (_a = this.plus[CONSTANTS.TOKEN_METHOD_RENDER]) === null || _a === void 0 ? void 0 : _a.call(this.plus);
-                            if (!styles && !markup)
-                                return html ``;
-                            if (!styles)
-                                return markup;
-                            if (!markup)
-                                return html `<style>${styles}</style>`;
-                            return html `<style>${styles}</style>${markup}`;
-                        });
-                        // TODO
-                        (_e = this.plus[CONSTANTS.TOKEN_LIFECYCLE_UPDATED]) === null || _e === void 0 ? void 0 : _e.call(this.plus, states);
-                        states = undefined;
-                        isPending = false;
-                        return true;
-                    }
-                    catch (error) {
-                        isPending = false;
-                        throw error;
-                    }
-                });
-                (_a = (_c = this.plus)[_d = CONSTANTS.TOKEN_API]) !== null && _a !== void 0 ? _a : (_c[_d] = {
-                    [CONSTANTS.TOKEN_API_HOST]: () => this,
-                    [CONSTANTS.TOKEN_API_REQUEST]: request
-                });
-                // TODO
-                (_b = this.plus.setup) === null || _b === void 0 ? void 0 : _b.forEach((setup) => setup.call(this.plus));
+                this.plus[CONSTANTS.API_HOST] = () => this;
+                (_a = this.plus[CONSTANTS.API_SETUP]) === null || _a === void 0 ? void 0 : _a.forEach((setup) => setup.call(this.plus));
                 this.attachShadow({ mode: 'open' });
             }
             static get observedAttributes() {
-                return Object.keys(members).filter((key) => members[key][0] != CONSTANTS.TYPE_FUNCTION);
+                return Object.keys(members)
+                    .filter((key) => members[key][0] != CONSTANTS.TYPE_FUNCTION)
+                    .map((key) => paramCase(key));
             }
             adoptedCallback() {
-                var _a;
-                (_a = this.plus[CONSTANTS.TOKEN_LIFECYCLE_ADOPTED]) === null || _a === void 0 ? void 0 : _a.call(this.plus);
+                call(this.plus, CONSTANTS.LIFECYCLE_ADOPTED);
             }
             attributeChangedCallback(name, prev, next) {
-                const [type] = members[name];
-                this.plus[name] = parseValue(next, type);
-                if (!this.plus[CONSTANTS.TOKEN_API][CONSTANTS.TOKEN_API_READY])
-                    return;
-                this.plus[CONSTANTS.TOKEN_API][CONSTANTS.TOKEN_API_REQUEST]().catch((error) => {
-                    throw error;
-                });
+                const key = camelCase(name);
+                const [type] = members[key];
+                const parsed = parseValue(next, type);
+                this.plus[key] = parsed;
             }
             connectedCallback() {
-                var _a;
-                (_a = this.plus[CONSTANTS.TOKEN_LIFECYCLE_CONNECTED]) === null || _a === void 0 ? void 0 : _a.call(this.plus);
-                this.plus[CONSTANTS.TOKEN_API][CONSTANTS.TOKEN_API_REQUEST]()
+                this.plus[CONSTANTS.API_READY] = true;
+                call(this.plus, CONSTANTS.LIFECYCLE_CONNECTED);
+                request(this.plus)
                     .then(() => {
-                    var _a;
-                    (_a = this.plus[CONSTANTS.TOKEN_LIFECYCLE_LOADED]) === null || _a === void 0 ? void 0 : _a.call(this.plus);
+                    call(this.plus, CONSTANTS.LIFECYCLE_LOADED);
                 })
                     .catch((error) => {
                     throw error;
                 });
-                this.plus[CONSTANTS.TOKEN_API][CONSTANTS.TOKEN_API_READY] = true;
             }
             disconnectedCallback() {
-                var _a;
-                (_a = this.plus[CONSTANTS.TOKEN_LIFECYCLE_DISCONNECTED]) === null || _a === void 0 ? void 0 : _a.call(this.plus);
+                call(this.plus, CONSTANTS.LIFECYCLE_DISCONNECTED);
             }
-        });
+        }
+        customElements.define(tag, Plus);
     };
 }

package/dist/client/decorators/listen.js

@@ -19,10 +19,10 @@ export function Listen(name, options = defaults) {
                     return host(instance);
             }
         };
-        appendToMethod(target, CONSTANTS.TOKEN_LIFECYCLE_CONNECTED, function () {
+        appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
             on(element(this), name, this[propertyKey], options);
         });
-        appendToMethod(target, CONSTANTS.TOKEN_LIFECYCLE_DISCONNECTED, function () {
+        appendToMethod(target, CONSTANTS.LIFECYCLE_DISCONNECTED, function () {
             off(element(this), name, this[propertyKey], options);
         });
         return Bind()(target, propertyKey, descriptor);

package/dist/client/decorators/property.js

@@ -1,39 +1,40 @@
-import * as CONSTANTS from '../../configs/constants.js';
-import { api, defineProperty, host, onReady, parseValue, updateAttribute } from '../utils/index.js';
+import { defineProperty, getMembers, host, isReady, parseValue, request, updateAttribute, onReady } from '../utils/index.js';
 export function Property(options) {
     return function (target, propertyKey) {
-        let prev, next;
+        const values = new Map();
         defineProperty(target, propertyKey, {
             get() {
-                return next;
+                return values.get(this);
             },
             set(input) {
-                var _a;
-                if (input === next)
+                const value = values.get(this);
+                if (value === input)
                     return;
-                next = input;
-                if (!((_a = api(this)) === null || _a === void 0 ? void 0 : _a.ready))
-                    return;
-                const element = host(this);
-                const name = String(propertyKey);
-                const raw = element.getAttribute(name);
-                const [type] = target.constructor[CONSTANTS.TOKEN_STATIC_MEMBERS][propertyKey];
-                const parsed = parseValue(raw, type);
-                if (parsed === next)
-                    return;
-                api(this)
-                    .request({ [propertyKey]: [next, prev] })
+                values.set(this, input);
+                // TODO
+                const ready = isReady(this);
+                request(this, { [propertyKey]: [input, value] })
                     .then((renderd) => {
+                    const name = String(propertyKey);
+                    const element = host(this);
+                    const hasAttribute = element.hasAttribute(name);
+                    // TODO
+                    if ((options === null || options === void 0 ? void 0 : options.reflect) && !hasAttribute && !renderd && !ready)
+                        updateAttribute(element, name, input);
                     if (!renderd)
                         return;
                     if (!(options === null || options === void 0 ? void 0 : options.reflect))
                         return;
-                    updateAttribute(element, name, next);
+                    const raw = element.getAttribute(name);
+                    const [type] = getMembers(target)[propertyKey];
+                    const parsed = parseValue(raw, type);
+                    if (parsed === input)
+                        return;
+                    updateAttribute(element, name, input);
                 })
                     .catch((error) => {
                     throw error;
                 });
-                prev = next;
             }
         });
         onReady(target, function () {

package/dist/client/decorators/state.js

@@ -1,24 +1,21 @@
-import { api, defineProperty, host, onReady } from '../utils/index.js';
+import { defineProperty, host, onReady, request } from '../utils/index.js';
 export function State() {
     return function (target, propertyKey) {
-        let prev, next;
+        const values = new Map();
         defineProperty(target, propertyKey, {
             get() {
-                return next;
+                return values.get(this);
             },
             set(input) {
-                var _a;
-                if (input === next)
+                const value = values.get(this);
+                if (value === input)
                     return;
-                next = input;
-                if (!((_a = api(this)) === null || _a === void 0 ? void 0 : _a.ready))
-                    return;
-                api(this)
-                    .request({ [propertyKey]: [next, prev] })
+                values.set(this, input);
+                request(this, { [propertyKey]: [input, value] })
+                    .then(() => { })
                     .catch((error) => {
                     throw error;
                 });
-                prev = next;
             }
         });
         onReady(target, function () {

package/dist/client/decorators/watch.js

@@ -5,7 +5,7 @@ export function Watch(...keys) {
     return function (target, propertyKey) {
         if (!keys.length)
             return;
-        appendToMethod(target, CONSTANTS.TOKEN_LIFECYCLE_UPDATED, function (args) {
+        appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function (args) {
             const [states] = args;
             for (const key of keys) {
                 if (states === null || states === void 0 ? void 0 : states[key]) {

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

@@ -1,2 +1,3 @@
+import { PlusElement } from '../../types/index.js';
 export declare type Direction = 'ltr' | 'rtl';
-export declare const direction: (target: any) => Direction;
+export declare const direction: (target: PlusElement) => Direction;

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

@@ -1 +1,2 @@
-export declare const isRTL: (target: any) => boolean;
+import { PlusElement } from '../../types/index.js';
+export declare const isRTL: (target: PlusElement) => boolean;

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

@@ -1,5 +1,6 @@
+import { PlusElement } from '../../types/index.js';
 declare type Slots = {
     [key: string]: boolean;
 };
-export declare const slots: (target: any) => Slots;
+export declare const slots: (target: PlusElement) => Slots;
 export {};

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

@@ -1 +1,2 @@
-export declare const appendToMethod: (target: any, propertyKey: PropertyKey, handler: (this: any, args: Array<any>) => void) => void;
+import { PlusElement } from '../../types/index.js';
+export declare const appendToMethod: (target: PlusElement, propertyKey: PropertyKey, handler: (this: any, args: Array<any>) => void) => void;

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

@@ -0,0 +1,2 @@
+import { PlusElement } from '../../types/index.js';
+export declare const call: (target: PlusElement, key: string, ...args: Array<any>) => any;

package/dist/client/utils/call.js

@@ -0,0 +1,4 @@
+export const call = (target, key, ...args) => {
+    var _a;
+    return (_a = target[key]) === null || _a === void 0 ? void 0 : _a.call(target, ...args);
+};

package/dist/client/utils/get-members.d.ts

@@ -0,0 +1,2 @@
+import { PlusElement } from '../../types/index.js';
+export declare const getMembers: (target: PlusElement) => any;

package/dist/client/utils/get-members.js

@@ -0,0 +1,5 @@
+import * as CONSTANTS from '../../configs/constants.js';
+export const getMembers = (target) => {
+    var _a;
+    return (_a = target.constructor[CONSTANTS.STATIC_MEMBERS]) !== null && _a !== void 0 ? _a : target[CONSTANTS.STATIC_MEMBERS];
+};

package/dist/client/utils/get-styles.d.ts

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

package/dist/client/utils/get-styles.js

@@ -0,0 +1,5 @@
+import * as CONSTANTS from '../../configs/constants.js';
+export const getStyles = (target) => {
+    var _a;
+    return (_a = target.constructor[CONSTANTS.STATIC_STYLES]) !== null && _a !== void 0 ? _a : target[CONSTANTS.STATIC_STYLES];
+};

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

@@ -1 +1,2 @@
-export declare const host: (target: any) => HTMLElement;
+import { PlusElement } from '../../types/index.js';
+export declare const host: (target: PlusElement) => HTMLElement;

package/dist/client/utils/host.js

@@ -1,2 +1,4 @@
-import { api } from './api.js';
-export const host = (target) => api(target).host();
+import * as CONSTANTS from '../../configs/constants.js';
+export const host = (target) => {
+    return target[CONSTANTS.API_HOST]();
+};

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

@@ -1,13 +1,19 @@
-export * from './api.js';
 export * from './append-to-method.js';
+export * from './call.js';
 export * from './define-property.js';
 export * from './event.js';
+export * from './get-members.js';
+export * from './get-styles.js';
 export * from './host.js';
 export * from './is-event.js';
+export * from './is-ready.js';
 export * from './is-server.js';
 export * from './on-ready.js';
 export * from './parse-value.js';
+export * from './render.js';
+export * from './request.js';
 export * from './sync.js';
+export * from './task.js';
 export * from './to-boolean.js';
 export * from './to-event.js';
 export * from './type-of.js';

package/dist/client/utils/index.js

@@ -1,13 +1,19 @@
-export * from './api.js';
 export * from './append-to-method.js';
+export * from './call.js';
 export * from './define-property.js';
 export * from './event.js';
+export * from './get-members.js';
+export * from './get-styles.js';
 export * from './host.js';
 export * from './is-event.js';
+export * from './is-ready.js';
 export * from './is-server.js';
 export * from './on-ready.js';
 export * from './parse-value.js';
+export * from './render.js';
+export * from './request.js';
 export * from './sync.js';
+export * from './task.js';
 export * from './to-boolean.js';
 export * from './to-event.js';
 export * from './type-of.js';

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

@@ -0,0 +1,2 @@
+import { PlusElement } from '../../types/index.js';
+export declare const isReady: (target: PlusElement) => boolean;

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

@@ -0,0 +1,4 @@
+import * as CONSTANTS from '../../configs/constants.js';
+export const isReady = (target) => {
+    return target[CONSTANTS.API_READY];
+};

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

@@ -1 +1,2 @@
-export declare function onReady(target: any, callback: (this: any) => void): void;
+import { PlusElement } from '../../types/index.js';
+export declare function onReady(target: PlusElement, callback: (this: any) => void): void;

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

@@ -1,4 +1,6 @@
+import * as CONSTANTS from '../../configs/constants.js';
 export function onReady(target, callback) {
     var _a;
-    ((_a = target['setup']) !== null && _a !== void 0 ? _a : (target['setup'] = [])).push(callback);
+    var _b;
+    ((_a = target[_b = CONSTANTS.API_SETUP]) !== null && _a !== void 0 ? _a : (target[_b] = [])).push(callback);
 }

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

@@ -0,0 +1,2 @@
+import { PlusElement } from '../../types/index.js';
+export declare const render: (target: PlusElement) => void;

package/dist/client/utils/render.js

@@ -0,0 +1,17 @@
+import { html, render as renderer } from 'uhtml';
+import * as CONSTANTS from '../../configs/constants.js';
+import { call, getStyles, host } from '../utils/index.js';
+export const render = (target) => {
+    const element = host(target);
+    renderer(element.shadowRoot, () => {
+        const markup = call(target, CONSTANTS.METHOD_RENDER);
+        const styles = getStyles(target);
+        if (!styles && !markup)
+            return html ``;
+        if (!styles)
+            return markup;
+        if (!markup)
+            return html `<style>${styles}</style>`;
+        return html `<style>${styles}</style>${markup}`;
+    });
+};

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

@@ -0,0 +1,2 @@
+import { PlusElement } from '../../types/index.js';
+export declare const request: (target: PlusElement, state?: any) => Promise<boolean>;

package/dist/client/utils/request.js

@@ -0,0 +1,25 @@
+import * as CONSTANTS from '../../configs/constants.js';
+import { call, isReady, render, task } from '../utils/index.js';
+const targets = new Map();
+export const request = (target, state) => {
+    if (!isReady(target))
+        return Promise.resolve(false);
+    let run = targets.get(target);
+    if (run)
+        return run(state);
+    run = task({
+        canStart: (states, state) => {
+            return /* hasChange */ true;
+        },
+        canRun: (states) => {
+            return /* shouldUpdate */ true;
+        },
+        run: (states) => {
+            call(target, CONSTANTS.LIFECYCLE_UPDATE, states);
+            render(target);
+            call(target, CONSTANTS.LIFECYCLE_UPDATED, states);
+        }
+    });
+    targets.set(target, run);
+    return run(state);
+};

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

@@ -0,0 +1,6 @@
+export interface QueueOptions {
+    canStart?: (states: any, state: any) => boolean;
+    canRun?: (states: any) => boolean;
+    run: (states: any) => void;
+}
+export declare const task: (options: QueueOptions) => (state?: any) => Promise<boolean>;

package/dist/client/utils/task.js

@@ -0,0 +1,46 @@
+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());
+    });
+};
+export const task = (options) => {
+    let states, isPending, updatePromise;
+    const run = (state) => {
+        const newStates = Object.assign({}, states, state);
+        if (options.canStart && !options.canStart(newStates, state))
+            return Promise.resolve(false);
+        states = newStates;
+        if (!isPending)
+            updatePromise = enqueue();
+        return updatePromise;
+    };
+    const enqueue = () => __awaiter(void 0, void 0, void 0, function* () {
+        isPending = true;
+        try {
+            yield updatePromise;
+        }
+        catch (error) {
+            Promise.reject(error);
+        }
+        // TODO: maybe is optional
+        if (!isPending)
+            return updatePromise;
+        try {
+            if (options.canRun && !options.canRun(states))
+                return (isPending = false);
+            options.run(states);
+            states = undefined;
+            isPending = false;
+            return true;
+        }
+        catch (error) {
+            isPending = false;
+            throw error;
+        }
+    });
+    return run;
+};

package/dist/client/utils/type-of.d.ts

@@ -1,3 +1,3 @@
-declare type types = 'array' | 'boolean' | 'function' | 'number' | 'object' | 'string';
-export declare const typeOf: (input: any) => types;
+declare type Types = 'array' | 'boolean' | 'function' | 'number' | 'object' | 'string';
+export declare const typeOf: (input: any) => Types;
 export {};

package/dist/compiler/plugins/attach.js

@@ -15,9 +15,9 @@ export const attach = (options) => {
         if (options.dependencies) {
         }
         if (options.styles && context.styleParsed)
-            context.class.body.body.unshift(t.classProperty(t.identifier(CONSTANTS.TOKEN_STATIC_STYLES), t.stringLiteral(context.styleParsed), undefined, null, undefined, true));
+            context.class.body.body.unshift(t.classProperty(t.identifier(CONSTANTS.STATIC_STYLES), t.stringLiteral(context.styleParsed), undefined, null, undefined, true));
         if (options.members) {
-            context.class.body.body.unshift(t.classProperty(t.identifier(CONSTANTS.TOKEN_STATIC_MEMBERS), t.objectExpression([
+            context.class.body.body.unshift(t.classProperty(t.identifier(CONSTANTS.STATIC_MEMBERS), t.objectExpression([
                 ...context.classProperties.map((property) => {
                     var _a, _b;
                     const type = (_b = (_a = property.typeAnnotation) === null || _a === void 0 ? void 0 : _a.typeAnnotation) === null || _b === void 0 ? void 0 : _b.type;
@@ -71,11 +71,24 @@ export const attach = (options) => {
                         declare: true,
                         global: true
                     }));
-                    path.node.body.push(t.exportNamedDeclaration(t.tsInterfaceDeclaration(t.identifier(context.componentClassName + 'JSX'), null, [], t.tsInterfaceBody([
+                    path.node.body.push(t.exportNamedDeclaration(t.tsInterfaceDeclaration(
+                    // TODO
+                    t.identifier(context.componentClassName + 'JSX'), null, [], t.tsInterfaceBody([
                         ...context.classProperties.map((property) => Object.assign(t.tSPropertySignature(property.key, property.typeAnnotation), {
                             optional: property.optional,
                             leadingComments: property.leadingComments
-                        }))
+                        })),
+                        ...context.classEvents.map((event) => {
+                            var _a, _b;
+                            return Object.assign(t.tSPropertySignature(event.key, t.tsTypeAnnotation(t.tsFunctionType(undefined, [
+                                Object.assign({}, t.identifier('event'), {
+                                    typeAnnotation: t.tsTypeAnnotation(t.tsTypeReference(t.identifier('CustomEvent'), (_b = (_a = event.typeAnnotation) === null || _a === void 0 ? void 0 : _a['typeAnnotation']) === null || _b === void 0 ? void 0 : _b.typeParameters))
+                                })
+                            ], t.tsTypeAnnotation(t.tsVoidKeyword())))), {
+                                optional: true,
+                                leadingComments: event.leadingComments
+                            });
+                        })
                     ]))));
                 }
             });

package/dist/compiler/plugins/extract.js

@@ -21,7 +21,7 @@ export const extract = (options) => {
                 var _a;
                 const name = (_a = path.node.expression.callee) === null || _a === void 0 ? void 0 : _a.name;
                 // TODO
-                if (CONSTANTS.TOKEN_DECORATOR_ELEMENT == name) {
+                if (CONSTANTS.DECORATOR_ELEMENT == name) {
                     const [argument] = path.node.expression.arguments;
                     if (argument) {
                         context.componentTag = argument === null || argument === void 0 ? void 0 : argument.value;
@@ -62,13 +62,13 @@ export const extract = (options) => {
                 return;
             context.stylePath = stylePath;
         })();
-        context.classEvents = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.TOKEN_DECORATOR_EVENT));
-        context.classMethods = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.TOKEN_DECORATOR_METHOD));
-        context.classProperties = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.TOKEN_DECORATOR_PROPERTY));
-        context.classStates = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.TOKEN_DECORATOR_STATE));
-        context.classHasMount = (context.classMembers || []).some((member) => member['key'].name == CONSTANTS.TOKEN_LIFECYCLE_CONNECTED);
-        context.classHasUnmount = (context.classMembers || []).some((member) => member['key'].name == CONSTANTS.TOKEN_LIFECYCLE_DISCONNECTED);
-        context.classRender = (context.classMembers || []).find((member) => member['key'].name == CONSTANTS.TOKEN_METHOD_RENDER);
+        context.classEvents = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_EVENT));
+        context.classMethods = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_METHOD));
+        context.classProperties = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_PROPERTY));
+        context.classStates = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_STATE));
+        context.classHasMount = (context.classMembers || []).some((member) => member['key'].name == CONSTANTS.LIFECYCLE_CONNECTED);
+        context.classHasUnmount = (context.classMembers || []).some((member) => member['key'].name == CONSTANTS.LIFECYCLE_DISCONNECTED);
+        context.classRender = (context.classMembers || []).find((member) => member['key'].name == CONSTANTS.METHOD_RENDER);
     };
     return {
         name,

package/dist/compiler/plugins/react.proxy/react.proxy.js

@@ -32,7 +32,9 @@ export const reactProxy = (options) => {
                 };
             };
             const classEvents = context.classEvents.map((classEvent) => {
-                return Object.assign(Object.assign({}, classEvent), { converted: options.eventName(classEvent.key.name) });
+                var _a;
+                const name = ((_a = options.eventName) === null || _a === void 0 ? void 0 : _a.call(options, classEvent.key.name)) || classEvent.key.name;
+                return Object.assign(Object.assign({}, classEvent), { converted: 'on' + name.charAt(0).toUpperCase() + name.slice(1) });
             });
             const fileName = context.fileName;
             const importerComponent = parse(options.importerComponent(context));

package/dist/compiler/plugins/react.proxy/templates/src/components/index.ts.hbs

@@ -1,3 +1,7 @@
+/**************************************************
+ * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
+ **************************************************/
+
 {{#if options.compact}}
 {{#each groups}}
 {{#if single}}

package/dist/compiler/plugins/react.proxy/templates/src/components/{{fileName}}.compact.ts.hbs

@@ -1,7 +1,10 @@
 /* eslint-disable */
 /* tslint:disable */
-/* auto-generated */
 
+/**************************************************
+ * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
+ **************************************************/
+ 
 {{#each all}}
 import { {{componentClassName}} } from './{{fileName}}';
 {{/each}}

package/dist/compiler/plugins/react.proxy/templates/src/components/{{fileName}}.ts.hbs

@@ -1,6 +1,9 @@
 /* eslint-disable */
 /* tslint:disable */
-/* auto-generated */
+
+/**************************************************
+ * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
+ **************************************************/
 
 import { proxy } from '../proxy';
 

package/dist/compiler/plugins/react.proxy/templates/src/proxy.ts.hbs

@@ -1,6 +1,7 @@
-/**
- * version 0.0.9
- */
+/**************************************************
+ * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
+ **************************************************/
+ 
 import { camelCase, paramCase, pascalCase } from 'change-case';
 import React from 'react';
 

package/dist/compiler/plugins/uhtml.js

@@ -43,6 +43,12 @@ export const uhtml = () => {
                         return;
                     }
                 }
+            },
+            JSXSpreadAttribute: {
+                enter(path) {
+                    // TODO
+                    path.replaceWith(t.jsxAttribute(t.jsxIdentifier('.dataset'), t.jsxExpressionContainer(path.node.argument)));
+                }
             }
         });
     };

package/dist/configs/constants.d.ts

@@ -1,21 +1,20 @@
-export declare const TOKEN_API = "$api";
-export declare const TOKEN_API_HOST = "host";
-export declare const TOKEN_API_READY = "ready";
-export declare const TOKEN_API_REQUEST = "request";
-export declare const TOKEN_DECORATOR_ELEMENT = "Element";
-export declare const TOKEN_DECORATOR_EVENT = "Event";
-export declare const TOKEN_DECORATOR_PROPERTY = "Property";
-export declare const TOKEN_DECORATOR_STATE = "State";
-export declare const TOKEN_DECORATOR_METHOD = "Method";
-export declare const TOKEN_LIFECYCLE_ADOPTED = "adoptedCallback";
-export declare const TOKEN_LIFECYCLE_CONNECTED = "connectedCallback";
-export declare const TOKEN_LIFECYCLE_DISCONNECTED = "disconnectedCallback";
-export declare const TOKEN_LIFECYCLE_LOADED = "loadedCallback";
-export declare const TOKEN_LIFECYCLE_UPDATE = "updateCallback";
-export declare const TOKEN_LIFECYCLE_UPDATED = "updatedCallback";
-export declare const TOKEN_METHOD_RENDER = "render";
-export declare const TOKEN_STATIC_MEMBERS = "members";
-export declare const TOKEN_STATIC_STYLES = "styles";
+export declare const API_HOST = "$host$";
+export declare const API_READY = "$ready$";
+export declare const API_SETUP = "$setup$";
+export declare const DECORATOR_ELEMENT = "Element";
+export declare const DECORATOR_EVENT = "Event";
+export declare const DECORATOR_PROPERTY = "Property";
+export declare const DECORATOR_STATE = "State";
+export declare const DECORATOR_METHOD = "Method";
+export declare const LIFECYCLE_ADOPTED = "adoptedCallback";
+export declare const LIFECYCLE_CONNECTED = "connectedCallback";
+export declare const LIFECYCLE_DISCONNECTED = "disconnectedCallback";
+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_STYLES = "styles";
 export declare const TYPE_BOOLEAN = "boolean";
 export declare const TYPE_DATE = "date";
 export declare const TYPE_FUNCTION = "function";

package/dist/configs/constants.js

@@ -1,26 +1,25 @@
 // apis
-export const TOKEN_API = '$api';
-export const TOKEN_API_HOST = 'host';
-export const TOKEN_API_READY = 'ready';
-export const TOKEN_API_REQUEST = 'request';
+export const API_HOST = '$host$';
+export const API_READY = '$ready$';
+export const API_SETUP = '$setup$';
 // decorators
-export const TOKEN_DECORATOR_ELEMENT = 'Element';
-export const TOKEN_DECORATOR_EVENT = 'Event';
-export const TOKEN_DECORATOR_PROPERTY = 'Property';
-export const TOKEN_DECORATOR_STATE = 'State';
-export const TOKEN_DECORATOR_METHOD = 'Method';
+export const DECORATOR_ELEMENT = 'Element';
+export const DECORATOR_EVENT = 'Event';
+export const DECORATOR_PROPERTY = 'Property';
+export const DECORATOR_STATE = 'State';
+export const DECORATOR_METHOD = 'Method';
 // lifecycle
-export const TOKEN_LIFECYCLE_ADOPTED = 'adoptedCallback';
-export const TOKEN_LIFECYCLE_CONNECTED = 'connectedCallback';
-export const TOKEN_LIFECYCLE_DISCONNECTED = 'disconnectedCallback';
-export const TOKEN_LIFECYCLE_LOADED = 'loadedCallback';
-export const TOKEN_LIFECYCLE_UPDATE = 'updateCallback';
-export const TOKEN_LIFECYCLE_UPDATED = 'updatedCallback';
+export const LIFECYCLE_ADOPTED = 'adoptedCallback';
+export const LIFECYCLE_CONNECTED = 'connectedCallback';
+export const LIFECYCLE_DISCONNECTED = 'disconnectedCallback';
+export const LIFECYCLE_LOADED = 'loadedCallback';
+export const LIFECYCLE_UPDATE = 'updateCallback';
+export const LIFECYCLE_UPDATED = 'updatedCallback';
 // methods
-export const TOKEN_METHOD_RENDER = 'render';
+export const METHOD_RENDER = 'render';
 // statics
-export const TOKEN_STATIC_MEMBERS = 'members';
-export const TOKEN_STATIC_STYLES = 'styles';
+export const STATIC_MEMBERS = 'members';
+export const STATIC_STYLES = 'styles';
 // types
 export const TYPE_BOOLEAN = 'boolean';
 export const TYPE_DATE = 'date';

package/dist/runtime/index.d.ts

@@ -1 +1 @@
-export { html } from 'uhtml';
+export declare const html: (template: any, ...values: any[]) => any;

package/dist/runtime/index.js

@@ -1,2 +1,4 @@
-export { html } from 'uhtml';
-// export const html = (...args: any[]): any => {};
+import { html as core } from 'uhtml';
+export const html = (template, ...values) => {
+    return core(template, ...values);
+};

package/package.json

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

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

@@ -1,6 +0,0 @@
-export interface Api {
-    ready: boolean;
-    host(): HTMLElement;
-    request(states?: any): Promise<boolean>;
-}
-export declare const api: (target: any) => Api;

package/dist/client/utils/api.js

@@ -1,2 +0,0 @@
-import * as CONSTANTS from '../../configs/constants.js';
-export const api = (target) => target[CONSTANTS.TOKEN_API];

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

@@ -1,4 +0,0 @@
-import { PlusElement } from '../../types/index.js';
-export declare const proxy: (Class: PlusElement) => {
-    new (): {};
-};

package/dist/client/utils/proxy.js

@@ -1,124 +0,0 @@
-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';
-import { parseValue } from './parse-value.js';
-// TODO: input type
-export const proxy = (Class) => {
-    if (isServer())
-        return 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);
-    };
-    const get = (key) => {
-        return instance[CONSTANTS.TOKEN_API][key];
-    };
-    const set = (key, value) => {
-        instance[CONSTANTS.TOKEN_API][key] = value;
-    };
-    return class extends HTMLElement {
-        constructor() {
-            var _a, _b;
-            var _c;
-            super();
-            host = this;
-            // TODO
-            instance = new Class();
-            (_a = instance[_c = CONSTANTS.TOKEN_API]) !== null && _a !== void 0 ? _a : (instance[_c] = {});
-            set(CONSTANTS.TOKEN_API_HOST, () => host);
-            set(CONSTANTS.TOKEN_API_REQUEST, request);
-            // TODO
-            (_b = instance.setup) === null || _b === void 0 ? void 0 : _b.forEach((setup) => setup.bind(instance)());
-            this.attachShadow({ mode: 'open' });
-        }
-        static get observedAttributes() {
-            return Object.keys(members).filter((key) => members[key][0] != CONSTANTS.TYPE_FUNCTION);
-        }
-        adoptedCallback() {
-            call(CONSTANTS.TOKEN_LIFECYCLE_ADOPTED);
-        }
-        attributeChangedCallback(name, prev, next) {
-            const [type] = members[name];
-            instance[name] = parseValue(next, type);
-            if (!get(CONSTANTS.TOKEN_API_READY))
-                return;
-            request();
-        }
-        connectedCallback() {
-            call(CONSTANTS.TOKEN_LIFECYCLE_CONNECTED);
-            request();
-            // TODO
-            setTimeout(() => call(CONSTANTS.TOKEN_LIFECYCLE_LOADED));
-            set(CONSTANTS.TOKEN_API_READY, true);
-        }
-        disconnectedCallback() {
-            call(CONSTANTS.TOKEN_LIFECYCLE_DISCONNECTED);
-        }
-    };
-};