sugar-high 0.9.4 → 1.0.0

package/README.md

@@ -1,19 +1,19 @@
 # Sugar High
 
-[![Build][build-badge]][build]
+[![npm][npm-badge]][npm]
 
-### Introduction
+Super lightweight syntax highlighter for JavaScript and JSX—about **1 kB** minified and gzipped. Works in the browser or any JS runtime that can set HTML strings.
 
-Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped
+![Sugar High preview](https://repository-images.githubusercontent.com/453236442/e9c853e9-4af6-45c4-aa4a-c27afbf16a0d)
 
-![img](https://repository-images.githubusercontent.com/453236442/aa0db684-bad3-4cd3-a420-f4e53b8c6757)
-
-### Usage
+## Install
 
 ```sh
-npm install --save sugar-high
+npm install sugar-high
 ```
 
+## Usage
+
 ```js
 import { highlight } from 'sugar-high'
 
@@ -22,26 +22,26 @@ const codeHTML = highlight(code)
 document.querySelector('pre > code').innerHTML = codeHTML
 ```
 
-### Highlight with CSS
+### Language presets
+
+The core highlighter targets JavaScript and JSX. For CSS, Rust, Python, and similar, import a preset from [`sugar-high/presets`](https://github.com/huozhi/sugar-high/tree/main/packages/sugar-high/lib/presets) and pass it into `highlight`:
+
+```js
+import { highlight } from 'sugar-high'
+import { rust } from 'sugar-high/presets'
+
+const html = highlight(source, { ...rust })
+```
+
+For more language presets and syntax color themes, see **[sugar-high.vercel.app](https://sugar-high.vercel.app/)**.
 
-Then make your own theme with customized colors by token type and put in global CSS. The corresponding class names start with `--sh-` prefix.
+## Styling
+
+Each line is wrapped in `sh__line`. Set **CSS custom properties** `--sh-*` on an ancestor (for example `:root`) to pick colors—inspect the output or the example below for the variable names you need.
+
+Example theme:
 
 ```css
-/**
- * Types that sugar-high have:
- *
- * identifier
- * keyword
- * string
- * Class, number and null
- * property
- * entity
- * jsx literals
- * sign
- * comment
- * break
- * space
- */
 :root {
   --sh-class: #2d5e9d;
   --sh-identifier: #354150;
@@ -55,11 +55,9 @@ Then make your own theme with customized colors by token type and put in global
 }
 ```
 
-### Features
-
-#### Line number
+### Line numbers
 
-Sugar high provide `.sh_line` class name for each line. To display line number, define the `.sh_line::before` element with CSS will enable line numbers automatically.
+Use a `::before` counter on `.sh__line` for gutter numbers:
 
 ```css
 pre code {
@@ -75,9 +73,9 @@ pre code {
 }
 ```
 
-### Line Highlight
+### Highlighting a line
 
-Use `.sh__line:nth-child(<line number>)` to highlight specific line.
+Target a line with `.sh__line:nth-child(<n>)` (1-based):
 
 ```css
 .sh__line:nth-child(5) {
@@ -85,36 +83,16 @@ Use `.sh__line:nth-child(<line number>)` to highlight specific line.
 }
 ```
 
-#### CSS Class Names
+## Remark
 
-You can use `.sh__token--<token type>` to customize the output node of each token.
+Use the [remark plugin](https://sugar-high.vercel.app/remark) to highlight fenced code blocks when processing Markdown with [remark](https://remark.js.org/). Details: [`packages/remark-sugar-high`](https://github.com/huozhi/sugar-high/tree/main/packages/remark-sugar-high).
 
-```css
-.sh__token--keyword {
-  background: #f47067;
-}
-```
-
-### Use With Remark.js
-
-[Remark.js](https://remark.js.org/) is a powerful markdown processor, you can use the [sugar-high remark plugin](https://sugar-high.vercel.app/remark) with remark.js to highlight code blocks in markdown.
-
-Check out the [readme](https://github.com/huozhi/sugar-high/tree/main/packages/remark-sugar-high) for more details.
-
-### LICENSE
+## License
 
 MIT
 
 <!-- Definitions -->
 
-[build-badge]: https://github.com/huozhi/sugar-high/workflows/Test/badge.svg
-
-[build]: https://github.com/huozhi/sugar-high/actions
-
-[coverage-badge]: https://badge.fury.io/js/sugar-high.svg
-
-[coverage]: https://codecov.io/github/huozhi/sugar-high
-
-[downloads-badge]: https://img.shields.io/npm/dm/sugar-high.svg
+[npm-badge]: https://img.shields.io/npm/v/sugar-high.svg
 
-[downloads]: https://www.npmjs.com/package/sugar-high
+[npm]: https://www.npmjs.com/package/sugar-high

package/lib/index.d.ts

@@ -2,6 +2,11 @@ type HighlightOptions = {
   keywords?: Set<string>
   onCommentStart?: (curr: string, next: string) => number | boolean
   onCommentEnd?: (curr: string, prev: string) => number | boolean
+  /**
+   * At `code[i] === "'"`: return how many code units to consume from `i` as one token,
+   * or null/undefined or a number below 1 for default JS single-quoted string rules.
+   */
+  onQuote?: (curr: string, i: number, code: string) => number | null | undefined
 }
 
 export function highlight(code: string, options?: HighlightOptions): string

package/lib/index.js

@@ -45,6 +45,32 @@ const Keywords_Js = new Set([
   'static',
 ])
 
+const Keywords_Ts = new Set([
+  ...Keywords_Js,
+  'type',
+  'interface',
+  'enum',
+  'implements',
+  'readonly',
+  'abstract',
+  'declare',
+  'namespace',
+  'module',
+  'private',
+  'protected',
+  'public',
+  'override',
+  'keyof',
+  'infer',
+  'is',
+  'asserts',
+  'satisfies',
+  'as',
+  'unknown',
+  'never',
+  'any',
+])
+
 const Signs = new Set([
   '+',
   '-',
@@ -82,6 +108,76 @@ const DefaultOptions = {
   onCommentEnd: isCommentEnd_Js,
 }
 
+/**
+ * Fast, heuristic TS detection. It intentionally prefers speed over full parsing.
+ * @param {string} code
+ * @returns {boolean}
+ */
+function isLikelyTypeScript(code) {
+  let tsScore = 0
+
+  // TS-only declarations and operators.
+  if (/\binterface\s+[A-Za-z_$][\w$]*/.test(code)) tsScore += 2
+  if (/\btype\s+[A-Za-z_$][\w$]*\s*=/.test(code)) tsScore += 2
+  if (/\benum\s+[A-Za-z_$][\w$]*/.test(code)) tsScore += 2
+  if (/\b(?:implements|readonly|declare|namespace|satisfies|infer|keyof|asserts)\b/.test(code)) tsScore += 2
+
+  // Common TS annotations/signatures.
+  if (/:\s*[A-Za-z_$][\w$]*(?:<[^>\n]+>)?(?:\[\])?(?=\s*[,)=;{])/m.test(code)) tsScore += 1
+  if (/\b(?:const|let|var)\s+[A-Za-z_$][\w$]*\s*:\s*/.test(code)) tsScore += 1
+  if (/\)\s*:\s*[A-Za-z_$][\w$]*(?:<[^>\n]+>)?(?:\[\])?\s*(?:=>|\{)/.test(code)) tsScore += 1
+
+  return tsScore >= 2
+}
+
+/**
+ * Detects `<T, U = ...>(` style generic parameter lists so they are not
+ * treated as JSX tags.
+ * @param {string} code
+ * @param {number} startIndex
+ * @returns {boolean}
+ */
+function isTypeParameterListStart(code, startIndex) {
+  if (code[startIndex] !== '<') return false
+
+  let depth = 0
+  let sawIdentifierStart = false
+
+  for (let i = startIndex; i < code.length; i++) {
+    const ch = code[i]
+
+    if (ch === '<') {
+      depth++
+      continue
+    }
+    if (ch === '>') {
+      depth--
+      if (depth === 0) {
+        let next = i + 1
+        while (next < code.length && /\s/.test(code[next])) next++
+        if (!(sawIdentifierStart && code[next] === '(')) return false
+
+        // Focus this heuristic on generic arrow functions:
+        // const fn = <T>(arg) => ...
+        const tail = code.slice(next, next + 320)
+        return /\)\s*(?::[\s\S]{0,120}?)?=>/.test(tail)
+      }
+      continue
+    }
+    if (depth === 0) continue
+
+    if (/[$A-Za-z_]/.test(ch)) {
+      sawIdentifierStart = true
+      continue
+    }
+    if (/[\s,\.\=\?\:\|\&\[\]]/.test(ch)) continue
+
+    return false
+  }
+
+  return false
+}
+
 /**
  *
  * 0  - identifier
@@ -200,16 +296,29 @@ function isRegexStart(str) {
 
 /**
  * @param {string} code
- * @param {{ keywords: Set<string> }} options
+ * @param {{
+ *   keywords?: Set<string>
+ *   onCommentStart?: (curr: string, next: string) => number | boolean
+ *   onCommentEnd?: (prev: string, curr: string) => number | boolean
+ *   onQuote?: (curr: string, i: number, code: string) => number | null | undefined
+ * } | undefined} options
+ * Optional `onQuote(curr, i, code)` at `code[i] === "'"`: return length to consume from `i` (>= 1),
+ * or null/undefined/below 1 for default JS single-quoted strings. No substring allocation.
  * @return {Array<[number, string]>}
  */
 function tokenize(code, options) {
+  const mergedOptions = { ...DefaultOptions, ...options }
+  const hasCustomKeywords = !!(options && options.keywords instanceof Set)
+  const isTs = isLikelyTypeScript(code)
+  const resolvedKeywords = hasCustomKeywords
+    ? mergedOptions.keywords
+    : (isTs ? Keywords_Ts : Keywords_Js)
+
   const {
-    keywords,
     onCommentStart,
     onCommentEnd,
-  } = { ...DefaultOptions, ...options }
-  
+  } = mergedOptions
+
   let current = ''
   let type = -1
   /** @type {[number, string]} */
@@ -219,20 +328,22 @@ function tokenize(code, options) {
   /** @type {Array<[number, string]>} */
   const tokens = []
 
-  /** @type boolean if entered jsx tag, inside <open tag> or </close tag> */
-  let __jsxEnter = false
   /**
-   * @type {0 | 1 | 2}
-   * @example
-   * 0 for not in jsx;
-   * 1 for open jsx tag;
-   * 2 for closing jsx tag;
-   **/
+   * TS generics (`Map<string>`) and JSX (`<div>`) share the same `<Name …>` lexical shape. We use
+   * one tag-lexer mode (__jsxTag + __jsxStack) for both when we enter it; isTsTypeArgStart and
+   * isTypeParameterListStart only decide when *not* to enter (e.g. `foo<T>`, `<T>(x)=>`).
+   * __jsxEnter gates that mode so a latched __jsxTag (from `<` in `"a<b"`) does not run the tag
+   * lexer until we are in real JSX/TSX surface (not inside strings).
+   * @type {boolean}
+   */
+  let __jsxEnter = false
+  /** @type {0 | 1 | 2} 0 = none; 1 = inside `<open`; 2 = inside `</close` */
   let __jsxTag = 0
   let __jsxExpr = false
 
-  // only match paired (open + close) tags, not self-closing tags
+  /** Nested `<open>…</open>` depth (content between tags, including nested elements). */
   let __jsxStack = 0
+
   const __jsxChild = () => __jsxEnter && !__jsxExpr && !__jsxTag
   // < __content__ >
   const inJsxTag = () => __jsxTag && !__jsxChild()
@@ -266,7 +377,7 @@ function tokenize(code, options) {
       const [, lastToken] = last
       if (isIdentifier(token)) {
         // classify jsx open tag
-        if ((lastToken === '<' || lastToken === '</')) 
+        if ((lastToken === '<' || lastToken === '</'))
           return T_ENTITY
       }
     }
@@ -277,7 +388,7 @@ function tokenize(code, options) {
     // Determine strings first before other types
     if (inStringQuotes() || inStrTemplateLiterals()) {
       return T_STRING
-    } else if (keywords.has(token)) {
+    } else if (resolvedKeywords.has(token)) {
       return last[1] === '.' ? T_IDENTIFIER : T_KEYWORD
     } else if (isLineBreak) {
       return T_BREAK
@@ -299,16 +410,16 @@ function tokenize(code, options) {
   }
 
   /**
-   * 
-   * @param {number} type_ 
-   * @param {string} token_ 
+   *
+   * @param {number | undefined} [type_]
+   * @param {string | undefined} [token_]
    */
   const append = (type_, token_) => {
     if (token_) {
       current = token_
     }
     if (current) {
-      type = type_ || classify(current)
+      type = typeof type_ === 'number' ? type_ : classify(current)
       /** @type [number, string]  */
       const pair = [type, current]
       if (type !== T_SPACE && type !== T_BREAK) {
@@ -326,6 +437,30 @@ function tokenize(code, options) {
     const p_c = prev + curr // previous and current
     const c_n = curr + next // current and next
 
+    // onQuote(curr, i, code): length from i; end = i + len (capped).
+    if (
+      typeof mergedOptions.onQuote === 'function' &&
+      curr === "'" &&
+      !inStringQuotes() &&
+      !inJsxLiterals() &&
+      !inStrTemplateLiterals()
+    ) {
+      const rawLen = mergedOptions.onQuote(curr, i, code)
+      if (
+        typeof rawLen === 'number' &&
+        rawLen >= 1 &&
+        !Number.isNaN(rawLen)
+      ) {
+        const len = Math.min(rawLen, code.length - i)
+        const end = i + len
+        append()
+        current = code.slice(i, end)
+        append(T_IDENTIFIER)
+        i = end - 1
+        continue
+      }
+    }
+
     // Determine string quotation outside of jsx literals and template literals.
     // Inside jsx literals or template literals, string quotation is still part of it.
     if (isSingleQuotes(curr) && !inJsxLiterals() && !inStrTemplateLiterals()) {
@@ -469,7 +604,7 @@ function tokenize(code, options) {
             if (isSpaces(current)) {
               append()
             }
-            
+
             // Now check if the accumulated token is a property
             const prop = current + curr
             if (isIdentifier(prop)) {
@@ -483,12 +618,45 @@ function tokenize(code, options) {
 
     // if it's not in a jsx tag declaration or a string, close child if next is jsx close tag
     if (!__jsxTag && (curr === '<' && isIdentifierChar(next) || c_n === '</')) {
-      __jsxTag = next === '/' ? 2 : 1
+      let prevNonSpace = i - 1
+      while (prevNonSpace >= 0 && /\s/.test(code[prevNonSpace])) prevNonSpace--
+      const prevChar = prevNonSpace >= 0 ? code[prevNonSpace] : ''
+
+      const [lastType, lastTok] = last
+      // Without a space before `<`, the LHS is often still in `current` (not flushed), so `last` is stale.
+      let typeArgFromPending = false
+      let jsxFromPending = false
+      if (current && !isSpaces(current)) {
+        const w = current
+        // Unflushed LHS before `<`: numbers/null/Upper (isCls), and booleans, behave like `foo<` (type
+        // args / `<`). Any other keyword (`return`, `void`, …) is JSX-friendly — no keyword allowlist.
+        if (isCls(w) || w === 'true' || w === 'false') {
+          typeArgFromPending = true
+        } else if (resolvedKeywords.has(w) && isIdentifier(w)) {
+          jsxFromPending = true
+        } else if (isIdentifier(w)) {
+          typeArgFromPending = true
+        }
+      }
+
+      const isTsTypeArgStart =
+        curr === '<' &&
+        /[$\w\]\)]/.test(prevChar) &&
+        (typeArgFromPending ||
+          (!jsxFromPending &&
+            (lastType === T_IDENTIFIER ||
+              lastType === T_CLS_NUMBER ||
+              (lastType === T_SIGN && (lastTok === ')' || lastTok === ']')))))
+      const isTsGenericStart = curr === '<' && isTypeParameterListStart(code, i)
+      if (!isTsTypeArgStart && !isTsGenericStart) {
+        __jsxTag = next === '/' ? 2 : 1
+      }
 
-      // current and next char can form a jsx open or close tag
       if (curr === '<' && (next === '/' || isAlpha(next))) {
         if (
-          !inStringContent() && 
+          !isTsTypeArgStart &&
+          !isTsGenericStart &&
+          !inStringContent() &&
           !inJsxLiterals() &&
           !inRegexQuotes()
         ) {
@@ -532,7 +700,7 @@ function tokenize(code, options) {
       const isEol = () => isEof() || code[i] === '\n'
 
       let foundClose = false
-      
+
       // traverse to find closing regex slash
       for (; !isEol(); i++) {
         if (code[i] === '/' && code[i - 1] !== '\\') {
@@ -640,7 +808,7 @@ function generate(tokens) {
    * @param {any} children
    * @return {{type: string, tagName: string, children: any[], properties: Record<string, string>}}
    */
-  const createLine = (children) => 
+  const createLine = (children) =>
       ({
         type: 'element',
         tagName: 'span',
@@ -678,9 +846,13 @@ function generate(tokens) {
   }
   /** @type {Array<[number, string]>} */
   const lineTokens = []
+  let lastWasBreak = false
+
   for (let i = 0; i < tokens.length; i++) {
     const token = tokens[i]
     const [type, value] = token
+    const isLastToken = i === tokens.length - 1
+
     if (type !== T_BREAK) {
       // Divide multi-line token into multi-line code
       if (value.includes('\n')) {
@@ -695,20 +867,35 @@ function generate(tokens) {
       } else {
         lineTokens.push(token)
       }
+      lastWasBreak = false
     } else {
-      lineTokens.push([type, ''])
-      flushLine(lineTokens)
-      lineTokens.length = 0
+      if (lastWasBreak) {
+        // Consecutive break - create empty line
+        flushLine([])
+      } else {
+        // First break after content - flush current line
+        flushLine(lineTokens)
+        lineTokens.length = 0
+      }
+
+      // If this is the last token and it's a break, create an empty line
+      if (isLastToken) {
+        flushLine([])
+      }
+
+      lastWasBreak = true
     }
   }
 
-  if (lineTokens.length)
+  // Flush remaining tokens if any
+  if (lineTokens.length) {
     flushLine(lineTokens)
+  }
 
   return lines
 }
 
-/** @param { className: string, style?: Record<string, string> } */
+/** @param {{ className: string, style?: Record<string, string> }} props */
 const propsToString = (props) => {
   let str = `class="${props.className}"`
 
@@ -739,12 +926,13 @@ function toHtml(lines) {
 /**
  *
  * @param {string} code
- * @param {
- * {
- *   keywords: Set<string>
+ * @param {{
+ *   keywords?: Set<string>
  *   onCommentStart?: (curr: string, next: string) => number | boolean
  *   onCommentEnd?: (curr: string, prev: string) => number | boolean
+ *   onQuote?: (curr: string, i: number, code: string) => number | null | undefined
  * } | undefined} options
+ * `onQuote` same as `tokenize`.
  * @returns {string}
  */
 function highlight(code, options) {

package/lib/presets/index.d.ts

@@ -1,7 +1,8 @@
 type LanguageConfig = {
   keywords: Set<string>
-  onCommentStart(curr: string, next: string): 0 | 1 | 2
-  onCommentEnd(prev: string, curr: string): 0 | 1 | 2
+  onCommentStart?(curr: string, next: string): 0 | 1 | 2
+  onCommentEnd?(prev: string, curr: string): 0 | 1 | 2
+  onQuote?(curr: string, i: number, code: string): number | null | undefined
 }
 
 export const css: LanguageConfig

package/lib/presets/lang/rust.js

@@ -6,3 +6,38 @@ export const keywords = new Set([
   'async', 'await', 'dyn', 'abstract', 'become', 'box', 'do', 'final', 'macro', 'override',
   'priv', 'typeof', 'unsized', 'virtual', 'yield', 'try',
 ])
+
+/**
+ * @param {string} curr `code[i]` (apostrophe)
+ * @param {number} i
+ * @param {string} code
+ * @returns {number} code units to consume from `i`
+ */
+export function onQuote(curr, i, code) {
+  if (curr !== "'" || i + 1 >= code.length) return 1
+  const n1 = code[i + 1]
+  if (n1 === '\\') {
+    let j = i + 2
+    while (j < code.length) {
+      if (code[j] === '\\') {
+        j += 2
+        continue
+      }
+      if (code[j] === "'") return j - i + 1
+      j++
+    }
+    return code.length - i
+  }
+  if (n1 === '_') {
+    return 2
+  }
+  if (/[a-zA-Z]/.test(n1)) {
+    let j = i + 2
+    while (j < code.length && /[a-zA-Z0-9_]/.test(code[j])) j++
+    if (j < code.length && code[j] === "'") {
+      return j - i + 1
+    }
+    return j - i
+  }
+  return 1
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sugar-high",
-  "version": "0.9.4",
+  "version": "1.0.0",
   "type": "module",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
@@ -19,14 +19,13 @@
     "lib"
   ],
   "license": "MIT",
+  "scripts": {
+    "test": "vitest",
+    "build": "echo 'package requires no build'"
+  },
   "devDependencies": {
     "@types/node": "22.12.0",
     "typescript": "5.7.3",
     "vitest": "^3.0.2"
-  },
-  "packageManager": "pnpm@8.7.1",
-  "scripts": {
-    "test": "vitest",
-    "build": "echo 'package requires no build'"
   }
-}
+}