@htmlplus/element 0.1.7 → 0.2.0

package/dist/client/decorators/element.js

@@ -1,11 +1,11 @@
+import { camelCase, paramCase } from 'change-case';
 import * as CONSTANTS from '../../configs/constants.js';
-import { call, isServer, parseValue, request } 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.STATIC_MEMBERS];
-        console.log(111, { constructor });
+        const members = getMembers(constructor);
         class Plus extends HTMLElement {
             constructor() {
                 var _a;
@@ -16,15 +16,18 @@ export function Element(tag) {
                 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() {
                 call(this.plus, CONSTANTS.LIFECYCLE_ADOPTED);
             }
             attributeChangedCallback(name, prev, next) {
-                const [type] = members[name];
+                const key = camelCase(name);
+                const [type] = members[key];
                 const parsed = parseValue(next, type);
-                this.plus[name] = parsed;
+                this.plus[key] = parsed;
             }
             connectedCallback() {
                 this.plus[CONSTANTS.API_READY] = true;

package/dist/client/decorators/property.js

@@ -1,4 +1,4 @@
-import { defineProperty, getMembers, host, parseValue, request, updateAttribute, onReady } 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) {
         const values = new Map();
@@ -11,14 +11,20 @@ export function Property(options) {
                 if (value === input)
                     return;
                 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;
-                    const element = host(this);
-                    const name = String(propertyKey);
                     const raw = element.getAttribute(name);
                     const [type] = getMembers(target)[propertyKey];
                     const parsed = parseValue(raw, type);

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

@@ -6,6 +6,7 @@ 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';

package/dist/client/utils/index.js

@@ -6,6 +6,7 @@ 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';

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/render.js

@@ -1,6 +1,8 @@
 import { html, render as renderer } from 'uhtml';
 import * as CONSTANTS from '../../configs/constants.js';
-import { call, getStyles, host } from '../utils/index.js';
+import { call } from './call.js';
+import { getStyles } from './get-styles.js';
+import { host } from './host.js';
 export const render = (target) => {
     const element = host(target);
     renderer(element.shadowRoot, () => {

package/dist/client/utils/request.js

@@ -1,8 +1,8 @@
 import * as CONSTANTS from '../../configs/constants.js';
-import { call, render, task } from '../utils/index.js';
+import { call, isReady, render, task } from '../utils/index.js';
 const targets = new Map();
 export const request = (target, state) => {
-    if (!target[CONSTANTS.API_READY])
+    if (!isReady(target))
         return Promise.resolve(false);
     let run = targets.get(target);
     if (run)

package/dist/client/utils/task.js

@@ -1,12 +1,3 @@
-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) => {
@@ -18,10 +9,10 @@ export const task = (options) => {
             updatePromise = enqueue();
         return updatePromise;
     };
-    const enqueue = () => __awaiter(void 0, void 0, void 0, function* () {
+    const enqueue = async () => {
         isPending = true;
         try {
-            yield updatePromise;
+            await updatePromise;
         }
         catch (error) {
             Promise.reject(error);
@@ -41,6 +32,6 @@ export const task = (options) => {
             isPending = false;
             throw error;
         }
-    });
+    };
     return run;
 };

package/dist/compiler/compiler.js

@@ -1,12 +1,3 @@
-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 logUpdate from 'log-update';
 const log = (namespace, message) => {
     logUpdate(`${new Date().toLocaleTimeString()} [@htmlplus/element]${namespace ? `[${namespace}]` : ''} ${message}`);
@@ -15,16 +6,16 @@ export default (...plugins) => {
     let global = {
         contexts: {}
     };
-    const start = () => __awaiter(void 0, void 0, void 0, function* () {
+    const start = async () => {
         log(undefined, 'Starting.');
         for (const plugin of plugins) {
             if (!plugin.start)
                 continue;
-            global = (yield plugin.start(global)) || global;
+            global = (await plugin.start(global)) || global;
             log(plugin.name, 'Started successfully.');
         }
-    });
-    const next = (filePath) => __awaiter(void 0, void 0, void 0, function* () {
+    };
+    const next = async (filePath) => {
         const key = filePath.split(/[\/|\\]/g).pop();
         let context = {
             filePath
@@ -32,22 +23,22 @@ export default (...plugins) => {
         for (const plugin of plugins) {
             if (!plugin.next)
                 continue;
-            context = (yield plugin.next(context, global)) || context;
+            context = (await plugin.next(context, global)) || context;
             log(`${key}:${plugin.name}`, 'Executed successfully.');
         }
         log(key, 'Executed successfully.');
         global.contexts[filePath] = context;
         return context;
-    });
-    const finish = () => __awaiter(void 0, void 0, void 0, function* () {
+    };
+    const finish = async () => {
         for (const plugin of plugins) {
             if (!plugin.finish)
                 continue;
-            global = (yield plugin.finish(global)) || global;
+            global = (await plugin.finish(global)) || global;
             log(plugin.name, 'Finished successfully.');
         }
         log(undefined, 'Finished.');
-    });
+    };
     return {
         start,
         next,

package/package.json

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