From b6e8ac79ee6a705b6466a3cee73274f81c35a2a6 Mon Sep 17 00:00:00 2001 From: redhoodsu Date: Wed, 7 Aug 2019 07:35:39 +0800 Subject: [PATCH] refactor: highlight --- src/Console/Log.js | 4 +- src/Sources/Sources.js | 11 ++- src/lib/extraUtil.js | 2 - src/lib/highlight.js | 129 --------------------------- src/lib/logger.js | 4 +- src/lib/stringifyUtil.js | 17 +++- src/lib/util.js | 186 ++++++++++++++++++++++++++++++++++++++- 7 files changed, 208 insertions(+), 145 deletions(-) delete mode 100644 src/lib/highlight.js diff --git a/src/Console/Log.js b/src/Console/Log.js index d10e75b..6afb639 100644 --- a/src/Console/Log.js +++ b/src/Console/Log.js @@ -1,6 +1,5 @@ import stringify from './stringify' import origGetAbstract from '../lib/getAbstract' -import highlight from '../lib/highlight' import beautify from 'js-beautify' import JsonViewer from '../lib/JsonViewer' import { @@ -25,7 +24,8 @@ import { contain, isEmpty, clone, - noop + noop, + highlight } from '../lib/util' export default class Log { diff --git a/src/Sources/Sources.js b/src/Sources/Sources.js index dbd76a8..336dbd9 100644 --- a/src/Sources/Sources.js +++ b/src/Sources/Sources.js @@ -1,9 +1,16 @@ import Tool from '../DevTools/Tool' import beautify from 'js-beautify' -import highlight from '../lib/highlight' import JsonViewer from '../lib/JsonViewer' import Settings from '../Settings/Settings' -import { evalCss, ajax, isEmpty, escape, trim, isStr } from '../lib/util' +import { + evalCss, + ajax, + isEmpty, + escape, + trim, + isStr, + highlight +} from '../lib/util' export default class Sources extends Tool { constructor() { diff --git a/src/lib/extraUtil.js b/src/lib/extraUtil.js index e9353af..380e701 100644 --- a/src/lib/extraUtil.js +++ b/src/lib/extraUtil.js @@ -1,9 +1,7 @@ -import highlight from './highlight' import beautify from 'js-beautify' export default function(util) { Object.assign(util, { - highlight, beautify }) } diff --git a/src/lib/highlight.js b/src/lib/highlight.js deleted file mode 100644 index e22ea3c..0000000 --- a/src/lib/highlight.js +++ /dev/null @@ -1,129 +0,0 @@ -import { each } from '../lib/util' - -// https://github.com/trentrichardson/jQuery-Litelighter -export default function highlight(str, lang) { - lang = lang || 'js' - - str = str.replace(//g, '>') - - lang = language[lang] - - let subLangSi = 0 - const subLangs = [] - - each(lang, val => { - if (!val.language) return - - str = str.replace(val.re, function($1, $2) { - subLangs[subLangSi++] = highlight($2, val.language) - return $1.replace($2, '___subtmpl' + (subLangSi - 1) + '___') - }) - }) - - each(lang, (val, key) => { - if (language[val.language]) return - - str = str.replace(val.re, '___' + key + '___$1___end' + key + '___') - }) - - const levels = [] - - str = str.replace(/___(?!subtmpl)\w+?___/g, function($0) { - const end = $0.substr(3, 3) === 'end', - tag = (!end ? $0.substr(3) : $0.substr(6)).replace(/_/g, ''), - lastTag = levels.length > 0 ? levels[levels.length - 1] : null - - if ( - !end && - (lastTag == null || - tag == lastTag || - (lastTag != null && - lang[lastTag] && - lang[lastTag].embed != undefined && - lang[lastTag].embed.indexOf(tag) > -1)) - ) { - levels.push(tag) - - return $0 - } else if (end && tag == lastTag) { - levels.pop() - - return $0 - } - - return '' - }) - - each(lang, (val, key) => { - str = str - .replace(new RegExp('___end' + key + '___', 'g'), '') - .replace( - new RegExp('___' + key + '___', 'g'), - '' - ) - }) - - each(lang, val => { - if (!val.language) return - - str = str.replace(/___subtmpl\d+___/g, function($tmpl) { - const i = parseInt($tmpl.replace(/___subtmpl(\d+)___/, '$1'), 10) - - return subLangs[i] - }) - }) - - return str -} - -const style = { - comment: 'color:#63a35c;', - string: 'color:#183691;', - number: 'color:#0086b3;', - keyword: 'color:#a71d5d;', - operators: 'color:#a71d5d;' -} - -const language = {} - -language.js = { - comment: { re: /(\/\/.*|\/\*([\s\S]*?)\*\/)/g, style: 'comment' }, - string: { re: /(('.*?')|(".*?"))/g, style: 'string' }, - numbers: { re: /(-?(\d+|\d+\.\d+|\.\d+))/g, style: 'number' }, - keywords: { - re: /(?:\b)(function|for|foreach|while|if|else|elseif|switch|break|as|return|this|class|self|default|var|false|true|null|undefined)(?:\b)/gi, - style: 'keyword' - }, - operators: { - re: /(\+|-|\/|\*|%|=|<|>|\||\?|\.)/g, - style: 'operators' - } -} - -language.html = { - comment: { re: /(<!--([\s\S]*?)-->)/g, style: 'comment' }, - tag: { - re: /(<\/?\w(.|\n)*?\/?>)/g, - style: 'keyword', - embed: ['string'] - }, - string: language.js.string, - css: { - re: /(?:<style.*?>)([\s\S]*)?(?:<\/style>)/gi, - language: 'css' - }, - script: { - re: /(?:<script.*?>)([\s\S]*?)(?:<\/script>)/gi, - language: 'js' - } -} - -language.css = { - comment: language.js.comment, - string: language.js.string, - numbers: { - re: /((-?(\d+|\d+\.\d+|\.\d+)(%|px|em|pt|in)?)|#[0-9a-fA-F]{3}[0-9a-fA-F]{3})/g, - style: 'number' - }, - keywords: { re: /(@\w+|:?:\w+|[a-z-]+:)/g, style: 'keyword' } -} diff --git a/src/lib/logger.js b/src/lib/logger.js index faa17a4..7e00b92 100644 --- a/src/lib/logger.js +++ b/src/lib/logger.js @@ -2,10 +2,10 @@ import { Logger } from './util' let logger -export default logger = new Logger( +export default (logger = new Logger( '[Eruda]', ENV === 'production' ? 'warn' : 'debug' -) +)) logger.formatter = function(type, argList) { argList.unshift(this.name) diff --git a/src/lib/stringifyUtil.js b/src/lib/stringifyUtil.js index f9dc44f..60cb596 100644 --- a/src/lib/stringifyUtil.js +++ b/src/lib/stringifyUtil.js @@ -1995,6 +1995,7 @@ export var stringifyAll = _.stringifyAll = (function (exports) { * |accessGetter=false|boolean|Access getter value | * |timeout=0 |number |Timeout of stringify | * |depth=0 |number |Max depth of recursion | + * |[ignore] |array |Values to ignore | * * When time is out, all remaining values will all be "Timeout". */ @@ -2011,6 +2012,7 @@ export var stringifyAll = _.stringifyAll = (function (exports) { * accessGetter?: boolean; * timeout?: number; * depth?: number; + * ignore?: any[]; * } * } * export declare function stringifyAll( @@ -2020,7 +2022,7 @@ export var stringifyAll = _.stringifyAll = (function (exports) { */ /* dependencies - * escapeJsStr type toStr endWith toSrc keys each Class getProto difference extend isPromise filter now allKeys + * escapeJsStr type toStr endWith toSrc keys each Class getProto difference extend isPromise filter now allKeys contain */ exports = (function(_exports) { @@ -2054,7 +2056,9 @@ export var stringifyAll = _.stringifyAll = (function (exports) { _ref$symbol = _ref.symbol, symbol = _ref$symbol === void 0 ? false : _ref$symbol, _ref$accessGetter = _ref.accessGetter, - accessGetter = _ref$accessGetter === void 0 ? false : _ref$accessGetter; + accessGetter = _ref$accessGetter === void 0 ? false : _ref$accessGetter, + _ref$ignore = _ref.ignore, + ignore = _ref$ignore === void 0 ? [] : _ref$ignore; var json = ''; var options = { @@ -2065,7 +2069,8 @@ export var stringifyAll = _.stringifyAll = (function (exports) { depth: depth, curDepth: curDepth + 1, timeout: timeout, - startTime: startTime + startTime: startTime, + ignore: ignore }; var t = type(obj, false); @@ -2179,7 +2184,7 @@ export var stringifyAll = _.stringifyAll = (function (exports) { var prototype = getProto(obj); - if (prototype) { + if (prototype && !contain(ignore, prototype)) { var proto = '"proto":'.concat( exports( prototype, @@ -2212,6 +2217,10 @@ export var stringifyAll = _.stringifyAll = (function (exports) { try { val = obj[key]; + if (contain(options.ignore, val)) { + return; + } + if (isPromise(val)) { val.catch(function() {}); } diff --git a/src/lib/util.js b/src/lib/util.js index 2b94f47..55b9525 100644 --- a/src/lib/util.js +++ b/src/lib/util.js @@ -1991,6 +1991,175 @@ export var extendOwn = _.extendOwn = (function (exports) { return exports; })({}); +/* ------------------------------ highlight ------------------------------ */ + +export var highlight = _.highlight = (function (exports) { + /* Highlight code. + * + * |Name |Type |Desc | + * |-------|------|----------------------------| + * |str |string|Code string | + * |lang=js|string|Language, js, html or css | + * |[style]|object|Keyword highlight style | + * |return |string|Highlighted html code string| + * + * Available styles: + * + * comment, string, number, keyword, operator + */ + + /* example + * highlight('const a = 5;', 'js', { + * number: 'color:#0086b3;' + * }); // -> 'const a = 5;' + */ + + /* typescript + * export declare namespace highlight { + * interface IStyle { + * comment?: string; + * string?: string; + * number?: string; + * keyword?: string; + * operator?: string; + * } + * } + * export declare function highlight( + * str: string, + * lang?: string, + * style: highlight.IStyle + * ): string; + */ + + /* dependencies + * each + */ // https://github.com/trentrichardson/jQuery-Litelighter + + exports = function exports(str, lang) { + lang = lang || 'js'; + str = str.replace(//g, '>'); + lang = language[lang]; + var subLangSi = 0; + var subLangs = []; + each(lang, function(val) { + if (!val.language) return; + str = str.replace(val.re, function($1, $2) { + subLangs[subLangSi++] = highlight($2, val.language); + return $1.replace($2, '___subtmpl' + (subLangSi - 1) + '___'); + }); + }); + each(lang, function(val, key) { + if (language[val.language]) return; + str = str.replace(val.re, '___' + key + '___$1___end' + key + '___'); + }); + var levels = []; + str = str.replace(/___(?!subtmpl)\w+?___/g, function($0) { + var end = $0.substr(3, 3) === 'end', + tag = (!end ? $0.substr(3) : $0.substr(6)).replace(/_/g, ''), + lastTag = levels.length > 0 ? levels[levels.length - 1] : null; + + if ( + !end && + (lastTag == null || + tag == lastTag || + (lastTag != null && + lang[lastTag] && + lang[lastTag].embed != undefined && + lang[lastTag].embed.indexOf(tag) > -1)) + ) { + levels.push(tag); + return $0; + } else if (end && tag == lastTag) { + levels.pop(); + return $0; + } + + return ''; + }); + each(lang, function(val, key) { + str = str + .replace(new RegExp('___end' + key + '___', 'g'), '') + .replace( + new RegExp('___' + key + '___', 'g'), + '' + ); + }); + each(lang, function(val) { + if (!val.language) return; + str = str.replace(/___subtmpl\d+___/g, function($tmpl) { + var i = parseInt($tmpl.replace(/___subtmpl(\d+)___/, '$1'), 10); + return subLangs[i]; + }); + }); + return str; + }; + + var style = { + comment: 'color:#63a35c;', + string: 'color:#183691;', + number: 'color:#0086b3;', + keyword: 'color:#a71d5d;', + operator: 'color:#994500;' + }; + var language = {}; + language.js = { + comment: { + re: /(\/\/.*|\/\*([\s\S]*?)\*\/)/g, + style: 'comment' + }, + string: { + re: /(('.*?')|(".*?"))/g, + style: 'string' + }, + numbers: { + re: /(-?(\d+|\d+\.\d+|\.\d+))/g, + style: 'number' + }, + keywords: { + re: /(?:\b)(function|for|foreach|while|if|else|elseif|switch|break|as|return|this|class|self|default|var|const|let|false|true|null|undefined)(?:\b)/gi, + style: 'keyword' + }, + operator: { + re: /(\+|-|\/|\*|%|=|<|>|\||\?|\.)/g, + style: 'operator' + } + }; + language.html = { + comment: { + re: /(<!--([\s\S]*?)-->)/g, + style: 'comment' + }, + tag: { + re: /(<\/?\w(.|\n)*?\/?>)/g, + style: 'keyword', + embed: ['string'] + }, + string: language.js.string, + css: { + re: /(?:<style.*?>)([\s\S]*)?(?:<\/style>)/gi, + language: 'css' + }, + script: { + re: /(?:<script.*?>)([\s\S]*?)(?:<\/script>)/gi, + language: 'js' + } + }; + language.css = { + comment: language.js.comment, + string: language.js.string, + numbers: { + re: /((-?(\d+|\d+\.\d+|\.\d+)(%|px|em|pt|in)?)|#[0-9a-fA-F]{3}[0-9a-fA-F]{3})/g, + style: 'number' + }, + keywords: { + re: /(@\w+|:?:\w+|[a-z-]+:)/g, + style: 'keyword' + } + }; + + return exports; +})({}); + /* ------------------------------ values ------------------------------ */ export var values = _.values = (function (exports) { @@ -7620,6 +7789,7 @@ export var stringifyAll = _.stringifyAll = (function (exports) { * |accessGetter=false|boolean|Access getter value | * |timeout=0 |number |Timeout of stringify | * |depth=0 |number |Max depth of recursion | + * |[ignore] |array |Values to ignore | * * When time is out, all remaining values will all be "Timeout". */ @@ -7636,6 +7806,7 @@ export var stringifyAll = _.stringifyAll = (function (exports) { * accessGetter?: boolean; * timeout?: number; * depth?: number; + * ignore?: any[]; * } * } * export declare function stringifyAll( @@ -7645,7 +7816,7 @@ export var stringifyAll = _.stringifyAll = (function (exports) { */ /* dependencies - * escapeJsStr type toStr endWith toSrc keys each Class getProto difference extend isPromise filter now allKeys + * escapeJsStr type toStr endWith toSrc keys each Class getProto difference extend isPromise filter now allKeys contain */ exports = (function(_exports) { @@ -7679,7 +7850,9 @@ export var stringifyAll = _.stringifyAll = (function (exports) { _ref$symbol = _ref.symbol, symbol = _ref$symbol === void 0 ? false : _ref$symbol, _ref$accessGetter = _ref.accessGetter, - accessGetter = _ref$accessGetter === void 0 ? false : _ref$accessGetter; + accessGetter = _ref$accessGetter === void 0 ? false : _ref$accessGetter, + _ref$ignore = _ref.ignore, + ignore = _ref$ignore === void 0 ? [] : _ref$ignore; var json = ''; var options = { @@ -7690,7 +7863,8 @@ export var stringifyAll = _.stringifyAll = (function (exports) { depth: depth, curDepth: curDepth + 1, timeout: timeout, - startTime: startTime + startTime: startTime, + ignore: ignore }; var t = type(obj, false); @@ -7804,7 +7978,7 @@ export var stringifyAll = _.stringifyAll = (function (exports) { var prototype = getProto(obj); - if (prototype) { + if (prototype && !contain(ignore, prototype)) { var proto = '"proto":'.concat( exports( prototype, @@ -7837,6 +8011,10 @@ export var stringifyAll = _.stringifyAll = (function (exports) { try { val = obj[key]; + if (contain(options.ignore, val)) { + return; + } + if (isPromise(val)) { val.catch(function() {}); }