@tkeron/html-parser 0.1.4 → 0.1.7

package/src/dom-simulator.ts

@@ -6,6 +6,11 @@ import {
   querySelectorAll as querySelectorAllFunction,
 } from "./css-selector.js";
 
+const VOID_ELEMENTS = new Set([
+  'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+  'link', 'meta', 'param', 'source', 'track', 'wbr'
+]);
+
 export const enum NodeType {
   ELEMENT_NODE = 1,
   TEXT_NODE = 3,
@@ -22,9 +27,13 @@ export function createElement(
 ): any {
   const innerHTML = "";
   const tagNameLower = tagName.toLowerCase();
-  const outerHTML = `<${tagNameLower}${Object.entries(attributes)
+  const isVoid = VOID_ELEMENTS.has(tagNameLower);
+  const attrsStr = Object.entries(attributes)
     .map(([k, v]) => ` ${k}="${v}"`)
-    .join("")}></${tagNameLower}>`;
+    .join("");
+  const initialOuterHTML = isVoid
+    ? `<${tagNameLower}${attrsStr}>`
+    : `<${tagNameLower}${attrsStr}></${tagNameLower}>`;
   const textContent = "";
 
   const element: any = {
@@ -37,7 +46,7 @@ export function createElement(
     children: [],
     textContent,
     innerHTML,
-    outerHTML,
+    _internalOuterHTML: initialOuterHTML,
     parentNode: null,
     parentElement: null,
     firstChild: null,
@@ -54,6 +63,18 @@ export function createElement(
       return child;
     },
 
+    prepend(...nodes: any[]): void {
+      prepend(element, ...nodes);
+    },
+
+    append(...nodes: any[]): void {
+      append(element, ...nodes);
+    },
+
+    remove(): void {
+      remove(element);
+    },
+
     removeChild(child: any): any {
       return removeChild(element, child);
     },
@@ -96,6 +117,10 @@ export function createElement(
       return querySelectorAllFunction(element, selector);
     },
 
+    matches(selector: string): boolean {
+      return matches(element, selector);
+    },
+
     cloneNode(deep: boolean = false): any {
       return cloneNode(element, deep);
     },
@@ -123,7 +148,6 @@ export function createElement(
     configurable: true,
   });
 
-  // Add className property
   Object.defineProperty(element, "className", {
     get() {
       return element.attributes.class || "";
@@ -135,7 +159,6 @@ export function createElement(
     configurable: true,
   });
 
-  // Add id property
   Object.defineProperty(element, "id", {
     get() {
       return element.attributes.id || "";
@@ -147,6 +170,17 @@ export function createElement(
     configurable: true,
   });
 
+  Object.defineProperty(element, "outerHTML", {
+    get() {
+      return element._internalOuterHTML || "";
+    },
+    set(value: string) {
+      setOuterHTML(element, value);
+    },
+    enumerable: true,
+    configurable: true,
+  });
+
   return element;
 }
 
@@ -163,6 +197,10 @@ export function createTextNode(content: string): any {
     lastChild: null,
     nextSibling: null,
     previousSibling: null,
+
+    remove(): void {
+      remove(textNode);
+    },
   };
   return textNode;
 }
@@ -180,6 +218,10 @@ export function createComment(content: string): any {
     lastChild: null,
     nextSibling: null,
     previousSibling: null,
+
+    remove(): void {
+      remove(commentNode);
+    },
   };
   return commentNode;
 }
@@ -213,6 +255,14 @@ export function createDocument(): any {
       return child;
     },
 
+    prepend(...nodes: any[]): void {
+      prepend(document, ...nodes);
+    },
+
+    append(...nodes: any[]): void {
+      append(document, ...nodes);
+    },
+
     removeChild(child: any): any {
       return removeChild(document, child);
     },
@@ -326,8 +376,6 @@ function convertASTNodeToDOM(astNode: ASTNode): any {
 }
 
 function appendChild(parent: any, child: any): void {
-  // Check for hierarchy request error: prevent circular references
-  // Check if parent is a descendant of child
   if (child.nodeType === NodeType.ELEMENT_NODE || child.nodeType === NodeType.DOCUMENT_NODE) {
     let ancestor = parent;
     while (ancestor) {
@@ -338,7 +386,6 @@ function appendChild(parent: any, child: any): void {
     }
   }
 
-  // Remove child from its current parent if it has one
   if (child.parentNode) {
     removeChild(child.parentNode, child);
   }
@@ -389,6 +436,83 @@ function appendChild(parent: any, child: any): void {
   }
 }
 
+function prepend(parent: any, ...nodes: any[]): void {
+  if (nodes.length === 0) return;
+
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    const node = nodes[i];
+    let childNode: any;
+
+    if (typeof node === 'string') {
+      childNode = createTextNode(node);
+    } else {
+      childNode = node;
+    }
+
+    if (parent.firstChild) {
+      insertBefore(parent, childNode, parent.firstChild);
+    } else {
+      appendChild(parent, childNode);
+    }
+  }
+}
+
+function append(parent: any, ...nodes: any[]): void {
+  if (nodes.length === 0) return;
+
+  for (const node of nodes) {
+    let childNode: any;
+
+    if (typeof node === 'string') {
+      childNode = createTextNode(node);
+    } else {
+      childNode = node;
+    }
+
+    appendChild(parent, childNode);
+  }
+}
+
+function remove(node: any): void {
+  if (node.parentNode) {
+    removeChild(node.parentNode, node);
+  }
+}
+
+function matches(element: any, selector: string): boolean {
+  if (!selector || element.nodeType !== NodeType.ELEMENT_NODE) {
+    return false;
+  }
+
+  try {
+    // Para selectores complejos con descendientes, necesitamos buscar desde un ancestro
+    if (selector.includes(' ') || selector.includes('>')) {
+      // Buscar desde la raíz del documento
+      let root = element;
+      while (root.parentNode) {
+        root = root.parentNode;
+      }
+      const results = querySelectorAllFunction(root, selector);
+      return results.includes(element);
+    }
+    
+    // Para selectores simples, usar el padre o crear uno temporal
+    const parent = element.parentNode || createTempParent(element);
+    const results = querySelectorAllFunction(parent, selector);
+    return results.includes(element);
+  } catch (error) {
+    return false;
+  }
+}
+
+function createTempParent(element: any): any {
+  const temp = createElement('div');
+  temp.childNodes.push(element);
+  temp.children.push(element);
+  element._tempParent = temp;
+  return temp;
+}
+
 function removeChild(parent: any, child: any): any {
   const index = parent.childNodes.indexOf(child);
   if (index === -1) {
@@ -411,7 +535,6 @@ function removeChild(parent: any, child: any): any {
     parent.lastChild = child.previousSibling;
   }
 
-  // Only handle element-specific relationships if parent is an element
   if (parent.nodeType === NodeType.ELEMENT_NODE && child.nodeType === NodeType.ELEMENT_NODE) {
     const childElement = child;
     const elemIndex = parent.children.indexOf(childElement);
@@ -454,19 +577,16 @@ function removeChild(parent: any, child: any): any {
 }
 
 function insertBefore(parent: any, newNode: any, referenceNode: any): any {
-  // If referenceNode is null, append to the end
   if (referenceNode === null) {
     appendChild(parent, newNode);
     return newNode;
   }
 
-  // Verify referenceNode is actually a child of parent
   const refIndex = parent.childNodes.indexOf(referenceNode);
   if (refIndex === -1) {
     throw new Error("Reference node is not a child of this node");
   }
 
-  // Check for hierarchy request error: prevent circular references
   if (newNode.nodeType === NodeType.ELEMENT_NODE || newNode.nodeType === NodeType.DOCUMENT_NODE) {
     let ancestor = parent;
     while (ancestor) {
@@ -477,16 +597,13 @@ function insertBefore(parent: any, newNode: any, referenceNode: any): any {
     }
   }
 
-  // Remove newNode from its current parent if it has one
   if (newNode.parentNode) {
     removeChild(newNode.parentNode, newNode);
   }
 
-  // Insert into childNodes
   parent.childNodes.splice(refIndex, 0, newNode);
   newNode.parentNode = parent;
 
-  // Update sibling relationships for all nodes
   newNode.previousSibling = referenceNode.previousSibling;
   newNode.nextSibling = referenceNode;
   
@@ -495,12 +612,10 @@ function insertBefore(parent: any, newNode: any, referenceNode: any): any {
   }
   referenceNode.previousSibling = newNode;
 
-  // Update firstChild if inserting at the beginning
   if (parent.firstChild === referenceNode) {
     parent.firstChild = newNode;
   }
 
-  // Handle element-specific relationships
   if (
     parent.nodeType === NodeType.ELEMENT_NODE &&
     newNode.nodeType === NodeType.ELEMENT_NODE
@@ -510,12 +625,10 @@ function insertBefore(parent: any, newNode: any, referenceNode: any): any {
 
     newElement.parentElement = parentElement;
 
-    // Find the reference node in the children array
     let refElementIndex = -1;
     if (referenceNode.nodeType === NodeType.ELEMENT_NODE) {
       refElementIndex = parentElement.children.indexOf(referenceNode);
     } else {
-      // Find the next element sibling
       let nextElement = referenceNode.nextSibling;
       while (nextElement && nextElement.nodeType !== NodeType.ELEMENT_NODE) {
         nextElement = nextElement.nextSibling;
@@ -526,14 +639,11 @@ function insertBefore(parent: any, newNode: any, referenceNode: any): any {
     }
 
     if (refElementIndex === -1) {
-      // No element siblings after, append to children
       parentElement.children.push(newElement);
     } else {
-      // Insert before the reference element
       parentElement.children.splice(refElementIndex, 0, newElement);
     }
 
-    // Update element sibling relationships
     const newElemIndex = parentElement.children.indexOf(newElement);
     newElement.previousElementSibling =
       newElemIndex > 0 ? parentElement.children[newElemIndex - 1] : null;
@@ -549,12 +659,9 @@ function insertBefore(parent: any, newNode: any, referenceNode: any): any {
       newElement.nextElementSibling.previousElementSibling = newElement;
     }
 
-    // Update firstElementChild if needed
     if (newElemIndex === 0) {
       parentElement.firstElementChild = newElement;
     }
-
-    // lastElementChild is not affected since we're inserting before
   }
 
   if (parent.nodeType === NodeType.ELEMENT_NODE) {
@@ -565,13 +672,11 @@ function insertBefore(parent: any, newNode: any, referenceNode: any): any {
 }
 
 function replaceChild(parent: any, newChild: any, oldChild: any): any {
-  // Verify oldChild is actually a child of parent
   const oldIndex = parent.childNodes.indexOf(oldChild);
   if (oldIndex === -1) {
     throw new Error("Old child is not a child of this node");
   }
 
-  // Check for hierarchy request error: prevent circular references
   if (newChild.nodeType === NodeType.ELEMENT_NODE || newChild.nodeType === NodeType.DOCUMENT_NODE) {
     let ancestor = parent;
     while (ancestor) {
@@ -582,16 +687,13 @@ function replaceChild(parent: any, newChild: any, oldChild: any): any {
     }
   }
 
-  // Remove newChild from its current parent if it has one
   if (newChild.parentNode) {
     removeChild(newChild.parentNode, newChild);
   }
 
-  // Replace in childNodes array
   parent.childNodes[oldIndex] = newChild;
   newChild.parentNode = parent;
 
-  // Transfer sibling relationships
   newChild.previousSibling = oldChild.previousSibling;
   newChild.nextSibling = oldChild.nextSibling;
 
@@ -602,7 +704,6 @@ function replaceChild(parent: any, newChild: any, oldChild: any): any {
     oldChild.nextSibling.previousSibling = newChild;
   }
 
-  // Update first/last child if needed
   if (parent.firstChild === oldChild) {
     parent.firstChild = newChild;
   }
@@ -610,20 +711,16 @@ function replaceChild(parent: any, newChild: any, oldChild: any): any {
     parent.lastChild = newChild;
   }
 
-  // Handle element-specific relationships
   if (parent.nodeType === NodeType.ELEMENT_NODE) {
     const parentElement = parent;
 
-    // Remove old element from children if it's an element
     if (oldChild.nodeType === NodeType.ELEMENT_NODE) {
       const oldElemIndex = parentElement.children.indexOf(oldChild);
       if (oldElemIndex !== -1) {
         if (newChild.nodeType === NodeType.ELEMENT_NODE) {
-          // Replace with new element
           parentElement.children[oldElemIndex] = newChild;
           newChild.parentElement = parentElement;
 
-          // Transfer element sibling relationships
           newChild.previousElementSibling = oldChild.previousElementSibling;
           newChild.nextElementSibling = oldChild.nextElementSibling;
 
@@ -641,7 +738,6 @@ function replaceChild(parent: any, newChild: any, oldChild: any): any {
             parentElement.lastElementChild = newChild;
           }
         } else {
-          // Replacing element with non-element, remove from children
           parentElement.children.splice(oldElemIndex, 1);
 
           if (oldChild.previousElementSibling) {
@@ -662,11 +758,9 @@ function replaceChild(parent: any, newChild: any, oldChild: any): any {
         }
       }
     } else if (newChild.nodeType === NodeType.ELEMENT_NODE) {
-      // Replacing non-element with element, need to insert into children array
       const newElement = newChild;
       newElement.parentElement = parentElement;
 
-      // Find correct position in children array
       let insertIndex = 0;
       for (let i = 0; i < oldIndex; i++) {
         if (parent.childNodes[i].nodeType === NodeType.ELEMENT_NODE) {
@@ -676,7 +770,6 @@ function replaceChild(parent: any, newChild: any, oldChild: any): any {
 
       parentElement.children.splice(insertIndex, 0, newElement);
 
-      // Update element sibling relationships
       newElement.previousElementSibling =
         insertIndex > 0 ? parentElement.children[insertIndex - 1] : null;
       newElement.nextElementSibling =
@@ -700,7 +793,6 @@ function replaceChild(parent: any, newChild: any, oldChild: any): any {
     }
   }
 
-  // Clear oldChild's relationships
   oldChild.parentNode = null;
   if (oldChild.nodeType === NodeType.ELEMENT_NODE) {
     oldChild.parentElement = null;
@@ -720,19 +812,16 @@ function replaceChild(parent: any, newChild: any, oldChild: any): any {
 }
 
 function insertAfter(parent: any, newNode: any, referenceNode: any): any {
-  // If referenceNode is null, insert at the beginning
   if (referenceNode === null) {
     insertBefore(parent, newNode, parent.firstChild);
     return newNode;
   }
 
-  // Verify referenceNode is actually a child of parent
   const refIndex = parent.childNodes.indexOf(referenceNode);
   if (refIndex === -1) {
     throw new Error("Reference node is not a child of this node");
   }
 
-  // Insert after means insert before the next sibling
   const nextSibling = referenceNode.nextSibling;
   return insertBefore(parent, newNode, nextSibling);
 }
@@ -762,7 +851,14 @@ function updateElementContent(element: any): void {
     .map(([k, v]) => ` ${k}="${v}"`)
     .join("");
   const tagNameLower = element.tagName.toLowerCase();
-  element.outerHTML = `<${tagNameLower}${attrs}>${innerHTML}</${tagNameLower}>`;
+  const isVoid = VOID_ELEMENTS.has(tagNameLower);
+  
+  Object.defineProperty(element, "_internalOuterHTML", {
+    value: isVoid ? `<${tagNameLower}${attrs}>` : `<${tagNameLower}${attrs}>${innerHTML}</${tagNameLower}>`,
+    writable: true,
+    enumerable: false,
+    configurable: true,
+  });
 
   const computedTextContent = getTextContent(element);
   Object.defineProperty(element, "_internalTextContent", {
@@ -772,7 +868,6 @@ function updateElementContent(element: any): void {
     configurable: true,
   });
 
-  // Propagate changes up to parent elements
   if (element.parentElement) {
     updateElementContent(element.parentElement);
   }
@@ -854,7 +949,109 @@ export function setInnerHTML(element: any, html: string): void {
     .map(([k, v]) => ` ${k}="${v}"`)
     .join("");
   const tagNameLower = element.tagName.toLowerCase();
-  element.outerHTML = `<${tagNameLower}${attrs}>${actualInnerHTML}</${tagNameLower}>`;
+  const isVoid = VOID_ELEMENTS.has(tagNameLower);
+  
+  Object.defineProperty(element, "_internalOuterHTML", {
+    value: isVoid ? `<${tagNameLower}${attrs}>` : `<${tagNameLower}${attrs}>${actualInnerHTML}</${tagNameLower}>`,
+    writable: true,
+    enumerable: false,
+    configurable: true,
+  });
+}
+
+export function setOuterHTML(element: any, html: string): void {
+  if (!element.parentNode) {
+    throw new Error("Cannot set outerHTML on element without a parent");
+  }
+
+  const parent = element.parentNode;
+  const indexInParent = parent.childNodes.indexOf(element);
+  
+  if (indexInParent === -1) {
+    throw new Error("Element not found in parent's childNodes");
+  }
+
+  let newNodes: any[] = [];
+  
+  if (html.trim()) {
+    const tokens = tokenize(html);
+    const ast = parse(tokens);
+    
+    if (ast.children) {
+      for (const child of ast.children) {
+        const domChild = convertASTNodeToDOM(child);
+        if (domChild) {
+          newNodes.push(domChild);
+        }
+      }
+    }
+  }
+
+  const previousSibling = element.previousSibling;
+  const nextSibling = element.nextSibling;
+
+  parent.childNodes.splice(indexInParent, 1);
+
+  if (newNodes.length > 0) {
+    parent.childNodes.splice(indexInParent, 0, ...newNodes);
+
+    for (const newNode of newNodes) {
+      newNode.parentNode = parent;
+      newNode.parentElement = parent.nodeType === NodeType.ELEMENT_NODE ? parent : null;
+    }
+
+    for (let i = 0; i < newNodes.length; i++) {
+      const currentNode = newNodes[i];
+      
+      if (i === 0) {
+        currentNode.previousSibling = previousSibling;
+        if (previousSibling) {
+          previousSibling.nextSibling = currentNode;
+        }
+      } else {
+        currentNode.previousSibling = newNodes[i - 1];
+      }
+
+      if (i === newNodes.length - 1) {
+        currentNode.nextSibling = nextSibling;
+        if (nextSibling) {
+          nextSibling.previousSibling = currentNode;
+        }
+      } else {
+        currentNode.nextSibling = newNodes[i + 1];
+      }
+    }
+  } else {
+    if (previousSibling) {
+      previousSibling.nextSibling = nextSibling;
+    }
+    if (nextSibling) {
+      nextSibling.previousSibling = previousSibling;
+    }
+  }
+
+  element.parentNode = null;
+  element.parentElement = null;
+  element.previousSibling = null;
+  element.nextSibling = null;
+
+  parent.children = parent.childNodes.filter(
+    (child: any) => child.nodeType === NodeType.ELEMENT_NODE
+  );
+
+  parent.firstChild = parent.childNodes.length > 0 ? parent.childNodes[0] : null;
+  parent.lastChild = parent.childNodes.length > 0 ? parent.childNodes[parent.childNodes.length - 1] : null;
+
+  parent.firstElementChild = parent.children.length > 0 ? parent.children[0] : null;
+  parent.lastElementChild = parent.children.length > 0 ? parent.children[parent.children.length - 1] : null;
+
+  for (let i = 0; i < parent.children.length; i++) {
+    const child = parent.children[i];
+    child.previousElementSibling = i > 0 ? parent.children[i - 1] : null;
+    child.nextElementSibling = i < parent.children.length - 1 ? parent.children[i + 1] : null;
+  }
+
+  updateElementContent(parent);
 }
 
 function setTextContent(element: any, text: string): void {

package/src/parser.ts

@@ -314,42 +314,3 @@ function shouldSkipWhitespace(parent: ASTNode): boolean {
 
   return parent.tagName ? skipWhitespaceIn.has(parent.tagName) : false;
 }
-
-export function traverseAST(node: ASTNode, callback: (node: ASTNode) => void): void {
-  callback(node);
-  
-  if (node.children) {
-    for (const child of node.children) {
-      traverseAST(child, callback);
-    }
-  }
-}
-
-export function findNodesByTagName(root: ASTNode, tagName: string): ASTNode[] {
-  const results: ASTNode[] = [];
-  
-  traverseAST(root, (node) => {
-    if (node.type === ASTNodeType.ELEMENT && node.tagName === tagName.toLowerCase()) {
-      results.push(node);
-    }
-  });
-
-  return results;
-}
-
-export function findNodesByAttribute(root: ASTNode, attrName: string, attrValue?: string): ASTNode[] {
-  const results: ASTNode[] = [];
-  
-  traverseAST(root, (node) => {
-    if (node.type === ASTNodeType.ELEMENT && node.attributes) {
-      const hasAttr = attrName in node.attributes;
-      const valueMatches = attrValue === undefined || node.attributes[attrName] === attrValue;
-      
-      if (hasAttr && valueMatches) {
-        results.push(node);
-      }
-    }
-  });
-
-  return results;
-}