sugar-high 0.3.0 → 0.4.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
 
@@ -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: #03066e;
+: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

@@ -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,35 +168,37 @@ 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 }
+  // 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 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
+      return last[1] === '.' ? T_IDENTIFIER : T_KEYWORD
     } else if (token === '\n') {
       return T_BREAK
     } else if (isSpaces(token)) {
       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 (inJsxLiterals()) {
+      return T_JSX_LITERALS
+    } else if (isCls(token)) {
+      return inJsxTag() ? T_IDENTIFIER : T_CLS_NUMBER
     } else {
-      return isIdentifier(token) ? T_IDENTIFIER : inJsxLiterals() ? T_JSX_LITERALS : T_STRING
+      return isIdentifier(token) ? T_IDENTIFIER : T_STRING
     }
   }
 
@@ -209,15 +218,28 @@ 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 && (c_n === '</' || c_n === '/>')) {
+      jsx.end = true
+    }
+
     if (jsx.tag) {
       const isOpenElementEnd = curr === '>'
       const isCloseElementEnd = p_c === '/>'
-      jsx.child = !isCloseElementEnd && !isCloseElementEnd
+      jsx.child = !jsx.end && (isOpenElementEnd && !isCloseElementEnd)
+
       jsx.tag = !(isOpenElementEnd || isCloseElementEnd)
+      jsx.close = isOpenElementEnd || isCloseElementEnd
+      if (jsx.end && (isCloseElementEnd || isOpenElementEnd)) {
+        jsx.end = false
+      }
     }
     // 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 === '</')) {
@@ -231,13 +253,13 @@ export function tokenize(code) {
       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
         )
       ) {
@@ -312,13 +334,18 @@ export function tokenize(code) {
       }
     } 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)
       ) {
         current += curr
+        if (next === '<') {
+          append(T_JSX_LITERALS);
+        }
       } else {
-        append()
+        append(c_n === '</' ? T_JSX_LITERALS : undefined)
         current = curr
         if (c_n === '</' || c_n === '/>') {
           current = c_n
@@ -347,14 +374,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.0",
+  "version": "0.4.1",
   "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.3",
+    "next": "12.1.6-canary.6",
     "react": "18.0.0",
     "react-dom": "18.0.0",
+    "sugar-high": "link:./",
     "vitest": "~0.6.0"
   }
 }