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

Author: kaisalmen

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

eslint.config.mjs

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

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>

package-lock.json

@@ -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

packages/client/CHANGELOG.md

@@ -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);
+    });
 };
 
 /**

packages/client/src/vscode/services.ts

@@ -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
 

packages/examples/CHANGELOG.md

@@ -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>

packages/examples/appPlayground.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";

packages/examples/bare.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";