sugar-high 2.4.1 → 2.5.1

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
@@ -57,28 +31,6 @@ import { highlight } from 'sugar-high'
 const html = highlight('const ready = true')
 ```
 
-## Experimental WebGPU highlighting
-
-Use the opt-in `sugar-high/gpu` entry for asynchronous, language-agnostic highlighting powered by
-[`gpu-lexer`](https://gpu-lexer.vercel.app). It requires WebGPU and rejects when WebGPU is
-unavailable; importing any other Sugar High entry does not load the GPU model.
-
-Install the experimental lexer separately when using this entry:
-
-```sh
-npm install sugar-high gpu-lexer
-```
-
-```js
-import { highlight, parse } from 'sugar-high/gpu'
-
-const parsed = await parse(source)
-const html = await highlight(source)
-```
-
-GPU labels map onto Sugar High's existing token classes, themes, `cx`, `mark`, and `markLine`
-hooks. The model infers syntax without a language option and may differ from grammar-based output.
-
 JavaScript, including JSX, is the default. Pass a canonical name for another built-in language:
 
 ```js
@@ -112,11 +64,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 +219,54 @@ 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).
 
+## Experimental WebGPU highlighting
+
+Use the opt-in `sugar-high/gpu` entry for asynchronous, language-agnostic highlighting powered by
+[`gpu-lexer`](https://gpu-lexer.vercel.app). It requires WebGPU and rejects when WebGPU is
+unavailable; importing any other Sugar High entry does not load the GPU model.
+
+Install the experimental lexer separately when using this entry:
+
+```sh
+npm install sugar-high gpu-lexer
+```
+
+```js
+import { highlight, parse } from 'sugar-high/gpu'
+
+const parsed = await parse(source)
+const html = await highlight(source)
+```
+
+GPU labels map onto Sugar High's existing token classes, themes, `cx`, `mark`, and `markLine`
+hooks. The model infers syntax without a language option and may differ from grammar-based output.
+
+## 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/index.d.ts

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

package/lib/lang/css.js

@@ -36,17 +36,23 @@ const isHyphen = ([type, value]) => type === T_SIGN && value === '-'
  * @param {Array<[number, string]>} tokens
  */
 const mergeDashedNames = (tokens) => {
+  /** @type {Array<[number, string]>} */
+  const merged = []
   for (let index = 0; index < tokens.length; index++) {
     let firstWord = index
     let end = index
 
     if (isHyphen(tokens[end])) {
       while (tokens[end] && isHyphen(tokens[end])) end++
-      if (!tokens[end] || !isNameStart(tokens[end])) continue
+      if (!tokens[end] || !isNameStart(tokens[end])) {
+        merged.push(tokens[index])
+        continue
+      }
       firstWord = end++
     } else if (isNameStart(tokens[end])) {
       end++
     } else {
+      merged.push(tokens[index])
       continue
     }
 
@@ -62,10 +68,15 @@ const mergeDashedNames = (tokens) => {
       end++
     }
 
-    if (!dashed) continue
+    if (!dashed) {
+      merged.push(tokens[index])
+      continue
+    }
     const name = tokens.slice(index, end).map(([, value]) => value).join('')
-    tokens.splice(index, end - index, [tokens[firstWord][0], name])
+    merged.push([tokens[firstWord][0], name])
+    index = end - 1
   }
+  return merged
 }
 
 /** Return true when a colon belongs to a nested selector instead of a declaration. */
@@ -91,29 +102,37 @@ const opensBlock = (tokens, start) => {
  * @param {import('../core.js').ParseOptions} options
  */
 export const tokenize = (code, options) => {
-  const tokens = tokenizePlain(code, { ...options, tokenize: undefined })
-  mergeDashedNames(tokens)
+  const tokens = mergeDashedNames(tokenizePlain(code, { ...options, tokenize: undefined }))
+  /** @type {Array<[number, string]>} */
+  const output = []
   let blockDepth = 0
   let declarationStart = false
 
   for (let index = 0; index < tokens.length; index++) {
-    const [type, value] = tokens[index]
+    const token = tokens[index]
+    const [type, value] = token
 
     if (type === T_SIGN && value === '{') {
       blockDepth++
       declarationStart = true
+      output.push(token)
       continue
     }
     if (type === T_SIGN && value === '}') {
       blockDepth--
       declarationStart = false
+      output.push(token)
       continue
     }
     if (type === T_SIGN && value === ';') {
       declarationStart = blockDepth > 0
+      output.push(token)
+      continue
+    }
+    if (!declarationStart || isIgnored(type)) {
+      output.push(token)
       continue
     }
-    if (!declarationStart || isIgnored(type)) continue
 
     const propertyStart = index
     let propertyEnd = index
@@ -133,10 +152,13 @@ export const tokenize = (code, options) => {
         .slice(propertyStart, propertyEnd)
         .map(([, part]) => part)
         .join('')
-      tokens.splice(propertyStart, propertyEnd - propertyStart, [T_PROPERTY, property])
+      output.push([T_PROPERTY, property])
+      index = propertyEnd - 1
+    } else {
+      output.push(token)
     }
     declarationStart = false
   }
 
-  return tokens
+  return output
 }

package/lib/lang/embedded-html.js

@@ -0,0 +1,112 @@
+// @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 = []
+  /** @type {Set<string>} */
+  const unclosed = new Set()
+  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()
+    if (unclosed.has(tag)) {
+      index = openEnd
+      continue
+    }
+    const closing = embeddedClosingTag(tag)
+    closing.lastIndex = openEnd
+    const closeMatch = closing.exec(code)
+    if (!closeMatch) {
+      unclosed.add(tag)
+      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) {
+  const blocks = findEmbeddedBlocks(code)
+  if (!blocks.length) return tokenizeHtml(code)
+
+  /** @type {Array<[number, string]>} */
+  const tokens = []
+  /** @param {Array<[number, string]>} part */
+  const append = (part) => {
+    for (let index = 0; index < part.length; index++) tokens.push(part[index])
+  }
+  let cursor = 0
+
+  for (const block of blocks) {
+    const { start, openEnd, closeStart, end, tag } = block
+
+    append(tokenizeHtml(code.slice(cursor, start)))
+    append(tokenizeHtml(code.slice(start, openEnd)))
+    append(tag === 'style'
+      ? tokenizeCss(code.slice(openEnd, closeStart))
+      : tokenizeJavaScript(code.slice(openEnd, closeStart), { jsx: false }))
+    append(tokenizeHtml(code.slice(closeStart, end)))
+    cursor = end
+  }
+
+  append(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/package.json

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