Fix TS example: InMemoryFileSystemProvider is needed for tsserver web to work properly.

kaisalmen · kaisalmen · commit 9857e4a186e6 · 2025-09-19T13:26:39.000+02:00
diff --git a/packages/client/src/index.ts b/packages/client/src/index.ts
@@ -18,7 +18,6 @@ export class MonacoLanguageClient extends BaseLanguageClient {
     constructor({ id, name, clientOptions, messageTransports }: MonacoLanguageClientOptions) {
         super(id ?? name.toLowerCase(), name, clientOptions);
         this.messageTransports = messageTransports;
-        ProposedFeatures.createAll(this);
     }
 
     protected override createMessageTransports(_encoding: string): Promise<MessageTransports> {
diff --git a/packages/examples/src/appPlayground/common.ts b/packages/examples/src/appPlayground/common.ts
@@ -12,9 +12,6 @@ export const configurePostStart = async (apiWrapper: MonacoVscodeApiWrapper, con
     const result = apiWrapper.getExtensionRegisterResult('mlc-app-playground') as RegisterLocalProcessExtensionResult;
     result.setAsDefaultApi();
 
-    // WA: Force show explorer and not search
-    await vscode.commands.executeCommand('workbench.view.explorer');
-
     await Promise.all([
         await vscode.workspace.openTextDocument(configResult.helloTsUri),
         await vscode.workspace.openTextDocument(configResult.testerTsUri)
diff --git a/packages/examples/src/appPlayground/config.ts b/packages/examples/src/appPlayground/config.ts
@@ -27,7 +27,6 @@ import '@codingame/monaco-vscode-typescript-language-features-default-extension'
 
 import '../../resources/vsix/open-collaboration-tools.vsix';
 
-import type { EditorAppConfig } from 'monaco-languageclient/editorApp';
 import { createDefaultLocaleConfiguration } from 'monaco-languageclient/vscodeApiLocales';
 import { defaultHtmlAugmentationInstructions, defaultViewsInit, type HtmlContainerConfig, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
 import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';
@@ -37,7 +36,6 @@ import { createDefaultWorkspaceContent } from '../common/client/utils.js';
 
 export type ConfigResult = {
     vscodeApiConfig: MonacoVscodeApiConfig;
-    editorAppConfig: EditorAppConfig
     workspaceFileUri: vscode.Uri;
     helloTsUri: vscode.Uri;
     testerTsUri: vscode.Uri;
@@ -103,7 +101,7 @@ export const configure = async (htmlContainer: HtmlContainerConfig): Promise<Con
                 'typescript.tsserver.web.projectWideIntellisense.suppressSemanticErrors': false,
                 'editor.guides.bracketPairsHorizontal': true,
                 'oct.serverUrl': 'https://api.open-collab.tools/',
-                'editor.experimental.asyncTokenization': false
+                'editor.experimental.asyncTokenization': true
             })
         },
         extensions: [{
@@ -122,10 +120,6 @@ export const configure = async (htmlContainer: HtmlContainerConfig): Promise<Con
         monacoWorkerFactory: configureDefaultWorkerFactory
     };
 
-    const editorAppConfig: EditorAppConfig = {
-        id: 'AAP'
-    };
-
     const workspaceUri = vscode.Uri.file('/workspace');
     const helloTsUri = vscode.Uri.file('/workspace/hello.ts');
     const testerTsUri = vscode.Uri.file('/workspace/tester.ts');
@@ -146,7 +140,6 @@ export const configure = async (htmlContainer: HtmlContainerConfig): Promise<Con
 
     return {
         vscodeApiConfig,
-        editorAppConfig,
         workspaceFileUri,
         helloTsUri,
         testerTsUri
diff --git a/packages/examples/src/appPlayground/reactMain.tsx b/packages/examples/src/appPlayground/reactMain.tsx
@@ -18,7 +18,6 @@ export const runApplicationPlaygroundReact = async () => {
             <div style={{ 'backgroundColor': '#1f1f1f' }}>
                 <MonacoEditorReactComp
                     vscodeApiConfig={configResult.vscodeApiConfig}
-                    editorAppConfig={configResult.editorAppConfig}
                     onVscodeApiInitDone={async (apiWrapper) => {
                         await configurePostStart(apiWrapper, configResult);
                     }}
diff --git a/packages/examples/src/ts/clientTs.ts b/packages/examples/src/ts/clientTs.ts
@@ -4,6 +4,7 @@
  * ------------------------------------------------------------------------------------------ */
 
 import { LogLevel } from '@codingame/monaco-vscode-api';
+import { InMemoryFileSystemProvider, registerFileSystemOverlay, type IFileWriteOptions } from '@codingame/monaco-vscode-files-service-override';
 import '@codingame/monaco-vscode-javascript-default-extension';
 import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
 import '@codingame/monaco-vscode-typescript-basics-default-extension';
@@ -12,18 +13,45 @@ import { EditorApp, type EditorAppConfig } from 'monaco-languageclient/editorApp
 import { MonacoVscodeApiWrapper, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
 import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';
 import * as vscode from 'vscode';
-import { disableElement } from '../common/client/utils.js';
+import { createDefaultWorkspaceContent, disableElement } from '../common/client/utils.js';
 
 export const runTsWrapper = async () => {
-    const codeUri = '/workspace/hello.ts';
-    const code = `function sayHello(): string {
-    return "Hello";
-};`;
+    disableElement('button-diff', true);
 
-    const codeOriginalUri = '/workspace/goodbye.ts';
-    const codeOriginal = `function sayGoodbye(): string {
-    return "Goodbye";
-};`;
+    const code = `const takesString = (x: string) => {};
+
+// you should see an error marker in the next line
+takesString(0);`;
+
+    const codeOriginal = `const takesNumber = (x: number) => {};
+
+// you should see an error marker in the next line
+takesNumber(0);`;
+
+    const textEncoder = new TextEncoder();
+    const options: IFileWriteOptions = {
+        atomic: false,
+        unlock: false,
+        create: true,
+        overwrite: true
+    };
+    const workspaceUri = vscode.Uri.file('/workspace');
+    const workspaceFileUri = vscode.Uri.file('/workspace.code-workspace');
+    const codeUri = vscode.Uri.file('/workspace/hello.ts');
+    const codeOriginalUri = vscode.Uri.file('/workspace/goodbye.ts');
+    const fileSystemProvider = new InMemoryFileSystemProvider();
+    await fileSystemProvider.mkdir(workspaceUri);
+    await fileSystemProvider.writeFile(codeUri, textEncoder.encode(code), options);
+    await fileSystemProvider.writeFile(codeOriginalUri, textEncoder.encode(codeOriginal), options);
+    await fileSystemProvider.writeFile(workspaceFileUri, textEncoder.encode(createDefaultWorkspaceContent('/workspace')), options);
+    registerFileSystemOverlay(1, fileSystemProvider);
+
+    let currentOriginalCode = codeOriginal;
+    let currentOriginalCodeUri = codeOriginalUri;
+    let currentCode = code;
+    let currentCodeUri = codeUri;
+    let swapCode = false;
+    let diffEditor = false;
 
     const htmlContainer = document.getElementById('monaco-editor-root')!;
     const vscodeApiConfig: MonacoVscodeApiConfig = {
@@ -42,42 +70,90 @@ export const runTsWrapper = async () => {
         userConfiguration: {
             json: JSON.stringify({
                 'workbench.colorTheme': 'Default Dark Modern',
+                'editor.wordBasedSuggestions': 'off',
                 'typescript.tsserver.web.projectWideIntellisense.enabled': true,
                 'typescript.tsserver.web.projectWideIntellisense.suppressSemanticErrors': false,
                 'diffEditor.renderSideBySide': false,
-                'editor.lightbulb.enabled': 'on',
-                'editor.glyphMargin': true,
                 'editor.guides.bracketPairsHorizontal': true,
                 'editor.experimental.asyncTokenization': true
             })
         },
+        workspaceConfig: {
+            enableWorkspaceTrust: true,
+            workspaceProvider: {
+                trusted: true,
+                async open() {
+                    window.open(window.location.href);
+                    return true;
+                },
+                workspace: {
+                    workspaceUri: workspaceFileUri
+                }
+            }
+        },
         monacoWorkerFactory: configureDefaultWorkerFactory
     };
 
-    const editorAppConfig: EditorAppConfig = {
-        codeResources: {
+    // perform global monaco-vscode-api init
+    const apiWrapper = new MonacoVscodeApiWrapper(vscodeApiConfig);
+    await apiWrapper.start();
+
+    let editorApp: EditorApp | undefined = undefined;
+
+    const createEditorAppConfig = (useDiffEditor: boolean): EditorAppConfig => {
+        return {
+            codeResources: {
+                modified: {
+                    text: currentCode,
+                    uri: currentCodeUri.path
+                },
+                original: {
+                    text: currentOriginalCode,
+                    uri: currentOriginalCodeUri.path,
+                }
+            },
+            useDiffEditor: useDiffEditor
+        };
+    };
+
+    const swapCurrentCode = () => {
+        swapCode = !swapCode;
+        if (swapCode) {
+            currentCode = codeOriginal;
+            currentCodeUri = codeOriginalUri;
+            currentOriginalCode = code;
+            currentOriginalCodeUri = codeUri;
+        } else {
+            currentCode = code;
+            currentCodeUri = codeUri;
+            currentOriginalCode = codeOriginal;
+            currentOriginalCodeUri = codeOriginalUri;
+        }
+    };
+
+    const updateEditorCodeResources = async (editorApp: EditorApp) => {
+        await editorApp.updateCodeResources({
             modified: {
-                text: code,
-                uri: codeUri
+                text: currentCode,
+                uri: currentCodeUri.path
             },
             original: {
-                text: codeOriginal,
-                uri: codeOriginalUri,
+                text: currentOriginalCode,
+                uri: currentOriginalCodeUri.path
             }
-        }
+        });
     };
 
-    // perform global monaco-vscode-api init
-    const apiWrapper = new MonacoVscodeApiWrapper(vscodeApiConfig);
-    await apiWrapper.start();
-
-    let editorApp = new EditorApp(editorAppConfig);
-    disableElement('button-swap-code', true);
-
     try {
         document.querySelector('#button-start')?.addEventListener('click', async () => {
+            disableElement('button-start', true);
+            disableElement('button-diff', false);
+            editorApp = new EditorApp(createEditorAppConfig(diffEditor));
             await editorApp.start(htmlContainer);
 
+            await vscode.workspace.openTextDocument(codeUri);
+            await vscode.workspace.openTextDocument(codeOriginalUri);
+
             vscode.commands.getCommands().then((x) => {
                 console.log(`Found ${x.length} commands`);
                 const finding = x.find((elem) => elem === 'actions.find');
@@ -86,45 +162,32 @@ export const runTsWrapper = async () => {
 
             editorApp.getEditor()?.focus();
             await vscode.commands.executeCommand('actions.find');
+
+            await updateEditorCodeResources(editorApp);
         });
-        document.querySelector('#button-swap-code')?.addEventListener('click', () => {
-            const textModels = editorApp.getTextModels();
-            if (textModels.modified?.uri.path === codeUri) {
-                editorApp.updateCodeResources({
-                    modified: {
-                        text: codeOriginal,
-                        uri: codeOriginalUri
-                    },
-                    original: {
-                        text: code,
-                        uri: codeUri
-                    }
-                });
-            } else {
-                editorApp.updateCodeResources({
-                    modified: {
-                        text: code,
-                        uri: codeUri
-                    },
-                    original: {
-                        text: codeOriginal,
-                        uri: codeOriginalUri
-                    }
-                });
+        document.querySelector('#button-swap-code')?.addEventListener('click', async () => {
+            swapCurrentCode();
+
+            if (editorApp !== undefined) {
+                await updateEditorCodeResources(editorApp);
             }
         });
         document.querySelector('#button-diff')?.addEventListener('click', async () => {
-            // ensure it is boolean value and not undefined
-            const useDiffEditor = editorAppConfig.useDiffEditor ?? false;
-            editorAppConfig.useDiffEditor = !useDiffEditor;
-            disableElement('button-swap-code', !editorAppConfig.useDiffEditor);
+            diffEditor = !diffEditor;
+            const editorAppConfig = createEditorAppConfig(diffEditor);
 
-            await editorApp.dispose();
+            if (editorApp !== undefined) {
+                await editorApp.dispose();
+            }
             editorApp = new EditorApp(editorAppConfig);
             await editorApp.start(htmlContainer);
+            await updateEditorCodeResources(editorApp);
         });
         document.querySelector('#button-dispose')?.addEventListener('click', async () => {
-            await editorApp.dispose();
+            disableElement('button-start', false);
+            disableElement('button-diff', true);
+
+            await editorApp?.dispose();
         });
     } catch (e) {
         console.error(e);

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,6 @@ export class MonacoLanguageClient extends BaseLanguageClient {`
`18`	`18`	`constructor({ id, name, clientOptions, messageTransports }: MonacoLanguageClientOptions) {`
`19`	`19`	`super(id ?? name.toLowerCase(), name, clientOptions);`
`20`	`20`	`this.messageTransports = messageTransports;`
`21`		`- ProposedFeatures.createAll(this);`
`22`	`21`	`}`
`23`	`22`
`24`	`23`	`protected override createMessageTransports(_encoding: string): Promise<MessageTransports> {`