Merge pull request #54 from TypeFox/vscode-themes-textmate

Properly separate and define classic and extended editor
TypeFox · Oct 16, 2023 · f8edf51 · f8edf51
2 parents 2a62694 + 8e0a32c
commit f8edf51
Show file tree

Hide file tree

Showing 32 changed files with 526 additions and 570 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/examples/CHANGELOG.md b/packages/examples/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 All notable changes to this npm module are documented in this file.
 
+## 2023-10-1x
+
+- Adjust to underlying api changes (`monaco-vscode-api` and `monaco-languageclient`)
+  - Renamed `EditorAppVscodeApi` to `EditorAppExtended` and `EditorAppConfigVscodeApi` to `EditorAppConfigExtended`
+  - BREAKING: `$type` of `EditorAppConfigExtended` was changed from `vscodeApi` to `extended`
+- Fix json language server launch
+- Move python language server port to 30001 and json language server port to 30000
+
 ## 2023-09-21
 
 - Langium example allows to use semantic highlighting with monarch grammars (monaco-editor classic mode)

diff --git a/packages/examples/package.json b/packages/examples/package.json
@@ -4,20 +4,18 @@
   "version": "0.0.0",
   "type": "module",
   "dependencies": {
-    "@codingame/monaco-vscode-editor-service-override": "~1.82.4",
-    "@codingame/monaco-vscode-configuration-service-override": "~1.82.4",
-    "@codingame/monaco-vscode-json-default-extension": "~1.82.4",
-    "@codingame/monaco-vscode-keybindings-service-override": "~1.82.4",
-    "@codingame/monaco-vscode-python-default-extension": "~1.82.4",
-    "@codingame/monaco-vscode-textmate-service-override": "~1.82.4",
-    "@codingame/monaco-vscode-theme-defaults-default-extension": "~1.82.4",
-    "@codingame/monaco-vscode-theme-service-override": "~1.82.4",
-    "@typefox/monaco-editor-react": "~2.2.5",
+    "@codingame/monaco-vscode-configuration-service-override": "~1.82.5",
+    "@codingame/monaco-vscode-editor-service-override": "~1.82.5",
+    "@codingame/monaco-vscode-json-default-extension": "~1.82.5",
+    "@codingame/monaco-vscode-keybindings-service-override": "~1.82.5",
+    "@codingame/monaco-vscode-python-default-extension": "~1.82.5",
+    "@typefox/monaco-editor-react": "~2.3.0-next.3",
     "http-server": "~14.1.1",
     "langium": "~2.0.2",
     "langium-statemachine-dsl": "~2.0.0",
-    "monaco-languageclient-examples": "~6.5.2",
+    "monaco-languageclient-examples": "~6.5.3",
     "monaco-editor-workers": "~0.43.0",
+    "monaco-editor-wrapper": "~3.3.0-next.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "request-light": "~0.7.0",

diff --git a/packages/examples/src/langium/config/wrapperLangiumClassic.ts b/packages/examples/src/langium/config/wrapperLangiumClassic.ts
@@ -32,16 +32,11 @@ export const setupLangiumClientClassic = async (): Promise<UserConfig> => {
                 code: code,
                 useDiffEditor: false,
                 theme: 'vs-dark',
-                // configure it like this or in the userConfiguration
                 editorOptions: {
                     'semanticHighlighting.enabled': true
                 },
                 languageExtensionConfig: { id: 'langium' },
                 languageDef: LangiumMonarchContent,
-                userConfiguration: {
-                    // or configure the semantic highlighting like this:
-                    // `{ json: "editor.semanticHighlighting.enabled": true }`
-                }
             }
         },
         languageClientConfig: {

diff --git a/...rc/langium/config/wrapperLangiumVscode.ts → .../langium/config/wrapperLangiumExtended.ts b/...rc/langium/config/wrapperLangiumVscode.ts → .../langium/config/wrapperLangiumExtended.ts
@@ -1,16 +1,11 @@
-import { Uri } from 'vscode';
-import getConfigurationServiceOverride from '@codingame/monaco-vscode-configuration-service-override';
 import getEditorServiceOverride from '@codingame/monaco-vscode-editor-service-override';
 import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
-import getThemeServiceOverride from '@codingame/monaco-vscode-theme-service-override';
-import getTextmateServiceOverride from '@codingame/monaco-vscode-textmate-service-override';
-import { whenReady as whenReadyThemes } from '@codingame/monaco-vscode-theme-defaults-default-extension';
 import { useOpenEditorStub } from 'monaco-languageclient';
 import { UserConfig } from 'monaco-editor-wrapper';
 import { getTextContent } from '../../common.js';
 import { loadLangiumWorker } from '../wrapperLangium.js';
 
-export const setupLangiumClientVscodeApi = async (): Promise<UserConfig> => {
+export const setupLangiumClientExtended = async (): Promise<UserConfig> => {
     const code = await getTextContent(new URL('./src/langium/content/example.langium', window.location.href));
 
     const extensionFilesOrContents = new Map<string, string | URL>();
@@ -25,21 +20,16 @@ export const setupLangiumClientVscodeApi = async (): Promise<UserConfig> => {
         wrapperConfig: {
             serviceConfig: {
                 userServices: {
-                    ...getThemeServiceOverride(),
-                    ...getTextmateServiceOverride(),
-                    ...getConfigurationServiceOverride(Uri.file('/workspace')),
                     ...getEditorServiceOverride(useOpenEditorStub),
                     ...getKeybindingsServiceOverride()
                 },
                 debugLogging: true
             },
             editorAppConfig: {
-                $type: 'vscodeApi',
+                $type: 'extended',
                 languageId: 'langium',
                 code: code,
                 useDiffEditor: false,
-                // Ensure all required extensions are loaded before setting up the language extension
-                awaitExtensionReadiness: [whenReadyThemes],
                 extensions: [{
                     config: {
                         name: 'langium-example',

diff --git a/packages/examples/src/langium/config/wrapperStatemachineConfig.ts b/packages/examples/src/langium/config/wrapperStatemachineConfig.ts
@@ -1,10 +1,5 @@
-import getConfigurationServiceOverride from '@codingame/monaco-vscode-configuration-service-override';
 import getEditorServiceOverride from '@codingame/monaco-vscode-editor-service-override';
 import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
-import getThemeServiceOverride from '@codingame/monaco-vscode-theme-service-override';
-import getTextmateServiceOverride from '@codingame/monaco-vscode-textmate-service-override';
-import { whenReady as whenReadyThemes } from '@codingame/monaco-vscode-theme-defaults-default-extension';
-import { Uri } from 'vscode';
 import { useOpenEditorStub } from 'monaco-languageclient';
 import { UserConfig } from 'monaco-editor-wrapper';
 import { loadStatemachinWorker } from '../wrapperStatemachine.js';
@@ -25,21 +20,16 @@ export const createLangiumGlobalConfig = async (): Promise<UserConfig> => {
         wrapperConfig: {
             serviceConfig: {
                 userServices: {
-                    ...getThemeServiceOverride(),
-                    ...getTextmateServiceOverride(),
-                    ...getConfigurationServiceOverride(Uri.file('/workspace')),
                     ...getEditorServiceOverride(useOpenEditorStub),
                     ...getKeybindingsServiceOverride()
                 },
                 debugLogging: true
             },
             editorAppConfig: {
-                $type: 'vscodeApi',
+                $type: 'extended',
                 languageId: 'statemachine',
                 code: code,
                 useDiffEditor: false,
-                // Ensure all required extensions are loaded before setting up the language extension
-                awaitExtensionReadiness: [whenReadyThemes],
                 extensions: [{
                     config: {
                         name: 'statemachine-example',

diff --git a/packages/examples/src/langium/wrapperLangium.ts b/packages/examples/src/langium/wrapperLangium.ts
@@ -4,7 +4,7 @@
  * ------------------------------------------------------------------------------------------ */
 
 import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
-import { setupLangiumClientVscodeApi } from './config/wrapperLangiumVscode.js';
+import { setupLangiumClientExtended } from './config/wrapperLangiumExtended.js';
 import { setupLangiumClientClassic } from './config/wrapperLangiumClassic.js';
 import { buildWorkerDefinition } from 'monaco-editor-workers';
 
@@ -16,17 +16,18 @@ const htmlElement = document.getElementById('monaco-editor-root');
 export const run = async () => {
     try {
         document.querySelector('#button-start-classic')?.addEventListener('click', startLangiumClientClassic);
-        document.querySelector('#button-start-vscode-api')?.addEventListener('click', startLangiumClientVscodeApi);
+        document.querySelector('#button-start-extended')?.addEventListener('click', startLangiumClientExtended);
         document.querySelector('#button-dispose')?.addEventListener('click', disposeEditor);
     } catch (e) {
         console.error(e);
     }
 };
 
-export const startLangiumClientVscodeApi = async () => {
+export const startLangiumClientExtended = async () => {
     try {
         if (checkStarted()) return;
-        const config = await setupLangiumClientVscodeApi();
+        disableButton('button-start-classic');
+        const config = await setupLangiumClientExtended();
         wrapper = new MonacoEditorLanguageClientWrapper();
         wrapper.start(config, htmlElement);
     } catch (e) {
@@ -37,6 +38,7 @@ export const startLangiumClientVscodeApi = async () => {
 export const startLangiumClientClassic = async () => {
     try {
         if (checkStarted()) return;
+        disableButton('button-start-extended');
         const config = await setupLangiumClientClassic();
         wrapper = new MonacoEditorLanguageClientWrapper();
         await wrapper.start(config, htmlElement!);
@@ -53,6 +55,13 @@ const checkStarted = () => {
     return false;
 };
 
+const disableButton = (id: string) => {
+    const button = document.getElementById(id) as HTMLButtonElement;
+    if (button !== null) {
+        button.disabled = true;
+    }
+};
+
 export const disposeEditor = async () => {
     if (!wrapper) return;
     wrapper.reportStatus();

diff --git a/packages/examples/src/reactPython.tsx b/packages/examples/src/reactPython.tsx
@@ -1,8 +1,4 @@
-import getConfigurationServiceOverride from '@codingame/monaco-vscode-configuration-service-override';
 import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
-import getThemeServiceOverride from '@codingame/monaco-vscode-theme-service-override';
-import getTextmateServiceOverride from '@codingame/monaco-vscode-textmate-service-override';
-import { whenReady as whenReadyThemes } from '@codingame/monaco-vscode-theme-defaults-default-extension';
 import { whenReady as whenReadyPython } from '@codingame/monaco-vscode-python-default-extension';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
@@ -27,7 +23,7 @@ const userConfig: UserConfig = {
             name: 'Python Language Server Example',
             $type: 'WebSocket',
             host: 'localhost',
-            port: 30000,
+            port: 30001,
             path: 'pyright',
             extraParams: {
                 authorization: 'UserAuth'
@@ -56,18 +52,15 @@ const userConfig: UserConfig = {
     wrapperConfig: {
         serviceConfig: {
             userServices: {
-                ...getThemeServiceOverride(),
-                ...getTextmateServiceOverride(),
-                ...getConfigurationServiceOverride(Uri.file('/workspace')),
                 ...getKeybindingsServiceOverride()
             },
             debugLogging: true
         },
         editorAppConfig: {
-            $type: 'vscodeApi',
+            $type: 'extended',
             languageId: 'python',
             codeUri: '/workspace/python.py',
-            awaitExtensionReadiness: [whenReadyThemes, whenReadyPython],
+            awaitExtensionReadiness: [whenReadyPython],
             extensions: [{
                 config: {
                     name: 'python-client',

diff --git a/packages/examples/src/servers/json-server.ts b/packages/examples/src/servers/json-server.ts
@@ -1,3 +1,6 @@
-import { runJsonServer } from 'monaco-languageclient-examples/node';
+import { resolve } from 'path';
+import { getLocalDirectory, runJsonServer } from 'monaco-languageclient-examples/node';
 
-runJsonServer();
+const baseDir = resolve(getLocalDirectory(import.meta.url));
+const relativeDir = '../../../../node_modules/monaco-languageclient-examples/dist/json/server/json-server.js';
+runJsonServer(baseDir, relativeDir);
diff --git a/packages/examples/src/wrapperAdvanced.ts b/packages/examples/src/wrapperAdvanced.ts
@@ -37,7 +37,7 @@ Same again.`
             $type: 'WebSocket',
             name: 'wrapper42 language client',
             host: 'localhost',
-            port: 3000,
+            port: 30000,
             path: 'sampleServer',
             secured: false
         }

diff --git a/packages/examples/src/wrapperTs.ts b/packages/examples/src/wrapperTs.ts
@@ -41,7 +41,7 @@ const userConfig: UserConfig = {
         editorAppConfig: {
             $type: 'classic',
             languageId: 'typescript',
-            code: code,
+            code,
             codeUri: codeUri,
             codeOriginal: codeOriginal,
             useDiffEditor: false,

diff --git a/packages/examples/src/wrapperWs.ts b/packages/examples/src/wrapperWs.ts
@@ -1,7 +1,4 @@
 import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
-import getThemeServiceOverride from '@codingame/monaco-vscode-theme-service-override';
-import getTextmateServiceOverride from '@codingame/monaco-vscode-textmate-service-override';
-import { whenReady as whenReadyTheme } from '@codingame/monaco-vscode-theme-defaults-default-extension';
 import { whenReady as whenReadyJson } from '@codingame/monaco-vscode-json-default-extension';
 import { disposeEditor, startEditor, swapEditors } from './common.js';
 import { UserConfig } from 'monaco-editor-wrapper';
@@ -19,49 +16,35 @@ const codeOrg = `{
     "line_endings": {"value": "unix"}
 }`;
 
-const monacoEditorConfig = {
-    glyphMargin: true,
-    guides: {
-        bracketPairs: true
-    },
-    lightbulb: {
-        enabled: true
-    },
-};
-
 const userConfig: UserConfig = {
     wrapperConfig: {
         serviceConfig: {
             userServices: {
-                ...getThemeServiceOverride(),
-                ...getTextmateServiceOverride(),
                 ...getKeybindingsServiceOverride(),
             },
             debugLogging: true
         },
         editorAppConfig: {
-            $type: 'classic',
+            $type: 'extended',
             languageId: languageId,
             code: codeMain,
             useDiffEditor: false,
             codeOriginal: codeOrg,
-            editorOptions: monacoEditorConfig,
-            diffEditorOptions: monacoEditorConfig,
-            theme: 'vs-dark',
             // Ensure all required extensions are loaded before setting up the language extension
-            awaitExtensionReadiness: [whenReadyTheme, whenReadyJson],
-            languageExtensionConfig: {
-                id: 'json',
-                extensions: ['.json', '.jsonc'],
-                aliases: ['JSON', 'json'],
-                mimetypes: ['application/json']
+            awaitExtensionReadiness: [whenReadyJson],
+            userConfiguration: {
+                json: JSON.stringify({
+                    'workbench.colorTheme': 'Default Dark Modern',
+                    'editor.guides.bracketPairsHorizontal': 'active',
+                    'editor.lightbulb.enabled': true
+                })
             }
         }
     },
     languageClientConfig: {
         options: {
             $type: 'WebSocketUrl',
-            url: 'ws://localhost:3000/sampleServer',
+            url: 'ws://localhost:30000/sampleServer',
             startOptions: {
                 onCall: () => {
                     console.log('Connected to socket.');

diff --git a/packages/examples/wrapper_langium.html b/packages/examples/wrapper_langium.html
@@ -11,7 +11,7 @@
     <h2>Langium Grammar DSL Language Client & Server (Worker)</h2>
     <div style="padding: 0px 5px 5px 0px">
         <button type="button" id="button-start-classic">Start Classic</button>
-        <button type="button" id="button-start-vscode-api">Start VscodeApi</button>
+        <button type="button" id="button-start-extended">Start Extended</button>
         <button type="button" id="button-dispose">Dispose</button>
     </div>
     <div id="monaco-editor-root" style="height: 80vh; border: 1px solid grey"></div>

diff --git a/packages/monaco-editor-react/CHANGELOG.md b/packages/monaco-editor-react/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 All notable changes to npm module [@typefox/monaco-editor-react](https://www.npmjs.com/package/@typefox/monaco-editor-react) are documented in this file.
 
+## [2.3.0] - 2023-10-1y
+
+- Properly separate and define classic and extended editor [#54](https://github.com/TypeFox/monaco-components/pull/54)
+  - Renamed `EditorAppVscodeApi` to `EditorAppExtended` and `EditorAppConfigVscodeApi` to `EditorAppConfigExtended`
+  - BREAKING: `$type` of `EditorAppConfigExtended` was changed from `vscodeApi` to `extended`
+- Updated to `monaco-editor-wrapper` `3.3.0`
+
 ## [2.2.5] - 2023-10-13
 
 - Updated to `monaco-editor-wrapper` `3.2.5`

diff --git a/packages/monaco-editor-react/README.md b/packages/monaco-editor-react/README.md
@@ -64,7 +64,7 @@ import { MonacoEditorReactComp } from '@typefox/monaco-editor-react/bundle';
 
 These are the examples specifically for `@typefox/monaco-editor-react` that you can find in the repository:
 
-- TypeScript editor worker using classical configuration [see](../examples/react_ts.html)
+- TypeScript editor worker using classic configuration [see](../examples/react_ts.html)
 - Langium statemachine language client and web worker based language server using the exact same user configuration as [wrapper statemachine](../examples/wrapper_statemachine.html), [see](../examples/react_statemachine.html)
 - Langium grammar language client and web worker based language server using vscode-api configuration [see](../examples/react_langium.html)
 

diff --git a/packages/monaco-editor-react/package.json b/packages/monaco-editor-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typefox/monaco-editor-react",
-  "version": "2.2.5",
+  "version": "2.3.0-next.3",
   "license": "MIT",
   "description": "React component for Monaco-Editor and Monaco Languageclient",
   "keywords": [
@@ -50,7 +50,7 @@
     "npm": "9.8.1"
   },
   "peerDependencies": {
-    "monaco-editor-wrapper": "~3.2.5",
+    "monaco-editor-wrapper": "~3.3.0-next.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0"
   },