sugar-high 0.0.5 → 0.0.9

package/README.md

@@ -21,38 +21,39 @@ document.querySelector('pre > code').innerHTML = codeHTML
 
 ### Highlight with CSS
 
-Then make your own theme with customized colors and put in global CSS
+Then make your own theme with customized colors by token type and put in global CSS. The corresponding class names star with `sh__` prefix.
 
 ```css
-/*
- * 0 - comment
- * 1 - keyword
- * 2 - break
- * 3 - string
- * 4 - space
- * 5 - sign
- * 6 - identifier
- * 7 - Class, number and null
+/**
+ * Types that sugar-high have:
+ *
+ * identifier
+ * keyword
+ * string
+ * Class, number and null
+ * sign
+ * comment
+ * 
  */
-.sh__7 {
-  color: #3476cb;
+.sh__class {
+  color: #2d5e9d;
 }
-.sh__6 {
+.sh__identifier {
   color: #2d333b;
 }
-.sh__5 {
-  color: #818c9b;
-  font-weight: bold;
+.sh__sign {
+  color: #8996a3;
 }
-.sh__3 {
+.sh__string {
   color: #00a99a;
 }
-.sh__1 {
+.sh__keyword {
   color: #f47067;
 }
-.sh__0 {
-  color: #818c9b;
+.sh__comment {
+  color: #a19595;
 }
+
 ```
 
 ### LICENSE

package/index.d.ts

@@ -0,0 +1,2 @@
+export function highlight(code: string): string
+export function tokenize(code: string): Array<[number, string]>

package/lib/index.mjs

@@ -62,6 +62,7 @@ const signs = new Set([
   ':',
   '.',
   ',',
+  ';',
   `'`,
   '"',
   '.',
@@ -73,28 +74,39 @@ const signs = new Set([
   '\\',
 ])
 
+const types = [
+  'identifier',
+  'keyword',
+  'string',
+  'class',
+  'sign',
+  'comment',
+  'break',
+  'space',
+]
+
 /**
  * 
- * 0 - comment
+ * 0 - identifier
  * 1 - keyword
- * 2 - break
- * 3 - string
- * 4 - space
- * 5 - sign
- * 6 - identifier
- * 7 - Class, number and null
+ * 2 - string
+ * 3 - Class, number and null
+ * 4 - sign
+ * 5 - comment
+ * 6 - break
+ * 7 - space
  * 
  */
 const [
-  T_COMMENT,
+  T_IDENTIFIER,
   T_KEYWORD,
-  T_BREAK,
   T_STRING,
-  T_SPACE,
-  T_SIGN,
-  T_IDENTIFIER,
   T_CLS_NUMBER,
-] = Array(8).fill().map((_, i) => i)
+  T_SIGN,
+  T_COMMENT,
+  T_BREAK,
+  T_SPACE,
+] = types.map((_, i) => i)
 
 function isSpaces(str) {
   return /^[^\S\r\n]+$/g.test(str)
@@ -151,8 +163,11 @@ export function tokenize(code) {
   /** @type {{ tag: boolean; child: boolean; expr: boolean }} */
   const jsx = { tag: false, child: false, expr: false }
 
+  const inJsxLiterals = () => !jsx.tag && jsx.child && !jsx.expr
+
   function classify(token) {
-    if (isCommentStart(token[0] + token[1])) {
+    const [chr0, chr1] = [token[0], token[1]]
+    if (isCommentStart(chr0 + chr1)) {
       return T_COMMENT
     } else if (keywords.has(token)) {
       return T_KEYWORD
@@ -161,19 +176,23 @@ export function tokenize(code) {
     } else if (
        (
         // is quoted string
-        (isStringQuotation(token[0]) && !isStringQuotation(token[1])) ||
+        (isStringQuotation(chr0) && !isStringQuotation(chr1)) ||
         // is regex
-        (!jsx.tag && isRegexStart(token[0] + token[1]) && token[token.length - 1] === '/')
+        (!jsx.tag && isRegexStart(chr0 + chr1) && token[token.length - 1] === '/')
       )
     ) {
       return T_STRING
     } else if (token === ' ') {
       return T_SPACE
-    } else if (signs.has(token[0])) {
+    } else if (signs.has(chr0)) {
       return T_SIGN
     } else if (
-      token[0] === token[0].toUpperCase() ||
-      token === 'null'
+      !inJsxLiterals() && 
+      (
+        isIdentifierChar(chr0) &&
+        chr0 === chr0.toUpperCase() ||
+        token === 'null'
+      )
     ) {
       return T_CLS_NUMBER
     } else {
@@ -193,8 +212,8 @@ 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 isJsxLiterals = jsx.child && !jsx.expr
+    const p_c = prev + curr // previous and current    
+    const isJsxLiterals = inJsxLiterals()
 
     if (jsx.tag) {
       const isOpenElementEnd = curr === '>' 
@@ -207,13 +226,6 @@ export function tokenize(code) {
       jsx.tag = true
       jsx.child = false
     }
-    
-    if (jsx.child && curr === '{') {
-      jsx.expr = true
-    }
-    if (jsx.child && jsx.expr && curr === '}') {
-      jsx.expr = false
-    }
 
     if (
       !string.entered && 
@@ -276,7 +288,7 @@ export function tokenize(code) {
       } else {
         append()
         current = curr
-        if (c_n === '</') {
+        if (c_n === '</' || c_n === '/>') {
           current = c_n
           append()
           i++
@@ -284,6 +296,13 @@ 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()
@@ -302,12 +321,17 @@ function generate(tokens) {
     output.push(
       type === T_BREAK 
       ? '<br>'
-      : `<span class="sh__${type}">${encode(token)}</span>`
+      : `<span class="sh__${types[type]}">${encode(token)}</span>`
     )
   }
   return output
 }
 
+/**
+ * 
+ * @param {string} code 
+ * @returns {string}
+ */
 export function highlight(code) {
   const tokens = tokenize(code)
   const output = generate(tokens).join('')

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "sugar-high",
-  "version": "0.0.5",
+  "version": "0.0.9",
   "type": "module",
   "exports": "./lib/index.mjs",
   "description": "Super lightweight JSX syntax highlighter",
   "files": [
     "lib",
+    "index.d.ts",
     "*.md"
   ],
   "license": "MIT",