sugar-high 0.3.0 → 0.3.1

package/README.md

@@ -3,7 +3,7 @@
 
 Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped
 
-![img](https://repository-images.githubusercontent.com/453236442/82cf2807-78f0-4009-bbdf-d7e753f73cf4)
+![img](https://repository-images.githubusercontent.com/453236442/94994be5-72fa-479f-8b87-2dc14fe40329)
 
 ### Usage
 
@@ -54,7 +54,7 @@ Then make your own theme with customized colors by token type and put in global
   color: #a19595;
 }
 .sh__jsxliterals {
-  color: #03066e;
+  color: #6266d1;
 }
 ```
 

package/lib/index.mjs

@@ -129,6 +129,13 @@ function isWord(chr) {
   return /^[\w_]+$/.test(chr)
 }
 
+function isCls(str) {
+  const chr0 = str[0]
+  return isWord(chr0) &&
+    chr0 === chr0.toUpperCase() ||
+    str === 'null'
+}
+
 function isIdentifierChar(chr) {
   return /^[a-zA-Z_$]$/.test(chr)
 }
@@ -161,16 +168,22 @@ export function tokenize(code) {
   /** @type {Array<[number, string]>} */
   const tokens = []
 
-  // jsx.tag for entering open or closed tag
+  // 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; child: boolean; expr: boolean }} */
-  const jsx = { tag: false, child: false, expr: false }
+  /** @type {{ tag: boolean; close: boolean; child: boolean; expr: boolean }} */
+  const jsx = { tag: false, close: false, child: false, expr: false }
 
-  const inJsxLiterals = () => !jsx.tag && jsx.child && !jsx.expr
+  const inJsxTag = () => jsx.tag || jsx.close
+  const inJsxLiterals = () => !inJsxTag() && jsx.child && !jsx.expr
 
+  /**
+   *
+   * @param {string} token
+   * @returns {number}
+   */
   function classify(token) {
-    const chr0 = token[0]
     if (keywords.has(token)) {
       return T_KEYWORD
     } else if (token === '\n') {
@@ -179,17 +192,12 @@ export function tokenize(code) {
       return T_SPACE
     } else if (token.split('').every(ch => signs.has(ch))) {
       return T_SIGN
-    } else if (
-      !inJsxLiterals() &&
-      (
-        isWord(chr0) &&
-        chr0 === chr0.toUpperCase() ||
-        token === 'null'
-      )
-    ) {
-      return T_CLS_NUMBER
+    } else if (isCls(token)) {
+      return inJsxLiterals() ? T_JSX_LITERALS : inJsxTag() ? T_IDENTIFIER : T_CLS_NUMBER
     } else {
-      return isIdentifier(token) ? T_IDENTIFIER : inJsxLiterals() ? T_JSX_LITERALS : T_STRING
+      return inJsxLiterals()
+        ? T_JSX_LITERALS
+        : isIdentifier(token) ? T_IDENTIFIER : T_STRING
     }
   }
 
@@ -209,15 +217,19 @@ export function tokenize(code) {
     const curr = code[i]
     const prev = code[i - 1]
     const next = code[i + 1]
-    const c_n = curr + next // current and next
     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) {
       const isOpenElementEnd = curr === '>'
       const isCloseElementEnd = p_c === '/>'
-      jsx.child = !isCloseElementEnd && !isCloseElementEnd
+      jsx.child = !isCloseElementEnd
       jsx.tag = !(isOpenElementEnd || isCloseElementEnd)
+      jsx.close = isOpenElementEnd || isCloseElementEnd
     }
     // 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 === '</')) {
@@ -317,6 +329,9 @@ export function tokenize(code) {
         !signs.has(curr)
       ) {
         current += curr
+        if (next === '<') {
+          append();
+        }
       } else {
         append()
         current = curr

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sugar-high",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "exports": "./lib/index.mjs",
   "description": "Super lightweight JSX syntax highlighter",