@tkeron/html-parser 1.4.0 → 1.4.1

package/package.json

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

package/src/parser/constants.ts

@@ -135,3 +135,15 @@ export const VALID_TR_CHILDREN = new Set([
   "template",
   "style",
 ]);
+
+export const BUTTON_SCOPE_TERMINATORS = new Set([
+  "applet",
+  "caption",
+  "html",
+  "table",
+  "td",
+  "th",
+  "marquee",
+  "object",
+  "template",
+]);

package/src/parser/parse.ts

@@ -21,9 +21,9 @@ import {
   VALID_TABLE_CHILDREN,
   VALID_TABLE_SECTION_CHILDREN,
   VALID_TR_CHILDREN,
+  BUTTON_SCOPE_TERMINATORS,
 } from "./constants";
 import {
-  findFormattingElementInStack,
   findFurthestBlock,
   getCommonAncestor,
   cloneFormattingElement,
@@ -333,7 +333,16 @@ const parseTokenInInBodyMode = (state: ParserState, token: Token): void => {
   if (token.type === TokenType.TAG_OPEN) {
     const tagName = token.value.toLowerCase();
 
-    handleAutoClosing(state, tagName);
+    if (tagName === "a") {
+      const existingA = state.activeFormattingElements.find(
+        (el) => el && el.tagName && el.tagName.toLowerCase() === "a",
+      );
+      if (existingA) {
+        runAdoptionAgencyAlgorithm(state, "a");
+      }
+    }
+
+    const closedParagraph = handleAutoClosing(state, tagName);
 
     const inTableContext = isInTableContext(state);
     const isTableStructureElement =
@@ -354,7 +363,7 @@ const parseTokenInInBodyMode = (state: ParserState, token: Token): void => {
       if (tableParent) {
         popStackUntilTableContext(state);
       }
-    } else if (!parentIsTableContext) {
+    } else if (!parentIsTableContext && !closedParagraph) {
       reconstructActiveFormattingElements(state);
     }
 
@@ -365,6 +374,8 @@ const parseTokenInInBodyMode = (state: ParserState, token: Token): void => {
       namespaceURI = SVG_NAMESPACE;
     } else if (tagName === "math") {
       namespaceURI = MATHML_NAMESPACE;
+    } else {
+      namespaceURI = getCurrentNamespace(state);
     }
 
     const element = createElement(
@@ -413,24 +424,28 @@ const parseTokenInInBodyMode = (state: ParserState, token: Token): void => {
       }
 
       if (isFormattingElement) {
-        state.activeFormattingElements.push(element);
+        pushToActiveFormattingElements(state, element);
       }
     }
   } else if (token.type === TokenType.TAG_CLOSE) {
     const tagName = token.value.toLowerCase();
 
-    if (FORMATTING_ELEMENTS.has(tagName)) {
+    if (FORMATTING_ELEMENTS.has(tagName) && !isInForeignContent(state)) {
       runAdoptionAgencyAlgorithm(state, tagName);
       return;
     }
 
+    if (tagName === "p") {
+      closeParagraphElement(state);
+      return;
+    }
+
     const impliedEndTags = [
       "dd",
       "dt",
       "li",
       "option",
       "optgroup",
-      "p",
       "rb",
       "rp",
       "rt",
@@ -479,76 +494,132 @@ const runAdoptionAgencyAlgorithm = (
   state: ParserState,
   tagName: string,
 ): void => {
-  const result = findFormattingElementInStack(state.stack, tagName);
+  const maxIterations = 8;
 
-  if (!result) {
-    return;
-  }
+  for (let iteration = 0; iteration < maxIterations; iteration++) {
+    const formattingElementIndex = state.activeFormattingElements.findIndex(
+      (el) =>
+        el && el.tagName && el.tagName.toLowerCase() === tagName.toLowerCase(),
+    );
 
-  const { element: formattingElement, index: formattingElementIndex } = result;
+    if (formattingElementIndex === -1) {
+      return;
+    }
 
-  const currentElement = getCurrentElement(state);
-  if (currentElement === formattingElement) {
-    state.stack.pop();
-    removeFromActiveFormattingElements(state, formattingElement);
-    return;
-  }
+    const formattingElement =
+      state.activeFormattingElements[formattingElementIndex];
+    const stackIndex = state.stack.indexOf(formattingElement);
 
-  const fbResult = findFurthestBlock(state.stack, formattingElementIndex);
+    if (stackIndex === -1) {
+      state.activeFormattingElements.splice(formattingElementIndex, 1);
+      return;
+    }
 
-  if (!fbResult) {
-    while (state.stack.length > formattingElementIndex) {
+    const currentElement = getCurrentElement(state);
+    if (currentElement === formattingElement) {
       state.stack.pop();
+      removeFromActiveFormattingElements(state, formattingElement);
+      return;
     }
-    removeFromActiveFormattingElements(state, formattingElement);
-    return;
-  }
 
-  const { element: furthestBlock, index: furthestBlockIndex } = fbResult;
-  const commonAncestor = getCommonAncestor(state.stack, formattingElementIndex);
+    const fbResult = findFurthestBlock(state.stack, stackIndex);
 
-  if (!commonAncestor) {
-    return;
-  }
+    if (!fbResult) {
+      while (state.stack.length > stackIndex) {
+        state.stack.pop();
+      }
+      removeFromActiveFormattingElements(state, formattingElement);
+      return;
+    }
 
-  let lastNode = furthestBlock;
-  const clonedNodes: any[] = [];
+    const { element: furthestBlock, index: furthestBlockIndex } = fbResult;
+    const commonAncestor = getCommonAncestor(state.stack, stackIndex);
 
-  for (let i = furthestBlockIndex - 1; i > formattingElementIndex; i--) {
-    const node = state.stack[i];
-    const nodeClone = cloneFormattingElement(node);
-    clonedNodes.unshift(nodeClone);
+    if (!commonAncestor) {
+      return;
+    }
+
+    let lastNode = furthestBlock;
+    const clonedNodes: any[] = [];
+    const nodesToRemoveFromStack: any[] = [];
+    let innerLoopCounter = 0;
+    let nodeIndex = furthestBlockIndex;
 
-    replaceInActiveFormattingElements(state, node, nodeClone);
+    while (true) {
+      innerLoopCounter++;
+      nodeIndex--;
+      const node = state.stack[nodeIndex];
 
-    const nodeChildIdx = node.childNodes.indexOf(lastNode);
-    if (nodeChildIdx !== -1) {
-      node.childNodes.splice(nodeChildIdx, 1);
+      if (node === formattingElement) {
+        break;
+      }
+
+      if (
+        innerLoopCounter > 3 &&
+        state.activeFormattingElements.includes(node)
+      ) {
+        removeFromActiveFormattingElements(state, node);
+      }
+
+      if (!state.activeFormattingElements.includes(node)) {
+        nodesToRemoveFromStack.push(node);
+        continue;
+      }
+
+      const nodeClone = cloneFormattingElement(node);
+      clonedNodes.unshift(nodeClone);
+
+      replaceInActiveFormattingElements(state, node, nodeClone);
+
+      const nodeChildIdx = node.childNodes.indexOf(lastNode);
+      if (nodeChildIdx !== -1) {
+        node.childNodes.splice(nodeChildIdx, 1);
+      }
+
+      appendChild(nodeClone, lastNode);
+      lastNode = nodeClone;
     }
 
-    appendChild(nodeClone, lastNode);
-    lastNode = nodeClone;
-  }
+    for (const node of nodesToRemoveFromStack) {
+      const idx = state.stack.indexOf(node);
+      if (idx !== -1) {
+        state.stack.splice(idx, 1);
+      }
+    }
 
-  const fbIdx = formattingElement.childNodes.indexOf(furthestBlock);
-  if (fbIdx !== -1) {
-    formattingElement.childNodes.splice(fbIdx, 1);
-    furthestBlock.parentNode = null;
-  }
+    const fbIdx = formattingElement.childNodes.indexOf(furthestBlock);
+    if (fbIdx !== -1) {
+      formattingElement.childNodes.splice(fbIdx, 1);
+      furthestBlock.parentNode = null;
+    }
 
-  appendChild(commonAncestor, lastNode);
+    appendChild(commonAncestor, lastNode);
 
-  const newFormattingElement = cloneFormattingElement(formattingElement);
-  reparentChildren(furthestBlock, newFormattingElement);
-  appendChild(furthestBlock, newFormattingElement);
+    const newFormattingElement = cloneFormattingElement(formattingElement);
+    reparentChildren(furthestBlock, newFormattingElement);
+    appendChild(furthestBlock, newFormattingElement);
 
-  removeFromActiveFormattingElements(state, formattingElement);
+    removeFromActiveFormattingElements(state, formattingElement);
+    state.activeFormattingElements.splice(
+      formattingElementIndex,
+      0,
+      newFormattingElement,
+    );
+
+    const elementsAfterFurthestBlock = state.stack.slice(
+      furthestBlockIndex + 1,
+    );
 
-  state.stack.length = formattingElementIndex;
-  for (const clonedNode of clonedNodes) {
-    state.stack.push(clonedNode);
+    state.stack.length = stackIndex;
+    for (const clonedNode of clonedNodes) {
+      state.stack.push(clonedNode);
+    }
+    state.stack.push(furthestBlock);
+    state.stack.push(newFormattingElement);
+    for (const element of elementsAfterFurthestBlock) {
+      state.stack.push(element);
+    }
   }
-  state.stack.push(furthestBlock);
 };
 
 const removeFromActiveFormattingElements = (
@@ -572,6 +643,60 @@ const replaceInActiveFormattingElements = (
   }
 };
 
+const pushToActiveFormattingElements = (
+  state: ParserState,
+  element: any,
+): void => {
+  const list = state.activeFormattingElements;
+  const tagName = element.tagName?.toLowerCase();
+
+  let count = 0;
+  let oldestMatchIndex = -1;
+
+  for (let i = list.length - 1; i >= 0; i--) {
+    const entry = list[i];
+    if (entry === null) {
+      break;
+    }
+
+    if (
+      entry.tagName?.toLowerCase() === tagName &&
+      attributesMatch(entry, element)
+    ) {
+      if (oldestMatchIndex === -1) {
+        oldestMatchIndex = i;
+      }
+      count++;
+      if (count >= 3) {
+        list.splice(oldestMatchIndex, 1);
+        break;
+      }
+      oldestMatchIndex = i;
+    }
+  }
+
+  list.push(element);
+};
+
+const attributesMatch = (el1: any, el2: any): boolean => {
+  const attrs1 = el1.attributes || {};
+  const attrs2 = el2.attributes || {};
+  const keys1 = Object.keys(attrs1);
+  const keys2 = Object.keys(attrs2);
+
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+
+  for (const key of keys1) {
+    if (attrs1[key] !== attrs2[key]) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
 const parseText = (state: ParserState, token: Token): void => {
   const content = token.value;
 
@@ -621,18 +746,57 @@ const parseProcessingInstruction = (state: ParserState, token: Token): void => {
   appendChild(currentParent, piNode);
 };
 
-const handleAutoClosing = (state: ParserState, tagName: string): void => {
+const closeParagraphElement = (state: ParserState): void => {
+  let pIndex = -1;
+  for (let i = state.stack.length - 1; i >= 0; i--) {
+    const element = state.stack[i];
+    const elementTag = element.tagName?.toLowerCase();
+
+    if (elementTag === "p") {
+      pIndex = i;
+      break;
+    }
+
+    if (elementTag && BUTTON_SCOPE_TERMINATORS.has(elementTag)) {
+      return;
+    }
+  }
+
+  if (pIndex === -1) {
+    return;
+  }
+
+  while (state.stack.length > pIndex) {
+    state.stack.pop();
+  }
+};
+
+const handleAutoClosing = (state: ParserState, tagName: string): boolean => {
   const autoCloseList = AUTO_CLOSE_RULES[tagName];
-  if (!autoCloseList) return;
+  if (!autoCloseList) return false;
 
-  const currentElement = getCurrentElement(state);
-  if (
-    currentElement &&
-    currentElement.tagName &&
-    autoCloseList.includes(currentElement.tagName.toLowerCase())
-  ) {
+  let targetIndex = -1;
+  for (let i = state.stack.length - 1; i >= 0; i--) {
+    const element = state.stack[i];
+    const elementTag = element.tagName?.toLowerCase();
+
+    if (elementTag && autoCloseList.includes(elementTag)) {
+      targetIndex = i;
+      break;
+    }
+
+    if (elementTag && BUTTON_SCOPE_TERMINATORS.has(elementTag)) {
+      return false;
+    }
+  }
+
+  if (targetIndex === -1) return false;
+
+  while (state.stack.length > targetIndex) {
     state.stack.pop();
   }
+
+  return true;
 };
 
 const getCurrentParent = (state: ParserState): any => {
@@ -748,6 +912,32 @@ const isInTableContext = (state: ParserState): boolean => {
   return false;
 };
 
+const isInForeignContent = (state: ParserState): boolean => {
+  for (let i = state.stack.length - 1; i >= 0; i--) {
+    const el = state.stack[i];
+    if (
+      el.namespaceURI === SVG_NAMESPACE ||
+      el.namespaceURI === MATHML_NAMESPACE
+    ) {
+      return true;
+    }
+    if (el.tagName && el.tagName.toLowerCase() === "html") {
+      return false;
+    }
+  }
+  return false;
+};
+
+const getCurrentNamespace = (state: ParserState): string | undefined => {
+  for (let i = state.stack.length - 1; i >= 0; i--) {
+    const el = state.stack[i];
+    if (el.namespaceURI) {
+      return el.namespaceURI;
+    }
+  }
+  return undefined;
+};
+
 const findTableContextParent = (state: ParserState): any | null => {
   for (let i = state.stack.length - 1; i >= 0; i--) {
     const el = state.stack[i];

package/tests/adoption-multiple-iterations.test.ts

@@ -0,0 +1,118 @@
+import { it, expect } from "bun:test";
+import { parseHTML } from "../index.js";
+import { serializeToHtml5lib } from "./helpers/tree-adapter.js";
+
+it("should run AAA 2 times - test case with nested divs", () => {
+  const html = "<a>1<div>2<div>3</a>4</div>5</div>";
+  const doc = parseHTML(html);
+  const serialized = serializeToHtml5lib(doc, { skipImplicitDoctype: true });
+
+  const expected = `| <html>
+|   <head>
+|   <body>
+|     <a>
+|       "1"
+|     <div>
+|       <a>
+|         "2"
+|       <div>
+|         <a>
+|           "3"
+|         "4"
+|       "5"
+`;
+
+  expect(serialized).toBe(expected);
+});
+
+it("should run AAA 8 times - deeply nested divs", () => {
+  const html =
+    "<div><a><b><div><div><div><div><div><div><div><div><div><div></a>";
+  const doc = parseHTML(html);
+  const serialized = serializeToHtml5lib(doc, { skipImplicitDoctype: true });
+
+  const expected = `| <html>
+|   <head>
+|   <body>
+|     <div>
+|       <a>
+|         <b>
+|       <b>
+|         <div>
+|           <a>
+|           <div>
+|             <a>
+|             <div>
+|               <a>
+|               <div>
+|                 <a>
+|                 <div>
+|                   <a>
+|                   <div>
+|                     <a>
+|                     <div>
+|                       <a>
+|                       <div>
+|                         <a>
+|                           <div>
+|                             <div>
+`;
+
+  expect(serialized).toBe(expected);
+});
+
+it("should run AAA 2 times - with style and address elements", () => {
+  const html = "<a><div><style></style><address><a>";
+  const doc = parseHTML(html);
+  const serialized = serializeToHtml5lib(doc, { skipImplicitDoctype: true });
+
+  const expected = `| <html>
+|   <head>
+|   <body>
+|     <a>
+|     <div>
+|       <a>
+|         <style>
+|       <address>
+|         <a>
+|         <a>
+`;
+
+  expect(serialized).toBe(expected);
+});
+
+it("should run AAA with formatting element cloning", () => {
+  const html = "<a>x<div>y</a>z</div>";
+  const doc = parseHTML(html);
+  const serialized = serializeToHtml5lib(doc, { skipImplicitDoctype: true });
+
+  const expected = `| <html>
+|   <head>
+|   <body>
+|     <a>
+|       "x"
+|     <div>
+|       <a>
+|         "y"
+|       "z"
+`;
+
+  expect(serialized).toBe(expected);
+});
+
+it("should stop AAA when no more formatting elements to adopt", () => {
+  const html = "<b>text</b><div>content</div>";
+  const doc = parseHTML(html);
+  const serialized = serializeToHtml5lib(doc, { skipImplicitDoctype: true });
+
+  const expected = `| <html>
+|   <head>
+|   <body>
+|     <b>
+|       "text"
+|     <div>
+|       "content"
+`;
+
+  expect(serialized).toBe(expected);
+});

package/tests/helpers/tree-adapter.ts

@@ -25,12 +25,12 @@ export function serializeToHtml5lib(
 
       let nsPrefix = "";
       if (ns === "http://www.w3.org/2000/svg") {
-        nsPrefix = " svg";
+        nsPrefix = "svg ";
       } else if (ns === "http://www.w3.org/1998/Math/MathML") {
-        nsPrefix = " math";
+        nsPrefix = "math ";
       }
 
-      lines.push(`${indent}<${tagName}${nsPrefix}>`);
+      lines.push(`${indent}<${nsPrefix}${tagName}>`);
 
       // Atributos en orden alfabético
       const attrs = Object.entries(node.attributes || {}).sort(([a], [b]) =>

package/tests/implicit-close-formatting.test.ts

@@ -0,0 +1,113 @@
+import { describe, it, expect } from "bun:test";
+import { parseHTML } from "../index.js";
+import { serializeToHtml5lib } from "./helpers/tree-adapter.js";
+
+describe("implicit close with formatting element reconstruction", () => {
+  it("should close <p> and reconstruct <b> elements when new <p> opens", () => {
+    const html = "<p><b><b><b><b><p>x";
+    const doc = parseHTML(html);
+    const result = serializeToHtml5lib(doc, { skipImplicitDoctype: true });
+
+    expect(result).toBe(`| <html>
+|   <head>
+|   <body>
+|     <p>
+|       <b>
+|         <b>
+|           <b>
+|             <b>
+|     <p>
+|       <b>
+|         <b>
+|           <b>
+|             "x"
+`);
+  });
+
+  it("should close <p> through nested formatting and reconstruct (single <b>)", () => {
+    const html = "<p><b><p>x";
+    const doc = parseHTML(html);
+    const result = serializeToHtml5lib(doc, { skipImplicitDoctype: true });
+
+    expect(result).toBe(`| <html>
+|   <head>
+|   <body>
+|     <p>
+|       <b>
+|     <p>
+|       <b>
+|         "x"
+`);
+  });
+
+  it("should handle text before and after implicit close", () => {
+    const html = "<p><b>1<p>2";
+    const doc = parseHTML(html);
+    const result = serializeToHtml5lib(doc, { skipImplicitDoctype: true });
+
+    expect(result).toBe(`| <html>
+|   <head>
+|   <body>
+|     <p>
+|       <b>
+|         "1"
+|     <p>
+|       <b>
+|         "2"
+`);
+  });
+
+  it("should handle multiple different formatting elements", () => {
+    const html = "<p><b><i><p>x";
+    const doc = parseHTML(html);
+    const result = serializeToHtml5lib(doc, { skipImplicitDoctype: true });
+
+    expect(result).toBe(`| <html>
+|   <head>
+|   <body>
+|     <p>
+|       <b>
+|         <i>
+|     <p>
+|       <b>
+|         <i>
+|           "x"
+`);
+  });
+
+  it("should handle div closing <p> and reconstructing formatting", () => {
+    const html = "<p><b><div>x";
+    const doc = parseHTML(html);
+    const result = serializeToHtml5lib(doc, { skipImplicitDoctype: true });
+
+    expect(result).toBe(`| <html>
+|   <head>
+|   <body>
+|     <p>
+|       <b>
+|     <div>
+|       <b>
+|         "x"
+`);
+  });
+
+  it("should handle multiple auto-closing with formatting", () => {
+    const html = "<p><b><p><i><p>x";
+    const doc = parseHTML(html);
+    const result = serializeToHtml5lib(doc, { skipImplicitDoctype: true });
+
+    expect(result).toBe(`| <html>
+|   <head>
+|   <body>
+|     <p>
+|       <b>
+|     <p>
+|       <b>
+|         <i>
+|     <p>
+|       <b>
+|         <i>
+|           "x"
+`);
+  });
+});

package/tests/tree-construction-adoption01.test.ts

@@ -31,7 +31,9 @@ describe("Tree Construction Adoption01 Tests", () => {
       }
     }
 
-    const passingTests = [1, 2, 3, 4, 6, 7, 8, 9, 11, 12, 16];
+    const passingTests = [
+      1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
+    ];
     const testFn = passingTests.includes(index + 1) ? it : it.skip;
 
     testFn(`Adoption test ${index + 1}`, () => {

package/tests/tree-construction-adoption02.test.ts

@@ -9,7 +9,7 @@ describe("Tree Construction Adoption02 Tests", () => {
     "utf8",
   );
   const sections = content.split("#data\n").slice(1);
-  const passingTests = [1];
+  const passingTests = [1, 2];
 
   sections.forEach((section, index) => {
     const lines = section.trim().split("\n");