Skip to content

chore(frontend): upgrade frontend to monaco-languageclient v10 #4997

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aglinxinyuan wants to merge 28 commits into
base: main
Choose a base branch
from
Open

chore(frontend): upgrade frontend to monaco-languageclient v10 #4997

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
7b716ae
chore(deps): upgrade frontend to monaco-languageclient v10
aglinxinyuan May 7, 2026
831d9ea
chore(deps): correct d3-path license to ISC in LICENSE-binary
aglinxinyuan May 7, 2026
03b36a2
chore(deps): drop unused content-disposition + webpack-bundle-analyzer
aglinxinyuan May 7, 2026
08f29c5
chore(deps): drop redundant @codingame/monaco-vscode-* declarations
aglinxinyuan May 7, 2026
75c2bc0
chore(deps): drop @codingame/monaco-vscode-textmate-service-override too
aglinxinyuan May 7, 2026
710dd1b
chore(deps): drop @codingame/monaco-vscode-theme-defaults-default-ext…
aglinxinyuan May 7, 2026
dbed098
feat(frontend): retire R UDF editor support
aglinxinyuan May 7, 2026
e499498
chore(deps): drop redundant `vscode` resolution
aglinxinyuan May 7, 2026
f422af1
chore(deps): drop unused `vscode` direct dependency
aglinxinyuan May 7, 2026
2389879
chore(frontend): inline codingame worker URL refs, drop trampoline files
aglinxinyuan May 7, 2026
c8d255f
chore(frontend): inline jsdom CSS loader hook as data: URL
aglinxinyuan May 7, 2026
8448f66
chore(frontend): simplify code-editor.component.ts
aglinxinyuan May 7, 2026
be37e63
chore(frontend): align code-editor.component with upstream lifecycle
aglinxinyuan May 7, 2026
b13f0d4
chore(frontend): collapse codingame factory fileReplacements into exi…
aglinxinyuan May 7, 2026
26fdd30
chore(frontend): revert codingame factory to trampoline files, drop a…
aglinxinyuan May 8, 2026
624f046
chore(frontend): fix prettier-eslint formatting on code-editor.component
aglinxinyuan May 9, 2026
932ee2d
Merge branch 'main' into chore/monaco-lsp-v10
aglinxinyuan May 9, 2026
45fd824
chore(frontend): drop stale LICENSE-binary entries
aglinxinyuan May 9, 2026
de4d47b
chore(frontend): trim custom-webpack.config.js to what's still load-b…
aglinxinyuan May 9, 2026
51b4fe5
chore(frontend): address Copilot review on code-editor.component
aglinxinyuan May 9, 2026
e8e67b5
chore(frontend): tidy code-debugger imports and jsdom polyfill comments
aglinxinyuan May 9, 2026
018188d
chore(frontend): second cleanup pass on PR-touched files
aglinxinyuan May 9, 2026
f31be01
chore(frontend): squeeze line count out of polyfill + worker comment
aglinxinyuan May 9, 2026
93f895f
chore(frontend): inline single-call helpers and compact stub class bo…
aglinxinyuan May 9, 2026
33eea83
chore(frontend): address Copilot follow-up + drop redundant Selection…
aglinxinyuan May 9, 2026
127940a
Merge remote-tracking branch 'origin/main' into chore/monaco-lsp-v10
aglinxinyuan May 13, 2026
3cbabe9
Merge branch 'main' into chore/monaco-lsp-v10
aglinxinyuan May 13, 2026
29cbba5
chore(frontend): address Copilot follow-up on jsdom polyfill
aglinxinyuan May 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 34 additions & 27 deletions frontend/LICENSE-binary
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,7 @@ Dependencies under the Apache License, Version 2.0
--------------------------------------------------------------------------------

Angular / npm packages:
- dompurify@3.3.1
- fuse.js@6.5.3
- jschardet@3.1.3
- rxjs@7.8.1
Expand Down Expand Up @@ -247,30 +248,40 @@ Angular / npm packages:
- @ant-design/icons-angular@21.0.0
- @auth0/angular-jwt@5.1.0
- @babel/runtime@7.29.2
- @codingame/monaco-vscode-api@8.0.4
- @codingame/monaco-vscode-base-service-override@8.0.4
- @codingame/monaco-vscode-configuration-service-override@8.0.4
- @codingame/monaco-vscode-editor-api@8.0.4
- @codingame/monaco-vscode-environment-service-override@8.0.4
- @codingame/monaco-vscode-extensions-service-override@8.0.4
- @codingame/monaco-vscode-files-service-override@8.0.4
- @codingame/monaco-vscode-host-service-override@8.0.4
- @codingame/monaco-vscode-java-default-extension@8.0.4
- @codingame/monaco-vscode-languages-service-override@8.0.4
- @codingame/monaco-vscode-layout-service-override@8.0.4
- @codingame/monaco-vscode-model-service-override@8.0.4
- @codingame/monaco-vscode-monarch-service-override@8.0.4
- @codingame/monaco-vscode-python-default-extension@8.0.4
- @codingame/monaco-vscode-quickaccess-service-override@8.0.4
- @codingame/monaco-vscode-r-default-extension@8.0.4
- @codingame/monaco-vscode-textmate-service-override@8.0.4
- @codingame/monaco-vscode-theme-defaults-default-extension@8.0.4
- @codingame/monaco-vscode-theme-service-override@8.0.4
- @codingame/monaco-vscode-api@25.1.2
- @codingame/monaco-vscode-base-service-override@25.1.2
- @codingame/monaco-vscode-bulk-edit-service-override@25.1.2
- @codingame/monaco-vscode-configuration-service-override@25.1.2
- @codingame/monaco-vscode-editor-api@25.1.2
- @codingame/monaco-vscode-editor-service-override@25.1.2
- @codingame/monaco-vscode-environment-service-override@25.1.2
- @codingame/monaco-vscode-extension-api@25.1.2
- @codingame/monaco-vscode-extensions-service-override@25.1.2
- @codingame/monaco-vscode-files-service-override@25.1.2
- @codingame/monaco-vscode-host-service-override@25.1.2
- @codingame/monaco-vscode-java-default-extension@25.1.2
- @codingame/monaco-vscode-keybindings-service-override@25.1.2
- @codingame/monaco-vscode-languages-service-override@25.1.2
- @codingame/monaco-vscode-layout-service-override@25.1.2
- @codingame/monaco-vscode-log-service-override@25.1.2
- @codingame/monaco-vscode-model-service-override@25.1.2
- @codingame/monaco-vscode-monarch-service-override@25.1.2
- @codingame/monaco-vscode-python-default-extension@25.1.2
- @codingame/monaco-vscode-quickaccess-service-override@25.1.2
- @codingame/monaco-vscode-textmate-service-override@25.1.2
- @codingame/monaco-vscode-theme-defaults-default-extension@25.1.2
- @codingame/monaco-vscode-theme-service-override@25.1.2
- @codingame/monaco-vscode-view-banner-service-override@25.1.2
- @codingame/monaco-vscode-view-common-service-override@25.1.2
- @codingame/monaco-vscode-view-status-bar-service-override@25.1.2
- @codingame/monaco-vscode-view-title-bar-service-override@25.1.2
- @codingame/monaco-vscode-views-service-override@25.1.2
- @codingame/monaco-vscode-workbench-service-override@25.1.2
- @ctrl/tinycolor@3.6.1
- @ngneat/until-destroy@8.1.4
- @ngx-formly/core@6.3.12
- @ngx-formly/ng-zorro-antd@6.3.12
- @vscode/iconv-lite-umd@0.7.0
- @vscode/iconv-lite-umd@0.7.1
- ajv@8.10.0
- backbone@1.4.1
- balanced-match@1.0.2
Expand All @@ -290,11 +301,10 @@ Angular / npm packages:
- lib0@0.2.117
- lodash@4.18.1
- lodash-es@4.18.1
- marked@17.0.1
- marked@14.0.0
Copy link
Copy Markdown
Contributor Author

@aglinxinyuan aglinxinyuan May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

False positive — marked@17.0.1 is in yarn.lock because it's the direct dep declared in package.json, but the production bundle only includes marked@14.0.0 (transitively, via ngx-markdown@21.2.0's peer-pin). Confirmed by:

```
$ node -e "console.log(require('./dist/3rdpartylicenses.json').filter(p=>p.name==='marked').map(p=>p.name+'@'+p.version))"
[ 'marked@14.0.0' ]
```

LICENSE-binary is intentionally aligned with what license-webpack-plugin records — i.e., what actually ships in dist/. bin/licensing/check_binary_deps.py flags drift between these two precisely so we don't list unbundled deps. So marked@17.0.1 shouldn't be in LICENSE-binary; it isn't bundled at runtime.

If we want both versions reflected (e.g., a future code path imports the new one), the right fix is to reach into the source for an explicit use site so webpack pulls it in — not to amend LICENSE-binary ahead of that.

- mobx@4.14.1
- monaco-breakpoints@0.2.0
- monaco-editor-wrapper@5.5.3
- monaco-languageclient@8.8.3
- monaco-languageclient@10.7.0
- ng-zorro-antd@21.2.2
- ngx-color-picker@12.0.1
- ngx-file-drop@16.0.0
Expand All @@ -305,7 +315,6 @@ Angular / npm packages:
- point-in-polygon@1.1.0
- python@1.0.0
- quill-cursors@3.1.2
- r@1.0.0
- rbush@4.0.1
- read-excel-file@5.7.1
- ring-buffer-ts@1.0.3
Expand All @@ -317,9 +326,7 @@ Angular / npm packages:
- vscode-languageclient@9.0.1
- vscode-languageserver-protocol@3.17.5
- vscode-languageserver-types@3.17.5
- vscode-oniguruma@1.7.0
- vscode-textmate@9.0.0
- vscode-ws-jsonrpc@3.3.2
- vscode-ws-jsonrpc@3.5.0
- y-monaco@0.1.5
- y-protocols@1.0.7
- y-quill@0.1.5
Expand Down
68 changes: 50 additions & 18 deletions frontend/custom-webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,46 +17,78 @@
* under the License.
*/

const path = require("path");
const { LicenseWebpackPlugin } = require("license-webpack-plugin");

const nodeModule = (...segments) => path.resolve(__dirname, "node_modules", ...segments);
const codingameCssRe = /node_modules[\\/](?:@codingame[\\/]monaco-vscode-[^\\/]+|monaco-editor|vscode)[\\/].*\.css$/;

module.exports = {
module: {
rules: [
{
// codingame monaco-vscode-* ships raw assets (svg/ttf/png/woff*) that
// webpack must emit as static files rather than try to parse as JS.
test: /\.(svg|ttf|woff2?|png|jpg|jpeg|gif)$/,
include: [nodeModule("@codingame")],
type: "asset/resource",
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
include: [
require("path").resolve(__dirname, "node_modules/monaco-editor"),
require("path").resolve(__dirname, "node_modules/monaco-breakpoints")
oneOf: [
{
// codingame monaco-vscode-* CSS ships as Constructable Stylesheet
// imports — must skip style-loader and use css-loader's
// `exportType: 'css-style-sheet'`.
// https://github.com/CodinGame/monaco-vscode-api/wiki/Troubleshooting
test: codingameCssRe,
use: [
{
loader: "css-loader",
options: { esModule: false, exportType: "css-style-sheet", url: true, import: true },
},
],
},
{
// monaco-breakpoints ships a plain stylesheet that needs
// style-loader so it injects at runtime.
include: [nodeModule("monaco-breakpoints")],
use: ["style-loader", "css-loader"],
},
],
},
],
// Enable URL handling in webpack's JavaScript parser, required for loading .wasm files.
// See https://github.com/angular/angular-cli/issues/24617
parser: {
javascript: {
url: true,
},
},
resolve: {
// css-loader emits relative imports (e.g. '../../../../../../../css-loader/
// dist/runtime/api.js') computed from the source CSS location. The codingame
// monaco-vscode-* packages live one namespace level deeper (under
// `node_modules/@codingame/...`) than css-loader assumes, so the emitted
// path lands at `node_modules/@codingame/css-loader/...` instead of
// `node_modules/css-loader/...`. Alias the missing leg back to the real
// install so webpack can resolve the runtime files.
alias: {
[nodeModule("@codingame/css-loader")]: nodeModule("css-loader"),
[nodeModule("@codingame/style-loader")]: nodeModule("style-loader"),
},
},
plugins: [
new LicenseWebpackPlugin({
perChunkOutput: false,
outputFilename: "3rdpartylicenses.json",
// Some codingame monaco-vscode-* sub-modules don't expose a license file
// license-webpack-plugin can find; treat that as soft instead of fatal.
handleMissingLicenseText: () => null,
renderLicenses: (modules) =>
JSON.stringify(
modules
.filter((m) => m.packageJson?.name && m.packageJson?.version)
.map((m) => ({
name: m.packageJson && m.packageJson.name,
version: m.packageJson && m.packageJson.version,
name: m.packageJson.name,
version: m.packageJson.version,
license: m.licenseId,
}))
.filter((e) => e.name && e.version)
.sort((a, b) =>
a.name === b.name
? a.version.localeCompare(b.version)
: a.name.localeCompare(b.name),
),
.sort((a, b) => a.name.localeCompare(b.name) || a.version.localeCompare(b.version)),
null,
2,
),
Expand Down
18 changes: 6 additions & 12 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
"start": "concurrently --kill-others \"npx y-websocket\" \"ng serve\"",
"build": "node --max-old-space-size=8192 ./node_modules/@angular/cli/bin/ng build --configuration=production --progress=false --source-map=false",
"build:ci": "node --max-old-space-size=8192 ./node_modules/nx/dist/bin/nx.js build --configuration=production --progress=false --source-map=false",
"analyze": "ng build --configuration=production --stats-json && webpack-bundle-analyzer dist/stats.json",
"test": "ng test --watch=false",
"test:ci": "node --max-old-space-size=8192 ./node_modules/nx/dist/bin/nx.js test --watch=false --progress=false --coverage --coverage-reporters=lcovonly",
"prettier:fix": "prettier --write ./src",
Expand All @@ -35,9 +34,8 @@
"@angular/platform-browser-dynamic": "21.2.10",
"@angular/router": "21.2.10",
"@auth0/angular-jwt": "5.1.0",
"@codingame/monaco-vscode-java-default-extension": "8.0.4",
"@codingame/monaco-vscode-python-default-extension": "8.0.4",
"@codingame/monaco-vscode-r-default-extension": "8.0.4",
"@codingame/monaco-vscode-java-default-extension": "25.1.2",
"@codingame/monaco-vscode-python-default-extension": "25.1.2",
"@ngneat/until-destroy": "8.1.4",
"@ngx-formly/core": "6.3.12",
"@ngx-formly/ng-zorro-antd": "6.3.12",
Expand All @@ -54,9 +52,8 @@
"lodash-es": "4.18.1",
"marked": "17.0.1",
"monaco-breakpoints": "0.2.0",
"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@8.0.4",
"monaco-editor-wrapper": "5.5.3",
"monaco-languageclient": "8.8.3",
"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@25.1.2",
"monaco-languageclient": "10.7.0",
"ng-zorro-antd": "21.2.2",
"ngx-color-picker": "12.0.1",
"ngx-file-drop": "16.0.0",
Expand All @@ -73,7 +70,6 @@
"tinyqueue": "2.0.3",
"tslib": "2.3.1",
"uuid": "8.3.2",
"vscode": "npm:@codingame/monaco-vscode-api@8.0.4",
"y-monaco": "0.1.5",
"y-protocols": "1.0.5",
"y-quill": "0.1.5",
Expand All @@ -83,8 +79,7 @@
"zone.js": "0.15.1"
},
"resolutions": {
"vscode": "npm:@codingame/monaco-vscode-api@8.0.4",
"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@8.0.4",
"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@25.1.2",
"webpack": "5.104.1",
"jschardet": "portal:./tools/jschardet-stub"
},
Expand Down Expand Up @@ -137,8 +132,7 @@
"sass": "1.71.1",
"ts-proto": "2.2.0",
"typescript": "5.9.3",
"vitest": "4.1.5",
"webpack-bundle-analyzer": "4.5.0"
"vitest": "4.1.5"
},
"browserslist": [
"defaults",
Expand Down
3 changes: 0 additions & 3 deletions frontend/src/app/workspace/component/code-editor-dialog/code-debugger.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,6 @@
import { AfterViewInit, Component, Input, ViewChild } from "@angular/core";
import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
import { SafeStyle } from "@angular/platform-browser";
import "@codingame/monaco-vscode-python-default-extension";
import "@codingame/monaco-vscode-r-default-extension";
import "@codingame/monaco-vscode-java-default-extension";
import { isDefined } from "../../../common/util/predicate";
import * as monaco from "monaco-editor";
import { MonacoBreakpoint } from "monaco-breakpoints";
Comment thread
aglinxinyuan marked this conversation as resolved.
Expand Down
27 changes: 9 additions & 18 deletions frontend/src/app/workspace/component/code-editor-dialog/code-editor.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,10 @@ import { OperatorSchema } from "../../types/operator-schema.interface";
import { of } from "rxjs";

// Operator types that the constructor's language-detection branch must map
// to a specific language. `RUDFSource` / `RUDF` -> `r`; the three V2 Python
// types -> `python`; everything else -> `java`. Local to this spec so we
// don't perturb the shared mock-workflow-data fixtures.
const R_OPERATOR_TYPES = ["RUDFSource", "RUDF"];
// to a specific language. The three V2 Python types -> `python`; everything
// else (including the legacy `RUDF*` types) -> `java`, since R UDF editor
// support was retired in this branch. Local to this spec so we don't
// perturb the shared mock-workflow-data fixtures.
const PYTHON_OPERATOR_TYPES = ["PythonUDFV2", "PythonUDFSourceV2", "DualInputPortsPythonUDFV2"];

// Augment `mockOperatorMetaData` with synthetic schemas for the V2 operator
Expand All @@ -52,7 +52,6 @@ const synthesizeSchema = (operatorType: string): OperatorSchema => ({ ...baseSch
const augmentedSchemas: OperatorSchema[] = [
...mockOperatorMetaData.operators,
...PYTHON_OPERATOR_TYPES.map(synthesizeSchema),
...R_OPERATOR_TYPES.map(synthesizeSchema),
synthesizeSchema("SomeUnknownType"),
];
class AugmentedStubMetadataService extends StubOperatorMetadataService {
Expand Down Expand Up @@ -117,19 +116,11 @@ describe("CodeEditorComponent", () => {
expect(fixture.componentInstance.currentOperatorId).toBe(mockJavaUDFPredicate.operatorID);
});

// Language detection — the constructor maps `RUDFSource` / `RUDF` to `r`,
// the three V2-era Python operator types to `python`, and anything else
// to `java`. The exact branch lives in the constructor; the public
// `language` field is what the rest of the editor (LSP wiring, file-
// suffix selection) keys off.

R_OPERATOR_TYPES.forEach((operatorType, index) => {
it(`picks language="r" for operatorType=${operatorType}`, () => {
const fixture = makeFixture(buildPredicate(`r-${index}`, operatorType));
expect(fixture.componentInstance.language).toBe("r");
expect(fixture.componentInstance.languageTitle).toBe("R UDF");
});
});
// Language detection — the constructor maps the three V2-era Python
// operator types to `python`, and anything else (including the legacy
// `RUDF*` types that this branch retired) to `java`. The exact branch
// lives in the constructor; the public `language` field is what the
// rest of the editor (LSP wiring, file-suffix selection) keys off.

PYTHON_OPERATOR_TYPES.forEach((operatorType, index) => {
it(`picks language="python" for operatorType=${operatorType}`, () => {
Expand Down
Loading
Loading