@tkeron/html-parser 0.1.4 → 0.1.5

package/README.md

@@ -21,19 +21,19 @@ A fast and lightweight HTML parser for Bun that converts HTML strings into DOM D
 Once published, it will be available as:
 
 ```bash
-npm install html-parser
+npm install @tkeron/html-parser
 ```
 
 Or with Bun:
 
 ```bash
-bun add html-parser
+bun add @tkeron/html-parser
 ```
 
 ## Usage
 
 ```typescript
-import { parseHTML } from "html-parser";
+import { parseHTML } from "@tkeron/html-parser";
 
 // Parse HTML string into DOM Document
 const html =
@@ -51,7 +51,7 @@ console.log(heading); // "Hello World"
 ### Simple Example
 
 ```typescript
-import { parseHTML } from "html-parser";
+import { parseHTML } from "@tkeron/html-parser";
 
 const html = `
   <div class="container">
@@ -117,4 +117,4 @@ MIT
 
 ## Support
 
-If you encounter any issues or have questions, please file an issue on the [GitHub repository](https://github.com/yourusername/html-parser).
+If you encounter any issues or have questions, please file an issue on the [GitHub repository](https://github.com/tkeron/html-parser).

package/index.ts

@@ -4,11 +4,6 @@ import {
   astToDOM,
 } from './src/dom-simulator.js';
 
-/**
- * Parse HTML string into Document object
- * @param html The HTML string to parse
- * @returns A Document object
- */
 export function parseHTML(html: string = ""): Document {
   const tokens = tokenize(html);
   const ast = parse(tokens);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tkeron/html-parser",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "A fast and lightweight HTML parser for Bun",
   "main": "index.js",
   "module": "index.ts",

package/src/css-selector.ts

@@ -21,18 +21,15 @@ function parseSelector(selector: string): SelectorGroup[] {
     } else if (trimmed.startsWith(".")) {
       tokens = [{ type: "class", value: trimmed.slice(1) }];
     } else if (trimmed.includes("[") && trimmed.includes("]")) {
-      // Handle attribute selectors like input[type="email"], meta[charset], or [role="button"]
       const attributeMatch = trimmed.match(/^([^[\]]*)\[([^=\]]+)(?:=["']?([^"'\]]*?)["']?)?\]$/);
       if (attributeMatch) {
         const [, tagName, attrName, attrValue] = attributeMatch;
         tokens = [];
         
-        // Add tag token if there's a tag name
         if (tagName && tagName.trim()) {
           tokens.push({ type: "tag", value: tagName.trim().toLowerCase() });
         }
         
-        // Add attribute token
         tokens.push({ 
           type: "attribute", 
           value: (attrName || "").trim(),
@@ -67,11 +64,9 @@ function matchesToken(element: any, token: SelectorToken): boolean {
       return element.attributes?.id === token.value;
     case "attribute":
       const attrValue = element.attributes?.[token.attributeName || ""];
-      // If no attribute value specified in selector, just check if attribute exists
       if (token.attributeValue === undefined) {
         return attrValue !== undefined;
       }
-      // Otherwise check for exact match
       return attrValue === token.attributeValue;
     default:
       return false;

package/src/dom-simulator.ts

@@ -22,7 +22,7 @@ export function createElement(
 ): any {
   const innerHTML = "";
   const tagNameLower = tagName.toLowerCase();
-  const outerHTML = `<${tagNameLower}${Object.entries(attributes)
+  const initialOuterHTML = `<${tagNameLower}${Object.entries(attributes)
     .map(([k, v]) => ` ${k}="${v}"`)
     .join("")}></${tagNameLower}>`;
   const textContent = "";
@@ -37,7 +37,7 @@ export function createElement(
     children: [],
     textContent,
     innerHTML,
-    outerHTML,
+    _internalOuterHTML: initialOuterHTML,
     parentNode: null,
     parentElement: null,
     firstChild: null,
@@ -123,7 +123,6 @@ export function createElement(
     configurable: true,
   });
 
-  // Add className property
   Object.defineProperty(element, "className", {
     get() {
       return element.attributes.class || "";
@@ -135,7 +134,6 @@ export function createElement(
     configurable: true,
   });
 
-  // Add id property
   Object.defineProperty(element, "id", {
     get() {
       return element.attributes.id || "";
@@ -147,6 +145,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;
 }
 
@@ -326,8 +335,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 +345,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);
   }
@@ -411,7 +417,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 +459,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 +479,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 +494,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 +507,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 +521,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 +541,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 +554,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 +569,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 +586,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 +593,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 +620,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 +640,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 +652,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 +675,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 +694,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 +733,13 @@ function updateElementContent(element: any): void {
     .map(([k, v]) => ` ${k}="${v}"`)
     .join("");
   const tagNameLower = element.tagName.toLowerCase();
-  element.outerHTML = `<${tagNameLower}${attrs}>${innerHTML}</${tagNameLower}>`;
+  
+  Object.defineProperty(element, "_internalOuterHTML", {
+    value: `<${tagNameLower}${attrs}>${innerHTML}</${tagNameLower}>`,
+    writable: true,
+    enumerable: false,
+    configurable: true,
+  });
 
   const computedTextContent = getTextContent(element);
   Object.defineProperty(element, "_internalTextContent", {
@@ -772,7 +749,6 @@ function updateElementContent(element: any): void {
     configurable: true,
   });
 
-  // Propagate changes up to parent elements
   if (element.parentElement) {
     updateElementContent(element.parentElement);
   }
@@ -854,7 +830,108 @@ 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}>`;
+  
+  Object.defineProperty(element, "_internalOuterHTML", {
+    value: `<${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/tokenizer.ts

@@ -44,9 +44,6 @@ const HTML_ENTITIES: Record<string, string> = {
   '&not;': '¬'
 };
 
-/**
- * Decode HTML entities in a string and handle null characters
- */
 function decodeEntities(text: string): string {
   let result = text.replace(/\u0000/g, '\uFFFD');
   
@@ -78,9 +75,6 @@ function decodeEntities(text: string): string {
   });
 }
 
-/**
- * Parse attributes from a tag string
- */
 function parseAttributes(attributeString: string): Record<string, string> {
   const attributes: Record<string, string> = {};
   
@@ -98,9 +92,6 @@ function parseAttributes(attributeString: string): Record<string, string> {
   return attributes;
 }
 
-/**
- * Calculate position in text
- */
 function calculatePosition(text: string, offset: number): Position {
   const lines = text.slice(0, offset).split('\n');
   return {
@@ -110,10 +101,6 @@ function calculatePosition(text: string, offset: number): Position {
   };
 }
 
-/**
- * Tokenize HTML using a combination of HTMLRewriter and manual parsing
- * HTMLRewriter is great for structured HTML but we need manual parsing for edge cases
- */
 export function tokenize(html: string): Token[] {
   const tokens: Token[] = [];
   let position = 0;
@@ -254,10 +241,8 @@ export function tokenize(html: string): Token[] {
     }
   }
   
-  // Sort tokens by position
   tokens.sort((a, b) => a.position.offset - b.position.offset);
   
-  // Add EOF token
   tokens.push({
     type: TokenType.EOF,
     value: '',
@@ -285,7 +270,6 @@ export function tokenizeWithRewriter(html: string): Token[] {
         textBuffer = '';
       }
       
-      // Add opening tag
       const attributes: Record<string, string> = {};
       for (const [name, value] of element.attributes) {
         attributes[name] = value;
@@ -325,14 +309,12 @@ export function tokenizeWithRewriter(html: string): Token[] {
   });
   
   try {
-    // Transform the HTML (this triggers the rewriter)
     const response = new Response(html, {
       headers: { 'Content-Type': 'text/html' }
     });
     
     rewriter.transform(response);
     
-    // Flush any remaining text
     if (textBuffer.trim()) {
       tokens.push({
         type: TokenType.TEXT,
@@ -342,12 +324,10 @@ export function tokenizeWithRewriter(html: string): Token[] {
     }
     
   } catch (error) {
-    // If HTMLRewriter fails, fall back to manual parsing
     console.warn('HTMLRewriter failed, falling back to manual parsing:', error);
     return tokenize(html);
   }
   
-  // Sort tokens by position and add EOF
   tokens.sort((a, b) => a.position.offset - b.position.offset);
   tokens.push({
     type: TokenType.EOF,

package/tests/advanced.test.ts

@@ -28,14 +28,14 @@ describe('HTML Parser & Tokenizer - Advanced Tests', () => {
     });
 
     test('should handle unicode characters', () => {
-      const tokens = tokenize('<div title="测试" data-emoji="🚀" class="café">');
+      const tokens = tokenize('<div title="测试" data-emoji="🚀" class="lorem">');
       expect(tokens.length).toBeGreaterThan(0);
       const tag = tokens[0]!;
       
       expect(tag.attributes).toEqual({
         title: '测试',
         'data-emoji': '🚀',
-        class: 'café'
+        class: 'lorem'
       });
     });