sugar-high 0.3.1 → 0.4.2

package/README.md

@@ -35,26 +35,14 @@ Then make your own theme with customized colors by token type and put in global
  * comment
  * jsxliterals
  */
-.sh__class {
-  color: #2d5e9d;
-}
-.sh__identifier {
-  color: #2d333b;
-}
-.sh__sign {
-  color: #8996a3;
-}
-.sh__string {
-  color: #00a99a;
-}
-.sh__keyword {
-  color: #f47067;
-}
-.sh__comment {
-  color: #a19595;
-}
-.sh__jsxliterals {
-  color: #6266d1;
+:root {
+  --sh-class: #2d5e9d;
+  --sh-identifier: #354150;
+  --sh-sign: #8996a3;
+  --sh-string: #00a99a;
+  --sh-keyword: #f47067;
+  --sh-comment: #a19595;
+  --sh-jsxliterals: #6266d1;
 }
 ```
 
@@ -65,8 +53,13 @@ Then make your own theme with customized colors by token type and put in global
 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.
 
 ```css
+pre code {
+  counter-reset: sh-line-number;
+}
+
 .sh__line::before {
-  content: attr(data-line-number);
+  counter-increment: sh-line-number 1;
+  content: counter(sh-line-number);
   margin-right: 24px;
   text-align: right;
   color: #a4a4a4;

package/lib/index.mjs

@@ -168,15 +168,21 @@ export function tokenize(code) {
   /** @type {Array<[number, string]>} */
   const tokens = []
 
-  // jsx.tag for entering open or closed tags
-  // jsx.close for is the closing sign of open or close tags
-  // jsx.child for entering children
-  // jsx.expr for entering {expression}
-  /** @type {{ tag: boolean; close: boolean; child: boolean; expr: boolean }} */
-  const jsx = { tag: false, close: false, child: false, expr: false }
+  let __jsxEnter = false
+  /**
+   * @type {0 | 1 | 2}
+   * 0 for not in jsx
+   * 1 for open jsx tag
+   * 2 for closing jsx tag
+   **/
+  let __jsxTag = 0
+  let __jsxExpr = false
 
-  const inJsxTag = () => jsx.tag || jsx.close
-  const inJsxLiterals = () => !inJsxTag() && jsx.child && !jsx.expr
+  // only match paired (open + close) tags, not self-closing tags
+  let __jsxStack = 0
+  const __jsxChild = () => __jsxEnter && !__jsxExpr && !__jsxTag
+  const inJsxTag = () => __jsxTag && !__jsxChild()
+  const inJsxLiterals = () => !__jsxTag && __jsxChild() && !__jsxExpr && __jsxStack > 0
 
   /**
    *
@@ -184,8 +190,11 @@ export function tokenize(code) {
    * @returns {number}
    */
   function classify(token) {
-    if (keywords.has(token)) {
-      return T_KEYWORD
+    const isJsxLiterals = inJsxLiterals()
+    if (isJsxLiterals) {
+      return T_JSX_LITERALS
+    } else if (keywords.has(token)) {
+      return last[1] === '.' ? T_IDENTIFIER : T_KEYWORD
     } else if (token === '\n') {
       return T_BREAK
     } else if (isSpaces(token)) {
@@ -193,11 +202,9 @@ export function tokenize(code) {
     } else if (token.split('').every(ch => signs.has(ch))) {
       return T_SIGN
     } else if (isCls(token)) {
-      return inJsxLiterals() ? T_JSX_LITERALS : inJsxTag() ? T_IDENTIFIER : T_CLS_NUMBER
+      return inJsxTag() ? T_IDENTIFIER : T_CLS_NUMBER
     } else {
-      return inJsxLiterals()
-        ? T_JSX_LITERALS
-        : isIdentifier(token) ? T_IDENTIFIER : T_STRING
+      return isIdentifier(token) ? T_IDENTIFIER : T_STRING
     }
   }
 
@@ -219,37 +226,96 @@ export function tokenize(code) {
     const next = code[i + 1]
     const p_c = prev + curr // previous and current
     const c_n = curr + next // current and next
-    const isJsxLiterals = inJsxLiterals()
 
-    if (jsx.close && (last[1] === '>' || last[1] === '/>')) {
-      jsx.close = false
+
+    if (__jsxChild()) {
+      if (curr === '{') {
+        append()
+        current = curr
+        append(T_SIGN)
+        __jsxExpr = true
+        continue
+      }
     }
-    if (jsx.tag) {
-      const isOpenElementEnd = curr === '>'
-      const isCloseElementEnd = p_c === '/>'
-      jsx.child = !isCloseElementEnd
-      jsx.tag = !(isOpenElementEnd || isCloseElementEnd)
-      jsx.close = isOpenElementEnd || isCloseElementEnd
+
+    if (__jsxEnter) {
+      // <: open tag sign
+      if (!__jsxTag && curr === '<') {
+        append()
+        __jsxTag = 1
+        current = curr
+        if (next === '/') {
+          __jsxTag = 2
+          current = c_n
+          i++
+        }
+        append(T_SIGN)
+        continue
+      }
+      if (__jsxTag) {
+        // >: open tag close sign or closing tag closing sign
+        if (curr === '>' && prev !== '/') {
+          append()
+          if (__jsxTag === 1) {
+            __jsxTag = 0
+            __jsxStack++
+          } else {
+            __jsxTag = 0
+            __jsxEnter = false
+          }
+          current = curr
+          append(T_SIGN)
+          continue
+        }
+
+        // >: tag self close sign or close tag sign
+        if (c_n === '/>' || c_n === '</') {
+          append()
+          if (c_n === '/>') {
+            __jsxTag = 0
+          }
+          if (c_n === '</') {
+            __jsxStack--
+          }
+          current = c_n
+          i++
+          append(T_SIGN)
+          continue
+        }
+
+        // <: open tag sign
+        if (curr === '<') {
+          append()
+          current = curr
+          append(T_SIGN)
+          continue
+        }
+      }
     }
+
     // if it's not in a jsx tag declaration or a string, close child if next is jsx close tag
-    if (!jsx.tag && (curr === '<' && isIdentifierChar(next) || c_n === '</')) {
-      jsx.tag = true
-      jsx.child = false
+    if (!__jsxTag && (curr === '<' && isIdentifierChar(next) || c_n === '</')) {
+      __jsxTag = next === '/' ? 2 : 1
+
+      if (curr === '<' && next !== '/') {
+        __jsxEnter = true
+      }
     }
 
     const isQuotationChar = isStringQuotation(curr)
-    const isRegexChar = !jsx.tag && isRegexStart(c_n)
+    const isRegexChar = !__jsxEnter && isRegexStart(c_n)
+    const isJsxLiterals = inJsxLiterals()
     if (isQuotationChar || isRegexChar) {
       append()
       const [lastType, lastToken] = last
       // Special cases that are not considered as regex:
-      // * (expr1) / expr2: `()` before `/` operator is still in expression
+      // * (expr1) / expr2: `)` before `/` operator is still in expression
       // * <non comment start>/ expr: non comment start before `/` is not regex
       if (
         isRegexChar &&
         lastType &&
         !(
-          (lastType === T_SIGN && !'()'.includes(lastToken)) ||
+          (lastType === T_SIGN && ')' !== lastToken) ||
           lastType === T_COMMENT
         )
       ) {
@@ -317,25 +383,38 @@ export function tokenize(code) {
         )
       ) {
         current += curr
+        if (next === '<') {
+          append()
+        }
       } else {
         append()
         current = curr
         append()
       }
     } else {
-      if (
+      if (__jsxExpr && curr === '}') {
+        append()
+        current = curr
+        append()
+        __jsxExpr = false
+      } else if (
+        // it's jsx literals and is not a jsx bracket
         (isJsxLiterals && !jsxBrackets.has(curr)) ||
-        isWord(curr) === isWord(current[current.length - 1]) &&
-        !signs.has(curr)
+        // same type char as previous one in current token
+        ((isWord(curr) === isWord(current[current.length - 1]) || __jsxChild()) && !signs.has(curr))
       ) {
         current += curr
-        if (next === '<') {
-          append();
-        }
       } else {
+        if (p_c === '</') {
+          current = p_c
+        }
         append()
-        current = curr
-        if (c_n === '</' || c_n === '/>') {
+
+        if (p_c !== '</') {
+          current = curr
+
+        }
+        if ((c_n === '</' || c_n === '/>')) {
           current = c_n
           append()
           i++
@@ -343,13 +422,6 @@ export function tokenize(code) {
         else if (jsxBrackets.has(curr)) append()
       }
     }
-
-    if (jsx.child && curr === '{') {
-      jsx.expr = true
-    }
-    if (jsx.child && jsx.expr && curr === '}') {
-      jsx.expr = false
-    }
   }
 
   append()
@@ -362,14 +434,13 @@ export function tokenize(code) {
  * @return {Array<string>}
  */
 function generate(tokens) {
-  let lineNo = 1
   const linesHtml = []
-  const createLine = (content) => `<span data-line-number="${lineNo++}" class="sh__line">${content}</span>`
+  const createLine = (content) => `<span class="sh__line">${content}</span>`
 
   function flushLine(tokens) {
     linesHtml.push(createLine(
-      tokens.map(token => (
-        `<span class="sh__${types[token[0]]}">${encode(token[1])}</span>`
+      tokens.map(([type, value]) => (
+        `<span style="color: var(--sh-${types[type]})">${encode(value)}</span>`
       ))
       .join('')
     ))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sugar-high",
-  "version": "0.3.1",
+  "version": "0.4.2",
   "type": "module",
   "exports": "./lib/index.mjs",
   "description": "Super lightweight JSX syntax highlighter",
@@ -16,9 +16,11 @@
     "build": "next build docs"
   },
   "devDependencies": {
-    "next": "12.1.4",
+    "codice": "^0.0.9",
+    "next": "12.1.6-canary.6",
     "react": "18.0.0",
     "react-dom": "18.0.0",
+    "sugar-high": "link:./",
     "vitest": "~0.6.0"
   }
 }