@htmlplus/element 0.1.8 → 0.1.9

package/dist/client/decorators/element.js

@@ -1,10 +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];
+        const members = getMembers(constructor);
         class Plus extends HTMLElement {
             constructor() {
                 var _a;
@@ -15,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/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/package.json

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