eleva 1.2.16-beta → 1.2.18-beta

package/src/modules/Renderer.js

@@ -1,10 +1,26 @@
 "use strict";
 
+/**
+ * A regular expression to match hyphenated lowercase letters.
+ * @private
+ * @type {RegExp}
+ */
+const CAMEL_RE = /-([a-z])/g;
+
 /**
  * @class 🎨 Renderer
- * @classdesc A DOM renderer that handles efficient DOM updates through patching and diffing.
- * Provides methods for updating the DOM by comparing new and old structures and applying
- * only the necessary changes, minimizing layout thrashing and improving performance.
+ * @classdesc A high-performance DOM renderer that implements an optimized direct DOM diffing algorithm.
+ *
+ * Key features:
+ * - Single-pass diffing algorithm for efficient DOM updates
+ * - Key-based node reconciliation for optimal performance
+ * - Intelligent attribute handling for ARIA, data attributes, and boolean properties
+ * - Preservation of special Eleva-managed instances and style elements
+ * - Memory-efficient with reusable temporary containers
+ *
+ * The renderer is designed to minimize DOM operations while maintaining
+ * exact attribute synchronization and proper node identity preservation.
+ * It's particularly optimized for frequent updates and complex DOM structures.
  *
  * @example
  * const renderer = new Renderer();
@@ -14,144 +30,201 @@
  */
 export class Renderer {
   /**
-   * Creates a new Renderer instance with a reusable temporary container for parsing HTML.
+   * Creates a new Renderer instance.
    * @public
    */
   constructor() {
-    /** @private {HTMLElement} Reusable temporary container for parsing new HTML */
+    /**
+     * A temporary container to hold the new HTML content while diffing.
+     * @private
+     * @type {HTMLElement}
+     */
     this._tempContainer = document.createElement("div");
   }
 
   /**
-   * Patches the DOM of a container element with new HTML content.
-   * Efficiently updates the DOM by parsing new HTML into a reusable container
-   * and applying only the necessary changes.
+   * Patches the DOM of the given container with the provided HTML string.
    *
    * @public
-   * @param {HTMLElement} container - The container element to patch.
-   * @param {string} newHtml - The new HTML content to apply.
+   * @param {HTMLElement} container - The container whose DOM will be patched.
+   * @param {string} newHtml - The new HTML string.
+   * @throws {TypeError} If the container is not an HTMLElement or newHtml is not a string.
+   * @throws {Error} If the DOM patching fails.
    * @returns {void}
-   * @throws {Error} If container is not an HTMLElement, newHtml is not a string, or patching fails.
    */
   patchDOM(container, newHtml) {
     if (!(container instanceof HTMLElement)) {
-      throw new Error("Container must be an HTMLElement");
+      throw new TypeError("Container must be an HTMLElement");
     }
     if (typeof newHtml !== "string") {
-      throw new Error("newHtml must be a string");
+      throw new TypeError("newHtml must be a string");
     }
 
     try {
-      // Directly set new HTML, replacing any existing content
       this._tempContainer.innerHTML = newHtml;
-
       this._diff(container, this._tempContainer);
-    } catch {
-      throw new Error("Failed to patch DOM");
+    } catch (error) {
+      throw new Error(`Failed to patch DOM: ${error.message}`);
     }
   }
 
   /**
-   * Diffs two DOM trees (old and new) and applies updates to the old DOM.
-   * This method recursively compares nodes and their attributes, applying only
-   * the necessary changes to minimize DOM operations.
+   * Performs a diff between two DOM nodes and patches the old node to match the new node.
    *
    * @private
-   * @param {HTMLElement} oldParent - The original DOM element.
-   * @param {HTMLElement} newParent - The new DOM element.
+   * @param {Node} oldParent - The old parent node to be patched.
+   * @param {Node} newParent - The new parent node to compare.
    * @returns {void}
    */
   _diff(oldParent, newParent) {
-    if (oldParent.isEqualNode(newParent)) return;
-
-    const oldChildren = oldParent.childNodes;
-    const newChildren = newParent.childNodes;
-    const maxLength = Math.max(oldChildren.length, newChildren.length);
+    if (oldParent === newParent || oldParent.isEqualNode?.(newParent)) return;
 
-    for (let i = 0; i < maxLength; i++) {
-      const oldNode = oldChildren[i];
-      const newNode = newChildren[i];
+    const oldChildren = Array.from(oldParent.childNodes);
+    const newChildren = Array.from(newParent.childNodes);
+    let oldStartIdx = 0,
+      newStartIdx = 0;
+    let oldEndIdx = oldChildren.length - 1;
+    let newEndIdx = newChildren.length - 1;
+    let oldKeyMap = null;
 
-      if (oldNode?._eleva_instance) {
-        continue;
-      }
+    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+      let oldStartNode = oldChildren[oldStartIdx];
+      let newStartNode = newChildren[newStartIdx];
 
-      if (!oldNode && newNode) {
-        oldParent.appendChild(newNode.cloneNode(true));
+      if (!oldStartNode) {
+        oldStartIdx++;
         continue;
       }
-      if (oldNode && !newNode) {
-        oldParent.removeChild(oldNode);
+      if (!newStartNode) {
+        newStartIdx++;
         continue;
       }
 
-      const isSameType =
-        oldNode.nodeType === newNode.nodeType &&
-        oldNode.nodeName === newNode.nodeName;
+      if (this._keysMatch(oldStartNode, newStartNode)) {
+        this._patchNode(oldStartNode, newStartNode);
+        oldStartIdx++;
+        newStartIdx++;
+      } else {
+        oldKeyMap ??= this._createKeyMap(oldChildren, oldStartIdx, oldEndIdx);
 
-      if (!isSameType) {
-        oldParent.replaceChild(newNode.cloneNode(true), oldNode);
-        continue;
-      }
+        const newKey =
+          newStartNode.nodeType === Node.ELEMENT_NODE
+            ? newStartNode.getAttribute("key")
+            : null;
+        const moveIndex = newKey ? oldKeyMap.get(newKey) : undefined;
+        const oldNodeToMove =
+          moveIndex !== undefined ? oldChildren[moveIndex] : null;
 
-      if (oldNode.nodeType === Node.ELEMENT_NODE) {
-        const oldKey = oldNode.getAttribute("key");
-        const newKey = newNode.getAttribute("key");
+        if (oldNodeToMove) {
+          this._patchNode(oldNodeToMove, newStartNode);
+          oldParent.insertBefore(oldNodeToMove, oldStartNode);
 
-        if (oldKey !== newKey && (oldKey || newKey)) {
-          oldParent.replaceChild(newNode.cloneNode(true), oldNode);
-          continue;
+          if (moveIndex !== undefined) oldChildren[moveIndex] = null;
+        } else {
+          oldParent.insertBefore(newStartNode.cloneNode(true), oldStartNode);
         }
+        newStartIdx++;
+      }
+    }
 
-        this._updateAttributes(oldNode, newNode);
-        this._diff(oldNode, newNode);
-      } else if (
-        oldNode.nodeType === Node.TEXT_NODE &&
-        oldNode.nodeValue !== newNode.nodeValue
-      ) {
-        oldNode.nodeValue = newNode.nodeValue;
+    // Cleanup
+    if (oldStartIdx > oldEndIdx) {
+      const refNode = newChildren[newEndIdx + 1]
+        ? oldChildren[oldStartIdx]
+        : null;
+      for (let i = newStartIdx; i <= newEndIdx; i++) {
+        if (newChildren[i])
+          oldParent.insertBefore(newChildren[i].cloneNode(true), refNode);
+      }
+    } else if (newStartIdx > newEndIdx) {
+      for (let i = oldStartIdx; i <= oldEndIdx; i++) {
+        const node = oldChildren[i];
+        if (
+          node &&
+          !(node.nodeName === "STYLE" && node.hasAttribute("data-e-style"))
+        ) {
+          oldParent.removeChild(node);
+        }
       }
     }
   }
 
   /**
-   * Updates the attributes of an element to match those of a new element.
-   * Handles special cases for ARIA attributes, data attributes, and boolean properties.
+   * Checks if the node types match.
    *
    * @private
-   * @param {HTMLElement} oldEl - The element to update.
-   * @param {HTMLElement} newEl - The element providing the updated attributes.
+   * @param {Node} oldNode - The old node.
+   * @param {Node} newNode - The new node.
+   * @returns {boolean} True if the nodes match, false otherwise.
+   */
+  _keysMatch(oldNode, newNode) {
+    if (oldNode.nodeType !== Node.ELEMENT_NODE) return true;
+    const oldKey = oldNode.getAttribute("key");
+    const newKey = newNode.getAttribute("key");
+    return oldKey === newKey;
+  }
+
+  /**
+   * Patches a node.
+   *
+   * @private
+   * @param {Node} oldNode - The old node to patch.
+   * @param {Node} newNode - The new node to patch.
    * @returns {void}
    */
-  _updateAttributes(oldEl, newEl) {
-    const oldAttrs = oldEl.attributes;
-    const newAttrs = newEl.attributes;
+  _patchNode(oldNode, newNode) {
+    if (oldNode?._eleva_instance) return;
 
-    // Remove old attributes
-    for (const { name } of oldAttrs) {
-      if (!newEl.hasAttribute(name)) {
-        oldEl.removeAttribute(name);
-      }
+    if (
+      oldNode.nodeType !== newNode.nodeType ||
+      oldNode.nodeName !== newNode.nodeName
+    ) {
+      oldNode.replaceWith(newNode.cloneNode(true));
+      return;
+    }
+
+    if (oldNode.nodeType === Node.ELEMENT_NODE) {
+      const oldEl = oldNode;
+      const newEl = newNode;
+      this._updateAttributes(oldEl, newEl);
+      this._diff(oldEl, newEl);
+    } else if (
+      oldNode.nodeType === Node.TEXT_NODE &&
+      oldNode.nodeValue !== newNode.nodeValue
+    ) {
+      oldNode.nodeValue = newNode.nodeValue;
     }
+  }
 
-    // Update/add new attributes
-    for (const attr of newAttrs) {
-      const { name, value } = attr;
-      if (name.startsWith("@")) continue;
+  /**
+   * Updates the attributes of an element.
+   *
+   * @private
+   * @param {HTMLElement} oldEl - The old element to update.
+   * @param {HTMLElement} newEl - The new element to update.
+   * @returns {void}
+   */
+  _updateAttributes(oldEl, newEl) {
+    const oldAttrs = oldEl.attributes;
+    const newAttrs = newEl.attributes;
 
-      if (oldEl.getAttribute(name) === value) continue;
+    // Single pass for new/updated attributes
+    for (let i = 0; i < newAttrs.length; i++) {
+      const { name, value } = newAttrs[i];
+      if (name[0] === "@" || oldEl.getAttribute(name) === value) continue;
 
       oldEl.setAttribute(name, value);
 
-      if (name.startsWith("aria-")) {
-        const prop =
-          "aria" +
-          name.slice(5).replace(/-([a-z])/g, (_, l) => l.toUpperCase());
-        oldEl[prop] = value;
-      } else if (name.startsWith("data-")) {
+      if (name[0] === "a" && name[4] === "-") {
+        const s = name.slice(5);
+        oldEl["aria" + s.replace(CAMEL_RE, (_, l) => l.toUpperCase())] = value;
+      } else if (name[0] === "d" && name[3] === "-") {
         oldEl.dataset[name.slice(5)] = value;
       } else {
-        const prop = name.replace(/-([a-z])/g, (_, l) => l.toUpperCase());
+        const prop = name.includes("-")
+          ? name.replace(CAMEL_RE, (_, l) => l.toUpperCase())
+          : name;
+
         if (prop in oldEl) {
           const descriptor = Object.getOwnPropertyDescriptor(
             Object.getPrototypeOf(oldEl),
@@ -161,7 +234,6 @@ export class Renderer {
             typeof oldEl[prop] === "boolean" ||
             (descriptor?.get &&
               typeof descriptor.get.call(oldEl) === "boolean");
-
           if (isBoolean) {
             oldEl[prop] =
               value !== "false" &&
@@ -172,5 +244,34 @@ export class Renderer {
         }
       }
     }
+
+    // Remove any attributes no longer present
+    for (let i = oldAttrs.length - 1; i >= 0; i--) {
+      const name = oldAttrs[i].name;
+      if (!newEl.hasAttribute(name)) {
+        oldEl.removeAttribute(name);
+      }
+    }
+  }
+
+  /**
+   * Creates a key map for the children of a parent node.
+   *
+   * @private
+   * @param {Array<Node>} children - The children of the parent node.
+   * @param {number} start - The start index of the children.
+   * @param {number} end - The end index of the children.
+   * @returns {Map<string, number>} A map of key to child index.
+   */
+  _createKeyMap(children, start, end) {
+    const map = new Map();
+    for (let i = start; i <= end; i++) {
+      const child = children[i];
+      if (child?.nodeType === Node.ELEMENT_NODE) {
+        const key = child.getAttribute("key");
+        if (key) map.set(key, i);
+      }
+    }
+    return map;
   }
 }

package/src/modules/Signal.js

@@ -5,6 +5,8 @@
  * @classdesc A reactive data holder that enables fine-grained reactivity in the Eleva framework.
  * Signals notify registered watchers when their value changes, enabling efficient DOM updates
  * through targeted patching rather than full re-renders.
+ * Updates are batched using microtasks to prevent multiple synchronous notifications.
+ * The class is generic, allowing type-safe handling of any value type T.
  *
  * @example
  * const count = new Signal(0);
@@ -17,12 +19,12 @@ export class Signal {
    * Creates a new Signal instance with the specified initial value.
    *
    * @public
-   * @param {*} value - The initial value of the signal.
+   * @param {T} value - The initial value of the signal.
    */
   constructor(value) {
-    /** @private {T} Internal storage for the signal's current value, where T is the type of the initial value */
+    /** @private {T} Internal storage for the signal's current value */
     this._value = value;
-    /** @private {Set<function(T): void>} Collection of callback functions to be notified when value changes, where T is the value type */
+    /** @private {Set<(value: T) => void>} Collection of callback functions to be notified when value changes */
     this._watchers = new Set();
     /** @private {boolean} Flag to prevent multiple synchronous watcher notifications and batch updates into microtasks */
     this._pending = false;
@@ -32,7 +34,7 @@ export class Signal {
    * Gets the current value of the signal.
    *
    * @public
-   * @returns {T} The current value, where T is the type of the initial value.
+   * @returns {T} The current value.
    */
   get value() {
     return this._value;
@@ -43,7 +45,7 @@ export class Signal {
    * The notification is batched using microtasks to prevent multiple synchronous updates.
    *
    * @public
-   * @param {T} newVal - The new value to set, where T is the type of the initial value.
+   * @param {T} newVal - The new value to set.
    * @returns {void}
    */
   set value(newVal) {
@@ -58,8 +60,8 @@ export class Signal {
    * The watcher will receive the new value as its argument.
    *
    * @public
-   * @param {function(T): void} fn - The callback function to invoke on value change, where T is the value type.
-   * @returns {function(): boolean} A function to unsubscribe the watcher.
+   * @param {(value: T) => void} fn - The callback function to invoke on value change.
+   * @returns {() => boolean} A function to unsubscribe the watcher.
    * @example
    * const unsubscribe = signal.watch((value) => console.log(value));
    * // Later...
@@ -83,6 +85,7 @@ export class Signal {
 
     this._pending = true;
     queueMicrotask(() => {
+      /** @type {(fn: (value: T) => void) => void} */
       this._watchers.forEach((fn) => fn(this._value));
       this._pending = false;
     });

package/src/modules/TemplateEngine.js

@@ -14,6 +14,7 @@
 export class TemplateEngine {
   /**
    * @private {RegExp} Regular expression for matching template expressions in the format {{ expression }}
+   * @type {RegExp}
    */
   static expressionPattern = /\{\{\s*(.*?)\s*\}\}/g;
 
@@ -24,7 +25,7 @@ export class TemplateEngine {
    * @public
    * @static
    * @param {string} template - The template string to parse.
-   * @param {Object} data - The data context for evaluating expressions.
+   * @param {Record<string, unknown>} data - The data context for evaluating expressions.
    * @returns {string} The parsed template with expressions replaced by their values.
    * @example
    * const result = TemplateEngine.parse("{{user.name}} is {{user.age}} years old", {
@@ -41,12 +42,14 @@ export class TemplateEngine {
   /**
    * Evaluates an expression in the context of the provided data object.
    * Note: This does not provide a true sandbox and evaluated expressions may access global scope.
+   * The use of the `with` statement is necessary for expression evaluation but has security implications.
+   * Expressions should be carefully validated before evaluation.
    *
    * @public
    * @static
    * @param {string} expression - The expression to evaluate.
-   * @param {Object} data - The data context for evaluation.
-   * @returns {*} The result of the evaluation, or an empty string if evaluation fails.
+   * @param {Record<string, unknown>} data - The data context for evaluation.
+   * @returns {unknown} The result of the evaluation, or an empty string if evaluation fails.
    * @example
    * const result = TemplateEngine.evaluate("user.name", { user: { name: "John" } }); // Returns: "John"
    * const age = TemplateEngine.evaluate("user.age", { user: { age: 30 } }); // Returns: 30