sugar-high 0.4.6 → 0.5.0

package/README.md

@@ -8,7 +8,7 @@
 
 Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped
 
-![img](https://repository-images.githubusercontent.com/453236442/1d63a6ff-aa11-422c-a36c-ca16fc102f18)
+![img](https://repository-images.githubusercontent.com/453236442/aa0db684-bad3-4cd3-a420-f4e53b8c6757)
 
 ### Usage
 
@@ -71,6 +71,16 @@ pre code {
 }
 ```
 
+#### CSS Class Names
+
+You can use `.sh__token--<token type>` to customize the output node of each token.
+
+```css
+.sh__token--keyword {
+  background: #f47067;
+}
+```
+
 ### LICENSE
 
 MIT

package/lib/index.mjs

@@ -76,7 +76,7 @@ const signs = new Set([
   ...jsxBrackets,
 ])
 
-export const types = [
+const types = [
   'identifier',
   'keyword',
   'string',
@@ -174,9 +174,10 @@ function isRegexStart(str) {
  * @param {string} code
  * @return {Array<[number, string]>}
  */
-export function tokenize(code) {
+function tokenize(code) {
   let current = ''
   let type = -1
+  /** @type {[number | null, string | null]} */
   let last = [null, null]
   /** @type {Array<[number, string]>} */
   const tokens = []
@@ -197,10 +198,11 @@ export function tokenize(code) {
   const inJsxTag = () => __jsxTag && !__jsxChild()
   const inJsxLiterals = () => !__jsxTag && __jsxChild() && !__jsxExpr && __jsxStack > 0
 
-  /** @type {string | 0} */
-  let __strQuote = 0
+  /** @type {string | null} */
+  let __strQuote = null
   let __strTemplateExprStack = 0
   let __strTemplateQuoteStack = 0
+  const inStringQuotes = () => __strQuote !== null
   const inStrTemplateLiterals = () => (__strTemplateQuoteStack > __strTemplateExprStack)
   const inStrTemplateExpr = () => __strTemplateQuoteStack > 0 && (__strTemplateQuoteStack === __strTemplateExprStack)
 
@@ -210,6 +212,9 @@ export function tokenize(code) {
    * @returns {number}
    */
   function classify(token) {
+    if (inJsxTag() && inStringQuotes()) {
+      return T_STRING
+    }
     const isJsxLiterals = inJsxLiterals()
     if (isJsxLiterals) {
       return T_JSX_LITERALS
@@ -224,7 +229,10 @@ export function tokenize(code) {
     } else if (isCls(token)) {
       return inJsxTag() ? T_IDENTIFIER : T_CLS_NUMBER
     } else {
-      return isIdentifier(token) && !inStrTemplateLiterals() && (__strQuote !== `"` && __strQuote !== `'`) ? T_IDENTIFIER : T_STRING
+
+      return isIdentifier(token) &&
+        !inStrTemplateLiterals() &&
+        (!isSingleQuotes(__strQuote)) ? T_IDENTIFIER : T_STRING
     }
   }
 
@@ -250,11 +258,13 @@ export function tokenize(code) {
     const p_c = prev + curr // previous and current
     const c_n = curr + next // current and next
 
-    if (isSingleQuotes(curr)) {
+    // Determine string quotation outside of jsx literals.
+    // Inside jsx literals, string quotation is still part of it.
+    if (isSingleQuotes(curr) && !inJsxLiterals()) {
       append()
       if (prev !== `\\`) {
         if (__strQuote && curr === __strQuote) {
-          __strQuote = 0
+          __strQuote = null
         } else if (!__strQuote) {
           __strQuote = curr
         }
@@ -504,7 +514,7 @@ function generate(tokens) {
   function flushLine(tokens) {
     linesHtml.push(createLine(
       tokens.map(([type, value]) => (
-        `<span style="color: var(--sh-${types[type]})">${encode(value)}</span>`
+        `<span class="sh__token--${types[type]}" style="color: var(--sh-${types[type]})">${encode(value)}</span>`
       ))
       .join('')
     ))
@@ -545,8 +555,19 @@ function generate(tokens) {
  * @param {string} code
  * @returns {string}
  */
-export function highlight(code) {
+function highlight(code) {
   const tokens = tokenize(code)
   const output = generate(tokens).join('\n')
   return output
+}
+
+// namespace
+const SugarHigh = {
+  TokenTypes: types,
+}
+
+export {
+  highlight,
+  tokenize,
+  SugarHigh,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sugar-high",
-  "version": "0.4.6",
+  "version": "0.5.0",
   "type": "module",
   "exports": "./lib/index.mjs",
   "description": "Super lightweight JSX syntax highlighter",
@@ -17,10 +17,11 @@
   },
   "devDependencies": {
     "codice": "^0.0.10",
-    "next": "canary",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "next": "13.4.20-canary.23",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sugar-high": "link:./",
-    "vitest": "^0.13.1"
-  }
+    "vitest": "^0.34.4"
+  },
+  "packageManager": "pnpm@8.7.1"
 }