From 5db14368dad2b3477027ee3530e5ad6dec1794de Mon Sep 17 00:00:00 2001 From: adrian2024lsp Date: Fri, 25 Oct 2024 10:25:01 +1300 Subject: [PATCH 1/5] feat(angular): add groovy to angular --- verify/angular/angular.json | 10 +++- verify/angular/src/app/app.component.html | 42 +++++++++++---- verify/angular/src/app/app.component.ts | 9 +++- verify/angular/src/config/groovy.config.ts | 63 ++++++++++++++++++++++ verify/angular/src/index.html | 3 +- 5 files changed, 114 insertions(+), 13 deletions(-) create mode 100644 verify/angular/src/config/groovy.config.ts diff --git a/verify/angular/angular.json b/verify/angular/angular.json index 565c42bd4..24d9fc813 100644 --- a/verify/angular/angular.json +++ b/verify/angular/angular.json @@ -21,7 +21,15 @@ "polyfills": [ "zone.js" ], - "assets": [], + "assets": [ + "src/assets", + { "glob": "**/*", "input": "./node_modules/monaco-editor/esm/vs/base/worker", "output": "./assets/worker" }, + { "glob": "**/*", "input": "./node_modules/monaco-editor/esm/vs/editor", "output": "./assets/editor" }, + { "glob": "**/*", "input": "./node_modules/monaco-editor/esm/vs/language/json", "output": "./assets/json" }, + { "glob": "**/*", "input": "./node_modules/monaco-editor/esm/vs/language/css", "output": "./assets/css" }, + { "glob": "**/*", "input": "./node_modules/monaco-editor/esm/vs/language/html", "output": "./assets/html" }, + { "glob": "**/*", "input": "./node_modules/monaco-editor/esm/vs/language/typescript", "output": "./assets/typescript" } + ], "styles": [], "scripts": [], "aot": false, diff --git a/verify/angular/src/app/app.component.html b/verify/angular/src/app/app.component.html index c5c54137d..bc10ddffd 100644 --- a/verify/angular/src/app/app.component.html +++ b/verify/angular/src/app/app.component.html @@ -1,11 +1,33 @@ -

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

-
- - - +

Angular Monaco Editor Demo

+ +
+ +
+

JSON Editor

+ + + +
+ + +
+

Groovy Editor

+ + + +
diff --git a/verify/angular/src/app/app.component.ts b/verify/angular/src/app/app.component.ts index 0a0b510cf..258ded452 100644 --- a/verify/angular/src/app/app.component.ts +++ b/verify/angular/src/app/app.component.ts @@ -9,6 +9,7 @@ import { MonacoAngularWrapperComponent } from '../monaco-angular-wrapper/monaco- import { buildJsonClientUserConfig } from 'monaco-languageclient-examples/json-client'; import { SaveCodeService } from '../save-code.service'; import { firstValueFrom } from 'rxjs'; +import { getGroovyClientConfig } from '../config/groovy.config'; @Component({ selector: 'app-root', templateUrl: './app.component.html', @@ -19,20 +20,26 @@ import { firstValueFrom } from 'rxjs'; export class AppComponent implements AfterViewInit { private saveCodeService = inject(SaveCodeService); wrapperConfig = signal(undefined); // this can be updated at runtime - + groovyWrapperConfig = 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 + groovyEditorId = 'monaco-editor-groovy'; // 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 editorDom = document.getElementById(this.editorId); + const groovyEditorDom = document.getElementById(this.groovyEditorId); if (editorDom) { const config = buildJsonClientUserConfig({ htmlContainer: editorDom, }); this.wrapperConfig.set(config); } + if (groovyEditorDom) { + const groovyConfig = getGroovyClientConfig(this.groovyEditorId); + this.groovyWrapperConfig.set(groovyConfig); + } } onTextChanged(text: string) { diff --git a/verify/angular/src/config/groovy.config.ts b/verify/angular/src/config/groovy.config.ts new file mode 100644 index 000000000..badc9843c --- /dev/null +++ b/verify/angular/src/config/groovy.config.ts @@ -0,0 +1,63 @@ +import { LogLevel } from "vscode"; +import { useWorkerFactory } from "monaco-editor-wrapper/workerFactory"; +import getKeybindingsServiceOverride from "@codingame/monaco-vscode-keybindings-service-override"; +import { WrapperConfig } from "monaco-editor-wrapper"; +export function getGroovyClientConfig(htmlContainerId: string) { + const configureMonacoWorkers = () => { + useWorkerFactory({ + workerOverrides: { + ignoreMapping: true, + workerLoaders: { + TextEditorWorker: () => + new Worker( + new URL( + "monaco-editor/esm/vs/editor/editor.worker.js", + import.meta.url + ), + { type: "module" } + ), + }, + }, + }); + }; + const userConfig: WrapperConfig = { + logLevel: LogLevel.Debug, + vscodeApiConfig: { + userServices: { + ...getKeybindingsServiceOverride(), + }, + userConfiguration: { + json: JSON.stringify({ + "workbench.colorTheme": "Default Dark Modern", + "editor.guides.bracketPairsHorizontal": "active", + "editor.wordBasedSuggestions": "off", + "editor.experimental.asyncTokenization": true, + }), + }, + }, + editorAppConfig: { + $type: "extended", + codeResources: { + main: { + text: "", + fileExt: "groovy", + }, + }, + useDiffEditor: false, + monacoWorkerFactory: configureMonacoWorkers, + htmlContainer: document.getElementById(htmlContainerId)!, + }, + languageClientConfigs: { + groovy: { + languageId: "groovy", + connection: { + options: { + $type: "WebSocketUrl", + url: `ws://localhost:30002/groovy`, + }, + }, + }, + }, + }; + return userConfig; +} diff --git a/verify/angular/src/index.html b/verify/angular/src/index.html index c2db5b0db..09175661d 100644 --- a/verify/angular/src/index.html +++ b/verify/angular/src/index.html @@ -2,9 +2,10 @@ - HelloWorld + Angular Wrapper Demo + From 6f181d8a3d01c81dc57fc930f371f4f901e022b5 Mon Sep 17 00:00:00 2001 From: Kai Salmen Date: Tue, 29 Oct 2024 08:32:03 +0100 Subject: [PATCH 2/5] fix monaco-editor worker --- eslint.config.mjs | 3 +- verify/angular/angular.json | 10 +---- verify/angular/src/config/groovy.config.ts | 50 ++++++++-------------- 3 files changed, 22 insertions(+), 41 deletions(-) diff --git a/eslint.config.mjs b/eslint.config.mjs index 8c338b750..0e5aaa930 100644 --- 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/verify/angular/angular.json b/verify/angular/angular.json index 24d9fc813..565c42bd4 100644 --- a/verify/angular/angular.json +++ b/verify/angular/angular.json @@ -21,15 +21,7 @@ "polyfills": [ "zone.js" ], - "assets": [ - "src/assets", - { "glob": "**/*", "input": "./node_modules/monaco-editor/esm/vs/base/worker", "output": "./assets/worker" }, - { "glob": "**/*", "input": "./node_modules/monaco-editor/esm/vs/editor", "output": "./assets/editor" }, - { "glob": "**/*", "input": "./node_modules/monaco-editor/esm/vs/language/json", "output": "./assets/json" }, - { "glob": "**/*", "input": "./node_modules/monaco-editor/esm/vs/language/css", "output": "./assets/css" }, - { "glob": "**/*", "input": "./node_modules/monaco-editor/esm/vs/language/html", "output": "./assets/html" }, - { "glob": "**/*", "input": "./node_modules/monaco-editor/esm/vs/language/typescript", "output": "./assets/typescript" } - ], + "assets": [], "styles": [], "scripts": [], "aot": false, diff --git a/verify/angular/src/config/groovy.config.ts b/verify/angular/src/config/groovy.config.ts index badc9843c..b10e8f950 100644 --- a/verify/angular/src/config/groovy.config.ts +++ b/verify/angular/src/config/groovy.config.ts @@ -1,25 +1,13 @@ -import { LogLevel } from "vscode"; -import { useWorkerFactory } from "monaco-editor-wrapper/workerFactory"; -import getKeybindingsServiceOverride from "@codingame/monaco-vscode-keybindings-service-override"; -import { WrapperConfig } from "monaco-editor-wrapper"; +/* -------------------------------------------------------------------------------------------- + * Copyright (c) 2024 TypeFox and others. + * Licensed under the MIT License. See LICENSE in the package root for license information. + * ------------------------------------------------------------------------------------------ */ + +import { LogLevel } from 'vscode'; +import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override'; +import { WrapperConfig } from 'monaco-editor-wrapper'; +import { configureMonacoWorkers } from 'monaco-languageclient-examples'; export function getGroovyClientConfig(htmlContainerId: string) { - const configureMonacoWorkers = () => { - useWorkerFactory({ - workerOverrides: { - ignoreMapping: true, - workerLoaders: { - TextEditorWorker: () => - new Worker( - new URL( - "monaco-editor/esm/vs/editor/editor.worker.js", - import.meta.url - ), - { type: "module" } - ), - }, - }, - }); - }; const userConfig: WrapperConfig = { logLevel: LogLevel.Debug, vscodeApiConfig: { @@ -28,19 +16,19 @@ export function getGroovyClientConfig(htmlContainerId: string) { }, userConfiguration: { json: JSON.stringify({ - "workbench.colorTheme": "Default Dark Modern", - "editor.guides.bracketPairsHorizontal": "active", - "editor.wordBasedSuggestions": "off", - "editor.experimental.asyncTokenization": true, + 'workbench.colorTheme': 'Default Dark Modern', + 'editor.guides.bracketPairsHorizontal': 'active', + 'editor.wordBasedSuggestions': 'off', + 'editor.experimental.asyncTokenization': true, }), }, }, editorAppConfig: { - $type: "extended", + $type: 'extended', codeResources: { main: { - text: "", - fileExt: "groovy", + text: '', + fileExt: 'groovy', }, }, useDiffEditor: false, @@ -49,11 +37,11 @@ export function getGroovyClientConfig(htmlContainerId: string) { }, languageClientConfigs: { groovy: { - languageId: "groovy", + languageId: 'groovy', connection: { options: { - $type: "WebSocketUrl", - url: `ws://localhost:30002/groovy`, + $type: 'WebSocketUrl', + url: 'ws://localhost:30002/groovy', }, }, }, From 34559a55bc7b0e825756e39ab775f39aede014b4 Mon Sep 17 00:00:00 2001 From: adrian2024lsp Date: Wed, 30 Oct 2024 16:52:03 +1300 Subject: [PATCH 3/5] feat(angular): update groovy config --- eslint.config.mjs | 3 +- .../resources/groovy/docker-compose.yml | 11 +--- verify/angular/angular.json | 9 ---- verify/angular/src/config/groovy.config.ts | 50 +++++++------------ 4 files changed, 23 insertions(+), 50 deletions(-) diff --git a/eslint.config.mjs b/eslint.config.mjs index 8c338b750..0e5aaa930 100644 --- 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/packages/examples/resources/groovy/docker-compose.yml b/packages/examples/resources/groovy/docker-compose.yml index 70cc7c8bf..1dafa58b5 100644 --- a/packages/examples/resources/groovy/docker-compose.yml +++ b/packages/examples/resources/groovy/docker-compose.yml @@ -4,15 +4,8 @@ services: build: dockerfile: ./packages/examples/resources/groovy/Dockerfile context: ../../../.. - # requires "Use containerd for pulling and storing images" in Docker Desktop - platforms: - - "linux/amd64" - # pre-built volta binaries are currently unavailable for linux/arm64, will change with v2.0.0 - # - "linux/arm64" - platform: linux/amd64 - command: [ - "bash", "-c", "npm run start:example:server:groovy" - ] + platform: linux/amd64 # Use this for platform targeting + command: ["bash", "-c", "npm run start:example:server:groovy"] ports: - 30002:30002 working_dir: /home/gradle/mlc diff --git a/verify/angular/angular.json b/verify/angular/angular.json index 24d9fc813..01a1c04e2 100644 --- a/verify/angular/angular.json +++ b/verify/angular/angular.json @@ -21,15 +21,6 @@ "polyfills": [ "zone.js" ], - "assets": [ - "src/assets", - { "glob": "**/*", "input": "./node_modules/monaco-editor/esm/vs/base/worker", "output": "./assets/worker" }, - { "glob": "**/*", "input": "./node_modules/monaco-editor/esm/vs/editor", "output": "./assets/editor" }, - { "glob": "**/*", "input": "./node_modules/monaco-editor/esm/vs/language/json", "output": "./assets/json" }, - { "glob": "**/*", "input": "./node_modules/monaco-editor/esm/vs/language/css", "output": "./assets/css" }, - { "glob": "**/*", "input": "./node_modules/monaco-editor/esm/vs/language/html", "output": "./assets/html" }, - { "glob": "**/*", "input": "./node_modules/monaco-editor/esm/vs/language/typescript", "output": "./assets/typescript" } - ], "styles": [], "scripts": [], "aot": false, diff --git a/verify/angular/src/config/groovy.config.ts b/verify/angular/src/config/groovy.config.ts index badc9843c..b10e8f950 100644 --- a/verify/angular/src/config/groovy.config.ts +++ b/verify/angular/src/config/groovy.config.ts @@ -1,25 +1,13 @@ -import { LogLevel } from "vscode"; -import { useWorkerFactory } from "monaco-editor-wrapper/workerFactory"; -import getKeybindingsServiceOverride from "@codingame/monaco-vscode-keybindings-service-override"; -import { WrapperConfig } from "monaco-editor-wrapper"; +/* -------------------------------------------------------------------------------------------- + * Copyright (c) 2024 TypeFox and others. + * Licensed under the MIT License. See LICENSE in the package root for license information. + * ------------------------------------------------------------------------------------------ */ + +import { LogLevel } from 'vscode'; +import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override'; +import { WrapperConfig } from 'monaco-editor-wrapper'; +import { configureMonacoWorkers } from 'monaco-languageclient-examples'; export function getGroovyClientConfig(htmlContainerId: string) { - const configureMonacoWorkers = () => { - useWorkerFactory({ - workerOverrides: { - ignoreMapping: true, - workerLoaders: { - TextEditorWorker: () => - new Worker( - new URL( - "monaco-editor/esm/vs/editor/editor.worker.js", - import.meta.url - ), - { type: "module" } - ), - }, - }, - }); - }; const userConfig: WrapperConfig = { logLevel: LogLevel.Debug, vscodeApiConfig: { @@ -28,19 +16,19 @@ export function getGroovyClientConfig(htmlContainerId: string) { }, userConfiguration: { json: JSON.stringify({ - "workbench.colorTheme": "Default Dark Modern", - "editor.guides.bracketPairsHorizontal": "active", - "editor.wordBasedSuggestions": "off", - "editor.experimental.asyncTokenization": true, + 'workbench.colorTheme': 'Default Dark Modern', + 'editor.guides.bracketPairsHorizontal': 'active', + 'editor.wordBasedSuggestions': 'off', + 'editor.experimental.asyncTokenization': true, }), }, }, editorAppConfig: { - $type: "extended", + $type: 'extended', codeResources: { main: { - text: "", - fileExt: "groovy", + text: '', + fileExt: 'groovy', }, }, useDiffEditor: false, @@ -49,11 +37,11 @@ export function getGroovyClientConfig(htmlContainerId: string) { }, languageClientConfigs: { groovy: { - languageId: "groovy", + languageId: 'groovy', connection: { options: { - $type: "WebSocketUrl", - url: `ws://localhost:30002/groovy`, + $type: 'WebSocketUrl', + url: 'ws://localhost:30002/groovy', }, }, }, From d1a1dc76042e941292768664fc1376f8fdf5001c Mon Sep 17 00:00:00 2001 From: adrian2024lsp Date: Thu, 31 Oct 2024 10:46:19 +1300 Subject: [PATCH 4/5] fix(angular-groovy): add monaco-vscode packages --- verify/angular/package.json | 21 ++++++++++++++++++++- verify/angular/src/app/app.component.html | 13 ------------- verify/angular/src/app/app.component.ts | 9 +-------- 3 files changed, 21 insertions(+), 22 deletions(-) diff --git a/verify/angular/package.json b/verify/angular/package.json index 4ac199a15..37c3c8ac3 100644 --- a/verify/angular/package.json +++ b/verify/angular/package.json @@ -25,7 +25,26 @@ "monaco-languageclient-examples": "~2024.10.4", "vscode": "npm:@codingame/monaco-vscode-api@~10.1.1", "rxjs": "~7.8.1", - "zone.js": "~0.14.10" + "zone.js": "~0.14.10", + "@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" }, "devDependencies": { "@angular-builders/custom-esbuild": "~18.0.0", diff --git a/verify/angular/src/app/app.component.html b/verify/angular/src/app/app.component.html index bc10ddffd..bf0ec1030 100644 --- a/verify/angular/src/app/app.component.html +++ b/verify/angular/src/app/app.component.html @@ -1,20 +1,7 @@

Angular Monaco Editor Demo

- -
-

JSON Editor

- - -
diff --git a/verify/angular/src/app/app.component.ts b/verify/angular/src/app/app.component.ts index 258ded452..848c455c0 100644 --- a/verify/angular/src/app/app.component.ts +++ b/verify/angular/src/app/app.component.ts @@ -6,7 +6,6 @@ import { AfterViewInit, Component, inject, signal } from '@angular/core'; import { WrapperConfig } from 'monaco-editor-wrapper'; 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'; import { getGroovyClientConfig } from '../config/groovy.config'; @@ -28,14 +27,8 @@ export class AppComponent implements AfterViewInit { readonly codeText = signal(''); async ngAfterViewInit(): Promise { - const editorDom = document.getElementById(this.editorId); const groovyEditorDom = document.getElementById(this.groovyEditorId); - if (editorDom) { - const config = buildJsonClientUserConfig({ - htmlContainer: editorDom, - }); - this.wrapperConfig.set(config); - } + if (groovyEditorDom) { const groovyConfig = getGroovyClientConfig(this.groovyEditorId); this.groovyWrapperConfig.set(groovyConfig); From a049b33f8ce6bbe843bff3c03d15cec62fa71085 Mon Sep 17 00:00:00 2001 From: ls-infra <156368376+ls-infra@users.noreply.github.com> Date: Fri, 14 Feb 2025 02:05:01 +0000 Subject: [PATCH 5/5] fix: fix ci --- verify/angular/src/app/app.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/verify/angular/src/app/app.component.ts b/verify/angular/src/app/app.component.ts index 87d9dd9d7..e581c999d 100644 --- a/verify/angular/src/app/app.component.ts +++ b/verify/angular/src/app/app.component.ts @@ -8,7 +8,6 @@ import { WrapperConfig } from 'monaco-editor-wrapper'; import { MonacoAngularWrapperComponent } from '../monaco-angular-wrapper/monaco-angular-wrapper.component'; import { SaveCodeService } from '../save-code.service'; import { firstValueFrom } from 'rxjs'; -import { getGroovyClientConfig } from '../config/groovy.config'; @Component({ selector: 'app-root', templateUrl: './app.component.html',