coralite 0.36.2 → 0.37.0

package/dist/lib/coralite-element.js

@@ -1,483 +1,35 @@
-// lib/utils.js
-import { parse as parseJS } from "acorn";
-import { simple as walkJS } from "acorn-walk";
-import render from "dom-serializer";
-import { sanitize } from "isomorphic-dompurify";
-
-// lib/parse.js
-import { Parser } from "htmlparser2";
-
-// lib/dom.js
-var ELEMENT_NODE = 1;
-var TEXT_NODE = 3;
-var COMMENT_NODE = 8;
-var DOCUMENT_NODE = 9;
-var DOCUMENT_TYPE_NODE = 10;
-var nodeTypes = {
-  tag: ELEMENT_NODE,
-  script: ELEMENT_NODE,
-  style: ELEMENT_NODE,
-  text: TEXT_NODE,
-  comment: COMMENT_NODE,
-  root: DOCUMENT_NODE,
-  directive: DOCUMENT_TYPE_NODE
-};
-function CoraliteNodeConstructor(node) {
-  for (const key in node) {
-    if (["parent", "prev", "next", "slots"].includes(key)) {
-      Object.defineProperty(this, key, {
-        value: node[key],
-        enumerable: false,
-        writable: true,
-        configurable: true
-      });
-    } else {
-      this[key] = node[key];
-    }
-  }
-}
-function makeCircularPropertiesNonEnumerable(node) {
-  for (const key of ["parent", "prev", "next", "slots"]) {
-    if (Object.hasOwn(node, key)) {
-      const value = node[key];
-      delete node[key];
-      Object.defineProperty(node, key, {
-        value,
-        enumerable: false,
-        writable: true,
-        configurable: true
-      });
-    }
-  }
-}
-Object.defineProperties(CoraliteNodeConstructor.prototype, {
-  nodeType: {
-    /**
-     * Returns an integer identifying the type of the node.
-     * @returns {number}
-     */
-    get() {
-      return nodeTypes[this.type] || ELEMENT_NODE;
-    }
-  },
-  parentNode: {
-    /**
-     * Returns the parent of the specified node in the DOM tree.
-     * @returns {CoraliteAnyNode | CoraliteComponentRoot}
-     */
-    get() {
-      return this.parent;
-    },
-    /**
-     * Sets the parent of the node.
-     * @param {CoraliteAnyNode | CoraliteComponentRoot} value - The parent node to set
-     */
-    set(value) {
-      this.parent = value;
-    }
-  },
-  parentElement: {
-    /**
-     * Returns the DOM node's parent Element, or null if the node either has no parent, or its parent isn't a DOM Element.
-     * @returns {CoraliteAnyNode | CoraliteComponentRoot}
-     */
-    get() {
-      return this.parent;
-    },
-    /**
-     * Sets the parent element of the node.
-     * @param {CoraliteAnyNode | CoraliteComponentRoot} value - The parent element to set
-     */
-    set(value) {
-      this.parent = value;
-    }
-  },
-  previousSibling: {
-    /**
-     * Returns the node immediately preceding the specified one in its parent's childNodes list, or null if the specified node is the first in that list.
-     * @returns {CoraliteAnyNode | null}
-     */
-    get() {
-      if (!this.parent || !this.parent.children) {
-        return null;
-      }
-      const index = this.parent.children.indexOf(this);
-      return index > 0 ? this.parent.children[index - 1] : null;
-    }
-  },
-  nextSibling: {
-    /**
-     * Returns the node immediately following the specified one in its parent's childNodes list, or null if the specified node is the last node in that list.
-     * @returns {CoraliteAnyNode | null}
-     */
-    get() {
-      if (!this.parent || !this.parent.children) {
-        return null;
-      }
-      const index = this.parent.children.indexOf(this);
-      return index > -1 && index < this.parent.children.length - 1 ? this.parent.children[index + 1] : null;
-    }
-  }
-});
-function CoraliteElementConstructor(node) {
-  CoraliteNodeConstructor.call(this, node);
-}
-CoraliteElementConstructor.prototype = Object.create(CoraliteNodeConstructor.prototype);
-CoraliteElementConstructor.prototype.constructor = CoraliteElementConstructor;
-Object.defineProperties(CoraliteElementConstructor.prototype, {
-  nodeName: {
-    /**
-     * Returns the name of the node (uppercase tag name for elements).
-     * @returns {string}
-     */
-    get() {
-      return this.name.toUpperCase();
-    }
-  },
-  tagName: {
-    /**
-     * Returns the tag name of the element (uppercase).
-     * @returns {string}
-     */
-    get() {
-      return this.name.toUpperCase();
-    },
-    /**
-     * Sets the tag name of the element (converted to lowercase).
-     * @param {string} value - The tag name to set
-     */
-    set(value) {
-      this.name = value.toLowerCase();
-    }
-  },
-  nodeValue: {
-    /**
-     * Returns null for elements.
-     * @returns {null}
-     */
-    get() {
-      return null;
-    },
-    /**
-     * Setting nodeValue on an element has no effect.
-     */
-    set(value) {
-    }
-  },
-  attributes: {
-    /**
-     * Returns a collection of the element's attributes.
-     * @returns {Object.<string, string>}
-     */
-    get() {
-      return this.attribs;
-    },
-    /**
-     * Sets the attributes of the element.
-     * @param {Object.<string, string>} value - The attributes object to set
-     */
-    set(value) {
-      this.attribs = value;
-    }
-  },
-  childNodes: {
-    /**
-     * Returns a live collection of child nodes of the given element.
-     * @returns {CoraliteAnyNode[]}
-     */
-    get() {
-      return this.children || [];
-    },
-    /**
-     * Sets the child nodes of the element.
-     * @param {CoraliteAnyNode[]} value - The array of child nodes to set
-     */
-    set(value) {
-      this.children = value;
-    }
-  },
-  firstChild: {
-    /**
-     * Returns the node's first child in the tree, or null if the node has no children.
-     * @returns {CoraliteAnyNode | null}
-     */
-    get() {
-      return this.children && this.children.length > 0 ? this.children[0] : null;
-    }
-  },
-  lastChild: {
-    /**
-     * Returns the last child of the node, or null if there are no child nodes.
-     * @returns {CoraliteAnyNode | null}
-     */
-    get() {
-      return this.children && this.children.length > 0 ? this.children[this.children.length - 1] : null;
-    }
-  },
-  textContent: {
-    /**
-     * Returns the text content of the node and its descendants.
-     * @returns {string}
-     */
-    get() {
-      if (this.children) {
-        return this.children.map((child) => child.textContent).join("");
-      }
-      return "";
-    },
-    /**
-     * Sets the text content of the node. Replaces all children with a single text node.
-     * @param {string} value - The text content to set
-     */
-    set(value) {
-      const textNode = createCoraliteTextNode({
-        type: "text",
-        data: value,
-        parent: this
-      });
-      this.children = [textNode];
-    }
-  },
-  id: {
-    /**
-     * Returns the element's ID attribute.
-     * @returns {string}
-     */
-    get() {
-      return this.attribs ? this.attribs.id : "";
-    },
-    /**
-     * Sets the element's ID attribute.
-     * @param {string} value - The ID to set
-     */
-    set(value) {
-      if (this.attribs) {
-        this.attribs.id = value;
-      }
-    }
-  },
-  className: {
-    /**
-     * Returns the element's class attribute.
-     * @returns {string}
-     */
-    get() {
-      return this.attribs ? this.attribs.class : "";
-    },
-    /**
-     * Sets the element's class attribute.
-     * @param {string} value - The class names to set
-     */
-    set(value) {
-      if (this.attribs) {
-        this.attribs.class = value;
-      }
-    }
-  }
-});
-function CoraliteTextNodeConstructor(node) {
-  CoraliteNodeConstructor.call(this, node);
-}
-CoraliteTextNodeConstructor.prototype = Object.create(CoraliteNodeConstructor.prototype);
-CoraliteTextNodeConstructor.prototype.constructor = CoraliteTextNodeConstructor;
-Object.defineProperties(CoraliteTextNodeConstructor.prototype, {
-  nodeName: {
-    /**
-     * Returns the name of the node (#text).
-     * @returns {string}
-     */
-    get() {
-      return "#text";
-    }
-  },
-  nodeValue: {
-    /**
-     * Returns the text content of the node.
-     * @returns {string}
-     */
-    get() {
-      return this.data;
-    },
-    /**
-     * Sets the text content of the node.
-     * @param {string} value - The text content to set
-     */
-    set(value) {
-      this.data = value;
-    }
-  },
-  textContent: {
-    /**
-     * Returns the text content of the node.
-     * @returns {string}
-     */
-    get() {
-      return this.data;
-    },
-    /**
-     * Sets the text content of the node.
-     * @param {string} value - The text content to set
-     */
-    set(value) {
-      this.data = value;
-    }
-  }
-});
-function createCoraliteTextNode(node) {
-  makeCircularPropertiesNonEnumerable(node);
-  Object.setPrototypeOf(node, CoraliteTextNodeConstructor.prototype);
-  return node;
-}
-function CoraliteCommentConstructor(node) {
-  CoraliteNodeConstructor.call(this, node);
-}
-CoraliteCommentConstructor.prototype = Object.create(CoraliteNodeConstructor.prototype);
-CoraliteCommentConstructor.prototype.constructor = CoraliteCommentConstructor;
-Object.defineProperties(CoraliteCommentConstructor.prototype, {
-  nodeName: {
-    /**
-     * Returns the name of the node (#comment).
-     * @returns {string}
-     */
-    get() {
-      return "#comment";
-    }
-  },
-  nodeValue: {
-    /**
-     * Returns the content of the comment.
-     * @returns {string}
-     */
-    get() {
-      return this.data;
-    },
-    /**
-     * Sets the content of the comment.
-     * @param {string} value - The content to set
-     */
-    set(value) {
-      this.data = value;
-    }
-  },
-  textContent: {
-    /**
-     * Returns the content of the comment.
-     * @returns {string}
-     */
-    get() {
-      return this.data;
-    },
-    /**
-     * Sets the content of the comment.
-     * @param {string} value - The content to set
-     */
-    set(value) {
-      this.data = value;
-    }
-  }
-});
-function CoraliteDirectiveConstructor(node) {
-  CoraliteNodeConstructor.call(this, node);
-}
-CoraliteDirectiveConstructor.prototype = Object.create(CoraliteNodeConstructor.prototype);
-CoraliteDirectiveConstructor.prototype.constructor = CoraliteDirectiveConstructor;
-Object.defineProperties(CoraliteDirectiveConstructor.prototype, {
-  nodeName: {
-    /**
-     * Returns the name of the directive (e.g., !DOCTYPE).
-     * @returns {string}
-     */
-    get() {
-      return this.name;
-    }
-  },
-  nodeValue: {
-    /**
-     * Returns the content of the directive.
-     * @returns {string}
-     */
-    get() {
-      return this.data;
-    },
-    /**
-     * Sets the content of the directive.
-     * @param {string} value - The content to set
-     */
-    set(value) {
-      this.data = value;
-    }
-  }
-});
-function CoraliteComponentConstructor(node) {
-  CoraliteNodeConstructor.call(this, node);
-}
-CoraliteComponentConstructor.prototype = Object.create(CoraliteNodeConstructor.prototype);
-CoraliteComponentConstructor.prototype.constructor = CoraliteComponentConstructor;
-Object.defineProperties(CoraliteComponentConstructor.prototype, {
-  nodeName: {
-    /**
-     * Returns the name of the node (#document).
-     * @returns {string}
-     */
-    get() {
-      return "#document";
-    }
-  },
-  nodeValue: {
-    /**
-     * Returns null for document nodes.
-     * @returns {null}
-     */
-    get() {
-      return null;
-    }
-  },
-  childNodes: {
-    /**
-     * Returns a live collection of child nodes of the document.
-     * @returns {CoraliteAnyNode[]}
-     */
-    get() {
-      return this.children || [];
-    },
-    /**
-     * Sets the child nodes of the document.
-     * @param {CoraliteAnyNode[]} value - The array of child nodes to set
-     */
-    set(value) {
-      this.children = value;
-    }
-  },
-  firstChild: {
-    /**
-     * Returns the document's first child in the tree, or null if the document has no children.
-     * @returns {CoraliteAnyNode | null}
-     */
-    get() {
-      return this.children && this.children.length > 0 ? this.children[0] : null;
-    }
-  },
-  lastChild: {
-    /**
-     * Returns the last child of the document, or null if there are no child nodes.
-     * @returns {CoraliteAnyNode | null}
-     */
-    get() {
-      return this.children && this.children.length > 0 ? this.children[this.children.length - 1] : null;
-    }
-  },
-  textContent: {
-    /**
-     * Returns null for document nodes.
-     * @returns {null}
-     */
-    get() {
-      return null;
+// lib/utils/errors.js
+var CoraliteError = class extends Error {
+  /**
+   * @param {string} message - The error message.
+   * @param {Object} [options] - Additional options for the error.
+   * @param {string} [options.componentId] - The ID of the component where the error occurred.
+   * @param {string} [options.filePath] - The path to the file where the error occurred.
+   * @param {string} [options.instanceId] - The unique ID of the component instance.
+   * @param {string} [options.pagePath] - The path to the page being rendered.
+   * @param {number} [options.line] - The line number where the error occurred.
+   * @param {number} [options.column] - The column number where the error occurred.
+   * @param {string} [options.stackFile] - The file name from the stack trace.
+   * @param {Error} [options.cause] - The original error that caused this error.
+   */
+  constructor(message, options = {}) {
+    super(message, options);
+    this.name = "CoraliteError";
+    this.isCoraliteError = true;
+    this.componentId = options.componentId;
+    this.filePath = options.filePath;
+    this.instanceId = options.instanceId;
+    this.pagePath = options.pagePath;
+    this.line = options.line;
+    this.column = options.column;
+    this.stackFile = options.stackFile;
+    if (options.cause && !this.cause) {
+      this.cause = options.cause;
     }
   }
-});
+};
 
-// lib/utils.js
+// lib/utils/core.js
 function createReadOnlyProxy(target, proxies = /* @__PURE__ */ new WeakMap()) {
   if (proxies.has(target)) {
     return proxies.get(target);
@@ -491,10 +43,10 @@ function createReadOnlyProxy(target, proxies = /* @__PURE__ */ new WeakMap()) {
       return value;
     },
     set() {
-      throw new Error("Coralite Error: Cannot mutate state inside a getter. State is read-only here.");
+      throw new CoraliteError("Cannot mutate state inside a getter. State is read-only here.");
     },
     deleteProperty() {
-      throw new Error("Coralite Error: Cannot delete state inside a getter. State is read-only here.");
+      throw new CoraliteError("Cannot delete state inside a getter. State is read-only here.");
     }
   };
   const proxy = new Proxy(target, handler);
@@ -503,7 +55,7 @@ function createReadOnlyProxy(target, proxies = /* @__PURE__ */ new WeakMap()) {
 }
 
 // lib/coralite-element.js
-var BOOLEAN_ATTRIBUTES2 = /* @__PURE__ */ new Set([
+var BOOLEAN_ATTRIBUTES = /* @__PURE__ */ new Set([
   "allowfullscreen",
   "async",
   "autofocus",
@@ -619,6 +171,7 @@ var CoraliteElement = class extends HTMLElement {
    * Invoked natively when the element is removed from the document.
    * Aborts pending requests and triggers `onDisconnected` plugin hooks
    * to ensure external libraries (e.g., Observers) do not cause memory leaks.
+   * @this {any}
    */
   disconnectedCallback() {
     if (this._abortController) {
@@ -658,6 +211,7 @@ var CoraliteElement = class extends HTMLElement {
    * Constructs the unified state object.
    * Merges `defaultValues`, JSON hydration payloads, and DOM attributes.
    * Defines getters (wrapping state in a Read-Only proxy) and applies the final Read/Write Proxy.
+   * @this {any}
    * @private
    */
   _setupState() {
@@ -665,11 +219,18 @@ var CoraliteElement = class extends HTMLElement {
     const target = { ...options.defaultValues };
     const refs = [];
     if (options.hydrationMap && options.hydrationMap.refs) {
-      for (const item of options.hydrationMap.refs) {
-        const node = this.getNodeByPath(item.path);
+      for (const ref of options.hydrationMap.refs) {
+        const uniqueRefValue = `${this._instanceId}__${ref.name}`;
+        if (!target[`ref_${ref.name}`]) {
+          target[`ref_${ref.name}`] = uniqueRefValue;
+        }
+        const node = this.getNodeByPath(ref.path);
         if (node) {
+          if (node.setAttribute) {
+            node.setAttribute("ref", uniqueRefValue);
+          }
           refs.push({
-            name: item.name,
+            name: ref.name,
             element: node
           });
         }
@@ -692,7 +253,7 @@ var CoraliteElement = class extends HTMLElement {
         if (allData[this._instanceId]) {
           Object.assign(target, allData[this._instanceId]);
         }
-      } catch (e) {
+      } catch {
         console.error("Coralite Element hydration failed:", this._instanceId);
       }
     }
@@ -814,6 +375,7 @@ var CoraliteElement = class extends HTMLElement {
    * **Async Safety:** Implements a Symbol-based locking mechanism (`renderVersion`)
    * to guarantee that if state mutates while an async getter is pending, the stale
    * Promise will be discarded, preventing DOM race conditions.
+   * @this {any}
    * @private
    */
   _updateDOM() {
@@ -857,7 +419,7 @@ var CoraliteElement = class extends HTMLElement {
           }
         } else if (binding.type === "attribute") {
           const element = binding.node;
-          if (BOOLEAN_ATTRIBUTES2.has(binding.name)) {
+          if (BOOLEAN_ATTRIBUTES.has(binding.name)) {
             const isFalsy = hydratedValue === "" || hydratedValue === "false" || hydratedValue === "null" || hydratedValue === "0" || hydratedValue === "undefined";
             if (isFalsy) {
               element.removeAttribute(binding.name);
@@ -919,6 +481,13 @@ var CoraliteElement = class extends HTMLElement {
           slotEl._originalNodes = Array.from(slotEl.childNodes).map((n) => n.cloneNode(true));
         }
         const result = slotFn(slotEl._originalNodes, this._state);
+        if (result === void 0) {
+          return;
+        }
+        if (result === null || result === "" || Array.isArray(result) && result.length === 0) {
+          slotEl.innerHTML = "";
+          return;
+        }
         if (typeof result === "string") {
           slotEl.innerHTML = result;
         } else if (Array.isArray(result)) {
@@ -935,11 +504,19 @@ var CoraliteElement = class extends HTMLElement {
    * @private
    */
   async _init(isImperative = false) {
+    const self = this;
     const localContext = {
       instanceId: this._instanceId,
       state: this._state,
       root: this,
-      signal: this._abortController.signal
+      signal: this._abortController.signal,
+      refs(id) {
+        const refId = self._state[`ref_${id}`];
+        if (!refId && typeof refId !== "string") {
+          return null;
+        }
+        return self.querySelector(`[ref="${refId}"]`);
+      }
     };
     if (typeof this._clientContextGetter === "function") {
       const pluginContext = await this._clientContextGetter(localContext);