[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_217":218,"_219":220},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":49,"_118":119,"_120":49,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":-5,"_57":49,"_58":-5,"_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":49},"version",38,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",true,"deletedHere","path","ls/LSManager.tsx","latestPath","fileId","99b5ffba-584c-11f0-ad1c-f69ea79377d9","name","LSManager.tsx","fileType","script","content","import { LanguageServerClient } from \"vtlsp/codemirror-lsp\";\nimport { SlidingWindowCounter } from \"app/lib/SlidingWindowCounter\";\nimport pRetry from \"p-retry\";\nimport { Sentry } from \"../../integrations/sentry\";\nimport pTimeout from \"p-timeout\";\nimport type { LanguageServerClientOptions } from \"vtlsp/codemirror-lsp/plugin/LanguageServerClient\";\nimport { LSWebSocketTransport } from \"vtlsp/codemirror-lsp/plugin/transport/websocket/LSWebSocketTransport\";\nimport { getLsUrl } from \"./lsUtils\";\n\nexport type LSConnectionState =\n | \"disconnected\"\n | \"connecting\"\n | \"connected\"\n | \"healthy\"\n | \"reconnecting\";\n\ninterface LSManagerOptions {\n heartbeatFrequency?: number; // ms\n heartbeatTimeout?: number; // ms\n onStateChange?: (state: LSConnectionState) => void;\n sessionId: string; // If not provided, a random UUID will be generated\n minReconnectionDelay?: number;\n maxReconnectionDelay?: number;\n reconnectionRetries?: number;\n reconnectionFactor?: number;\n pingPollFrequency?: number; // ms\n /** How many pings to send before giving up on waiting for the server to be ready */\n maxPingsUntilPingSucceeds?: number;\n apiKey?: string;\n logger?: (message: string, ...args: any[]) => void;\n lsClientOptions?: Partial;\n enableHeartbeat?: boolean;\n enableReconnects?: boolean;\n\n // 1011 disconnects are a sign that the LSP process has died. If we are\n // reconnecting and continuing to receive this message, we should stop,\n // because it is an indication of a bug at the LSP level with it not\n // refreshing our session. This should be fixed, but just in case, we\n // have a safety net that stops reconnects after three 1011s.\n enableRecentBadDisconnects?: boolean;\n recentBadDisconnectsDelay?: number;\n recentBadDisconnectsCodes?: Set;\n\n dontReconnectOnCodes?: Set;\n}\n\n/**\n * The LSManager manages the lsClient, which is the language server client that\n * we create plugins to use in Codemirror editors for, and all internal\n * reconnection logic. The primary consumer is useLsClient.\n *\n * The LSManager creates an LSWebSocketTransport, which implements LSITransport, which is an\n * abstract interface for language server transports that includes registering\n * things like onRequest handlers and exposing a method to send a\n * request/notification, etc.\n *\n * Importantly, it is disposable, so when it disconnects we can manage creating\n * a new transport here and are sure no more messages will get sent. We also\n * manually dispose/disconnect it here when heartbeats fail, or when we change\n * sessions.\n *\n * We avoid creating new lsClients and dynamically swap the transport on the existing\n * lsClient, which saves us from having to deal with rerendering children of\n * useLsClient that use the lsTransport.\n */\nexport default class LSManager {\n public onStateChange?: (state: LSConnectionState) => void;\n public lsClient: LanguageServerClient;\n\n public sessionId: string;\n\n #uri: string;\n #apiKey?: string;\n\n /**\n * After some amount of recent \"bad\" disconnects (disconnects whose codes are\n * in this.#recentBadDisconnectsCodes), we will disable auto reconnects. This is a safety net\n * to avoid historical issues with fast infinite reconnect loops. But we shouldn't get many\n * (or any) bad disconnects anyway, so this is just a safety net.\n */\n #enableRecentBadDisconnects: boolean;\n #recentBadDisconnectsDelay: number;\n #recentBadDisconnectsCodes: Set;\n #recentBadDisconnects: SlidingWindowCounter;\n\n #dontReconnectOnCodes: Set; // Codes that we don't want to reconnect on\n\n #logger: (message: string, ...args: any[]) => void = console.log;\n #transport: LSWebSocketTransport;\n #lsClientOptions?: Partial;\n\n public heartbeatFrequency: number;\n public heartbeatTimeout: number;\n public enableHeartbeat: boolean;\n #heartbeatInterval?: number; // Interval ID for heartbeat\n\n public enableReconnects: boolean;\n public minReconnectionDelay: number;\n public maxReconnectionDelay: number;\n public reconnectionRetries: number;\n public reconnectionFactor: number;\n\n public pingPollFrequency = 1_000; // ms\n public maxPingsUntilPingSucceeds = 10; // How many pings to send before giving up on waiting for the server to be ready\n\n // Single flag to prevent reconnects during manual operations\n #blockReconnects = false;\n #isConnecting = false;\n\n constructor(\n uri: string,\n {\n onStateChange,\n sessionId,\n apiKey,\n heartbeatFrequency = 2_000,\n heartbeatTimeout = 3_000,\n minReconnectionDelay = 600,\n maxReconnectionDelay = 2_000,\n reconnectionRetries = 20,\n reconnectionFactor = 1.4,\n pingPollFrequency = 1_000,\n maxPingsUntilPingSucceeds = 30,\n logger = console.log,\n lsClientOptions,\n enableHeartbeat = true,\n enableReconnects = true,\n enableRecentBadDisconnects = true,\n recentBadDisconnectsDelay = 6_000,\n recentBadDisconnectsCodes = new Set([1011, 1006]),\n }: LSManagerOptions,\n ) {\n this.#uri = uri;\n this.#apiKey = apiKey;\n this.#logger = logger;\n\n this.sessionId = sessionId;\n this.onStateChange = onStateChange;\n\n this.heartbeatFrequency = heartbeatFrequency;\n this.heartbeatTimeout = heartbeatTimeout;\n this.minReconnectionDelay = minReconnectionDelay;\n this.maxReconnectionDelay = maxReconnectionDelay;\n this.reconnectionRetries = reconnectionRetries;\n this.reconnectionFactor = reconnectionFactor;\n this.pingPollFrequency = pingPollFrequency;\n this.maxPingsUntilPingSucceeds = maxPingsUntilPingSucceeds;\n\n this.#recentBadDisconnectsDelay = recentBadDisconnectsDelay;\n this.#recentBadDisconnectsCodes = recentBadDisconnectsCodes;\n this.#recentBadDisconnects = new SlidingWindowCounter(\n this.#recentBadDisconnectsDelay,\n );\n this.#enableRecentBadDisconnects = enableRecentBadDisconnects;\n\n this.#dontReconnectOnCodes = new Set([\n 1000, // Normal closure\n 1001, // Going away\n 1012, // Service restart\n ]);\n\n this.#lsClientOptions = lsClientOptions;\n this.enableHeartbeat = enableHeartbeat;\n this.enableReconnects = enableReconnects;\n\n this.#transport = this.#getNewTransport();\n this.lsClient = this.#getNewLsClient();\n this.connect();\n }\n\n public get uri() {\n const url = new URL(this.#uri);\n url.searchParams.set(\"session\", this.sessionId);\n return url.toString();\n }\n\n public connected() {\n return this.#transport.connected();\n }\n\n public async connect() {\n if (this.#isConnecting) {\n this.#logger(\"Connection already in progress, ignoring duplicate call\");\n return Promise.resolve();\n }\n\n if (this.#transport.connected()) {\n this.#logger(\"Already connected to language server\");\n return Promise.resolve();\n }\n\n this.#isConnecting = true;\n this.#clearHeartbeat();\n this.#logger(\"Connecting to language server\");\n this.onStateChange?.(\"connecting\");\n await this.#waitUntilPingSucceeds();\n\n await this.changeSession(this.sessionId, true);\n }\n\n public async disconnect() {\n this.#logger(\"Disconnecting from language server\");\n\n if (this.connected()) this.#transport.dispose();\n }\n\n public async changeSession(sessionId: string, reconnect = false) {\n if (this.#isConnecting && sessionId === this.sessionId && !reconnect) {\n this.#logger(\n \"Session change already in progress, ignoring duplicate call\",\n );\n return Promise.resolve();\n }\n\n this.#logger(\"Changing session to\", sessionId);\n this.#isConnecting = true;\n // Set the flag to prevent auto-reconnect during session change\n this.#blockReconnects = true;\n this.sessionId = sessionId;\n\n this.onStateChange?.(\"connecting\");\n this.#transport.close();\n this.#transport = this.#getNewTransport();\n\n await this.#transport.connect();\n this.lsClient.changeTransport(this.#transport);\n this.lsClient.initialize(true);\n // Flag is cleared when transport is opened successfully in the onOpen handler\n }\n\n #getNewTransport() {\n const transport = new LSWebSocketTransport(this.uri, {\n onWSOpen: (e) => {\n this.#logger(\"LS Transport Opened\", e.type);\n this.onStateChange?.(\"connected\");\n this.#setupHeartbeat();\n this.#isConnecting = false; // Clear the connecting flag\n },\n onLSHealthy: () => {\n this.#blockReconnects = false; // Clear the reconnect block flag\n this.#logger(\"LS Transport Healthy\");\n this.onStateChange?.(\"healthy\");\n },\n onWSClose: (e) => {\n if ((e.code === 1006 || e.code === 1011) && navigator.onLine) {\n Sentry.captureException(\n new Error(`LS Transport closed with code ${e.code}: ${e.reason}`),\n {\n extra: {\n code: e.code,\n reason: e.reason,\n type: e.type,\n sessionId: this.sessionId,\n uri: this.uri,\n },\n },\n );\n }\n\n this.#logger(\"LS Transport Closed\", e.code, e.reason, e.type);\n this.onStateChange?.(\"disconnected\");\n this.#clearHeartbeat();\n\n if (this.#dontReconnectOnCodes.has(e.code)) {\n this.#logger(\n `Not reconnecting due to code ${e.code} being in dontReconnectOnCodes`,\n );\n return;\n }\n\n if (!this.enableReconnects) return;\n\n if (this.#enableRecentBadDisconnects) {\n if (this.#recentBadDisconnects.count === 3) {\n this.#blockReconnects = true;\n setTimeout(() => {\n this.#blockReconnects = false;\n }, this.#recentBadDisconnectsDelay);\n }\n\n if (this.#recentBadDisconnectsCodes.has(e.code)) {\n this.#recentBadDisconnects.increment();\n }\n }\n\n // Don't auto-reconnect if we're manually changing sessions or if reconnects are disabled\n if (this.#blockReconnects) return;\n\n // Set the flag to prevent multiple reconnect attempts\n this.#blockReconnects = true;\n\n this.#attemptReconnectWithRetry(); // unawaited\n },\n onWSError: (e) => {\n this.#logger(\"LS Transport errored\", e.error, e.message, e.type);\n this.onStateChange?.(\"disconnected\");\n },\n });\n\n return transport;\n }\n\n async #attemptReconnectWithRetry() {\n await this.#waitUntilPingSucceeds();\n\n return pRetry(\n async (n) => {\n this.#logger(`Reconnection attempt ${n}...`);\n this.onStateChange?.(\"reconnecting\");\n\n // Create a new transport and initialize it\n this.#transport = this.#getNewTransport();\n this.lsClient.changeTransport(this.#transport);\n\n // Initialize the client\n await this.#transport.connect();\n await this.lsClient.initialize(true);\n\n // If we get here, the reconnection was successful\n return true;\n },\n {\n retries: this.reconnectionRetries,\n onFailedAttempt: (error) => {\n this.#logger(\n `Reconnection attempt failed (${error.attemptNumber}): ${error.message}`,\n );\n\n // Only unblock reconnects if we've exhausted all retries\n if (error.retriesLeft === 0) {\n this.#blockReconnects = false;\n }\n },\n minTimeout: this.minReconnectionDelay,\n maxTimeout: this.maxReconnectionDelay,\n factor: this.reconnectionFactor,\n shouldRetry: async () => !this.#transport.connected(),\n },\n ).then(\n () => {\n this.#logger(\"Reconnection successful\");\n // The block flag is cleared in the onOpen handler\n },\n (error) => {\n this.#logger(\"All reconnection attempts failed:\", error);\n this.#blockReconnects = false; // Unblock reconnects for future attempts\n },\n );\n }\n\n #setupHeartbeat() {\n if (!this.enableHeartbeat) return;\n\n if (this.#heartbeatInterval) {\n this.#logger(\"Heartbeat already set up, ignoring.\");\n return;\n }\n\n this.#heartbeatInterval = window.setInterval(async () => {\n if (this.lsClient.ready) {\n try {\n const resp = await pTimeout(\n await this.lsClient.requestUnsafe(\"vtlsp/ping\", {}),\n { milliseconds: this.heartbeatTimeout },\n );\n\n if (\n typeof resp === \"object\" &&\n resp !== null &&\n \"status\" in resp &&\n resp.status === \"pong\"\n ) {\n this.#logger(\"Heartbeat successful\");\n this.onStateChange?.(\"healthy\");\n }\n } catch (error) {\n this.#logger(\"Heartbeat error:\", error);\n this.onStateChange?.(\"disconnected\");\n // Close transport on error, which will trigger a reconnect and clear\n // the heartbeat interval\n this.#transport.close();\n }\n }\n }, this.heartbeatFrequency);\n }\n\n #clearHeartbeat() {\n if (this.#heartbeatInterval) {\n this.#logger(\"Clearing heartbeat interval\");\n clearInterval(this.#heartbeatInterval);\n this.#heartbeatInterval = undefined;\n } else {\n this.#logger(\"No heartbeat interval to clear\");\n }\n }\n\n #getNewLsClient() {\n // TODO: We'd like to use some of the vscodeOptions traits eventually, which enables more\n // features like inlay hints, but for now we just use the defaults for codemirror-lsp.\n\n const defaultOptions = {\n workspaceFolders: [{ uri: \"file:///\", name: \"Val\" }],\n autoClose: false,\n // Don't timeout, since cold starts take a long time and we manage\n // timeouts through heartbeats.\n capabilities: (capabilities) => ({\n // ...vscodeOptions.capabilities,\n ...capabilities,\n }),\n initializationOptions: {\n // ...vscodeOptions.initializationOptions,\n enable: true,\n unstable: true,\n trace: true, // Gets us more debugging logs in cloudflare container\n apiKey: this.#apiKey,\n },\n } satisfies Partial;\n\n return new LanguageServerClient({\n ...defaultOptions,\n ...this.#lsClientOptions,\n transport: this.#transport,\n });\n }\n\n async #waitUntilPingSucceeds(): Promise {\n const pingUrl = getLsUrl({ route: \"ping\", worker: false });\n const apiKey = this.#apiKey;\n\n let abortTimeout: number | null = null;\n for (let i = 0; i < this.maxPingsUntilPingSucceeds; i++) {\n this.#logger(\"Waiting for LS ping to succeed...\");\n\n const abortController = new AbortController();\n abortTimeout = window.setTimeout(() => {\n abortController.abort();\n }, this.pingPollFrequency);\n\n try {\n const resp = await fetch(pingUrl, {\n method: \"GET\",\n headers: { \"x-val-town-api-key\": apiKey ?? \"\" },\n credentials: \"include\",\n signal: abortController.signal,\n });\n\n if (resp.ok) return;\n this.#logger(\"Ping failed, retrying...\");\n } catch {\n // Ignore errors and retry\n } finally {\n if (abortTimeout !== null) {\n clearTimeout(abortTimeout);\n abortTimeout = null;\n }\n }\n\n await new Promise((resolve) =>\n setTimeout(resolve, this.pingPollFrequency)\n );\n }\n\n throw new Error(\"Ping failed after maximum retries\");\n }\n}","createdAt",["D",1751574836317],"branchVersion","branchId","187464b4-584c-11f0-92d0-f69ea79377d9","id","1873f9de-584c-11f0-92d0-f69ea79377d9","ValTownEditor",["D",1751574429946],"deletedAt","legacyEnvVars",false,"privacy","public","httpPrivacy","description","imageUrl","4555dd0e-707e-4444-acd3-049d206eb1db","pinnedFileId","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":55,"_99":100,"_101":49},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"isOwned",39,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","wolf","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJvVXpPVUZRTjZGTGd2Q2t4c0RRdFpNZWJ5UCJ9","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":213,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":-5,"_57":49,"_58":-5,"_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":214,"_79":215,"_81":216,"_83":49},"tree",[163,168,169],"files",[163,164,165,166,167,168,169],"counts",{"_153":61,"_154":144,"_155":61,"_156":157,"_158":159},"contents",[125,126,127],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":146,"_32":147,"_30":148,"_131":-5,"_41":42,"_40":149,"_133":25,"_38":150,"_13":144,"_34":151,"_36":-5,"_24":49,"_137":-5,"_27":152},{"_43":139,"_32":140,"_30":141,"_131":-5,"_41":42,"_40":142,"_133":25,"_38":143,"_13":144,"_34":35,"_36":104,"_24":49,"_137":-5,"_27":145},{"_43":128,"_32":129,"_30":130,"_131":-5,"_41":42,"_40":132,"_133":25,"_38":134,"_13":135,"_34":35,"_36":136,"_24":49,"_137":-5,"_27":138},"7d9fcd06-584c-11f0-acaa-f69ea79377d9","useCodemirror.ts","18769b12-584c-11f0-92d0-f69ea79377d9","parentId",8,"latest",["D",1751574599674],7,"// Taken from: https://github.com/uiwjs/react-codemirror/blob/62a15d20187dc8bfaf006be0ff8df1f9e30928af/core/src/useCodeMirror.ts\nimport { useEffect, useState } from \"npm:react@19\";\nimport type React from \"npm:react@19\";\n\nimport {\n Annotation,\n Compartment,\n EditorState,\n type EditorStateConfig,\n type Extension,\n type StateField,\n} from \"npm:@codemirror/state\";\nimport {\n drawSelection,\n dropCursor,\n EditorView,\n highlightActiveLineGutter,\n highlightSpecialChars,\n type KeyBinding,\n keymap,\n placeholder,\n type ViewUpdate,\n} from \"npm:@codemirror/view\";\nimport {\n cursorDocEnd,\n defaultKeymap,\n history,\n historyKeymap,\n indentWithTab,\n} from \"npm:@codemirror/commands\";\nimport {\n autocompletion,\n closeBrackets,\n closeBracketsKeymap,\n completionKeymap,\n} from \"npm:@codemirror/autocomplete\";\nimport {\n bracketMatching,\n foldKeymap,\n indentOnInput,\n syntaxHighlighting,\n} from \"npm:@codemirror/language\";\nimport { lintKeymap } from \"npm:@codemirror/lint\";\nimport { classHighlighter } from \"npm:@lezer/highlight\";\n\ninterface DefaultExtensionsOptions {\n indentWithTab?: boolean;\n placeholder?: string | HTMLElement;\n readOnly?: boolean;\n}\n\nconst basicSetup = ((): Extension[] => {\n const keymaps: KeyBinding[] = [\n ...closeBracketsKeymap,\n ...defaultKeymap,\n ...historyKeymap,\n ...foldKeymap,\n ...completionKeymap,\n ...lintKeymap,\n ];\n\n const extensions: Extension[] = [\n highlightActiveLineGutter(),\n highlightSpecialChars(),\n history(),\n drawSelection(),\n dropCursor(),\n EditorState.allowMultipleSelections.of(true),\n /**\n * We use the classHighlighter to let us use\n * Tailwind colors for code\n */\n [syntaxHighlighting(classHighlighter)],\n indentOnInput(),\n bracketMatching(),\n closeBrackets(),\n autocompletion(),\n ];\n\n return extensions.concat([keymap.of(keymaps)]).filter(Boolean);\n})();\n\n/**\n * React-Codemirror took the approach of, instead of memoizing\n * the extensions array that this method generates, it use a memo\n * based on the options that are passed into this method.\n */\nconst getDefaultExtensions = (\n options: DefaultExtensionsOptions = {},\n): Extension[] => {\n const {\n indentWithTab: defaultIndentWithTab = true,\n readOnly = false,\n placeholder: placeholderStr = \"\",\n } = options;\n const getExtensions: Extension[] = [];\n if (defaultIndentWithTab) {\n getExtensions.unshift(keymap.of([indentWithTab]));\n }\n getExtensions.unshift(basicSetup);\n if (placeholderStr) {\n getExtensions.unshift(placeholder(placeholderStr));\n }\n if (readOnly) {\n getExtensions.push(EditorState.readOnly.of(true));\n }\n\n return [...getExtensions];\n};\n\ninterface ReactCodeMirrorProps\n extends\n Omit,\n Omit, \"onChange\" | \"placeholder\"> {\n /** value of the auto created model in the editor. */\n value?: string;\n height?: string;\n minHeight?: string;\n maxHeight?: string;\n width?: string;\n minWidth?: string;\n maxWidth?: string;\n /** focus on the editor. */\n autoFocus?: boolean;\n /** Enables a placeholder—a piece of example content to show when the editor is empty. */\n placeholder?: string | HTMLElement;\n /**\n * This disables editing of the editor content by the user.\n * @default false\n */\n readOnly?: boolean;\n /**\n * Controls whether pressing the `Tab` key inserts a tab character and indents the text (`true`)\n * or behaves according to the browser's default behavior (`false`).\n * @default true\n */\n indentWithTab?: boolean;\n /** Fired whenever a change occurs to the document. */\n onChange?(value: string, viewUpdate: ViewUpdate): void;\n /** Fired whenever any state change occurs within the editor, including non-document changes like lint results. */\n onUpdate?(viewUpdate: ViewUpdate): void;\n /** The first time the editor executes the event. */\n onCreateEditor?(view: EditorView, state: EditorState): void;\n /**\n * Extension values can be [provided](https://codemirror.net/6/docs/ref/#state.EditorStateConfig.extensions) when creating a state to attach various kinds of configuration and behavior information.\n * They can either be built-in extension-providing objects,\n * such as [state fields](https://codemirror.net/6/docs/ref/#state.StateField) or [facet providers](https://codemirror.net/6/docs/ref/#state.Facet.of),\n * or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed.\n */\n extensions?: Extension[];\n /**\n * If the view is going to be mounted in a shadow root or document other than the one held by the global variable document (the default), you should pass it here.\n * Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root)\n */\n root?: ShadowRoot | Document;\n /**\n * Create a state from its JSON representation serialized with [toJSON](https://codemirror.net/docs/ref/#state.EditorState.toJSON) function\n */\n initialState?: {\n json: any;\n fields?: Record>;\n };\n}\n\nconst External = Annotation.define();\n\ninterface UseCodeMirror extends ReactCodeMirrorProps {\n container?: HTMLDivElement | null;\n autoScroll?: boolean;\n}\n\nconst extensionCompartment = new Compartment();\nconst emptyExtensions: Extension[] = [];\n\nexport function useCodeMirror(props: UseCodeMirror) {\n const {\n value,\n selection,\n onChange,\n onCreateEditor,\n onUpdate,\n extensions = emptyExtensions,\n autoFocus,\n height = null,\n minHeight = null,\n maxHeight = null,\n width = null,\n minWidth = null,\n maxWidth = null,\n placeholder: placeholderStr = \"\",\n readOnly = false,\n indentWithTab: defaultIndentWithTab = true,\n root,\n initialState,\n autoScroll = false,\n } = props;\n\n const [container, setContainer] = useState();\n const [view, setView] = useState();\n const [state, setState] = useState();\n const defaultThemeOption = EditorView.theme({\n \"&\": {\n height,\n minHeight,\n maxHeight,\n width,\n minWidth,\n maxWidth,\n },\n \"& .cm-scroller\": {\n height: \"100% !important\",\n },\n });\n const updateListener = EditorView.updateListener.of((vu: ViewUpdate) => {\n if (\n vu.docChanged &&\n typeof onChange === \"function\" &&\n // Fix echoing of the remote changes:\n // If transaction is market as remote we don't have to call `onChange` handler again\n !vu.transactions.some((tr) => tr.annotation(External))\n ) {\n const doc = vu.state.doc;\n const value = doc.toString();\n onChange(value, vu);\n }\n });\n\n const defaultExtensions = getDefaultExtensions({\n readOnly,\n placeholder: placeholderStr,\n indentWithTab: defaultIndentWithTab,\n });\n\n let getExtensions = [\n updateListener,\n defaultThemeOption,\n ...defaultExtensions,\n ];\n\n if (onUpdate) {\n getExtensions.push(EditorView.updateListener.of(onUpdate));\n }\n getExtensions = getExtensions.concat(extensions);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: ported from eslint\n useEffect(\n function initializeCodeMirrorView() {\n if (container && !state) {\n const config = {\n doc: value,\n selection,\n extensions: extensionCompartment.of(getExtensions),\n };\n const stateCurrent = initialState\n ? EditorState.fromJSON(initialState.json, config, initialState.fields)\n : EditorState.create(config);\n setState(stateCurrent);\n\n if (!view) {\n const viewCurrent = new EditorView({\n state: stateCurrent,\n parent: container,\n root,\n });\n\n setView(viewCurrent);\n onCreateEditor?.(viewCurrent, stateCurrent);\n }\n }\n return () => {\n if (view) {\n setState(undefined);\n setView(undefined);\n }\n };\n },\n [container, state],\n );\n\n useEffect(() => setContainer(props.container), [props.container]);\n\n useEffect(\n () => () => {\n if (view) {\n view.destroy();\n setView(undefined);\n }\n },\n [view],\n );\n\n useEffect(() => {\n if (autoFocus && view) {\n view.focus();\n }\n }, [autoFocus, view]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: ported from eslint\n useEffect(\n function reconfigureExtensions() {\n if (view) {\n view.dispatch({\n effects: [extensionCompartment.reconfigure(getExtensions)],\n });\n }\n },\n [\n extensions,\n height,\n minHeight,\n maxHeight,\n width,\n minWidth,\n maxWidth,\n placeholderStr,\n readOnly,\n defaultIndentWithTab,\n onChange,\n onUpdate,\n ],\n );\n\n useEffect(() => {\n if (value === undefined) {\n return;\n }\n const currentValue = view ? view.state.doc.toString() : \"\";\n // console.info(\"codemirror received external changes\");\n if (view && value !== currentValue) {\n // console.info(\"dispatching external changes\");\n view.dispatch({\n changes: fancyMerge(currentValue, value),\n annotations: [External.of(true)],\n });\n\n if (autoScroll) {\n // make new changes scroll into view\n // this is used in /townie, but may not be desireable\n // in other use-cases, if they exist\n cursorDocEnd(view);\n }\n }\n }, [value, view, autoScroll]);\n\n return { state, setState, view, setView, container, setContainer };\n}\n\n// TODO: make naming consistent\nexport { useCodeMirror as useCodemirror };","label",[129],"8eb6dfee-584c-11f0-88c9-f69ea79377d9","CodeEditor.ts","86932a48-584c-11f0-b261-f69ea79377d9",10,["D",1751574628345],1,[140],"94108116-584c-11f0-a966-f69ea79377d9","ls","92d8e8ce-584c-11f0-bc58-f69ea79377d9",14,["D",1751574637322],"directory",[147],"pulls","branches","forks","envVars",{"_160":61,"_162":61},"connections",{"_160":61,"_161":61},"count","unfilledCount","emptyCount",{"_43":146,"_32":147,"_30":148,"_131":-5,"_41":42,"_40":149,"_133":25,"_38":210,"_13":144,"_34":151,"_36":-5,"_24":49,"_137":-5,"_171":211,"_27":212},{"_43":205,"_32":195,"_30":188,"_131":148,"_41":42,"_40":206,"_133":25,"_38":207,"_13":144,"_34":151,"_36":-5,"_24":49,"_137":-5,"_171":208,"_27":209},{"_43":196,"_32":197,"_30":198,"_131":188,"_41":42,"_40":199,"_133":25,"_38":200,"_13":201,"_34":35,"_36":202,"_24":49,"_137":-5,"_171":203,"_27":204},{"_43":185,"_32":186,"_30":187,"_131":188,"_41":42,"_40":189,"_133":49,"_38":190,"_13":191,"_34":35,"_36":192,"_24":49,"_137":-5,"_171":193,"_27":194},{"_43":177,"_32":178,"_30":179,"_131":148,"_41":42,"_40":180,"_133":25,"_38":181,"_13":182,"_34":35,"_36":104,"_24":49,"_137":-5,"_171":183,"_27":184},{"_43":139,"_32":140,"_30":141,"_131":-5,"_41":42,"_40":142,"_133":25,"_38":174,"_13":144,"_34":35,"_36":104,"_24":49,"_137":-5,"_171":175,"_27":176},{"_43":128,"_32":129,"_30":130,"_131":-5,"_41":42,"_40":132,"_133":25,"_38":170,"_13":135,"_34":35,"_36":136,"_24":49,"_137":-5,"_171":172,"_27":173},["D",1751574599674],"children",[],[129],["D",1751574628345],[],[140],"9505a6e6-584c-11f0-98da-f69ea79377d9","useLsClient.tsx","8ff18b98-584c-11f0-831c-f69ea79377d9",15,["D",1751574638930],2,[],[147,178],"f35c67c0-584c-11f0-88c9-f69ea79377d9","LSWebSocketTransport.tsx","9e6b4d58-584c-11f0-bc58-f69ea79377d9","ed1fd4f0-584c-11f0-9f14-f69ea79377d9",32,["D",1751574797205],5,"import {\n createMessageConnection,\n type Disposable,\n Emitter,\n type MessageConnection,\n type MessageReader,\n type MessageWriter,\n type RAL,\n ReadableStreamMessageReader,\n WriteableStreamMessageWriter,\n} from \"npm:vscode-jsonrpc\";\nimport pTimeout from \"npm:p-timeout\";\nimport type { LSITransport } from \"./LSITransport\";\nimport WebSocket, {\n type CloseEvent,\n type ErrorEvent, // isomorphic-ws provides better type safety than vanilla WebSockets\n type Event,\n} from \"npm:isomorphic-ws\";\n\nconst MAX_CHUNK = 200 * 1024;\n\ninterface LSWebSocketTransportOptions {\n onWSOpen?: (e: Event) => void;\n onWSClose?: (e: CloseEvent) => void;\n onWSError?: (error: ErrorEvent) => void;\n onLSHealthy?: () => void;\n}\n\nexport class LSWebSocketTransport implements LSITransport {\n public connection?: WebSocket;\n public uri: string;\n\n public onWSOpen?: (e: Event) => void;\n public onWSClose?: (e: CloseEvent) => void;\n public onWSError?: (error: ErrorEvent) => void;\n public onLSHealthy?: () => void;\n\n #messageConnection: MessageConnection | null = null;\n #connectingPromise: Promise | null = null;\n #disposed = false;\n\n #notifyBuffer: [string, unknown][] = [];\n #requestBuffer: [\n string,\n unknown,\n number | undefined,\n (result: unknown) => void,\n (error: unknown) => void,\n ][] = [];\n\n #errorCallbacks: ((error: Error) => void)[] = [];\n #notifyCallbacks: ((method: string, params: unknown) => void)[] = [];\n #requestCallbacks: ((method: string, params: unknown) => void)[] = [];\n\n constructor(\n uri: string,\n {\n onWSOpen,\n onWSClose,\n onLSHealthy,\n onWSError,\n }: LSWebSocketTransportOptions = {},\n ) {\n this.uri = uri.replace(\"http\", \"ws\");\n this.onLSHealthy = onLSHealthy;\n this.onWSOpen = onWSOpen;\n this.onWSClose = onWSClose;\n this.onWSError = onWSError;\n }\n\n async sendRequest(\n method: string,\n params?: unknown,\n timeout?: number,\n ): Promise {\n this.#errorIfDisposed();\n\n if (this.#messageConnection) {\n const promise = this.#messageConnection.sendRequest(method, params);\n return timeout ? pTimeout(promise, { milliseconds: timeout }) : promise;\n } else {\n return new Promise((resolve, reject) => {\n this.#requestBuffer.push([method, params, timeout, resolve, reject]);\n });\n }\n }\n\n public onRequest(\n handler: (method: string, params: unknown) => unknown,\n ): void {\n this.#errorIfDisposed();\n this.#requestCallbacks.push(handler);\n }\n\n public sendNotification(method: string, params?: unknown): void {\n this.#errorIfDisposed();\n\n if (this.#messageConnection) {\n this.#messageConnection.sendNotification(method, params);\n } else {\n this.#notifyBuffer.push([method, params]);\n }\n }\n\n public onNotification(\n handler: (method: string, params: unknown) => void,\n ): void {\n this.#errorIfDisposed();\n this.#notifyCallbacks.push(handler);\n }\n\n public onError(handler: (error: unknown) => void): void {\n this.#errorIfDisposed();\n this.#errorCallbacks.push(handler);\n }\n\n public dispose(): void {\n this.connection?.close(1000, \"Transport disposed\");\n this.#disposed = true;\n }\n\n public close(): void {\n // Impl for LSITransport.close\n this.dispose();\n }\n\n public connected(): boolean {\n return this.connection?.readyState === WebSocket.OPEN;\n }\n\n public connect(): Promise {\n this.#errorIfDisposed();\n\n if (this.#connectingPromise) {\n return this.#connectingPromise;\n }\n\n if (this.connected()) {\n return Promise.resolve();\n }\n\n this.connection = new WebSocket(this.uri);\n\n this.#connectingPromise = new Promise((resolve, reject) => {\n const onOpenCb = (e: Event) => {\n this.#errorIfDisposed();\n\n this.connection?.removeEventListener(\"open\", onOpenCb);\n this.connection?.removeEventListener(\"error\", onErrorCb);\n\n this.#setupMessageConnection();\n this.onWSOpen?.(e);\n this.#connectingPromise = null;\n resolve();\n };\n this.connection?.addEventListener(\"open\", onOpenCb);\n\n const onCloseCb = (e: CloseEvent) => {\n this.#errorIfDisposed();\n\n this.connection?.removeEventListener(\"close\", onCloseCb);\n this.#messageConnection?.dispose();\n this.#messageConnection = null;\n this.onWSClose?.(e);\n this.dispose();\n };\n this.connection?.addEventListener(\"close\", onCloseCb);\n\n const onErrorCb = (error: ErrorEvent) => {\n this.#errorIfDisposed();\n\n this.connection?.removeEventListener(\"open\", onOpenCb);\n this.connection?.removeEventListener(\"error\", onErrorCb);\n this.onWSError?.(error);\n this.#connectingPromise = null;\n reject(error);\n };\n this.connection?.addEventListener(\"error\", onErrorCb);\n });\n\n return this.#connectingPromise;\n }\n\n public async sendHeartbeat(timeout = 3_000): Promise {\n try {\n const resp = await this.sendRequest(\"vtlsp/ping\", {}, timeout);\n return Boolean(\n resp &&\n typeof resp === \"object\" &&\n resp !== null &&\n \"status\" in resp &&\n resp.status === \"pong\",\n );\n } catch {\n return false;\n }\n }\n\n #errorIfDisposed(): void {\n if (this.#disposed) {\n throw new WebSocketJSONRPCClientDisposedError();\n }\n }\n\n #setupMessageConnection(): void {\n if (!this.connection || this.connection.readyState !== WebSocket.OPEN) {\n return;\n }\n\n const { reader, writer } = createWebSocketConnection(this.connection);\n this.#messageConnection = createMessageConnection(reader, writer);\n\n this.#messageConnection.onNotification((method, params) => {\n if (method === \"vtlsp/didFinishCaching\") {\n this.onLSHealthy?.();\n }\n\n for (const cb of this.#notifyCallbacks) {\n try {\n cb(method, params);\n } catch (error) {\n for (const errorCb of this.#errorCallbacks) {\n errorCb(error as Error);\n }\n }\n }\n });\n\n this.#messageConnection.onRequest((method, params) => {\n for (const cb of this.#requestCallbacks) {\n try {\n cb(method, params);\n } catch (error) {\n for (const errorCb of this.#errorCallbacks) {\n errorCb(error as Error);\n }\n }\n }\n });\n\n this.#messageConnection.listen();\n\n for (const [method, params] of this.#notifyBuffer) {\n this.#messageConnection.sendNotification(method, params);\n }\n this.#notifyBuffer = [];\n\n for (\n const [method, params, timeout, resolve, reject] of this\n .#requestBuffer\n ) {\n try {\n const promise = this.#messageConnection.sendRequest(method, params);\n const finalPromise = timeout\n ? pTimeout(promise, { milliseconds: timeout })\n : promise;\n finalPromise.then(resolve).catch(reject);\n } catch (error) {\n reject(error);\n }\n }\n this.#requestBuffer = [];\n }\n}\n\nclass WebSocketJSONRPCClientDisposedError extends Error {\n constructor() {\n super(\"WebSocketJSONRPCClient has been disposed\");\n this.name = \"WebSocketJSONRPCClientDisposedError\";\n }\n}\n\nclass WebSocketWritableStream implements RAL.WritableStream {\n private socket: WebSocket;\n private errorEmitter = new Emitter();\n private closeEmitter = new Emitter();\n\n constructor(socket: WebSocket) {\n this.socket = socket;\n this.socket.binaryType = \"arraybuffer\";\n this.socket.addEventListener(\"error\", (event) => {\n this.errorEmitter.fire(new Error(`WebSocket error: ${event}`));\n });\n this.socket.addEventListener(\"close\", () => {\n this.closeEmitter.fire(undefined);\n });\n }\n\n async write(data: string | Uint8Array, encoding?: string): Promise {\n if (this.socket.readyState !== WebSocket.OPEN) {\n throw new Error(\"WebSocket is not open\");\n }\n\n let uint8Data: Uint8Array;\n if (typeof data === \"string\") {\n if (encoding && [\"utf-8\", \"acii\"].includes(encoding.toLowerCase())) {\n throw new Error(`Unsupported encoding: ${encoding}`);\n }\n uint8Data = new TextEncoder().encode(data);\n } else {\n uint8Data = new Uint8Array(\n data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength),\n );\n }\n\n for (const chunk of chunkByteArray(uint8Data, MAX_CHUNK)) {\n this.socket.send(chunk.buffer);\n }\n }\n\n public end(): void {\n this.socket.close();\n }\n\n public onError(callback: (error: Error) => void): Disposable {\n return this.errorEmitter.event(callback);\n }\n\n public onClose(callback: () => void): Disposable {\n return this.closeEmitter.event(callback);\n }\n\n public onEnd(callback: () => void): Disposable {\n return this.closeEmitter.event(callback);\n }\n}\n\nclass WebSocketReadableStream implements RAL.ReadableStream {\n private dataEmitter = new Emitter();\n private errorEmitter = new Emitter();\n private closeEmitter = new Emitter();\n\n constructor(socket: WebSocket) {\n socket.binaryType = \"arraybuffer\";\n socket.addEventListener(\"message\", (event) => {\n try {\n let data: Uint8Array;\n if (event.data instanceof ArrayBuffer) {\n data = new Uint8Array(event.data);\n } else if (typeof event.data === \"string\") {\n data = new TextEncoder().encode(event.data);\n } else if (event.data instanceof Blob) {\n event.data\n .arrayBuffer()\n .then((buffer) => {\n const uint8Data = new Uint8Array(buffer);\n this.dataEmitter.fire(uint8Data);\n })\n .catch((e) => {\n this.errorEmitter.fire(e);\n });\n return;\n } else {\n throw new Error(\n `Unsupported message data format: ${typeof event.data}`,\n );\n }\n this.dataEmitter.fire(data);\n } catch (e) {\n this.errorEmitter.fire(e as Error);\n }\n });\n\n socket.addEventListener(\"error\", (event) => {\n this.errorEmitter.fire(new Error(`WebSocket error: ${event}`));\n });\n\n socket.addEventListener(\"close\", () => {\n this.closeEmitter.fire(undefined);\n });\n }\n\n public onData(callback: (data: Uint8Array) => void): Disposable {\n return this.dataEmitter.event(callback);\n }\n\n public onError(callback: (error: Error) => void): Disposable {\n return this.errorEmitter.event(callback);\n }\n\n public onClose(callback: () => void): Disposable {\n return this.closeEmitter.event(callback);\n }\n\n public onEnd(callback: () => void): Disposable {\n return this.closeEmitter.event(callback);\n }\n}\n\nfunction createWebSocketConnection(socket: WebSocket): {\n reader: MessageReader;\n writer: MessageWriter;\n} {\n const readableStream = new WebSocketReadableStream(socket);\n const reader = new ReadableStreamMessageReader(readableStream);\n\n const writerStream = new WebSocketWritableStream(socket);\n const writer = new WriteableStreamMessageWriter(writerStream);\n\n return { reader, writer };\n}\n\n// copied from vtlsp/lsp-server/src/lib/lsp/WSStream.ts\nfunction* chunkByteArray(\n byteArray: Uint8Array,\n chunkSize: number,\n): Generator {\n const totalSize = byteArray.byteLength;\n for (let i = 0; i < totalSize; i += chunkSize) {\n yield byteArray.slice(i, Math.min(totalSize, i + chunkSize));\n }\n}",[],[147,195,186],"transports","f19acf4e-584c-11f0-9660-f69ea79377d9","LSITransport.tsx","e4986090-584c-11f0-a3f2-f69ea79377d9",30,["D",1751574794257],4,"/**\n * Interface for a JSON-RPC client that provides methods for handling communication\n * with a JSON-RPC server using notifications and requests.\n */\nexport interface LSITransport {\n /**\n * Registers a handler for incoming notifications with the specified method name.\n * Use \"*\" as the method to handle all notifications.\n *\n * @param method - The name of the notification method to listen for, or \"*\" for all\n * @param handler - The function to call when a notification with the specified method is received\n */\n onNotification: (handler: (method: string, params: unknown) => void) => void;\n\n /**\n * Sends a notification to the server with the specified method and optional parameters.\n * Notifications do not expect a response.\n *\n * @param method - The name of the notification method to send\n * @param params - Optional parameters to include with the notification\n */\n sendNotification: (method: string, params?: unknown) => void;\n\n /**\n * Sends a request to the server and returns a promise that resolves with the response.\n *\n * @template T - The expected type of the response\n * @param method - The name of the request method to send\n * @param params - Optional parameters to include with the request\n * @returns A promise that resolves with the server's response\n */\n sendRequest: (method: string, params?: unknown) => Promise;\n\n /**\n * Registers a handler for incoming requests\n * @param handler The function to call when a request is made\n */\n onRequest: (handler: (method: string, params: unknown) => unknown) => void;\n\n /**\n * Registers an error handler that will be called when JSON-RPC errors occur.\n * @param handler - The function to call when an error occurs\n */\n onError: (handler: (error: unknown) => void) => void;\n\n /**\n * Closes the transport connection and cleans up resources.\n */\n close?: () => void;\n}",[],[147,195,197],"ee57dade-584c-11f0-bc58-f69ea79377d9",27,["D",1751574788785],[165,166],[147,195],["D",1751574637322],[164,167],[147],["D",1751574429946],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":49},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_122":250,"_251":252,"_253":254,"_255":49,"_256":49,"_257":49,"_258":25,"_259":-5,"_260":-7,"_261":-7,"_262":61,"_263":49,"_264":49,"_265":-5,"_266":49,"_267":49,"_268":49,"_269":-5},"ENV",{"_221":222,"_223":224,"_225":85,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249},"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 · v38