{props.title}

// (c) easrng 2024 all rights reserved /** @jsx jsx */ /** @jsxFrag Fragment */ import { createContext, type FC, Fragment, jsx, type PropsWithChildren, useContext, } from "https://deno.land/x/hono@v4.0.10/jsx/index.ts"; import { Hono } from "https://deno.land/x/hono@v4.0.10/mod.ts"; import { API_URL } from "https://esm.town/v/std/API_URL?v=5"; import { create } from "https://esm.town/v/websandbox/create"; import { parse as parseStack } from "npm:error-stack-parser-es@0.1.1"; import * as stylis from "npm:stylis@4.3.1"; import * as SuperJSON from "npm:superjson@2.2.1"; globalThis.addEventListener("unhandledrejection", (event) => { event.preventDefault(); console.error("Uncaught (in promise) %o", event.reason) }); const app = new Hono(); const Layout: FC> = (props) => { return ( {props.title} {props.children} ); }; const StacktraceLink: FC<{ href: string; line?: number; col?: number }> = ({ href, line, col, }) => { let link: string | JSX.Element = href; try { const url = new URL(href); if (url.protocol === "https:" || url.protocol === "http:") { link = {url.href}; } } catch {} return ( <> {link} {line ? `:${line}${col ? ":" + col : ""}` : ""} ); }; const defaultFormat = (args: unknown[]) => { const first = args[0]; let a = 0; let out: string[] = []; let styled: JSX.Element[] = []; let css: string = ""; function flush() { if (out.length) { styled.push(css ? {out} : <>{out}); out = []; } } if (typeof first == "string" && args.length > 1) { a++; // Index of the first not-yet-appended character. Use this so we only // have to append to `string` when a substitution occurs / at the end. let appendedChars = 0; for (let i = 0; i < first.length - 1; i++) { if (first[i] == "%") { const char = first[++i]; if (a < args.length) { let formattedArg = ""; if (char == "s") { // Format as a string. formattedArg = String(args[a++]); } else if (Array.prototype.includes.call(["d", "i"], char)) { // Format as an integer. const value = args[a++]; if (typeof value == "bigint") { formattedArg = `${value}n`; } else if (typeof value == "number") { formattedArg = `${Number.parseInt(String(value))}`; } else { formattedArg = "NaN"; } } else if (char == "f") { // Format as a floating point value. const value = args[a++]; if (typeof value == "number") { formattedArg = `${value}`; } else { formattedArg = "NaN"; } } else if (Array.prototype.includes.call(["O", "o"], char)) { // Format as an object. formattedArg = Deno.inspect(args[a++]); } else if (char == "c") { const value = String(args[a++]); const { compile, serialize, stringify } = stylis; flush(); css = serialize( compile(value).filter(style => style.type === "decl" && /^color$|^font-(weight|style)$|^text-decoration|^background-color$/.test(String(style.props)) ), stringify, ); } if (formattedArg != null) { out.push( String.prototype.slice.call(first, appendedChars, i - 1) + formattedArg, ); appendedChars = i + 1; } } if (char == "%") { out.push(String.prototype.slice.call(first, appendedChars, i - 1) + "%"); appendedChars = i + 1; } } } out.push(String.prototype.slice.call(first, appendedChars)); } flush(); css = ""; for (; a < args.length; a++) { if (a > 0) { out.push(" "); } if (typeof args[a] == "string") { out.push(String(args[a])); } else { out.push(Deno.inspect(args[a])); } } flush(); return ( {styled} ); }; function transpose(matrix) { return matrix[0].map((col, i) => matrix.map((row) => row[i])); } const table = (data = undefined, properties = undefined) => { if (properties !== undefined && !Array.isArray(properties)) { /*throw new Error( "The 'properties' argument must be of type Array. " + "Received type " + typeof properties, );*/ return defaultFormat([data, properties]); } if (data === null || typeof data !== "object") { return defaultFormat([data, properties]); } let resultData; const isSetObject = data instanceof Set; const isMapObject = data instanceof Map; const valuesKey = "Values"; const indexKey = isSetObject || isMapObject ? "(iter idx)" : "(idx)"; if (isSetObject) { resultData = [...data]; } else if (isMapObject) { let idx = 0; resultData = {}; Map.prototype.forEach.call(data, (v, k) => { resultData[idx] = { Key: k, Values: v }; idx++; }); } else { resultData = data; } const keys = Object.keys(resultData); const numRows = keys.length; const objectValues = properties ? Object.fromEntries( Array.prototype.map.call(properties, (name) => [ name, Array.prototype.fill.call(new Array(numRows), ""), ]), ) : {}; const indexKeys = []; const values = []; let hasPrimitives = false; Array.prototype.forEach.call(keys, (k, idx) => { const value = resultData[k]; const primitive = value === null || (typeof value !== "function" && typeof value !== "object"); if (properties === undefined && primitive) { hasPrimitives = true; Array.prototype.push.call(values, defaultFormat([value])); } else { const valueObj = value || {}; const keys = properties || Object.keys(valueObj); for (let i = 0; i < keys.length; ++i) { const k = keys[i]; if (!primitive && Reflect.has(valueObj, k)) { if (!Reflect.has(objectValues, k)) { objectValues[k] = Array.prototype.fill.call(new Array(numRows), ""); } objectValues[k][idx] = defaultFormat([valueObj[k]]); } } Array.prototype.push.call(values, ""); } Array.prototype.push.call(indexKeys, k); }); const headerKeys = Object.keys(objectValues); const bodyValues = Object.values(objectValues); const headerProps = properties || [ ...headerKeys, !isMapObject && hasPrimitives && valuesKey, ]; const header = Array.prototype.filter.call( [indexKey, ...headerProps], Boolean, ); const body = [indexKeys, ...bodyValues, values]; return (

{header.map((e) => )} {transpose(body).map((e) => ( {e .slice(0, header.length) .map((e, i) => (i ? : ))} ))}

{e}
{e}	{e}

); }; const icons = { error: "⛔", warn: "⚠️", info: "ℹ️", debug: "🐞", unknown: "❓", }; const known = new Set([ "log", "clear", "table", "assert", "count", "countReset", "dir", "dirxml", "exception", "time", "timeEnd", "timeLog", "timeStamp", "trace", "profile", "profileEnd", ...Object.keys(icons), ]); const CountContext = createContext>(new Map()); const TimeContext = createContext>(new Map()); const LogLine: FC<{ log: Log }> = ({ log }) => { const counts = useContext(CountContext); const times = useContext(TimeContext); let stackEle = <>; let unknownType: string | void; if (!known.has(log.type)) { unknownType = log.type; log.type = "unknown"; } if (log.type === "timeStamp" || log.type === "profile" || log.type === "profileEnd") { return <>; } if (log.type === "assert") { if (log.args[0]) return <>; log.type = "error"; log.args[0] = "Assertion failed:"; log.args.push("\n" + log.stack); } const label = log.args[0] === undefined ? "default" : `${log.args[0]}`; { const reset = log.type === "countReset"; if (log.type === "count" || log.type === "countReset") { const newCount = reset ? 0 : (counts.get(label) || 0) + 1; counts.set(label, newCount); if (reset) return <>; log.args = [label + ":", newCount]; log.type = "count"; } } if (log.type === "time" || log.type === "countReset") { if (times.has(label)) { log.type = "warn"; log.args = [`Timer '${label}' already exists.`]; } else { times.set(label, log.time); return <>; } } if (log.type === "timeLog" || log.type === "timeEnd") { if (times.has(label)) { log.args = [`${label}: ${log.time - times.get(label)}ms`]; if (log.type === "timeEnd") { times.delete(label); } } else { log.type = "warn"; log.args = [`Timer '${label}' doesn't exist.`]; } } if (log.type === "dir" || log.type === "dirxml") { log.type = "log"; } if (log.type === "exception") { log.type = "error"; } if (log.type === "trace") { log.args.unshift("Trace" + (log.args.length ? ":" : "")); log.args.push("\n" + log.stack); } try { const stack = parseStack(log as unknown as Error); stackEle = (

{stack[0].fileName}

); return (

at {item.functionName ? ( <> {item.functionName} ({file}) ) : file}

); })}

); } catch {} const icon = icons[log.type] ? ( {icons[log.type]} ) : ( "" ); let content; if (log.type === "clear") { content = Ignored console.clear(); } else if (log.type === "table") { content = table(...log.args); } else if (log.type === "unknown") { content = ( <> {unknownType} {":\xa0"} {defaultFormat(log.args)} ); } else { content = defaultFormat(log.args); } return (

{icon} {content} {stackEle}

); }; const Output: FC<{ logs: Log[] }> = ({ logs }) => { return (

{logs.map((log) => )}

); }; const App: FC<{ code: string; http: boolean }> = ({ code, http }) => { const httpToken = http && crypto.randomUUID(); const frame = ( ); return (

playground

Version 22