/** @jsxImportSource https://esm.sh/react */ import { renderToString } from "npm:react-dom/server"; import { blob } from "https://esm.town/v/std/blob?v=12"; import { createHash } from "node:crypto"; import base32Encode from "npm:base32-encode"; const oneSecond = 1000; const TIMEOUT = 5 * oneSecond; blob.setJSON; const fetch = async (req: Request): Promise => { let repp = new Repp([{ code: "", }, { code: ``, }]); if (req.method === "GET") { return new Response( renderToString(

, ), { headers: { "content-type": "text/html" } }, ); } }; interface Segment { code: string; result?: { args: unknown[]; level: string; index: number }[]; } const hashSegments = (segments: Segment[]): string => { return base32Encode( createHash("sha256").update(JSON.stringify(segments.map(s => s.code))).digest().slice(0, 20), "RFC4648", { padding: false }, ).toLowerCase(); }; type Log = { level: string; args: unknown[]; stack: string; }; // The script we run within the worker. Don't reference anything // outside of this function as it won't be available within the worker. We could even host this in a separate val and pass const workerScript = () => { type Log = { level: string; args: unknown[]; stack: string; }; const logs: Log[] = []; globalThis.console = new Proxy(console, { get(target, key) { const real = target[key]; if (typeof real === "function" && typeof key === "string") { const fn = function(...args: any[]) { logs.push({ level: key, stack: new Error().stack.replace("Error\n", "") .split("\n").filter((s) => !s.includes("Proxy.fn")) .join("\n"), args, }); return real.call(this, ...args); }; return fn; } }, }); async function evaluate(url) { try { const _ = await import(url); return; } catch (err) { return { error: { message: err.message, stack: err.stack.replaceAll(url, "./script.ts") } }; } } self.onmessage = async (e) => { const blob = new Blob([e.data], { type: "text/tsx" }); const url = URL.createObjectURL(blob); let resp = await evaluate(url); logs.forEach((l) => { l.stack = l.stack.replaceAll(url, "./script.ts"); }); self.postMessage(JSON.stringify({ resp, logs })); }; }; type EvalResponse = { segments?: Segment[]; error?: { message: string; stack: string } }; // read eval print page class Repp { #segments: Segment[]; constructor(segments: Segment[]) { this.#segments = segments; } hash(): string { // A subjectively "nice looking" hash value. // https://github.com/maxmcd/bramble/blob/205f61427fe505d109d22ef94967561006d6c83d/pkg/hasher/hasher.go#L47-L55 return base32Encode( createHash("sha256").update(JSON.stringify(this.#segments.map(s => s.code))).digest().slice(0, 20), "RFC4648", { padding: false }, ).toLowerCase(); } async save() { await blob.setJSON(this.hash(), this.#segments); } get segments() { return this.#segments; } get segmentLineIndex() { return [].concat(...this.#segments.map((s, i) => s.code.split("\n").map(() => i))); } async eval() { const blob = new Blob([`(${workerScript.toString()})()`], { type: "text/tsx", }); return await new Promise( (resolve, reject) => { // Run the users code in a worker. let work = new Worker(URL.createObjectURL(blob), { type: "module" }); const timeout = setTimeout(() => { work.terminate(); resolve({ error: { message: "timeout" } }); }, TIMEOUT); work.postMessage(this.#segments.map((s) => s.code).join("\n")); work.onmessage = (e) => { try { const resp: { logs: Log[]; error?: { message: string; stack: string } } = JSON.parse(e.data); this.segmentLineIndex; resp.logs.forEach((l) => { // Get the location of the log line in the total script by grabbing the // location at the last line of the last stack entry. let location = parseInt(l.stack.split("\n").slice(-1)[0].split(":").slice(-2, -1)[0]); // Which segment is this log line related to? const segmentIndex = this.segmentLineIndex[location - 1]; const segment = this.#segments[segmentIndex]; // Subtract the numbers of lines ahead of this segment so that log // locations are relative to a singe block. location = location - this.segmentLineIndex.indexOf(segmentIndex); // Append the logs, add the args, turn the line location into an index. segment.result = [...(segment.result ?? []), { args: l.args, level: l.level, index: location - 1 }]; }); clearTimeout(timeout); work.terminate(); resolve({ segments: this.#segments, error: resp.error }); } catch (e) { reject(e); } }; }, ); } } export default fetch; // https://stackoverflow.com/a/67394423/1333724 // var __EVAL = async (s) => eval(`(async () => (void (__EVAL = ${__EVAL.toString()}); ${s}))()`); // // evaluate("let ten = 10"); // // evaluate("function cube(x) { return x ** 3 }"); // // evaluate("ten + cube(3)"); // evaluate(` // let resp = await fetch('https://www.google.com'); // console.log(resp) // let x = 10 // let foo = () => { // console.log("ho") // } // let foo2 = () => { // foo() // } // let foo3 = () => { // foo2() // } // let foo4 = () => { // foo3() // } // let foo5 = () => { // foo4() // } // console.log("hi") // foo5() // throw new Error("hi") // `); // evaluate("console.log(\"SIDE EFFECT\")"); // evaluate("let twenty = 20"); // evaluate("twenty + 40");

repp

Version 155