From 90f953881b26ae3392a43eeb5cce17d6e2d3b6af Mon Sep 17 00:00:00 2001 From: adrian2024lsp Date: Fri, 11 Oct 2024 11:47:29 +1300 Subject: [PATCH 01/16] feat(angular): add angular wrapper --- verify/angular/src/app/app.component.html | 12 +- verify/angular/src/app/app.component.ts | 32 +++-- verify/angular/src/main.ts | 4 +- .../src/monaco-angular-wrapper.component.ts | 128 ++++++++++++++++++ 4 files changed, 158 insertions(+), 18 deletions(-) create mode 100644 verify/angular/src/monaco-angular-wrapper.component.ts diff --git a/verify/angular/src/app/app.component.html b/verify/angular/src/app/app.component.html index a86adb4fd..4a0cddd60 100644 --- a/verify/angular/src/app/app.component.html +++ b/verify/angular/src/app/app.component.html @@ -1,4 +1,12 @@ -

Monaco Language Client Angular Client Example

+

Monaco Language Client Angular Client Two way data binding Example

-
+ @if(wrapperConfig) { + + + } + + {{ codeText() }}
diff --git a/verify/angular/src/app/app.component.ts b/verify/angular/src/app/app.component.ts index 77985edaf..bdf5d0d99 100644 --- a/verify/angular/src/app/app.component.ts +++ b/verify/angular/src/app/app.component.ts @@ -3,30 +3,34 @@ * Licensed under the MIT License. See LICENSE in the package root for license information. * ------------------------------------------------------------------------------------------ */ -import { AfterViewInit, Component } from '@angular/core'; -import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper'; +import { AfterViewInit, Component, signal } from '@angular/core'; +import { WrapperConfig } from 'monaco-editor-wrapper'; +import { MonacoAngularWrapperComponent } from '../monaco-angular-wrapper.component'; import { buildJsonClientUserConfig } from 'monaco-languageclient-examples/json-client'; - +import '@codingame/monaco-vscode-groovy-default-extension'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], - standalone: true + standalone: true, + imports: [MonacoAngularWrapperComponent], }) -export class MonacoEditorComponent implements AfterViewInit { +export class AppComponent implements AfterViewInit { + wrapperConfig: WrapperConfig | undefined; title = 'angular-client'; - initDone = false; - async ngAfterViewInit(): Promise { - const wrapper = new MonacoEditorLanguageClientWrapper(); + readonly codeText = signal(''); + + async ngAfterViewInit(): Promise { const config = buildJsonClientUserConfig({ - htmlContainer: document.getElementById('monaco-editor-root')! + htmlContainer: document.getElementById('monaco-editor-root')!, }); - try { - await wrapper.initAndStart(config); - } catch (e) { - console.error(e); - } + this.wrapperConfig = config; + } + + onTextChanged(text: string) { + this.codeText.set(text); } } + diff --git a/verify/angular/src/main.ts b/verify/angular/src/main.ts index 40ed6b012..8cf61032f 100644 --- a/verify/angular/src/main.ts +++ b/verify/angular/src/main.ts @@ -4,5 +4,5 @@ * ------------------------------------------------------------------------------------------ */ import { bootstrapApplication } from '@angular/platform-browser'; -import { MonacoEditorComponent } from './app/app.component'; -bootstrapApplication(MonacoEditorComponent); +import { AppComponent } from './app/app.component'; +bootstrapApplication(AppComponent); diff --git a/verify/angular/src/monaco-angular-wrapper.component.ts b/verify/angular/src/monaco-angular-wrapper.component.ts new file mode 100644 index 000000000..f6606281e --- /dev/null +++ b/verify/angular/src/monaco-angular-wrapper.component.ts @@ -0,0 +1,128 @@ +import { + AfterViewInit, + Component, + EventEmitter, + Input, + OnDestroy, + Output, +} from '@angular/core'; + + +import * as monaco from 'monaco-editor'; +import { + MonacoEditorLanguageClientWrapper, + WrapperConfig, +} from 'monaco-editor-wrapper'; + +@Component({ + standalone: true, + selector: 'monaco-angular-wrapper', + template: ` +
+
+
+ `, + styles: ` +.monaco-editor { + height: 50vh; +} +`, +}) +export class MonacoAngularWrapperComponent implements AfterViewInit, OnDestroy { + @Output() onTextChanged = new EventEmitter(); + @Input() wrapperConfig: WrapperConfig; + title = 'angluar-lang-client'; + private wrapper: MonacoEditorLanguageClientWrapper = + new MonacoEditorLanguageClientWrapper(); + private containerElement?: HTMLDivElement; + private _subscription: monaco.IDisposable | null = null; + private isRestarting?: Promise; + private started: (value: void | PromiseLike) => void; + + async ngAfterViewInit(): Promise { + + this.containerElement = document.getElementById( + 'monaco-editor-root' + ) as HTMLDivElement; + // await this.handleReinit(); + try { + await this.wrapper.initAndStart(this.wrapperConfig); + } catch (e) { + console.error(e); + } + } + + protected async handleReinit() { + await this.destroyMonaco(); + await this.initMonaco(); + await this.startMonaco(); + } + + protected async destroyMonaco(): Promise { + if (this.wrapper) { + if (this.isRestarting) { + await this.isRestarting; + } + try { + await this.wrapper.dispose(); + } catch { + // The language client may throw an error during disposal. + // This should not prevent us from continue working. + } + } + if (this._subscription) { + this._subscription.dispose(); + } + } + + async ngOnDestroy() { + this.destroyMonaco(); + } + + protected async initMonaco() { + this.isRestarting = new Promise((resolve) => { + this.started = resolve; + }); + await this.wrapper.init(this.wrapperConfig); + } + + protected async startMonaco() { + if (this.containerElement) { + // exceptions are forwarded to onError callback or the exception is thrown + try { + await this.wrapper.start(); + } catch (e) {} + this.started(); + this.isRestarting = undefined; + + this.handleOnTextChanged(); + } + } + + handleOnTextChanged() { + const textModels = this.wrapper.getTextModels(); + if (textModels) { + const verifyModelContent = () => { + const text = textModels.text?.getValue() ?? ''; + const textOriginal = textModels.textOriginal?.getValue() ?? ''; + const codeResources = + this.wrapperConfig.editorAppConfig.codeResources; + const dirty = text !== codeResources?.main?.text; + const dirtyOriginal = + textOriginal !== codeResources?.original?.text; + this.onTextChanged.emit(text); + console.log('dirty , dirtyOriginal', dirty, dirtyOriginal); + }; + + const newSubscriptions: monaco.IDisposable[] = []; + + if (textModels.text) { + newSubscriptions.push( + textModels.text.onDidChangeContent(() => { + verifyModelContent(); + }) + ); + } + } + } +} From 133153aed79803dfede5dac29f58358e50717738 Mon Sep 17 00:00:00 2001 From: adrian2024lsp Date: Fri, 11 Oct 2024 12:29:46 +1300 Subject: [PATCH 02/16] fix(angular): fix ci --- verify/angular/src/app/app.component.ts | 2 -- .../src/monaco-angular-wrapper.component.ts | 32 +++++++++++-------- 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/verify/angular/src/app/app.component.ts b/verify/angular/src/app/app.component.ts index bdf5d0d99..83d4fa779 100644 --- a/verify/angular/src/app/app.component.ts +++ b/verify/angular/src/app/app.component.ts @@ -21,7 +21,6 @@ export class AppComponent implements AfterViewInit { readonly codeText = signal(''); - async ngAfterViewInit(): Promise { const config = buildJsonClientUserConfig({ htmlContainer: document.getElementById('monaco-editor-root')!, @@ -33,4 +32,3 @@ export class AppComponent implements AfterViewInit { this.codeText.set(text); } } - diff --git a/verify/angular/src/monaco-angular-wrapper.component.ts b/verify/angular/src/monaco-angular-wrapper.component.ts index f6606281e..55ef11bf2 100644 --- a/verify/angular/src/monaco-angular-wrapper.component.ts +++ b/verify/angular/src/monaco-angular-wrapper.component.ts @@ -1,3 +1,8 @@ +/* -------------------------------------------------------------------------------------------- + * Copyright (c) 2024 TypeFox and others. + * Licensed under the MIT License. See LICENSE in the package root for license information. + * ------------------------------------------------------------------------------------------ */ + import { AfterViewInit, Component, @@ -7,7 +12,6 @@ import { Output, } from '@angular/core'; - import * as monaco from 'monaco-editor'; import { MonacoEditorLanguageClientWrapper, @@ -40,11 +44,10 @@ export class MonacoAngularWrapperComponent implements AfterViewInit, OnDestroy { private started: (value: void | PromiseLike) => void; async ngAfterViewInit(): Promise { - this.containerElement = document.getElementById( 'monaco-editor-root' ) as HTMLDivElement; - // await this.handleReinit(); + // await this.handleReinit(); try { await this.wrapper.initAndStart(this.wrapperConfig); } catch (e) { @@ -59,16 +62,15 @@ export class MonacoAngularWrapperComponent implements AfterViewInit, OnDestroy { } protected async destroyMonaco(): Promise { - if (this.wrapper) { - if (this.isRestarting) { - await this.isRestarting; - } - try { - await this.wrapper.dispose(); - } catch { - // The language client may throw an error during disposal. - // This should not prevent us from continue working. - } + + if (this.isRestarting) { + await this.isRestarting; + } + try { + await this.wrapper.dispose(); + } catch { + // The language client may throw an error during disposal. + // This should not prevent us from continue working. } if (this._subscription) { this._subscription.dispose(); @@ -91,7 +93,9 @@ export class MonacoAngularWrapperComponent implements AfterViewInit, OnDestroy { // exceptions are forwarded to onError callback or the exception is thrown try { await this.wrapper.start(); - } catch (e) {} + } catch (e) { + console.error(e); + } this.started(); this.isRestarting = undefined; From 0e067b808abe0174c25ffd0f21ffbb821364d9bd Mon Sep 17 00:00:00 2001 From: adrian2024lsp Date: Mon, 14 Oct 2024 09:00:51 +1300 Subject: [PATCH 03/16] fix(angular): fix pr comments --- verify/angular/src/app/app.component.ts | 1 - verify/angular/src/monaco-angular-wrapper.component.ts | 3 +-- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/verify/angular/src/app/app.component.ts b/verify/angular/src/app/app.component.ts index 83d4fa779..2675e6d78 100644 --- a/verify/angular/src/app/app.component.ts +++ b/verify/angular/src/app/app.component.ts @@ -7,7 +7,6 @@ import { AfterViewInit, Component, signal } from '@angular/core'; import { WrapperConfig } from 'monaco-editor-wrapper'; import { MonacoAngularWrapperComponent } from '../monaco-angular-wrapper.component'; import { buildJsonClientUserConfig } from 'monaco-languageclient-examples/json-client'; -import '@codingame/monaco-vscode-groovy-default-extension'; @Component({ selector: 'app-root', templateUrl: './app.component.html', diff --git a/verify/angular/src/monaco-angular-wrapper.component.ts b/verify/angular/src/monaco-angular-wrapper.component.ts index 55ef11bf2..dc9cb82a8 100644 --- a/verify/angular/src/monaco-angular-wrapper.component.ts +++ b/verify/angular/src/monaco-angular-wrapper.component.ts @@ -36,8 +36,7 @@ export class MonacoAngularWrapperComponent implements AfterViewInit, OnDestroy { @Output() onTextChanged = new EventEmitter(); @Input() wrapperConfig: WrapperConfig; title = 'angluar-lang-client'; - private wrapper: MonacoEditorLanguageClientWrapper = - new MonacoEditorLanguageClientWrapper(); + private wrapper: MonacoEditorLanguageClientWrapper = new MonacoEditorLanguageClientWrapper(); private containerElement?: HTMLDivElement; private _subscription: monaco.IDisposable | null = null; private isRestarting?: Promise; From 4f9182ca100c13f2e7e04d2f396d65f8ed668792 Mon Sep 17 00:00:00 2001 From: adrian2024lsp Date: Mon, 14 Oct 2024 11:55:45 +1300 Subject: [PATCH 04/16] feat(server): add mock code saver API --- package-lock.json | 62 +++++++++++++++-------- packages/examples/package.json | 40 +++++++-------- packages/examples/src/json/server/main.ts | 22 +++++++- 3 files changed, 83 insertions(+), 41 deletions(-) diff --git a/package-lock.json b/package-lock.json index 92c7231ec..8366c04c6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4475,6 +4475,19 @@ "dev": true, "license": "MIT" }, + "node_modules/cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "license": "MIT", + "dependencies": { + "object-assign": "^4", + "vary": "^1" + }, + "engines": { + "node": ">= 0.10" + } + }, "node_modules/corser": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz", @@ -8177,6 +8190,15 @@ "url": "https://github.com/fb55/nth-check?sponsor=1" } }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-inspect": { "version": "1.13.2", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz", @@ -11762,26 +11784,26 @@ "version": "2024.10.4", "license": "MIT", "dependencies": { - "@codingame/monaco-vscode-configuration-service-override": "~10.1.1", - "@codingame/monaco-vscode-cpp-default-extension": "~10.1.1", - "@codingame/monaco-vscode-files-service-override": "~10.1.1", - "@codingame/monaco-vscode-groovy-default-extension": "~10.1.1", - "@codingame/monaco-vscode-java-default-extension": "~10.1.1", - "@codingame/monaco-vscode-javascript-default-extension": "~10.1.1", - "@codingame/monaco-vscode-json-default-extension": "~10.1.1", - "@codingame/monaco-vscode-keybindings-service-override": "~10.1.1", - "@codingame/monaco-vscode-lifecycle-service-override": "~10.1.1", - "@codingame/monaco-vscode-localization-service-override": "~10.1.1", - "@codingame/monaco-vscode-python-default-extension": "~10.1.1", - "@codingame/monaco-vscode-standalone-json-language-features": "~10.1.1", - "@codingame/monaco-vscode-standalone-languages": "~10.1.1", - "@codingame/monaco-vscode-standalone-typescript-language-features": "~10.1.1", - "@codingame/monaco-vscode-textmate-service-override": "~10.1.1", - "@codingame/monaco-vscode-theme-defaults-default-extension": "~10.1.1", - "@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", - "@typefox/monaco-editor-react": "~6.0.0-next.5", + "@codingame/monaco-vscode-configuration-service-override": "~10.0.1", + "@codingame/monaco-vscode-files-service-override": "~10.0.1", + "@codingame/monaco-vscode-groovy-default-extension": "~10.0.1", + "@codingame/monaco-vscode-java-default-extension": "~10.0.1", + "@codingame/monaco-vscode-javascript-default-extension": "~10.0.1", + "@codingame/monaco-vscode-json-default-extension": "~10.0.1", + "@codingame/monaco-vscode-keybindings-service-override": "~10.0.1", + "@codingame/monaco-vscode-lifecycle-service-override": "~10.0.1", + "@codingame/monaco-vscode-localization-service-override": "~10.0.1", + "@codingame/monaco-vscode-python-default-extension": "~10.0.1", + "@codingame/monaco-vscode-standalone-json-language-features": "~10.0.1", + "@codingame/monaco-vscode-standalone-languages": "~10.0.1", + "@codingame/monaco-vscode-standalone-typescript-language-features": "~10.0.1", + "@codingame/monaco-vscode-textmate-service-override": "~10.0.1", + "@codingame/monaco-vscode-theme-defaults-default-extension": "~10.0.1", + "@codingame/monaco-vscode-theme-service-override": "~10.0.1", + "@codingame/monaco-vscode-typescript-basics-default-extension": "~10.0.1", + "@codingame/monaco-vscode-typescript-language-features-default-extension": "~10.0.1", + "@typefox/monaco-editor-react": "~6.0.0-next.2", + "cors": "^2.8.5", "express": "~4.21.1", "langium": "~3.2.0", "monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~10.1.1", diff --git a/packages/examples/package.json b/packages/examples/package.json index 186018acc..bc7d23b45 100644 --- a/packages/examples/package.json +++ b/packages/examples/package.json @@ -54,26 +54,26 @@ } }, "dependencies": { - "@codingame/monaco-vscode-configuration-service-override": "~10.1.1", - "@codingame/monaco-vscode-cpp-default-extension": "~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", - "@codingame/monaco-vscode-lifecycle-service-override": "~10.1.1", - "@codingame/monaco-vscode-localization-service-override": "~10.1.1", - "@codingame/monaco-vscode-java-default-extension": "~10.1.1", - "@codingame/monaco-vscode-javascript-default-extension": "~10.1.1", - "@codingame/monaco-vscode-json-default-extension": "~10.1.1", - "@codingame/monaco-vscode-python-default-extension": "~10.1.1", - "@codingame/monaco-vscode-standalone-languages": "~10.1.1", - "@codingame/monaco-vscode-standalone-typescript-language-features": "~10.1.1", - "@codingame/monaco-vscode-standalone-json-language-features": "~10.1.1", - "@codingame/monaco-vscode-textmate-service-override": "~10.1.1", - "@codingame/monaco-vscode-theme-defaults-default-extension": "~10.1.1", - "@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", - "@typefox/monaco-editor-react": "~6.0.0-next.5", + "@codingame/monaco-vscode-configuration-service-override": "~10.0.1", + "@codingame/monaco-vscode-files-service-override": "~10.0.1", + "@codingame/monaco-vscode-groovy-default-extension": "~10.0.1", + "@codingame/monaco-vscode-keybindings-service-override": "~10.0.1", + "@codingame/monaco-vscode-lifecycle-service-override": "~10.0.1", + "@codingame/monaco-vscode-localization-service-override": "~10.0.1", + "@codingame/monaco-vscode-java-default-extension": "~10.0.1", + "@codingame/monaco-vscode-javascript-default-extension": "~10.0.1", + "@codingame/monaco-vscode-json-default-extension": "~10.0.1", + "@codingame/monaco-vscode-python-default-extension": "~10.0.1", + "@codingame/monaco-vscode-standalone-languages": "~10.0.1", + "@codingame/monaco-vscode-standalone-typescript-language-features": "~10.0.1", + "@codingame/monaco-vscode-standalone-json-language-features": "~10.0.1", + "@codingame/monaco-vscode-textmate-service-override": "~10.0.1", + "@codingame/monaco-vscode-theme-defaults-default-extension": "~10.0.1", + "@codingame/monaco-vscode-theme-service-override": "~10.0.1", + "@codingame/monaco-vscode-typescript-basics-default-extension": "~10.0.1", + "@codingame/monaco-vscode-typescript-language-features-default-extension": "~10.0.1", + "@typefox/monaco-editor-react": "~6.0.0-next.2", + "cors": "^2.8.5", "express": "~4.21.1", "langium": "~3.2.0", "monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~10.1.1", diff --git a/packages/examples/src/json/server/main.ts b/packages/examples/src/json/server/main.ts index f233ad49e..6694d7b3c 100644 --- a/packages/examples/src/json/server/main.ts +++ b/packages/examples/src/json/server/main.ts @@ -4,9 +4,11 @@ * ------------------------------------------------------------------------------------------ */ import { resolve } from 'node:path'; +import cors from 'cors'; + import { runLanguageServer } from '../../common/node/language-server-runner.js'; import { LanguageName } from '../../common/node/server-commons.js'; - +import express from 'express'; export const runJsonServer = (baseDir: string, relativeDir: string) => { const processRunPath = resolve(baseDir, relativeDir); runLanguageServer({ @@ -23,4 +25,22 @@ export const runJsonServer = (baseDir: string, relativeDir: string) => { perMessageDeflate: false } }); + + startMockHttpServerForSavingCodeFromEditor(); }; + +export const startMockHttpServerForSavingCodeFromEditor = () => { + const app = express(); + app.use(cors()); + app.use(express.json()); + app.post('/save-code', (req, res) => { + const { code } = req.body; + console.log('Received code:', code); + res.json({ success: true, message: code}); + }); + + const PORT = 3003; + app.listen(PORT, () => { + console.log(`JSON server running on port ${PORT}`); + }); +} From fb274fe64b9116dc9fe4286a229e05553b992f57 Mon Sep 17 00:00:00 2001 From: adrian2024lsp Date: Mon, 14 Oct 2024 12:00:17 +1300 Subject: [PATCH 05/16] feat(angular): update to Signal inputs to pass wrapperConfig into wrapper to fix the loading issue --- .../monaco-angular-wrapper.component.html | 3 + .../monaco-angular-wrapper.component.scss | 1 + .../monaco-angular-wrapper.component.ts | 87 ++++++------------- 3 files changed, 32 insertions(+), 59 deletions(-) create mode 100644 verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.html create mode 100644 verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.scss rename verify/angular/src/{ => monaco-angular-wrapper}/monaco-angular-wrapper.component.ts (58%) diff --git a/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.html b/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.html new file mode 100644 index 000000000..25a53b705 --- /dev/null +++ b/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.html @@ -0,0 +1,3 @@ +
+
+
diff --git a/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.scss b/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.scss new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.scss @@ -0,0 +1 @@ + diff --git a/verify/angular/src/monaco-angular-wrapper.component.ts b/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts similarity index 58% rename from verify/angular/src/monaco-angular-wrapper.component.ts rename to verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts index dc9cb82a8..941c65ed8 100644 --- a/verify/angular/src/monaco-angular-wrapper.component.ts +++ b/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts @@ -4,10 +4,10 @@ * ------------------------------------------------------------------------------------------ */ import { - AfterViewInit, Component, + effect, EventEmitter, - Input, + input, OnDestroy, Output, } from '@angular/core'; @@ -21,47 +21,37 @@ import { @Component({ standalone: true, selector: 'monaco-angular-wrapper', - template: ` -
-
-
- `, - styles: ` -.monaco-editor { - height: 50vh; -} -`, + templateUrl: './monaco-angular-wrapper.component.html', + styleUrls: ['./monaco-angular-wrapper.component.scss'], }) -export class MonacoAngularWrapperComponent implements AfterViewInit, OnDestroy { +export class MonacoAngularWrapperComponent implements OnDestroy { @Output() onTextChanged = new EventEmitter(); - @Input() wrapperConfig: WrapperConfig; - title = 'angluar-lang-client'; - private wrapper: MonacoEditorLanguageClientWrapper = new MonacoEditorLanguageClientWrapper(); - private containerElement?: HTMLDivElement; + wrapperConfig = input(); + monacoEditorId = input(); + editorInlineStyle = input(); + private wrapper: MonacoEditorLanguageClientWrapper = + new MonacoEditorLanguageClientWrapper(); private _subscription: monaco.IDisposable | null = null; private isRestarting?: Promise; - private started: (value: void | PromiseLike) => void; - - async ngAfterViewInit(): Promise { - this.containerElement = document.getElementById( - 'monaco-editor-root' - ) as HTMLDivElement; - // await this.handleReinit(); - try { - await this.wrapper.initAndStart(this.wrapperConfig); - } catch (e) { - console.error(e); - } - } - protected async handleReinit() { - await this.destroyMonaco(); - await this.initMonaco(); - await this.startMonaco(); + constructor() { + effect(async () => { + try { + if (this.wrapperConfig() !== undefined) { + if (this.wrapperConfig() !== undefined) { + await this.wrapper.initAndStart( + this.wrapperConfig() as WrapperConfig + ); + this.handleOnTextChanged(); + } + } + } catch (e) { + console.error(e); + } + }); } protected async destroyMonaco(): Promise { - if (this.isRestarting) { await this.isRestarting; } @@ -80,36 +70,14 @@ export class MonacoAngularWrapperComponent implements AfterViewInit, OnDestroy { this.destroyMonaco(); } - protected async initMonaco() { - this.isRestarting = new Promise((resolve) => { - this.started = resolve; - }); - await this.wrapper.init(this.wrapperConfig); - } - - protected async startMonaco() { - if (this.containerElement) { - // exceptions are forwarded to onError callback or the exception is thrown - try { - await this.wrapper.start(); - } catch (e) { - console.error(e); - } - this.started(); - this.isRestarting = undefined; - - this.handleOnTextChanged(); - } - } - handleOnTextChanged() { const textModels = this.wrapper.getTextModels(); if (textModels) { const verifyModelContent = () => { const text = textModels.text?.getValue() ?? ''; const textOriginal = textModels.textOriginal?.getValue() ?? ''; - const codeResources = - this.wrapperConfig.editorAppConfig.codeResources; + const codeResources = (this.wrapperConfig() as WrapperConfig) + .editorAppConfig.codeResources; const dirty = text !== codeResources?.main?.text; const dirtyOriginal = textOriginal !== codeResources?.original?.text; @@ -120,6 +88,7 @@ export class MonacoAngularWrapperComponent implements AfterViewInit, OnDestroy { const newSubscriptions: monaco.IDisposable[] = []; if (textModels.text) { + verifyModelContent(); newSubscriptions.push( textModels.text.onDidChangeContent(() => { verifyModelContent(); From d68960090e3b5e9bf07ea74971563f7a87dbef42 Mon Sep 17 00:00:00 2001 From: adrian2024lsp Date: Mon, 14 Oct 2024 12:02:03 +1300 Subject: [PATCH 06/16] feat(angular): add HttpClient to the host app to demo the saving of the editing code text to API --- verify/angular/src/app/app.component.css | 3 -- verify/angular/src/app/app.component.html | 13 ++++---- verify/angular/src/app/app.component.scss | 0 verify/angular/src/app/app.component.ts | 39 +++++++++++++++++------ verify/angular/src/main.ts | 5 ++- verify/angular/src/save-code.service.ts | 9 ++++++ 6 files changed, 48 insertions(+), 21 deletions(-) delete mode 100644 verify/angular/src/app/app.component.css create mode 100644 verify/angular/src/app/app.component.scss create mode 100644 verify/angular/src/save-code.service.ts diff --git a/verify/angular/src/app/app.component.css b/verify/angular/src/app/app.component.css deleted file mode 100644 index 3a7e0476d..000000000 --- a/verify/angular/src/app/app.component.css +++ /dev/null @@ -1,3 +0,0 @@ -.monaco-editor { - height: 50vh; -} diff --git a/verify/angular/src/app/app.component.html b/verify/angular/src/app/app.component.html index 4a0cddd60..c5c54137d 100644 --- a/verify/angular/src/app/app.component.html +++ b/verify/angular/src/app/app.component.html @@ -1,12 +1,11 @@ -

Monaco Language Client Angular Client Two way data binding Example

-
- @if(wrapperConfig) { +

Angular Monaco Editor demo with saving code to a mock HTTP server

+
- } - - {{ codeText() }} +
diff --git a/verify/angular/src/app/app.component.scss b/verify/angular/src/app/app.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/verify/angular/src/app/app.component.ts b/verify/angular/src/app/app.component.ts index 2675e6d78..6875a7e31 100644 --- a/verify/angular/src/app/app.component.ts +++ b/verify/angular/src/app/app.component.ts @@ -3,31 +3,50 @@ * Licensed under the MIT License. See LICENSE in the package root for license information. * ------------------------------------------------------------------------------------------ */ -import { AfterViewInit, Component, signal } from '@angular/core'; +import { AfterViewInit, Component, inject, signal } from '@angular/core'; import { WrapperConfig } from 'monaco-editor-wrapper'; -import { MonacoAngularWrapperComponent } from '../monaco-angular-wrapper.component'; +import { MonacoAngularWrapperComponent } from '../monaco-angular-wrapper/monaco-angular-wrapper.component'; import { buildJsonClientUserConfig } from 'monaco-languageclient-examples/json-client'; +import { SaveCodeService } from '../save-code.service'; +import { firstValueFrom } from 'rxjs'; @Component({ selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'], + templateUrl: "./app.component.html", + styleUrls: ["./app.component.scss"], standalone: true, imports: [MonacoAngularWrapperComponent], }) export class AppComponent implements AfterViewInit { - wrapperConfig: WrapperConfig | undefined; - title = 'angular-client'; + private saveCodeService = inject(SaveCodeService); + wrapperConfig = signal(undefined); // this can be updated at runtime + title = 'angular demo for saving code'; + editorId = 'monaco-editor-root'; // this can be parameterized or it can be in a loop to support multiple editors + editorInlineStyle = signal('height: 50vh;'); readonly codeText = signal(''); async ngAfterViewInit(): Promise { - const config = buildJsonClientUserConfig({ - htmlContainer: document.getElementById('monaco-editor-root')!, - }); - this.wrapperConfig = config; + const editorDom = document.getElementById(this.editorId); + if (editorDom) { + const config = buildJsonClientUserConfig({ + htmlContainer: editorDom, + }); + this.wrapperConfig.set(config); + } } onTextChanged(text: string) { this.codeText.set(text); } + + save = async () => { + try { + const response = await firstValueFrom( + this.saveCodeService.saveCode(this.codeText()) + ); + alert('Code saved:' + JSON.stringify(response)); + } catch (error) { + console.error('Error saving code:', error); + } + }; } diff --git a/verify/angular/src/main.ts b/verify/angular/src/main.ts index 8cf61032f..0096b59db 100644 --- a/verify/angular/src/main.ts +++ b/verify/angular/src/main.ts @@ -4,5 +4,8 @@ * ------------------------------------------------------------------------------------------ */ import { bootstrapApplication } from '@angular/platform-browser'; +import { provideHttpClient } from '@angular/common/http'; import { AppComponent } from './app/app.component'; -bootstrapApplication(AppComponent); +bootstrapApplication(AppComponent, { + providers: [provideHttpClient()], +}); diff --git a/verify/angular/src/save-code.service.ts b/verify/angular/src/save-code.service.ts new file mode 100644 index 000000000..0f0387d88 --- /dev/null +++ b/verify/angular/src/save-code.service.ts @@ -0,0 +1,9 @@ +import { inject, Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +@Injectable({ providedIn: 'root' }) +export class SaveCodeService { + private http = inject(HttpClient); + saveCode(codeText: string) { + return this.http.post('http://localhost:3003/save-code', { code: codeText }); + } +} From 9e131e80fcee16c554719f2871b4104557ca5f59 Mon Sep 17 00:00:00 2001 From: adrian2024lsp Date: Mon, 14 Oct 2024 12:12:44 +1300 Subject: [PATCH 07/16] fix(build): update package json back with cors --- package-lock.json | 38 +++++++++++++++++----------------- packages/examples/package.json | 38 +++++++++++++++++----------------- 2 files changed, 38 insertions(+), 38 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8366c04c6..fe2570d6d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11784,25 +11784,25 @@ "version": "2024.10.4", "license": "MIT", "dependencies": { - "@codingame/monaco-vscode-configuration-service-override": "~10.0.1", - "@codingame/monaco-vscode-files-service-override": "~10.0.1", - "@codingame/monaco-vscode-groovy-default-extension": "~10.0.1", - "@codingame/monaco-vscode-java-default-extension": "~10.0.1", - "@codingame/monaco-vscode-javascript-default-extension": "~10.0.1", - "@codingame/monaco-vscode-json-default-extension": "~10.0.1", - "@codingame/monaco-vscode-keybindings-service-override": "~10.0.1", - "@codingame/monaco-vscode-lifecycle-service-override": "~10.0.1", - "@codingame/monaco-vscode-localization-service-override": "~10.0.1", - "@codingame/monaco-vscode-python-default-extension": "~10.0.1", - "@codingame/monaco-vscode-standalone-json-language-features": "~10.0.1", - "@codingame/monaco-vscode-standalone-languages": "~10.0.1", - "@codingame/monaco-vscode-standalone-typescript-language-features": "~10.0.1", - "@codingame/monaco-vscode-textmate-service-override": "~10.0.1", - "@codingame/monaco-vscode-theme-defaults-default-extension": "~10.0.1", - "@codingame/monaco-vscode-theme-service-override": "~10.0.1", - "@codingame/monaco-vscode-typescript-basics-default-extension": "~10.0.1", - "@codingame/monaco-vscode-typescript-language-features-default-extension": "~10.0.1", - "@typefox/monaco-editor-react": "~6.0.0-next.2", + "@codingame/monaco-vscode-configuration-service-override": "~10.0.2", + "@codingame/monaco-vscode-files-service-override": "~10.0.2", + "@codingame/monaco-vscode-groovy-default-extension": "~10.0.2", + "@codingame/monaco-vscode-java-default-extension": "~10.0.2", + "@codingame/monaco-vscode-javascript-default-extension": "~10.0.2", + "@codingame/monaco-vscode-json-default-extension": "~10.0.2", + "@codingame/monaco-vscode-keybindings-service-override": "~10.0.2", + "@codingame/monaco-vscode-lifecycle-service-override": "~10.0.2", + "@codingame/monaco-vscode-localization-service-override": "~10.0.2", + "@codingame/monaco-vscode-python-default-extension": "~10.0.2", + "@codingame/monaco-vscode-standalone-json-language-features": "~10.0.2", + "@codingame/monaco-vscode-standalone-languages": "~10.0.2", + "@codingame/monaco-vscode-standalone-typescript-language-features": "~10.0.2", + "@codingame/monaco-vscode-textmate-service-override": "~10.0.2", + "@codingame/monaco-vscode-theme-defaults-default-extension": "~10.0.2", + "@codingame/monaco-vscode-theme-service-override": "~10.0.2", + "@codingame/monaco-vscode-typescript-basics-default-extension": "~10.0.2", + "@codingame/monaco-vscode-typescript-language-features-default-extension": "~10.0.2", + "@typefox/monaco-editor-react": "~6.0.09.0.0-next.3", "cors": "^2.8.5", "express": "~4.21.1", "langium": "~3.2.0", diff --git a/packages/examples/package.json b/packages/examples/package.json index bc7d23b45..a01cb1878 100644 --- a/packages/examples/package.json +++ b/packages/examples/package.json @@ -54,25 +54,25 @@ } }, "dependencies": { - "@codingame/monaco-vscode-configuration-service-override": "~10.0.1", - "@codingame/monaco-vscode-files-service-override": "~10.0.1", - "@codingame/monaco-vscode-groovy-default-extension": "~10.0.1", - "@codingame/monaco-vscode-keybindings-service-override": "~10.0.1", - "@codingame/monaco-vscode-lifecycle-service-override": "~10.0.1", - "@codingame/monaco-vscode-localization-service-override": "~10.0.1", - "@codingame/monaco-vscode-java-default-extension": "~10.0.1", - "@codingame/monaco-vscode-javascript-default-extension": "~10.0.1", - "@codingame/monaco-vscode-json-default-extension": "~10.0.1", - "@codingame/monaco-vscode-python-default-extension": "~10.0.1", - "@codingame/monaco-vscode-standalone-languages": "~10.0.1", - "@codingame/monaco-vscode-standalone-typescript-language-features": "~10.0.1", - "@codingame/monaco-vscode-standalone-json-language-features": "~10.0.1", - "@codingame/monaco-vscode-textmate-service-override": "~10.0.1", - "@codingame/monaco-vscode-theme-defaults-default-extension": "~10.0.1", - "@codingame/monaco-vscode-theme-service-override": "~10.0.1", - "@codingame/monaco-vscode-typescript-basics-default-extension": "~10.0.1", - "@codingame/monaco-vscode-typescript-language-features-default-extension": "~10.0.1", - "@typefox/monaco-editor-react": "~6.0.0-next.2", + "@codingame/monaco-vscode-configuration-service-override": "~10.0.2", + "@codingame/monaco-vscode-files-service-override": "~10.0.2", + "@codingame/monaco-vscode-groovy-default-extension": "~10.0.2", + "@codingame/monaco-vscode-keybindings-service-override": "~10.0.2", + "@codingame/monaco-vscode-lifecycle-service-override": "~10.0.2", + "@codingame/monaco-vscode-localization-service-override": "~10.0.2", + "@codingame/monaco-vscode-java-default-extension": "~10.0.2", + "@codingame/monaco-vscode-javascript-default-extension": "~10.0.2", + "@codingame/monaco-vscode-json-default-extension": "~10.0.2", + "@codingame/monaco-vscode-python-default-extension": "~10.0.2", + "@codingame/monaco-vscode-standalone-languages": "~10.0.2", + "@codingame/monaco-vscode-standalone-typescript-language-features": "~10.0.2", + "@codingame/monaco-vscode-standalone-json-language-features": "~10.0.2", + "@codingame/monaco-vscode-textmate-service-override": "~10.0.2", + "@codingame/monaco-vscode-theme-defaults-default-extension": "~10.0.2", + "@codingame/monaco-vscode-theme-service-override": "~10.0.2", + "@codingame/monaco-vscode-typescript-basics-default-extension": "~10.0.2", + "@codingame/monaco-vscode-typescript-language-features-default-extension": "~10.0.2", + "@typefox/monaco-editor-react": "~6.0.09.0.0-next.3", "cors": "^2.8.5", "express": "~4.21.1", "langium": "~3.2.0", From 0e7faad1d90af5ea5788d796fb53e90fe43f280e Mon Sep 17 00:00:00 2001 From: adrian2024lsp Date: Mon, 14 Oct 2024 12:15:56 +1300 Subject: [PATCH 08/16] fix(build): add types/cors --- package-lock.json | 11 +++++++++++ packages/examples/package.json | 1 + 2 files changed, 12 insertions(+) diff --git a/package-lock.json b/package-lock.json index fe2570d6d..09e17b415 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2635,6 +2635,16 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/cors": { + "version": "2.8.17", + "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.17.tgz", + "integrity": "sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@types/estree": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", @@ -11824,6 +11834,7 @@ }, "devDependencies": { "@types/emscripten": "~1.39.13", + "@types/cors": "^2.8.17", "@types/express": "~5.0.0", "@types/ws": "~8.5.12", "langium-cli": "~3.2.0", diff --git a/packages/examples/package.json b/packages/examples/package.json index a01cb1878..bf2d94be1 100644 --- a/packages/examples/package.json +++ b/packages/examples/package.json @@ -93,6 +93,7 @@ "wtd-core": "~4.0.1" }, "devDependencies": { + "@types/cors": "^2.8.17", "@types/express": "~5.0.0", "@types/ws": "~8.5.12", "@types/emscripten": "~1.39.13", From ad36a1577a39f1506881b8a9ceb58bf99bc76722 Mon Sep 17 00:00:00 2001 From: adrian2024lsp Date: Mon, 14 Oct 2024 12:21:13 +1300 Subject: [PATCH 09/16] fix(ci): fix lint errors --- packages/examples/src/json/server/main.ts | 2 +- verify/angular/src/app/app.component.ts | 4 ++-- verify/angular/src/save-code.service.ts | 5 +++++ 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/examples/src/json/server/main.ts b/packages/examples/src/json/server/main.ts index 6694d7b3c..b05b9ae53 100644 --- a/packages/examples/src/json/server/main.ts +++ b/packages/examples/src/json/server/main.ts @@ -43,4 +43,4 @@ export const startMockHttpServerForSavingCodeFromEditor = () => { app.listen(PORT, () => { console.log(`JSON server running on port ${PORT}`); }); -} +}; diff --git a/verify/angular/src/app/app.component.ts b/verify/angular/src/app/app.component.ts index 6875a7e31..0a0b510cf 100644 --- a/verify/angular/src/app/app.component.ts +++ b/verify/angular/src/app/app.component.ts @@ -11,8 +11,8 @@ import { SaveCodeService } from '../save-code.service'; import { firstValueFrom } from 'rxjs'; @Component({ selector: 'app-root', - templateUrl: "./app.component.html", - styleUrls: ["./app.component.scss"], + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'], standalone: true, imports: [MonacoAngularWrapperComponent], }) diff --git a/verify/angular/src/save-code.service.ts b/verify/angular/src/save-code.service.ts index 0f0387d88..7e2eaa91f 100644 --- a/verify/angular/src/save-code.service.ts +++ b/verify/angular/src/save-code.service.ts @@ -1,3 +1,8 @@ +/* -------------------------------------------------------------------------------------------- + * Copyright (c) 2024 TypeFox and others. + * Licensed under the MIT License. See LICENSE in the package root for license information. + * ------------------------------------------------------------------------------------------ */ + import { inject, Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) From 3fec48822e2a1901af310e7b178c4db43cbecc41 Mon Sep 17 00:00:00 2001 From: adrian2024lsp Date: Mon, 14 Oct 2024 15:50:58 +1300 Subject: [PATCH 10/16] fix(angular): rm unneeded check --- .../monaco-angular-wrapper.component.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts b/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts index 941c65ed8..f08eeab45 100644 --- a/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts +++ b/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts @@ -38,12 +38,10 @@ export class MonacoAngularWrapperComponent implements OnDestroy { effect(async () => { try { if (this.wrapperConfig() !== undefined) { - if (this.wrapperConfig() !== undefined) { - await this.wrapper.initAndStart( - this.wrapperConfig() as WrapperConfig - ); - this.handleOnTextChanged(); - } + await this.wrapper.initAndStart( + this.wrapperConfig() as WrapperConfig + ); + this.handleOnTextChanged(); } } catch (e) { console.error(e); From 8769bec4a1013a6ea787df99784f97ce2a4d5aa4 Mon Sep 17 00:00:00 2001 From: adrian2024lsp Date: Wed, 23 Oct 2024 11:07:51 +1300 Subject: [PATCH 11/16] fix(angular): update packages --- package-lock.json | 38 +++++++++++++++++----------------- packages/examples/package.json | 38 +++++++++++++++++----------------- 2 files changed, 38 insertions(+), 38 deletions(-) diff --git a/package-lock.json b/package-lock.json index 09e17b415..9d1db2cad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11794,25 +11794,25 @@ "version": "2024.10.4", "license": "MIT", "dependencies": { - "@codingame/monaco-vscode-configuration-service-override": "~10.0.2", - "@codingame/monaco-vscode-files-service-override": "~10.0.2", - "@codingame/monaco-vscode-groovy-default-extension": "~10.0.2", - "@codingame/monaco-vscode-java-default-extension": "~10.0.2", - "@codingame/monaco-vscode-javascript-default-extension": "~10.0.2", - "@codingame/monaco-vscode-json-default-extension": "~10.0.2", - "@codingame/monaco-vscode-keybindings-service-override": "~10.0.2", - "@codingame/monaco-vscode-lifecycle-service-override": "~10.0.2", - "@codingame/monaco-vscode-localization-service-override": "~10.0.2", - "@codingame/monaco-vscode-python-default-extension": "~10.0.2", - "@codingame/monaco-vscode-standalone-json-language-features": "~10.0.2", - "@codingame/monaco-vscode-standalone-languages": "~10.0.2", - "@codingame/monaco-vscode-standalone-typescript-language-features": "~10.0.2", - "@codingame/monaco-vscode-textmate-service-override": "~10.0.2", - "@codingame/monaco-vscode-theme-defaults-default-extension": "~10.0.2", - "@codingame/monaco-vscode-theme-service-override": "~10.0.2", - "@codingame/monaco-vscode-typescript-basics-default-extension": "~10.0.2", - "@codingame/monaco-vscode-typescript-language-features-default-extension": "~10.0.2", - "@typefox/monaco-editor-react": "~6.0.09.0.0-next.3", + "@codingame/monaco-vscode-configuration-service-override": "~10.1.0", + "@codingame/monaco-vscode-files-service-override": "~10.1.0", + "@codingame/monaco-vscode-groovy-default-extension": "~10.1.0", + "@codingame/monaco-vscode-java-default-extension": "~10.1.0", + "@codingame/monaco-vscode-javascript-default-extension": "~10.1.0", + "@codingame/monaco-vscode-json-default-extension": "~10.1.0", + "@codingame/monaco-vscode-keybindings-service-override": "~10.1.0", + "@codingame/monaco-vscode-lifecycle-service-override": "~10.1.0", + "@codingame/monaco-vscode-localization-service-override": "~10.1.0", + "@codingame/monaco-vscode-python-default-extension": "~10.1.0", + "@codingame/monaco-vscode-standalone-json-language-features": "~10.1.0", + "@codingame/monaco-vscode-standalone-languages": "~10.1.0", + "@codingame/monaco-vscode-standalone-typescript-language-features": "~10.1.0", + "@codingame/monaco-vscode-textmate-service-override": "~10.1.0", + "@codingame/monaco-vscode-theme-defaults-default-extension": "~10.1.0", + "@codingame/monaco-vscode-theme-service-override": "~10.1.0", + "@codingame/monaco-vscode-typescript-basics-default-extension": "~10.1.0", + "@codingame/monaco-vscode-typescript-language-features-default-extension": "~10.1.0", + "@typefox/monaco-editor-react": "~6.0.0-next.4", "cors": "^2.8.5", "express": "~4.21.1", "langium": "~3.2.0", diff --git a/packages/examples/package.json b/packages/examples/package.json index bf2d94be1..85bc3a122 100644 --- a/packages/examples/package.json +++ b/packages/examples/package.json @@ -54,25 +54,25 @@ } }, "dependencies": { - "@codingame/monaco-vscode-configuration-service-override": "~10.0.2", - "@codingame/monaco-vscode-files-service-override": "~10.0.2", - "@codingame/monaco-vscode-groovy-default-extension": "~10.0.2", - "@codingame/monaco-vscode-keybindings-service-override": "~10.0.2", - "@codingame/monaco-vscode-lifecycle-service-override": "~10.0.2", - "@codingame/monaco-vscode-localization-service-override": "~10.0.2", - "@codingame/monaco-vscode-java-default-extension": "~10.0.2", - "@codingame/monaco-vscode-javascript-default-extension": "~10.0.2", - "@codingame/monaco-vscode-json-default-extension": "~10.0.2", - "@codingame/monaco-vscode-python-default-extension": "~10.0.2", - "@codingame/monaco-vscode-standalone-languages": "~10.0.2", - "@codingame/monaco-vscode-standalone-typescript-language-features": "~10.0.2", - "@codingame/monaco-vscode-standalone-json-language-features": "~10.0.2", - "@codingame/monaco-vscode-textmate-service-override": "~10.0.2", - "@codingame/monaco-vscode-theme-defaults-default-extension": "~10.0.2", - "@codingame/monaco-vscode-theme-service-override": "~10.0.2", - "@codingame/monaco-vscode-typescript-basics-default-extension": "~10.0.2", - "@codingame/monaco-vscode-typescript-language-features-default-extension": "~10.0.2", - "@typefox/monaco-editor-react": "~6.0.09.0.0-next.3", + "@codingame/monaco-vscode-configuration-service-override": "~10.1.0", + "@codingame/monaco-vscode-files-service-override": "~10.1.0", + "@codingame/monaco-vscode-groovy-default-extension": "~10.1.0", + "@codingame/monaco-vscode-keybindings-service-override": "~10.1.0", + "@codingame/monaco-vscode-lifecycle-service-override": "~10.1.0", + "@codingame/monaco-vscode-localization-service-override": "~10.1.0", + "@codingame/monaco-vscode-java-default-extension": "~10.1.0", + "@codingame/monaco-vscode-javascript-default-extension": "~10.1.0", + "@codingame/monaco-vscode-json-default-extension": "~10.1.0", + "@codingame/monaco-vscode-python-default-extension": "~10.1.0", + "@codingame/monaco-vscode-standalone-languages": "~10.1.0", + "@codingame/monaco-vscode-standalone-typescript-language-features": "~10.1.0", + "@codingame/monaco-vscode-standalone-json-language-features": "~10.1.0", + "@codingame/monaco-vscode-textmate-service-override": "~10.1.0", + "@codingame/monaco-vscode-theme-defaults-default-extension": "~10.1.0", + "@codingame/monaco-vscode-theme-service-override": "~10.1.0", + "@codingame/monaco-vscode-typescript-basics-default-extension": "~10.1.0", + "@codingame/monaco-vscode-typescript-language-features-default-extension": "~10.1.0", + "@typefox/monaco-editor-react": "~6.0.0-next.4", "cors": "^2.8.5", "express": "~4.21.1", "langium": "~3.2.0", From 2cae1e09060ff537444bfc048eebc6fff269c710 Mon Sep 17 00:00:00 2001 From: adrian2024lsp Date: Thu, 24 Oct 2024 10:16:47 +1300 Subject: [PATCH 12/16] fix(angular): fix cors demo --- package-lock.json | 55 +++++++++++++++++----------------- packages/examples/package.json | 39 ++++++++++++------------ 2 files changed, 48 insertions(+), 46 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9d1db2cad..e03cb63d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2628,13 +2628,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@types/emscripten": { - "version": "1.39.13", - "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.39.13.tgz", - "integrity": "sha512-cFq+fO/isvhvmuP/+Sl4K4jtU6E23DoivtbO4r50e3odaxAiVdbfSYRDdJ4gCdxx+3aRjhphS5ZMwIH4hFy/Cw==", - "dev": true, - "license": "MIT" - }, "node_modules/@types/cors": { "version": "2.8.17", "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.17.tgz", @@ -2645,6 +2638,13 @@ "@types/node": "*" } }, + "node_modules/@types/emscripten": { + "version": "1.39.13", + "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.39.13.tgz", + "integrity": "sha512-cFq+fO/isvhvmuP/+Sl4K4jtU6E23DoivtbO4r50e3odaxAiVdbfSYRDdJ4gCdxx+3aRjhphS5ZMwIH4hFy/Cw==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/estree": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", @@ -11794,25 +11794,26 @@ "version": "2024.10.4", "license": "MIT", "dependencies": { - "@codingame/monaco-vscode-configuration-service-override": "~10.1.0", - "@codingame/monaco-vscode-files-service-override": "~10.1.0", - "@codingame/monaco-vscode-groovy-default-extension": "~10.1.0", - "@codingame/monaco-vscode-java-default-extension": "~10.1.0", - "@codingame/monaco-vscode-javascript-default-extension": "~10.1.0", - "@codingame/monaco-vscode-json-default-extension": "~10.1.0", - "@codingame/monaco-vscode-keybindings-service-override": "~10.1.0", - "@codingame/monaco-vscode-lifecycle-service-override": "~10.1.0", - "@codingame/monaco-vscode-localization-service-override": "~10.1.0", - "@codingame/monaco-vscode-python-default-extension": "~10.1.0", - "@codingame/monaco-vscode-standalone-json-language-features": "~10.1.0", - "@codingame/monaco-vscode-standalone-languages": "~10.1.0", - "@codingame/monaco-vscode-standalone-typescript-language-features": "~10.1.0", - "@codingame/monaco-vscode-textmate-service-override": "~10.1.0", - "@codingame/monaco-vscode-theme-defaults-default-extension": "~10.1.0", - "@codingame/monaco-vscode-theme-service-override": "~10.1.0", - "@codingame/monaco-vscode-typescript-basics-default-extension": "~10.1.0", - "@codingame/monaco-vscode-typescript-language-features-default-extension": "~10.1.0", - "@typefox/monaco-editor-react": "~6.0.0-next.4", + "@codingame/monaco-vscode-configuration-service-override": "~10.1.1", + "@codingame/monaco-vscode-cpp-default-extension": "~10.1.1", + "@codingame/monaco-vscode-files-service-override": "~10.1.1", + "@codingame/monaco-vscode-groovy-default-extension": "~10.1.1", + "@codingame/monaco-vscode-java-default-extension": "~10.1.1", + "@codingame/monaco-vscode-javascript-default-extension": "~10.1.1", + "@codingame/monaco-vscode-json-default-extension": "~10.1.1", + "@codingame/monaco-vscode-keybindings-service-override": "~10.1.1", + "@codingame/monaco-vscode-lifecycle-service-override": "~10.1.1", + "@codingame/monaco-vscode-localization-service-override": "~10.1.1", + "@codingame/monaco-vscode-python-default-extension": "~10.1.1", + "@codingame/monaco-vscode-standalone-json-language-features": "~10.1.1", + "@codingame/monaco-vscode-standalone-languages": "~10.1.1", + "@codingame/monaco-vscode-standalone-typescript-language-features": "~10.1.1", + "@codingame/monaco-vscode-textmate-service-override": "~10.1.1", + "@codingame/monaco-vscode-theme-defaults-default-extension": "~10.1.1", + "@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", + "@typefox/monaco-editor-react": "~6.0.0-next.5", "cors": "^2.8.5", "express": "~4.21.1", "langium": "~3.2.0", @@ -11833,8 +11834,8 @@ "wtd-core": "~4.0.1" }, "devDependencies": { - "@types/emscripten": "~1.39.13", "@types/cors": "^2.8.17", + "@types/emscripten": "~1.39.13", "@types/express": "~5.0.0", "@types/ws": "~8.5.12", "langium-cli": "~3.2.0", diff --git a/packages/examples/package.json b/packages/examples/package.json index 85bc3a122..9e96a7ca9 100644 --- a/packages/examples/package.json +++ b/packages/examples/package.json @@ -54,25 +54,26 @@ } }, "dependencies": { - "@codingame/monaco-vscode-configuration-service-override": "~10.1.0", - "@codingame/monaco-vscode-files-service-override": "~10.1.0", - "@codingame/monaco-vscode-groovy-default-extension": "~10.1.0", - "@codingame/monaco-vscode-keybindings-service-override": "~10.1.0", - "@codingame/monaco-vscode-lifecycle-service-override": "~10.1.0", - "@codingame/monaco-vscode-localization-service-override": "~10.1.0", - "@codingame/monaco-vscode-java-default-extension": "~10.1.0", - "@codingame/monaco-vscode-javascript-default-extension": "~10.1.0", - "@codingame/monaco-vscode-json-default-extension": "~10.1.0", - "@codingame/monaco-vscode-python-default-extension": "~10.1.0", - "@codingame/monaco-vscode-standalone-languages": "~10.1.0", - "@codingame/monaco-vscode-standalone-typescript-language-features": "~10.1.0", - "@codingame/monaco-vscode-standalone-json-language-features": "~10.1.0", - "@codingame/monaco-vscode-textmate-service-override": "~10.1.0", - "@codingame/monaco-vscode-theme-defaults-default-extension": "~10.1.0", - "@codingame/monaco-vscode-theme-service-override": "~10.1.0", - "@codingame/monaco-vscode-typescript-basics-default-extension": "~10.1.0", - "@codingame/monaco-vscode-typescript-language-features-default-extension": "~10.1.0", - "@typefox/monaco-editor-react": "~6.0.0-next.4", + "@codingame/monaco-vscode-configuration-service-override": "~10.1.1", + "@codingame/monaco-vscode-cpp-default-extension": "~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", + "@codingame/monaco-vscode-lifecycle-service-override": "~10.1.1", + "@codingame/monaco-vscode-localization-service-override": "~10.1.1", + "@codingame/monaco-vscode-java-default-extension": "~10.1.1", + "@codingame/monaco-vscode-javascript-default-extension": "~10.1.1", + "@codingame/monaco-vscode-json-default-extension": "~10.1.1", + "@codingame/monaco-vscode-python-default-extension": "~10.1.1", + "@codingame/monaco-vscode-standalone-languages": "~10.1.1", + "@codingame/monaco-vscode-standalone-typescript-language-features": "~10.1.1", + "@codingame/monaco-vscode-standalone-json-language-features": "~10.1.1", + "@codingame/monaco-vscode-textmate-service-override": "~10.1.1", + "@codingame/monaco-vscode-theme-defaults-default-extension": "~10.1.1", + "@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", + "@typefox/monaco-editor-react": "~6.0.0-next.5", "cors": "^2.8.5", "express": "~4.21.1", "langium": "~3.2.0", From 1a6b500ae99a2784e4208ecd9214fea041d14a63 Mon Sep 17 00:00:00 2001 From: adrian2024lsp Date: Thu, 24 Oct 2024 10:40:11 +1300 Subject: [PATCH 13/16] feat(angular): add didModelContentChange to emitCodeChange --- .../monaco-angular-wrapper.component.ts | 33 +++++++++---------- 1 file changed, 16 insertions(+), 17 deletions(-) diff --git a/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts b/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts index f08eeab45..ca9023c97 100644 --- a/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts +++ b/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts @@ -15,7 +15,9 @@ import { import * as monaco from 'monaco-editor'; import { MonacoEditorLanguageClientWrapper, - WrapperConfig, + TextChanges, + TextModels, + WrapperConfig , didModelContentChange } from 'monaco-editor-wrapper'; @Component({ @@ -58,6 +60,7 @@ export class MonacoAngularWrapperComponent implements OnDestroy { } catch { // The language client may throw an error during disposal. // This should not prevent us from continue working. + console.error('Error during disposal of the language client.'); } if (this._subscription) { this._subscription.dispose(); @@ -69,30 +72,26 @@ export class MonacoAngularWrapperComponent implements OnDestroy { } handleOnTextChanged() { + const wrapperConfig = this.wrapperConfig() ; const textModels = this.wrapper.getTextModels(); if (textModels) { - const verifyModelContent = () => { - const text = textModels.text?.getValue() ?? ''; - const textOriginal = textModels.textOriginal?.getValue() ?? ''; - const codeResources = (this.wrapperConfig() as WrapperConfig) - .editorAppConfig.codeResources; - const dirty = text !== codeResources?.main?.text; - const dirtyOriginal = - textOriginal !== codeResources?.original?.text; - this.onTextChanged.emit(text); - console.log('dirty , dirtyOriginal', dirty, dirtyOriginal); - }; - const newSubscriptions: monaco.IDisposable[] = []; - - if (textModels.text) { - verifyModelContent(); + if (textModels.text && wrapperConfig) { + this.emitCodeChange(textModels , wrapperConfig); newSubscriptions.push( textModels.text.onDidChangeContent(() => { - verifyModelContent(); + this.emitCodeChange(textModels , wrapperConfig); }) ); } } } + + emitCodeChange(textModels : TextModels , wrapperConfig : WrapperConfig ) { + const onTextChanged = (textChanges: TextChanges) => { + this.onTextChanged.emit(textChanges.text); + } + didModelContentChange(textModels, wrapperConfig.editorAppConfig.codeResources, onTextChanged); + } + } From 3dc9f8e3e5aa838192a1366da053fbb25e56ad3c Mon Sep 17 00:00:00 2001 From: adrian2024lsp Date: Thu, 24 Oct 2024 10:45:07 +1300 Subject: [PATCH 14/16] fix(angular): fix ci lint --- .../monaco-angular-wrapper.component.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts b/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts index ca9023c97..d6fa0ca83 100644 --- a/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts +++ b/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts @@ -76,7 +76,7 @@ export class MonacoAngularWrapperComponent implements OnDestroy { const textModels = this.wrapper.getTextModels(); if (textModels) { const newSubscriptions: monaco.IDisposable[] = []; - if (textModels.text && wrapperConfig) { + if (!!textModels.text && !!wrapperConfig) { this.emitCodeChange(textModels , wrapperConfig); newSubscriptions.push( textModels.text.onDidChangeContent(() => { @@ -87,10 +87,10 @@ export class MonacoAngularWrapperComponent implements OnDestroy { } } - emitCodeChange(textModels : TextModels , wrapperConfig : WrapperConfig ) { + emitCodeChange(textModels: TextModels , wrapperConfig: WrapperConfig ) { const onTextChanged = (textChanges: TextChanges) => { this.onTextChanged.emit(textChanges.text); - } + }; didModelContentChange(textModels, wrapperConfig.editorAppConfig.codeResources, onTextChanged); } From 7e4b18e315d32c83ca114e2845a72a5d170b23cf Mon Sep 17 00:00:00 2001 From: adrian2024lsp Date: Thu, 24 Oct 2024 10:51:23 +1300 Subject: [PATCH 15/16] fix(angular): fix handleOnTextChanged lint issue --- .../monaco-angular-wrapper.component.ts | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts b/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts index d6fa0ca83..12b35da5d 100644 --- a/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts +++ b/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts @@ -72,18 +72,18 @@ export class MonacoAngularWrapperComponent implements OnDestroy { } handleOnTextChanged() { - const wrapperConfig = this.wrapperConfig() ; + const wrapperConfig = this.wrapperConfig(); const textModels = this.wrapper.getTextModels(); - if (textModels) { + + if (textModels && typeof textModels.text !== 'undefined' && wrapperConfig) { const newSubscriptions: monaco.IDisposable[] = []; - if (!!textModels.text && !!wrapperConfig) { - this.emitCodeChange(textModels , wrapperConfig); - newSubscriptions.push( - textModels.text.onDidChangeContent(() => { - this.emitCodeChange(textModels , wrapperConfig); - }) - ); - } + + this.emitCodeChange(textModels, wrapperConfig); + newSubscriptions.push( + textModels.text.onDidChangeContent(() => { + this.emitCodeChange(textModels, wrapperConfig); + }) + ); } } From 8349478ed54f1693617273c98b1789ffdf477165 Mon Sep 17 00:00:00 2001 From: adrian2024lsp Date: Thu, 24 Oct 2024 11:06:19 +1300 Subject: [PATCH 16/16] fix(angular): fix null check --- .../monaco-angular-wrapper.component.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts b/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts index 12b35da5d..fd1b5a1d6 100644 --- a/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts +++ b/verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts @@ -74,10 +74,8 @@ export class MonacoAngularWrapperComponent implements OnDestroy { handleOnTextChanged() { const wrapperConfig = this.wrapperConfig(); const textModels = this.wrapper.getTextModels(); - - if (textModels && typeof textModels.text !== 'undefined' && wrapperConfig) { + if (textModels?.text !== undefined && wrapperConfig !== undefined) { const newSubscriptions: monaco.IDisposable[] = []; - this.emitCodeChange(textModels, wrapperConfig); newSubscriptions.push( textModels.text.onDidChangeContent(() => {