@tkeron/html-parser 1.3.0 → 1.4.0

package/package.json

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

package/src/parser/foster-parenting-helpers.ts

@@ -0,0 +1,48 @@
+export const mergeAdjacentTextNodes = (
+  parent: any,
+  insertIndex: number,
+): void => {
+  if (!parent.childNodes || parent.childNodes.length < 2) {
+    return;
+  }
+
+  const node = parent.childNodes[insertIndex];
+  if (!node || node.nodeType !== 3) {
+    return;
+  }
+
+  if (insertIndex > 0) {
+    const prevNode = parent.childNodes[insertIndex - 1];
+    if (prevNode && prevNode.nodeType === 3) {
+      prevNode.textContent =
+        (prevNode.textContent || "") + (node.textContent || "");
+      prevNode.nodeValue = prevNode.textContent;
+      parent.childNodes.splice(insertIndex, 1);
+      return;
+    }
+  }
+
+  if (insertIndex < parent.childNodes.length - 1) {
+    const nextNode = parent.childNodes[insertIndex + 1];
+    if (nextNode && nextNode.nodeType === 3) {
+      node.textContent =
+        (node.textContent || "") + (nextNode.textContent || "");
+      node.nodeValue = node.textContent;
+      parent.childNodes.splice(insertIndex + 1, 1);
+    }
+  }
+};
+
+export const insertNodeBeforeTable = (
+  parent: any,
+  tableElement: any,
+  node: any,
+): number => {
+  const idx = parent.childNodes.indexOf(tableElement);
+  if (idx !== -1) {
+    node.parentNode = parent;
+    parent.childNodes.splice(idx, 0, node);
+    return idx;
+  }
+  return -1;
+};

package/src/parser/implicit-table-structure.ts

@@ -0,0 +1,65 @@
+import { createElement, appendChild } from "../dom-simulator/index.js";
+
+export const CELL_ELEMENTS = new Set(["td", "th"]);
+
+export const TABLE_SECTION_ELEMENTS = new Set(["tbody", "thead", "tfoot"]);
+
+export const shouldCreateImplicitTableStructure = (
+  parentTagName: string,
+  childTagName: string,
+): boolean => {
+  const parent = parentTagName.toLowerCase();
+  const child = childTagName.toLowerCase();
+
+  if (CELL_ELEMENTS.has(child)) {
+    return parent === "table" || TABLE_SECTION_ELEMENTS.has(parent);
+  }
+
+  if (child === "tr") {
+    return parent === "table";
+  }
+
+  return false;
+};
+
+export const createImplicitTableStructure = (
+  stack: any[],
+  parentTagName: string,
+  childTagName: string,
+): any => {
+  const parent = parentTagName.toLowerCase();
+  const child = childTagName.toLowerCase();
+  const currentParent = stack[stack.length - 1];
+
+  if (CELL_ELEMENTS.has(child)) {
+    if (parent === "table") {
+      const tbody = createElement("tbody", {});
+      appendChild(currentParent, tbody);
+      stack.push(tbody);
+
+      const tr = createElement("tr", {});
+      appendChild(tbody, tr);
+      stack.push(tr);
+
+      return tr;
+    }
+
+    if (TABLE_SECTION_ELEMENTS.has(parent)) {
+      const tr = createElement("tr", {});
+      appendChild(currentParent, tr);
+      stack.push(tr);
+
+      return tr;
+    }
+  }
+
+  if (child === "tr" && parent === "table") {
+    const tbody = createElement("tbody", {});
+    appendChild(currentParent, tbody);
+    stack.push(tbody);
+
+    return tbody;
+  }
+
+  return currentParent;
+};

package/src/parser/parse.ts

@@ -29,6 +29,12 @@ import {
   cloneFormattingElement,
   reparentChildren,
 } from "./adoption-agency-helpers.js";
+import {
+  shouldCreateImplicitTableStructure,
+  createImplicitTableStructure,
+  CELL_ELEMENTS,
+} from "./implicit-table-structure.js";
+import { mergeAdjacentTextNodes } from "./foster-parenting-helpers.js";
 
 export const parse = (tokens: Token[]): any => {
   const state = createParserState(tokens);
@@ -329,9 +335,30 @@ const parseTokenInInBodyMode = (state: ParserState, token: Token): void => {
 
     handleAutoClosing(state, tagName);
 
-    reconstructActiveFormattingElements(state);
+    const inTableContext = isInTableContext(state);
+    const isTableStructureElement =
+      CELL_ELEMENTS.has(tagName) ||
+      tagName === "tr" ||
+      tagName === "tbody" ||
+      tagName === "thead" ||
+      tagName === "tfoot";
+    const currentStackParent = getCurrentParent(state);
+    const currentStackParentTag =
+      currentStackParent.tagName?.toLowerCase() || "";
+    const parentIsTableContext = TABLE_CONTEXT_ELEMENTS.has(
+      currentStackParentTag,
+    );
 
-    const currentParent = getCurrentParent(state);
+    if (inTableContext && isTableStructureElement) {
+      const tableParent = findTableContextParent(state);
+      if (tableParent) {
+        popStackUntilTableContext(state);
+      }
+    } else if (!parentIsTableContext) {
+      reconstructActiveFormattingElements(state);
+    }
+
+    let currentParent = getCurrentParent(state);
 
     let namespaceURI: string | undefined;
     if (tagName === "svg") {
@@ -346,8 +373,8 @@ const parseTokenInInBodyMode = (state: ParserState, token: Token): void => {
       namespaceURI,
     );
 
-    const inTableContext = isInTableContext(state);
-    const parentTagName = currentParent.tagName || "";
+    let parentTagName = currentParent.tagName || "";
+
     const isValidForParent = isValidChildForTableParent(parentTagName, tagName);
     const isHiddenInput =
       tagName === "input" &&
@@ -355,25 +382,37 @@ const parseTokenInInBodyMode = (state: ParserState, token: Token): void => {
       token.attributes.type &&
       token.attributes.type.toLowerCase() === "hidden";
     const isFormInTable = tagName === "form" && inTableContext;
+
+    const needsImplicitStructure =
+      inTableContext &&
+      shouldCreateImplicitTableStructure(parentTagName, tagName);
+
     const needsFosterParenting =
       inTableContext &&
       TABLE_CONTEXT_ELEMENTS.has(parentTagName.toLowerCase()) &&
       !isValidForParent &&
       !isHiddenInput &&
-      !isFormInTable;
+      !isFormInTable &&
+      !needsImplicitStructure;
 
-    if (needsFosterParenting) {
+    if (needsImplicitStructure) {
+      createImplicitTableStructure(state.stack, parentTagName, tagName);
+      appendChild(getCurrentParent(state), element);
+    } else if (needsFosterParenting) {
       insertWithFosterParenting(state, element);
     } else {
       appendChild(currentParent, element);
     }
 
+    const wasFosterParented = needsFosterParenting;
+    const isFormattingElement = FORMATTING_ELEMENTS.has(tagName);
+
     if (!token.isSelfClosing && !VOID_ELEMENTS.has(tagName)) {
-      if (!isFormInTable) {
+      if (!isFormInTable && !(wasFosterParented && isFormattingElement)) {
         state.stack.push(element);
       }
 
-      if (FORMATTING_ELEMENTS.has(tagName)) {
+      if (isFormattingElement) {
         state.activeFormattingElements.push(element);
       }
     }
@@ -541,8 +580,6 @@ const parseText = (state: ParserState, token: Token): void => {
     return;
   }
 
-  reconstructActiveFormattingElements(state);
-
   const textNode = createTextNode(content);
 
   const inTableContext = isInTableContext(state);
@@ -552,9 +589,10 @@ const parseText = (state: ParserState, token: Token): void => {
     currentParent.tagName &&
     TABLE_CONTEXT_ELEMENTS.has(currentParent.tagName.toLowerCase())
   ) {
-    insertWithFosterParenting(state, textNode);
+    insertWithFosterParentingAndReconstruct(state, textNode);
   } else {
-    appendChild(currentParent, textNode);
+    reconstructActiveFormattingElements(state);
+    appendChild(getCurrentParent(state), textNode);
   }
 };
 
@@ -710,6 +748,31 @@ const isInTableContext = (state: ParserState): boolean => {
   return false;
 };
 
+const findTableContextParent = (state: ParserState): any | null => {
+  for (let i = state.stack.length - 1; i >= 0; i--) {
+    const el = state.stack[i];
+    if (el.tagName && TABLE_CONTEXT_ELEMENTS.has(el.tagName.toLowerCase())) {
+      return el;
+    }
+  }
+  return null;
+};
+
+const popStackUntilTableContext = (state: ParserState): void => {
+  while (state.stack.length > 1) {
+    const el = getCurrentElement(state);
+    if (
+      el &&
+      el.tagName &&
+      TABLE_CONTEXT_ELEMENTS.has(el.tagName.toLowerCase())
+    ) {
+      break;
+    }
+    state.stack.pop();
+  }
+  state.activeFormattingElements.push(null);
+};
+
 const isValidChildForTableParent = (
   parentTagName: string,
   childTagName: string,
@@ -760,13 +823,102 @@ const insertWithFosterParenting = (state: ParserState, node: any): void => {
         if (idx !== -1) {
           node.parentNode = target.parent;
           target.parent.childNodes.splice(idx, 0, node);
+          if (node.nodeType === 3) {
+            mergeAdjacentTextNodes(target.parent, idx);
+          }
           return;
         }
       }
       appendChild(target.parent, node);
+      if (node.nodeType === 3) {
+        const insertedIdx = target.parent.childNodes.indexOf(node);
+        if (insertedIdx !== -1) {
+          mergeAdjacentTextNodes(target.parent, insertedIdx);
+        }
+      }
       return;
     }
   }
 
   appendChild(currentParent, node);
 };
+
+const insertWithFosterParentingAndReconstruct = (
+  state: ParserState,
+  node: any,
+): void => {
+  const target = findFosterParentTarget(state);
+  if (!target) {
+    appendChild(getCurrentParent(state), node);
+    return;
+  }
+
+  const activeElements = getActiveFormattingElementsBeforeMarker(state);
+
+  if (activeElements.length === 0) {
+    if (target.before) {
+      const idx = target.parent.childNodes.indexOf(target.before);
+      if (idx !== -1) {
+        node.parentNode = target.parent;
+        target.parent.childNodes.splice(idx, 0, node);
+        if (node.nodeType === 3) {
+          mergeAdjacentTextNodes(target.parent, idx);
+        }
+        return;
+      }
+    }
+    appendChild(target.parent, node);
+    if (node.nodeType === 3) {
+      const insertedIdx = target.parent.childNodes.indexOf(node);
+      if (insertedIdx !== -1) {
+        mergeAdjacentTextNodes(target.parent, insertedIdx);
+      }
+    }
+    return;
+  }
+
+  const hasMarker = state.activeFormattingElements.includes(null);
+  const lastFormatEl = activeElements[activeElements.length - 1];
+
+  if (
+    !hasMarker &&
+    lastFormatEl.parentNode === target.parent &&
+    target.parent.childNodes.indexOf(lastFormatEl) <
+      target.parent.childNodes.indexOf(target.before)
+  ) {
+    appendChild(lastFormatEl, node);
+    return;
+  }
+
+  let currentNode = node;
+  for (let i = activeElements.length - 1; i >= 0; i--) {
+    const formatEl = activeElements[i];
+    const clone = cloneFormattingElement(formatEl);
+    appendChild(clone, currentNode);
+    currentNode = clone;
+  }
+
+  if (target.before) {
+    const idx = target.parent.childNodes.indexOf(target.before);
+    if (idx !== -1) {
+      currentNode.parentNode = target.parent;
+      target.parent.childNodes.splice(idx, 0, currentNode);
+      return;
+    }
+  }
+  appendChild(target.parent, currentNode);
+};
+
+const getActiveFormattingElementsBeforeMarker = (state: ParserState): any[] => {
+  const result: any[] = [];
+  for (let i = 0; i < state.activeFormattingElements.length; i++) {
+    const el = state.activeFormattingElements[i];
+    if (el === null) {
+      continue;
+    }
+    if (!isInStack(state.stack, el)) {
+      result.push(el);
+    }
+  }
+  return result;
+};

package/tests/foster-parenting.test.ts

@@ -0,0 +1,127 @@
+import { expect, it, describe } from "bun:test";
+import { parseHTML } from "../index";
+import { serializeToHtml5lib } from "./helpers/tree-adapter";
+
+describe("Foster Parenting", () => {
+  describe("Text foster parenting", () => {
+    it("should foster parent text before table and merge adjacent text nodes", () => {
+      const doc = parseHTML("<table>A<td>B</td>C</table>");
+      const serialized = serializeToHtml5lib(doc, {
+        skipImplicitDoctype: true,
+      });
+      expect(serialized).toBe(`| <html>
+|   <head>
+|   <body>
+|     "AC"
+|     <table>
+|       <tbody>
+|         <tr>
+|           <td>
+|             "B"
+`);
+    });
+
+    it("should foster parent text with whitespace correctly", () => {
+      const doc = parseHTML("<table> X </table>");
+      const serialized = serializeToHtml5lib(doc, {
+        skipImplicitDoctype: true,
+      });
+      expect(serialized).toBe(`| <html>
+|   <head>
+|   <body>
+|     " X "
+|     <table>
+`);
+    });
+  });
+
+  describe("Element foster parenting", () => {
+    it("should foster parent <a> before table with AAA reconstruction", () => {
+      const doc = parseHTML("<table><a>1<td>2</td>3</table>");
+      const serialized = serializeToHtml5lib(doc, {
+        skipImplicitDoctype: true,
+      });
+      expect(serialized).toBe(`| <html>
+|   <head>
+|   <body>
+|     <a>
+|       "1"
+|     <a>
+|       "3"
+|     <table>
+|       <tbody>
+|         <tr>
+|           <td>
+|             "2"
+`);
+    });
+
+    it("should foster parent elements with AAA for formatting in <p>", () => {
+      const doc = parseHTML("<table><a>1<p>2</a>3</p>");
+      const serialized = serializeToHtml5lib(doc, {
+        skipImplicitDoctype: true,
+      });
+      expect(serialized).toBe(`| <html>
+|   <head>
+|   <body>
+|     <a>
+|       "1"
+|     <p>
+|       <a>
+|         "2"
+|       "3"
+|     <table>
+`);
+    });
+  });
+
+  describe("Implicit table structure", () => {
+    it("should create implicit tbody and tr for td in table", () => {
+      const doc = parseHTML("<table><td>X</td></table>");
+      const serialized = serializeToHtml5lib(doc, {
+        skipImplicitDoctype: true,
+      });
+      expect(serialized).toBe(`| <html>
+|   <head>
+|   <body>
+|     <table>
+|       <tbody>
+|         <tr>
+|           <td>
+|             "X"
+`);
+    });
+
+    it("should create implicit tr for td in tbody", () => {
+      const doc = parseHTML("<table><tbody><td>X</td></tbody></table>");
+      const serialized = serializeToHtml5lib(doc, {
+        skipImplicitDoctype: true,
+      });
+      expect(serialized).toBe(`| <html>
+|   <head>
+|   <body>
+|     <table>
+|       <tbody>
+|         <tr>
+|           <td>
+|             "X"
+`);
+    });
+
+    it("should not create implicit structure when tr is present", () => {
+      const doc = parseHTML("<table><tr><td>X</td></tr></table>");
+      const serialized = serializeToHtml5lib(doc, {
+        skipImplicitDoctype: true,
+      });
+      expect(serialized).toBe(`| <html>
+|   <head>
+|   <body>
+|     <table>
+|       <tbody>
+|         <tr>
+|           <td>
+|             "X"
+`);
+    });
+  });
+});

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

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