sugar-high 2.4.0 → 2.5.0

package/README.md

@@ -9,32 +9,6 @@ without requiring a DOM.
 
 ![Sugar High preview](https://repository-images.githubusercontent.com/453236442/9aa2144a-3a4c-4a93-a87f-92ca6a37ded6)
 
-## Benchmarks
-
-Sugar High, PrismJS, and highlight.js highlighting the same generated TypeScript files:
-
-<!-- benchmark:start -->
-Measured 2026-09-04 with Node v24.18.0, darwin arm64, Apple M4 Pro.
-
-| TypeScript | Sugar High 2.2.2 | PrismJS 1.30.0 | highlight.js 11.12.0 |
-| --- | ---: | ---: | ---: |
-| Minified (KiB) | 9.90 | 14.63 | 29.54 |
-| Gzip (KiB) | 4.35 | 5.47 | 11.12 |
-| 11 KiB | 1.78 | 1.18 | 2.11 |
-| 100 KiB | 18.02 | 15.25 | 23.05 |
-| 500 KiB | 90.98 | 96.41 | 118.39 |
-
-Median milliseconds per file; lower is better. 5 timed samples after warmup.
-Sizes are TypeScript-only browser bundles, minified with Bun; gzip uses level 9. Theme CSS is excluded.
-Loading and initialization are excluded. Each library highlights the same generated TypeScript
-into HTML using an explicit language. Grammars and HTML output differ; this is not a measure
-of highlighting quality or browser rendering speed. Results vary by machine and workload.
-<!-- benchmark:end -->
-
-Run `pnpm --filter sugar-high benchmark:large --write` to refresh this table and the
-[website comparison](https://sugar-high.vercel.app/#benchmarks) from the same measurement.
-See [benchmark methodology and options](../../docs/BENCHMARK.md).
-
 ## Install
 
 ```sh
@@ -112,11 +86,12 @@ behavior.
 ## Built-in languages
 
 `javascript`, `typescript`, `css`, `python`, `c`, `go`, `java`, `rust`, `json`, `diff`, `shell`,
-`cpp`, `csharp`, `sql`, `html`, `yaml`, `markdown`, `plaintext`, `ruby`, `kotlin`, `swift`, `php`,
+`cpp`, `csharp`, `sql`, `html`, `vue`, `svelte`, `yaml`, `markdown`, `plaintext`, `ruby`, `kotlin`, `swift`, `php`,
 `toml`, `powershell`, `dockerfile`, `graphql`, `hcl`, `zig`, and `lua`.
 
 Related dialects share one implementation: JavaScript includes JSX, TypeScript includes TSX, JSON
-includes JSONC comments, Shell includes sh/Bash/Zsh, and HCL includes Terraform.
+includes JSONC comments, Shell includes sh/Bash/Zsh, HTML currently provides the base highlighting
+for Vue and Svelte, and HCL includes Terraform.
 
 ## Composable core
 
@@ -266,6 +241,32 @@ See [`docs/API.md`](https://github.com/huozhi/sugar-high/blob/main/docs/API.md)
 options, and lower-level functions. Upgrading from v1? Read the
 [v2 migration guide](https://github.com/huozhi/sugar-high/blob/main/docs/MIGRATION.md).
 
+## Benchmarks
+
+Sugar High, PrismJS, and highlight.js highlighting the same generated TypeScript files:
+
+<!-- benchmark:start -->
+Measured 2026-09-04 with Node v24.18.0, darwin arm64, Apple M4 Pro.
+
+| TypeScript | Sugar High 2.2.2 | PrismJS 1.30.0 | highlight.js 11.12.0 |
+| --- | ---: | ---: | ---: |
+| Minified (KiB) | 9.90 | 14.63 | 29.54 |
+| Gzip (KiB) | 4.35 | 5.47 | 11.12 |
+| 11 KiB | 1.78 | 1.18 | 2.11 |
+| 100 KiB | 18.02 | 15.25 | 23.05 |
+| 500 KiB | 90.98 | 96.41 | 118.39 |
+
+Median milliseconds per file; lower is better. 5 timed samples after warmup.
+Sizes are TypeScript-only browser bundles, minified with Bun; gzip uses level 9. Theme CSS is excluded.
+Loading and initialization are excluded. Each library highlights the same generated TypeScript
+into HTML using an explicit language. Grammars and HTML output differ; this is not a measure
+of highlighting quality or browser rendering speed. Results vary by machine and workload.
+<!-- benchmark:end -->
+
+Run `pnpm --filter sugar-high benchmark:large --write` to refresh this table and the
+[website comparison](https://sugar-high.vercel.app/#benchmarks) from the same measurement.
+See [benchmark methodology and options](../../docs/BENCHMARK.md).
+
 ## License
 
 MIT

package/lib/core.js

@@ -83,7 +83,9 @@ function tokenize(code, options) {
       const quote = curr
       const start = i++
       while (i < code.length) {
-        if (code[i] === quote && code[i - 1] !== '\\') {
+        if (code[i] === '\\') {
+          i++
+        } else if (code[i] === quote) {
           i++
           break
         }

package/lib/index.d.ts

@@ -23,6 +23,8 @@ export type LanguageName =
   | 'csharp'
   | 'sql'
   | 'html'
+  | 'vue'
+  | 'svelte'
   | 'yaml'
   | 'markdown'
   | 'plaintext'

package/lib/lang/embedded-html.js

@@ -0,0 +1,98 @@
+// @ts-check
+import { tokenize as tokenizeCss } from './css.js'
+import { tokenize as tokenizeJavaScript } from './javascript.js'
+
+const htmlOptions = {
+  keywords: new Set(),
+  jsx: true,
+  regex: false,
+  templateStrings: false,
+  onCommentStart: (_currentChar, _nextChar, index, code) => code.startsWith('<!--', index) ? 2 : 0,
+  onCommentEnd: (_prevChar, _currChar, index, code) => code.slice(index - 2, index + 1) === '-->' ? 2 : 0,
+}
+
+const tokenizeHtml = (code) => tokenizeJavaScript(code, htmlOptions)
+
+const embeddedOpeningTag = /^<\s*(script|style)\b/i
+const embeddedClosingTag = (tag) => new RegExp(`</\\s*${tag}\\s*>`, 'ig')
+
+/** Find the end of a markup tag without treating `>` inside quotes as its end. */
+function findTagEnd(code, start) {
+  let quote = ''
+  for (let index = start; index < code.length; index++) {
+    const character = code[index]
+    if (quote) {
+      if (character === quote) quote = ''
+    } else if (character === '"' || character === "'") {
+      quote = character
+    } else if (character === '>') {
+      return index + 1
+    }
+  }
+  return -1
+}
+
+/** Find real script/style blocks while ignoring comments and quoted attributes. */
+function findEmbeddedBlocks(code) {
+  const blocks = []
+  let index = 0
+  while (index < code.length) {
+    if (code.startsWith('<!--', index)) {
+      const commentEnd = code.indexOf('-->', index + 4)
+      index = commentEnd === -1 ? code.length : commentEnd + 3
+      continue
+    }
+    if (code[index] !== '<') {
+      index++
+      continue
+    }
+
+    const openEnd = findTagEnd(code, index)
+    if (openEnd === -1) break
+    const opening = code.slice(index, openEnd)
+    const match = opening.match(embeddedOpeningTag)
+    if (!match) {
+      index = openEnd
+      continue
+    }
+
+    const tag = match[1].toLowerCase()
+    const closing = embeddedClosingTag(tag)
+    closing.lastIndex = openEnd
+    const closeMatch = closing.exec(code)
+    if (!closeMatch) {
+      index = openEnd
+      continue
+    }
+    blocks.push({ start: index, openEnd, closeStart: closeMatch.index, end: closing.lastIndex, tag })
+    index = closing.lastIndex
+  }
+  return blocks
+}
+
+/**
+ * Tokenize HTML-like files while delegating script and style bodies to their
+ * existing language presets. Framework-specific template syntax remains HTML-like.
+ * @param {string} code
+ * @returns {Array<[number, string]>}
+ */
+export function tokenizeEmbeddedHtml(code) {
+  /** @type {Array<[number, string]>} */
+  const tokens = []
+  let cursor = 0
+
+  for (const block of findEmbeddedBlocks(code)) {
+    const { start, openEnd, closeStart, end, tag } = block
+
+    tokens.push(...tokenizeHtml(code.slice(cursor, start)))
+    tokens.push(...tokenizeHtml(code.slice(start, openEnd)))
+    tokens.push(...(tag === 'style'
+      ? tokenizeCss(code.slice(openEnd, closeStart))
+      : tokenizeJavaScript(code.slice(openEnd, closeStart), { jsx: false })))
+    tokens.push(...tokenizeHtml(code.slice(closeStart, end)))
+    cursor = end
+  }
+
+  tokens.push(...tokenizeHtml(code.slice(cursor)))
+  return tokens
+}

package/lib/lang/html.js

@@ -1,11 +1,11 @@
 // @ts-check
-import { tokenize as tokenizeJavaScript } from '../presets/javascript-runtime.js'
+import { tokenizeEmbeddedHtml } from './embedded-html.js'
 
 export const keywords = new Set([])
 export const jsx = true
 export const regex = false
 export const templateStrings = false
-export const tokenize = tokenizeJavaScript
+export const tokenize = tokenizeEmbeddedHtml
 
 export const onCommentStart = (_currentChar, _nextChar, index, code) =>
   code.startsWith('<!--', index) ? 2 : 0

package/lib/lang/svelte.d.ts

@@ -0,0 +1,2 @@
+export * from './html.js'
+export { tokenizeEmbeddedHtml as tokenize } from './embedded-html.js'

package/lib/lang/svelte.js

@@ -0,0 +1,2 @@
+export * from './html.js'
+export { tokenizeEmbeddedHtml as tokenize } from './embedded-html.js'

package/lib/lang/vue.d.ts

@@ -0,0 +1,2 @@
+export * from './html.js'
+export { tokenizeEmbeddedHtml as tokenize } from './embedded-html.js'

package/lib/lang/vue.js

@@ -0,0 +1,2 @@
+export * from './html.js'
+export { tokenizeEmbeddedHtml as tokenize } from './embedded-html.js'

package/lib/lang.js

@@ -3,7 +3,7 @@
 import {
   c, cpp, csharp, css, diff, dockerfile, go, graphql, hcl, html, java, javascript, json,
   kotlin, lua, markdown, nonJavaScript, php, plaintext, powershell, python, ruby, rust, shell, sql,
-  swift, toml, typescript, yaml, zig,
+  svelte, swift, toml, typescript, vue, yaml, zig,
 } from './presets/configs.js'
 
 /**
@@ -33,6 +33,8 @@ const languages = [
   { id: 'csharp', extension: 'cs', aliases: ['c#', 'cs', 'dotnet'], config: nonJavaScript(csharp) },
   { id: 'sql', extension: 'sql', aliases: [], config: nonJavaScript(sql) },
   { id: 'html', extension: 'html', aliases: ['htm', 'xml'], config: html },
+  { id: 'vue', extension: 'vue', aliases: [], config: vue },
+  { id: 'svelte', extension: 'svelte', aliases: [], config: svelte },
   { id: 'yaml', extension: 'yaml', aliases: ['yml'], config: nonJavaScript(yaml) },
   { id: 'markdown', extension: 'md', aliases: ['md', 'mdx'], config: nonJavaScript(markdown) },
   { id: 'plaintext', extension: 'txt', aliases: ['text', 'plain'], config: nonJavaScript(plaintext) },

package/lib/presets/configs.js

@@ -27,6 +27,8 @@ import * as sql from '../lang/sql.js'
 import * as swift from '../lang/swift.js'
 import * as toml from '../lang/toml.js'
 import * as typescript from '../lang/typescript.js'
+import * as svelte from '../lang/svelte.js'
+import * as vue from '../lang/vue.js'
 import * as yaml from '../lang/yaml.js'
 import * as zig from '../lang/zig.js'
 
@@ -61,6 +63,8 @@ function createConfigs() {
     csharp: nonJavaScript(csharp),
     sql: nonJavaScript(sql),
     html,
+    vue,
+    svelte,
     yaml: nonJavaScript(yaml),
     markdown: nonJavaScript(markdown),
     plaintext: nonJavaScript(plaintext),
@@ -88,5 +92,5 @@ function configFor(name) {
 export {
   c, configFor, configs, cpp, csharp, css, diff, dockerfile, go, graphql, hcl, html, java,
   javascript, json, kotlin, lua, markdown, nonJavaScript, php, plaintext, powershell, python, ruby,
-  rust, shell, sql, swift, toml, typescript, yaml, zig,
+  rust, shell, sql, svelte, swift, toml, typescript, vue, yaml, zig,
 }

package/lib/presets/javascript-runtime.js

@@ -168,18 +168,11 @@ function isSign(ch) {
 }
 
 function isWord(chr) {
-  return /^[\w_]+$/.test(chr) || hasUnicode(chr)
+  return /^[\w$\u0080-\uffff]+$/.test(chr || '')
 }
 
 function isCls(str) {
-  const chr0 = str[0]
-  return isWord(chr0) &&
-    chr0 === chr0.toUpperCase() ||
-    str === 'null'
-}
-
-function hasUnicode(s) {
-  return /[^\u0000-\u007f]/.test(s);
+  return /^[0-9A-Z\p{Lu}]/u.test(str) || str === 'null'
 }
 
 function isAlpha(chr) {
@@ -187,11 +180,11 @@ function isAlpha(chr) {
 }
 
 function isIdentifierChar(chr) {
-  return isAlpha(chr) || hasUnicode(chr)
+  return /^[$_A-Za-z\u0080-\uffff]$/.test(chr || '')
 }
 
 function isIdentifier(str) {
-  return isIdentifierChar(str[0]) && (str.length === 1 || isWord(str.slice(1)))
+  return isIdentifierChar(str[0]) && isWord(str)
 }
 
 function isStrTemplateChr(chr) {
@@ -282,17 +275,17 @@ function tokenize(code, options) {
   let __jsxEnter = false
   /** @type {0 | 1 | 2} 0 = none; 1 = inside `<open`; 2 = inside `</close` */
   let __jsxTag = 0
-  let __jsxExpr = false
+  let __jsxExprDepth = 0
   let __jsxTagExpr = 0
 
   /** Nested `<open>…</open>` depth (content between tags, including nested elements). */
   let __jsxStack = 0
 
-  const __jsxChild = () => __jsxEnter && !__jsxExpr && !__jsxTag
+  const __jsxChild = () => __jsxEnter && !__jsxExprDepth && !__jsxTag
   // < __content__ >
-  const inJsxTag = () => __jsxTag && !__jsxChild()
+  const inJsxTag = () => __jsxTag
   // {'__content__'}
-  const inJsxLiterals = () => !__jsxTag && __jsxChild() && !__jsxExpr && __jsxStack > 0
+  const inJsxLiterals = () => __jsxChild() && __jsxStack
 
   /** @type {string | null} */
   let __strQuote = null
@@ -419,14 +412,12 @@ function tokenize(code, options) {
     if (isSingleQuotes(curr) && !inJsxLiterals() && !inStrTemplateLiterals()) {
       append()
       let isStringClose = false
-      if (prev !== `\\`) {
-        if (__strQuote && curr === __strQuote) {
-          __strQuote = null
-          isStringClose = true
-        } else if (!__strQuote) {
-          __strQuote = curr
-          __strTokenStart = tokens.length
-        }
+      if (__strQuote && curr === __strQuote) {
+        __strQuote = null
+        isStringClose = true
+      } else if (!__strQuote) {
+        __strQuote = curr
+        __strTokenStart = tokens.length
       }
 
       append(T_STRING, curr)
@@ -438,25 +429,14 @@ function tokenize(code, options) {
       continue
     }
 
-    if (!inStrTemplateLiterals()) {
-      if (prev !== '\\n' && isTemplateQuote(curr)) {
-        append()
-        append(T_STRING, curr)
-        __strTemplateQuoteStack++
-        continue
-      }
+    if (isTemplateQuote(curr)) {
+      append()
+      __strTemplateQuoteStack += inStrTemplateLiterals() ? -1 : 1
+      append(T_STRING, curr)
+      continue
     }
 
     if (inStrTemplateLiterals()) {
-      if (prev !== '\\n' && isTemplateQuote(curr)) {
-        if (__strTemplateQuoteStack > 0) {
-          append()
-          __strTemplateQuoteStack--
-          append(T_STRING, curr)
-          continue
-        }
-      }
-
       if (c_n === '${') {
         __strTemplateExprStack++
         append(T_STRING)
@@ -477,7 +457,7 @@ function tokenize(code, options) {
       if (curr === '{') {
         append()
         append(T_SIGN, curr)
-        __jsxExpr = true
+        __jsxExprDepth = 1
         continue
       }
     }
@@ -634,6 +614,8 @@ function tokenize(code, options) {
     // string quotation
     if (isQuotationChar || isStringTemplateLiterals || isSingleQuotes(__strQuote)) {
       current += curr
+      // Consume the escaped character before the next delimiter check.
+      if (curr === '\\') current += code[++i] || ''
     } else if (isRegexChar) {
       append()
       const [lastType, lastToken] = last
@@ -656,25 +638,25 @@ function tokenize(code, options) {
       __regexQuoteStart = true
       const start = i++
 
-      // end of line of end of file
-      const isEof = () => i >= code.length
-      const isEol = () => isEof() || code[i] === '\n'
-
       let foundClose = false
 
       // `/` is literal inside regex character classes, e.g. `[/]`.
       let inCharClass = false
 
       // traverse to find closing regex slash
-      for (; !isEol(); i++) {
+      for (; i < code.length && code[i] !== '\n'; i++) {
         const ch = code[i]
-        const escaped = code[i - 1] === '\\'
-        if (!escaped && ch === '[') inCharClass = true
-        if (!escaped && ch === ']') inCharClass = false
-        if (ch === '/' && !inCharClass && !escaped) {
+        if (ch === '\\') {
+          if (code[i + 1] === '\n') break
+          i++
+          continue
+        }
+        if (ch === '[') inCharClass = true
+        if (ch === ']') inCharClass = false
+        if (ch === '/' && !inCharClass) {
           foundClose = true
           // end of regex, append regex flags
-          while (start !== i && /^[a-z]$/.test(code[i + 1]) && !isEol()) {
+          while (/^[a-z]$/.test(code[i + 1])) {
             i++
           }
           break
@@ -730,11 +712,11 @@ function tokenize(code, options) {
         append()
       }
     } else {
-      if (__jsxExpr && curr === '}') {
+      if (__jsxExprDepth && curr === '}') {
         append()
         current = curr
         append()
-        __jsxExpr = false
+        __jsxExprDepth--
       } else if (
         // it's jsx literals and is not a jsx bracket
         (isJsxLiterals && !JSXBrackets.has(curr)) ||
@@ -761,6 +743,7 @@ function tokenize(code, options) {
         }
         else if (JSXBrackets.has(curr)) append()
       }
+      if (__jsxExprDepth && curr === '{') __jsxExprDepth++
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sugar-high",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/huozhi/sugar-high.git",