[{"_1":2,"_261":-5,"_262":-5},"loaderData",{"_3":4,"_91":92,"_253":254},"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","41471b07d0a238c2a2cac75d49797b325b47d920","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":-7,"_98":72,"_99":-7,"_100":101,"_150":151,"_208":209,"_210":211,"_219":220,"_165":-5,"_236":237,"_241":242,"_249":22,"_250":22,"_251":252},"handle","tmcw","name","codemirrorTs","branchName","path","version","project",{"_102":103,"_95":96,"_104":105,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":32,"_16":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":127,"_130":131,"_133":134,"_149":22},"id","3eb4b22a-e595-11ef-83f8-e6cdfca9ef9f","createdAt",["D",1738961463648],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","19892fed-baf3-41fb-a5cc-96c80e95edec","pinnedFileId","pinPreview","screenshotVersion","likeCount","f407f111-fdbb-4126-923f-44aed4d9e9ad","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_93":94,"_128":129},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJUbmdsaHJKczVGSDdSS1R5MGtjVVczVFRtTi5qcGVnIn0","org",{"_93":94,"_132":129},"avatar","branch",{"_99":135,"_95":43,"_102":136,"_137":103,"_138":139,"_140":141,"_142":109,"_143":144,"_145":146,"_147":96,"_148":94},11,"3ec306cc-e595-11ef-83f8-e6cdfca9ef9f","projectId","forkedBranchId","7eec0756-e3f3-11ef-a270-e6cdfca9ef9f","forkedBranchVersion",53,"forkedProjectPrivacy","forkedProjectId","7eeba31a-e3f3-11ef-a270-e6cdfca9ef9f","forkedProjectOrgId","c1e7642a-74cc-4d69-8652-20abbdeaa94e","projectName","userHandle","isOwned","tree",[152,173,182,192,200],{"_102":153,"_95":154,"_155":156,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":163,"_99":32,"_164":165,"_166":167,"_168":22,"_169":-5,"_170":171,"_98":172},"3ec86dce-e595-11ef-83f8-e6cdfca9ef9f","README.md","fileId","60daab20-e81d-4ace-85ac-a543fb8964ec","parentId","branchId","branchVersion",1,"latest",true,["D",1738961463648],"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",[],[154],{"_102":174,"_95":175,"_155":176,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":177,"_99":32,"_164":178,"_166":179,"_168":22,"_169":-5,"_170":180,"_98":181},"3ec88c50-e595-11ef-83f8-e6cdfca9ef9f","codemirror","5bddaf8a-a697-40e7-a0d1-3486fe3a3d4d",["D",1738961463648],"script","import build from \"https://esm.sh/build\"\nimport { 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// ",[],[175],{"_102":183,"_95":184,"_155":185,"_157":-5,"_158":136,"_159":135,"_161":162,"_104":186,"_99":187,"_164":188,"_166":189,"_168":22,"_169":-5,"_170":190,"_98":191},"563f3268-e8be-11ef-88c1-e6cdfca9ef9f","demo","578d05ca-b2a3-4b62-b9e7-569bb42c25b2",["D",1739308966014],10,"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\"), {\n headers: {\n \"User-Agent\": \"None\",\n },\n })).text()\n return new Response(js, {\n headers: {\n \"Content-Type\": \"application/javascript\",\n },\n })\n }\n\n return new Response(\n renderToString(\n <>\n \n

tmcw

codemirrorTs

Environment variables