sugar-high - npm Package Compare versions

Comparing version 0.6.1 to 0.7.0

lib/index.js

@@ -581,16 +581,48 @@ // @ts-check
  * @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 = []
@@ -624,5 +656,24 @@ for (let i = 0; i < tokens.length; i++) {
 
-  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')
+}
+
 /**
@@ -635,3 +686,4 @@ *
   const tokens = tokenize(code)
-  const output = generate(tokens).join('\n')
+  const lines = generate(tokens)
+  const output = toHtml(lines)
   return output
@@ -643,2 +695,3 @@ }
   TokenTypes: types,
+  TokenMap: new Map(types.map((type, i) => [type, i])),
 }
@@ -649,3 +702,4 @@
   tokenize,
+  generate,
   SugarHigh,
-}
+}

package.json

 {
   "name": "sugar-high",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "type": "module",
@@ -15,2 +15,7 @@ "types": "./lib/index.d.ts",
   "license": "MIT",
+  "scripts": {
+    "test": "vitest run",
+    "dev": "next dev docs",
+    "build": "next build docs"
+  },
   "devDependencies": {
@@ -24,8 +29,3 @@ "codice": "^0.2.0",
   },
-  "packageManager": "pnpm@8.7.1",
-  "scripts": {
-    "test": "vitest run",
-    "dev": "next dev docs",
-    "build": "next build docs"
-  }
-}
+  "packageManager": "pnpm@8.7.1"
+}

README.md

@@ -28,3 +28,3 @@ # Sugar High
 
-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.
 
@@ -31,0 +31,0 @@ ```css

No alert changes

Improved metrics

Total package byte prevSize

18691

increased by7.26%

Lines of code

642

increased by9.18%

No dependency changes