Codemirror Cf-container Demo

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_275":276,"_277":278},"routes/_app.x.$handle.$name",{"_95":94,"_32":43,"_103":85,"_27":52,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":47,"_117":118,"_119":25,"_120":-5,"_121":-5,"_122":123},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_32":43,"_36":44,"_45":-5,"_46":47,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":25,"_58":25,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":47},"version",48,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":35,"_36":37,"_38":14,"_39":40,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",true,"deletedHere","path","index.html","latestPath","fileId","c29f460a-786a-11f0-a0c9-0224a6c84d84","name","fileType","content","\n\n \n \n \n \n Codemirror Cf-container Demo\n \n \n

\n \n \n\n","createdAt",["D",1755107002600],"branchVersion","branchId","bab466dc-786a-11f0-8ac5-0224a6c84d84","id","bab404bc-786a-11f0-8ac5-0224a6c84d84","EditorDemo",["D",1755106024266],"deletedAt","legacyEnvVars",false,"privacy","public","httpPrivacy","description","","imageUrl","4555dd0e-707e-4444-acd3-049d206eb1db","pinnedFileId","fae5c6ba-786a-11f0-bb07-0224a6c84d84","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","bced381e-9ab2-4b55-929d-e7c5064f7f38","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":47},"branch",{"_13":84,"_32":85,"_41":40,"_86":42,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":43,"_93":94},"isOwned",75,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","wolf","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJvVXpPVUZRTjZGTGd2Q2t4c0RRdFpNZWJ5UCJ9","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_41":42,"_32":43,"_36":271,"_45":-5,"_46":47,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":25,"_58":25,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":272,"_79":273,"_81":274,"_83":47},"tree",[162,164,175],"files",[162,163,164,165,166,167,168,169,170,171,172,173,174,175],"counts",{"_151":61,"_152":153,"_154":61,"_155":156,"_157":158},"contents",[124,125,126],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_41":145,"_32":146,"_30":147,"_130":-5,"_39":40,"_38":148,"_132":25,"_36":149,"_13":61,"_33":143,"_34":-5,"_24":47,"_136":-5,"_27":150},{"_41":138,"_32":139,"_30":140,"_130":-5,"_39":40,"_38":141,"_132":25,"_36":142,"_13":61,"_33":143,"_34":-5,"_24":47,"_136":-5,"_27":144},{"_41":127,"_32":128,"_30":129,"_130":-5,"_39":40,"_38":131,"_132":47,"_36":133,"_13":134,"_33":20,"_34":135,"_24":47,"_136":-5,"_27":137},"95485168-786c-11f0-968e-0224a6c84d84","README.md","c23ae8c2-786a-11f0-98a1-0224a6c84d84","parentId",45,"latest",["D",1755106820471],2,"# VTLSP Demo - Val Town Port\n\nThis is a Val Town port of the VTLSP (Val Town Language Server Protocol) demo. It provides a CodeMirror-based editor with language server support.\n\n## Structure\n\n- `backend/` - Hono server that serves the frontend and handles WebSocket connections\n- `frontend/` - React-based CodeMirror editor with language server integration\n - `components/` - React components for language server UI elements\n - `App.tsx` - Main application component\n - `main.tsx` - React entry point\n - `useLsCodemirror.tsx` - Language server integration hook\n - `index.html` - HTML template\n- `shared/` - Ready for shared utilities and types\n\n## Features\n\n- CodeMirror editor with TypeScript support\n- Language server integration via WebSocket\n- Real-time code completion, hover information, and diagnostics\n- Signature help and context menus\n- Clean component structure for easy extension\n\n## Development\n\nThe main entry point is `backend/index.ts` which serves both the frontend and handles WebSocket connections for the language server.\n\n## Original\n\nThis is ported from the Cloudflare Workers version at https://github.com/val-town/vtlsp","label",[128],"ff5cdda0-786a-11f0-a38f-0224a6c84d84","frontend","d01c2199-6541-4461-87c8-43f6719d2f5b",30,["D",1755106139451],"directory",[139],"fae5cfa2-786a-11f0-bb07-0224a6c84d84","backend","799c5210-b712-4f34-98a2-fab6869248c6",28,["D",1755106131960],[146],"pulls","branches",1,"forks","envVars",{"_159":61,"_161":61},"connections",{"_159":61,"_160":61},"count","unfilledCount","emptyCount",{"_41":145,"_32":146,"_30":147,"_130":-5,"_39":40,"_38":148,"_132":25,"_36":268,"_13":61,"_33":143,"_34":-5,"_24":47,"_136":-5,"_177":269,"_27":270},{"_41":260,"_32":261,"_30":56,"_130":147,"_39":40,"_38":262,"_132":25,"_36":263,"_13":153,"_33":264,"_34":265,"_24":47,"_136":-5,"_177":266,"_27":267},{"_41":138,"_32":139,"_30":140,"_130":-5,"_39":40,"_38":141,"_132":25,"_36":257,"_13":61,"_33":143,"_34":-5,"_24":47,"_136":-5,"_177":258,"_27":259},{"_41":253,"_32":220,"_30":214,"_130":140,"_39":40,"_38":248,"_132":25,"_36":254,"_13":61,"_33":143,"_34":-5,"_24":47,"_136":-5,"_177":255,"_27":256},{"_41":245,"_32":246,"_30":247,"_130":214,"_39":40,"_38":248,"_132":47,"_36":249,"_13":61,"_33":185,"_34":250,"_24":47,"_136":-5,"_177":251,"_27":252},{"_41":237,"_32":238,"_30":239,"_130":214,"_39":40,"_38":240,"_132":25,"_36":241,"_13":61,"_33":185,"_34":242,"_24":47,"_136":-5,"_177":243,"_27":244},{"_41":229,"_32":230,"_30":231,"_130":214,"_39":40,"_38":232,"_132":25,"_36":233,"_13":61,"_33":185,"_34":234,"_24":47,"_136":-5,"_177":235,"_27":236},{"_41":221,"_32":222,"_30":223,"_130":214,"_39":40,"_38":224,"_132":25,"_36":225,"_13":61,"_33":185,"_34":226,"_24":47,"_136":-5,"_177":227,"_27":228},{"_41":211,"_32":212,"_30":213,"_130":214,"_39":40,"_38":215,"_132":25,"_36":216,"_13":61,"_33":185,"_34":217,"_24":47,"_136":-5,"_177":218,"_27":219},{"_41":203,"_32":204,"_30":205,"_130":140,"_39":40,"_38":206,"_132":47,"_36":207,"_13":153,"_33":185,"_34":208,"_24":47,"_136":-5,"_177":209,"_27":210},{"_41":197,"_32":28,"_30":198,"_130":140,"_39":40,"_38":141,"_132":25,"_36":199,"_13":61,"_33":20,"_34":200,"_24":47,"_136":-5,"_177":201,"_27":202},{"_41":189,"_32":190,"_30":191,"_130":140,"_39":40,"_38":192,"_132":47,"_36":193,"_13":61,"_33":185,"_34":194,"_24":47,"_136":-5,"_177":195,"_27":196},{"_41":180,"_32":181,"_30":182,"_130":140,"_39":40,"_38":183,"_132":47,"_36":184,"_13":153,"_33":185,"_34":186,"_24":47,"_136":-5,"_177":187,"_27":188},{"_41":127,"_32":128,"_30":129,"_130":-5,"_39":40,"_38":131,"_132":47,"_36":176,"_13":134,"_33":20,"_34":135,"_24":47,"_136":-5,"_177":178,"_27":179},["D",1755106820471],"children",[],[128],"89ccc13e-786c-11f0-b71d-0224a6c84d84","useLsCodemirror.tsx","12326b7a-786b-11f0-a0e9-0224a6c84d84",44,["D",1755106801206],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useCallback, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport { LSContents } from \"./components/LSContents.tsx\";\nimport { LSContextMenu } from \"./components/LSContextMenu.tsx\";\nimport { LSGoTo } from \"./components/LSGoTo.tsx\";\nimport { LSSignatureHelp } from \"./components/LSSignatureHelp.tsx\";\nimport { LSWindow } from \"./components/LSWindow.tsx\";\n\n// Simplified version for Val Town - the full language server integration would require\n// the @valtown/codemirror-ls package which may not be available in the Val Town environment\nexport function useLsCodemirror({ path }: { path: string }): {\n extensions: any | null;\n connect: (url: string) => Promise;\n disconnect: () => void;\n isConnected: boolean;\n} {\n const [isConnected, setIsConnected] = useState(false);\n const [websocket, setWebsocket] = useState(null);\n\n const connect = useCallback(\n async (url: string) => {\n if (websocket) {\n websocket.close();\n setWebsocket(null);\n setIsConnected(false);\n }\n\n return new Promise((resolve, reject) => {\n const ws = new WebSocket(url);\n \n ws.onopen = () => {\n console.log(\"Connected to language server\");\n setWebsocket(ws);\n setIsConnected(true);\n resolve();\n };\n \n ws.onerror = (error) => {\n console.error(\"WebSocket error:\", error);\n reject(new Error(\"Failed to connect to WebSocket\"));\n };\n \n ws.onmessage = (event) => {\n console.log(\"Received from LS:\", event.data);\n };\n \n ws.onclose = () => {\n console.log(\"WebSocket connection closed\");\n setIsConnected(false);\n setWebsocket(null);\n };\n });\n },\n [websocket],\n );\n\n const disconnect = useCallback(() => {\n if (websocket) {\n websocket.close();\n setWebsocket(null);\n setIsConnected(false);\n }\n }, [websocket]);\n\n // For now, return null extensions since we don't have the full LS integration\n // In a complete implementation, this would return the language server extensions\n const extensions = useMemo(() => {\n if (!isConnected) return null;\n \n // This would normally return the language server extensions\n // For now, we'll return null to keep the basic editor working\n return null;\n }, [isConnected, path]);\n\n return {\n extensions,\n connect,\n disconnect,\n isConnected,\n };\n}",[],[139,181],"01a3f404-786b-11f0-8191-0224a6c84d84","main.tsx","01a3f4ea-786b-11f0-8191-0224a6c84d84",31,["D",1755106143274],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { StrictMode } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./App.tsx\";\n\ncreateRoot(document.getElementById(\"root\")!).render(\n \n \n ,\n);",[],[139,190],"ff5cd0ee-786a-11f0-a38f-0224a6c84d84","ff5cd1b6-786a-11f0-a38f-0224a6c84d84",["D",1755106139451],"\n\n \n \n \n VTLSP Demo - Val Town\n \n \n \n \n

\n \n \n",[],[139,28],"3cb40dd0-786c-11f0-94ee-0224a6c84d84","App.tsx","0aed7a76-786b-11f0-8de2-0224a6c84d84",35,["D",1755106671837],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { javascript } from \"https://esm.sh/@codemirror/lang-javascript@6.2.4?deps=@codemirror/state@6.5.2\";\nimport { EditorState } from \"https://esm.sh/@codemirror/state@6.5.2\";\nimport { basicSetup, EditorView } from \"https://esm.sh/codemirror@6.0.2?deps=@codemirror/state@6.5.2\";\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { useLsCodemirror } from \"./useLsCodemirror.tsx\";\n\nconst DEFAULT_URL_BASE = () => `wss://${window.location.hostname}/lsp?session=${crypto.randomUUID()}`;\n\nexport default function App() {\n const editor = useRef(null);\n const view = useRef(null);\n const [url, setUrl] = useState(DEFAULT_URL_BASE());\n const [isConnecting, setIsConnecting] = useState(false);\n const [error, setError] = useState(null);\n\n const {\n extensions: lsExtensions,\n connect,\n disconnect,\n isConnected,\n } = useLsCodemirror({\n path: \"/demo.ts\",\n });\n\n useEffect(() => {\n if (editor.current && !view.current && lsExtensions) {\n const state = EditorState.create({\n doc: \"console.log('hello world!');\\n\\n\\n\",\n extensions: [\n basicSetup,\n javascript({ jsx: true, typescript: true }),\n lsExtensions,\n EditorView.updateListener.of((update) => {\n console.log(\"Editor updated:\", update);\n }),\n ],\n });\n\n view.current = new EditorView({\n state,\n parent: editor.current,\n });\n }\n\n return () => {\n if (view.current) {\n view.current.destroy();\n view.current = null;\n }\n };\n }, [lsExtensions]);\n\n const handleConnect = async () => {\n if (isConnected) {\n disconnect();\n setError(null);\n return;\n }\n\n setIsConnecting(true);\n setError(null);\n try {\n await connect(url);\n } catch (error) {\n setError(\n `Connection failed ${error instanceof Error ? `: ${error.message}` : \"\"}`,\n );\n } finally {\n setIsConnecting(false);\n }\n };\n\n return (\n

\n setUrl(e.target.value)}\n placeholder=\"WebSocket URL\"\n className=\"flex-1 px-2 py-1 border rounded text-sm\"\n disabled={isConnecting}\n />\n \n {isConnecting ? \"...\" : isConnected ? \"Disconnect\" : \"Connect\"}\n \n {error && {error}}\n

\n );\n}",[],[139,204],"86d8772a-786c-11f0-a1e9-0224a6c84d84","LSWindow.tsx","86d877f2-786c-11f0-a1e9-0224a6c84d84","b9815a24-5994-4006-8c78-e588ac098e77",43,["D",1755106796254],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { type JSX } from \"https://esm.sh/react@18.2.0\";\n\n// Simplified version for Val Town\nexport function LSWindow({\n message,\n onDismiss,\n}: {\n message: any;\n onDismiss: () => void;\n}): JSX.Element {\n const getMessageTypeColor = (type: number) => {\n switch (type) {\n case 1: return \"text-red-600 bg-red-50 border-red-200\"; // Error\n case 2: return \"text-yellow-600 bg-yellow-50 border-yellow-200\"; // Warning\n case 3: return \"text-blue-600 bg-blue-50 border-blue-200\"; // Info\n case 4: return \"text-gray-600 bg-gray-50 border-gray-200\"; // Log\n default: return \"text-gray-600 bg-gray-50 border-gray-200\";\n }\n };\n\n return (\n

\n {message.type === 1 ? \"Error\" : \n message.type === 2 ? \"Warning\" : \n message.type === 3 ? \"Info\" : \"Log\"}\n

{message.message}

\n \n ✕\n \n

\n );\n}",[],[139,220,212],"components","7c246758-786c-11f0-b7af-0224a6c84d84","LSSignatureHelp.tsx","7c24685c-786c-11f0-b7af-0224a6c84d84",40,["D",1755106778293],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { type JSX } from \"https://esm.sh/react@18.2.0\";\n\n// Simplified version for Val Town\nexport function LSSignatureHelp({\n data,\n activeParameter,\n activeSignature,\n}: {\n data: any;\n activeParameter?: number;\n activeSignature?: number;\n}): JSX.Element {\n return (\n

\n Signature Help (simplified for Val Town)\n

\n Active signature: {activeSignature}, Active parameter: {activeParameter}\n

\n );\n}",[],[139,220,222],"82acb3e6-786c-11f0-b0d8-0224a6c84d84","LSGoTo.tsx","82acb490-786c-11f0-b0d8-0224a6c84d84",42,["D",1755106789256],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { type JSX } from \"https://esm.sh/react@18.2.0\";\n\n// Simplified version for Val Town\nexport function LSGoTo({\n onClose,\n locations,\n goTo,\n kind,\n}: {\n onClose: () => void;\n locations: any[];\n goTo: (location: any) => void;\n kind: string;\n}): JSX.Element {\n return (\n

{kind}

\n \n ✕\n \n

\n {locations.map((location, index) => (\n goTo(location)}\n >\n Location {index + 1}\n

\n ))}\n

\n );\n}",[],[139,220,230],"7ec302a8-786c-11f0-bdc8-0224a6c84d84","LSContextMenu.tsx","7ec3037a-786c-11f0-bdc8-0224a6c84d84",41,["D",1755106782691],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { type JSX } from \"https://esm.sh/react@18.2.0\";\n\n// Simplified version for Val Town\nexport function LSContextMenu(callbacks: any): JSX.Element {\n return (\n

\n Go to Definition\n

\n Find References\n

\n Rename Symbol\n

\n );\n}",[],[139,220,238],"1932181c-786b-11f0-b56e-0224a6c84d84","LSContents.tsx","193218ee-786b-11f0-b56e-0224a6c84d84",34,["D",1755106182792],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Fragment, type JSX } from \"https://esm.sh/react@18.2.0\";\n\n// Simplified version for Val Town - without the full language server protocol types\nexport function LSContents({\n contents,\n className = \"\",\n}: {\n contents: string | any;\n className?: string;\n}): JSX.Element {\n if (typeof contents === \"string\") {\n return ;\n }\n \n // For now, just render as string\n return ;\n}\n\nfunction MarkdownContent({\n content,\n className: additionalClassNames,\n}: {\n content: string;\n className?: string;\n}) {\n return (\n

\n {content}\n

\n );\n}\n\nexport function LowLightCodeBlock({\n code,\n language,\n className = \"\",\n}: {\n code: string;\n language: string;\n className?: string;\n}) {\n return (\n \n {code}\n \n );\n}",[],[139,220,246],"193221f4-786b-11f0-b56e-0224a6c84d84",["D",1755106182792],[166,167,168,169,170],[139,220],["D",1755106139451],[165,171,172,173,174],[139],"fcc704bc-786a-11f0-a2ed-0224a6c84d84","index.ts",29,["D",1755106135103],"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Hono } from \"https://esm.sh/hono@4.9.0\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err) => Promise.reject(err));\n\n// Serve frontend files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve the main app\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// WebSocket endpoint for language server\napp.get(\"/lsp\", (c) => {\n const { socket, response } = Deno.upgradeWebSocket(c.req.raw);\n \n socket.onopen = () => {\n console.log(\"WebSocket connection opened\");\n };\n \n socket.onmessage = (event) => {\n console.log(\"Received message:\", event.data);\n // Echo back for now - in a real implementation this would connect to a language server\n socket.send(event.data);\n };\n \n socket.onclose = () => {\n console.log(\"WebSocket connection closed\");\n };\n \n socket.onerror = (error) => {\n console.error(\"WebSocket error:\", error);\n };\n \n return response;\n});\n\nexport default app.fetch;",[],[146,261],["D",1755106131960],[163],[146],["D",1755106024266],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":47},{"_13":84,"_32":85,"_41":40,"_86":42,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":43,"_93":94},"ctx",{"_77":-5,"_121":308,"_309":310,"_311":312,"_313":47,"_314":47,"_315":47,"_316":25,"_317":-5,"_318":-7,"_319":-7,"_320":61,"_321":47,"_322":47,"_323":-5,"_324":47,"_325":47,"_326":47,"_327":-5},"ENV",{"_279":280,"_281":282,"_283":85,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","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","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v48