From e7e949002cddf246c39fa8fa46b024a081e8e5a8 Mon Sep 17 00:00:00 2001 From: redhoodsu Date: Mon, 12 Dec 2022 00:52:13 +0800 Subject: [PATCH] feat: remove luna syntax highlighter --- build/webpack.base.js | 1 - package.json | 3 +- src/Network/util.js | 7 +++-- src/Sources/Sources.js | 68 ++++++++++++++++++++++++++++++++++------ src/Sources/Sources.scss | 24 +++++++++++++- src/eruda.js | 3 +- src/style/luna.scss | 58 ---------------------------------- 7 files changed, 88 insertions(+), 76 deletions(-) diff --git a/build/webpack.base.js b/build/webpack.base.js index d5e4024..26149a4 100644 --- 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 index 3e09f40..0d51b1c 100644 --- 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 index 54e1266..172392f 100644 --- 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 index 8263eb6..f324be8 100644 --- 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(`
`, 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 = ' ' + + return { + idx: idx + 1, + val: line, + } + }) + } + + let html + if (showLineNum) { + const lineNum = map(code, ({ idx }) => { + return `
${idx}
` + }).join('') + const codeLine = map(code, ({ val }) => { + return `
${val}
` + }).join('') + html = `
+ + + + + + + +
${lineNum}${codeLine}
+
` + } else { + html = `
+ 
${code}
+
` + } + + 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 index 002b991..9875f96 100644 --- 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 index 5e6e588..bf71ac0 100644 --- 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 index 6141eec..b9fe5a6 100644 --- 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); - } -}