feat: remove luna syntax highlighter

liriliri · Dec 11, 2022 · e7e9490 · e7e9490
1 parent 82d0a1d
commit e7e9490
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 76 deletions.
diff --git a/build/webpack.base.js b/build/webpack.base.js
@@ -60,7 +60,6 @@ module.exports = {
         test: /\.js$/,
         include: [
           path.resolve(__dirname, '../src'),
-          path.resolve(__dirname, '../node_modules/highlight.js'),
           path.resolve(__dirname, '../node_modules/luna-console'),
           path.resolve(__dirname, '../node_modules/luna-modal'),
           path.resolve(__dirname, '../node_modules/luna-tab'),

diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "ci": "npm run lint && npm run test && npm run build && npm run es5",
-    "build": "lsla shx rm -rf dist && webpack --config build/webpack.prod.js && node build/build && lsla shx cp README.md eruda.d.ts dist",
+    "build": "lsla shx rm -rf dist && webpack --config build/webpack.dev.js && node build/build && lsla shx cp README.md eruda.d.ts dist",
     "build:analyser": "webpack --config build/webpack.analyser.js",
     "dev": "webpack-dev-server --config build/webpack.dev.js --host 0.0.0.0",
     "test": "karma start",
@@ -74,7 +74,6 @@
     "luna-modal": "^1.0.0",
     "luna-notification": "^0.1.4",
     "luna-object-viewer": "^0.2.2",
-    "luna-syntax-highlighter": "^1.0.0",
     "luna-tab": "^0.1.2",
     "node-sass": "^7.0.1",
     "postcss-clean": "^1.1.0",

diff --git a/src/Network/util.js b/src/Network/util.js
@@ -1,5 +1,6 @@
 import last from 'licia/last'
 import detectOs from 'licia/detectOs'
+import arrToMap from 'licia/arrToMap'
 
 export function getType(contentType) {
   if (!contentType) return 'unknown'
@@ -19,7 +20,7 @@ export function curlStr(request) {
   }
   /* eslint-disable */
   let command = []
-  const ignoredHeaders = new Set([
+  const ignoredHeaders = arrToMap([
     'accept-encoding',
     'host',
     'method',
@@ -77,7 +78,7 @@ export function curlStr(request) {
   const formData = request.requestFormData()
   if (formData) {
     data.push('--data-raw ' + escapeString(formData))
-    ignoredHeaders.add('content-length')
+    ignoredHeaders['content-length'] = true
     inferredMethod = 'POST'
   }
 
@@ -89,7 +90,7 @@ export function curlStr(request) {
   for (let i = 0; i < requestHeaders.length; i++) {
     const header = requestHeaders[i]
     const name = header.name.replace(/^:/, '')
-    if (ignoredHeaders.has(name.toLowerCase())) {
+    if (ignoredHeaders[name.toLowerCase()]) {
       continue
     }
     command.push('-H ' + escapeString(name + ': ' + header.value))

diff --git a/src/Sources/Sources.js b/src/Sources/Sources.js
@@ -4,8 +4,10 @@ import Settings from '../Settings/Settings'
 import ajax from 'licia/ajax'
 import isStr from 'licia/isStr'
 import escape from 'licia/escape'
+import trim from 'licia/trim'
+import map from 'licia/map'
+import highlight from 'licia/highlight'
 import evalCss from '../lib/evalCss'
-import LunaSyntaxHighlighter from 'luna-syntax-highlighter'
 import { classPrefix as c } from '../lib/util'
 
 export default class Sources extends Tool {
@@ -170,14 +172,61 @@ export default class Sources extends Tool {
   _renderCode() {
     const data = this._data
 
-    this._renderHtml(`<div class="${c('code')}"></div>`, false)
-    const container = this._$el.find(c('.code')).get(0)
-    new LunaSyntaxHighlighter(container, {
-      code: data.val,
-      language: data.type,
-      wrapLongLines: true,
-      showLineNumbers: data.val.length < MAX_LINE_NUM_LEN && this._showLineNum,
-    })
+    let code = data.val
+    const len = data.val.length
+
+    // If source code too big, don't process it.
+    if (len < MAX_BEAUTIFY_LEN) {
+      const curTheme = evalCss.getCurTheme()
+      code = highlight(code, data.type, {
+        keyword: `color:${curTheme.keywordColor}`,
+        number: `color:${curTheme.numberColor}`,
+        operator: `color:${curTheme.operatorColor}`,
+        comment: `color:${curTheme.commentColor}`,
+        string: `color:${curTheme.stringColor}`,
+      })
+    } else {
+      code = escape(code)
+    }
+
+    const showLineNum = len < MAX_LINE_NUM_LEN && this._showLineNum
+
+    if (showLineNum) {
+      code = code.split('\n').map((line, idx) => {
+        if (trim(line) === '') line = '&nbsp;'
+
+        return {
+          idx: idx + 1,
+          val: line,
+        }
+      })
+    }
+
+    let html
+    if (showLineNum) {
+      const lineNum = map(code, ({ idx }) => {
+        return `<div class="${c('line-num')}">${idx}</div>`
+      }).join('')
+      const codeLine = map(code, ({ val }) => {
+        return `<pre class="${c('code-line')}">${val}</pre>`
+      }).join('')
+      html = `<div class="${c('code-wrapper')}">
+        <table class="${c('code')}">
+          <tbody>
+            <tr>
+              <td class="${c('gutter')}">${lineNum}</td>
+              <td class="${c('content')}">${codeLine}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>`
+    } else {
+      html = `<div class="${c('code-wrapper')}">
+        <pre class="${c('code')}">${code}</pre>
+      </div>`
+    }
+
+    this._renderHtml(html)
   }
   _renderObj() {
     // Using cache will keep binding events to the same elements.
@@ -218,4 +267,5 @@ export default class Sources extends Tool {
   }
 }
 
+const MAX_BEAUTIFY_LEN = 100000
 const MAX_LINE_NUM_LEN = 400000
diff --git a/src/Sources/Sources.scss b/src/Sources/Sources.scss
@@ -17,7 +17,29 @@
     padding: $padding;
   }
   .code {
-    height: 100%;
+    font-size: $font-size-s;
+    .content * {
+      user-select: text;
+    }
+  }
+  pre.code {
+    padding: $padding;
+  }
+  table.code {
+    border-collapse: collapse;
+    .gutter {
+      background: var(--background);
+      color: var(--primary);
+    }
+    .line-num {
+      border-right: 1px solid var(--border);
+      padding: 0 3px 0 5px;
+      text-align: right;
+    }
+    .code-line {
+      padding: 0 4px;
+      white-space: pre;
+    }
   }
   .image {
     font-size: $font-size-s;

diff --git a/src/eruda.js b/src/eruda.js
@@ -170,7 +170,7 @@ export default {
         // font-face doesn't work inside shadow dom.
         evalCss.container = document.head
         evalCss(require('./style/icon.css') +
-        require('luna-console/luna-console.css') + require('luna-object-viewer/luna-object-viewer.css') + require('luna-dom-viewer/luna-dom-viewer.css') + require('luna-syntax-highlighter/luna-syntax-highlighter.css'))
+        require('luna-console/luna-console.css') + require('luna-object-viewer/luna-object-viewer.css') + require('luna-dom-viewer/luna-dom-viewer.css'))
 
         el = document.createElement('div')
         shadowRoot.appendChild(el)
@@ -219,7 +219,6 @@ export default {
       require('luna-dom-viewer/luna-dom-viewer.css') +
       require('luna-modal/luna-modal.css') +
       require('luna-tab/luna-tab.css') +
-      require('luna-syntax-highlighter/luna-syntax-highlighter.css') +
       require('./style/style.scss') +
       require('./style/icon.css')
     )

diff --git a/src/style/luna.scss b/src/style/luna.scss
@@ -305,61 +305,3 @@
 .luna-tab-slider {
   background: var(--accent);
 }
-
-.luna-syntax-highlighter {
-  color: var(--foreground);
-  border: none;
-  background: var(--background);
-  font-size: $font-size-s;
-  .luna-syntax-highlighter-line-code {
-    user-select: text;
-    * {
-      user-select: text;
-    }
-  }
-  .luna-syntax-highlighter-copy,
-  .luna-syntax-highlighter-line-number {
-    border-color: var(--border);
-  }
-  .luna-syntax-highlighter-copy .luna-syntax-highlighter-icon-check {
-    color: var(--accent);
-  }
-  .luna-syntax-highlighter-copy {
-    background-color: var(--background);
-  }
-  .luna-syntax-highlighter-string {
-    color: var(--string-color);
-  }
-  .luna-syntax-highlighter-variable,
-  .luna-syntax-highlighter-keyword {
-    color: var(--keyword-color);
-  }
-  .luna-syntax-highlighter-attr,
-  .luna-syntax-highlighter-title {
-    color: var(--attribute-name-color);
-  }
-  .luna-syntax-highlighter-comment {
-    color: var(--comment-color);
-  }
-  .luna-syntax-highlighter-regexp {
-    color: var(--string-color);
-  }
-  .luna-syntax-highlighter-number {
-    color: var(--number-color);
-  }
-  .luna-syntax-highlighter-tag {
-    color: var(--tag-name-color);
-    .luna-syntax-highlighter-attr {
-      color: var(--attribute-name-color);
-    }
-    .luna-syntax-highlighter-string {
-      color: var(--string-color);
-    }
-  }
-  .luna-syntax-highlighter-attribute {
-    color: var(--attribute-name-color);
-  }
-  .luna-syntax-highlighter-selector-class {
-    color: var(--keyword-color);
-  }
-}