sugar-high 0.2.1 → 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,22 @@ Then make your own theme with customized colors by token type and put in global
   color: #a19595;
 }
 .sh__jsxliterals {
-  color: #03066e;
+  color: #6266d1;
+}
+```
+
+### Features
+
+#### Line number
+
+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
+.sh__line::before {
+  content: attr(data-line-number);
+  margin-right: 24px;
+  text-align: right;
+  color: #a4a4a4;
 }
 ```
 

package/lib/index.mjs

@@ -71,6 +71,7 @@ const signs = new Set([
   '[',
   ']',
   '#',
+  '@',
   '\\',
 ])
 
@@ -87,7 +88,7 @@ export const types = [
 ]
 
 /**
- * 
+ *
  * 0 - identifier
  * 1 - keyword
  * 2 - string
@@ -97,7 +98,7 @@ export const types = [
  * 6 - break
  * 7 - space
  * 8 - jsx literals
- * 
+ *
  */
 const [
   T_IDENTIFIER,
@@ -122,14 +123,19 @@ function encode(str) {
     .replace(/>/g, '>')
     .replace(/"/g, '"')
     .replace(/'/g, ''')
-    // matches space but not new line
-    .replace(/[^\S\r\n]/g, ' ')
 }
 
 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)
 }
@@ -151,8 +157,8 @@ function isRegexStart(str) {
   return str[0] === '/' && !isCommentStart(str[0] + str[1])
 }
 
-/** 
- * @param {string} code 
+/**
+ * @param {string} code
  * @return {Array<[number, string]>}
  */
 export function tokenize(code) {
@@ -162,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') {
@@ -180,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
     }
   }
 
@@ -210,15 +217,19 @@ export function tokenize(code) {
     const curr = code[i]
     const prev = code[i - 1]
     const next = code[i + 1]
+    const p_c = prev + curr // previous and current
     const c_n = curr + next // current and next
-    const p_c = prev + curr // previous and current    
     const isJsxLiterals = inJsxLiterals()
 
+    if (jsx.close && (last[1] === '>' || last[1] === '/>')) {
+      jsx.close = false
+    }
     if (jsx.tag) {
-      const isOpenElementEnd = curr === '>' 
+      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 === '</')) {
@@ -235,10 +246,10 @@ export function tokenize(code) {
       // * (expr1) / expr2: `()` before `/` operator is still in expression
       // * <non comment start>/ expr: non comment start before `/` is not regex
       if (
-        isRegexChar && 
-        lastType && 
+        isRegexChar &&
+        lastType &&
         !(
-          (lastType === T_SIGN && !'()'.includes(lastToken)) || 
+          (lastType === T_SIGN && !'()'.includes(lastToken)) ||
           lastType === T_COMMENT
         )
       ) {
@@ -247,14 +258,18 @@ export function tokenize(code) {
         continue
       }
       const start = i++
+      const leftQuote = code[start]
       let foundClose = false
-      
+
       // end of line of end of file
-      const isEol = () => i >= code.length || code[i] === '\n'
+      const isEof = () => i >= code.length
+      const isEol = () => isEof() || code[i] === '\n'
       // string quotation
       if (isQuotationChar) {
-        for (; !isEol(); i++) {
-          if (isStringQuotation(code[i]) && code[i] === code[start]) {
+        for (; !isEof(); i++) {
+          // handle single quotes
+          if ((leftQuote === "'" || leftQuote === '"') && code[i] === '\n') break
+          if (isStringQuotation(code[i]) && code[i] === leftQuote) {
             foundClose = true
             break
           }
@@ -267,7 +282,7 @@ export function tokenize(code) {
             // append regex flags
             while (start !== i && /^[a-z]$/.test(code[i + 1]) && !isEol()) {
               i++
-            };
+            }
             break
           }
         }
@@ -284,6 +299,7 @@ export function tokenize(code) {
         i = start
       }
     } else if (isCommentStart(c_n)) {
+      append()
       const start = i
       if (next === '/') {
         for (; i < code.length && code[i] !== '\n'; i++);
@@ -313,6 +329,9 @@ export function tokenize(code) {
         !signs.has(curr)
       ) {
         current += curr
+        if (next === '<') {
+          append();
+        }
       } else {
         append()
         current = curr
@@ -338,30 +357,61 @@ export function tokenize(code) {
   return tokens
 }
 
-/** 
- * @param {Array<[number, string]>} tokens 
+/**
+ * @param {Array<[number, string]>} tokens
  * @return {Array<string>}
  */
 function generate(tokens) {
-  const output = []
+  let lineNo = 1
+  const linesHtml = []
+  const createLine = (content) => `<span data-line-number="${lineNo++}" class="sh__line">${content}</span>`
+
+  function flushLine(tokens) {
+    linesHtml.push(createLine(
+      tokens.map(token => (
+        `<span class="sh__${types[token[0]]}">${encode(token[1])}</span>`
+      ))
+      .join('')
+    ))
+  }
+  const lineTokens = []
   for (let i = 0; i < tokens.length; i++) {
-    const [type, token] = tokens[i]
-    output.push(
-      type === T_BREAK 
-      ? '<br>'
-      : `<span class="sh__${types[type]}">${encode(token)}</span>`
-    )
+    const token = tokens[i]
+    const [type, value] = token
+    if (type !== T_BREAK) {
+      // Divide multi-line token into multi-line code
+      if (value.includes('\n')) {
+        const lines = value.split('\n')
+        for (let j = 0; j < lines.length; j++) {
+          lineTokens.push([type, lines[j]])
+          if (j < lines.length - 1) {
+            flushLine(lineTokens)
+            lineTokens.length = 0
+          }
+        }
+      } else {
+        lineTokens.push(token)
+      }
+    } else {
+      lineTokens.push([type, ''])
+      flushLine(lineTokens)
+      lineTokens.length = 0
+    }
   }
-  return output
+
+  if (lineTokens.length)
+    flushLine(lineTokens)
+
+  return linesHtml
 }
 
 /**
- * 
- * @param {string} code 
+ *
+ * @param {string} code
  * @returns {string}
  */
 export function highlight(code) {
   const tokens = tokenize(code)
-  const output = generate(tokens).join('')
+  const output = generate(tokens).join('\n')
   return output
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sugar-high",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "type": "module",
   "exports": "./lib/index.mjs",
   "description": "Super lightweight JSX syntax highlighter",
@@ -16,9 +16,9 @@
     "build": "next build docs"
   },
   "devDependencies": {
-    "next": "12.1.1-canary.15",
-    "react": "18.0.0-rc.2",
-    "react-dom": "18.0.0-rc.2",
+    "next": "12.1.4",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
     "vitest": "~0.6.0"
   }
 }