VTLSP Demo - Val Town

\n \n \n",[],[67,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}",[],[67,106],"193221f4-786b-11f0-b56e-0224a6c84d84","components","b9815a24-5994-4006-8c78-e588ac098e77",34,["D",1755106182792],[120,121,122,123,124],[67,114],{"_34":157,"_13":158,"_37":159,"_39":115,"_41":42,"_43":160,"_45":46,"_47":161,"_17":94,"_50":85,"_52":162,"_54":55,"_56":-5,"_71":163,"_18":164},{"_34":149,"_13":150,"_37":151,"_39":115,"_41":42,"_43":152,"_45":46,"_47":153,"_17":61,"_50":85,"_52":154,"_54":55,"_56":-5,"_71":155,"_18":156},{"_34":141,"_13":142,"_37":143,"_39":115,"_41":42,"_43":144,"_45":46,"_47":145,"_17":61,"_50":85,"_52":146,"_54":55,"_56":-5,"_71":147,"_18":148},{"_34":133,"_13":134,"_37":135,"_39":115,"_41":42,"_43":136,"_45":46,"_47":137,"_17":61,"_50":85,"_52":138,"_54":55,"_56":-5,"_71":139,"_18":140},{"_34":125,"_13":126,"_37":127,"_39":115,"_41":42,"_43":128,"_45":46,"_47":129,"_17":61,"_50":85,"_52":130,"_54":55,"_56":-5,"_71":131,"_18":132},"86d8772a-786c-11f0-a1e9-0224a6c84d84","LSWindow.tsx","86d877f2-786c-11f0-a1e9-0224a6c84d84",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}",[],[67,114,126],"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}",[],[67,114,134],"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}",[],[67,114,142],"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}",[],[67,114,150],"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 });",[],[67,114,158],["D",1755106131960],[168],[19],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":169,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_71":170,"_18":171},["D",1755106135103],[],[19,36],"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,"_225":221},"org",{"_11":12,"_219":-5,"_220":221,"_182":183,"_222":223,"_224":55},"branch",{"_17":108,"_13":16,"_34":42,"_211":172,"_212":-5,"_213":-5,"_214":-5,"_215":-5,"_216":-5,"_217":14,"_218":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJvVXpPVUZRTjZGTGd2Q2t4c0RRdFpNZWJ5UCJ9","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":172,"_13":14,"_47":296,"_174":-5,"_175":55,"_176":177,"_178":177,"_179":180,"_181":-5,"_182":183,"_184":38,"_185":46,"_186":46,"_187":-5,"_188":61,"_189":190,"_191":-5,"_192":-5,"_193":-5,"_194":-5,"_195":196,"_197":196,"_198":199,"_200":199,"_201":199,"_202":196,"_203":196,"_204":297,"_206":298,"_208":299,"_210":55},[257,259],"files",[257,258,259,260,261,262,263,264,265,266,267,268,269],"counts",{"_248":61,"_249":49,"_250":61,"_32":251,"_252":253},[246],{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":59,"_45":46,"_47":60,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_18":245},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":247},[19,36],"pulls","branches","forks",{"_254":61,"_256":61},"connections",{"_254":61,"_255":61},"count","unfilledCount","emptyCount",{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":59,"_45":46,"_47":165,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_71":294,"_18":295},{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":169,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_71":292,"_18":293},{"_34":66,"_13":67,"_37":68,"_39":-5,"_41":42,"_43":69,"_45":46,"_47":70,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_71":290,"_18":291},{"_34":113,"_13":114,"_37":115,"_39":68,"_41":42,"_43":116,"_45":46,"_47":117,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_71":288,"_18":289},{"_34":157,"_13":158,"_37":159,"_39":115,"_41":42,"_43":160,"_45":46,"_47":161,"_17":94,"_50":85,"_52":162,"_54":55,"_56":-5,"_71":286,"_18":287},{"_34":149,"_13":150,"_37":151,"_39":115,"_41":42,"_43":152,"_45":46,"_47":153,"_17":61,"_50":85,"_52":154,"_54":55,"_56":-5,"_71":284,"_18":285},{"_34":141,"_13":142,"_37":143,"_39":115,"_41":42,"_43":144,"_45":46,"_47":145,"_17":61,"_50":85,"_52":146,"_54":55,"_56":-5,"_71":282,"_18":283},{"_34":133,"_13":134,"_37":135,"_39":115,"_41":42,"_43":136,"_45":46,"_47":137,"_17":61,"_50":85,"_52":138,"_54":55,"_56":-5,"_71":280,"_18":281},{"_34":125,"_13":126,"_37":127,"_39":115,"_41":42,"_43":128,"_45":46,"_47":129,"_17":61,"_50":85,"_52":130,"_54":55,"_56":-5,"_71":278,"_18":279},{"_34":105,"_13":106,"_37":107,"_39":68,"_41":42,"_43":108,"_45":46,"_47":109,"_17":84,"_50":85,"_52":110,"_54":55,"_56":-5,"_71":276,"_18":277},{"_34":98,"_13":99,"_37":100,"_39":68,"_41":42,"_43":69,"_45":46,"_47":101,"_17":61,"_50":24,"_52":102,"_54":55,"_56":-5,"_71":274,"_18":275},{"_34":89,"_13":90,"_37":91,"_39":68,"_41":42,"_43":92,"_45":46,"_47":93,"_17":94,"_50":85,"_52":95,"_54":55,"_56":-5,"_71":272,"_18":273},{"_34":79,"_13":80,"_37":81,"_39":68,"_41":42,"_43":82,"_45":46,"_47":83,"_17":84,"_50":85,"_52":86,"_54":55,"_56":-5,"_71":270,"_18":271},[],[67,80],[],[67,90],[],[67,99],[],[67,106],[],[67,114,126],[],[67,114,134],[],[67,114,142],[],[67,114,150],[],[67,114,158],[261,262,263,264,265],[67,114],[260,266,267,268,269],[67],[],[19,36],[258],[19],["D",1755106024266],{"_11":12,"_225":221},{"_11":12,"_219":-5,"_220":221,"_182":183,"_222":223,"_224":55},{"_17":108,"_13":16,"_34":42,"_211":172,"_212":-5,"_213":-5,"_214":-5,"_215":-5,"_216":-5,"_217":14,"_218":12},"ctx",{"_204":-5,"_242":333,"_334":335,"_336":337,"_338":55,"_339":55,"_340":55,"_341":46,"_342":-5,"_343":-7,"_344":-7,"_345":61,"_346":55,"_347":55,"_348":-5,"_349":55,"_350":55,"_351":55,"_352":-5},"ENV",{"_304":305,"_306":307,"_308":16,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332},"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"]