mancha 0.7.3 → 0.8.0

package/dist/plugins.js

@@ -1,6 +1,7 @@
-import { appendChild, attributeNameToCamelCase, cloneAttribute, createElement, firstElementChild, getAttribute, getNodeValue, insertBefore, removeAttribute, removeChild, replaceChildren, replaceWith, setAttribute, setNodeValue, setTextContent, traverse, } from "./dome.js";
+import { appendChild, attributeNameToCamelCase, cloneAttribute, createElement, ellipsize, firstElementChild, getAttribute, getNodeValue, insertBefore, nodeToString, removeAttribute, removeChild, replaceChildren, replaceWith, setAttribute, setNodeValue, setTextContent, traverse, } from "./dome.js";
 import { isRelativePath } from "./core.js";
 import { Iterator } from "./iterator.js";
+import { makeAsyncEvalFunction } from "./store.js";
 const KW_ATTRIBUTES = new Set([
     ":bind",
     ":bind-events",
@@ -18,7 +19,7 @@ export var RendererPlugins;
         // Early exit: node must be an <include> element.
         if (elem.tagName?.toLocaleLowerCase() !== "include")
             return;
-        this.log("<include> tag found in:\n", node);
+        this.log("<include> tag found in:\n", nodeToString(node, 128));
         this.log("<include> params:", params);
         // Early exit: <include> tags must have a src attribute.
         const src = getAttribute(elem, "src");
@@ -129,7 +130,7 @@ export var RendererPlugins;
         if (elem.tagName?.toLowerCase() === "template" && getAttribute(elem, "is")) {
             const tagName = getAttribute(elem, "is")?.toLowerCase();
             if (!this._customElements.has(tagName)) {
-                this.log(`Registering custom element: ${tagName}\n`, elem);
+                this.log(`Registering custom element: ${tagName}\n`, nodeToString(elem, 128));
                 this._customElements.set(tagName, elem.cloneNode(true));
                 // Remove the node from the DOM.
                 removeChild(elem.parentNode, elem);
@@ -140,7 +141,7 @@ export var RendererPlugins;
         const elem = node;
         const tagName = elem.tagName?.toLowerCase();
         if (this._customElements.has(tagName)) {
-            this.log(`Processing custom element: ${tagName}\n`, elem);
+            this.log(`Processing custom element: ${tagName}\n`, nodeToString(elem, 128));
             const template = this._customElements.get(tagName);
             const clone = (template.content || template).cloneNode(true);
             // Add whatever attributes the custom element tag had to the first child.
@@ -159,25 +160,23 @@ export var RendererPlugins;
         }
     };
     RendererPlugins.resolveTextNodeExpressions = async function (node, params) {
-        if (node.nodeType !== 3)
-            return;
         const content = getNodeValue(node) || "";
-        this.log(`Processing node content value:\n`, content);
+        if (node.nodeType !== 3 || !content?.trim())
+            return;
+        this.log(`Processing node content value:\n`, ellipsize(content, 128));
         // Identify all the expressions found in the content.
         const matcher = new RegExp(/{{ ([^}]+) }}/gm);
         const expressions = Array.from(content.matchAll(matcher)).map((match) => match[1]);
         // To update the node, we have to re-evaluate all of the expressions since that's much simpler
         // than caching results.
-        const updateNode = async () => {
+        return this.effect(function () {
             let updatedContent = content;
             for (const expr of expressions) {
-                const [result] = await this.eval(expr, { $elem: node });
+                const result = this.eval(expr, { $elem: node });
                 updatedContent = updatedContent.replace(`{{ ${expr} }}`, String(result));
             }
             setNodeValue(node, updatedContent);
-        };
-        // Trigger the eval and pass our full node update function as the callback.
-        await Promise.all(expressions.map((expr) => this.watchExpr(expr, { $elem: node }, updateNode)));
+        });
     };
     RendererPlugins.resolveDataAttribute = async function (node, params) {
         if (this._skipNodes.has(node))
@@ -185,26 +184,24 @@ export var RendererPlugins;
         const elem = node;
         const dataAttr = getAttribute(elem, ":data");
         if (dataAttr) {
-            this.log(":data attribute found in:\n", node);
+            this.log(":data attribute found in:\n", nodeToString(node, 128));
             // Remove the attribute from the node.
             removeAttribute(elem, ":data");
             // Create a subrenderer and process the tag, unless it's the root node.
-            if (params?.rootNode === node) {
-                const [result] = await this.eval(dataAttr, { $elem: node });
-                await this.update(result);
-            }
-            else {
-                const subrenderer = this.clone();
-                node.renderer = subrenderer;
-                const [result] = await subrenderer.eval(dataAttr, { $elem: node });
-                await subrenderer.update(result);
-                // Skip all the children of the current node.
+            const subrenderer = params?.rootNode === node ? this : this.clone();
+            node.renderer = subrenderer;
+            // Do not call eval() directly, we will use an async version instead.
+            const fn = makeAsyncEvalFunction(dataAttr, this.evalkeys);
+            const result = await fn.call(subrenderer.$, { $elem: node });
+            await Promise.all(Object.entries(result).map(([key, value]) => subrenderer.set(key, value)));
+            // Skip all the children of the current node, if it's a subrenderer.
+            if (subrenderer !== this) {
                 for (const child of traverse(node, this._skipNodes)) {
                     this._skipNodes.add(child);
                 }
-                // Mount the current node with the subrenderer.
-                await subrenderer.mount(node, params);
             }
+            // Mount the current node with the subrenderer.
+            await subrenderer.mount(node, params);
         }
     };
     RendererPlugins.resolveWatchAttribute = async function (node, params) {
@@ -213,11 +210,13 @@ export var RendererPlugins;
         const elem = node;
         const watchAttr = getAttribute(elem, "@watch");
         if (watchAttr) {
-            this.log("@watch attribute found in:\n", node);
+            this.log("@watch attribute found in:\n", nodeToString(node, 128));
             // Remove the attribute from the node.
             removeAttribute(elem, "@watch");
             // Compute the function's result.
-            await this.watchExpr(watchAttr, { $elem: node }, () => { });
+            await this.effect(function () {
+                return this.eval(watchAttr, { $elem: node });
+            });
         }
     };
     RendererPlugins.resolveTextAttributes = async function (node, params) {
@@ -226,11 +225,13 @@ export var RendererPlugins;
         const elem = node;
         const textAttr = getAttribute(elem, "$text");
         if (textAttr) {
-            this.log("$text attribute found in:\n", node);
+            this.log("$text attribute found in:\n", nodeToString(node, 128));
             // Remove the attribute from the node.
             removeAttribute(elem, "$text");
             // Compute the function's result and track dependencies.
-            await this.watchExpr(textAttr, { $elem: node }, (result) => setTextContent(node, result));
+            return this.effect(function () {
+                setTextContent(node, this.eval(textAttr, { $elem: node }));
+            });
         }
     };
     RendererPlugins.resolveHtmlAttribute = async function (node, params) {
@@ -239,16 +240,18 @@ export var RendererPlugins;
         const elem = node;
         const htmlAttr = getAttribute(elem, "$html");
         if (htmlAttr) {
-            this.log("$html attribute found in:\n", node);
+            this.log("$html attribute found in:\n", nodeToString(node, 128));
             // Remove the attribute from the node.
             removeAttribute(elem, "$html");
-            // Obtain a subrenderer for the node contents.
-            const subrenderer = this.clone();
             // Compute the function's result and track dependencies.
-            await this.watchExpr(htmlAttr, { $elem: node }, async (result) => {
-                const fragment = await subrenderer.preprocessString(result, params);
-                await subrenderer.renderNode(fragment, params);
-                replaceChildren(elem, fragment);
+            return this.effect(function () {
+                const result = this.eval(htmlAttr, { $elem: node });
+                return new Promise(async (resolve) => {
+                    const fragment = await this.preprocessString(result, params);
+                    await this.renderNode(fragment);
+                    replaceChildren(elem, fragment);
+                    resolve();
+                });
             });
         }
     };
@@ -258,12 +261,14 @@ export var RendererPlugins;
         const elem = node;
         for (const attr of Array.from(elem.attributes || [])) {
             if (attr.name.startsWith("$") && !KW_ATTRIBUTES.has(attr.name)) {
-                this.log(attr.name, "attribute found in:\n", node);
+                this.log(attr.name, "attribute found in:\n", nodeToString(node, 128));
                 // Remove the attribute from the node.
                 removeAttribute(elem, attr.name);
                 // Compute the function's result and track dependencies.
                 const propName = attributeNameToCamelCase(attr.name.slice(1));
-                await this.watchExpr(attr.value, { $elem: node }, (result) => (node[propName] = result));
+                await this.effect(function () {
+                    node[propName] = this.eval(attr.value, { $elem: node });
+                });
             }
         }
     };
@@ -273,12 +278,14 @@ export var RendererPlugins;
         const elem = node;
         for (const attr of Array.from(elem.attributes || [])) {
             if (attr.name.startsWith(":") && !KW_ATTRIBUTES.has(attr.name)) {
-                this.log(attr.name, "attribute found in:\n", node);
+                this.log(attr.name, "attribute found in:\n", nodeToString(node, 128));
                 // Remove the processed attributes from node.
                 removeAttribute(elem, attr.name);
                 // Compute the function's result and track dependencies.
                 const attrName = attr.name.slice(1);
-                await this.watchExpr(attr.value, { $elem: node }, (result) => setAttribute(elem, attrName, result));
+                this.effect(function () {
+                    setAttribute(elem, attrName, this.eval(attr.value, { $elem: node }));
+                });
             }
         }
     };
@@ -288,7 +295,7 @@ export var RendererPlugins;
         const elem = node;
         for (const attr of Array.from(elem.attributes || [])) {
             if (attr.name.startsWith("@") && !KW_ATTRIBUTES.has(attr.name)) {
-                this.log(attr.name, "attribute found in:\n", node);
+                this.log(attr.name, "attribute found in:\n", nodeToString(node, 128));
                 // Remove the processed attributes from node.
                 removeAttribute(elem, attr.name);
                 node.addEventListener?.(attr.name.substring(1), (event) => {
@@ -303,7 +310,7 @@ export var RendererPlugins;
         const elem = node;
         const forAttr = getAttribute(elem, ":for")?.trim();
         if (forAttr) {
-            this.log(":for attribute found in:\n", node);
+            this.log(":for attribute found in:\n", nodeToString(node, 128));
             // Remove the processed attributes from node.
             removeAttribute(elem, ":for");
             // Ensure the node and its children are not processed by subsequent steps.
@@ -316,7 +323,7 @@ export var RendererPlugins;
             insertBefore(parent, template, node);
             removeChild(parent, node);
             appendChild(template, node);
-            this.log(":for template:\n", template);
+            this.log(":for template:\n", nodeToString(template, 128));
             // Tokenize the input by splitting it based on the format "{key} in {expression}".
             const tokens = forAttr.split(" in ", 2);
             if (tokens.length !== 2) {
@@ -326,51 +333,41 @@ export var RendererPlugins;
             const children = [];
             // Compute the container expression and track dependencies.
             const [loopKey, itemsExpr] = tokens;
-            await this.watchExpr(itemsExpr, { $elem: node }, (items) => {
+            await this.effect(function () {
+                const items = this.eval(itemsExpr, { $elem: node });
                 this.log(":for list items:", items);
-                // Acquire the lock atomically.
-                this.lock = this.lock
-                    .then(() => new Promise(async (resolve) => {
-                    // Remove all the previously added children, if any.
-                    children.splice(0, children.length).forEach((child) => {
-                        removeChild(parent, child);
-                        this._skipNodes.delete(child);
-                    });
-                    // Validate that the expression returns a list of items.
-                    if (!Array.isArray(items)) {
-                        console.error(`Expression did not yield a list: \`${itemsExpr}\` => \`${items}\``);
-                        return resolve();
-                    }
-                    // Loop through the container items.
-                    for (const item of items) {
-                        // Create a subrenderer that will hold the loop item and all node descendants.
-                        const subrenderer = this.clone();
-                        await subrenderer.set(loopKey, item);
-                        // Create a new HTML element for each item and add them to parent node.
-                        const copy = node.cloneNode(true);
-                        // Also add the new element to the store.
-                        children.push(copy);
-                        // Since the element will be handled by a subrenderer, skip it in parent renderer.
-                        this._skipNodes.add(copy);
-                        // Render the element using the subrenderer.
-                        await subrenderer.mount(copy, params);
-                        this.log("Rendered list child:\n", copy, copy.outerHTML);
-                    }
-                    // Insert the new children into the parent container.
-                    const reference = template.nextSibling;
-                    for (const child of children) {
-                        insertBefore(parent, child, reference);
-                    }
-                    // Release the lock.
-                    resolve();
-                }))
-                    .catch((exc) => {
-                    console.error(exc);
-                    throw new Error(exc);
-                })
-                    .then();
-                // Return the lock so the whole operation can be awaited.
-                return this.lock;
+                // Remove all the previously added children, if any.
+                children.splice(0, children.length).forEach((child) => {
+                    removeChild(parent, child);
+                    this._skipNodes.delete(child);
+                });
+                // Validate that the expression returns a list of items.
+                if (!Array.isArray(items)) {
+                    console.error(`Expression did not yield a list: \`${itemsExpr}\` => \`${items}\``);
+                    return Promise.resolve();
+                }
+                // Loop through the container items.
+                const awaiters = [];
+                for (const item of items) {
+                    // Create a subrenderer that will hold the loop item and all node descendants.
+                    const subrenderer = this.clone();
+                    subrenderer.set(loopKey, item);
+                    // Create a new HTML element for each item and add them to parent node.
+                    const copy = node.cloneNode(true);
+                    // Also add the new element to the store.
+                    children.push(copy);
+                    // Since the element will be handled by a subrenderer, skip it in parent renderer.
+                    this._skipNodes.add(copy);
+                    // Render the element using the subrenderer.
+                    awaiters.push(subrenderer.mount(copy, params));
+                    this.log("Rendered list child:\n", nodeToString(copy, 128));
+                }
+                // Insert the new children into the parent container.
+                const reference = template.nextSibling;
+                for (const child of children) {
+                    insertBefore(parent, child, reference);
+                }
+                return Promise.all(awaiters);
             });
         }
     };
@@ -380,7 +377,7 @@ export var RendererPlugins;
         const elem = node;
         const bindExpr = getAttribute(elem, ":bind");
         if (bindExpr) {
-            this.log(":bind attribute found in:\n", node);
+            this.log(":bind attribute found in:\n", nodeToString(node, 128));
             // The change events we listen for can be overriden by user.
             const defaultEvents = ["change", "input"];
             const updateEvents = getAttribute(elem, ":bind-events")?.split(",") || defaultEvents;
@@ -391,7 +388,10 @@ export var RendererPlugins;
             const prop = getAttribute(elem, "type") === "checkbox" ? "checked" : "value";
             // Watch for updates in the store and bind our property ==> node value.
             const propExpr = `$elem.${prop} = ${bindExpr}`;
-            await this.watchExpr(propExpr, { $elem: node }, (result) => (elem[prop] = result));
+            this.effect(function () {
+                const result = this.eval(propExpr, { $elem: node });
+                elem[prop] = result;
+            });
             // Bind node value ==> our property.
             const nodeExpr = `${bindExpr} = $elem.${prop}`;
             // Watch for updates in the node's value.
@@ -406,7 +406,7 @@ export var RendererPlugins;
         const elem = node;
         const showExpr = getAttribute(elem, ":show");
         if (showExpr) {
-            this.log(":show attribute found in:\n", node);
+            this.log(":show attribute found in:\n", nodeToString(node, 128));
             // Remove the processed attributes from node.
             removeAttribute(elem, ":show");
             // TODO: Instead of using element display, insert a dummy <template> to track position of
@@ -422,7 +422,8 @@ export var RendererPlugins;
                         ?.at(1)
                         ?.trim();
             // Compute the function's result and track dependencies.
-            await this.watchExpr(showExpr, { $elem: node }, (result) => {
+            this.effect(function () {
+                const result = this.eval(showExpr, { $elem: node });
                 // If the result is false, set the node's display to none.
                 if (elem.style)
                     elem.style.display = result ? display : "none";

package/dist/store.d.ts

@@ -0,0 +1,50 @@
+type SignalStoreProxy = SignalStore & {
+    [key: string]: any;
+};
+type Observer<T> = (this: SignalStoreProxy) => T;
+declare abstract class IDebouncer {
+    timeouts: Map<Function, ReturnType<typeof setTimeout>>;
+    debounce<T>(millis: number, callback: () => T | Promise<T>): Promise<T>;
+}
+/** Default debouncer time in millis. */
+export declare const REACTIVE_DEBOUNCE_MILLIS = 10;
+/**
+ * Creates an evaluation function based on the provided code and arguments.
+ * @param code The code to be evaluated.
+ * @param args The arguments to be passed to the evaluation function. Default is an empty array.
+ * @returns The evaluation function.
+ */
+export declare function makeEvalFunction(code: string, args?: string[]): Function;
+export declare function makeAsyncEvalFunction(code: string, args?: string[]): Function;
+export declare class SignalStore extends IDebouncer {
+    protected readonly evalkeys: string[];
+    protected readonly expressionCache: Map<string, Function>;
+    protected readonly store: Map<string, unknown>;
+    protected readonly observers: Map<string, Set<Observer<unknown>>>;
+    protected _observer: Observer<unknown> | null;
+    _lock: Promise<void>;
+    constructor(data?: {
+        [key: string]: any;
+    });
+    private wrapFunction;
+    private wrapObject;
+    private watch;
+    private notify;
+    get<T>(key: string, observer?: Observer<T>): unknown | null;
+    set(key: string, value: unknown): Promise<void>;
+    del(key: string): void;
+    has(key: string): boolean;
+    effect<T>(observer: Observer<T>): T;
+    private proxify;
+    get $(): SignalStoreProxy;
+    /**
+     * Retrieves or creates a cached expression function based on the provided expression.
+     * @param expr - The expression to retrieve or create a cached function for.
+     * @returns The cached expression function.
+     */
+    private cachedExpressionFunction;
+    eval(expr: string, args?: {
+        [key: string]: any;
+    }): unknown;
+}
+export {};

package/dist/store.js

@@ -0,0 +1,182 @@
+class IDebouncer {
+    timeouts = new Map();
+    debounce(millis, callback) {
+        return new Promise((resolve, reject) => {
+            const timeout = this.timeouts.get(callback);
+            if (timeout)
+                clearTimeout(timeout);
+            this.timeouts.set(callback, setTimeout(() => {
+                try {
+                    resolve(callback());
+                    this.timeouts.delete(callback);
+                }
+                catch (exc) {
+                    reject(exc);
+                }
+            }, millis));
+        });
+    }
+}
+/** Default debouncer time in millis. */
+export const REACTIVE_DEBOUNCE_MILLIS = 10;
+/**
+ * Creates an evaluation function based on the provided code and arguments.
+ * @param code The code to be evaluated.
+ * @param args The arguments to be passed to the evaluation function. Default is an empty array.
+ * @returns The evaluation function.
+ */
+export function makeEvalFunction(code, args = []) {
+    return new Function(...args, `with (this) { return (${code}); }`);
+}
+export function makeAsyncEvalFunction(code, args = []) {
+    return new Function(...args, `with (this) { return (async () => (${code}))(); }`);
+}
+function isProxified(object) {
+    return object instanceof SignalStore || object["__is_proxy__"];
+}
+export class SignalStore extends IDebouncer {
+    evalkeys = ["$elem", "$event"];
+    expressionCache = new Map();
+    store = new Map();
+    observers = new Map();
+    _observer = null;
+    _lock = Promise.resolve();
+    constructor(data) {
+        super();
+        for (let [key, value] of Object.entries(data || {})) {
+            // Use our set method to ensure that callbacks and wrappers are appropriately set, but ignore
+            // the return value since we know that no observers will be triggered.
+            this.set(key, value);
+        }
+    }
+    wrapFunction(fn) {
+        return (...args) => fn.call(this.$, ...args);
+    }
+    wrapObject(obj, callback) {
+        // If this object is already a proxy or not a plain object (or array), return it as-is.
+        if (obj == null || isProxified(obj) || (obj.constructor !== Object && !Array.isArray(obj))) {
+            return obj;
+        }
+        return new Proxy(obj, {
+            deleteProperty: (target, property) => {
+                if (property in target) {
+                    delete target[property];
+                    callback();
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            },
+            set: (target, prop, value, receiver) => {
+                if (typeof value === "object" && obj != null)
+                    value = this.wrapObject(value, callback);
+                const ret = Reflect.set(target, prop, value, receiver);
+                callback();
+                return ret;
+            },
+            get: (target, prop, receiver) => {
+                if (prop === "__is_proxy__")
+                    return true;
+                return Reflect.get(target, prop, receiver);
+            },
+        });
+    }
+    watch(key, observer) {
+        if (!this.observers.has(key)) {
+            this.observers.set(key, new Set());
+        }
+        if (!this.observers.get(key)?.has(observer)) {
+            this.observers.get(key)?.add(observer);
+        }
+    }
+    async notify(key) {
+        const observers = Array.from(this.observers.get(key) || []);
+        await this.debounce(REACTIVE_DEBOUNCE_MILLIS, () => Promise.all(observers.map((observer) => observer.call(this.proxify(observer)))));
+    }
+    get(key, observer) {
+        if (observer)
+            this.watch(key, observer);
+        return this.store.get(key);
+    }
+    async set(key, value) {
+        if (value === this.store.get(key))
+            return;
+        const callback = () => this.notify(key);
+        if (value && typeof value === "function") {
+            value = this.wrapFunction(value);
+        }
+        if (value && typeof value === "object") {
+            value = this.wrapObject(value, callback);
+        }
+        this.store.set(key, value);
+        await callback();
+    }
+    del(key) {
+        this.store.delete(key);
+        this.observers.delete(key);
+    }
+    has(key) {
+        return this.store.has(key);
+    }
+    effect(observer) {
+        return observer.call(this.proxify(observer));
+    }
+    proxify(observer) {
+        const keys = Array.from(this.store.entries()).map(([key]) => key);
+        const keyval = Object.fromEntries(keys.map((key) => [key, undefined]));
+        return new Proxy(keyval, {
+            get: (_, prop, receiver) => {
+                if (typeof prop === "string" && this.store.has(prop)) {
+                    return this.get(prop, observer);
+                }
+                else if (prop === "$") {
+                    return this.proxify(observer);
+                }
+                else {
+                    return Reflect.get(this, prop, receiver);
+                }
+            },
+            set: (_, prop, value, receiver) => {
+                if (typeof prop !== "string" || prop in this) {
+                    Reflect.set(this, prop, value, receiver);
+                }
+                else {
+                    this.set(prop, value);
+                }
+                return true;
+            },
+        });
+    }
+    get $() {
+        return this.proxify();
+    }
+    /**
+     * Retrieves or creates a cached expression function based on the provided expression.
+     * @param expr - The expression to retrieve or create a cached function for.
+     * @returns The cached expression function.
+     */
+    cachedExpressionFunction(expr) {
+        if (!this.expressionCache.has(expr)) {
+            this.expressionCache.set(expr, makeEvalFunction(expr, this.evalkeys));
+        }
+        return this.expressionCache.get(expr);
+    }
+    eval(expr, args = {}) {
+        // Determine whether we have already been proxified to avoid doing it again.
+        const thisArg = this._observer ? this : this.$;
+        if (this.store.has(expr)) {
+            // Shortcut: if the expression is just an item from the value store, use that directly.
+            return thisArg[expr];
+        }
+        else {
+            // Otherwise, perform the expression evaluation.
+            const fn = this.cachedExpressionFunction(expr);
+            const argvals = this.evalkeys.map((key) => args[key]);
+            if (Object.keys(args).some((key) => !this.evalkeys.includes(key))) {
+                throw new Error(`Invalid argument key, must be one of: ${this.evalkeys.join(", ")}`);
+            }
+            return fn.call(thisArg, ...argvals);
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mancha",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "description": "Javscript HTML rendering engine",
   "main": "dist/index.js",
   "type": "module",
@@ -56,4 +56,4 @@
     "webpack": "5.91.0",
     "webpack-cli": "^5.1.4"
   }
-}
+}