Replace sax with htmlparser2

Sax is a common-js module and doesn't play nicely with bundling by
default. htmlparser2 is more forgiving, and comes with TypeScript types.

Author: gordonbrander

typescript/package-lock.json

@@ -26,7 +26,7 @@
     "./lib/index.js"
   ],
   "dependencies": {
-    "sax": "^1.4.1",
+    "htmlparser2": "^9.1.0",
     "vite": "^5.3.3"
   },
   "devDependencies": {

typescript/packages/common-html/package.json

@@ -1,58 +1,49 @@
-import sax from "sax";
+import { Parser } from "htmlparser2";
 import { parse as parseMustaches, isHole } from "./hole.js";
 import { create as createVNode, VNode, Props } from "./vnode.js";
 import * as logger from "./logger.js";
 
 /** Parse a template into a simple JSON markup representation */
 export const parse = (markup: string): VNode => {
-  const strict = false;
-  const parser = sax.parser(strict, {
-    trim: true,
-    lowercase: true,
-    xmlns: false,
-  });
-
   let root: VNode = createVNode("documentfragment");
   let stack: Array<VNode> = [root];
 
-  parser.onerror = (error: Error) => {
-    throw error;
-  };
-
-  parser.onopentag = (node) => {
-    // We've turned off the namespace feature, so node attributes will
-    // contain only string values, not QualifiedAttribute objects.
-    const props = parseProps(node.attributes as { [key: string]: string });
-    const next = createVNode(node.name, props);
-    const top = getTop(stack);
-    if (!top) {
-      throw new ParseError(`No parent tag for ${node.name}`);
-    }
-    top.children.push(next);
-    stack.push(next);
-  };
-
-  parser.onclosetag = (tagName) => {
-    const node = stack.pop();
-    if (!node) {
-      throw new ParseError(`Unexpected closing tag ${tagName}`);
-    }
-  };
-
-  parser.ontext = (text) => {
-    const top = getTop(stack);
-    const parsed = parseMustaches(text);
-    top.children.push(...parsed);
-  };
-
-  parser.write(markup).close();
-
-  if (getTop(stack) !== root) {
-    throw new ParseError(`Unexpected root node ${root.tag}`);
-  }
-
-  logger.debug("Parsed", root);
+  const parser = new Parser(
+    {
+      onopentag(name, attrs) {
+        logger.debug("Open", name, attrs);
+        // We've turned off the namespace feature, so node attributes will
+        // contain only string values, not QualifiedAttribute objects.
+        const props = parseProps(attrs as { [key: string]: string });
+        const next = createVNode(name, props);
+        const top = getTop(stack);
+        if (!top) {
+          throw new ParseError(`No parent tag for ${name}`);
+        }
+        top.children.push(next);
+        stack.push(next);
+      },
+      onclosetag(name) {
+        const vnode = stack.pop();
+        if (!vnode) {
+          throw new ParseError(`Unexpected closing tag ${name}`);
+        }
+      },
+      ontext(text) {
+        const top = getTop(stack);
+        const parsed = parseMustaches(text.trim());
+        top.children.push(...parsed);
+      },
+    },
+    {
+      lowerCaseTags: true,
+      lowerCaseAttributeNames: true,
+      xmlMode: false,
+    },
+  );
 
+  parser.write(markup);
+  parser.end();
   return root;
 };
 

typescript/packages/common-html/src/parser.ts

@@ -9,14 +9,11 @@ describe("html", () => {
     const text = state("Hello world!");
 
     const view = html`
-      <div class="container" hidden="{{hidden}}">
+      <div class="container">
         <button id="foo" onclick=${clicks}>${text}</button>
       </div>
     `;
 
-    // @ts-ignore - ignore for test
-    assert.strict(hole.isHole(view.template.props.hidden));
-
     // @ts-ignore - ignore for test
     assert.strict(hole.isHole(view.template.children[0].props.onclick));