Skip to content

Commit

Permalink
Dev: Json highlight
Browse files Browse the repository at this point in the history
  • Loading branch information
@surunzi
surunzi committed Aug 27, 2016
1 parent 2490176 commit 52264f0
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 29 deletions.
4 changes: 3 additions & 1 deletion src/Console/Log.es6
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,7 @@ function stringifyWrapper(obj, options = {})
simple: true,
highlight: true,
keyQuotes: false,
specialVal: true,
getterVal: Log.showGetterVal,
unenumerable: Log.showUnenumerable
});
Expand Down Expand Up @@ -410,7 +411,8 @@ function extractObj(obj, options = {})
{
util.defaults(options, {
highlight: false,
keyQuotes: true
keyQuotes: true,
specialVal: false
});

return JSON.parse(stringifyWrapper(obj, options));
Expand Down
9 changes: 1 addition & 8 deletions src/lib/JsonViewer.es6
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,20 +101,13 @@ function createEl(key, val, firstLevel)
<span class="eruda-function">${val.length > 250 ? encode(val) : highlight(val, 'js')}</span>
</li>`;
}
if (val === '(...)' || val === '[circular]')
if (val === '(...)' || val === '[circular]' || val === 'undefined' || val === 'Symbol')
{
return `<li>
<span class="eruda-key">${encode(key)}: </span>
<span class="eruda-special">${val}</span>
</li>`;
}
if (val === 'undefined')
{
return `<li>
<span class="eruda-key">${encode(key)}: </span>
<span class="eruda-undefined">undefined</span>
</li>`;
}

return `<li>
<span class="eruda-key">${encode(key)}: </span>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/json.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
.boolean {
color: #0086b3;
}
.special, .undefined {
.special {
color: $gray;
}
.key {
Expand Down
60 changes: 41 additions & 19 deletions src/lib/stringify.es6
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export default function stringify(obj, {
keyQuotes = true,
getterVal = false,
highlight = false,
specialVal = false,
unenumerable = true
} = {})
{
Expand All @@ -26,26 +27,47 @@ export default function stringify(obj, {
strWrapper = '',
nullWrapper = '',
boolWrapper = '',
specialWrapper = '',
fnWrapper = '',
strEscape = str => str,
wrapperEnd = '';

if (highlight)
{
keyWrapper = '<span style="color: #a71d5d;">';
fnWrapper = '<span style="color: #a71d5d;">';
numWrapper = '<span style="color: #0086b3;">';
nullWrapper = '<span style="color: #0086b3;">';
strWrapper = '<span style="color: #183691;">';
boolWrapper = '<span style="color: #0086b3;">';
specialWrapper = '<span style="color: #707d8b;">';
strEscape = str => util.escape(str);
wrapperEnd = '</span>'
wrapperEnd = '</span>';
}

let wrapKey = key => keyWrapper + dbQuotes + strEscape(key) + dbQuotes + wrapperEnd,
wrapNum = num => numWrapper + num + wrapperEnd,
wrapStr = str => strWrapper + strEscape(str) + wrapperEnd,
wrapBool = bool => boolWrapper + bool + wrapperEnd,
wrapNull = str => nullWrapper + str + wrapperEnd;

function wrapStr(str)
{
str = util.toStr(str);

if (specialVal)
{
if (util.startWith(str, 'function'))
{
return fnWrapper + 'function' + wrapperEnd + ' ( )';
}
if (str === '(...)' || str === '[circular]' || str === 'undefined' || str === 'Symbol')
{
return specialWrapper + strEscape(str) + wrapperEnd;
}
}

return strWrapper + strEscape(`"${str}"`) + wrapperEnd;
}
try {
type = ({}).toString.call(obj);
} catch (e)
Expand All @@ -72,16 +94,16 @@ export default function stringify(obj, {

if (circular)
{
json = wrapStr('"[circular]"');
json = wrapStr('[circular]');
} else if (isStr)
{
json = wrapStr(`"${escapeJsonStr(obj)}"`);
json = wrapStr(escapeJsonStr(obj));
} else if (isArr)
{
visited.push(obj);

json = '[';
util.each(obj, val => parts.push(`${stringify(val, {visited, simple, getterVal, keyQuotes, highlight, unenumerable})}`));
util.each(obj, val => parts.push(`${stringify(val, {visited, specialVal, simple, getterVal, keyQuotes, highlight, unenumerable})}`));
json += parts.join(', ') + ']';
} else if (isObj || isFn)
{
Expand All @@ -90,7 +112,7 @@ export default function stringify(obj, {
names = unenumerable ? Object.getOwnPropertyNames(obj) : Object.keys(obj);
proto = Object.getPrototypeOf(obj);
if (proto === Object.prototype || isFn || simple) proto = null;
if (proto) proto = `${wrapKey('erudaProto')}: ${stringify(proto, {visited, getterVal, topObj, keyQuotes, highlight, unenumerable})}`;
if (proto) proto = `${wrapKey('erudaProto')}: ${stringify(proto, {visited, specialVal, getterVal, topObj, keyQuotes, highlight, unenumerable})}`;
names.sort(sortObjName);
if (isFn)
{
Expand All @@ -99,16 +121,16 @@ export default function stringify(obj, {
}
if (names.length === 0 && isFn)
{
json = wrapStr(`"${escapeJsonStr(obj.toString())}"`);
json = wrapStr(escapeJsonStr(obj.toString()));
} else
{
json = '{';
json = '{ ';
if (isFn)
{
// Function length is restricted to 500 for performance reason.
var fnStr = obj.toString();
if (fnStr.length > 500) fnStr = fnStr.slice(0, 500) + '...';
parts.push(`${wrapKey('erudaObjAbstract')}: ${wrapStr('"' + escapeJsonStr(fnStr) + '"')}`);
parts.push(`${wrapKey('erudaObjAbstract')}: ${wrapStr(escapeJsonStr(fnStr))}`);
}
util.each(names, name =>
{
Expand All @@ -122,10 +144,10 @@ export default function stringify(obj, {
return parts.push(`${key}: "(...)"`);
}
}
parts.push(`${key}: ${stringify(topObj[name], {visited, getterVal, simple, keyQuotes, highlight, unenumerable})}`);
parts.push(`${key}: ${stringify(topObj[name], {visited, specialVal, getterVal, simple, keyQuotes, highlight, unenumerable})}`);
});
if (proto) parts.push(proto);
json += parts.join(', ') + '}';
json += parts.join(', ') + ' }';
}
} else if (isNum)
{
Expand All @@ -145,10 +167,10 @@ export default function stringify(obj, {
json = wrapNull('null');
} else if (isSymbol)
{
json = wrapStr('"Symbol"');
json = wrapStr('Symbol');
} else if (obj === undefined)
{
json = wrapStr('"undefined"');
json = wrapStr('undefined');
} else if (type === '[object HTMLAllCollection]')
{
// https://docs.webplatform.org/wiki/dom/HTMLAllCollection
Expand All @@ -160,7 +182,7 @@ export default function stringify(obj, {
{
visited.push(obj);

json = '{\n';
json = '{ ';
if (!simple) parts.push(`${wrapKey('erudaObjAbstract')}: "${type.replace(/(\[object )|]/g, '')}"`);
names = unenumerable ? Object.getOwnPropertyNames(obj) : Object.keys(obj);
proto = Object.getPrototypeOf(obj);
Expand All @@ -169,10 +191,10 @@ export default function stringify(obj, {
{
try
{
proto = `${wrapKey('erudaProto')}: ${stringify(proto, {visited, topObj, getterVal, keyQuotes, highlight, unenumerable})}`;
proto = `${wrapKey('erudaProto')}: ${stringify(proto, {visited, specialVal, topObj, getterVal, keyQuotes, highlight, unenumerable})}`;
} catch(e)
{
proto = `${wrapKey('erudaProto')}: ${wrapStr('"' + escapeJsonStr(e.message) + '"')}`;
proto = `${wrapKey('erudaProto')}: ${wrapStr(escapeJsonStr(e.message))}`;
}
}
names.sort(sortObjName);
Expand All @@ -188,12 +210,12 @@ export default function stringify(obj, {
return parts.push(`${key}: "(...)"`);
}
}
parts.push(`${key}: ${stringify(topObj[name], {visited, getterVal, simple, keyQuotes, highlight, unenumerable})}`);
parts.push(`${key}: ${stringify(topObj[name], {visited, specialVal, getterVal, simple, keyQuotes, highlight, unenumerable})}`);
});
if (proto) parts.push(proto);
json += parts.join(',\n') + '\n}';
json += parts.join(',\n') + ' }';
} catch (e) {
json = wrapStr(`"${obj}"`);
json = wrapStr(obj);
}
}

Expand Down

0 comments on commit 52264f0

Please sign in to comment.