@htmlplus/element 0.4.8 → 0.5.0

package/client/decorators/attributes.js

@@ -2,12 +2,11 @@ import * as CONSTANTS from '../../constants/index.js';
 import { appendToMethod, host, syncAttributes } from '../utils/index.js';
 export function Attributes() {
     return function (target, propertyKey) {
-        const symbol = Symbol();
         appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
-            this[symbol] = syncAttributes(host(this));
+            this[CONSTANTS.API_ATTRIBUTES_SYNCER] = syncAttributes(host(this));
         });
         appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function () {
-            this[symbol](this[propertyKey]);
+            this[CONSTANTS.API_ATTRIBUTES_SYNCER](this[propertyKey]);
         });
     };
 }

package/client/decorators/element.js

@@ -11,10 +11,8 @@ export function Element(tag) {
             constructor() {
                 super();
                 this.attachShadow({ mode: 'open' });
-                // TODO
                 this[CONSTANTS.API_INSTANCE] = new constructor();
                 this[CONSTANTS.API_INSTANCE][CONSTANTS.API_HOST] = () => this;
-                this[CONSTANTS.API_INSTANCE][CONSTANTS.API_STATUS] = 'initialize';
             }
             // TODO: ignore functions
             static get observedAttributes() {
@@ -23,27 +21,26 @@ export function Element(tag) {
             adoptedCallback() {
                 call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_ADOPTED);
             }
-            // TODO
-            attributeChangedCallback(name, prev, next) {
-                const key = camelCase(name);
-                const type = getMemberType(this[CONSTANTS.API_INSTANCE], key);
-                const parsed = parseValue(next, type);
-                this[CONSTANTS.API_INSTANCE][key] = parsed;
+            attributeChangedCallback(attribute, prev, next) {
+                const instance = this[CONSTANTS.API_INSTANCE];
+                if (instance[CONSTANTS.API_IS_DISABLED_ATTRIBUTE_CHANGED_CALLBACK])
+                    return;
+                const name = camelCase(attribute);
+                const type = getMemberType(instance, name);
+                const value = parseValue(next, type);
+                if (instance[name] === value)
+                    return;
+                instance[name] = value;
             }
             connectedCallback() {
-                this[CONSTANTS.API_INSTANCE][CONSTANTS.API_STATUS] = 'connected';
-                call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_CONNECTED);
-                request(this[CONSTANTS.API_INSTANCE])
-                    .then(() => {
-                    this[CONSTANTS.API_INSTANCE][CONSTANTS.API_STATUS] = 'loaded';
-                    call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_LOADED);
-                })
-                    .catch((error) => {
-                    throw error;
+                const instance = this[CONSTANTS.API_INSTANCE];
+                instance[CONSTANTS.API_IS_CONNECTED] = true;
+                call(instance, CONSTANTS.LIFECYCLE_CONNECTED);
+                request(instance, undefined, undefined, () => {
+                    call(instance, CONSTANTS.LIFECYCLE_LOADED);
                 });
             }
             disconnectedCallback() {
-                this[CONSTANTS.API_INSTANCE][CONSTANTS.API_STATUS] = 'disconnected';
                 call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_DISCONNECTED);
             }
         }

package/client/decorators/property.js

@@ -1,33 +1,23 @@
-import { paramCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
-import { defineProperty, getMemberType, host, parseValue, request, updateAttribute, appendToMethod } from '../utils/index.js';
+import { defineProperty, host, request, appendToMethod, updateAttribute } from '../utils/index.js';
 export function Property(options) {
     return function (target, propertyKey) {
         const name = String(propertyKey);
-        const attribute = paramCase(name);
         const symbol = Symbol();
-        const type = getMemberType(target, name);
         function get() {
             return this[symbol];
         }
-        function set(input) {
-            const value = this[symbol];
-            if (input === value)
+        function set(next) {
+            const previous = this[symbol];
+            if (next === previous)
                 return;
-            this[symbol] = 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)
+            this[symbol] = next;
+            request(this, name, previous, (skip) => {
+                if (!(options === null || options === void 0 ? void 0 : options.reflect) || skip)
                     return;
-                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);
+                target[CONSTANTS.API_IS_DISABLED_ATTRIBUTE_CHANGED_CALLBACK] = true;
+                updateAttribute(host(this), name, next);
+                target[CONSTANTS.API_IS_DISABLED_ATTRIBUTE_CHANGED_CALLBACK] = false;
             });
         }
         defineProperty(target, propertyKey, { get, set });

package/client/decorators/state.js

@@ -6,16 +6,12 @@ export function State() {
         function get() {
             return this[symbol];
         }
-        function set(input) {
-            const value = this[symbol];
-            if (input === value)
+        function set(next) {
+            const previous = this[symbol];
+            if (next === previous)
                 return;
-            this[symbol] = input;
-            request(this, { [name]: [input, value] })
-                .then(() => undefined)
-                .catch((error) => {
-                throw error;
-            });
+            this[symbol] = next;
+            request(this, name, previous);
         }
         // TODO: configurable
         defineProperty(target, propertyKey, { get, set, configurable: true });

package/client/decorators/watch.d.ts

@@ -4,5 +4,7 @@ import { PlusElement } from '../../types';
  * 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.
+ * @param keys Collection of Property/State names.
+ * @param immediate Triggers the callback immediately after initialization.
  */
 export declare function Watch(keys?: Array<string>, immediate?: boolean): (target: PlusElement, propertyKey: PropertyKey) => void;

package/client/decorators/watch.js

@@ -5,27 +5,24 @@ import { appendToMethod } from '../utils/index.js';
  * 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.
+ * @param keys Collection of Property/State names.
+ * @param immediate Triggers the callback immediately after initialization.
  */
 export function Watch(keys, immediate) {
     return function (target, propertyKey) {
         // Registers a lifecycle to detect changes.
-        appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function ([states]) {
+        appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function (states) {
+            // Skips the logic if 'immediate' wasn't passed.
+            if (!immediate && !this[CONSTANTS.API_IS_LOADED])
+                return;
             // Loops the keys
-            for (const key of Object.keys(states)) {
+            states.forEach((prev, key) => {
                 // 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;
+                    return;
                 // Invokes the method with parameters.
-                this[propertyKey](next, prev, key);
-            }
+                this[propertyKey](this[key], prev, key);
+            });
         });
     };
 }

package/client/helpers/query.js

@@ -1,5 +1,5 @@
-import { host } from '../utils/index.js';
+import { shadowRoot } 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);
+    var _a;
+    return (_a = shadowRoot(target)) === null || _a === void 0 ? void 0 : _a.querySelector(selectors);
 }

package/client/helpers/queryAll.js

@@ -1,5 +1,5 @@
-import { host } from '../utils/index.js';
+import { shadowRoot } 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);
+    var _a;
+    return (_a = shadowRoot(target)) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors);
 }

package/client/helpers/slots.js

@@ -1,15 +1,13 @@
-import { defineProperty } from '../utils/index.js';
-import { queryAll } from './queryAll.js';
+import { host } from '../utils/index.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, {
-            get() {
-                return !!slot.assignedNodes().filter((node) => { var _a; return node.nodeName != '#text' || ((_a = node.nodeValue) === null || _a === void 0 ? void 0 : _a.trim()); }).length;
-            }
-        });
-    });
-    return result;
+    const slots = {};
+    const children = Array.from(host(target).childNodes);
+    for (const child of children) {
+        const name = child['slot'] || (((_a = child.nodeValue) === null || _a === void 0 ? void 0 : _a.trim()) && 'default');
+        if (!name)
+            continue;
+        slots[name] = true;
+    }
+    return slots;
 };

package/client/utils/appendToMethod.d.ts

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

package/client/utils/appendToMethod.js

@@ -1,7 +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);
+    target[propertyKey] = function (...parameters) {
+        handler.bind(this)(...parameters);
+        return callback === null || callback === void 0 ? void 0 : callback.bind(this)(...parameters);
     };
 };

package/client/utils/call.d.ts

@@ -1 +1 @@
-export declare const call: (target: any, key: string, ...args: Array<any>) => any;
+export declare const call: (target: any, key: PropertyKey, ...parameters: Array<any>) => any;

package/client/utils/call.js

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

package/client/utils/index.d.ts

@@ -13,6 +13,7 @@ export * from './off.js';
 export * from './on.js';
 export * from './parseValue.js';
 export * from './request.js';
+export * from './shadowRoot.js';
 export * from './syncAttributes.js';
 export * from './task.js';
 export * from './toBoolean.js';

package/client/utils/index.js

@@ -13,6 +13,7 @@ export * from './off.js';
 export * from './on.js';
 export * from './parseValue.js';
 export * from './request.js';
+export * from './shadowRoot.js';
 export * from './syncAttributes.js';
 export * from './task.js';
 export * from './toBoolean.js';

package/client/utils/request.d.ts

@@ -1,4 +1,9 @@
 import { PlusElement } from '../../types';
-export declare const request: (target: PlusElement, state?: {
-    [key: string]: [any, any];
-} | undefined) => Promise<boolean>;
+/**
+ * Updates the DOM with a scheduled task.
+ * @param target The component instance.
+ * @param name Property/State name.
+ * @param previous The previous value of Property/State.
+ * @param callback Invoked when the rendering phase is completed.
+ */
+export declare const request: (target: PlusElement, name?: string, previous?: any, callback?: Function) => void;

package/client/utils/request.js

@@ -3,38 +3,64 @@ import { call } from '../utils/call.js';
 import { task } from '../utils/task.js';
 import { html, render } from '../vendors/uhtml.js';
 import { getStyles } from './getStyles.js';
-import { host } from './host.js';
-const targets = new Map();
-export const request = (target, state) => {
-    let run = targets.get(target);
-    if (run)
-        return run(state);
-    run = task({
-        canStart: (states, state) => {
-            // TODO: hasChange
-            return true;
-        },
-        canRun: (states) => {
-            // TODO: shouldUpdate
-            return true;
-        },
-        run: (states) => {
+import { shadowRoot } from './shadowRoot.js';
+/**
+ * Updates the DOM with a scheduled task.
+ * @param target The component instance.
+ * @param name Property/State name.
+ * @param previous The previous value of Property/State.
+ * @param callback Invoked when the rendering phase is completed.
+ */
+export const request = (target, name, previous, callback) => {
+    var _a, _b;
+    // Creates/Gets a stacks.
+    const stacks = (target[_a = CONSTANTS.API_STACKS] || (target[_a] = new Map()));
+    // Creates/Updates a stack
+    const stack = stacks.get(name) || { callbacks: [], previous };
+    // Adds the callback to the stack, if exists.
+    callback && stack.callbacks.push(callback);
+    // Stores the stack.
+    stacks.set(name, stack);
+    // Creates/Gets a micro task function.
+    target[_b = CONSTANTS.API_REQUEST] || (target[_b] = task({
+        run: () => {
+            // Skips the rendering phase if DOM isn't ready.
+            if (!target[CONSTANTS.API_IS_CONNECTED])
+                return;
+            // Calculates the states to pass into lifecycles' callbacks.
+            const states = new Map(Array.from(stacks)
+                .filter((stack) => stack[0])
+                .map((stack) => [stack[0], stack[1].previous]));
+            // Calls the lifecycle's callback before the rendering phase.
             call(target, CONSTANTS.LIFECYCLE_UPDATE, states);
-            const element = host(target);
-            render(element.shadowRoot, () => {
+            // Calculates the template.
+            const template = () => {
+                // Calculates the markup.
                 const markup = call(target, CONSTANTS.METHOD_RENDER);
+                // Calculates the styles.
                 const styles = getStyles(target);
-                if (!styles && !markup)
-                    return html ``;
+                // Returns the markup if styles don't exist.
                 if (!styles)
                     return markup;
-                if (!markup)
-                    return html `<style>${styles}</style>`;
+                // Returns the markup and styles together.
                 return html `<style>${styles}</style>${markup}`;
+            };
+            // Renders template to the DOM.
+            render(shadowRoot(target), template);
+            // Invokes requests' callback.
+            stacks.forEach((state) => {
+                state.callbacks.forEach((callback, index, callbacks) => {
+                    callback(callbacks.length - 1 != index);
+                });
             });
+            // Calls the lifecycle's callback after the rendering phase.
             call(target, CONSTANTS.LIFECYCLE_UPDATED, states);
+            // TODO: releated to the @Watch decorator.
+            target[CONSTANTS.API_IS_LOADED] = true;
+            // Clears stacks.
+            stacks.clear();
         }
-    });
-    targets.set(target, run);
-    return run(state);
+    }));
+    // Calls the micro task.
+    call(target, CONSTANTS.API_REQUEST);
 };

package/client/utils/shadowRoot.d.ts

@@ -0,0 +1,2 @@
+import { PlusElement } from '../../types';
+export declare const shadowRoot: (target: PlusElement) => ShadowRoot | null;

package/client/utils/shadowRoot.js

@@ -0,0 +1,5 @@
+import { host } from './host.js';
+export const shadowRoot = (target) => {
+    var _a;
+    return (_a = host(target)) === null || _a === void 0 ? void 0 : _a.shadowRoot;
+};

package/client/utils/task.d.ts

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

package/client/utils/task.js

@@ -1,10 +1,8 @@
 export const task = (options) => {
-    let isPending, states, updatePromise;
-    const run = (state) => {
-        const newStates = Object.assign({}, states, state);
-        if (options.canStart && !options.canStart(newStates, state))
+    let isPending, updatePromise;
+    const run = () => {
+        if (options.canStart && !options.canStart())
             return Promise.resolve(false);
-        states = newStates;
         if (!isPending)
             updatePromise = enqueue();
         return updatePromise;
@@ -21,10 +19,9 @@ export const task = (options) => {
         if (!isPending)
             return updatePromise;
         try {
-            if (options.canRun && !options.canRun(states))
+            if (options.canRun && !options.canRun())
                 return (isPending = false);
-            options.run(states);
-            states = undefined;
+            options.run();
             isPending = false;
             return true;
         }

package/compiler/compiler.js

@@ -1,22 +1,28 @@
 import ora from 'ora';
+import path from 'path';
 const logger = ora({
     color: 'yellow'
 });
+const log = (message, persist) => {
+    var _a, _b;
+    (_b = (_a = logger.start(`${new Date().toLocaleTimeString()} [HTMLPLUS] ${message}`))[persist ? 'succeed' : '']) === null || _b === void 0 ? void 0 : _b.call(_a);
+};
 export default (...plugins) => {
     let global = {
         contexts: []
     };
-    logger.start(`${plugins.length} Plugins found.`).succeed();
+    log(`Starting...`, true);
+    log(`${plugins.length} plugins found.`, true);
     const start = async () => {
-        logger.start('Starting...').succeed();
+        log(`Plugins are starting...`, true);
         for (const plugin of plugins) {
             if (!plugin.start)
                 continue;
-            logger.start(`Plugin '${plugin.name}' starting...`);
+            log(`Plugin '${plugin.name}' is starting...`);
             await plugin.start(global);
-            logger.start(`Plugin '${plugin.name}' started successfully.`);
+            log(`Plugin '${plugin.name}' started successfully.`);
         }
-        logger.start(`Plugins started successfully.`).succeed();
+        log(`Plugins started successfully.`, true);
     };
     const next = async (filePath) => {
         var _a;
@@ -24,15 +30,11 @@ export default (...plugins) => {
         let context = {
             filePath
         };
-        let timeout;
         for (const plugin of plugins) {
             if (!plugin.next)
                 continue;
-            clearTimeout(timeout);
-            logger.start(`Plugin '${plugin.name}' executing...`);
+            log(`Plugin '${plugin.name}' is executing on '${path.basename(filePath)}' file.`);
             const output = await plugin.next(context, global);
-            logger.start(`Plugin '${plugin.name}' executed successfully.`);
-            timeout = setTimeout(() => logger.stop(), 1500);
             // TODO
             if (output) {
                 context.outputs = ((_a = context.outputs) !== null && _a !== void 0 ? _a : [])
@@ -49,27 +51,26 @@ export default (...plugins) => {
                 });
             }
             global.contexts = global.contexts.filter((current) => current.filePath != context.filePath).concat(context);
+            log(`Plugin '${plugin.name}' executed successfully on '${path.basename(filePath)}' file.`);
             if (context.isInvalid)
                 break;
         }
+        logger.stop();
         if (context.isInvalid)
-            logger.start(`File '${key}' break executing because file is invalid.`).succeed();
+            log(`File '${key}' break executing because file is invalid.`, true);
         return context;
     };
     const finish = async () => {
-        logger.start('Finishing...').succeed();
+        log(`Plugins are finishing...`, true);
         for (const plugin of plugins) {
             if (!plugin.finish)
                 continue;
-            logger.start(`Plugin '${plugin.name}' finishing...`);
+            log(`Plugin '${plugin.name}' is finishing...`);
             await plugin.finish(global);
-            logger.start(`Plugin '${plugin.name}' finished successfully.`);
+            log(`Plugin '${plugin.name}' finished successfully.`);
         }
-        logger.start(`Plugins finished successfully.`).succeed();
-    };
-    return {
-        start,
-        next,
-        finish
+        log(`Plugins finished successfully.`, true);
+        log(`Finished.`, true);
     };
+    return { start, next, finish };
 };

package/compiler/plugins/assets.d.ts

@@ -1,5 +1,6 @@
 import { Context } from '../../types';
 export declare type AssetsOptions = {
+    once?: boolean;
     destination: (context: Context) => string;
     source?: (context: Context) => string;
 };

package/compiler/plugins/assets.js

@@ -1,6 +1,7 @@
 import fs from 'fs-extra';
 import path from 'path';
 const defaults = {
+    once: true,
     destination(context) {
         return `assets/${context.fileName}`;
     },
@@ -11,14 +12,20 @@ const defaults = {
 export const assets = (options) => {
     const name = 'assets';
     options = Object.assign({}, defaults, options);
+    const sources = new Set();
     const next = (context) => {
         var _a, _b;
-        const destination = (_a = options.destination) === null || _a === void 0 ? void 0 : _a.call(options, context);
-        const source = (_b = options.source) === null || _b === void 0 ? void 0 : _b.call(options, context);
+        const source = (_a = options.source) === null || _a === void 0 ? void 0 : _a.call(options, context);
         if (!source)
             return;
         if (!fs.existsSync(source))
             return;
+        if (options.once) {
+            if (sources.has(source))
+                return;
+            sources.add(source);
+        }
+        const destination = (_b = options.destination) === null || _b === void 0 ? void 0 : _b.call(options, context);
         fs.copySync(source, destination);
         context.assets = source;
     };

package/compiler/plugins/copy.d.ts

@@ -1,13 +1,12 @@
 export interface CopyOptions {
-    at?: 'finish' | 'start';
+    at?: 'start' | 'next' | 'finish';
     destination: string;
     source: string;
-    transformer?: (parameters: {
-        content: string;
-    }) => string;
+    transformer?: (content: string) => string;
 }
 export declare const copy: (options: CopyOptions) => {
     name: string;
     start: () => void;
+    next: () => void;
     finish: () => void;
 };

package/compiler/plugins/copy.js

@@ -1,7 +1,7 @@
 import fs from 'fs-extra';
 import path from 'path';
 const defaults = {
-    at: 'finish',
+    at: 'start'
 };
 export const copy = (options) => {
     const name = 'copy';
@@ -12,15 +12,18 @@ export const copy = (options) => {
         let content;
         content = fs.readFileSync(options.source, 'utf8');
         if (options.transformer)
-            content = options.transformer({ content });
+            content = options.transformer(content);
         fs.ensureDirSync(path.dirname(options.destination));
         fs.writeFileSync(options.destination, content, 'utf8');
     };
     const start = () => {
         copy('start');
     };
+    const next = () => {
+        copy('next');
+    };
     const finish = () => {
         copy('finish');
     };
-    return { name, start, finish };
+    return { name, start, next, finish };
 };