sugar-high 0.5.5 → 0.6.0

package/README.md

@@ -35,18 +35,24 @@ Then make your own theme with customized colors by token type and put in global
  * keyword
  * string
  * Class, number and null
+ * property
+ * entity
+ * jsx literals
  * sign
  * comment
- * jsxliterals
+ * break
+ * space
  */
 :root {
   --sh-class: #2d5e9d;
   --sh-identifier: #354150;
   --sh-sign: #8996a3;
+  --sh-property: #0550ae;
+  --sh-entity: #249a97;
+  --sh-jsxliterals: #6266d1;
   --sh-string: #00a99a;
   --sh-keyword: #f47067;
   --sh-comment: #a19595;
-  --sh-jsxliterals: #6266d1;
 }
 ```
 
@@ -70,6 +76,16 @@ pre code {
 }
 ```
 
+### Line Highlight
+
+Use `.sh__line:nth-child(<line number>)` to highlight specific line.
+
+```css
+.sh__line:nth-child(5) {
+  background: #f5f5f5;
+}
+```
+
 #### CSS Class Names
 
 You can use `.sh__token--<token type>` to customize the output node of each token.

package/lib/{index.mjs → index.js}

@@ -76,42 +76,48 @@ const signs = new Set([
   ...jsxBrackets,
 ])
 
-const types = [
+
+/**
+ *
+ * 0  - identifier
+ * 1  - keyword
+ * 2  - string
+ * 3  - Class, number and null
+ * 4  - property
+ * 5  - entity
+ * 6  - jsx literals
+ * 7  - sign
+ * 8  - comment
+ * 9  - break
+ * 10 - space
+ *
+ */
+const types = /** @type {const} */ ([
   'identifier',
   'keyword',
   'string',
   'class',
+  'property',
+  'entity',
+  'jsxliterals',
   'sign',
   'comment',
   'break',
   'space',
-  'jsxliterals'
-]
-
-/**
- *
- * 0 - identifier
- * 1 - keyword
- * 2 - string
- * 3 - Class, number and null
- * 4 - sign
- * 5 - comment
- * 6 - break
- * 7 - space
- * 8 - jsx literals
- *
- */
+])
 const [
   T_IDENTIFIER,
   T_KEYWORD,
   T_STRING,
   T_CLS_NUMBER,
+  T_PROPERTY,
+  T_ENTITY,
+  T_JSX_LITERALS,
   T_SIGN,
   T_COMMENT,
   T_BREAK,
   T_SPACE,
-  T_JSX_LITERALS,
-] = types.map((_, i) => i)
+] = /** @types {const} */ types.map((_, i) => i)
 
 function isSpaces(str) {
   return /^[^\S\r\n]+$/g.test(str)
@@ -185,8 +191,10 @@ function isRegexStart(str) {
 function tokenize(code) {
   let current = ''
   let type = -1
-  /** @type {[number | null, string | null]} */
-  let last = [null, null]
+  /** @type {[number, string]} */
+  let last = [-1, '']
+  /** @type {[number, string]} */
+  let beforeLast = [-2, '']
   /** @type {Array<[number, string]>} */
   const tokens = []
 
@@ -205,7 +213,9 @@ function tokenize(code) {
   // only match paired (open + close) tags, not self-closing tags
   let __jsxStack = 0
   const __jsxChild = () => __jsxEnter && !__jsxExpr && !__jsxTag
+  // < __content__ >
   const inJsxTag = () => __jsxTag && !__jsxChild()
+  // {'__content__'}
   const inJsxLiterals = () => !__jsxTag && __jsxChild() && !__jsxExpr && __jsxStack > 0
 
   /** @type {string | null} */
@@ -215,6 +225,7 @@ function tokenize(code) {
   const inStringQuotes = () => __strQuote !== null
   const inStrTemplateLiterals = () => (__strTemplateQuoteStack > __strTemplateExprStack)
   const inStrTemplateExpr = () => __strTemplateQuoteStack > 0 && (__strTemplateQuoteStack === __strTemplateExprStack)
+  const inStringContent = () => inStringQuotes() || inStrTemplateLiterals()
 
   /**
    *
@@ -224,15 +235,22 @@ function tokenize(code) {
   function classify(token) {
     const isLineBreak = token === '\n'
     // First checking if they're attributes values
-    if (inJsxTag() && inStringQuotes()) {
-      return T_STRING
+    if (inJsxTag()) {
+      if (inStringQuotes()) {
+        return T_STRING
+      }
+
+      const [, lastToken] = last
+      if (isIdentifier(token)) {
+        // classify jsx open tag
+        if ((lastToken === '<' || lastToken === '</')) 
+          return T_ENTITY
+      }
     }
     // Then determine if they're jsx literals
     const isJsxLiterals = inJsxLiterals()
-    if (isJsxLiterals) {
-      return T_JSX_LITERALS
+    if (isJsxLiterals) return T_JSX_LITERALS
 
-    }
     // Determine strings first before other types
     if (inStringQuotes()) {
       return T_STRING
@@ -247,10 +265,13 @@ function tokenize(code) {
     } else if (isCls(token)) {
       return inJsxTag() ? T_IDENTIFIER : T_CLS_NUMBER
     } else {
+      if (isIdentifier(token)) {
+        const isLastPropDot = last[1] === '.' && isIdentifier(beforeLast[1])
 
-      return isIdentifier(token) &&
-        !inStrTemplateLiterals() &&
-        (!isSingleQuotes(__strQuote)) ? T_IDENTIFIER : T_STRING
+        if (!inStringContent() && !isLastPropDot) return T_IDENTIFIER
+        if (isLastPropDot) return T_PROPERTY
+      }
+      return T_STRING
     }
   }
 
@@ -263,6 +284,7 @@ function tokenize(code) {
       /** @type [number, string]  */
       const pair = [type, current]
       if (type !== T_SPACE && type !== T_BREAK) {
+        beforeLast = last
         last = pair
       }
       tokens.push(pair)
@@ -401,6 +423,25 @@ function tokenize(code) {
           append(T_SIGN)
           continue
         }
+
+        // jsx property
+        // `-` in data-prop
+        if (next === '-'  && !inStringContent() && !inJsxLiterals()) {
+          if (current) {
+            append(T_PROPERTY, current + curr + next)
+            i += 1
+            continue
+          }
+        }
+        // `=` in property=<value>
+        if (next === '=') {
+          const prop = current ? (current + curr) : curr
+          if (isIdentifier(prop)) {
+            current = prop
+            append(T_PROPERTY)
+          }
+          continue
+        }
       }
     }
 
@@ -430,7 +471,7 @@ function tokenize(code) {
       // * <non comment start>/ expr: non comment start before `/` is not regex
       if (
         isRegexChar &&
-        lastType &&
+        lastType !== -1 &&
         !(
           (lastType === T_SIGN && ')' !== lastToken) ||
           lastType === T_COMMENT
@@ -594,7 +635,7 @@ function highlight(code) {
 }
 
 // namespace
-const SugarHigh = {
+const SugarHigh = /** @type {const} */ {
   TokenTypes: types,
 }
 

package/package.json

@@ -1,30 +1,29 @@
 {
   "name": "sugar-high",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "type": "module",
+  "types": "./lib/index.d.ts",
   "exports": {
-    "types": "./index.d.mts",
-    "default": "./lib/index.mjs"
+    "types": "./lib/index.d.ts",
+    "default": "./lib/index.js"
   },
   "description": "Super lightweight JSX syntax highlighter",
   "files": [
-    "lib",
-    "index.d.mts",
-    "*.md"
+    "lib"
   ],
   "license": "MIT",
-  "scripts": {
-    "test": "vitest run",
-    "dev": "next dev docs",
-    "build": "next build docs"
-  },
   "devDependencies": {
     "codice": "^0.2.0",
-    "next": "13.4.20-canary.31",
+    "next": "14.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sugar-high": "link:./",
-    "vitest": "^0.34.4"
+    "vitest": "^1.2.2"
   },
-  "packageManager": "pnpm@8.7.1"
-}
+  "packageManager": "pnpm@8.7.1",
+  "scripts": {
+    "test": "vitest run",
+    "dev": "next dev docs",
+    "build": "next build docs"
+  }
+}