sugar-high 2.3.1 → 2.4.0

package/README.md

@@ -3,9 +3,9 @@
 [![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)
 
@@ -41,6 +41,14 @@ See [benchmark methodology and options](../../docs/BENCHMARK.md).
 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
@@ -49,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sugar-high",
-  "version": "2.3.1",
+  "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'",