diff --git a/src/html/log.ts b/src/html/log.ts index c590464..0f40f00 100644 --- a/src/html/log.ts +++ b/src/html/log.ts @@ -18,31 +18,49 @@ export default /*html*/ ` } .date { - color: rgb(187, 187, 0) + color: rgb(187, 187, 0); } .log { font-weight: bold; - color: rgb(0, 187, 187) + color: rgb(0, 187, 187); } .warn { font-weight: bold; - color: rgb(0, 187, 187) + color: rgb(0, 187, 187); } .debug { font-weight: bold; - color: rgb(0, 187, 0) + color: rgb(0, 187, 0); } .error { font-weight: bold; - background-color: rgb(187, 0, 0) + background-color: rgb(187, 0, 0); } .errorText { - background-color: rgb(187, 0, 0) + background-color: rgb(187, 0, 0); + } + + .string { + color: rgb(0, 187, 0); + } + + .number { + color: rgb(187, 187, 0); + } + + .boolean { + /*font-weight: bold;*/ + color: rgb(187, 0, 187); + } + + .object { + color: rgb(0, 0, 187); + font-weight: bold; } @@ -54,6 +72,75 @@ export default /*html*/ ` let loaded = []; + function parseJSON(json, depth = 0){ + let elems = []; + function addSpaces(num, text = "") { + let space = document.createElement("span"); + space.innerText = new Array(num).fill(" ").join("")+text; + elems.push(space); + } + + function addBreak() { + elems.push(document.createElement("br")); + } + + function addData(data){ + if(typeof data == "object" && data != null){ + elems.push(...parseJSON(data, depth+2)); + }else{ + let line = document.createElement("span"); + if(typeof data == "string") line.innerText = "'"+data+"'"; + else line.innerText = data == null ? "null" : data; + line.className = typeof data; + elems.push(line); + } + } + + if(Array.isArray(json)){ + addSpaces(depth, "["); + + json.forEach((e,i) => { + if(i == 0) addBreak(); + addSpaces(depth+2); + + addData(e); + + if(i+1 < json.length){ + let k = document.createElement("span"); + k.innerText = ","; + elems.push(k); + } + + addBreak(); + }); + addSpaces(depth, "]"); + }else{ + addSpaces(depth, "{"); + let keys = Object.keys(json); + for(let i = 0; i < keys.length; i++){ + if(i == 0) addBreak(); + let key = keys[i]; + + addSpaces(depth+2); + let keyElem = document.createElement("span"); + keyElem.innerText = key + ": "; + elems.push(keyElem); + + addData(json[key]); + + if(i+1 < json.length){ + let k = document.createElement("span"); + k.innerText = ","; + elems.push(k); + } + + addBreak(); + } + addSpaces(depth, "}"); + } + return elems; + } + function parse([id, type, date, name, args ]){ let dateSpan = document.createElement("span"); dateSpan.className = "date"; @@ -67,7 +154,15 @@ export default /*html*/ ` let argsSpan = document.createElement("span"); if(type=="error") argsSpan.className = "errorText"; - argsSpan.innerText = args.map(a => typeof a == 'object' ? JSON.stringify(a, null, 2) : a).join(" "); + args.forEach(a => { + if(typeof a != 'object' || a == null){ + argsSpan.appendChild(document.createTextNode(a)); + }else{ + argsSpan.append(...parseJSON(a)); + } + argsSpan.appendChild(document.createTextNode(" ")); + }); + //argsSpan.innerText = args.map(a => typeof a == 'object' ? parseJSON(a) : a).join(" "); pre.appendChild(argsSpan); pre.appendChild(document.createElement("br")); diff --git a/src/sys/log.ts b/src/sys/log.ts index a682758..2838410 100644 --- a/src/sys/log.ts +++ b/src/sys/log.ts @@ -19,7 +19,7 @@ export const debug = (name: string, ...args: any[]) => { if (global.provideLog != 0) logList.push([logID++, "debug", dateString, name, args]); }; -export const log = (name: string, ...args: string[]) => { +export const log = (name: string, ...args: any[]) => { args = consorArgs(args); let dateString = (new Date()).toLocaleString(); console.log(