{props.title}

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

{e}
{e}	{e}

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

{stack[0].fileName}

\n );\n return (\n

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

\n );\n })}\n

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

\n {icon}\n {content}\n {stackEle}\n

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

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

\n \n );\n};\n\nconst App: FC<{ code: string; http: boolean }> = ({ code, http }) => {\n const httpToken = http && crypto.randomUUID();\n const frame = (\n \n \n hit run {http ? \"→\" : \"⤴\"}{\"\\xa0\"}\n \n \n ).toString()}\n >\n \n );\n return (\n \n \n \n {\n if(e.submitter.getAttribute(\"formaction\")) return;\n e.preventDefault()\n output.srcdoc=${\n JSON.stringify(\n (\n \n \n

\n                      \n                        {\"/\"}\n                      \n                      {\"\\xa0\"}Running...\n

\n dots.push(load.textContent=dots.shift()), 80)`,\n }}\n />\n \n \n ).toString(),\n ).replace(/<\\//g, \"<\\\\/\")\n }\n output.addEventListener(\"load\", () => {${http ? \"\" : \"details.open = true;\"}form.submit()}, {once: true})\n })\n `,\n }}\n />\n \n );\n};\n\napp.get(\"/\", async (c) => {\n let { code, load, type } = c.req.query();\n const http = type === \"http\";\n if (!code) {\n if (load) {\n try {\n code = await (await fetch(new URL(load, \"https://esm.town/v/\"))).text();\n } catch (e) {\n code = `/*\\nFailed to load '${load}': ${e}\\n*/`;\n }\n } else {\n code = http ? \"export default () => Response.json({hello: \\\"world\\\"})\" : \"console.log(\\\"Hello, World!\\\")\";\n }\n }\n return c.html();\n});\napp.post(\"/save\", async (c) => {\n const body = await c.req.parseBody();\n return c.redirect(\n \"https://www.val.town/new?code=\"\n + encodeURIComponent(String(body.code)),\n );\n});\napp.post(\"/run\", async (c) => {\n try {\n const body = await c.req.parseBody();\n if (typeof body.code !== \"string\") return c.notFound();\n if (typeof body.httpToken === \"string\") {\n const url = await create({\n code: body.code,\n token: body.httpToken,\n });\n return c.html(\n \n \n \n {url}\n \n \n ,\n );\n } else {\n const res = await fetch(API_URL + \"/v1/eval\", {\n method: \"POST\",\n body: JSON.stringify({\n code: `async (code) => await(await import(${JSON.stringify(import.meta.url)})).serializedExecute(code)`,\n args: [body.code],\n }),\n });\n if (!res.ok) {\n return c.html(\n ,\n );\n }\n const text = await res.text();\n let logs: Log[];\n try {\n ({ logs } = await (SuperJSON.parse(\n text,\n ) as ReturnType));\n } catch (e) {\n return c.html(\n ,\n );\n }\n return c.html();\n }\n } catch (e) {\n return c.text(e.stack);\n }\n});\nexport default app.fetch;\ntype Log = {\n type: string;\n args: unknown[];\n time: number;\n stack: string;\n};\nasync function execute(code: string): Promise<{ logs: Log[] }> {\n try {\n const blob = new Blob([code], {\n type: \"text/tsx\",\n });\n const url = URL.createObjectURL(blob);\n const markStackStart = crypto.randomUUID();\n const markStackEnd = crypto.randomUUID();\n function cleanStack(stack: string) {\n let lines: string[] = [];\n for (const line of stack.split(\"\\n\")) {\n if (line.includes(markStackEnd)) break;\n lines.push(line.replace(url, \"input.tsx\"));\n if (line.includes(markStackStart)) {\n lines = [];\n }\n }\n return lines.join(\"\\n\");\n }\n const logs: Log[] = [];\n globalThis.console = new Proxy(console, {\n get(target, key) {\n const real = target[key];\n if (typeof real === \"function\" && typeof key === \"string\") {\n const fn = function(...args: any[]) {\n logs.push({\n type: key,\n args,\n time: Date.now(),\n stack: cleanStack(new Error().stack),\n });\n return real.call(this, ...args);\n };\n Object.defineProperty(fn, \"name\", {\n writable: true,\n value: markStackStart,\n });\n return fn;\n }\n },\n });\n async function run() {\n try {\n await import(url);\n } catch (e) {\n logs.push({\n type: \"error\",\n args: [\"Uncaught %o\", e],\n time: Date.now(),\n stack: e instanceof Error ? cleanStack(e.stack) : undefined,\n });\n }\n }\n Object.defineProperty(run, \"name\", {\n writable: true,\n value: markStackEnd,\n });\n await run();\n URL.revokeObjectURL(url);\n return {\n logs,\n };\n } catch (error) {\n return {\n logs: [\n {\n type: \"error\",\n args: [\"Uncaught (in runtime) %o\", error],\n time: Date.now(),\n stack: undefined,\n },\n ],\n };\n }\n}\nexport const serializedExecute = async (code: string) => SuperJSON.stringify(await execute(code));","deleted","label",[98],"permalink","https://www.val.town/x/easrng/playground/code/main.tsx","extension","actionData","errors"]