sugar-high 0.2.0 → 0.3.0

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/9416c941-9c40-4dbe-a73e-0e0d21993802)
+![img](https://repository-images.githubusercontent.com/453236442/82cf2807-78f0-4009-bbdf-d7e753f73cf4)
 
 ### Usage
 
@@ -58,6 +58,21 @@ Then make your own theme with customized colors by token type and put in global
 }
 ```
 
+### 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;
+}
+```
+
 ### LICENSE
 
 MIT

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,16 +123,18 @@ 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 isIdentifierChar(chr) {
-  return /^[\w_$]$/.test(chr)
+  return /^[a-zA-Z_$]$/.test(chr)
 }
 
 function isIdentifier(str) {
-  return /[a-zA-Z_$]/.test(str[0]) && (str.length === 1 || /^[\w_$]+$/.test(str.slice(1)))
+  return isIdentifierChar(str[0]) && (str.length === 1 || isWord(str.slice(1)))
 }
 
 function isStringQuotation(chr) {
@@ -147,8 +150,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) {
@@ -177,9 +180,9 @@ export function tokenize(code) {
     } else if (token.split('').every(ch => signs.has(ch))) {
       return T_SIGN
     } else if (
-      !inJsxLiterals() && 
+      !inJsxLiterals() &&
       (
-        isIdentifierChar(chr0) &&
+        isWord(chr0) &&
         chr0 === chr0.toUpperCase() ||
         token === 'null'
       )
@@ -207,11 +210,11 @@ export function tokenize(code) {
     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 p_c = prev + curr // previous and current
     const isJsxLiterals = inJsxLiterals()
 
     if (jsx.tag) {
-      const isOpenElementEnd = curr === '>' 
+      const isOpenElementEnd = curr === '>'
       const isCloseElementEnd = p_c === '/>'
       jsx.child = !isCloseElementEnd && !isCloseElementEnd
       jsx.tag = !(isOpenElementEnd || isCloseElementEnd)
@@ -228,13 +231,13 @@ export function tokenize(code) {
       append()
       const [lastType, lastToken] = last
       // Special cases that are not considered as regex:
-      // * (expr) / expr: `()[]` before `/` 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 && 
+        isRegexChar &&
+        lastType &&
         !(
-          (lastType === T_SIGN && !'()[]'.includes(lastToken)) || 
+          (lastType === T_SIGN && !'()'.includes(lastToken)) ||
           lastType === T_COMMENT
         )
       ) {
@@ -243,35 +246,48 @@ export function tokenize(code) {
         continue
       }
       const start = i++
-      
-      const isInline = () => i < code.length && code[i] !== '\n'
+      const leftQuote = code[start]
+      let foundClose = false
+
+      // end of line of end of file
+      const isEof = () => i >= code.length
+      const isEol = () => isEof() || code[i] === '\n'
       // string quotation
       if (isQuotationChar) {
-        for (; isInline(); i++) {
-          if (isStringQuotation(code[i])) {
+        for (; !isEof(); i++) {
+          // handle single quotes
+          if ((leftQuote === "'" || leftQuote === '"') && code[i] === '\n') break
+          if (isStringQuotation(code[i]) && code[i] === leftQuote) {
+            foundClose = true
             break
           }
         }
       } else {
         // regex
-        for (; isInline(); i++) {
+        for (; !isEol(); i++) {
           if (code[i] === '/' && code[i - 1] !== '\\') {
+            foundClose = true
             // append regex flags
-            while (start !== i && /^[a-z]$/.test(code[i + 1]) && isInline()) {
+            while (start !== i && /^[a-z]$/.test(code[i + 1]) && !isEol()) {
               i++
-            };
+            }
             break
           }
         }
       }
-      if (start !== i) {
+      if (start !== i && foundClose) {
+        // If current line is fully closed with string quotes or regex slashes,
+        // add them to tokens
         current = code.slice(start, i + 1)
         append(T_STRING)
       } else {
+        // If it doesn't match any of the above, just leave it as operator and move on
         current = curr
         append()
+        i = start
       }
     } else if (isCommentStart(c_n)) {
+      append()
       const start = i
       if (next === '/') {
         for (; i < code.length && code[i] !== '\n'; i++);
@@ -297,7 +313,7 @@ export function tokenize(code) {
     } else {
       if (
         (isJsxLiterals && !jsxBrackets.has(curr)) ||
-        isIdentifierChar(curr) === isIdentifierChar(current[current.length - 1]) &&
+        isWord(curr) === isWord(current[current.length - 1]) &&
         !signs.has(curr)
       ) {
         current += curr
@@ -326,30 +342,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.0",
+  "version": "0.3.0",
   "type": "module",
   "exports": "./lib/index.mjs",
   "description": "Super lightweight JSX syntax highlighter",
@@ -12,11 +12,13 @@
   "license": "MIT",
   "scripts": {
     "test": "vitest run",
-    "dev": "vite docs",
-    "build": "vite build docs"
+    "dev": "next dev docs",
+    "build": "next build docs"
   },
   "devDependencies": {
-    "vite": "^2.8.6",
-    "vitest": "^0.5.9"
+    "next": "12.1.4",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "vitest": "~0.6.0"
   }
 }