sugar-high 0.0.1 → 0.0.5

package/README.md

@@ -0,0 +1,61 @@
+# Sugar High
+### Introduction
+
+Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped
+
+> ⚠️ Still in experiment! Use it in production with caution!
+
+### Usage
+
+```sh
+npm install --save sugar-high
+```
+
+```js
+import { highlight } from 'sugar-high'
+
+const codeHTML = highlight(code)
+
+document.querySelector('pre > code').innerHTML = codeHTML
+```
+
+### Highlight with CSS
+
+Then make your own theme with customized colors and put in global CSS
+
+```css
+/*
+ * 0 - comment
+ * 1 - keyword
+ * 2 - break
+ * 3 - string
+ * 4 - space
+ * 5 - sign
+ * 6 - identifier
+ * 7 - Class, number and null
+ */
+.sh__7 {
+  color: #3476cb;
+}
+.sh__6 {
+  color: #2d333b;
+}
+.sh__5 {
+  color: #818c9b;
+  font-weight: bold;
+}
+.sh__3 {
+  color: #00a99a;
+}
+.sh__1 {
+  color: #f47067;
+}
+.sh__0 {
+  color: #818c9b;
+}
+```
+
+### LICENSE
+
+MIT
+

package/lib/index.mjs

@@ -0,0 +1,315 @@
+// @ts-check
+
+const jsxBrackets = new Set(['<', '>', '{', '}', '[', ']'])
+const keywords = new Set([
+  'for',
+  'while',
+  'if',
+  'else',
+  'return',
+  'function',
+  'var',
+  'let',
+  'const',
+  'true',
+  'false',
+  'undefined',
+  'this',
+  'new',
+  'delete',
+  'typeof',
+  'in',
+  'instanceof',
+  'void',
+  'break',
+  'continue',
+  'switch',
+  'case',
+  'default',
+  'throw',
+  'try',
+  'catch',
+  'finally',
+  'debugger',
+  'with',
+  'yield',
+  'async',
+  'await',
+  'class',
+  'extends',
+  'super',
+  'import',
+  'export',
+  'from',
+  'static',
+])
+
+const signs = new Set([
+  '+',
+  '-',
+  '*',
+  '/',
+  '%',
+  '=',
+  '!',
+  ...jsxBrackets,
+  '&',
+  '|',
+  '^',
+  '~',
+  '!',
+  '?',
+  ':',
+  '.',
+  ',',
+  `'`,
+  '"',
+  '.',
+  '(',
+  ')',
+  '[',
+  ']',
+  '#',
+  '\\',
+])
+
+/**
+ * 
+ * 0 - comment
+ * 1 - keyword
+ * 2 - break
+ * 3 - string
+ * 4 - space
+ * 5 - sign
+ * 6 - identifier
+ * 7 - Class, number and null
+ * 
+ */
+const [
+  T_COMMENT,
+  T_KEYWORD,
+  T_BREAK,
+  T_STRING,
+  T_SPACE,
+  T_SIGN,
+  T_IDENTIFIER,
+  T_CLS_NUMBER,
+] = Array(8).fill().map((_, i) => i)
+
+function isSpaces(str) {
+  return /^[^\S\r\n]+$/g.test(str)
+}
+
+function encode(str) {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;')
+    // matches space but not new line
+    .replace(/[^\S\r\n]/g, '&nbsp;')
+}
+
+function isIdentifierChar(chr) {
+  return /[a-zA-Z0-9_$]/.test(chr)
+}
+
+function isStringQuotation(chr) {
+  return chr === '"' || chr === "'" || chr === '`'
+}
+
+function isCommentStart(str) {
+  str = str.slice(0, 2)
+  return str === '//' || str === '/*'
+}
+
+function isRegexStart(str) {
+  return str[0] === '/' && !isCommentStart(str[0] + str[1])
+}
+
+/** 
+ * @param {string} code 
+ * @return {Array<[number, string]>}
+ */
+export function tokenize(code) {
+  let current = ''
+  let type = -1
+  /** @type {Array<[number, string]>} */
+  const tokens = []
+  // string.type = 0 for string or string template
+  // string.type = 1 for regex
+  const string = { entered: false, type: 0 }
+  
+  // comment.type = 0 for single line comments
+  // comment.type = 1 for multi-line comments
+  const comment = { entered: false, type: 0 }
+
+  // jsx.tag for entering open or closed tag
+  // jsx.child for entering children
+  // jsx.expr for entering {expression}
+  /** @type {{ tag: boolean; child: boolean; expr: boolean }} */
+  const jsx = { tag: false, child: false, expr: false }
+
+  function classify(token) {
+    if (isCommentStart(token[0] + token[1])) {
+      return T_COMMENT
+    } else if (keywords.has(token)) {
+      return T_KEYWORD
+    } else if (token === '\n') {
+      return T_BREAK
+    } else if (
+       (
+        // is quoted string
+        (isStringQuotation(token[0]) && !isStringQuotation(token[1])) ||
+        // is regex
+        (!jsx.tag && isRegexStart(token[0] + token[1]) && token[token.length - 1] === '/')
+      )
+    ) {
+      return T_STRING
+    } else if (token === ' ') {
+      return T_SPACE
+    } else if (signs.has(token[0])) {
+      return T_SIGN
+    } else if (
+      token[0] === token[0].toUpperCase() ||
+      token === 'null'
+    ) {
+      return T_CLS_NUMBER
+    } else {
+      return T_IDENTIFIER
+    }
+  }
+
+  const append = () => {
+    if (current) {
+      type = classify(current)
+      tokens.push([type, current])
+    }
+    current = ''
+  }
+  for (let i = 0; i < code.length; i++) {
+    const curr = code[i]
+    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
+
+    if (jsx.tag) {
+      const isOpenElementEnd = curr === '>' 
+      const isCloseElementEnd = p_c === '/>'
+      jsx.child = !isCloseElementEnd && !isCloseElementEnd
+      jsx.tag = !(isOpenElementEnd || isCloseElementEnd)
+    }
+    // if it's not in a jsx tag declaration or a string, close child if next is jsx close tag
+    if (!jsx.tag && !string.entered && (curr === '<' && isIdentifierChar(next) || c_n === '</')) {
+      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 && 
+      (isStringQuotation(curr) || !jsx.tag && isRegexStart(c_n))
+    ) {
+      string.entered = true
+      string.type = isStringQuotation(curr) ? 0 : 1
+      append()
+      current = curr
+    } else if (string.entered) {
+      current += curr
+      if (string.type === 0 && isStringQuotation(curr)) {
+        string.entered = false
+        append()
+      } else if (string.type === 1 && prev !== '\\' && curr === '/') {
+        string.entered = false
+        append()
+      }
+    } else if (
+      !comment.entered && 
+      isCommentStart(c_n)
+    ) {
+      comment.type = next === '/' ? 0 : 1
+      comment.entered = true
+      append()
+      current = c_n
+      i++
+    } else if (comment.entered) {
+      current += curr
+      if (comment.type === 0 && next === '\n') {
+        comment.entered = false
+        append()
+      } else if (comment.type === 1 && (c_n === '*/')) {
+        comment.entered = false
+        current += '/'
+        append()
+        i++
+      }
+    } else if (curr === ' ' || curr === '\n') {
+      if (
+        curr === ' ' &&
+        (
+          (isSpaces(current) || !current) ||
+          isJsxLiterals
+        )
+      ) {
+        current += curr
+      } else {
+        append()
+        current = curr
+        append()
+      }
+    } else {
+      if (
+        (isJsxLiterals && !jsxBrackets.has(curr)) ||
+        isIdentifierChar(curr) === isIdentifierChar(current[current.length - 1]) &&
+        !signs.has(curr)
+      ) {
+        current += curr
+      } else {
+        append()
+        current = curr
+        if (c_n === '</') {
+          current = c_n
+          append()
+          i++
+        }
+        else if (jsxBrackets.has(curr)) append()
+      }
+    }
+  }
+
+  append()
+
+  return tokens
+}
+
+/** 
+ * @param {Array<[number, string]>} tokens 
+ * @return {Array<string>}
+ */
+function generate(tokens) {
+  const output = []
+  for (let i = 0; i < tokens.length; i++) {
+    const [type, token] = tokens[i]
+    output.push(
+      type === T_BREAK 
+      ? '<br>'
+      : `<span class="sh__${type}">${encode(token)}</span>`
+    )
+  }
+  return output
+}
+
+export function highlight(code) {
+  const tokens = tokenize(code)
+  const output = generate(tokens).join('')
+  return output
+}

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "sugar-high",
-  "version": "0.0.1",
-  "exports": "./lib/index.js",
-  "description": "Super lightweight JavaScript syntax highlighter",
+  "version": "0.0.5",
+  "type": "module",
+  "exports": "./lib/index.mjs",
+  "description": "Super lightweight JSX syntax highlighter",
+  "files": [
+    "lib",
+    "*.md"
+  ],
   "license": "MIT",
   "scripts": {
     "dev": "vite docs",

package/docs/index.html

@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>sugar high</title>
-<style>
-html {
-  font-family: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif
-}
-body {
-  max-width: 1120px;
-  margin: auto;
-  padding: 0 10px;
-}
-#code {
-  font-family: Consolas, Monaco, monospace;
-  font-size: 16px;
-  display: block;
-  width: 100%;
-  min-height: 100px;
-  background-color: #fff;
-}
-
-#output {
-  font-family: Consolas, Monaco, monospace;
-  font-size: 16px;
-  display: block;
-  min-height: 100px;
-}
-
-.identifier {
-  color: #2d333b;
-}
-.sign {
-  color: #818c9b;
-  font-weight: bold;
-}
-.string {
-  color: #00a99a;
-}
-.keyword {
-  color: #f47067;
-}
-
-.flex {
-  display: flex;
-}
-.flex-1 {
-  flex: 1 0;
-  margin: 8px;
-  padding: 12px 10px 12px 10px;
-  background-color: #f9f9f9;
-  border: 1px solid #d0d0d0;
-  border-radius: 4px;
-}
-.comment {
-  color: #818c9b;
-}
-</style>
-</head>
-<body>
-  <h1>Sugar High</h1>
-  <div class="flex">
-    <textarea class="flex-1" id="code"></textarea>
-
-    <pre class="flex-1"><code id="output"></code></pre>
-  </div>
-  <script type="module" src="./main.js"></script>
-</body>
-</html>

package/docs/main.js

@@ -1,50 +0,0 @@
-import { tokenize, generate } from '../lib'
-
-// console interactive API
-window.tokenize = tokenize
-window.generate = generate
-
-const codeInput = document.getElementById('code')
-const codeOutput = document.getElementById('output')
-
-codeInput.addEventListener('input', () => {
-  update()
-})
-
-codeInput.value = `
-// hello-world.js
-import { planet } from '../space'
-
-class SuperArray extends Array {
-  static core = planet
-
-  constructor(...args) {
-    super(...args)
-  }
-
-  bump() {
-    return this.map(x => x + 1)
-  }
-}
-
-/**
- * @param {string} name 
- * @return {void}
- */
-function hello(name) {
-  console.log('hello', name)
-}
-
-`.trim()
-
-function update() {
-  const code = codeInput.value?.trim() || ''
-  const tokens = tokenize(code)
-  const output = generate(tokens).join('')
-  
-  console.log(tokens)
-  
-  codeOutput.innerHTML = output
-}
-
-update()

package/lib/index.js

@@ -1,203 +0,0 @@
-// @ts-check
-
-const keywords = new Set([
-  'for',
-  'while',
-  'if',
-  'else',
-  'return',
-  'function',
-  'var',
-  'let',
-  'const',
-  'true',
-  'false',
-  'null',
-  'undefined',
-  'NaN',
-  'Infinity',
-  'this',
-  'new',
-  'delete',
-  'typeof',
-  'in',
-  'instanceof',
-  'void',
-  'break',
-  'continue',
-  'switch',
-  'case',
-  'default',
-  'throw',
-  'try',
-  'catch',
-  'finally',
-  'debugger',
-  'with',
-  'yield',
-  'async',
-  'await',
-  'class',
-  'extends',
-  'super',
-  'import',
-  'export',
-  'from',
-  'static',
-])
-
-const signs = new Set([
-  '+',
-  '-',
-  '*',
-  '/',
-  '%',
-  '=',
-  '!',
-  '>',
-  '<',
-  '&',
-  '|',
-  '^',
-  '~',
-  '!',
-  '?',
-  ':',
-  '.',
-  ',',
-  `'`,
-  '"',
-  '.',
-  '{',
-  '}',
-  '(',
-  ')',
-  '[',
-  ']',
-  '#',
-  '\\',
-])
-
-function encode(str) {
-  return str
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&#039;")
-}
-
-function isIdentifierChar(chr) {
-  return /[a-zA-Z0-9_$]/.test(chr)
-}
-
-function isQuotationMark(chr) {
-  return chr === '"' || chr === "'" || chr === '`'
-}
-
-/** 
- * @param {string} code 
- * @return {Array<string>}
- */
-export function tokenize(code) {
-  let current = ''
-  const tokens = []
-  const string = { entered: false }
-  const comment = { entered: false, type: 0 }
-  for (let i = 0; i < code.length; i++) {
-    if (!string.entered && isQuotationMark(code[i])) {
-      string.entered = true
-      if (current) tokens.push(current)
-      current = code[i]
-    } else if (string.entered) {
-      current += code[i]
-      if (isQuotationMark(code[i])) {
-        string.entered = false
-        tokens.push(current)
-        current = ''
-      }
-    } else if (
-      !comment.entered && 
-      code[i] === '/' && 
-      (code[i + 1] === '/' || code[i + 1] === '*')
-    ) {
-      comment.type = code[i + 1] === '/' ? 0 : 1
-      comment.entered = true
-      if (current) tokens.push(current)
-      current = code[i]
-    } else if (comment.entered) {
-      current += code[i]
-      if (comment.type === 0 && code[i + 1] === '\n') {
-        comment.entered = false
-        tokens.push(current)
-        current = ''
-      } else if (comment.type === 1 && code[i] === '*' && code[i + 1] === '/') {
-        comment.entered = false
-        tokens.push(current)
-        current = ''
-        tokens.push(code[i])
-        tokens.push(code[i + 1])
-        i++
-      }
-    } else if (code[i] === ' ' || code[i] === '\n') {
-      if (current.length > 0) {
-        tokens.push(current)
-        current = ''
-      }
-      tokens.push(code[i])
-    } else {
-      if (isIdentifierChar(code[i]) !== isIdentifierChar(current[current.length - 1])) {
-        if (current) tokens.push(current)
-        current = code[i]
-      } else {
-        current += code[i]
-      }
-    } 
-  }
-  if (current) {
-    tokens.push(current)
-    current = ''
-  }
-
-  return tokens
-}
-
-
-function classify(token) {
-  if (token[0] === '/' && (token[1] === '*' || token[1] === '/')) {
-    return 'comment'
-  } else if (keywords.has(token)) {
-    return 'keyword'
-  } else if (token === '\n') {
-    return 'linebreak'
-  } else if (isQuotationMark(token[0]) && !isQuotationMark(token[1])) {
-    return 'string'
-  } else if (token === ' ') {
-    return 'space'
-  } else if (signs.has(token[0])) {
-    return 'sign'
-  } else {
-    return 'identifier'
-  }
-}
-
-/** 
- * @param {Array<string>} tokens 
- * @return {Array<string>}
- */
-export function generate(tokens) {
-  let output = []
-  for (let i = 0; i < tokens.length; i++) {
-    const token = tokens[i]
-    const type = classify(token)
-    if (type === 'linebreak') {
-      output.push('<br>')
-    } else if (type === 'space') {
-      output.push(`<span class="space">&nbsp;</span>`)
-    } else {
-      output.push(`<span class="${type}">${encode(token)}</span>`)
-    }
-  }
-  return output
-}
-