[{"_1":2,"_303":-5,"_304":-5},"loaderData",{"_3":4,"_91":92,"_231":232},"root",{"_5":6,"_34":35,"_64":65},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":22,"_29":22,"_30":22,"_31":32,"_33":22},"auth",{"_9":10,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":-5,"_20":-5,"_21":22},"tokenType","session_token","sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","ENV",{"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","e3ca0a77ab07ff2ce3097208ffd6aa0e378d3c47","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","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_66":67},"__internal_clerk_state",{"_68":69,"_70":45,"_71":72,"_73":72,"_74":22,"_75":72,"_76":72,"_77":72,"_78":72,"_79":80,"_89":22,"_90":22},"__clerk_ssr_state",{"_9":10,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":-5,"_20":-5,"_21":22},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_81":22,"_21":22,"_82":72,"_83":84,"_85":72,"_86":45,"_87":22,"_88":72},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/_app.x.$handle.$name",{"_93":94,"_95":96,"_97":43,"_98":99,"_100":-7,"_101":102,"_147":148,"_211":212,"_213":214,"_220":221,"_163":222,"_225":-5,"_226":-5,"_227":22,"_228":22,"_229":230},"handle","maxm","name","codemirrorTs","branchName","path","worker","version","project",{"_103":104,"_95":96,"_105":106,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":128,"_131":132,"_134":135,"_146":22},"id","7eeba31a-e3f3-11ef-a270-e6cdfca9ef9f","createdAt",["D",1738782041768],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","418c1e39-eb48-4f2f-8c97-122ece94631c","pinnedFileId","pinPreview","screenshotVersion","likeCount","c1e7642a-74cc-4d69-8652-20abbdeaa94e","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_93":94,"_129":130},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJnTEtkSHlOMWxWZm1GRHdKYUVTNklYM3FpdiJ9","org",{"_93":94,"_133":130},"avatar","branch",{"_100":136,"_95":43,"_103":137,"_138":104,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":96,"_145":94},54,"7eec0756-e3f3-11ef-a270-e6cdfca9ef9f","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","tree",[149,171,181,192,202],{"_103":150,"_95":151,"_152":153,"_154":-5,"_155":137,"_156":157,"_158":159,"_105":160,"_100":161,"_162":163,"_164":165,"_166":22,"_167":-5,"_168":169,"_98":170},"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","label","children",[],[151],{"_103":172,"_95":173,"_152":174,"_154":-5,"_155":137,"_156":136,"_158":159,"_105":175,"_100":176,"_162":177,"_164":178,"_166":22,"_167":-5,"_168":179,"_98":180},"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// ",[],[173],{"_103":182,"_95":183,"_152":184,"_154":-5,"_155":137,"_156":185,"_158":159,"_105":186,"_100":187,"_162":188,"_164":189,"_166":22,"_167":-5,"_168":190,"_98":191},"93e2510e-e58a-11ef-ab6d-e6cdfca9ef9f","demo","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

maxm

codemirrorTs

History for worker