sugar-high 0.6.0 → 0.7.0

package/README.md

@@ -25,7 +25,7 @@ document.querySelector('pre > code').innerHTML = codeHTML
 
 ### Highlight with 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.
+Then make your own theme with customized colors by token type and put in global CSS. The corresponding class names start with `--sh-` prefix.
 
 ```css
 /**

package/lib/index.js

@@ -434,7 +434,7 @@ function tokenize(code) {
           }
         }
         // `=` in property=<value>
-        if (next === '=') {
+        if (next === '=' && !inStringContent()) {
           const prop = current ? (current + curr) : curr
           if (isIdentifier(prop)) {
             current = prop
@@ -578,20 +578,52 @@ function tokenize(code) {
 
 /**
  * @param {Array<[number, string]>} tokens
- * @return {Array<string>}
+ * @return {Array<any>}
  */
 function generate(tokens) {
-  const linesHtml = []
-  const createLine = (content) => `<span class="sh__line">${content}</span>`
+  const lines = []
+  /**
+   * @param {any} children
+   * 
+   */
+  const createLine = (children) => 
+    // generateType === 'html'
+      // ? `<span class="sh__line">${content}</span>`
+      ({
+        type: 'element',
+        tagName: 'span',
+        children,
+        properties: {
+          className: 'sh__line',
+        },
+      })
 
+  /**
+   * @param {Array<[number, string]>} tokens
+   * @returns {void}
+   */
   function flushLine(tokens) {
-    linesHtml.push(createLine(
-      tokens.map(([type, value]) => (
-        `<span class="sh__token--${types[type]}" style="color: var(--sh-${types[type]})">${encode(value)}</span>`
-      ))
-      .join('')
-    ))
+    /** @type {Array<any>} */
+    const lineTokens = (
+      tokens
+        .map(([type, value]) => (
+          {
+            type: 'element',
+            tagName: 'span',
+            children: [{
+              type: 'text',
+              value: value, // to encode
+            }],
+            properties: {
+              className: `sh__token--${types[type]}`,
+              style: `color: var(--sh-${types[type]})`,
+            },
+          }
+        ))
+    )
+    lines.push(createLine(lineTokens))
   }
+  /** @type {Array<[number, string]>} */
   const lineTokens = []
   for (let i = 0; i < tokens.length; i++) {
     const token = tokens[i]
@@ -620,7 +652,26 @@ function generate(tokens) {
   if (lineTokens.length)
     flushLine(lineTokens)
 
-  return linesHtml
+  return lines
+}
+
+function toHtml(lines) {
+  return lines
+    .map(line => {
+      const { tagName: lineTag } = line
+      const tokens = line.children
+        .map(child => {
+          const { tagName, children, properties } = child
+          return `<${tagName} class="${
+            properties.className
+          }" style="${
+            properties.style
+          }">${encode(children[0].value)}</${tagName}>`
+        })
+        .join('')
+      return `<${lineTag} class="${line.properties.className}">${tokens}</${lineTag}>`
+    })
+    .join('\n')
 }
 
 /**
@@ -630,17 +681,20 @@ function generate(tokens) {
  */
 function highlight(code) {
   const tokens = tokenize(code)
-  const output = generate(tokens).join('\n')
+  const lines = generate(tokens)
+  const output = toHtml(lines)
   return output
 }
 
 // namespace
 const SugarHigh = /** @type {const} */ {
   TokenTypes: types,
+  TokenMap: new Map(types.map((type, i) => [type, i])),
 }
 
 export {
   highlight,
   tokenize,
+  generate,
   SugarHigh,
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sugar-high",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "types": "./lib/index.d.ts",
   "exports": {
@@ -12,18 +12,18 @@
     "lib"
   ],
   "license": "MIT",
+  "scripts": {
+    "test": "vitest run",
+    "dev": "next dev docs",
+    "build": "next build docs"
+  },
   "devDependencies": {
     "codice": "^0.2.0",
-    "next": "14.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "next": "14.2.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "sugar-high": "link:./",
     "vitest": "^1.2.2"
   },
-  "packageManager": "pnpm@8.7.1",
-  "scripts": {
-    "test": "vitest run",
-    "dev": "next dev docs",
-    "build": "next build docs"
-  }
-}
+  "packageManager": "pnpm@8.7.1"
+}