@tkeron/html-parser 0.1.7 → 1.1.0

package/tests/dom-extended.test.ts

@@ -8,28 +8,28 @@ describe('DOM Extended Functionality', () => {
   describe('innerHTML and outerHTML', () => {
     it('should generate correct innerHTML for simple elements', () => {
       const doc = parseHTML('<div>Hello World</div>') as Document;
-      const div = doc.childNodes[0] as HTMLElement;
+      const div = doc.body?.firstChild as HTMLElement;
 
       expect(div.innerHTML).toBe('Hello World');
     });
 
     it('should generate correct innerHTML for nested elements', () => {
       const doc = parseHTML('<div><p>Hello</p><span>World</span></div>') as Document;
-      const div = doc.childNodes[0] as HTMLElement;
+      const div = doc.body?.firstChild as HTMLElement;
 
       expect(div.innerHTML).toBe('<p>Hello</p><span>World</span>');
     });
 
     it('should generate correct outerHTML for elements', () => {
       const doc = parseHTML('<div class="test">Hello</div>') as Document;
-      const div = doc.childNodes[0] as HTMLElement;
+      const div = doc.body?.firstChild as HTMLElement;
 
       expect(div.outerHTML).toBe('<div class="test">Hello</div>');
     });
 
     it('should generate correct outerHTML for elements with multiple attributes', () => {
       const doc = parseHTML('<input type="text" name="username" value="test">') as Document;
-      const input = doc.childNodes[0] as HTMLElement;
+      const input = doc.body?.firstChild as HTMLElement;
 
       expect(input.outerHTML).toContain('type="text"');
       expect(input.outerHTML).toContain('name="username"');
@@ -38,7 +38,7 @@ describe('DOM Extended Functionality', () => {
 
     it('should handle comments in innerHTML', () => {
       const doc = parseHTML('<div><!-- comment -->text</div>') as Document;
-      const div = doc.childNodes[0] as HTMLElement;
+      const div = doc.body?.firstChild as HTMLElement;
 
       expect(div.innerHTML).toBe('<!-- comment -->text');
     });
@@ -47,21 +47,21 @@ describe('DOM Extended Functionality', () => {
   describe('textContent property', () => {
     it('should provide textContent on elements', () => {
       const doc = parseHTML('<div>Hello <span>World</span></div>') as Document;
-      const div = doc.childNodes[0] as HTMLElement;
+      const div = doc.body?.firstChild as HTMLElement;
 
       expect(div.textContent).toBe('Hello World');
     });
 
     it('should provide textContent for deeply nested elements', () => {
       const doc = parseHTML('<div><p><em>Hello</em> <strong>Beautiful</strong></p> <span>World</span></div>') as Document;
-      const div = doc.childNodes[0] as HTMLElement;
+      const div = doc.body?.firstChild as HTMLElement;
 
       expect(div.textContent).toBe('Hello Beautiful World');
     });
 
     it('should ignore comments in textContent', () => {
       const doc = parseHTML('<div>Hello <!-- comment --> World</div>') as Document;
-      const div = doc.childNodes[0] as HTMLElement;
+      const div = doc.body?.firstChild as HTMLElement;
 
       expect(div.textContent).toBe('Hello  World');
     });
@@ -70,7 +70,7 @@ describe('DOM Extended Functionality', () => {
   describe('element navigation properties', () => {
     it('should provide parentElement property', () => {
       const doc = parseHTML('<div><p>Hello</p></div>') as Document;
-      const div = doc.childNodes[0] as HTMLElement;
+      const div = doc.body?.firstChild as HTMLElement;
       const p = div.children[0];
 
       expect(p).toBeDefined();
@@ -79,7 +79,7 @@ describe('DOM Extended Functionality', () => {
 
     it('should provide firstElementChild and lastElementChild', () => {
       const doc = parseHTML('<div><span>First</span><p>Second</p><em>Last</em></div>') as Document;
-      const div = doc.childNodes[0] as HTMLElement;
+      const div = doc.body?.firstChild as HTMLElement;
 
       expect(div.firstElementChild?.tagName).toBe('SPAN');
       expect(div.lastElementChild?.tagName).toBe('EM');
@@ -87,7 +87,7 @@ describe('DOM Extended Functionality', () => {
 
     it('should provide nextElementSibling and previousElementSibling', () => {
       const doc = parseHTML('<div><span>First</span><p>Second</p><em>Last</em></div>') as Document;
-      const div = doc.childNodes[0] as HTMLElement;
+      const div = doc.body?.firstChild as HTMLElement;
       const span = div.children[0];
       const p = div.children[1];
       const em = div.children[2];
@@ -111,7 +111,7 @@ describe('DOM Extended Functionality', () => {
   describe('setInnerHTML functionality', () => {
     it('should clear existing content when setting innerHTML', () => {
       const doc = parseHTML('<div><p>Old content</p></div>') as Document;
-      const div = doc.childNodes[0] as HTMLElement;
+      const div = doc.body?.firstChild as HTMLElement;
 
       setInnerHTML(div, 'New content');
 

package/tests/dom-manipulation.test.ts

@@ -897,18 +897,18 @@ describe("DOM Manipulation - prepend", () => {
 
   describe("prepend on document", () => {
     it("should prepend to document", () => {
-      const doc = parseHTML("<!-- Comment --><div>Content</div>");
-      const comment = doc.childNodes[0];
-      const div = doc.childNodes[1];
+      const doc = parseHTML("<div>Content</div>");
+      const initialChildCount = doc.childNodes.length;
+      const firstChild = doc.firstChild;
 
       const newDiv = doc.createElement("div");
-      newDiv.textContent = "First";
+      newDiv.textContent = "Prepended";
 
       doc.prepend(newDiv);
 
       expect(doc.firstChild).toBe(newDiv);
-      expect(newDiv.nextSibling).toBe(comment);
-      expect(doc.childNodes.length).toBe(3);
+      expect(newDiv.nextSibling).toBe(firstChild);
+      expect(doc.childNodes.length).toBe(initialChildCount + 1);
     });
   });
 });
@@ -1121,16 +1121,15 @@ describe("DOM Manipulation - append", () => {
   describe("append on document", () => {
     it("should append to document", () => {
       const doc = parseHTML("<div>Content</div>");
-      const div = doc.childNodes[0];
+      const initialChildCount = doc.childNodes.length;
 
       const newDiv = doc.createElement("div");
-      newDiv.textContent = "Last";
+      newDiv.textContent = "Appended";
 
       doc.append(newDiv);
 
       expect(doc.lastChild).toBe(newDiv);
-      expect(div.nextSibling).toBe(newDiv);
-      expect(doc.childNodes.length).toBe(2);
+      expect(doc.childNodes.length).toBe(initialChildCount + 1);
     });
   });
 });

package/tests/dom.test.ts

@@ -10,6 +10,10 @@ import {
 } from "../src/dom-simulator";
 import { parse } from "../src/parser";
 
+function getBodyContent(doc: any): any {
+  return doc.body?.firstChild;
+}
+
 describe("DOM Simulator - Phase 1: Structure and Conversion", () => {
   describe("parseHTML basic functionality", () => {
     it("should return a Document object", () => {
@@ -21,8 +25,7 @@ describe("DOM Simulator - Phase 1: Structure and Conversion", () => {
     it("should parse simple HTML elements", () => {
       const doc = parseHTML("<p>Hello World</p>");
 
-      expect(doc.childNodes.length).toBe(1);
-      const paragraph = doc.childNodes[0]!;
+      const paragraph = getBodyContent(doc);
 
       expect(paragraph.nodeType).toBe(NodeType.ELEMENT_NODE);
       expect(paragraph.nodeName).toBe("P");
@@ -31,7 +34,7 @@ describe("DOM Simulator - Phase 1: Structure and Conversion", () => {
 
     it("should parse text content correctly", () => {
       const doc = parseHTML("<p>Hello World</p>");
-      const paragraph = doc.childNodes[0]!;
+      const paragraph = getBodyContent(doc);
 
       expect(paragraph.childNodes.length).toBe(1);
       const textNode = paragraph.childNodes[0]!;
@@ -44,7 +47,7 @@ describe("DOM Simulator - Phase 1: Structure and Conversion", () => {
     it("should parse nested elements", () => {
       const doc = parseHTML("<div><p>Hello</p><span>World</span></div>");
 
-      const div = doc.childNodes[0]!;
+      const div = getBodyContent(doc);
       expect(div.nodeName).toBe("DIV");
       expect(div.childNodes.length).toBe(2);
 
@@ -57,17 +60,19 @@ describe("DOM Simulator - Phase 1: Structure and Conversion", () => {
 
     it("should handle attributes correctly", () => {
       const doc = parseHTML('<p id="test" class="highlight">Content</p>');
-      const paragraph = doc.childNodes[0]! as any;
+      const paragraph = getBodyContent(doc) as any;
 
       expect(paragraph.attributes.id).toBe("test");
       expect(paragraph.attributes.class).toBe("highlight");
     });
 
     it("should parse comments", () => {
-      const doc = parseHTML("<!-- This is a comment --><p>Hello</p>");
+      const doc = parseHTML("<div><!-- This is a comment --></div><p>Hello</p>");
 
-      expect(doc.childNodes.length).toBe(2);
-      const comment = doc.childNodes[0]!;
+      const body = doc.body;
+      expect(body.childNodes.length).toBe(2);
+      const div = body.childNodes[0]!;
+      const comment = div.childNodes[0]!;
 
       expect(comment.nodeType).toBe(NodeType.COMMENT_NODE);
       expect(comment.nodeName).toBe("#comment");
@@ -77,11 +82,11 @@ describe("DOM Simulator - Phase 1: Structure and Conversion", () => {
     it("should set parent-child relationships correctly", () => {
       const doc = parseHTML("<div><p>Hello</p></div>");
 
-      const div = doc.childNodes[0]!;
+      const div = getBodyContent(doc);
       const p = div.childNodes[0]!;
 
       expect(p.parentNode).toBe(<any>div);
-      expect(div.parentNode).toBe(doc);
+      expect(div.parentNode).toBe(doc.body);
       expect(div.firstChild).toBe(p);
       expect(div.lastChild).toBe(p);
     });
@@ -91,7 +96,7 @@ describe("DOM Simulator - Phase 1: Structure and Conversion", () => {
         "<div><p>First</p><span>Second</span><em>Third</em></div>"
       );
 
-      const div = doc.childNodes[0]!;
+      const div = getBodyContent(doc);
       const p = div.childNodes[0]!;
       const span = div.childNodes[1]!;
       const em = div.childNodes[2]!;
@@ -108,7 +113,7 @@ describe("DOM Simulator - Phase 1: Structure and Conversion", () => {
     it("should handle self-closing elements", () => {
       const doc = parseHTML("<p>Before<br/>After</p>");
 
-      const p = doc.childNodes[0]!;
+      const p = getBodyContent(doc);
       expect(p.childNodes.length).toBe(3);
 
       const br = p.childNodes[1]!;
@@ -119,7 +124,7 @@ describe("DOM Simulator - Phase 1: Structure and Conversion", () => {
     it("should handle empty elements", () => {
       const doc = parseHTML("<div></div>");
 
-      const div = doc.childNodes[0]!;
+      const div = getBodyContent(doc);
       expect(div.childNodes.length).toBe(0);
       expect(div.firstChild).toBeNull();
       expect(div.lastChild).toBeNull();
@@ -154,7 +159,7 @@ describe("DOM Simulator - Phase 2: Navigation and Attributes", () => {
   describe("getTextContent", () => {
     it("should get text content from a simple text node", () => {
       const doc = parseHTML("<p>Hello World</p>");
-      const p = doc.childNodes[0]!;
+      const p = getBodyContent(doc);
       const textNode = p.childNodes[0]!;
 
       expect(getTextContent(textNode)).toBe("Hello World");
@@ -162,14 +167,14 @@ describe("DOM Simulator - Phase 2: Navigation and Attributes", () => {
 
     it("should get text content from an element with text", () => {
       const doc = parseHTML("<p>Hello World</p>");
-      const p = doc.childNodes[0]!;
+      const p = getBodyContent(doc);
 
       expect(getTextContent(p)).toBe("Hello World");
     });
 
     it("should get concatenated text from nested elements", () => {
       const doc = parseHTML("<div>Hello <span>beautiful</span> world</div>");
-      const div = doc.childNodes[0]!;
+      const div = getBodyContent(doc);
 
       expect(getTextContent(div)).toBe("Hello beautiful world");
     });
@@ -178,28 +183,28 @@ describe("DOM Simulator - Phase 2: Navigation and Attributes", () => {
       const doc = parseHTML(
         "<div>Start <p>Middle <em>Deep <strong>Deeper</strong></em></p> End</div>"
       );
-      const div = doc.childNodes[0]!;
+      const div = getBodyContent(doc);
 
       expect(getTextContent(div)).toBe("Start Middle Deep Deeper End");
     });
 
     it("should return empty string for elements with no text", () => {
       const doc = parseHTML("<div></div>");
-      const div = doc.childNodes[0]!;
+      const div = getBodyContent(doc);
 
       expect(getTextContent(div)).toBe("");
     });
 
     it("should ignore comments when getting text content", () => {
       const doc = parseHTML("<div>Before<!-- comment -->After</div>");
-      const div = doc.childNodes[0]!;
+      const div = getBodyContent(doc);
 
       expect(getTextContent(div)).toBe("BeforeAfter");
     });
 
     it("should handle mixed content with self-closing elements", () => {
       const doc = parseHTML("<p>Before<br/>After</p>");
-      const p = doc.childNodes[0]!;
+      const p = getBodyContent(doc);
 
       expect(getTextContent(p)).toBe("BeforeAfter");
     });
@@ -210,7 +215,7 @@ describe("DOM Simulator - Phase 2: Navigation and Attributes", () => {
       const doc = parseHTML(
         '<div id="test" class="highlight" data-value="123">Content</div>'
       );
-      const div = doc.childNodes[0]! as any;
+      const div = getBodyContent(doc) as any;
 
       expect(getAttribute(div, "id")).toBe("test");
       expect(getAttribute(div, "class")).toBe("highlight");
@@ -219,7 +224,7 @@ describe("DOM Simulator - Phase 2: Navigation and Attributes", () => {
 
     it("should return null for non-existing attributes", () => {
       const doc = parseHTML('<div id="test">Content</div>');
-      const div = doc.childNodes[0]! as any;
+      const div = getBodyContent(doc) as any;
 
       expect(getAttribute(div, "nonexistent")).toBeNull();
       expect(getAttribute(div, "class")).toBeNull();
@@ -227,7 +232,7 @@ describe("DOM Simulator - Phase 2: Navigation and Attributes", () => {
 
     it("should check if attributes exist", () => {
       const doc = parseHTML('<div id="test" class="highlight">Content</div>');
-      const div = doc.childNodes[0]! as any;
+      const div = getBodyContent(doc) as any;
 
       expect(hasAttribute(div, "id")).toBe(true);
       expect(hasAttribute(div, "class")).toBe(true);
@@ -236,7 +241,7 @@ describe("DOM Simulator - Phase 2: Navigation and Attributes", () => {
 
     it("should set new attributes", () => {
       const doc = parseHTML("<div>Content</div>");
-      const div = doc.childNodes[0]! as any;
+      const div = getBodyContent(doc) as any;
 
       setAttribute(div, "id", "new-id");
       setAttribute(div, "class", "new-class");
@@ -249,7 +254,7 @@ describe("DOM Simulator - Phase 2: Navigation and Attributes", () => {
 
     it("should update existing attributes", () => {
       const doc = parseHTML('<div id="old-id" class="old-class">Content</div>');
-      const div = doc.childNodes[0]! as any;
+      const div = getBodyContent(doc) as any;
 
       setAttribute(div, "id", "new-id");
       setAttribute(div, "class", "new-class");
@@ -262,7 +267,7 @@ describe("DOM Simulator - Phase 2: Navigation and Attributes", () => {
       const doc = parseHTML(
         '<div id="test" class="highlight" data-value="123">Content</div>'
       );
-      const div = doc.childNodes[0]! as any;
+      const div = getBodyContent(doc) as any;
 
       removeAttribute(div, "class");
       removeAttribute(div, "data-value");
@@ -276,7 +281,7 @@ describe("DOM Simulator - Phase 2: Navigation and Attributes", () => {
 
     it("should handle removing non-existing attributes gracefully", () => {
       const doc = parseHTML('<div id="test">Content</div>');
-      const div = doc.childNodes[0]! as any;
+      const div = getBodyContent(doc) as any;
 
       removeAttribute(div, "nonexistent");
 

package/tests/helpers/tokenizer-adapter.test.ts

@@ -0,0 +1,70 @@
+import { tokenize } from '../../src/tokenizer';
+import { adaptTokens, type Html5libToken } from './tokenizer-adapter.ts';
+
+describe('Tokenizer Adapter Tests', () => {
+  it('should adapt simple start tag', () => {
+    const tokens = tokenize('<div>');
+    const adapted = adaptTokens(tokens);
+    expect(adapted).toEqual([
+      ['StartTag', 'div', {}]
+    ]);
+  });
+
+  it('should adapt start tag with attributes', () => {
+    const tokens = tokenize('<div class="foo" id="bar">');
+    const adapted = adaptTokens(tokens);
+    expect(adapted).toEqual([
+      ['StartTag', 'div', { class: 'foo', id: 'bar' }]
+    ]);
+  });
+
+  it('should adapt self-closing tag', () => {
+    const tokens = tokenize('<br/>');
+    const adapted = adaptTokens(tokens);
+    expect(adapted).toEqual([
+      ['StartTag', 'br', {}, true]
+    ]);
+  });
+
+  it('should adapt end tag', () => {
+    const tokens = tokenize('</div>');
+    const adapted = adaptTokens(tokens);
+    expect(adapted).toEqual([
+      ['EndTag', 'div']
+    ]);
+  });
+
+  it('should adapt text', () => {
+    const tokens = tokenize('hello world');
+    const adapted = adaptTokens(tokens);
+    expect(adapted).toEqual([
+      ['Character', 'hello world']
+    ]);
+  });
+
+  it('should adapt comment', () => {
+    const tokens = tokenize('<!-- comment -->');
+    const adapted = adaptTokens(tokens);
+    expect(adapted).toEqual([
+      ['Comment', ' comment ']
+    ]);
+  });
+
+  it('should adapt DOCTYPE', () => {
+    const tokens = tokenize('<!DOCTYPE html>');
+    const adapted = adaptTokens(tokens);
+    expect(adapted).toEqual([
+      ['DOCTYPE', 'html', null, null, true]
+    ]);
+  });
+
+  it('should adapt mixed content', () => {
+    const tokens = tokenize('<div>hello</div>');
+    const adapted = adaptTokens(tokens);
+    expect(adapted).toEqual([
+      ['StartTag', 'div', {}],
+      ['Character', 'hello'],
+      ['EndTag', 'div']
+    ]);
+  });
+});

package/tests/helpers/tokenizer-adapter.ts

@@ -0,0 +1,65 @@
+// tests/helpers/tokenizer-adapter.ts
+
+import type { Token } from '../../src/tokenizer';
+
+export type Html5libToken = 
+  | ['StartTag', string, Record<string, string>]
+  | ['StartTag', string, Record<string, string>, boolean] // con self-closing flag
+  | ['EndTag', string]
+  | ['Character', string]
+  | ['Comment', string]
+  | ['DOCTYPE', string, string | null, string | null, boolean];
+
+export function adaptTokens(tokens: Token[]): Html5libToken[] {
+  const result: Html5libToken[] = [];
+  
+  for (const token of tokens) {
+    if (token.type === 'EOF') continue;
+    
+    switch (token.type) {
+      case 'TAG_OPEN':
+        if (token.isClosing) {
+          result.push(['EndTag', token.value]);
+        } else {
+          const attrs = token.attributes || {};
+          if (token.isSelfClosing) {
+            result.push(['StartTag', token.value, attrs, true]);
+          } else {
+            result.push(['StartTag', token.value, attrs]);
+          }
+        }
+        break;
+        
+      case 'TAG_CLOSE':
+        result.push(['EndTag', token.value]);
+        break;
+        
+      case 'TEXT':
+        result.push(['Character', token.value]);
+        break;
+        
+      case 'COMMENT':
+        result.push(['Comment', token.value]);
+        break;
+        
+      case 'DOCTYPE':
+        // Parsear DOCTYPE para extraer name, publicId, systemId
+        result.push(['DOCTYPE', token.value, null, null, true]);
+        break;
+        
+      case 'CDATA':
+        result.push(['Character', token.value]);
+        break;
+    }
+  }
+  
+  return result;
+}
+
+// Función para comparar tokens, manejando casos especiales
+export function compareTokens(actual: Html5libToken[], expected: any[]): boolean {
+  // Implementar comparación flexible
+  // - Coalescer Characters consecutivos
+  // - Ignorar diferencias de whitespace en algunos casos
+  return JSON.stringify(actual) === JSON.stringify(expected);
+}

package/tests/helpers/tree-adapter.test.ts

@@ -0,0 +1,39 @@
+import { parseHTML } from '../../index.ts';
+import { serializeToHtml5lib } from './tree-adapter.ts';
+
+describe('Tree Adapter Tests', () => {
+  it('should serialize simple element', () => {
+    const doc = parseHTML('<div></div>');
+    const serialized = serializeToHtml5lib(doc);
+    expect(serialized).toContain('| <html>');
+    expect(serialized).toContain('|   <body>');
+    expect(serialized).toContain('|     <div>');
+  });
+
+  it('should serialize element with attributes', () => {
+    const doc = parseHTML('<div class="foo" id="bar"></div>');
+    const serialized = serializeToHtml5lib(doc);
+    expect(serialized).toContain('<div>');
+    expect(serialized).toContain('class="foo"');
+    expect(serialized).toContain('id="bar"');
+  });
+
+  it('should serialize text content', () => {
+    const doc = parseHTML('<div>hello</div>');
+    const serialized = serializeToHtml5lib(doc);
+    expect(serialized).toContain('"hello"');
+  });
+
+  it('should serialize comment', () => {
+    const doc = parseHTML('<div><!-- comment --></div>');
+    const serialized = serializeToHtml5lib(doc);
+    expect(serialized).toContain('<!--  comment  -->');
+  });
+
+  it('should serialize DOCTYPE', () => {
+    const doc = parseHTML('<!DOCTYPE html><div></div>');
+    const serialized = serializeToHtml5lib(doc);
+    expect(serialized).toContain('<!DOCTYPE html>');
+    expect(serialized).toContain('<div>');
+  });
+});

package/tests/helpers/tree-adapter.ts

@@ -0,0 +1,60 @@
+// tests/helpers/tree-adapter.ts
+
+export interface SerializeOptions {
+  skipImplicitDoctype?: boolean;
+}
+
+export function serializeToHtml5lib(doc: any, options: SerializeOptions = {}): string {
+  const lines: string[] = [];
+
+  function serialize(node: any, depth: number): void {
+    const indent = '| ' + '  '.repeat(depth);
+
+    if (node.nodeType === 9) { // DOCUMENT
+      for (const child of node.childNodes || []) {
+        serialize(child, depth);
+      }
+    } else if (node.nodeType === 1) { // ELEMENT
+      const tagName = node.tagName.toLowerCase();
+      const ns = node.namespaceURI;
+      
+      let nsPrefix = '';
+      if (ns === 'http://www.w3.org/2000/svg') {
+        nsPrefix = ' svg';
+      } else if (ns === 'http://www.w3.org/1998/Math/MathML') {
+        nsPrefix = ' math';
+      }
+      
+      lines.push(`${indent}<${tagName}${nsPrefix}>`);
+      
+      // Atributos en orden alfabético
+      const attrs = Object.entries(node.attributes || {}).sort(([a], [b]) => a.localeCompare(b));
+      for (const [name, value] of attrs) {
+        lines.push(`${indent}  ${name}="${value}"`);
+      }
+      
+      // Template special case
+      if (node.tagName.toLowerCase() === 'template' && node.content) {
+        lines.push(`${indent}  content`);
+        serialize(node.content, depth + 2);
+      }
+      
+      // Children
+      for (const child of node.childNodes || []) {
+        serialize(child, depth + 1);
+      }
+    } else if (node.nodeType === 3) { // TEXT
+      lines.push(`${indent}"${node.textContent}"`);
+    } else if (node.nodeType === 8) { // COMMENT
+      const commentData = node.data || node.nodeValue || node.textContent || '';
+      lines.push(`${indent}<!-- ${commentData} -->`);
+    } else if (node.nodeType === 10) { // DOCTYPE
+      if (!options.skipImplicitDoctype) {
+        lines.push(`${indent}<!DOCTYPE ${node.name || 'html'}>`);
+      }
+    }
+  }
+  
+  serialize(doc, 0);
+  return lines.join('\n') + '\n';
+}