defaultHook = {
const prefixColor = {
"[trace]": "observablehq--pink",
"[debug]": "observablehq--green",
"[info]": "observablehq--purple",
"[warn]": "observablehq--orange",
"[error]": "observablehq--red"
};
const defaultHook = (log, level, args) => {
if (!("output" in log)) {
log.output = htl.html`<ul style="display: block; height: 250px; overflow-y: scroll;">`;
log.output.value = log;
log.then = (resolve) => resolve(log.output);
}
if (!level) {
return;
}
console[level](...args);
const item = document.createElement("li");
for (const arg of args) {
if (typeof arg !== "string") {
item.append(inspect(arg, { display: "inline" }));
} else if (arg in prefixColor) {
const span = document.createElement("span");
span.textContent = arg;
span.className = prefixColor[arg];
item.append(span);
} else {
item.append(arg);
}
item.append(" ");
}
log.output.append(item);
};
return defaultHook;
}
levels = ({
trace: 0,
debug: 1,
log: 2,
info: 3,
warn: 4,
error: 5
})
newLog = {
const defaultPrefix = [
"[trace]",
"[debug]",
"",
"[info]",
"[warn]",
"[error]"
];
const newLog = ({
prefix = defaultPrefix,
parent = console,
hook = defaultHook,
level = levels.trace
} = {}) => {
const methods = {
hook,
level,
with(prefix, { hook = log.hook, level = log.level } = {}) {
return newLog({ prefix, parent: log, hook, level });
}
};
for (const level in levels) {
const index = levels[level];
methods[level] = (...args) => {
if (index < log.level) {
return;
}
if (Array.isArray(prefix)) {
args.unshift(prefix[index]);
} else if (prefix) {
args.unshift(prefix);
}
log.hook?.(log, level, args);
parent?.[level](...args);
return log;
};
}
const log = Object.assign(methods.log, methods);
log.hook?.(log);
log.trace("created");
return log;
};
return newLog;
}
sample = {
const log = newLog();
yield log;
log("hi", "from", "@natpbs/log");
log.info(
"some supported types include:",
"string",
3.14,
4n,
NaN,
null,
undefined,
[],
{},
(x) => x,
class C {},
new Map([
["key", "value"],
[2, true]
]),
{
an: ["expandable", Symbol("value")]
}
);
const child = log.with("child:");
child("says hi");
child.warn("be carful!");
log("the log levels are highlighted");
for (const level in levels) {
log[level]("using level", level);
}
log.level = levels.warn;
log.warn("log level set to warn");
log.info("you won't see lower level messages");
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
