Merge pull request #823 from TypeFox/react-views-init

@typefox/monaco-editor-react now works with views service

.gitignore

@@ -5,4 +5,4 @@ node_modules
 *.tsbuildinfo
 .angular
 __screenshots__
-.chrome/profile
+.chrome

docs/versions-and-history.md

@@ -6,6 +6,7 @@ The following table describes which version of **monaco-languageclient** and **@
 
 | monaco-languageclient | monaco-editor-wrapper | monaco-editor-react | monaco-vscode-api / editor-api | vscode | monaco-editor | release date | comment |
 | :---- | :---- | :--- | :--- | :--- | :--- | :--- | :--- |
+| 9.1.0 | 6.1.0 | 6.1.0 | 11.1.2 | 1.95.3 | 0.52.0 | 2025-01-09 | |
 | 9.0.0 | 6.0.0 | 6.0.0 | 11.1.2 | 1.95.3 | 0.52.0 | 2024-12-18 | |
 | 8.8.3         | 5.5.3 | 4.5.3 | 8.0.4  | 1.92.2 | 0.51.0 | 2024-08-26 | |
 | 8.8.2         | 5.5.2 | 4.5.2 | 8.0.2  | 1.92.2 | 0.50.0 | 2024-08-21 | |

index.html

@@ -86,9 +86,10 @@ <h3>TypeScript</h3>
         <br>
 
         <h2>Monaco Editor React</h2>
-        <a href="./packages/examples/react_statemachine.html">React: Langium Statemachine Language Client & Language Server (Worker)</a>
-        <br>
+        <a href="./packages/examples/react_appPlayground.html">React: Application Playground</a>
         <br>
+        <a href="./packages/examples/react_statemachine.html">React: Langium Statemachine Language Client & Language Server (Worker)</a>
+        <br><br>
         Please execute  <b><code>npm run start:example:server:python</code></b> beforehand:<br>
         <a href="./packages/examples/react_python.html">React: Python Language Client & Language Server (Web Socket)</a>
         <br>

package.json

@@ -19,8 +19,8 @@
     "@stylistic/eslint-plugin": "~2.12.1",
     "@testing-library/react": "~16.1.0",
     "@types/node": "~22.10.5",
-    "@types/react": "~18.3.14",
-    "@types/react-dom": "~18.3.3",
+    "@types/react": "~19.0.4",
+    "@types/react-dom": "~19.0.2",
     "@types/vscode": "~1.95.0",
     "@typescript-eslint/eslint-plugin": "~8.19.1",
     "@typescript-eslint/parser": "~8.19.1",
@@ -36,7 +36,7 @@
     "http-server": "~14.1.1",
     "minimatch": "~10.0.1",
     "playwright": "~1.49.1",
-    "typescript": "~5.7.2",
+    "typescript": "~5.7.3",
     "vite": "~6.0.7",
     "vite-node": "~2.1.8",
     "vitest": "~2.1.8"

packages/client/CHANGELOG.md

@@ -2,7 +2,12 @@
 
 All notable changes to this npm module are documented in this file.
 
-## [9.0.0-next.14] - 2024-12-18
+## [9.1.0] - 2025-01-09
+
+- `@typefox/monaco-editor-react` now works with views service `initialize` [#823](https://github.com/TypeFox/monaco-languageclient/pull/823)
+- Ensure configuration is init before service init [#820](https://github.com/TypeFox/monaco-languageclient/pull/820)
+
+## [9.0.0] - 2024-12-18
 
 - Include all `@codingame/monaco-vscode` packages as peerDependencies. Mark only required ones as non-optional.
 - Updated engine engine requirements for node to (`>=18.19.0`) and for npm to (`>=10.2.3`)

packages/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monaco-languageclient",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "description": "Monaco Language client implementation",
   "author": {
     "name": "TypeFox GmbH",

packages/client/src/vscode/services.ts

@@ -30,6 +30,7 @@ export interface UserConfiguration {
 export interface ViewsConfig {
     viewServiceType: 'EditorService' | 'ViewsService' | 'WorkspaceService';
     openEditorFunc?: OpenEditor;
+    htmlAugmentationInstructions?: (htmlContainer: HTMLElement | null | undefined) => void;
     viewsInitFunc?: () => void;
 }
 
@@ -110,6 +111,7 @@ export const initServices = async (vscodeApiConfig: VscodeApiConfig, instruction
             }
             await importAllServices(vscodeApiConfig, instructions);
 
+            vscodeApiConfig.viewsConfig?.htmlAugmentationInstructions?.(instructions?.htmlContainer);
             vscodeApiConfig.viewsConfig?.viewsInitFunc?.();
             instructions?.logger?.debug('Initialization of vscode services completed successfully.');
 

packages/examples/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to this npm module are documented in this file.
 
+## [2025.1.1] - 2025-01-09
+
+- Updated to `[email protected]`, `[email protected]` and `@typefox/[email protected]`.
+- Added a react version of the app playground to verify PR "`@typefox/monaco-editor-react` now works with views service" [#823](https://github.com/TypeFox/monaco-languageclient/pull/823)
+
 ## [2024.12.6] - 2024-12-18
 
 - Use final release of `[email protected]`, `[email protected]`, `[email protected]` and `@typefox/[email protected]`.

packages/examples/appPlayground.html

@@ -11,9 +11,7 @@
 
 <body>
     <div class="exampleHeadelineDiv">
-        <b class="exampleHeadeline">Application Playground</b> - [<a href="../../index.html">Back to Index</a>]
-        <br>
-        <b>Heads up:</b> This is a prototype and still evolving.
+        <b class="exampleHeadeline">Application Playground</b> - [<a href="../../index.html">Back to Index</a>] <b>Heads up:</b> This is a prototype and still evolving.
     </div>
     <script type="module" rel="modulepreload" src="./src/appPlayground/launcher"></script>
 </body>

packages/examples/ghp_appPlayground.html

@@ -5,15 +5,14 @@
     <title>Application Playground</title>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="./mini-coi.js" scope="./"></script>
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="./resources/styles/views.css">
 </head>
 
 <body>
     <div class="exampleHeadelineDiv">
-        <b class="exampleHeadeline">Application Playground</b> - [<a href="./index.html">Back to Index</a>]
-        <br>
-        <b>Heads up:</b> This is a prototype and still evolving.
+        <b class="exampleHeadeline">Application Playground</b> - [<a href="./index.html">Back to Index</a>] <b>Heads up:</b> This is a prototype and still evolving.
     </div>
     <script type="module" rel="modulepreload" src="./src/appPlayground/launcher"></script>
 </body>

packages/examples/ghp_react_appPlayground.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Application Playground</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="./mini-coi.js" scope="./"></script>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="./resources/styles/views.css">
+</head>
+
+<!-- body style of vscode theme are not applied when embedded in react -->
+<body style="background-color: #1f1f1f; color: #cccccc;">
+    <div class="exampleHeadelineDiv">
+        <b class="exampleHeadeline">Application Playground</b> - [<a href="./index.html">Back to Index</a>] <b>Heads up:</b> This is a prototype and still evolving.
+        <br>
+        <button type="button" id="button-start">Start</button>
+        <label>Enable Strict mode:</label><input type="checkbox" id="checkbox-strictmode" />
+    </div>
+    <div id="react-root"></div>
+    <script type="module" rel="modulepreload" src="./src/appPlayground/reactLauncher"></script>
+</body>
+
+</html>

packages/examples/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monaco-languageclient-examples",
-  "version": "2024.12.6",
+  "version": "2025.1.1",
   "description": "Monaco Language client examples",
   "author": {
     "name": "TypeFox GmbH",
@@ -85,6 +85,8 @@
     "@codingame/monaco-vscode-localization-service-override": "~11.1.2",
     "@codingame/monaco-vscode-python-default-extension": "~11.1.2",
     "@codingame/monaco-vscode-remote-agent-service-override": "~11.1.2",
+    "@codingame/monaco-vscode-search-result-default-extension": "~11.1.2",
+    "@codingame/monaco-vscode-search-service-override": "~11.1.2",
     "@codingame/monaco-vscode-secret-storage-service-override": "~11.1.2",
     "@codingame/monaco-vscode-standalone-json-language-features": "~11.1.2",
     "@codingame/monaco-vscode-standalone-languages": "~11.1.2",
@@ -96,17 +98,17 @@
     "@codingame/monaco-vscode-typescript-basics-default-extension": "~11.1.2",
     "@codingame/monaco-vscode-typescript-language-features-default-extension": "~11.1.2",
     "@codingame/monaco-vscode-views-service-override": "~11.1.2",
-    "@typefox/monaco-editor-react": "~6.0.0",
+    "@typefox/monaco-editor-react": "~6.1.0",
     "cors": "^2.8.5",
     "express": "~4.21.2",
     "jszip": "~3.10.1",
     "langium": "~3.3.0",
     "monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~11.1.2",
-    "monaco-editor-wrapper": "~6.0.0",
-    "monaco-languageclient": "~9.0.0",
+    "monaco-editor-wrapper": "~6.1.0",
+    "monaco-languageclient": "~9.1.0",
     "pyright": "~1.1.391",
-    "react": "~18.3.1",
-    "react-dom": "~18.3.1",
+    "react": "~19.0.0",
+    "react-dom": "~19.0.0",
     "request-light": "~0.8.0",
     "vscode": "npm:@codingame/monaco-vscode-api@~11.1.2",
     "vscode-json-languageservice": "~5.4.2",

packages/examples/react_appPlayground.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Application Playground</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="./resources/styles/views.css">
+</head>
+
+<!-- body style of vscode theme are not applied when embedded in react -->
+<body style="background-color: #1f1f1f; color: #cccccc;">
+    <div class="exampleHeadelineDiv">
+        <b class="exampleHeadeline">Application Playground</b> - [<a href="../../index.html">Back to Index</a>] <b>Heads up:</b> This is a prototype and still evolving.
+        <br>
+        <button type="button" id="button-start">Start</button>
+        <label>Enable Strict mode:</label><input type="checkbox" id="checkbox-strictmode" />
+    </div>
+    <div id="react-root"></div>
+    <script type="module" rel="modulepreload" src="./src/appPlayground/reactLauncher"></script>
+</body>
+
+</html>

packages/examples/resources/appPlayground/hello.ts

@@ -1,6 +1,5 @@
-import { sayFoo } from './tester.js';
-
 function sayHello(): string {
+    // intentionally erroneous to test import resolution
     console.log(sayFoo());
     return 'Hello';
 };

packages/examples/resources/styles/views.css

@@ -36,7 +36,7 @@
   #editors {
     position: relative;
     min-width: 0;
-    height: 95%;
+    height: 99%;
     border: 1px solid var(--vscode-editorWidget-border);
   }
 

packages/examples/src/appPlayground/common.ts

@@ -0,0 +1,28 @@
+/* --------------------------------------------------------------------------------------------
+* Copyright (c) 2024 TypeFox and others.
+* Licensed under the MIT License. See LICENSE in the package root for license information.
+* ------------------------------------------------------------------------------------------ */
+
+import * as vscode from 'vscode';
+import { RegisterLocalProcessExtensionResult } from 'vscode/extensions';
+import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
+import { ConfigResult } from './config.js';
+
+export const configurePostStart = async (wrapper: MonacoEditorLanguageClientWrapper, configResult: ConfigResult) => {
+    const result = wrapper.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)
+    ]);
+
+    await Promise.all([
+        await vscode.window.showTextDocument(configResult.helloTsUri)
+    ]);
+
+    console.log('Application Playground started');
+};