Merge branch 'release/v0.17.6'

Author: holtwick

.gitignore

@@ -6,4 +6,5 @@ tmp
 *.log
 .out* 
 coverage
-Icon?
+Icon?
+*.cpuprofile

package.json

@@ -1,7 +1,7 @@
 {
   "name": "zeed-dom",
   "type": "module",
-  "version": "0.17.5",
+  "version": "0.17.6",
   "description": "🌱 Lightweight offline DOM",
   "author": {
     "name": "Dirk Holtwick",
@@ -61,7 +61,12 @@
     "clean": "rm -rf dist",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
+    "perf": "tsx test/files-bench.ts",
+    "perf:files": "tsx test/files-bench.ts",
+    "perf:parser": "tsx test/htmlparser-bench.ts",
     "prepublishOnly": "npm test && npm run build",
+    "profile:parser": "tsx --cpu-prof test/htmlparser-bench.ts",
+    "inspect:parser": "tsx --inspect-brk test/htmlparser-bench.ts",
     "start": "npm run watch",
     "test": "vitest src --coverage --globals --run",
     "watch": "npm run build:tsup -- --watch"
@@ -78,6 +83,7 @@
     "c8": "^10.1.3",
     "eslint": "^9.31.0",
     "tsup": "^8.5.0",
+    "tsx": "^4.20.3",
     "typedoc": "^0.28.7",
     "typescript": "^5.8.3",
     "vite": "^7.0.5",

src/htmlparser.ts

@@ -1,87 +1,59 @@
-// Taken from https://github.com/creeperyang/html-parser-lite
-// and slightly modified. Original also under MIT license. Thanks.
-
-// attribute, like href="javascript:void(0)"
-// 1. start with name (not empty and not =)
-// 2. and then \s*=\s*
-// 3. and value can be "value" | 'value' | value
-// 4. 2 and 3 are optional
-const attrRe = /([^=\s]+)(\s*=\s*(("([^"]*)")|('([^']*)')|[^>\s]+))?/g
-const endTagRe = /^<\/([^>\s]+)[^>]*>/m
-// start tag, like <a href="link"> <img/>
-// 1. must start with <tagName
-// 2. optional attrbutes
-// 3. /> or >
-const startTagRe = /^<([^>\s/]+)((\s+[^=>\s]+(\s*=\s*(("[^"]*")|('[^']*')|[^>\s]+))?)*)\s*(?:\/\s*)?>/m
-const selfCloseTagRe = /\s*\/\s*>\s*$/m
+export interface HtmlParserScanner {
+  characters: (text: string) => void
+  comment: (text: string) => void
+  startElement: (tagName: string, attrs: Record<string, any>, isSelfColse: boolean, raw: string) => void
+  endElement: (tagName: string) => void
+}
 
 /**
  * This is a simple html parser. Will read and parse html string.
  *
  * Original code by Erik Arvidsson, Mozilla Public License
  * http://erik.eae.net/simplehtmlparser/simplehtmlparser.js
  */
-export class HtmlParser {
-  scanner: any
-  options: any
-  attrRe = attrRe
-  endTagRe = endTagRe
-  startTagRe = startTagRe
-  defaults = { ignoreWhitespaceText: false }
-
-  constructor(options: {
-    scanner?: any
-    ignoreWhitespaceText?: boolean
-  } = {}) {
-    this.scanner = options.scanner
-    // Faster object merge for simple case
-    this.options = options.ignoreWhitespaceText !== undefined
-      ? options
-      : { ...this.defaults, ...options }
-  }
+export function createHtmlParser(scanner: HtmlParserScanner) {
+  const attrRe = /([^=\s]+)(\s*=\s*(("([^"]*)")|('([^']*)')|[^>\s]+))?/g
+  const endTagRe = /^<\/([^>\s]+)[^>]*>/m
+  const startTagRe = /^<([^>\s/]+)((\s+[^=>\s]+(\s*=\s*(("[^"]*")|('[^']*')|[^>\s]+))?)*)\s*(?:\/\s*)?>/m
+  const selfCloseTagRe = /\s*\/\s*>\s*$/m
 
-  parse(html: string) {
+  function parse(html: string) {
     let treatAsChars = false
     let index, match, characters
-    // Precompile regex for script/style end tags to avoid repeated creation
     let scriptEndRe: RegExp | null = null
     let styleEndRe: RegExp | null = null
 
     while (html.length) {
-      treatAsChars = true // Set default early
+      treatAsChars = true
 
-      // comment - use startsWith for faster string comparison
       if (html.startsWith('<!--')) {
         index = html.indexOf('-->')
         if (index !== -1) {
-          this.scanner.comment(html.substring(4, index))
+          scanner.comment(html.substring(4, index))
           html = html.slice(index + 3)
           treatAsChars = false
         }
       }
-      // end tag - use startsWith and avoid deprecated RegExp globals
       else if (html.startsWith('</')) {
-        match = html.match(this.endTagRe)
+        match = html.match(endTagRe)
         if (match) {
           html = html.slice(match[0].length)
           treatAsChars = false
-          this.parseEndTag(match[0], match[1])
+          scanner.endElement(match[1])
         }
       }
-      // start tag - avoid charAt for better performance
       else if (html[0] === '<') {
-        match = html.match(this.startTagRe)
+        match = html.match(startTagRe)
         if (match) {
           html = html.slice(match[0].length)
           treatAsChars = false
-          const tagName = this.parseStartTag(match[0], match[1], match)
-          // Optimize script/style handling with precompiled regex
+          const tagName = parseStartTag(match[0], match[1], match)
           if (tagName === 'script') {
             if (!scriptEndRe)
               scriptEndRe = /<\/script/i
             index = html.search(scriptEndRe)
             if (index !== -1) {
-              this.scanner.characters(html.slice(0, index))
+              scanner.characters(html.slice(0, index))
               html = html.slice(index)
               treatAsChars = false
             }
@@ -91,7 +63,7 @@ export class HtmlParser {
               styleEndRe = /<\/style/i
             index = html.search(styleEndRe)
             if (index !== -1) {
-              this.scanner.characters(html.slice(0, index))
+              scanner.characters(html.slice(0, index))
               html = html.slice(index)
               treatAsChars = false
             }
@@ -103,9 +75,8 @@ export class HtmlParser {
         index = html.indexOf('<')
 
         if (index === 0) {
-          // Skip the first '<' and find the next one
           index = html.indexOf('<', 1)
-          characters = html[0] // Just the '<' character
+          characters = html[0]
           html = html.slice(1)
         }
         else if (index === -1) {
@@ -117,57 +88,59 @@ export class HtmlParser {
           html = html.slice(index)
         }
 
-        // Faster whitespace check - avoid regex for empty strings
-        if (characters && (!this.options.ignoreWhitespaceText || /[^\s]/.test(characters)))
-          this.scanner.characters(characters)
+        if (characters)
+          scanner.characters(characters)
       }
 
-      match = null // Clear match for next iteration
+      match = null
     }
   }
 
-  private parseStartTag(input: string, tagName: string, match: any) {
+  function parseStartTag(input: string, tagName: string, match: any) {
     const isSelfColse = selfCloseTagRe.test(input)
     let attrInput = match[2]
     if (isSelfColse)
       attrInput = attrInput.replace(/\s*\/\s*$/, '')
-    const attrs = this.parseAttributes(tagName, attrInput)
-    this.scanner.startElement(tagName, attrs, isSelfColse, match[0])
+    const attrs = parseAttributes(attrInput)
+    scanner.startElement(tagName, attrs, isSelfColse, match[0])
     return tagName.toLocaleLowerCase()
   }
 
-  private parseEndTag(input: string, tagName: string) {
-    this.scanner.endElement(tagName)
-  }
-
-  private parseAttributes(tagName: string, input: string) {
+  function parseAttributes(input: string) {
     const attrs: Record<string, any> = {}
+
     if (!input || !input.trim())
       return attrs
 
-    // Fast path for simple attributes without quotes
+    // If there are no quotes in the input, split by whitespace and parse attributes simply
     if (!/["']/.test(input)) {
       const parts = input.trim().split(/\s+/)
       for (const part of parts) {
         const eqIndex = part.indexOf('=')
         if (eqIndex === -1) {
+        // Attribute without value (boolean attribute)
           attrs[part] = true
         }
         else {
+        // Attribute with value (unquoted)
           attrs[part.slice(0, eqIndex)] = part.slice(eqIndex + 1)
         }
       }
       return attrs
     }
 
-    // Fallback to regex for complex attributes
-    this.attrRe.lastIndex = 0
+    // Otherwise, use regex to extract attributes with quoted values
+    attrRe.lastIndex = 0
     let match
     // eslint-disable-next-line no-cond-assign
-    while ((match = this.attrRe.exec(input)) !== null) {
+    while ((match = attrRe.exec(input)) !== null) {
+      // Destructure the match to get attribute name and value (quoted or unquoted)
       const [, name, , value, , valueInQuote, , valueInSingleQuote] = match
+      // Prefer single-quoted, then double-quoted, then unquoted, then true (boolean attribute)
       attrs[name] = valueInSingleQuote ?? valueInQuote ?? value ?? true
     }
     return attrs
   }
+
+  return parse
 }

src/vdomparser.ts

@@ -2,7 +2,7 @@
 
 import { unescapeHTML } from './encoding'
 import { SELF_CLOSING_TAGS } from './html'
-import { HtmlParser } from './htmlparser'
+import { createHtmlParser } from './htmlparser'
 import { hasOwn } from './utils'
 import { document, VDocType, VDocumentFragment, VElement, VHTMLDocument, VNode, VTextNode } from './vdom'
 
@@ -27,45 +27,43 @@ export function parseHTML(html: string): VDocumentFragment | VHTMLDocument {
   const frag = isDoc ? new VHTMLDocument(true) : new VDocumentFragment()
   const stack: VNode[] = [frag]
 
-  const parser = new HtmlParser({
-    scanner: {
-      startElement(tagName: string, attrs: Record<string, string>, isSelfClosing: boolean) {
-        const lowerTagName = tagName.length === 1 ? tagName : tagName.toLowerCase()
-        if (lowerTagName === '!doctype') {
-          frag.docType = new VDocType()
-          return
-        }
-        for (const name in attrs) {
-          if (hasOwn(attrs, name) && typeof attrs[name] === 'string') {
-            attrs[name] = unescapeHTML(attrs[name])
-          }
-        }
-        const parentNode = stack[stack.length - 1]
-        if (parentNode) {
-          const element = document.createElement(tagName, attrs)
-          parentNode.appendChild(element)
-          if (!SELF_CLOSING_TAGS.includes(lowerTagName) && !isSelfClosing) {
-            stack.push(element)
-          }
-        }
-      },
-      endElement() {
-        stack.pop()
-      },
-      characters(text: string) {
-        text = unescapeHTML(text)
-        const parentNode = stack[stack.length - 1]
-        if (parentNode?.lastChild?.nodeType === VNode.TEXT_NODE) {
-          parentNode.lastChild._text += text
+  const parse = createHtmlParser({
+    startElement(tagName: string, attrs: Record<string, string>, isSelfClosing: boolean) {
+      const lowerTagName = tagName.length === 1 ? tagName : tagName.toLowerCase()
+      if (lowerTagName === '!doctype') {
+        frag.docType = new VDocType()
+        return
+      }
+      for (const name in attrs) {
+        if (hasOwn(attrs, name) && typeof attrs[name] === 'string') {
+          attrs[name] = unescapeHTML(attrs[name])
         }
-        else if (parentNode) {
-          parentNode.appendChild(new VTextNode(text))
+      }
+      const parentNode = stack[stack.length - 1]
+      if (parentNode) {
+        const element = document.createElement(tagName, attrs)
+        parentNode.appendChild(element)
+        if (!SELF_CLOSING_TAGS.includes(lowerTagName) && !isSelfClosing) {
+          stack.push(element)
         }
-      },
-      comment() {},
+      }
+    },
+    endElement() {
+      stack.pop()
+    },
+    characters(text: string) {
+      text = unescapeHTML(text)
+      const parentNode = stack[stack.length - 1]
+      if (parentNode?.lastChild?.nodeType === VNode.TEXT_NODE) {
+        parentNode.lastChild._text += text
+      }
+      else if (parentNode) {
+        parentNode.appendChild(new VTextNode(text))
+      }
     },
+    comment() {},
   })
-  parser.parse(html)
+  parse(html)
   return frag
 }