@htmlplus/element 0.3.2 → 0.4.1

package/README.md

@@ -941,8 +941,8 @@ const { start, next, finish } = compiler(...plugins);
 TODO
 
 ```js
-import compiler from '@htmlplus/element/compiler';
-import { customElement, extract, parse, read, style, validate } from '@htmlplus/element/compiler';
+import compiler from '@htmlplus/element/compiler/index.js';
+import { customElement, extract, parse, read, style, validate } from '@htmlplus/element/compiler/index.js';
 
 const { start, next, finish } = compiler(
   read(),

package/client/decorators/attributes.js

@@ -2,12 +2,12 @@ import * as CONSTANTS from '../../constants/index.js';
 import { appendToMethod, host, sync } from '../utils/index.js';
 export function Attributes() {
     return function (target, propertyKey) {
-        let update;
+        const updates = new Map();
         appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
-            update = sync(host(this));
+            updates.set(this, sync(host(this)));
         });
         appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function () {
-            update(this[propertyKey]);
+            updates.get(this)(this[propertyKey]);
         });
     };
 }

package/client/decorators/element.js

@@ -1,6 +1,7 @@
 import { camelCase, paramCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
 import { call, getMembers, isServer, parseValue, request } from '../utils/index.js';
+import * as uhtml from '../vendor/uhtml.js';
 export function Element(tag) {
     return function (constructor) {
         if (isServer())
@@ -8,12 +9,13 @@ export function Element(tag) {
         const members = getMembers(constructor);
         class Plus extends HTMLElement {
             constructor() {
-                var _a;
                 super();
+                this.attachShadow({ mode: 'open' });
+                // TODO
                 this.plus = new constructor();
                 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' });
+                this.plus['uhtml'] = uhtml;
+                this.plus[CONSTANTS.API_STATUS] = 'initialize';
             }
             static get observedAttributes() {
                 return Object.keys(members)
@@ -23,6 +25,7 @@ export function Element(tag) {
             adoptedCallback() {
                 call(this.plus, CONSTANTS.LIFECYCLE_ADOPTED);
             }
+            // TODO
             attributeChangedCallback(name, prev, next) {
                 const key = camelCase(name);
                 const [type] = members[key];
@@ -30,10 +33,11 @@ export function Element(tag) {
                 this.plus[key] = parsed;
             }
             connectedCallback() {
-                this.plus[CONSTANTS.API_READY] = true;
+                this.plus[CONSTANTS.API_STATUS] = 'connected';
                 call(this.plus, CONSTANTS.LIFECYCLE_CONNECTED);
                 request(this.plus)
                     .then(() => {
+                    this.plus[CONSTANTS.API_STATUS] = 'loaded';
                     call(this.plus, CONSTANTS.LIFECYCLE_LOADED);
                 })
                     .catch((error) => {
@@ -41,9 +45,12 @@ export function Element(tag) {
                 });
             }
             disconnectedCallback() {
+                this.plus[CONSTANTS.API_STATUS] = 'disconnected';
                 call(this.plus, CONSTANTS.LIFECYCLE_DISCONNECTED);
             }
         }
+        if (customElements.get(tag))
+            return;
         customElements.define(tag, Plus);
     };
 }

package/client/decorators/event.js

@@ -1,5 +1,4 @@
-import { defineProperty, host } from '../utils/index.js';
-// TODO: add global hook
+import { defineProperty, dispatch, host } from '../utils/index.js';
 export function Event(options = {}) {
     return function (target, propertyKey) {
         defineProperty(target, propertyKey, {
@@ -9,7 +8,7 @@ export function Event(options = {}) {
                     (_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);
+                    dispatch(host(this), event);
                     return event;
                 };
             }

package/client/decorators/listen.js

@@ -6,7 +6,6 @@ const defaults = {
 };
 export function Listen(name, options = defaults) {
     return function (target, propertyKey, descriptor) {
-        // TODO: types
         const element = (instance) => {
             switch (options.target) {
                 case 'body':
@@ -17,6 +16,8 @@ export function Listen(name, options = defaults) {
                     return window;
                 case 'host':
                     return host(instance);
+                default:
+                    return host(instance);
             }
         };
         appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {

package/client/decorators/method.js

@@ -1,11 +1,10 @@
-import { defineProperty, host, onReady } from '../utils/index.js';
+import * as CONSTANTS from '../../constants/index.js';
+import { appendToMethod, defineProperty, host } from '../utils/index.js';
 export function Method() {
     return function (target, propertyKey) {
-        onReady(target, function () {
+        appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
             defineProperty(host(this), propertyKey, {
-                get: () => {
-                    return this[propertyKey].bind(this);
-                }
+                get: () => this[propertyKey].bind(this)
             });
         });
     };

package/client/decorators/property.d.ts

@@ -1,9 +1,5 @@
 import { PlusElement } from '../../types/index.js';
 export interface PropertyOptions {
-    /**
-     * TODO
-     */
-    attribute?: boolean | string;
     /**
      * Whether property value is reflected back to the associated attribute. default is `false`.
      */

package/client/decorators/property.js

@@ -1,51 +1,46 @@
-import { defineProperty, getMembers, host, isReady, parseValue, request, updateAttribute, onReady } from '../utils/index.js';
+import { paramCase } from 'change-case';
+import * as CONSTANTS from '../../constants/index.js';
+import { defineProperty, getMembers, host, parseValue, request, updateAttribute, appendToMethod } from '../utils/index.js';
 export function Property(options) {
     return function (target, propertyKey) {
+        const name = String(propertyKey);
+        const attribute = paramCase(name);
+        const type = getMembers(target)[name].at(0);
         const values = new Map();
-        defineProperty(target, propertyKey, {
-            get() {
-                return values.get(this);
-            },
-            set(input) {
-                const value = values.get(this);
-                if (value === input)
+        function get() {
+            return values.get(this);
+        }
+        function set(input) {
+            const value = values.get(this);
+            if (input === value)
+                return;
+            values.set(this, input);
+            const isReady = this[CONSTANTS.API_STATUS] == 'initialize';
+            request(this, { [name]: [input, value] }).then(() => {
+                const element = host(this);
+                const has = element.hasAttribute(attribute);
+                if (!isReady && has)
                     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 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;
-                });
-            }
-        });
-        onReady(target, function () {
-            defineProperty(host(this), propertyKey, {
-                get: () => {
-                    return this[propertyKey];
-                },
-                set: (value) => {
-                    this[propertyKey] = value;
-                }
+                if (!(options === null || options === void 0 ? void 0 : options.reflect))
+                    return;
+                const raw = element.getAttribute(attribute);
+                const parsed = parseValue(raw, type);
+                if (input === parsed)
+                    return;
+                updateAttribute(element, attribute, input);
             });
+        }
+        defineProperty(target, propertyKey, { get, set });
+        appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
+            const element = host(this);
+            const get = () => {
+                return this[propertyKey];
+            };
+            const set = (input) => {
+                this[propertyKey] = input;
+            };
+            // TODO: configurable
+            defineProperty(element, propertyKey, { get, set, configurable: true });
         });
     };
 }

package/client/decorators/state.js

@@ -1,32 +1,23 @@
-import { defineProperty, host, onReady, request } from '../utils/index.js';
+import { defineProperty, request } from '../utils/index.js';
 export function State() {
     return function (target, propertyKey) {
+        const name = String(propertyKey);
         const values = new Map();
-        defineProperty(target, propertyKey, {
-            get() {
-                return values.get(this);
-            },
-            set(input) {
-                const value = values.get(this);
-                if (value === input)
-                    return;
-                values.set(this, input);
-                request(this, { [propertyKey]: [input, value] })
-                    .then(() => { })
-                    .catch((error) => {
-                    throw error;
-                });
-            }
-        });
-        onReady(target, function () {
-            defineProperty(host(this), propertyKey, {
-                get: () => {
-                    return this[propertyKey];
-                },
-                set: (value) => {
-                    this[propertyKey] = value;
-                }
+        function get() {
+            return values.get(this);
+        }
+        function set(input) {
+            const value = values.get(this);
+            if (input === value)
+                return;
+            values.set(this, input);
+            request(this, { [name]: [input, value] })
+                .then(() => undefined)
+                .catch((error) => {
+                throw error;
             });
-        });
+        }
+        // TODO: configurable
+        defineProperty(target, propertyKey, { get, set, configurable: true });
     };
 }

package/client/decorators/watch.d.ts

@@ -1,2 +1,8 @@
 import { PlusElement } from '../../types/index.js';
-export declare function Watch(...keys: Array<string>): (target: PlusElement, propertyKey: PropertyKey) => void;
+/**
+ * Monitors properties and states to catch changes.
+ * The decorated method will be invoked after any
+ * changes with the key, newValue, and oldValue as parameters.
+ * If the arguments aren't defined, all of the properties and states are considered.
+ */
+export declare function Watch(keys?: Array<string>, immediate?: boolean): (target: PlusElement, propertyKey: PropertyKey) => void;

package/client/decorators/watch.js

@@ -1,16 +1,30 @@
 import * as CONSTANTS from '../../constants/index.js';
 import { appendToMethod } from '../utils/index.js';
-// TODO: support * key
-export function Watch(...keys) {
+/**
+ * Monitors properties and states to catch changes.
+ * The decorated method will be invoked after any
+ * changes with the key, newValue, and oldValue as parameters.
+ * If the arguments aren't defined, all of the properties and states are considered.
+ */
+export function Watch(keys, immediate) {
     return function (target, propertyKey) {
-        if (!keys.length)
-            return;
-        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]) {
-                    this[propertyKey](...states[key], key);
-                }
+        // Registers a lifecycle to detect changes.
+        appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function ([states]) {
+            // Loops the keys
+            for (const key of Object.keys(states)) {
+                // TODO
+                if ((keys === null || keys === void 0 ? void 0 : keys.length) && !keys.includes(key))
+                    continue;
+                // Checks the existence of key
+                if ((keys === null || keys === void 0 ? void 0 : keys.length) && !(key in states))
+                    continue;
+                // Gets the current state
+                const [next, prev] = states[key];
+                // TODO
+                if (!immediate && this[CONSTANTS.API_STATUS] != 'loaded')
+                    continue;
+                // Invokes the method with parameters.
+                this[propertyKey](next, prev, key);
             }
         });
     };

package/client/helpers/classes.d.ts

@@ -1 +1 @@
-export declare const classes: (input: any, smart?: boolean | undefined) => string;
+export declare const classes: (input: any, smart?: boolean) => string;

package/client/helpers/index.d.ts

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

package/client/helpers/index.js

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

package/client/helpers/slots.js

@@ -1,5 +1,5 @@
 import { defineProperty } from '../utils/index.js';
-import { queryAll } from './query-all.js';
+import { queryAll } from './queryAll.js';
 export const slots = (target) => {
     var _a;
     const result = {};

package/client/helpers/styles.js

@@ -6,7 +6,8 @@ export const styles = (input) => {
             return input.join('; ');
         case 'object':
             return Object.keys(input)
-                .map((key) => `${paramCase(key)}: ${input[key]}`)
+                .filter((key) => input[key] !== undefined && input[key] !== null)
+                .map((key) => `${key.startsWith('--') ? '--' : ''}${paramCase(key)}: ${input[key]}`)
                 .join('; ');
         case 'string':
             return input;

package/client/utils/event.d.ts

@@ -1,2 +1,5 @@
-export declare const on: (target: Window | Document | Element, event: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined) => void;
-export declare const off: (target: Window | Document | Element, event: string, handler: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined) => void;
+declare type Target = Window | Document | Element;
+export declare const dispatch: (target: Target, event: Event) => boolean;
+export declare const on: (target: Target, type: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void;
+export declare const off: (target: Target, type: string, handler: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void;
+export {};

package/client/utils/event.js

@@ -1,6 +1,9 @@
-export const on = (target, event, handler, options) => {
-    target.addEventListener(event, handler, options);
+export const dispatch = (target, event) => {
+    return target.dispatchEvent(event);
 };
-export const off = (target, event, handler, options) => {
-    target.removeEventListener(event, handler, options);
+export const on = (target, type, handler, options) => {
+    target.addEventListener(type, handler, options);
+};
+export const off = (target, type, handler, options) => {
+    target.removeEventListener(type, handler, options);
 };

package/client/utils/index.d.ts

@@ -1,20 +1,17 @@
-export * from './append-to-method.js';
+export * from './appendToMethod.js';
 export * from './call.js';
-export * from './define-property.js';
+export * from './defineProperty.js';
 export * from './event.js';
-export * from './get-members.js';
-export * from './get-styles.js';
+export * from './getMembers.js';
+export * from './getStyles.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 './isEvent.js';
+export * from './isServer.js';
+export * from './parseValue.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';
-export * from './update-attribute.js';
+export * from './toBoolean.js';
+export * from './toEvent.js';
+export * from './typeOf.js';
+export * from './updateAttribute.js';

package/client/utils/index.js

@@ -1,20 +1,17 @@
-export * from './append-to-method.js';
+export * from './appendToMethod.js';
 export * from './call.js';
-export * from './define-property.js';
+export * from './defineProperty.js';
 export * from './event.js';
-export * from './get-members.js';
-export * from './get-styles.js';
+export * from './getMembers.js';
+export * from './getStyles.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 './isEvent.js';
+export * from './isServer.js';
+export * from './parseValue.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';
-export * from './update-attribute.js';
+export * from './toBoolean.js';
+export * from './toEvent.js';
+export * from './typeOf.js';
+export * from './updateAttribute.js';

package/client/utils/{parse-value.js → parseValue.js}

@@ -1,5 +1,5 @@
 import * as CONSTANTS from '../../constants/index.js';
-import { toBoolean } from './to-boolean.js';
+import { toBoolean } from './toBoolean.js';
 // TODO: input type & validate date
 export const parseValue = (value, type) => {
     switch (type) {
@@ -8,7 +8,7 @@ export const parseValue = (value, type) => {
         case CONSTANTS.TYPE_DATE:
             return new Date(value);
         case CONSTANTS.TYPE_NUMBER:
-            return parseFloat(value);
+            return isNaN(value) ? value : parseFloat(value);
         default:
             return value;
     }

package/client/utils/request.d.ts

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

package/client/utils/request.js

@@ -1,12 +1,11 @@
 import * as CONSTANTS from '../../constants/index.js';
 import { call } from '../utils/call';
-import { isReady } from '../utils/is-ready';
-import { render } from '../utils/render';
 import { task } from '../utils/task';
+import { html, render } from '../vendor/uhtml.js';
+import { getStyles } from './getStyles.js';
+import { host } from './host.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);
@@ -19,7 +18,18 @@ export const request = (target, state) => {
         },
         run: (states) => {
             call(target, CONSTANTS.LIFECYCLE_UPDATE, states);
-            render(target);
+            const element = host(target);
+            render(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}`;
+            });
             call(target, CONSTANTS.LIFECYCLE_UPDATED, states);
         }
     });

package/client/utils/sync.js

@@ -1,7 +1,7 @@
 import { on, off } from './event.js';
-import { isEvent } from './is-event.js';
-import { toEvent } from './to-event.js';
-import { updateAttribute } from './update-attribute.js';
+import { isEvent } from './isEvent.js';
+import { toEvent } from './toEvent.js';
+import { updateAttribute } from './updateAttribute.js';
 export const sync = (node) => {
     let prev = {};
     return (next = {}) => {