sugar-high 2.3.0 → 2.4.0

package/README.md

@@ -3,18 +3,52 @@
 [![version][npm-version-badge]][npm]
 [![downloads][npm-downloads-badge]][npm]
 
-Lightweight, zero-dependency syntax highlighting for JavaScript, popular programming languages,
-and formats commonly generated by coding agents. It runs in browsers and JavaScript runtimes and
-returns HTML without requiring a DOM.
+Lightweight syntax highlighting for JavaScript, popular programming languages, and formats
+commonly generated by coding agents. It runs in browsers and JavaScript runtimes and returns HTML
+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
 npm install sugar-high
 ```
 
+## Agent skill
+
+Install Sugar High guidance for an AI coding agent with the Skills CLI:
+
+```sh
+npx skills add huozhi/sugar-high --skill sugar-high
+```
+
 ## Highlight code
 
 ```js
@@ -23,6 +57,28 @@ 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

package/lib/core.js

@@ -110,6 +110,10 @@ function tokenize(code, options) {
     if (isWord(curr)) {
       const start = i++
       while (i < code.length && isWord(code[i])) i++
+      if (/^\d/.test(curr) && code[i] === '.' && /\d/.test(code[i + 1] || '')) {
+        i++
+        while (i < code.length && isWord(code[i])) i++
+      }
       const value = code.slice(start, i)
       const normalized = normalize(value)
       const type = typeKeywords.has(normalized)

package/lib/gpu.d.ts

@@ -0,0 +1,7 @@
+import type { DisplayOptions, ParsedCode } from './core.js'
+
+/** Parse source code asynchronously with gpu-lexer and return Sugar High's structured format. */
+export function parse(code: string): Promise<ParsedCode>
+
+/** Highlight source code asynchronously with WebGPU. */
+export function highlight(code: string, options?: DisplayOptions): Promise<string>

package/lib/gpu.js

@@ -0,0 +1,85 @@
+// @ts-check
+
+import { parse as parseWithGpu } from 'gpu-lexer'
+import {
+  assemble,
+  render,
+  T_CLASS,
+  T_COMMENT,
+  T_ENTITY,
+  T_IDENTIFIER,
+  T_KEYWORD,
+  T_SIGN,
+  T_SPACE,
+  T_STRING,
+  T_BREAK,
+} from './shared.js'
+
+const tokenTypes = Object.freeze({
+  plain: T_IDENTIFIER,
+  comment: T_COMMENT,
+  string: T_STRING,
+  number: T_CLASS,
+  keyword: T_KEYWORD,
+  type: T_CLASS,
+  function: T_ENTITY,
+  constant: T_CLASS,
+  operator: T_SIGN,
+})
+
+/**
+ * Preserve plain whitespace as Sugar High space and break tokens while mapping
+ * the GPU lexer's semantic labels onto the existing theme vocabulary.
+ * @param {Array<[number, string]>} tokens
+ * @param {string} value
+ */
+function appendPlain(tokens, value) {
+  for (const part of value.match(/\r\n|\r|\n|[^\S\r\n]+|[^\s\r\n]+/g) || []) {
+    const type = part === '\n' || part === '\r' || part === '\r\n'
+      ? T_BREAK
+      : /^\s/.test(part)
+        ? T_SPACE
+        : T_IDENTIFIER
+    tokens.push([type, part])
+  }
+}
+
+/**
+ * Parse source code with gpu-lexer and return Sugar High's structured format.
+ * GPU labels are adapted to the existing token and theme types.
+ * @param {string} code
+ * @returns {Promise<import('./core.js').ParsedCode>}
+ */
+async function parse(code) {
+  const spans = await parseWithGpu(code)
+  /** @type {Array<[number, string]>} */
+  const tokens = []
+  let cursor = 0
+
+  for (const span of spans) {
+    const start = Math.max(cursor, Math.min(code.length, span.start))
+    const end = Math.max(start, Math.min(code.length, span.end))
+    if (start > cursor) appendPlain(tokens, code.slice(cursor, start))
+    cursor = start
+    if (end === start) continue
+
+    const value = code.slice(start, end)
+    if (span.type === 'plain') appendPlain(tokens, value)
+    else tokens.push([tokenTypes[span.type] ?? T_IDENTIFIER, value])
+    cursor = end
+  }
+
+  if (cursor < code.length) appendPlain(tokens, code.slice(cursor))
+  return assemble(code, tokens)
+}
+
+/**
+ * Highlight source code asynchronously with WebGPU.
+ * @param {string} code
+ * @param {import('./core.js').DisplayOptions | undefined} options
+ */
+async function highlight(code, options) {
+  return render(await parse(code), options)
+}
+
+export { highlight, parse }

package/lib/presets/javascript-runtime.js

@@ -283,6 +283,7 @@ function tokenize(code, options) {
   /** @type {0 | 1 | 2} 0 = none; 1 = inside `<open`; 2 = inside `</close` */
   let __jsxTag = 0
   let __jsxExpr = false
+  let __jsxTagExpr = 0
 
   /** Nested `<open>…</open>` depth (content between tags, including nested elements). */
   let __jsxStack = 0
@@ -323,6 +324,8 @@ function tokenize(code, options) {
         // classify jsx open tag
         if ((lastToken === '<' || lastToken === '</'))
           return T_ENTITY
+        if (!__jsxTagExpr && /^\s+$/.test(tokens[tokens.length - 1]?.[1] || ''))
+          return T_PROPERTY
       }
     }
     // Then determine if they're jsx literals
@@ -343,7 +346,7 @@ function tokenize(code, options) {
     } else if (token.split('').every(isSign)) {
       return T_SIGN
     } else if (isCls(token)) {
-      return inJsxTag() ? T_IDENTIFIER : T_CLS_NUMBER
+      return inJsxTag() && !__jsxTagExpr ? T_IDENTIFIER : T_CLS_NUMBER
     } else {
       if (isIdentifier(token)) {
         const isLastPropDot = last[1] === '.' && isIdentifier(beforeLast[1])
@@ -372,6 +375,10 @@ function tokenize(code, options) {
         beforeLast = last
         last = pair
       }
+      if (inJsxTag() && type === T_SIGN) {
+        if (current === '{') __jsxTagExpr++
+        if (current === '}') __jsxTagExpr--
+      }
       tokens.push(pair)
     }
     current = ''

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sugar-high",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/huozhi/sugar-high.git",
@@ -18,6 +18,10 @@
       "types": "./lib/core.d.ts",
       "default": "./lib/core.js"
     },
+    "./gpu": {
+      "types": "./lib/gpu.d.ts",
+      "default": "./lib/gpu.js"
+    },
     "./lang": {
       "types": "./lib/lang.d.ts",
       "default": "./lib/lang.js"
@@ -34,9 +38,18 @@
   "license": "MIT",
   "devDependencies": {
     "@types/node": "22.12.0",
+    "gpu-lexer": "0.0.2",
     "typescript": "6.0.2",
     "vitest": "^3.0.2"
   },
+  "peerDependencies": {
+    "gpu-lexer": ">=0.0.2"
+  },
+  "peerDependenciesMeta": {
+    "gpu-lexer": {
+      "optional": true
+    }
+  },
   "scripts": {
     "test": "vitest",
     "build": "echo 'package requires no build'",