@htmlplus/element 0.5.6 → 0.5.7

package/bundlers/rollup.js

@@ -1,6 +1,6 @@
 import { compiler } from '../compiler/index.js';
 export const rollup = (...plugins) => {
-    const { start, next, finish } = compiler(...plugins);
+    const { start, run, finish } = compiler(...plugins);
     return {
         name: 'htmlplus',
         async buildStart() {
@@ -9,7 +9,7 @@ export const rollup = (...plugins) => {
         async load(id) {
             if (!id.endsWith('.tsx'))
                 return;
-            const { isInvalid, script } = await next(id);
+            const { isInvalid, script } = await run(id);
             if (isInvalid)
                 return;
             return script;

package/bundlers/vite.js

@@ -1,7 +1,7 @@
 import path from 'path';
 import { compiler } from '../compiler/index.js';
 export const vite = (...plugins) => {
-    const { start, next, finish } = compiler(...plugins);
+    const { start, run, finish } = compiler(...plugins);
     return {
         name: 'htmlplus',
         async buildStart() {
@@ -10,7 +10,7 @@ export const vite = (...plugins) => {
         async load(id) {
             if (!id.endsWith('.tsx'))
                 return;
-            let { isInvalid, script, stylePath } = await next(id);
+            let { isInvalid, script, stylePath } = await run(id);
             if (isInvalid)
                 return;
             if (script && stylePath) {

package/client/decorators/listen.d.ts

@@ -12,9 +12,9 @@ export interface ListenOptions {
 export declare const ListenOptionsDefault: ListenOptions;
 /**
  * Will be called whenever the specified event is delivered to the target.
- * [More](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).
- * @param type TODO
- * @param options TODO
+ * [More](https://mdn.io/addEventListener).
+ * @param type A case-sensitive string representing the [event type](https://mdn.io/events) to listen for.
+ * @param options An object that specifies characteristics about the event listener.
  */
 export declare function Listen(type: string, options?: ListenOptions): (target: PlusElement, propertyKey: PropertyKey, descriptor: PropertyDescriptor) => {
     configurable: boolean;

package/client/decorators/listen.js

@@ -9,9 +9,9 @@ export const ListenOptionsDefault = {
 };
 /**
  * Will be called whenever the specified event is delivered to the target.
- * [More](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).
- * @param type TODO
- * @param options TODO
+ * [More](https://mdn.io/addEventListener).
+ * @param type A case-sensitive string representing the [event type](https://mdn.io/events) to listen for.
+ * @param options An object that specifies characteristics about the event listener.
  */
 export function Listen(type, options) {
     return function (target, propertyKey, descriptor) {

package/client/decorators/watch.js

@@ -15,15 +15,15 @@ export function Watch(keys, immediate) {
         // Registers a lifecycle to detect changes.
         appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function (states) {
             // Skips the logic if 'immediate' wasn't passed.
-            if (!immediate && !this[CONSTANTS.API_LOADED])
+            if (!immediate && !this[CONSTANTS.API_RENDER_COMPLETED])
                 return;
             // Loops the keys.
-            states.forEach((prev, key) => {
+            states.forEach((previous, key) => {
                 // Skips the current key.
                 if (all.length && !all.includes(key))
                     return;
                 // Invokes the method with parameters.
-                this[propertyKey](this[key], prev, key);
+                this[propertyKey](this[key], previous, key);
             });
         });
     };

package/client/utils/appendToMethod.js

@@ -1,7 +1,15 @@
 export const appendToMethod = (target, propertyKey, handler) => {
-    const callback = target[propertyKey];
-    target[propertyKey] = function (...parameters) {
+    // Gets the previous function
+    const previous = target[propertyKey];
+    // Creates new function
+    function next(...parameters) {
+        // Calls the previous
+        const result = previous === null || previous === void 0 ? void 0 : previous.bind(this)(...parameters);
+        // Calls the appended
         handler.bind(this)(...parameters);
-        return callback === null || callback === void 0 ? void 0 : callback.bind(this)(...parameters);
-    };
+        // Returns the result
+        return result;
+    }
+    // Replaces the next with the previous one
+    target[propertyKey] = next;
 };

package/client/utils/request.js

@@ -55,10 +55,10 @@ export const request = (target, name, previous, callback) => {
             });
             // Calls the lifecycle's callback after the rendering phase.
             call(target, CONSTANTS.LIFECYCLE_UPDATED, states);
-            // TODO: releated to the @Watch decorator.
-            target[CONSTANTS.API_LOADED] = true;
             // Clears stacks.
             stacks.clear();
+            // TODO: releated to the @Watch decorator.
+            target[CONSTANTS.API_RENDER_COMPLETED] = true;
         }
     }));
     // Calls the micro task.

package/client/utils/task.js

@@ -1,23 +1,23 @@
 export const task = (options) => {
-    let isPending, updatePromise;
+    let isPending, promise;
     const run = () => {
         if (options.canStart && !options.canStart())
             return Promise.resolve(false);
         if (!isPending)
-            updatePromise = enqueue();
-        return updatePromise;
+            promise = enqueue();
+        return promise;
     };
     const enqueue = async () => {
         isPending = true;
         try {
-            await updatePromise;
+            await promise;
         }
         catch (error) {
             Promise.reject(error);
         }
         // TODO: maybe is optional
         if (!isPending)
-            return updatePromise;
+            return promise;
         try {
             if (options.canRun && !options.canRun())
                 return (isPending = false);

package/compiler/compiler.d.ts

@@ -1,6 +1,6 @@
 import { Context, Plugin } from '../types';
 export declare const compiler: (...plugins: Array<Plugin>) => {
     start: () => Promise<void>;
-    next: (filePath: string) => Promise<Context>;
+    run: (filePath: string) => Promise<Context>;
     finish: () => Promise<void>;
 };

package/compiler/compiler.js

@@ -19,38 +19,26 @@ export const compiler = (...plugins) => {
             if (!plugin.start)
                 continue;
             log(`Plugin '${plugin.name}' is starting...`);
-            await plugin.start(global);
+            global = (await plugin.start(global)) || global;
             log(`Plugin '${plugin.name}' started successfully.`);
         }
         log(`Plugins started successfully.`, true);
     };
-    const next = async (filePath) => {
-        var _a;
+    const run = async (filePath) => {
         const key = filePath.split(/[\/|\\]/g).pop();
         let context = {
             filePath
         };
         for (const plugin of plugins) {
-            if (!plugin.next)
+            if (!plugin.run)
                 continue;
             log(`Plugin '${plugin.name}' is executing on '${path.basename(filePath)}' file.`);
-            const output = await plugin.next(context, global);
-            // TODO
-            if (output) {
-                context.outputs = ((_a = context.outputs) !== null && _a !== void 0 ? _a : [])
-                    .filter((output) => {
-                    if (plugin.name != output.name)
-                        return true;
-                    if (plugin.options && plugin.options != output.options)
-                        return true;
-                })
-                    .concat({
-                    name: plugin.name,
-                    options: plugin.options,
-                    output
-                });
-            }
-            global.contexts = global.contexts.filter((current) => current.filePath != context.filePath).concat(context);
+            context = (await plugin.run(context, global)) || context;
+            global.contexts = global.contexts
+                .filter((current) => {
+                return current.filePath != context.filePath;
+            })
+                .concat(context);
             log(`Plugin '${plugin.name}' executed successfully on '${path.basename(filePath)}' file.`);
             if (context.isInvalid)
                 break;
@@ -66,11 +54,11 @@ export const compiler = (...plugins) => {
             if (!plugin.finish)
                 continue;
             log(`Plugin '${plugin.name}' is finishing...`);
-            await plugin.finish(global);
+            global = (await plugin.finish(global)) || global;
             log(`Plugin '${plugin.name}' finished successfully.`);
         }
         log(`Plugins finished successfully.`, true);
         log(`Finished.`, true);
     };
-    return { start, next, finish };
+    return { start, run, finish };
 };

package/compiler/plugins/assets.d.ts

@@ -1,11 +1,8 @@
-import { Context } from '../../types';
+import { Context, Plugin } from '../../types';
 export declare const ASSETS_OPTIONS: Partial<AssetsOptions>;
 export type AssetsOptions = {
     once?: boolean;
     destination: (context: Context) => string;
     source?: (context: Context) => string;
 };
-export declare const assets: (options: AssetsOptions) => {
-    name: string;
-    next: (context: Context) => void;
-};
+export declare const assets: (options: AssetsOptions) => Plugin;

package/compiler/plugins/assets.js

@@ -13,7 +13,7 @@ export const assets = (options) => {
     const name = 'assets';
     options = Object.assign({}, ASSETS_OPTIONS, options);
     const sources = new Set();
-    const next = (context) => {
+    const run = (context) => {
         var _a, _b;
         const source = (_a = options.source) === null || _a === void 0 ? void 0 : _a.call(options, context);
         if (!source)
@@ -29,5 +29,5 @@ export const assets = (options) => {
         fs.copySync(source, destination);
         context.assets = source;
     };
-    return { name, next };
+    return { name, run };
 };

package/compiler/plugins/copy.d.ts

@@ -1,13 +1,9 @@
+import { Plugin } from '../../types';
 export declare const COPY_OPTIONS: Partial<CopyOptions>;
 export interface CopyOptions {
-    at?: 'start' | 'next' | 'finish';
+    at?: 'start' | 'run' | 'finish';
     destination: string;
     source: string;
     transformer?: (content: string) => string;
 }
-export declare const copy: (options: CopyOptions) => {
-    name: string;
-    start: () => void;
-    next: () => void;
-    finish: () => void;
-};
+export declare const copy: (options: CopyOptions) => Plugin;

package/compiler/plugins/copy.js

@@ -19,11 +19,11 @@ export const copy = (options) => {
     const start = () => {
         copy('start');
     };
-    const next = () => {
-        copy('next');
+    const run = () => {
+        copy('run');
     };
     const finish = () => {
         copy('finish');
     };
-    return { name, start, next, finish };
+    return { name, start, run, finish };
 };

package/compiler/plugins/customElement.d.ts

@@ -1,9 +1,6 @@
-import { Context } from '../../types';
+import { Plugin } from '../../types';
 export declare const CUSTOM_ELEMENT_OPTIONS: Partial<CustomElementOptions>;
 export interface CustomElementOptions {
     typings?: boolean;
 }
-export declare const customElement: (options?: CustomElementOptions) => {
-    name: string;
-    next: (context: Context) => void;
-};
+export declare const customElement: (options?: CustomElementOptions) => Plugin;

package/compiler/plugins/customElement.js

@@ -10,7 +10,7 @@ export const CUSTOM_ELEMENT_OPTIONS = {
 export const customElement = (options) => {
     const name = 'customElement';
     options = Object.assign({}, CUSTOM_ELEMENT_OPTIONS, options);
-    const next = (context) => {
+    const run = (context) => {
         const ast = t.cloneNode(context.fileAST, true);
         // attaches name
         visitor(ast, {
@@ -209,5 +209,5 @@ export const customElement = (options) => {
         // TODO
         context.script = print(ast);
     };
-    return { name, next };
+    return { name, run };
 };

package/compiler/plugins/customElementReact/customElementReact.d.ts

@@ -1,4 +1,4 @@
-import { Context, Global } from '../../../types';
+import { Context, Plugin } from '../../../types';
 export declare const CUSTOM_ELEMENT_REACT_OPTIONS: Partial<CustomElementReactOptions>;
 export interface CustomElementReactOptions {
     compact?: boolean;
@@ -13,7 +13,4 @@ export interface CustomElementReactOptions {
         local: string;
     };
 }
-export declare const customElementReact: (options: CustomElementReactOptions) => {
-    name: string;
-    finish: (global: Global) => void;
-};
+export declare const customElementReact: (options: CustomElementReactOptions) => Plugin;

package/compiler/plugins/document.d.ts

@@ -1,10 +1,7 @@
-import { Context, Global } from '../../types';
+import { Context, Plugin } from '../../types';
 export declare const DOCUMENT_OPTIONS: Partial<DocumentOptions>;
 export interface DocumentOptions {
     destination: string;
     transformer?: (context: Context, element: any) => any;
 }
-export declare const document: (options: DocumentOptions) => {
-    name: string;
-    finish: (global: Global) => void;
-};
+export declare const document: (options: DocumentOptions) => Plugin;

package/compiler/plugins/extract.d.ts

@@ -1,9 +1,6 @@
-import { Context } from '../../types';
+import { Plugin } from '../../types';
 export declare const EXTRACT_OPTIONS: Partial<ExtractOptions>;
 export interface ExtractOptions {
     prefix?: string;
 }
-export declare const extract: (options?: ExtractOptions) => {
-    name: string;
-    next: (context: Context) => void;
-};
+export declare const extract: (options?: ExtractOptions) => Plugin;

package/compiler/plugins/extract.js

@@ -7,7 +7,7 @@ export const EXTRACT_OPTIONS = {};
 export const extract = (options) => {
     const name = 'extract';
     options = Object.assign({}, EXTRACT_OPTIONS, options);
-    const next = (context) => {
+    const run = (context) => {
         var _a, _b;
         visitor(context.fileAST, {
             ClassDeclaration: {
@@ -71,5 +71,5 @@ export const extract = (options) => {
         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, next };
+    return { name, run };
 };

package/compiler/plugins/parse.d.ts

@@ -1,8 +1,5 @@
 import { ParserOptions } from '@babel/parser';
-import { Context } from '../../types';
+import { Plugin } from '../../types';
 export declare const PARSE_OPTIONS: Partial<ParseOptions>;
 export type ParseOptions = ParserOptions;
-export declare const parse: (options?: ParseOptions) => {
-    name: string;
-    next: (context: Context) => void;
-};
+export declare const parse: (options?: ParseOptions) => Plugin;

package/compiler/plugins/parse.js

@@ -6,9 +6,9 @@ export const PARSE_OPTIONS = {
 export const parse = (options) => {
     const name = 'parse';
     options = Object.assign({}, PARSE_OPTIONS, options);
-    const next = (context) => {
+    const run = (context) => {
         var _a;
         context.fileAST = (_a = context.fileAST) !== null && _a !== void 0 ? _a : parser(context.fileContent, options);
     };
-    return { name, next };
+    return { name, run };
 };

package/compiler/plugins/read.d.ts

@@ -1,11 +1,8 @@
 /// <reference types="node" />
-import { Context } from '../../types';
+import { Plugin } from '../../types';
 export declare const READ_OPTIONS: Partial<ReadOptions>;
 export type ReadOptions = {
     encoding: BufferEncoding;
     flag?: string | undefined;
 };
-export declare const read: (options?: ReadOptions) => {
-    name: string;
-    next: (context: Context) => void;
-};
+export declare const read: (options?: ReadOptions) => Plugin;

package/compiler/plugins/read.js

@@ -5,9 +5,9 @@ export const READ_OPTIONS = {
 export const read = (options) => {
     const name = 'read';
     options = Object.assign({}, READ_OPTIONS, options);
-    const next = (context) => {
+    const run = (context) => {
         var _a;
         context.fileContent = (_a = context.fileContent) !== null && _a !== void 0 ? _a : fs.readFileSync(context.filePath, options);
     };
-    return { name, next };
+    return { name, run };
 };

package/compiler/plugins/readme.d.ts

@@ -1,9 +1,6 @@
-import { Context, Global } from '../../types';
+import { Context, Plugin } from '../../types';
 export declare const README_OPTIONS: Partial<ReadmeOptions>;
 export type ReadmeOptions = {
     source?: (context: Context) => string;
 };
-export declare const readme: (options: ReadmeOptions) => {
-    name: string;
-    finish: (global: Global) => void;
-};
+export declare const readme: (options: ReadmeOptions) => Plugin;

package/compiler/plugins/style.d.ts

@@ -1,9 +1,6 @@
-import { Context } from '../../types';
+import { Context, Plugin } from '../../types';
 export declare const STYLE_OPTIONS: Partial<StyleOptions>;
 export type StyleOptions = {
     source?: (context: Context) => string | string[];
 };
-export declare const style: (options?: StyleOptions) => {
-    name: string;
-    next: (context: Context) => void;
-};
+export declare const style: (options?: StyleOptions) => Plugin;

package/compiler/plugins/style.js

@@ -17,7 +17,7 @@ export const STYLE_OPTIONS = {
 export const style = (options) => {
     const name = 'style';
     options = Object.assign({}, STYLE_OPTIONS, options);
-    const next = (context) => {
+    const run = (context) => {
         var _a;
         const sources = [(_a = options === null || options === void 0 ? void 0 : options.source) === null || _a === void 0 ? void 0 : _a.call(options, context)].flat();
         for (const source of sources) {
@@ -37,5 +37,5 @@ export const style = (options) => {
         t.addComment(property, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_PROPERTY, true);
         context.class.body.body.unshift(property);
     };
-    return { name, next };
+    return { name, run };
 };

package/compiler/plugins/validate.d.ts

@@ -1,5 +1,2 @@
-import { Context } from '../../types';
-export declare const validate: () => {
-    name: string;
-    next: (context: Context) => void;
-};
+import { Plugin } from '../../types';
+export declare const validate: () => Plugin;

package/compiler/plugins/validate.js

@@ -2,7 +2,7 @@ import * as CONSTANTS from '../../constants/index.js';
 import { hasDecorator, visitor } from '../utils/index.js';
 export const validate = () => {
     const name = 'validate';
-    const next = (context) => {
+    const run = (context) => {
         let hasValidImport;
         visitor(context.fileAST, {
             ImportDeclaration(path) {
@@ -33,5 +33,5 @@ export const validate = () => {
         });
         context.isInvalid = !hasValidImport || !hasValidExport;
     };
-    return { name, next };
+    return { name, run };
 };

package/compiler/plugins/visualStudioCode.d.ts

@@ -1,9 +1,6 @@
-import { Global } from '../../types';
+import { Plugin } from '../../types';
 export declare const VISUAL_STUDIO_CODE_OPTIONS: Partial<VisualStudioCodeOptions>;
 export interface VisualStudioCodeOptions {
     destination: string;
 }
-export declare const visualStudioCode: (options: VisualStudioCodeOptions) => {
-    name: string;
-    finish: (global: Global) => void;
-};
+export declare const visualStudioCode: (options: VisualStudioCodeOptions) => Plugin;

package/compiler/plugins/webTypes.d.ts

@@ -1,4 +1,4 @@
-import { Context, Global } from '../../types';
+import { Context, Plugin } from '../../types';
 export declare const WEB_TYPES_OPTIONS: Partial<WebTypesOptions>;
 export interface WebTypesOptions {
     destination: string;
@@ -7,7 +7,4 @@ export interface WebTypesOptions {
     reference?: (context: Context) => string;
     transformer?: (context: Context, component: any) => any;
 }
-export declare const webTypes: (options: WebTypesOptions) => {
-    name: string;
-    finish: (global: Global) => void;
-};
+export declare const webTypes: (options: WebTypesOptions) => Plugin;

package/constants/index.d.ts

@@ -3,9 +3,9 @@ export declare const API_ATTRIBUTES_SYNCER: unique symbol;
 export declare const API_CONNECTED: unique symbol;
 export declare const API_HOST: unique symbol;
 export declare const API_INSTANCE: unique symbol;
-export declare const API_LOADED: unique symbol;
 export declare const API_LOCKED: unique symbol;
 export declare const API_REQUEST: unique symbol;
+export declare const API_RENDER_COMPLETED: unique symbol;
 export declare const API_STACKS: unique symbol;
 export declare const COMMENT_AUTO_ADDED_DEPENDENCY = " THIS DEPENDENCY IS AUTO-ADDED, DO NOT EDIT MANUALY";
 export declare const COMMENT_AUTO_ADDED_PROPERTY = " THIS PROPERTY IS AUTO-ADDED, DO NOT EDIT MANUALY";

package/constants/index.js

@@ -4,9 +4,9 @@ export const API_ATTRIBUTES_SYNCER = Symbol();
 export const API_CONNECTED = Symbol();
 export const API_HOST = Symbol();
 export const API_INSTANCE = Symbol();
-export const API_LOADED = Symbol();
 export const API_LOCKED = Symbol();
 export const API_REQUEST = Symbol();
+export const API_RENDER_COMPLETED = Symbol();
 export const API_STACKS = Symbol();
 // comments
 export const COMMENT_AUTO_ADDED_DEPENDENCY = ' THIS DEPENDENCY IS AUTO-ADDED, DO NOT EDIT MANUALY';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "license": "MIT",
   "author": "Masood Abdolian <m.abdolian@gmail.com>",
   "description": "A powerful library for building scalable, reusable, fast, tastable and lightweight design system for any web technologies. Powerd by Web Component.",

package/types/context.d.ts

@@ -3,11 +3,6 @@ export interface Context {
     customElementNames?: Array<string>;
     isInvalid?: boolean;
     script?: string;
-    outputs?: Array<{
-        name: string;
-        options?: any;
-        output?: any;
-    }>;
     assets?: string;
     class?: ClassDeclaration;
     classEvents?: Array<ClassProperty>;

package/types/plugin.d.ts

@@ -1,10 +1,10 @@
 import { Context } from './context';
 import { Global } from './global';
-export type Return<T> = void | T | Promise<T>;
+export type Return<T> = void | T | Promise<void | T>;
 export type Plugin = {
     name: string;
     options?: any;
-    start?: (global: Global) => Return<void>;
-    next?: (context: Context, global: Global) => Return<any>;
-    finish?: (global: Global) => Return<void>;
+    start?: (global: Global) => Return<Global>;
+    run?: (context: Context, global: Global) => Return<Context>;
+    finish?: (global: Global) => Return<Global>;
 };