/* crabcc landing — in-browser playground. Live REPL against a REAL, smart-loaded crabcc index of facebook/react (v18.3.1). The index streams from the edge on idle; queries run locally. Exports to window. */ const { useState: useStateP, useRef: useRefP, useEffect: useEffectP } = React; /* colorize a JS value as crabcc-terminal JSON (returns React nodes) */ function jsonNodes(value, indent = 0) { const pad = " ".repeat(indent); const padIn = " ".repeat(indent + 1); if (value === null) return [null]; if (typeof value === "number") return [{String(value)}]; if (typeof value === "boolean") return [{String(value)}]; if (typeof value === "string") return ["{value}"]; if (Array.isArray(value)) { if (value.length === 0) return [[]]; const out = [[{"\n"}]; value.forEach((v, i) => { out.push({padIn}, ...jsonNodes(v, indent + 1)); out.push({i < value.length - 1 ? "," : ""}{"\n"}); }); out.push({pad}, ]); return out; } const keys = Object.keys(value); if (keys.length === 0) return [{"{}"}]; const out = [{"{"}{"\n"}]; keys.forEach((k, i) => { out.push({padIn}, "{k}", : , ...jsonNodes(value[k], indent + 1)); out.push({i < keys.length - 1 ? "," : ""}{"\n"}); }); out.push({pad}, {"}"}); return out; } function Playground() { const CR = window.CRABCC; const [value, setValue] = useStateP("crabcc sym useState"); const [history, setHistory] = useStateP([]); const [st, setSt] = useStateP(CR.status()); const bodyRef = useRefP(null); const inputRef = useRefP(null); const didInit = useRefP(false); const runCmd = (raw) => { const cmd = (raw || value).trim(); if (!cmd) return; const res = CR.run(cmd); if (res.pending) { setHistory((h) => [...h.slice(-6), { cmd, res: { ok: false, error: "index still loading…", loading: true } }]); CR.ready().then(() => setHistory((h) => h.map((e, i) => i === h.length - 1 && e.res.loading ? { cmd, res: CR.run(cmd) } : e))); return; } setHistory((h) => [...h.slice(-6), { cmd, res }]); }; useEffectP(() => { const off = CR.onStatus(setSt); CR.load(); CR.ready().then(() => { if (!didInit.current) { didInit.current = true; runCmd("crabcc sym useState"); } }); return off; }, []); useEffectP(() => { if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight; }, [history]); const onKey = (e) => { if (e.key === "Enter") runCmd(); }; const pick = (ex) => { setValue(ex); runCmd(ex); if (inputRef.current) inputRef.current.focus(); }; const loading = st.state === "loading" || st.state === "idle"; return (

crabcc — facebook/react@{st.ref || "v18.3.1"} {" · "}{st.stats ? st.stats.symbols : "…"} symbols {loading ? "streaming index…" : "indexed · " + st.ms + "ms"}

{history.length === 0 && (

indexing facebook/react@v18.3.1 from the edge…

)} {history.map((h, i) => (

$ {h.cmd.replace(/^\$\s*/, "")}

{h.res.ok ? ( <>

{jsonNodes(h.res.result).map((n, j) => {n})}

{Array.isArray(h.res.result) ? h.res.result.length + " result" + (h.res.result.length === 1 ? "" : "s") + " · " : ""}{h.res.meta.ms}ms · {h.res.meta.bytes} bytes

) : (

{h.res.loading ? {h.res.error} : <>error: {h.res.error}}

)}

))}

$ setValue(e.target.value)} onKeyDown={onKey} aria-label="crabcc command" />

{loading ? "smart-loading" : "index ready"}

{st.stats ? st.stats.symbols + " symbols · " + st.stats.files + " files · " + st.stats.edges + " edges" : "facebook/react"}

try

{CR.examples.map((ex) => ( ))}

120KB index served from the edge (R2 + Worker, cached), queried in your browser. supports --count, --files-only.

); } Object.assign(window, { Playground, jsonNodes });