Add new example Application Playground (#774)

- Integrate views service into new advanced example - Add navigation back to index page - Add missing services, moved re-usable code to the wrapper - Move all styling from HTML to CSS
TypeFox · Oct 29, 2024 · 2f5ee23 · 2f5ee23
1 parent bb6d615
commit 2f5ee23
Show file tree

Hide file tree

Showing 36 changed files with 536 additions and 70 deletions.
diff --git a/README.md b/README.md
@@ -28,6 +28,7 @@ Click [here](https://www.typefox.io/blog/teaching-the-language-server-protocol-t
       - [Groovy Language client and language server example (Location)](#groovy-language-client-and-language-server-example-location)
       - [Java Language client and language server example (Location)](#java-language-client-and-language-server-example-location)
       - [Cpp / Clangd (Location)](#cpp--clangd-location)
+      - [Application Playground (Location)](#application-playground-location)
       - [Langium grammar DSL (Location)](#langium-grammar-dsl-location)
       - [Statemachine DSL (created with Langium) (Location)](#statemachine-dsl-created-with-langium-location)
       - [bare monaco-languageclient (Location)](#bare-monaco-languageclient-location)
@@ -141,7 +142,11 @@ Langium examples (here client and server communicate via `vscode-languageserver-
 
 #### Cpp / Clangd ([Location](./packages/examples/src/clangd))
 
-It contains both the [language client](./packages/examples/src/clangd/client/main.ts) and the [langauge server (web worker)](./packages/examples/src/clangd/worker/clangd-server.ts). The clangd language server is compiled to wasm so it can be executed in the browser.
+It contains both the [language client](./packages/examples/src/clangd/client/main.ts) and the [langauge server (web worker)](./packages/examples/src/clangd/worker/clangd-server.ts). The clangd language server is compiled to wasm so it can be executed in the browser. <b>Heads up:</b> This is a prototype and still evolving.
+
+#### Application Playground ([Location](./packages/examples/src/appPlayground))
+
+This [example](./packages/examples/src/appPlayground/main.ts) uses the view service provider from `@codingame/monaco-vscode-editor-api` to build an application that utilizes more vscode features. <b>Heads up:</b> This is a prototype and still evolving.
 
 #### Langium grammar DSL ([Location](./packages/examples/src/langium/langium-dsl))
 
@@ -164,8 +169,6 @@ It demonstrates how a [monaco-editor-wrapper can be combined with a language ser
 
 See [Typescript Language support](./packages/examples/src/ts/wrapperTs.ts).
 
-See [Multi-editor usage](./packages/examples/src/ts/wrapperAdvanced.ts).
-
 #### Server processes
 
 ##### JSON Language Server

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -31,7 +31,8 @@ export default [{
         '**/lib/**/*',
         '**/out/**/*',
         '**/bin/**/*',
-        '**/resources/**/*'
+        '**/resources/**/*',
+        '**/production/**/*'
     ],
 }, ...compat.extends('eslint:recommended', 'plugin:@typescript-eslint/recommended'), {
     files: [

diff --git a/index.html b/index.html
@@ -78,6 +78,9 @@ <h3>Multiple Languageclients</h3>
         <a href="./packages/examples/two_langauge_clients.html">Json & Python Languageclients & Language Server (Web Socket)</a>
         <br>
 
+        <h3>Application Playground</h3>
+        <a href="./packages/examples/appPlayground.html">Application Playground</a>
+
         <h3>TypeScript</h3>
         <a href="./packages/examples/tsExtHost.html">TypeScript Extension Host Worker</a>
         <br>

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/client/CHANGELOG.md b/packages/client/CHANGELOG.md
@@ -4,6 +4,7 @@ All notable changes to this npm module are documented in this file.
 
 ## [9.0.0-next.5] - 2024-10-23
 
+- Function naming adjustments
 - Prototype: File system endpoint.
 - Added `createUrl` to `monaco-languageclient/tools`. Moved it here from `monaco-editor-wrapper`.
 - Updated to eslint 9

diff --git a/packages/client/src/vscode/services.ts b/packages/client/src/vscode/services.ts
@@ -16,6 +16,7 @@ import type { LocalizationOptions } from '@codingame/monaco-vscode-localization-
 import { EnvironmentOverride } from 'vscode/workbench';
 import { Logger } from 'monaco-languageclient/tools';
 import { FakeWorker as Worker } from './fakeWorker.js';
+import { setUnexpectedErrorHandler } from 'vscode/monaco';
 
 export interface MonacoEnvironmentEnhanced extends monaco.Environment {
     vscodeInitialising?: boolean;
@@ -42,7 +43,7 @@ export interface VscodeApiConfig {
 export interface InitVscodeApiInstructions extends VscodeApiConfig {
     htmlContainer: HTMLElement;
     caller?: string;
-    performChecks?: () => boolean;
+    performServiceConsistencyChecks?: () => boolean;
     logger?: Logger;
 }
 
@@ -127,13 +128,18 @@ export const importAllServices = async (instructions: InitVscodeApiInstructions)
 
     reportServiceLoading(userServices, instructions.logger);
 
-    if (instructions.performChecks === undefined || (typeof instructions.performChecks === 'function' && instructions.performChecks())) {
+    if (instructions.performServiceConsistencyChecks === undefined ||
+        (typeof instructions.performServiceConsistencyChecks === 'function' && instructions.performServiceConsistencyChecks())) {
         if (instructions.viewsConfig?.viewServiceType === 'ViewsService' || instructions.viewsConfig?.viewServiceType === 'WorkspaceService') {
             await initialize(userServices, instructions.htmlContainer, instructions.workspaceConfig, instructions.envOptions);
         } else {
             await initialize(userServices, undefined, instructions.workspaceConfig, instructions.envOptions);
         }
     }
+
+    setUnexpectedErrorHandler((e) => {
+        instructions.logger?.createErrorAndLog('Unexpected error', e);
+    });
 };
 
 /**

diff --git a/packages/examples/CHANGELOG.md b/packages/examples/CHANGELOG.md
@@ -5,6 +5,7 @@ All notable changes to this npm module are documented in this file.
 ## [2024.10.5] - 2024-10-2x
 
 - Added clangd example.
+- Added application playground example featuring the views service override.
 
 ## [2024.10.4] - 2024-10-23
 

diff --git a/packages/examples/appPlayground.html b/packages/examples/appPlayground.html
@@ -0,0 +1,21 @@
+<!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/appPlayground/style.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.
+    </div>
+    <script type="module" rel="modulepreload" src="./src/appPlayground/launcher"></script>
+</body>
+
+</html>
diff --git a/packages/examples/bare.html b/packages/examples/bare.html
@@ -10,7 +10,9 @@
 
 
 <body>
-	<h2>JSON Language Client & Language Server (Web Socket)</h2>
+    <div class="exampleHeadelineDiv">
+        <b class="exampleHeadeline">JSON Language Client & Language Server (Web Socket)</b> - [<a href="/index.html">Back to Index</a>]
+    </div>
 	<div id="monaco-editor-root" style="width:800px;height:600px;border:1px solid grey"></div>
     <script type="module">
         import { runClient } from "./src/bare/client.ts";

diff --git a/packages/examples/browser.html b/packages/examples/browser.html
@@ -9,7 +9,9 @@
 </head>
 
 <body>
-	<h2>Language Client Pure Browser Example</h2>
+    <div class="exampleHeadelineDiv">
+        <b class="exampleHeadeline">Language Client Pure Browser Example</b> - [<a href="/index.html">Back to Index</a>]
+    </div>
 	<div id="monaco-editor-root" style="width:800px;height:600px;border:1px solid grey"></div>
     <script type="module">
         import { runBrowserEditor } from "./src/browser/main.ts";

diff --git a/packages/examples/clangd.html b/packages/examples/clangd.html
@@ -10,10 +10,12 @@
 </head>
 
 <body>
-	<h2>Cpp Language Client & Clangd Language Server (Worker/Wasm)</h2>
-    <b>Heads up:</b> This is a prototype and still evolving.<br>
-    The clangd language server worker has been derived from: <a href="https://github.com/guyutongxue/clangd-in-browser">clangd-in-browser</a><br>
-    <button type="button" id="button-start">Start</button>
+    <div class="exampleHeadelineDiv">
+        <b class="exampleHeadeline">Cpp Language Client & Clangd Language Server (Worker/Wasm)</b> - [<a href="/index.html">Back to Index</a>]
+        <br>
+        <b>Heads up:</b> This is a prototype and still evolving.<br>
+        The clangd language server worker has been derived from: <a href="https://github.com/guyutongxue/clangd-in-browser">clangd-in-browser</a><br>
+        <button type="button" id="button-start">Start</button>    </div>
 	<div id="monaco-editor-root" style="width:800px;height:600px;border:1px solid grey"></div>
     <label for="openFiles">Select open file:</label>
     <select name="openFiles" id="openFiles">

diff --git a/packages/examples/eclipse.jdt.ls.html b/packages/examples/eclipse.jdt.ls.html
@@ -9,9 +9,12 @@
 </head>
 
 <body>
-	<h2>Java Language Client & Language Server (Web Socket)</h2>
-    <button type="button" id="button-start">Start</button>
-    <button type="button" id="button-dispose">Dispose</button>
+    <div class="exampleHeadelineDiv">
+        <b class="exampleHeadeline">Java Language Client & Language Server (Web Socket)</b> - [<a href="/index.html">Back to Index</a>]
+        <br>
+        <button type="button" id="button-start">Start</button>
+        <button type="button" id="button-dispose">Dispose</button>
+    </div>
 	<div id="monaco-editor-root" style="width:800px;height:600px;border:1px solid grey"></div>
     <script type="module">
         import { runEclipseJdtLsClient } from "./src/eclipse.jdt.ls/client/main.ts";

diff --git a/packages/examples/groovy.html b/packages/examples/groovy.html
@@ -9,9 +9,12 @@
 </head>
 
 <body>
-	<h2>Groovy Language Client & Language Server (Web Socket)</h2>
-    <button type="button" id="button-start">Start</button>
-    <button type="button" id="button-dispose">Dispose</button>
+    <div class="exampleHeadelineDiv">
+        <b class="exampleHeadeline">Groovy Language Client & Language Server (Web Socket)</b> - [<a href="/index.html">Back to Index</a>]
+        <br>
+        <button type="button" id="button-start">Start</button>
+        <button type="button" id="button-dispose">Dispose</button>
+    </div>
 	<div id="monaco-editor-root" style="width:800px;height:600px;border:1px solid grey"></div>
     <script type="module">
         import { runGroovyClient } from "./src/groovy/client/main.ts";

diff --git a/packages/examples/index.html b/packages/examples/index.html
@@ -43,6 +43,10 @@ <h3>Cpp / Clangd</h3>
         <a href="./clangd.html">Cpp Language Client & Clangd Language Server (Worker/Wasm)</a>
         <br>
 
+        <h3>Application Playground</h3>
+        <a href="./appPlayground.html">Application Playground</a>
+        <br>
+
         <h3>JSON</h3>
         <a href="./browser.html">Language Client Pure Browser Example</a>
         <br>

diff --git a/packages/examples/json.html b/packages/examples/json.html
@@ -9,9 +9,12 @@
 </head>
 
 <body>
-    <h2>JSON Language Client & Language Server (Web Socket)</h2>
-    <button type="button" id="button-start">Start</button>
-    <button type="button" id="button-dispose">Dispose</button>
+    <div class="exampleHeadelineDiv">
+        <b class="exampleHeadeline">JSON Language Client & Language Server (Web Socket)</b> - [<a href="/index.html">Back to Index</a>]
+        <br>
+        <button type="button" id="button-start">Start</button>
+        <button type="button" id="button-dispose">Dispose</button>
+    </div>
     <div id="monaco-editor-root" style="height: 80vh;"></div>
     <script type="module">
         import { runJsonWrapper } from './src/json/client/wrapperWs.ts';

diff --git a/packages/examples/langium.html b/packages/examples/langium.html
@@ -9,8 +9,9 @@
 </head>
 
 <body>
-    <h2>Langium Grammar DSL Language Client & Language Server (Worker)</h2>
-    <div style="padding: 0px 5px 5px 0px">
+    <div class="exampleHeadelineDiv">
+        <b class="exampleHeadeline">Langium Grammar DSL Language Client & Language Server (Worker)</b> - [<a href="/index.html">Back to Index</a>]
+        <br>
         <button type="button" id="button-start-classic">Start Classic</button>
         <button type="button" id="button-start-extended">Start Extended</button>
         <button type="button" id="button-dispose">Dispose</button>

diff --git a/packages/examples/package.json b/packages/examples/package.json
@@ -56,6 +56,7 @@
   "dependencies": {
     "@codingame/monaco-vscode-configuration-service-override": "~10.1.1",
     "@codingame/monaco-vscode-cpp-default-extension": "~10.1.1",
+    "@codingame/monaco-vscode-explorer-service-override": "~10.1.1",
     "@codingame/monaco-vscode-files-service-override": "~10.1.1",
     "@codingame/monaco-vscode-groovy-default-extension": "~10.1.1",
     "@codingame/monaco-vscode-keybindings-service-override": "~10.1.1",
@@ -73,6 +74,10 @@
     "@codingame/monaco-vscode-theme-service-override": "~10.1.1",
     "@codingame/monaco-vscode-typescript-basics-default-extension": "~10.1.1",
     "@codingame/monaco-vscode-typescript-language-features-default-extension": "~10.1.1",
+    "@codingame/monaco-vscode-views-service-override": "~10.1.1",
+    "@codingame/monaco-vscode-remote-agent-service-override": "~10.1.1",
+    "@codingame/monaco-vscode-environment-service-override": "~10.1.1",
+    "@codingame/monaco-vscode-secret-storage-service-override": "~10.1.1",
     "@typefox/monaco-editor-react": "~6.0.0-next.5",
     "cors": "^2.8.5",
     "express": "~4.21.1",

diff --git a/packages/examples/python.html b/packages/examples/python.html
@@ -9,9 +9,12 @@
 </head>
 
 <body>
-    <h2>Python Language Client & Pyright Language Server (Web Socket)</h2>
-    <button type="button" id="button-start">Start</button>
-    <button type="button" id="button-dispose">Dispose</button>
+    <div class="exampleHeadelineDiv">
+        <b class="exampleHeadeline">Python Language Client & Pyright Language Server (Web Socket)</b> - [<a href="/index.html">Back to Index</a>]
+        <br>
+        <button type="button" id="button-start">Start</button>
+        <button type="button" id="button-dispose">Dispose</button>
+    </div>
     <div id="monaco-editor-root" style="width:800px;height:600px;border:1px solid grey"></div>
     <script type="module">
         import { runPythonWrapper } from "./src/python/client/main.ts";

diff --git a/packages/examples/react_python.html b/packages/examples/react_python.html
@@ -9,10 +9,13 @@
     </head>
 
     <body>
-        <h2>React: Python Language Client & Language Server (Web Socket)</h2>
-        <button type="button" id="button-start">Start</button>
-        <label>Enable Strict mode:</label><input type="checkbox" id="checkbox-strictmode" />
-        <button type="button" id="button-dispose">Dispose</button>
+        <div class="exampleHeadelineDiv">
+            <b class="exampleHeadeline">React: Python Language Client & Language Server (Web Socket)</b> - [<a href="/index.html">Back to Index</a>]
+            <br>
+            <button type="button" id="button-start">Start</button>
+            <label>Enable Strict mode:</label><input type="checkbox" id="checkbox-strictmode" />
+            <button type="button" id="button-dispose">Dispose</button>
+        </div>
         <div id="monaco-editor-root"></div>
         <script type="module">
             import { runPythonReact } from './src/python/client/reactPython.tsx';

diff --git a/packages/examples/react_statemachine.html b/packages/examples/react_statemachine.html
@@ -9,10 +9,13 @@
 </head>
 
 <body>
-    <h2>React: Langium Statemachine Language Client & Language Server (Worker)</h2>
-    <button type="button" id="button-start">Start</button>
-    <label>Enable Strict mode:</label><input type="checkbox" id="checkbox-strictmode" />
-    <button type="button" id="button-dispose">Dispose</button>
+    <div class="exampleHeadelineDiv">
+        <b class="exampleHeadeline">React: Langium Statemachine Language Client & Language Server (Worker)</b> - [<a href="/index.html">Back to Index</a>]
+        <br>
+        <button type="button" id="button-start">Start</button>
+        <label>Enable Strict mode:</label><input type="checkbox" id="checkbox-strictmode" />
+        <button type="button" id="button-dispose">Dispose</button>
+    </div>
     <div id="monaco-editor-root"></div>
     <script type="module">
         import { runStatemachineReact } from './src/langium/statemachine/main-react.tsx';

diff --git a/packages/examples/resources/appPlayground/hello.ts b/packages/examples/resources/appPlayground/hello.ts
@@ -0,0 +1,8 @@
+import { sayFoo } from './tester.js';
+
+function sayHello(): string {
+    console.log(sayFoo());
+    return 'Hello';
+};
+
+sayHello();