@levischuck/tiny-html 0.0.1

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Levi Schuck
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,220 @@
+# tiny-html
+
+A minimal, dependency-free TypeScript HTML parser and renderer that is easily compatible with react, hono, preact.
+
+## Usage
+
+### Basic Parsing and Rendering
+
+```typescript
+import { readHtml, writeHtml, awaitHtmlNode } from '@levischuck/tiny-html';
+
+// Parse HTML into HtmlNode structure
+const result = readHtml('<div class="container"><h1>Hello</h1></div>');
+console.log(result.node); // HtmlNode structure
+console.log(result.doctype); // DOCTYPE if present
+console.log(result.xml); // XML declaration if present
+
+// Render HtmlNode back to HTML
+const html = writeHtml(result);
+// Output: <div className="container"><h1>Hello</h1></div>
+
+// Render with options
+const xhtml = writeHtml(result, { voidTrailingSlash: true });
+
+// You can also render HtmlNode directly (without parsing first)
+const node = { type: 'div', props: { children: 'Hello World' } };
+const output = writeHtml(node);
+// Output: <div>Hello World</div>
+
+// Handle async HtmlNode trees (with Promise children)
+const asyncNode = {
+  type: 'div',
+  props: {
+    children: [
+      Promise.resolve({ type: 'span', props: { children: 'Async content' } }),
+      'Regular content'
+    ]
+  }
+};
+const resolved = await awaitHtmlNode(asyncNode);
+const asyncHtml = writeHtml(resolved);
+```
+
+### Converting to Framework Elements
+
+Use `htmlNodeTo` to convert HtmlNode structures to React, Preact, or other framework elements:
+
+```typescript
+import { createElement } from 'react';
+import type { ReactNode } from 'react';
+import { readHtml, htmlNodeTo } from '@levischuck/tiny-html';
+
+const result = readHtml('<div><span>Hello React!</span></div>');
+const reactElement: ReactNode = htmlNodeTo(result.node, createElement);
+// Now you can render reactElement in your React component
+```
+
+This package provides a simple HTML parser and renderer with a structure compatible with React elements, making it easy to integrate with React-based rendering pipelines.
+
+## API
+
+### `readHtml(html: string): ParseResult`
+
+Parses an HTML string into a ParseResult containing HtmlNode elements.
+
+**Returns:**
+```typescript
+interface ParseResult {
+  xml?: string;           // XML declaration if present
+  doctype?: string;       // DOCTYPE declaration if present
+  node: HtmlNode | HtmlNode[];  // Parsed content as HtmlNode
+}
+```
+
+### `writeHtml(input: HtmlNode | ParseResult, options?: WriterOptions): string`
+
+Renders a HtmlNode or ParseResult back to an HTML string.
+
+**Parameters:**
+- `input: HtmlNode | ParseResult` - The content to render
+- `options?: WriterOptions` - Rendering options (see WriterOptions below)
+
+**Returns:** HTML string
+
+### `awaitHtmlNode(node: HtmlNode | Promise<HtmlNode>): Promise<HtmlNode>`
+
+Recursively awaits all Promise children in a HtmlNode tree. Useful for handling async content.
+
+**Parameters:**
+- `node: HtmlNode | Promise<HtmlNode>` - The node tree to resolve
+
+**Returns:** A new HtmlNode with all promises resolved
+
+**Note:** Incompatible types (functions, symbols) are dropped during resolution.
+
+### `htmlNodeTo<T>(node: HtmlNode, createElement: CreateElementFn<T>): T | null`
+
+Generic converter that transforms HtmlNode structures into any element type using a provided createElement function.
+
+**Parameters:**
+- `node: HtmlNode` - The HtmlNode to convert
+- `createElement: CreateElementFn<T>` - Function that creates elements of type T
+  - Signature: `(type: string, props: CreateElementProps, ...children: T[]) => T`
+
+**Returns:** Converted element of type T, or null
+
+**Example with React:**
+```typescript
+import { createElement } from 'react';
+import type { ReactNode } from 'react';
+import { readHtml, htmlNodeTo } from '@levischuck/tiny-html';
+
+const result = readHtml('<div><span>Hello</span></div>');
+const reactElement = htmlNodeTo<ReactNode>(result.node, createElement);
+```
+
+**Example with Preact:**
+```typescript
+import { h } from 'preact';
+import { readHtml, htmlNodeTo } from '@levischuck/tiny-html';
+
+const result = readHtml('<div><span>Hello</span></div>');
+const preactElement = htmlNodeTo(result.node, h);
+```
+
+## Types
+
+### `HtmlNode`
+
+The core type representing parsed HTML content:
+- HTML element: `{ type: string, props: HtmlProps }`
+- Primitives: `string`, `number`, `boolean`, `null`, `undefined`, `bigint`
+- Arrays: `HtmlNode[]`
+
+### `HtmlElement`
+
+```typescript
+interface HtmlElement {
+  type: string;
+  props: HtmlProps;
+}
+```
+
+### `HtmlProps`
+
+```typescript
+interface HtmlProps {
+  [key: string]: string | number | boolean | HtmlStyle | HtmlNode | Promise<HtmlNode>;
+  children?: HtmlNode | Promise<HtmlNode>;
+}
+```
+
+### `HtmlStyle`
+
+```typescript
+interface HtmlStyle {
+  [key: string]: string;
+}
+```
+
+### `CreateElementFn<T>`
+
+Type for createElement functions used with `htmlNodeTo`.
+
+```typescript
+type CreateElementFn<T> = (
+  type: string,
+  props: CreateElementProps,
+  ...children: T[]
+) => T;
+```
+
+### `CreateElementProps`
+
+Props object passed to createElement functions.
+
+```typescript
+type CreateElementProps = Record<string, any>;
+```
+
+### `ParseResult`
+
+```typescript
+interface ParseResult {
+  xml?: string;
+  doctype?: string;
+  node: HtmlNode | HtmlNode[];
+}
+```
+
+### `WriterOptions`
+
+Options for controlling HTML output formatting.
+
+```typescript
+interface WriterOptions {
+  useCDataForScripts?: boolean;  // Wrap <script> content in CDATA
+  useCDataForStyles?: boolean;   // Wrap <style> content in CDATA
+  xml?: string;                  // XML declaration to prepend
+  doctype?: string;              // DOCTYPE declaration to prepend
+  voidTrailingSlash?: boolean;   // Add trailing slash to void elements (e.g., <br />)
+}
+```
+
+**Options:**
+- `useCDataForScripts?: boolean` - When true, wraps `<script>` content in CDATA sections. Useful for XHTML output. Default: `false`
+- `useCDataForStyles?: boolean` - When true, wraps `<style>` content in CDATA sections. Useful for XHTML output. Default: `false`
+- `xml?: string` - XML declaration to prepend to the output (e.g., `<?xml version="1.0" encoding="UTF-8"?>`)
+- `doctype?: string` - DOCTYPE declaration to prepend to the output (e.g., `<!DOCTYPE html>`)
+- `voidTrailingSlash?: boolean` - When true, adds trailing slash to void elements like `<br/>`, `<img/>`. Useful for XHTML compatibility. Default: `false`
+
+## Why use this?
+
+There are many other great libraries to parse HTML.
+I need to process things on the edge and I can rely on this being fast and available on every platform I want to use it.
+Also.. I'm tired of writing little parsers here and there just to put them into a hono-jsx like format for post-processing.
+
+## License
+
+MIT Licensed.

package/dist/async-utils.d.ts

@@ -0,0 +1,10 @@
+import { HtmlNode } from './types';
+/**
+ * Recursively awaits all Promise children in a HtmlNode tree
+ * Returns a new HtmlNode with all promises resolved
+ * Incompatible types (functions, symbols, etc.) are dropped
+ *
+ * @param node - A HtmlNode that may contain promises
+ * @returns An HtmlNode with all promises resolved
+ */
+export declare function awaitReactNode(node: HtmlNode | Promise<HtmlNode>): Promise<HtmlNode>;

package/dist/constants.d.ts

@@ -0,0 +1,11 @@
+export declare const NAMESPACE_HTML = "http://www.w3.org/1999/xhtml";
+export declare const NAMESPACE_SVG = "http://www.w3.org/2000/svg";
+export declare const NAMESPACE_MATHML = "http://www.w3.org/1998/Math/MathML";
+export declare const VOID_ELEMENTS: Set<string>;
+export declare const NEVER_SELF_CLOSE: Set<string>;
+export declare const AUTO_CLOSING_SIBLINGS: Map<string, Set<string>>;
+export declare const WHITESPACE_SENSITIVE: Set<string>;
+export declare const SVG_TAG_CASE_MAP: Map<string, string>;
+export declare const SVG_ATTR_CASE_MAP: Map<string, string>;
+export declare const HTML_ENTITIES: Record<string, string>;
+export declare const CHAR_TO_ENTITY: Record<string, string>;

package/dist/convert.d.ts

@@ -0,0 +1,10 @@
+import { HtmlNode } from './types.ts';
+export type CreateElementProps = Record<string, any>;
+export type CreateElementFn<T> = (type: string, props: CreateElementProps, ...children: any[]) => T;
+/**
+ * Generic converter from HtmlNode to any element type T
+ * @param node - The HtmlNode to convert
+ * @param createElement - Function that creates elements of type T
+ * @returns Converted element of type T, or null
+ */
+export declare function htmlNodeTo<T>(node: HtmlNode, createElement: CreateElementFn<T>): T | null;

package/dist/entities.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Decodes HTML entities to their UTF-8 representation
+ * Handles named entities (<, >, &, etc.), decimal (<), and hex (<) entities
+ */
+export declare function decodeHtmlEntities(text: string): string;
+/**
+ * Encodes special characters as HTML entities
+ * @param text - The text to encode
+ * @param inAttribute - If true, also encode quotes
+ */
+export declare function encodeHtmlEntities(text: string, inAttribute?: boolean): string;
+/**
+ * Escape CDATA content - split ]]> into ]]]]><![CDATA[>
+ */
+export declare function escapeCData(content: string): string;

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import { ParseResult, HtmlNode, WriterOptions } from './types.ts';
+/**
+ * Parses HTML string into a ParseResult containing HtmlNode
+ */
+export declare function readHtml(html: string): ParseResult;
+/**
+ * Renders HtmlNode or ParseResult to HTML string
+ */
+export declare function writeHtml(input: HtmlNode | ParseResult, options?: WriterOptions): string;
+/**
+ * Recursively awaits all Promise children in a HtmlNode tree
+ * Returns a new HtmlNode with all promises resolved
+ */
+export declare function awaitHtmlNode(node: HtmlNode | Promise<HtmlNode>): Promise<HtmlNode>;
+export { htmlNodeTo } from './convert.ts';
+export type { CreateElementFn, CreateElementProps } from './convert.ts';
+export type { WriterOptions, ParseResult, HtmlNode, HtmlElement, HtmlProps, HtmlStyle } from './types.ts';

package/dist/index.js

@@ -0,0 +1,733 @@
+const F = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]), Q = /* @__PURE__ */ new Set([
+  // Containers
+  "div",
+  "span",
+  "p",
+  "section",
+  "article",
+  "aside",
+  "header",
+  "footer",
+  "nav",
+  "main",
+  // Forms
+  "button",
+  "textarea",
+  "select",
+  "label",
+  "form",
+  "fieldset",
+  "legend",
+  "optgroup",
+  // Lists
+  "ul",
+  "ol",
+  "li",
+  "dl",
+  "dt",
+  "dd",
+  // Script/style
+  "script",
+  "style",
+  // Formatting
+  "a",
+  "b",
+  "i",
+  "strong",
+  "em",
+  "u",
+  "s",
+  "del",
+  "ins",
+  "mark",
+  "small",
+  "sub",
+  "sup",
+  "code",
+  "kbd",
+  "samp",
+  "var",
+  "abbr",
+  "cite",
+  "dfn",
+  "q",
+  "time",
+  // Graphics
+  "canvas",
+  "svg",
+  // Tables
+  "table",
+  "tr",
+  "td",
+  "th",
+  "thead",
+  "tbody",
+  "tfoot",
+  "caption",
+  "colgroup",
+  // Headings
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  // Media
+  "video",
+  "audio",
+  "picture",
+  "figure",
+  "figcaption",
+  // Interactive
+  "details",
+  "summary",
+  "dialog",
+  // Other
+  "blockquote",
+  "pre",
+  "address",
+  "noscript",
+  "iframe",
+  "object",
+  "map",
+  "html",
+  "head",
+  "body",
+  "title",
+  "meta"
+]), q = /* @__PURE__ */ new Map([
+  ["p", /* @__PURE__ */ new Set(["p"])],
+  ["li", /* @__PURE__ */ new Set(["li"])],
+  ["dt", /* @__PURE__ */ new Set(["dt", "dd"])],
+  ["dd", /* @__PURE__ */ new Set(["dt", "dd"])],
+  ["option", /* @__PURE__ */ new Set(["option"])],
+  ["optgroup", /* @__PURE__ */ new Set(["optgroup"])],
+  ["thead", /* @__PURE__ */ new Set(["tbody", "tfoot"])],
+  ["tbody", /* @__PURE__ */ new Set(["thead", "tfoot"])],
+  ["tfoot", /* @__PURE__ */ new Set(["thead", "tbody"])],
+  ["tr", /* @__PURE__ */ new Set(["tr"])],
+  ["td", /* @__PURE__ */ new Set(["td", "th"])],
+  ["th", /* @__PURE__ */ new Set(["td", "th"])]
+]), V = /* @__PURE__ */ new Map([
+  ["altglyph", "altGlyph"],
+  ["altglyphdef", "altGlyphDef"],
+  ["altglyphitem", "altGlyphItem"],
+  ["animatecolor", "animateColor"],
+  ["animatemotion", "animateMotion"],
+  ["animatetransform", "animateTransform"],
+  ["clippath", "clipPath"],
+  ["feblend", "feBlend"],
+  ["fecolormatrix", "feColorMatrix"],
+  ["fecomponenttransfer", "feComponentTransfer"],
+  ["fecomposite", "feComposite"],
+  ["feconvolvematrix", "feConvolveMatrix"],
+  ["fediffuselighting", "feDiffuseLighting"],
+  ["fedisplacementmap", "feDisplacementMap"],
+  ["fedistantlight", "feDistantLight"],
+  ["fedropshadow", "feDropShadow"],
+  ["feflood", "feFlood"],
+  ["fefunca", "feFuncA"],
+  ["fefuncb", "feFuncB"],
+  ["fefuncg", "feFuncG"],
+  ["fefuncr", "feFuncR"],
+  ["fegaussianblur", "feGaussianBlur"],
+  ["feimage", "feImage"],
+  ["femerge", "feMerge"],
+  ["femergenode", "feMergeNode"],
+  ["femorphology", "feMorphology"],
+  ["feoffset", "feOffset"],
+  ["fepointlight", "fePointLight"],
+  ["fespecularlighting", "feSpecularLighting"],
+  ["fespotlight", "feSpotLight"],
+  ["fetile", "feTile"],
+  ["feturbulence", "feTurbulence"],
+  ["foreignobject", "foreignObject"],
+  ["glyphref", "glyphRef"],
+  ["lineargradient", "linearGradient"],
+  ["radialgradient", "radialGradient"],
+  ["textpath", "textPath"]
+]), z = /* @__PURE__ */ new Map([
+  ["attributename", "attributeName"],
+  ["attributetype", "attributeType"],
+  ["basefrequency", "baseFrequency"],
+  ["baseprofile", "baseProfile"],
+  ["calcmode", "calcMode"],
+  ["clippathunits", "clipPathUnits"],
+  ["diffuseconstant", "diffuseConstant"],
+  ["edgemode", "edgeMode"],
+  ["filterunits", "filterUnits"],
+  ["glyphref", "glyphRef"],
+  ["gradienttransform", "gradientTransform"],
+  ["gradientunits", "gradientUnits"],
+  ["kernelmatrix", "kernelMatrix"],
+  ["kernelunitlength", "kernelUnitLength"],
+  ["keypoints", "keyPoints"],
+  ["keysplines", "keySplines"],
+  ["keytimes", "keyTimes"],
+  ["lengthadjust", "lengthAdjust"],
+  ["limitingconeangle", "limitingConeAngle"],
+  ["markerheight", "markerHeight"],
+  ["markerunits", "markerUnits"],
+  ["markerwidth", "markerWidth"],
+  ["maskcontentunits", "maskContentUnits"],
+  ["maskunits", "maskUnits"],
+  ["numoctaves", "numOctaves"],
+  ["pathlength", "pathLength"],
+  ["patterncontentunits", "patternContentUnits"],
+  ["patterntransform", "patternTransform"],
+  ["patternunits", "patternUnits"],
+  ["pointsatx", "pointsAtX"],
+  ["pointsaty", "pointsAtY"],
+  ["pointsatz", "pointsAtZ"],
+  ["preservealpha", "preserveAlpha"],
+  ["preserveaspectratio", "preserveAspectRatio"],
+  ["primitiveunits", "primitiveUnits"],
+  ["refx", "refX"],
+  ["refy", "refY"],
+  ["repeatcount", "repeatCount"],
+  ["repeatdur", "repeatDur"],
+  ["requiredextensions", "requiredExtensions"],
+  ["requiredfeatures", "requiredFeatures"],
+  ["specularconstant", "specularConstant"],
+  ["specularexponent", "specularExponent"],
+  ["spreadmethod", "spreadMethod"],
+  ["startoffset", "startOffset"],
+  ["stddeviation", "stdDeviation"],
+  ["stitchtiles", "stitchTiles"],
+  ["surfacescale", "surfaceScale"],
+  ["systemlanguage", "systemLanguage"],
+  ["tablevalues", "tableValues"],
+  ["targetx", "targetX"],
+  ["targety", "targetY"],
+  ["textlength", "textLength"],
+  ["viewbox", "viewBox"],
+  ["viewtarget", "viewTarget"],
+  ["xchannelselector", "xChannelSelector"],
+  ["ychannelselector", "yChannelSelector"],
+  ["zoomandpan", "zoomAndPan"]
+]), I = {
+  lt: "<",
+  gt: ">",
+  amp: "&",
+  quot: '"',
+  apos: "'",
+  nbsp: " ",
+  iexcl: "¡",
+  cent: "¢",
+  pound: "£",
+  curren: "¤",
+  yen: "¥",
+  brvbar: "¦",
+  sect: "§",
+  uml: "¨",
+  copy: "©",
+  ordf: "ª",
+  laquo: "«",
+  not: "¬",
+  shy: "­",
+  reg: "®",
+  macr: "¯",
+  deg: "°",
+  plusmn: "±",
+  sup2: "²",
+  sup3: "³",
+  acute: "´",
+  micro: "µ",
+  para: "¶",
+  middot: "·",
+  cedil: "¸",
+  sup1: "¹",
+  ordm: "º",
+  raquo: "»",
+  frac14: "¼",
+  frac12: "½",
+  frac34: "¾",
+  iquest: "¿",
+  times: "×",
+  divide: "÷",
+  ndash: "–",
+  mdash: "—",
+  lsquo: "‘",
+  rsquo: "’",
+  sbquo: "‚",
+  ldquo: "“",
+  rdquo: "”",
+  bdquo: "„",
+  dagger: "†",
+  Dagger: "‡",
+  bull: "•",
+  hellip: "…",
+  permil: "‰",
+  prime: "′",
+  Prime: "″",
+  lsaquo: "‹",
+  rsaquo: "›",
+  oline: "‾",
+  frasl: "⁄",
+  euro: "€",
+  trade: "™",
+  larr: "←",
+  uarr: "↑",
+  rarr: "→",
+  darr: "↓",
+  harr: "↔",
+  lArr: "⇐",
+  uArr: "⇑",
+  rArr: "⇒",
+  dArr: "⇓",
+  hArr: "⇔"
+}, B = {};
+for (const [e, r] of Object.entries(I))
+  B[r] || (B[r] = e);
+function v(e) {
+  return !e || typeof e != "string" || !e.includes("&") ? e : e.replace(/&(?:#[xX]([0-9a-fA-F]+)|#(\d+)|([a-zA-Z][a-zA-Z0-9]*));/g, (r, n, u, f) => {
+    if (n) {
+      const a = parseInt(n, 16);
+      return String.fromCodePoint(a);
+    } else if (u) {
+      const a = parseInt(u, 10);
+      return String.fromCodePoint(a);
+    } else if (f && I[f])
+      return I[f];
+    return r;
+  });
+}
+function G(e, r = !1) {
+  if (!e || typeof e != "string")
+    return e;
+  let n = e;
+  return n = n.replace(/&/g, "&amp;"), n = n.replace(/</g, "&lt;"), n = n.replace(/>/g, "&gt;"), r && (n = n.replace(/"/g, "&quot;")), n;
+}
+function Z(e) {
+  return e.replace(/\]\]>/g, "]]]]><![CDATA[>");
+}
+function k(e) {
+  return e.replace(/[-_]([a-z])/g, (r, n) => n.toUpperCase());
+}
+function $(e) {
+  return e.replace(/[A-Z]/g, (r) => `-${r.toLowerCase()}`);
+}
+function y(e, r, n) {
+  return new TextDecoder("utf-8").decode(e.slice(r, n));
+}
+function S(e) {
+  return e === 32 || e === 9 || e === 10 || e === 13;
+}
+function N(e) {
+  return e >= 97 && e <= 122 || // a-z
+  e >= 65 && e <= 90 || // A-Z
+  e >= 48 && e <= 57 || // 0-9
+  e === 45 || // -
+  e === 95 || // _
+  e === 58;
+}
+function K(e) {
+  const n = new TextEncoder().encode(e), u = {
+    node: []
+  }, f = [], a = [];
+  let c = "HTML", i = "TEXT", t = 0, p = 0, g = 0, A = 0, E = 0, d = "", P = 0, h = null;
+  function M() {
+    return a.length > 0 ? a[a.length - 1].children : f;
+  }
+  function X(s, o) {
+    if (s >= o) return;
+    const l = y(n, s, o), T = v(l);
+    T.length > 0 && M().push(T);
+  }
+  function U(s, o) {
+    if (s >= o) return;
+    const l = y(n, s, o);
+    l.length > 0 && M().push(l);
+  }
+  function C(s, o) {
+    const l = s.toLowerCase();
+    return o === "SVG" && V.has(l) ? V.get(l) : l;
+  }
+  function _(s, o) {
+    const l = s.toLowerCase();
+    if (l === "class") return "className";
+    if (l === "for") return "htmlFor";
+    if (o === "SVG")
+      return z.has(l) ? z.get(l) : s;
+    if (o === "HTML") {
+      const T = k(l);
+      return l === "class" || l === "for" ? l === "class" ? "className" : "htmlFor" : T;
+    }
+    return l;
+  }
+  function R(s) {
+    const o = C(s, c);
+    for (let l = a.length - 1; l >= 0; l--)
+      if (a[l].type === o) {
+        for (let T = a.length - 1; T >= l; T--) {
+          const m = a.pop(), b = {
+            type: m.type,
+            props: {
+              ...m.props,
+              children: m.children.length === 1 ? m.children[0] : m.children
+            }
+          };
+          a.length > 0 ? a[a.length - 1].children.push(b) : f.push(b), (m.type === "svg" || m.type === "math") && (c = "HTML");
+        }
+        return;
+      }
+  }
+  function w(s, o, l) {
+    const T = C(s, c);
+    if (a.length > 0 && q.has(T)) {
+      const b = q.get(T), j = a[a.length - 1].type;
+      b.has(j) && R(j);
+    }
+    let m = c;
+    if (T === "svg" ? m = "SVG" : T === "math" && (m = "MATHML"), F.has(T) || l) {
+      const b = {
+        type: T,
+        props: o
+      };
+      M().push(b);
+    } else {
+      const b = {
+        type: T,
+        props: o,
+        children: [],
+        namespace: m
+      };
+      a.push(b), c = m;
+    }
+  }
+  for (; t < n.length; ) {
+    const s = n[t];
+    switch (i) {
+      case "TEXT":
+        s === 60 && (X(p, t), i = "TAG_OPEN"), t++;
+        break;
+      case "TAG_OPEN":
+        s === 33 ? n[t + 1] === 45 && n[t + 2] === 45 ? (i = "COMMENT", t += 3) : n[t + 1] === 68 || n[t + 1] === 100 ? y(n, t, Math.min(t + 20, n.length)).toLowerCase().startsWith("!doctype") ? (i = "DOCTYPE", g = t, t++) : (p = t - 1, i = "TEXT") : n[t + 1] === 91 && n[t + 2] === 67 && y(n, t, Math.min(t + 9, n.length)).startsWith("![CDATA[") ? (i = "CDATA", p = t + 8, t += 8) : (p = t - 1, i = "TEXT") : s === 63 ? (i = "PROCESSING_INSTRUCTION", g = t - 1, t++) : s === 47 ? (i = "TAG_CLOSE_START", t++) : N(s) ? (g = t, i = "TAG_NAME", h = null, t++) : (p = t - 1, i = "TEXT");
+        break;
+      case "TAG_NAME":
+        if (S(s)) {
+          const o = y(n, g, t), l = o.toLowerCase();
+          h = {
+            type: o,
+            props: {},
+            children: [],
+            namespace: l === "svg" ? "SVG" : l === "math" ? "MATHML" : c
+          }, i = "ATTRIBUTES", t++;
+        } else if (s === 62) {
+          const o = y(n, g, t);
+          w(o, {}, !1);
+          const l = C(o, c);
+          l === "script" ? (i = "SCRIPT_CONTENT", p = t + 1) : l === "style" ? (i = "STYLE_CONTENT", p = t + 1) : (i = "TEXT", p = t + 1), t++;
+        } else s === 47 ? (i = "TAG_CLOSE_SELF", t++) : N(s) ? t++ : (p = g - 1, i = "TEXT");
+        break;
+      case "ATTRIBUTES":
+        if (S(s))
+          t++;
+        else if (s === 62) {
+          const o = h.type;
+          w(o, h.props, !1);
+          const l = C(o, c);
+          l === "script" ? (i = "SCRIPT_CONTENT", p = t + 1) : l === "style" ? (i = "STYLE_CONTENT", p = t + 1) : (i = "TEXT", p = t + 1), t++;
+        } else s === 47 ? (i = "TAG_CLOSE_SELF", t++) : N(s) ? (A = t, i = "ATTRIBUTE_NAME", t++) : (p = g - 1, i = "TEXT");
+        break;
+      case "ATTRIBUTE_NAME":
+        if (S(s)) {
+          d = y(n, A, t);
+          const o = _(d, h.namespace);
+          h.props[o] = !0, d = "", i = "ATTRIBUTES", t++;
+        } else if (s === 61)
+          d = y(n, A, t), i = "ATTRIBUTE_VALUE_START", t++;
+        else if (s === 62) {
+          d = y(n, A, t);
+          const o = _(d, h.namespace);
+          h.props[o] = !0, d = "";
+          const l = h.type;
+          w(l, h.props, !1);
+          const T = C(l, c);
+          T === "script" ? (i = "SCRIPT_CONTENT", p = t + 1) : T === "style" ? (i = "STYLE_CONTENT", p = t + 1) : (i = "TEXT", p = t + 1), t++;
+        } else if (s === 47) {
+          d = y(n, A, t);
+          const o = _(d, h.namespace);
+          h.props[o] = !0, d = "", i = "TAG_CLOSE_SELF", t++;
+        } else N(s) ? t++ : (p = g - 1, i = "TEXT");
+        break;
+      case "ATTRIBUTE_VALUE_START":
+        S(s) ? t++ : s === 34 || s === 39 ? (P = s, E = t + 1, i = "ATTRIBUTE_VALUE_QUOTED", t++) : (E = t, i = "ATTRIBUTE_VALUE_UNQUOTED");
+        break;
+      case "ATTRIBUTE_VALUE_QUOTED":
+        if (s === P) {
+          const o = y(n, E, t), l = v(o), T = _(d, h.namespace);
+          T === "style" ? h.props[T] = D(l) : h.props[T] = l, d = "", i = "ATTRIBUTES", t++;
+        } else
+          t++;
+        break;
+      case "ATTRIBUTE_VALUE_UNQUOTED":
+        if (S(s) || s === 62 || s === 47) {
+          const o = y(n, E, t), l = v(o), T = _(d, h.namespace);
+          T === "style" ? h.props[T] = D(l) : h.props[T] = l, d = "", i = "ATTRIBUTES";
+        } else
+          t++;
+        break;
+      case "TAG_CLOSE_SELF":
+        if (s === 62) {
+          const o = h.type;
+          w(o, h.props, !0), i = "TEXT", p = t + 1, t++;
+        } else
+          p = g - 1, i = "TEXT";
+        break;
+      case "TAG_CLOSE_START":
+        N(s) ? (g = t, i = "TAG_CLOSE_NAME", t++) : (p = t - 2, i = "TEXT");
+        break;
+      case "TAG_CLOSE_NAME":
+        if (s === 62) {
+          const o = y(n, g, t);
+          R(o), i = "TEXT", p = t + 1, t++;
+        } else S(s) || N(s) ? t++ : (p = g - 2, i = "TEXT");
+        break;
+      case "COMMENT":
+        s === 45 && n[t + 1] === 45 && n[t + 2] === 62 ? (i = "TEXT", p = t + 3, t += 3) : t++;
+        break;
+      case "DOCTYPE":
+        if (s === 62) {
+          const o = y(n, g, t + 1);
+          u.doctype = "<" + o, i = "TEXT", p = t + 1, t++;
+        } else
+          t++;
+        break;
+      case "CDATA":
+        s === 93 && n[t + 1] === 93 && n[t + 2] === 62 ? (U(p, t), i = "TEXT", p = t + 3, t += 3) : t++;
+        break;
+      case "PROCESSING_INSTRUCTION":
+        if (s === 63 && n[t + 1] === 62) {
+          const o = y(n, g, t + 2);
+          u.xml = o, i = "TEXT", p = t + 2, t += 2;
+        } else
+          t++;
+        break;
+      case "SCRIPT_CONTENT":
+      case "STYLE_CONTENT":
+        if (s === 60 && n[t + 1] === 47) {
+          const o = i === "SCRIPT_CONTENT" ? "script" : "style", l = "</" + o, T = y(n, t, Math.min(t + l.length + 1, n.length)).toLowerCase();
+          if (T.startsWith(l) && (T[l.length] === ">" || S(T.charCodeAt(l.length)))) {
+            U(p, t);
+            let m = t + l.length;
+            for (; m < n.length && n[m] !== 62; ) m++;
+            R(o), i = "TEXT", p = m + 1, t = m + 1;
+          } else
+            t++;
+        } else
+          t++;
+        break;
+      default:
+        t++;
+    }
+  }
+  for (i === "TEXT" ? X(p, t) : (i === "SCRIPT_CONTENT" || i === "STYLE_CONTENT") && U(p, t); a.length > 0; ) {
+    const s = a.pop(), o = {
+      type: s.type,
+      props: {
+        ...s.props,
+        children: s.children.length === 1 ? s.children[0] : s.children
+      }
+    };
+    a.length > 0 ? a[a.length - 1].children.push(o) : f.push(o);
+  }
+  return f.length === 0 ? u.node = null : f.length === 1 ? u.node = f[0] : u.node = f, u;
+}
+function D(e) {
+  const r = {}, u = v(e).split(/;(?![^(]*\))/);
+  for (const f of u) {
+    const a = f.indexOf(":");
+    if (a === -1) continue;
+    const c = f.substring(0, a).trim(), i = f.substring(a + 1).trim();
+    c && i && (r[k(c)] = i);
+  }
+  return r;
+}
+function H(e, r = {}) {
+  const n = [];
+  let u, f, a;
+  if (e && typeof e == "object" && "node" in e) {
+    const p = e;
+    u = p.node, f = p.xml ?? r.xml, a = p.doctype ?? r.doctype;
+  } else
+    u = e, f = r.xml, a = r.doctype;
+  f && (n.push(f), f.endsWith(`
+`) || n.push(`
+`)), a && (n.push(a), a.endsWith(`
+`) || n.push(`
+`));
+  const c = r.useCDataForScripts ?? !1, i = r.useCDataForStyles ?? !1, t = r.voidTrailingSlash ?? !0;
+  return O(u, n, "HTML", c, i, t), n.join("");
+}
+function O(e, r, n, u, f, a) {
+  if (e != null) {
+    if (typeof e == "string") {
+      r.push(G(e, !1));
+      return;
+    }
+    if (typeof e == "number" || typeof e == "bigint") {
+      r.push(String(e));
+      return;
+    }
+    if (typeof e == "boolean") {
+      r.push(String(e));
+      return;
+    }
+    if (Array.isArray(e)) {
+      for (const c of e)
+        O(c, r, n, u, f, a);
+      return;
+    }
+    if (typeof e != "function" && typeof e != "symbol" && !(e && typeof e == "object" && "then" in e && typeof e.then == "function") && e && typeof e == "object" && "type" in e && "props" in e) {
+      J(e, r, n, u, f, a);
+      return;
+    }
+  }
+}
+function J(e, r, n, u, f, a) {
+  var g;
+  const c = e.type;
+  let i = n;
+  if (c === "svg" ? i = "SVG" : c === "math" && (i = "MATHML"), r.push("<"), r.push(c), e.props) {
+    for (const [A, E] of Object.entries(e.props))
+      if (A !== "children" && !(E === !1 || E === null || E === void 0))
+        if (E === !0)
+          r.push(" "), r.push(A);
+        else if (A === "style" && typeof E == "object") {
+          const d = ee(E);
+          d && (r.push(' style="'), r.push(G(d, !0)), r.push('"'));
+        } else
+          r.push(" "), r.push(A), r.push('="'), r.push(G(String(E), !0)), r.push('"');
+  }
+  const t = (g = e.props) == null ? void 0 : g.children;
+  let p;
+  if (t && typeof t == "object" && "then" in t && typeof t.then == "function" ? p = !1 : p = t != null && (Array.isArray(t) && t.length > 0 || !Array.isArray(t) && t !== !1), F.has(c))
+    a ? r.push(" />") : r.push(">");
+  else if (p) {
+    r.push(">");
+    const A = t;
+    c === "script" && u || c === "style" && f ? (r.push("<![CDATA["), x(A, r, i, u, f, a), r.push("]]>")) : c === "script" || c === "style" ? W(A, r) : O(A, r, i, u, f, a), r.push("</"), r.push(c), r.push(">");
+  } else Q.has(c), r.push("></"), r.push(c), r.push(">");
+}
+function x(e, r, n, u, f, a, c) {
+  if (e != null) {
+    if (typeof e == "string") {
+      r.push(Z(e));
+      return;
+    }
+    if (typeof e == "number" || typeof e == "bigint" || typeof e == "boolean") {
+      r.push(String(e));
+      return;
+    }
+    if (Array.isArray(e)) {
+      for (const i of e)
+        x(i, r, n, u, f, a);
+      return;
+    }
+    O(e, r, n, u, f, a);
+  }
+}
+function W(e, r) {
+  if (e != null) {
+    if (typeof e == "string") {
+      r.push(e);
+      return;
+    }
+    if (typeof e == "number" || typeof e == "bigint" || typeof e == "boolean") {
+      r.push(String(e));
+      return;
+    }
+    if (Array.isArray(e)) {
+      for (const n of e)
+        W(n, r);
+      return;
+    }
+  }
+}
+function ee(e) {
+  const r = [];
+  for (const [n, u] of Object.entries(e))
+    if (u) {
+      const f = $(n);
+      r.push(`${f}: ${u}`);
+    }
+  return r.join("; ");
+}
+async function L(e) {
+  if (e == null)
+    return e;
+  if (e && typeof e == "object" && "then" in e && typeof e.then == "function") {
+    const r = await e;
+    return L(r);
+  }
+  if (typeof e == "string" || typeof e == "number" || typeof e == "boolean" || typeof e == "bigint")
+    return e;
+  if (typeof e != "function" && typeof e != "symbol") {
+    if (Array.isArray(e))
+      return await Promise.all(
+        e.filter((n) => !(n == null || typeof n == "function" || typeof n == "symbol")).map((n) => L(n))
+      );
+    if (e && typeof e == "object" && "type" in e && "props" in e) {
+      const r = e, n = {};
+      for (const [u, f] of Object.entries(r.props))
+        if (u === "children") {
+          const a = await L(f);
+          a != null && (n.children = a);
+        } else {
+          if (typeof f == "function" || typeof f == "symbol")
+            continue;
+          f != null && (n[u] = f);
+        }
+      return {
+        type: r.type,
+        props: n
+      };
+    }
+  }
+}
+function Y(e, r) {
+  if (e == null || typeof e == "string" || typeof e == "number" || typeof e == "boolean" || typeof e == "bigint")
+    return e;
+  if (Array.isArray(e))
+    return e.map((n) => Y(n, r));
+  if (typeof e == "object" && "type" in e && "props" in e) {
+    const { type: n, props: u } = e, { children: f, ...a } = u;
+    if (f !== void 0) {
+      const c = Y(f, r);
+      return c === null ? r(n, a) : Array.isArray(c) ? r(n, a, ...c) : r(n, a, c);
+    }
+    return r(n, a);
+  }
+  return null;
+}
+function te(e) {
+  return K(e);
+}
+function re(e, r = {}) {
+  return e && typeof e == "object" && "node" in e ? H(e, r) : e === void 0 ? "" : H(e, r);
+}
+async function ne(e) {
+  return await L(e);
+}
+export {
+  ne as awaitHtmlNode,
+  Y as htmlNodeTo,
+  te as readHtml,
+  re as writeHtml
+};

package/dist/parser.d.ts

@@ -0,0 +1,2 @@
+import { ParseResult } from './types.ts';
+export declare function parseHtml(html: string): ParseResult;

package/dist/types.d.ts

@@ -0,0 +1,54 @@
+export interface HtmlStyle {
+    [key: string]: string;
+}
+export interface HtmlElement {
+    type: string;
+    props: HtmlProps;
+}
+export interface HtmlProps {
+    [key: string]: string | number | boolean | HtmlStyle | HtmlNode | Promise<HtmlNode>;
+    children?: HtmlNode | Promise<HtmlNode>;
+}
+export type HtmlNode = HtmlElement | string | number | bigint | boolean | null | undefined | HtmlNode[];
+export declare enum ParserState {
+    TEXT = "TEXT",
+    TAG_OPEN = "TAG_OPEN",
+    TAG_NAME = "TAG_NAME",
+    ATTRIBUTES = "ATTRIBUTES",
+    ATTRIBUTE_NAME = "ATTRIBUTE_NAME",
+    ATTRIBUTE_VALUE_START = "ATTRIBUTE_VALUE_START",
+    ATTRIBUTE_VALUE_QUOTED = "ATTRIBUTE_VALUE_QUOTED",
+    ATTRIBUTE_VALUE_UNQUOTED = "ATTRIBUTE_VALUE_UNQUOTED",
+    TAG_CLOSE_SELF = "TAG_CLOSE_SELF",
+    TAG_CLOSE_START = "TAG_CLOSE_START",
+    TAG_CLOSE_NAME = "TAG_CLOSE_NAME",
+    COMMENT = "COMMENT",
+    DOCTYPE = "DOCTYPE",
+    CDATA = "CDATA",
+    PROCESSING_INSTRUCTION = "PROCESSING_INSTRUCTION",
+    SCRIPT_CONTENT = "SCRIPT_CONTENT",
+    STYLE_CONTENT = "STYLE_CONTENT"
+}
+export declare enum Namespace {
+    HTML = "HTML",
+    SVG = "SVG",
+    MATHML = "MATHML"
+}
+export interface ElementStackEntry {
+    type: string;
+    props: Partial<HtmlProps>;
+    children: HtmlNode[];
+    namespace: Namespace;
+}
+export interface ParseResult {
+    xml?: string;
+    doctype?: string;
+    node: HtmlNode | HtmlNode[];
+}
+export interface WriterOptions {
+    useCDataForScripts?: boolean;
+    useCDataForStyles?: boolean;
+    xml?: string;
+    doctype?: string;
+    voidTrailingSlash?: boolean;
+}

package/dist/utils.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Converts a kebab-case or snake_case string to camelCase
+ * @example toCamelCase("foo-bar") => "fooBar"
+ * @example toCamelCase("background-color") => "backgroundColor"
+ */
+export declare function toCamelCase(str: string): string;
+/**
+ * Converts a camelCase string to kebab-case
+ * @example toKebabCase("fooBar") => "foo-bar"
+ * @example toKebabCase("backgroundColor") => "background-color"
+ */
+export declare function toKebabCase(str: string): string;
+/**
+ * Efficient string builder using array accumulation
+ */
+export declare class StringBuilder {
+    private chunks;
+    append(str: string): void;
+    toString(): string;
+    clear(): void;
+    get length(): number;
+}
+/**
+ * Decodes a UTF-8 byte sequence to a string
+ */
+export declare function decodeUtf8(bytes: Uint8Array, start: number, end: number): string;
+/**
+ * Checks if a character code is whitespace
+ */
+export declare function isWhitespace(code: number): boolean;
+/**
+ * Checks if a character code is valid for tag/attribute names
+ */
+export declare function isNameChar(code: number): boolean;

package/dist/writer.d.ts

@@ -0,0 +1,2 @@
+import { HtmlNode, WriterOptions, ParseResult } from './types.ts';
+export declare function renderHtml(input: HtmlNode | ParseResult, options?: WriterOptions): string;

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@levischuck/tiny-html",
+  "version": "0.0.1",
+  "type": "module",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LeviSchuck/tiny-packages",
+    "directory": "packages/tiny-html"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE.txt"
+  ],
+  "keywords": [
+    "html",
+    "parser",
+    "react"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "type-check": "bunx tsc --noEmit",
+    "build:jsr": "echo Nothing to build",
+    "lint": "oxlint -c ../../.oxlintrc.json"
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  }
+}