sugar-high 0.4.1 → 0.4.2

package/lib/index.mjs

@@ -168,16 +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}
-  // jsx.end for entering close tag
-  /** @type {{ tag: boolean; close: boolean; child: boolean; expr: boolean; end: boolean }} */
-  const jsx = { tag: false, close: false, child: false, expr: false, end: false }
-
-  const inJsxTag = () => jsx.tag || jsx.close
-  const inJsxLiterals = () => !inJsxTag() && jsx.child && !jsx.expr
+  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
+
+  // 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
 
   /**
    *
@@ -185,7 +190,10 @@ export function tokenize(code) {
    * @returns {number}
    */
   function classify(token) {
-    if (keywords.has(token)) {
+    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
@@ -193,8 +201,6 @@ export function tokenize(code) {
       return T_SPACE
     } else if (token.split('').every(ch => signs.has(ch))) {
       return T_SIGN
-    } else if (inJsxLiterals()) {
-      return T_JSX_LITERALS
     } else if (isCls(token)) {
       return inJsxTag() ? T_IDENTIFIER : T_CLS_NUMBER
     } else {
@@ -220,35 +226,85 @@ 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 (!jsx.tag && (c_n === '</' || c_n === '/>')) {
-      jsx.end = true
+    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 = !jsx.end && (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
+        }
 
-      jsx.tag = !(isOpenElementEnd || isCloseElementEnd)
-      jsx.close = isOpenElementEnd || isCloseElementEnd
-      if (jsx.end && (isCloseElementEnd || isOpenElementEnd)) {
-        jsx.end = false
+        // <: 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
@@ -327,27 +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)) ||
         // same type char as previous one in current token
-        isWord(curr) === isWord(current[current.length - 1]) &&
-        !signs.has(curr)
+        ((isWord(curr) === isWord(current[current.length - 1]) || __jsxChild()) && !signs.has(curr))
       ) {
         current += curr
-        if (next === '<') {
-          append(T_JSX_LITERALS);
-        }
       } else {
-        append(c_n === '</' ? T_JSX_LITERALS : undefined)
-        current = curr
-        if (c_n === '</' || c_n === '/>') {
+        if (p_c === '</') {
+          current = p_c
+        }
+        append()
+
+        if (p_c !== '</') {
+          current = curr
+
+        }
+        if ((c_n === '</' || c_n === '/>')) {
           current = c_n
           append()
           i++
@@ -355,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()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sugar-high",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "type": "module",
   "exports": "./lib/index.mjs",
   "description": "Super lightweight JSX syntax highlighter",
@@ -16,7 +16,7 @@
     "build": "next build docs"
   },
   "devDependencies": {
-    "codice": "^0.0.3",
+    "codice": "^0.0.9",
     "next": "12.1.6-canary.6",
     "react": "18.0.0",
     "react-dom": "18.0.0",