xml-to-html-converter 0.1.8 → 0.3.0

package/README.md

@@ -10,9 +10,9 @@ A zero-dependency Node.js package for converting XML to HTML. Currently in pre-1
 
 ---
 
-## v0.1.x: XML Node Extraction & Scaffolding
+## v0.x.x: XML Node Extraction & Scaffolding
 
-Version `0.1.x` is focused entirely on parsing raw XML into a structured tree of nodes. The `scaffold` function walks an XML string and produces an array of `XmlNode` objects, each carrying its role, its raw source text, and its position in the document, both globally across the full document and locally within its parent.
+Version `0.2.x` is focused entirely on parsing raw XML into a structured tree of nodes. The `scaffold` function walks an XML string and produces an array of `XmlNode` objects, each carrying its role, its raw source text, and its position in the document, both globally across the full document and locally within its parent.
 
 ```ts
 interface XmlAttribute {
@@ -48,12 +48,13 @@ This scaffold is the foundation everything else will be built on. No transformat
 
 > **Where I am right now**
 >
-> `v0.x` is building the scaffold: a structural tree of every node in your XML document, each carrying its raw source string and its exact position in the document. This scaffold is what the HTML converter will walk when it's built.
+> `v0.x` is building the scaffold and the first render pass.
 >
 > - **`scaffold(xml)`** reads any XML string and returns a nested node tree
 > - Every node knows its `role`, its `raw` source string, its `globalIndex` in the document, and its `localIndex` within its parent
 > - Tag nodes (`openTag`, `selfTag`) also carry `xmlTag`, `xmlInner`, and `xmlAttributes` — the parsed tag name, raw attribute string, and structured attribute array
-> - Broken XML is never thrown - malformed nodes are flagged with `malformed: true` in place and the tree is built regardless
+> - Broken XML is never thrown — malformed nodes are flagged with `malformed: true` in place and the tree is built regardless
+> - **`render(nodes)`** takes the scaffold output and converts it to an HTML string — every XML element becomes a `<div>` with `data-tag` and `data-attrs-*` attributes
 >
 > `v1.0.0` is when this package becomes what it says it is: a full XML-to-HTML converter. Everything before that is the work to get there.
 
@@ -69,6 +70,8 @@ npm install xml-to-html-converter
 
 ## Usage
 
+### Parsing XML into a node tree
+
 ```js
 import { scaffold } from "xml-to-html-converter";
 
@@ -131,6 +134,34 @@ const tree = scaffold(`
 ]
 ```
 
+### Converting the tree to HTML
+
+```js
+import { scaffold, render } from "xml-to-html-converter";
+
+const html = render(
+  scaffold(`
+  <bookstore>
+    <book category="cooking">
+      <title lang="en">Everyday Italian</title>
+    </book>
+  </bookstore>
+`),
+);
+```
+
+`render` walks the node tree and converts every XML element to a `<div>`. The original tag name is preserved in `data-tag` and each attribute becomes its own `data-attrs-*` attribute:
+
+```html
+<div data-tag="bookstore">
+  <div data-tag="book" data-attrs-category="cooking">
+    <div data-tag="title" data-attrs-lang="en">Everyday Italian</div>
+  </div>
+</div>
+```
+
+Processing instructions and doctypes are dropped. Comments are passed through unchanged.
+
 ---
 
 ## Node Shape
@@ -222,7 +253,7 @@ const tree = scaffold("<root><unclosed><valid>text</valid></root>");
 ## Exports
 
 ```ts
-import { scaffold, isMalformed } from "xml-to-html-converter";
+import { scaffold, render, isMalformed } from "xml-to-html-converter";
 import type {
   XmlNode,
   XmlNodeRole,
@@ -234,6 +265,7 @@ import type {
 | Export             | Kind     | Description                                         |
 | ------------------ | -------- | --------------------------------------------------- |
 | `scaffold`         | function | Parses an XML string and returns a node tree        |
+| `render`           | function | Converts a node tree to an HTML string              |
 | `isMalformed`      | function | Type guard, narrows `XmlNode` to `MalformedXmlNode` |
 | `XmlNode`          | type     | The shape of every node in the tree                 |
 | `XmlNodeRole`      | type     | Union of all valid role strings                     |

package/dist/index.cjs

@@ -0,0 +1,258 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  isMalformed: () => isMalformed,
+  render: () => render,
+  scaffold: () => scaffold
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/modules/render/render.ts
+function render(nodes) {
+  return nodes.map(renderNode).join("");
+}
+function renderNode(node) {
+  if (node.role === "textLeaf") return node.raw;
+  if (node.role === "comment") return node.raw;
+  if (node.role === "processingInstruction") return "";
+  if (node.role === "doctype") return "";
+  if (node.role === "closeTag") return "";
+  const tag = node.xmlTag ?? "";
+  const attrs = buildDataAttrs(node);
+  const attrsHtml = attrs ? ` ${attrs}` : "";
+  if (node.role === "selfTag") {
+    return `<div data-tag="${tag}"${attrsHtml}></div>`;
+  }
+  const children = render(node.children ?? []);
+  return `<div data-tag="${tag}"${attrsHtml}>${children}</div>`;
+}
+function buildDataAttrs(node) {
+  if (!node.xmlAttributes || node.xmlAttributes.length === 0) return "";
+  return node.xmlAttributes.map(({ name, value }) => `data-attrs-${name}="${value}"`).join(" ");
+}
+
+// src/modules/scaffold/scaffold.ts
+function parseXmlAttributes(xmlInner) {
+  const attributes = [];
+  let i = 0;
+  const s = xmlInner.trim();
+  while (i < s.length) {
+    while (i < s.length && /\s/.test(s[i])) i++;
+    if (i >= s.length) break;
+    const nameStart = i;
+    while (i < s.length && s[i] !== "=" && !/\s/.test(s[i])) i++;
+    const name = s.slice(nameStart, i).trim();
+    if (!name) break;
+    while (i < s.length && /\s/.test(s[i])) i++;
+    if (s[i] !== "=") break;
+    i++;
+    while (i < s.length && /\s/.test(s[i])) i++;
+    const quote = s[i];
+    if (quote !== '"' && quote !== "'") break;
+    i++;
+    const valueStart = i;
+    while (i < s.length && s[i] !== quote) i++;
+    const value = s.slice(valueStart, i);
+    i++;
+    attributes.push({ name, value });
+  }
+  return attributes.length > 0 ? attributes : void 0;
+}
+var MAX_DEPTH = 500;
+function scaffold(xml) {
+  const counter = { value: 0 };
+  const { xmlNodes } = collectXmlNodes(xml, 0, null, counter, 0);
+  return xmlNodes;
+}
+function collectXmlNodes(xml, position, parentTag, counter, depth) {
+  if (depth > MAX_DEPTH) return { xmlNodes: [], position, closed: false };
+  const xmlNodes = [];
+  while (position < xml.length) {
+    const xmlNodeData = extractXmlNodes(xml, position);
+    if (xmlNodeData.role === "textLeaf" && xmlNodeData.raw.trim() === "") {
+      position = xmlNodeData.end;
+      continue;
+    }
+    if (xmlNodeData.role === "closeTag") {
+      if (xmlNodeData.tag === parentTag)
+        return { xmlNodes, position: xmlNodeData.end, closed: true };
+      xmlNodes.push({
+        role: "closeTag",
+        raw: xmlNodeData.raw,
+        xmlTag: xmlNodeData.tag || void 0,
+        xmlInner: xmlNodeData.xmlInner,
+        globalIndex: counter.value++,
+        localIndex: xmlNodes.length,
+        malformed: true
+      });
+      position = xmlNodeData.end;
+      continue;
+    }
+    if (xmlNodeData.role === "openTag" && !xmlNodeData.malformed) {
+      const globalIndex = counter.value++;
+      const localIndex = xmlNodes.length;
+      const nested = collectXmlNodes(
+        xml,
+        xmlNodeData.end,
+        xmlNodeData.tag,
+        counter,
+        depth + 1
+      );
+      const xmlNode2 = {
+        role: "openTag",
+        raw: xmlNodeData.raw,
+        xmlTag: xmlNodeData.tag || void 0,
+        xmlInner: xmlNodeData.xmlInner,
+        xmlAttributes: xmlNodeData.xmlAttributes,
+        globalIndex,
+        localIndex,
+        children: nested.xmlNodes
+      };
+      if (!nested.closed) xmlNode2.malformed = true;
+      xmlNodes.push(xmlNode2);
+      position = nested.position;
+      continue;
+    }
+    const xmlNode = {
+      role: xmlNodeData.role,
+      raw: xmlNodeData.raw,
+      xmlTag: xmlNodeData.tag || void 0,
+      xmlInner: xmlNodeData.xmlInner,
+      xmlAttributes: xmlNodeData.xmlAttributes,
+      globalIndex: counter.value++,
+      localIndex: xmlNodes.length
+    };
+    if (xmlNodeData.malformed) xmlNode.malformed = true;
+    if (xmlNodeData.role === "openTag") xmlNode.children = [];
+    xmlNodes.push(xmlNode);
+    position = xmlNodeData.end;
+  }
+  return { xmlNodes, position, closed: parentTag === null };
+}
+function findTagClose(xml, position) {
+  let i = position;
+  while (i < xml.length) {
+    const ch = xml[i];
+    if (ch === '"' || ch === "'") {
+      const closeQuote = xml.indexOf(ch, i + 1);
+      i = closeQuote === -1 ? xml.length : closeQuote + 1;
+      continue;
+    }
+    if (ch === ">") return i;
+    i++;
+  }
+  return -1;
+}
+function extractXmlNodes(xml, position) {
+  if (xml[position] !== "<") {
+    const end2 = xml.indexOf("<", position);
+    return {
+      raw: xml.slice(position, end2 === -1 ? xml.length : end2),
+      role: "textLeaf",
+      tag: "",
+      end: end2 === -1 ? xml.length : end2
+    };
+  }
+  if (xml[position + 1] === "?") {
+    const end2 = xml.indexOf("?>", position + 2);
+    return end2 === -1 ? {
+      raw: xml.slice(position),
+      role: "processingInstruction",
+      tag: "",
+      end: xml.length
+    } : {
+      raw: xml.slice(position, end2 + 2),
+      role: "processingInstruction",
+      tag: "",
+      end: end2 + 2
+    };
+  }
+  if (xml[position + 1] === "!" && xml[position + 2] === "[") {
+    const end2 = xml.indexOf("]]>", position + 3);
+    return end2 === -1 ? { raw: xml.slice(position), role: "textLeaf", tag: "", end: xml.length } : {
+      raw: xml.slice(position, end2 + 3),
+      role: "textLeaf",
+      tag: "",
+      end: end2 + 3
+    };
+  }
+  if (xml[position + 1] === "!" && xml[position + 2] === "-" && xml[position + 3] === "-") {
+    const end2 = xml.indexOf("-->", position + 4);
+    return end2 === -1 ? { raw: xml.slice(position), role: "comment", tag: "", end: xml.length } : {
+      raw: xml.slice(position, end2 + 3),
+      role: "comment",
+      tag: "",
+      end: end2 + 3
+    };
+  }
+  if (xml.startsWith("<!DOCTYPE", position)) {
+    const bracketOpen = xml.indexOf("[", position);
+    const firstClose = xml.indexOf(">", position);
+    const hasBracket = bracketOpen !== -1 && bracketOpen < firstClose;
+    if (hasBracket) {
+      const bracketClose = xml.indexOf("]>", bracketOpen);
+      const end3 = bracketClose === -1 ? xml.length : bracketClose + 2;
+      return { raw: xml.slice(position, end3), role: "doctype", tag: "", end: end3 };
+    }
+    const end2 = firstClose === -1 ? xml.length : firstClose + 1;
+    return { raw: xml.slice(position, end2), role: "doctype", tag: "", end: end2 };
+  }
+  const closeAt = findTagClose(xml, position + 1);
+  if (closeAt === -1)
+    return {
+      raw: xml.slice(position),
+      role: "openTag",
+      tag: "",
+      end: xml.length,
+      malformed: true
+    };
+  const raw = xml.slice(position, closeAt + 1);
+  const end = closeAt + 1;
+  const inner = xml.slice(position + 1, closeAt).trim();
+  if (inner.startsWith("/")) {
+    const tag2 = inner.slice(1).trim().split(/\s/)[0] ?? "";
+    const xmlInner2 = inner.slice(1).trim().slice(tag2.length).trim() || void 0;
+    return { raw, role: "closeTag", tag: tag2, xmlInner: xmlInner2, end };
+  }
+  if (inner.endsWith("/")) {
+    const trimmed = inner.slice(0, -1).trim();
+    const tag2 = trimmed.split(/\s/)[0] ?? "";
+    const xmlInner2 = trimmed.slice(tag2.length).trim() || void 0;
+    const xmlAttributes2 = xmlInner2 ? parseXmlAttributes(xmlInner2) : void 0;
+    return { raw, role: "selfTag", tag: tag2, xmlInner: xmlInner2, xmlAttributes: xmlAttributes2, end };
+  }
+  const tag = inner.split(/\s/)[0] ?? "";
+  const xmlInner = inner.slice(tag.length).trim() || void 0;
+  const xmlAttributes = xmlInner ? parseXmlAttributes(xmlInner) : void 0;
+  return { raw, role: "openTag", tag, xmlInner, xmlAttributes, end };
+}
+
+// src/modules/scaffold/types.ts
+function isMalformed(node) {
+  return node.malformed === true;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  isMalformed,
+  render,
+  scaffold
+});

package/dist/index.d.cts

@@ -0,0 +1,26 @@
+interface XmlAttribute {
+    name: string;
+    value: string;
+}
+type XmlNodeRole = "closeTag" | "comment" | "doctype" | "openTag" | "processingInstruction" | "selfTag" | "textLeaf";
+interface XmlNode {
+    role: XmlNodeRole;
+    raw: string;
+    xmlTag?: string;
+    xmlInner?: string;
+    xmlAttributes?: XmlAttribute[];
+    globalIndex: number;
+    localIndex: number;
+    children?: XmlNode[];
+    malformed?: true;
+}
+type MalformedXmlNode = XmlNode & {
+    malformed: true;
+};
+declare function isMalformed(node: XmlNode): node is MalformedXmlNode;
+
+declare function render(nodes: XmlNode[]): string;
+
+declare function scaffold(xml: string): XmlNode[];
+
+export { type MalformedXmlNode, type XmlAttribute, type XmlNode, type XmlNodeRole, isMalformed, render, scaffold };

package/dist/index.d.ts

@@ -19,6 +19,8 @@ type MalformedXmlNode = XmlNode & {
 };
 declare function isMalformed(node: XmlNode): node is MalformedXmlNode;
 
+declare function render(nodes: XmlNode[]): string;
+
 declare function scaffold(xml: string): XmlNode[];
 
-export { type MalformedXmlNode, type XmlAttribute, type XmlNode, type XmlNodeRole, isMalformed, scaffold };
+export { type MalformedXmlNode, type XmlAttribute, type XmlNode, type XmlNodeRole, isMalformed, render, scaffold };

package/dist/index.js

@@ -1,3 +1,27 @@
+// src/modules/render/render.ts
+function render(nodes) {
+  return nodes.map(renderNode).join("");
+}
+function renderNode(node) {
+  if (node.role === "textLeaf") return node.raw;
+  if (node.role === "comment") return node.raw;
+  if (node.role === "processingInstruction") return "";
+  if (node.role === "doctype") return "";
+  if (node.role === "closeTag") return "";
+  const tag = node.xmlTag ?? "";
+  const attrs = buildDataAttrs(node);
+  const attrsHtml = attrs ? ` ${attrs}` : "";
+  if (node.role === "selfTag") {
+    return `<div data-tag="${tag}"${attrsHtml}></div>`;
+  }
+  const children = render(node.children ?? []);
+  return `<div data-tag="${tag}"${attrsHtml}>${children}</div>`;
+}
+function buildDataAttrs(node) {
+  if (!node.xmlAttributes || node.xmlAttributes.length === 0) return "";
+  return node.xmlAttributes.map(({ name, value }) => `data-attrs-${name}="${value}"`).join(" ");
+}
+
 // src/modules/scaffold/scaffold.ts
 function parseXmlAttributes(xmlInner) {
   const attributes = [];
@@ -200,5 +224,6 @@ function isMalformed(node) {
 }
 export {
   isMalformed,
+  render,
   scaffold
 };

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "xml-to-html-converter",
-  "version": "0.1.8",
+  "version": "0.3.0",
   "description": "Zero dependency XML to HTML converter for Node environments",
   "type": "module",
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
   },
   "files": [