VTLSP Demo - Val Town

\n \n \n",[],[88,99],"f1f5ac24-7873-11f0-bac5-0224a6c84d84","App.tsx","0aed7a76-786b-11f0-8de2-0224a6c84d84",75,["D",1755109982435],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\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 { 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 = () =>\n `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) {\n const extensions = [\n javascript({ jsx: true, typescript: true }),\n EditorView.updateListener.of((update) => {\n console.log(\"Editor updated:\", update);\n }),\n ];\n\n // Add language server extensions if available\n if (lsExtensions) {\n extensions.push(lsExtensions);\n }\n\n const state = EditorState.create({\n doc: \"console.log('hello world!');\\n\\n\\n\",\n extensions,\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}",[],[88,109],"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}",[],[88,125,117],"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}",[],[88,125,127],"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}",[],[88,125,135],"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}",[],[88,125,143],"80438d1c-786e-11f0-91ee-0224a6c84d84","LSContents.tsx","193218ee-786b-11f0-b56e-0224a6c84d84",60,["D",1755107644202],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\n// import { isLSPMarkupContent } from \"https://esm.sh/@valtown/codemirror-ls\";\nimport { toJsxRuntime } from \"https://esm.sh/hast-util-to-jsx-runtime\";\nimport typescript from \"https://esm.sh/highlight.js/lib/languages/typescript\";\nimport { createLowlight } from \"https://esm.sh/lowlight\";\nimport { Fragment, type JSX, jsx, jsxs } from \"https://esm.sh/react/jsx-runtime\";\nimport ReactMarkdown from \"https://esm.sh/react-markdown\";\nimport rehypeRaw from \"https://esm.sh/rehype-raw\";\nimport type * as LSP from \"https://esm.sh/vscode-languageserver-protocol\";\nconst isLSPMarkupContent = () => true;\n\nexport function LSContents({\n contents,\n className = \"\",\n}: {\n contents: string | LSP.MarkupContent | LSP.MarkedString | LSP.MarkedString[];\n className?: string;\n}): JSX.Element {\n if (typeof contents === \"string\") {\n return ;\n } else if (isLSPMarkupContent(contents)) {\n return ;\n } else if (Array.isArray(contents)) {\n return (\n

\n {contents.map((content) => {\n if (typeof content === \"string\") {\n return (\n \n );\n }\n if (isLSPMarkupContent(content)) {\n if (content.kind === \"markdown\") {\n return (\n \n );\n }\n\n return (\n

\n \n

\n );\n }\n return null;\n })}\n

\n );\n } else {\n // Handle MarkedString case - it has value and optional language\n if (\"language\" in contents && contents.language) {\n return ;\n }\n return ;\n }\n}\n\nfunction MarkdownContent({\n content,\n className: additionalClassNames,\n}: {\n content: string;\n className?: string;\n}) {\n return (\n \n {\n // @ts-ignore: react types don't type these.\n toJsxRuntime(tree, { Fragment, jsx, jsxs })\n }\n \n );\n } catch {\n // Fallback if language not supported\n return (\n \n {children}\n \n );\n }\n }\n\n return (\n \n {children}\n \n );\n },\n }}\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 try {\n const highlightLang = [\"typescript\", \"typescriptreact\"].includes(language)\n ? \"typescript\"\n : language || \"plaintext\";\n const tree = lowlight.highlight(highlightLang, code);\n\n return (\n

\n        {\n          // @ts-ignore: react types don't type these.\n          toJsxRuntime(tree, { Fragment, jsx, jsxs })\n        }\n

\n );\n } catch {\n return (\n \n {code}\n \n );\n }\n}\n\n// biome-ignore format: Don't split up these into multiple lines\nconst allowedTags = [\n \"h1\",\n \"h2\",\n \"h3\",\n \"h4\",\n \"h5\",\n \"h6\",\n \"div\",\n \"span\",\n \"p\",\n \"br\",\n \"hr\",\n \"ul\",\n \"ol\",\n \"li\",\n \"dl\",\n \"dt\",\n \"dd\",\n \"table\",\n \"thead\",\n \"tbody\",\n \"tr\",\n \"th\",\n \"td\",\n \"blockquote\",\n \"pre\",\n \"code\",\n \"em\",\n \"strong\",\n \"a\",\n \"img\",\n];\n\nconst lowlight = createLowlight();\nlowlight.register({ typescript });",[],[88,125,151],"193221f4-786b-11f0-b56e-0224a6c84d84",34,["D",1755106182792],"directory",[68,69,70,71,72],[88,125],"ff5cdda0-786a-11f0-a38f-0224a6c84d84",["D",1755106139451],[67,73,74,75,76],[88],"fae5cfa2-786a-11f0-bb07-0224a6c84d84",28,["D",1755106131960],[31],[64],{"_39":168,"_13":64,"_42":45,"_44":-5,"_46":47,"_48":169,"_50":38,"_51":177,"_16":103,"_54":161,"_56":-5,"_58":35,"_59":-5,"_62":178},{"_39":164,"_13":88,"_42":80,"_44":-5,"_46":47,"_48":101,"_50":38,"_51":175,"_16":103,"_54":161,"_56":-5,"_58":35,"_59":-5,"_62":176},["D",1755106139451],[88],["D",1755106131960],[64],"pulls","branches","forks","envVars",{"_186":103,"_188":103},"connections",{"_186":103,"_187":103},"count","unfilledCount","emptyCount","bab404bc-786a-11f0-8ac5-0224a6c84d84",["D",1755106024266],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","userId","4555dd0e-707e-4444-acd3-049d206eb1db","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","bced381e-9ab2-4b55-929d-e7c5064f7f38","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_243":239},"org",{"_11":12,"_237":-5,"_238":239,"_199":200,"_240":241,"_242":35},"branch",{"_16":111,"_13":228,"_39":47,"_229":189,"_230":-5,"_231":-5,"_232":-5,"_233":-5,"_234":-5,"_235":14,"_236":12},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJvVXpPVUZRTjZGTGd2Q2t4c0RRdFpNZWJ5UCJ9","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_39":189,"_13":14,"_51":306,"_191":-5,"_192":35,"_193":194,"_195":194,"_196":197,"_198":-5,"_199":200,"_201":43,"_202":38,"_203":38,"_204":-5,"_205":103,"_206":207,"_208":-5,"_209":-5,"_210":-5,"_211":-5,"_212":213,"_214":213,"_215":216,"_217":216,"_218":216,"_219":213,"_220":213,"_221":307,"_223":308,"_225":309,"_227":35},"tree",[267,269],[267,268,269,270,271,272,273,274,275,276,277,278,279],{"_179":103,"_180":53,"_181":103,"_182":265,"_184":266},[261,262],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_39":168,"_13":64,"_42":45,"_44":-5,"_46":47,"_48":169,"_50":38,"_51":177,"_16":103,"_54":161,"_56":-5,"_58":35,"_59":-5,"_62":264},{"_39":164,"_13":88,"_42":80,"_44":-5,"_46":47,"_48":101,"_50":38,"_51":175,"_16":103,"_54":161,"_56":-5,"_58":35,"_59":-5,"_62":263},[88],[64],{"_186":103,"_188":103},{"_186":103,"_187":103},{"_39":168,"_13":64,"_42":45,"_44":-5,"_46":47,"_48":169,"_50":38,"_51":170,"_16":103,"_54":161,"_56":-5,"_58":35,"_59":-5,"_60":304,"_62":305},{"_39":40,"_13":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":38,"_51":52,"_16":53,"_54":55,"_56":57,"_58":35,"_59":-5,"_60":302,"_62":303},{"_39":164,"_13":88,"_42":80,"_44":-5,"_46":47,"_48":101,"_50":38,"_51":165,"_16":103,"_54":161,"_56":-5,"_58":35,"_59":-5,"_60":300,"_62":301},{"_39":158,"_13":125,"_42":119,"_44":80,"_46":47,"_48":159,"_50":38,"_51":160,"_16":103,"_54":161,"_56":-5,"_58":35,"_59":-5,"_60":298,"_62":299},{"_39":150,"_13":151,"_42":152,"_44":119,"_46":47,"_48":153,"_50":38,"_51":154,"_16":94,"_54":84,"_56":155,"_58":35,"_59":-5,"_60":296,"_62":297},{"_39":142,"_13":143,"_42":144,"_44":119,"_46":47,"_48":145,"_50":38,"_51":146,"_16":103,"_54":84,"_56":147,"_58":35,"_59":-5,"_60":294,"_62":295},{"_39":134,"_13":135,"_42":136,"_44":119,"_46":47,"_48":137,"_50":38,"_51":138,"_16":103,"_54":84,"_56":139,"_58":35,"_59":-5,"_60":292,"_62":293},{"_39":126,"_13":127,"_42":128,"_44":119,"_46":47,"_48":129,"_50":38,"_51":130,"_16":103,"_54":84,"_56":131,"_58":35,"_59":-5,"_60":290,"_62":291},{"_39":116,"_13":117,"_42":118,"_44":119,"_46":47,"_48":120,"_50":38,"_51":121,"_16":103,"_54":84,"_56":122,"_58":35,"_59":-5,"_60":288,"_62":289},{"_39":108,"_13":109,"_42":110,"_44":80,"_46":47,"_48":111,"_50":38,"_51":112,"_16":83,"_54":84,"_56":113,"_58":35,"_59":-5,"_60":286,"_62":287},{"_39":98,"_13":99,"_42":100,"_44":80,"_46":47,"_48":101,"_50":38,"_51":102,"_16":103,"_54":104,"_56":105,"_58":35,"_59":-5,"_60":284,"_62":285},{"_39":89,"_13":90,"_42":91,"_44":80,"_46":47,"_48":92,"_50":38,"_51":93,"_16":94,"_54":84,"_56":95,"_58":35,"_59":-5,"_60":282,"_62":283},{"_39":77,"_13":78,"_42":79,"_44":80,"_46":47,"_48":81,"_50":38,"_51":82,"_16":83,"_54":84,"_56":85,"_58":35,"_59":-5,"_60":280,"_62":281},[],[88,78],[],[88,90],[],[88,99],[],[88,109],[],[88,125,117],[],[88,125,127],[],[88,125,135],[],[88,125,143],[],[88,125,151],[271,272,273,274,275],[88,125],[270,276,277,278,279],[88],[],[64,41],[268],[64],["D",1755106024266],{"_11":12,"_243":239},{"_11":12,"_237":-5,"_238":239,"_199":200,"_240":241,"_242":35},{"_16":111,"_13":228,"_39":47,"_229":189,"_230":-5,"_231":-5,"_232":-5,"_233":-5,"_234":-5,"_235":14,"_236":12},"ctx",{"_221":-5,"_258":343,"_344":345,"_346":347,"_348":35,"_349":35,"_350":35,"_351":38,"_352":-5,"_353":-7,"_354":-7,"_355":103,"_356":35,"_357":35,"_358":-5,"_359":35,"_360":35,"_361":35,"_362":-5},"ENV",{"_314":315,"_316":317,"_318":228,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342},"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"]

wolf

EditorDemo