sugar-high 2.4.1 → 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/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/package.json

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