[{"_1":2,"_312":-5,"_313":-5},"loaderData",{"_3":4,"_91":92,"_210":211,"_311":-5},"root",{"_5":6,"_32":33,"_58":59,"_89":90},"ctx",{"_7":8,"_18":19,"_20":-5,"_21":22,"_23":24,"_25":26,"_27":26,"_28":29,"_30":31},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"sessionClaims","sessionId","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","environmentVariableKeys",[],"user","preferences_keybindings","default","preferences_theme","light","preferences_fixers",false,"preferences_copilot","preferences_model","claude-3-5-haiku-20241022","notification_count",0,"ENV",{"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","fa80b67e1f763bfb4b247c3f5ca4f0b0730f3f5c","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","API_URL","https://api.val.town","WORKER_FINGERPRINT","799d99f2805306c2714a7cfefbeae178","clerkState",{"_60":61},"__internal_clerk_state",{"_62":63,"_64":43,"_65":66,"_67":66,"_68":26,"_69":66,"_70":66,"_71":66,"_72":66,"_73":66,"_74":66,"_75":66,"_76":66,"_77":78,"_87":26,"_88":26},"__clerk_ssr_state",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_79":26,"_80":66,"_81":82,"_83":66,"_84":43,"_85":26,"_86":66},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","remixVersion",2,"routes/_app.x.$handle.$name",{"_93":94,"_95":96,"_97":41,"_98":99,"_100":-7,"_101":102,"_134":135,"_197":198,"_204":205,"_150":206,"_209":-5},"handle","maxm","name","codemirrorTs","branchName","path","demo","version","project",{"_103":104,"_95":96,"_105":106,"_107":-5,"_108":109,"_110":-5,"_111":-5,"_11":112,"_113":-5,"_114":26,"_115":116,"_117":116,"_118":119,"_120":119,"_121":119,"_122":116,"_123":26,"_20":124,"_127":128},"id","7eeba31a-e3f3-11ef-a270-e6cdfca9ef9f","createdAt",["D",1738782041768],"deletedAt","privacy","public","description","imageUrl","418c1e39-eb48-4f2f-8c97-122ece94631c","pinnedFileId","pinPreview","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","isOwned",{"_93":94,"_125":126},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJnTEtkSHlOMWxWZm1GRHdKYUVTNklYM3FpdiJ9","branch",{"_100":129,"_95":41,"_103":130,"_131":104,"_132":-5,"_133":-5},54,"7eec0756-e3f3-11ef-a270-e6cdfca9ef9f","projectId","forkedBranchId","forkedBranchVersion","tree",[136,157,167,177,187],{"_103":137,"_95":138,"_139":140,"_141":-5,"_142":130,"_143":144,"_145":146,"_105":147,"_100":148,"_149":150,"_151":152,"_153":26,"_154":155,"_98":156},"29a79ff6-e3f5-11ef-ab2b-e6cdfca9ef9f","README.md","fileId","80b017bc-e3f3-11ef-b8b7-e6cdfca9ef9f","parentId","branchId","branchVersion",29,"latest",true,["D",1738782757704],3,"fileType","file","content","# Codemirror TS\n\n\n![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/4534f57c-96cc-4eba-bc51-5b3b52e78500/public)\n\n\nWorking in the browser, using a script val import, esm.sh, and an importmap.\n\nCheck out the [demo](https://www.val.town/x/maxm/codemirrorTs/code/demo) to see how it works.","deleted","children",[],[138],{"_103":158,"_95":159,"_139":160,"_141":-5,"_142":130,"_143":129,"_145":146,"_105":161,"_100":162,"_149":163,"_151":164,"_153":26,"_154":165,"_98":166},"5a6f500e-e664-11ef-82f7-e6cdfca9ef9f","codemirror","a28df836-e3f3-11ef-9fd7-e6cdfca9ef9f",["D",1739050416005],15,"script","import { depq, importMap } from \"./importMap\";\n\nimport { autocompletion } from \"https://esm.sh/@codemirror/autocomplete\";\nimport { javascript } from \"https://esm.sh/@codemirror/lang-javascript\";\nimport { Compartment } from \"https://esm.sh/@codemirror/state\";\nimport { tsAutocomplete, tsFacet, tsHover, tsLinter, tsSync } from \"https://esm.sh/@valtown/codemirror-ts\";\nimport { type WorkerShape } from \"https://esm.sh/@valtown/codemirror-ts/worker\";\nimport { basicSetup, EditorView } from \"https://esm.sh/codemirror\";\nimport * as Comlink from \"https://esm.sh/comlink\";\n\nconst innerWorker = new Worker(\"./worker.ts\", {\n type: \"module\",\n});\nconst worker = Comlink.wrap(innerWorker);\n\nconst container = new Compartment();\n\nfor (const textarea of document.querySelectorAll(\"form textarea.for-codemirror\")) {\n const form = textarea.closest(\"form\");\n const submitButton = form.querySelector(\"button[type=\\\"submit\\\"], input[type=\\\"submit\\\"]\");\n textarea.setAttribute(\"hidden\", \"true\");\n const parent = textarea.parentElement!;\n const newDiv = document.createElement(\"div\");\n parent.insertBefore(newDiv, textarea);\n\n const editor = new EditorView({\n doc: textarea.value,\n extensions: [\n basicSetup,\n javascript({\n typescript: true,\n jsx: true,\n }),\n container.of([]),\n ],\n parent: newDiv,\n });\n\n worker.initialize().then(() => {\n editor.dispatch({\n effects: container.reconfigure([\n tsFacet.of({\n path: \"/index.tsx\",\n worker,\n debug(...args: unknown[]) {\n console.log(...args);\n },\n }),\n tsSync(),\n tsLinter(),\n autocompletion({\n override: [tsAutocomplete()],\n }),\n tsHover(),\n ]),\n });\n });\n\n const syncEditor = (e) => {\n textarea.value = editor.state.sliceDoc();\n console.log(textarea.value);\n };\n submitButton.addEventListener(\"click\", syncEditor);\n}\n// ",[],[159],{"_103":168,"_95":99,"_139":169,"_141":-5,"_142":130,"_143":170,"_145":146,"_105":171,"_100":172,"_149":173,"_151":174,"_153":26,"_154":175,"_98":176},"93e2510e-e58a-11ef-ab6d-e6cdfca9ef9f","e3a2fae2-e3f3-11ef-ab2b-e6cdfca9ef9f",43,["D",1738956882102],14,"http","/** @jsxImportSource https://esm.sh/react */\nimport { renderToString } from \"npm:react-dom/server\";\nimport { importMap } from \"./importMap\";\nexport default async function(req: Request): Promise {\n const u = new URL(req.url);\n\n // WebWorker rules block us from loading the worker from esm.town\n // if this script is not on that domain. Proxy it.\n if (u.pathname === \"/worker.ts\") {\n const js = await (await fetch(import.meta.resolve(\"./worker\"))).text();\n return new Response(js, {\n headers: {\n \"Content-Type\": \"application/javascript\",\n // Make sure that our servers think this is a browser\n // requesting this for its usage, otherwise we'll get TypeScript\n \"User-Agent\": \"nothing\",\n \"Accept\": \"application/javascript\",\n },\n });\n }\n\n return new Response(\n renderToString(\n <>\n \n \n \n \n \n \n \n \n

History for demo