sugar-high 0.4.7 → 0.5.1

package/README.md

@@ -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',
@@ -141,8 +141,12 @@ function hasUnicode(s) {
   return /[^\u0000-\u007f]/.test(s);
 }
 
+function isAlpha(chr) {
+  return /^[a-zA-Z]$/.test(chr)
+}
+
 function isIdentifierChar(chr) {
-  return /^[a-zA-Z_$]$/.test(chr) || hasUnicode(chr)
+  return isAlpha(chr) || hasUnicode(chr)
 }
 
 function isIdentifier(str) {
@@ -174,7 +178,7 @@ 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]} */
@@ -182,12 +186,13 @@ export function tokenize(code) {
   /** @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}
-   * 0 for not in jsx
-   * 1 for open jsx tag
-   * 2 for closing jsx tag
+   * 0 for not in jsx;
+   * 1 for open jsx tag;
+   * 2 for closing jsx tag;
    **/
   let __jsxTag = 0
   let __jsxExpr = false
@@ -212,6 +217,7 @@ export function tokenize(code) {
    * @returns {number}
    */
   function classify(token) {
+    const isLineBreak = token === '\n'
     if (inJsxTag() && inStringQuotes()) {
       return T_STRING
     }
@@ -220,7 +226,7 @@ export function tokenize(code) {
       return T_JSX_LITERALS
     } else if (keywords.has(token)) {
       return last[1] === '.' ? T_IDENTIFIER : T_KEYWORD
-    } else if (token === '\n') {
+    } else if (isLineBreak) {
       return T_BREAK
     } else if (isSpaces(token)) {
       return T_SPACE
@@ -320,14 +326,18 @@ export function tokenize(code) {
 
     if (__jsxEnter) {
       // <: open tag sign
+      // new '<' not inside jsx
       if (!__jsxTag && curr === '<') {
         append()
-        __jsxTag = 1
-        current = curr
         if (next === '/') {
+          // close tag
           __jsxTag = 2
           current = c_n
           i++
+        } else {
+          // open tag
+          __jsxTag = 1
+          current = curr
         }
         append(T_SIGN)
         continue
@@ -350,11 +360,14 @@ export function tokenize(code) {
 
         // >: tag self close sign or close tag sign
         if (c_n === '/>' || c_n === '</') {
-          append()
+          // if current token is not part of close tag sign, push it first
+          if (current !== '<' || current !== '<') {
+            append()
+          }
           if (c_n === '/>') {
             __jsxTag = 0
-          }
-          if (c_n === '</') {
+          } else {
+            // is '</'
             __jsxStack--
           }
           current = c_n
@@ -377,7 +390,8 @@ export function tokenize(code) {
     if (!__jsxTag && (curr === '<' && isIdentifierChar(next) || c_n === '</')) {
       __jsxTag = next === '/' ? 2 : 1
 
-      if (curr === '<' && next !== '/') {
+      // current and next char can form a jsx open or close tag
+      if (curr === '<' && (next === '/' || isAlpha(next))) {
         __jsxEnter = true
       }
     }
@@ -514,7 +528,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('')
     ))
@@ -555,8 +569,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.7",
+  "version": "0.5.1",
   "type": "module",
   "exports": "./lib/index.mjs",
   "description": "Super lightweight JSX syntax highlighter",