From df863d9d36585f93259eb82bf27fdb24b0ca5cc1 Mon Sep 17 00:00:00 2001 From: David Watrous <509299+dpwatrous@users.noreply.github.com> Date: Thu, 7 Sep 2023 19:17:10 -0400 Subject: [PATCH] Standardize on monaco 0.3x.x (#2796) This is compatible with the ~0.31.0 version that the Azure Portal uses for ReactView blades --- desktop/package-lock.json | 36 +++++++++++++------ desktop/package.json | 4 +-- .../ui/editor/editor.component.ts | 17 +++++---- .../monaco-languages/autoscale.language.ts | 2 ++ .../text-file-viewer.component.spec.ts | 2 +- .../text-file-viewer.component.ts | 2 +- package-lock.json | 8 ++--- package.json | 2 +- packages/bonito-ui/package-lock.json | 2 +- packages/bonito-ui/package.json | 2 +- packages/playground/package-lock.json | 2 +- packages/playground/package.json | 2 +- packages/react/package-lock.json | 2 +- packages/react/package.json | 2 +- web/package-lock.json | 11 ------ web/package.json | 11 ------ 16 files changed, 50 insertions(+), 57 deletions(-) diff --git a/desktop/package-lock.json b/desktop/package-lock.json index 19b694c392..4ec5e2a71c 100644 --- a/desktop/package-lock.json +++ b/desktop/package-lock.json @@ -47,7 +47,7 @@ "luxon": "^1.28.1", "make-dir": "^2.1.0", "mkdirp": "^1.0.4", - "monaco-editor": "^0.19.0", + "monaco-editor": "~0.30.0", "node-abi": "^2.18.0", "node-downloader-helper": "^2.1.6", "node-forge": "^1.3.0", @@ -121,7 +121,7 @@ "loader-utils": "^1.4.2", "merge2": "^1.4.1", "mini-css-extract-plugin": "^0.5.0", - "monaco-editor-webpack-plugin": "^1.9.0", + "monaco-editor-webpack-plugin": "^6.0.0", "node-fetch": "^2.6.7", "nyc": "^15.1.0", "patch-package": "^6.5.1", @@ -13894,21 +13894,35 @@ } }, "node_modules/monaco-editor": { - "version": "0.19.3", - "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.19.3.tgz", - "integrity": "sha512-2n1vJBVQF2Hhi7+r1mMeYsmlf18hjVb6E0v5SoMZyb4aeOmYPKun+CE3gYpiNA1KEvtSdaDHFBqH9d7Wd9vREg==" + "version": "0.30.1", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.30.1.tgz", + "integrity": "sha512-B/y4+b2O5G2gjuxIFtCE2EkM17R2NM7/3F8x0qcPsqy4V83bitJTIO4TIeZpYlzu/xy6INiY/+84BEm6+7Cmzg==" }, "node_modules/monaco-editor-webpack-plugin": { - "version": "1.9.1", - "resolved": "https://registry.npmjs.org/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-1.9.1.tgz", - "integrity": "sha512-x7fx1w3i/uwZERIgztHAAK3VQMsL8+ku0lFXXbO81hKDg8IieACqjGEa2mqEueg0c/fX+wd0oI+75wB19KJAsA==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-6.0.0.tgz", + "integrity": "sha512-vC886Mzpd2AkSM35XLkfQMjH+Ohz6RISVwhAejDUzZDheJAiz6G34lky1vyO8fZ702v7IrcKmsGwL1rRFnwvUA==", "dev": true, "dependencies": { - "loader-utils": "^1.2.3" + "loader-utils": "^2.0.0" }, "peerDependencies": { - "monaco-editor": "0.19.x || 0.20.x", - "webpack": "^4.5.0" + "monaco-editor": "0.30.x", + "webpack": "^4.5.0 || 5.x" + } + }, + "node_modules/monaco-editor-webpack-plugin/node_modules/loader-utils": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz", + "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==", + "dev": true, + "dependencies": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + }, + "engines": { + "node": ">=8.9.0" } }, "node_modules/move-concurrently": { diff --git a/desktop/package.json b/desktop/package.json index 66bc5412bb..3d489b79fb 100644 --- a/desktop/package.json +++ b/desktop/package.json @@ -159,7 +159,7 @@ "loader-utils": "^1.4.2", "merge2": "^1.4.1", "mini-css-extract-plugin": "^0.5.0", - "monaco-editor-webpack-plugin": "^1.9.0", + "monaco-editor-webpack-plugin": "^6.0.0", "node-fetch": "^2.6.7", "nyc": "^15.1.0", "patch-package": "^6.5.1", @@ -228,7 +228,7 @@ "luxon": "^1.28.1", "make-dir": "^2.1.0", "mkdirp": "^1.0.4", - "monaco-editor": "^0.19.0", + "monaco-editor": "~0.30.0", "node-abi": "^2.18.0", "node-downloader-helper": "^2.1.6", "node-forge": "^1.3.0", diff --git a/desktop/src/@batch-flask/ui/editor/editor.component.ts b/desktop/src/@batch-flask/ui/editor/editor.component.ts index 918b0a7c3f..185d1cbf30 100644 --- a/desktop/src/@batch-flask/ui/editor/editor.component.ts +++ b/desktop/src/@batch-flask/ui/editor/editor.component.ts @@ -4,9 +4,7 @@ import { } from "@angular/core"; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms"; import * as elementResizeDetectorMaker from "element-resize-detector"; -import { Uri, editor } from "monaco-editor"; -import { AutoscaleLanguage } from "./monaco-languages"; -import IStandaloneCodeEditor = editor.IStandaloneCodeEditor; +import type { Uri, editor, IDisposable } from "monaco-editor"; import "./editor.scss"; @@ -63,9 +61,9 @@ export class EditorComponent implements ControlValueAccessor, AfterViewInit, OnC private _value = ""; private _resizeDetector: any; private _config: EditorConfig; - private _editor: IStandaloneCodeEditor; - private _model: monaco.editor.IModel; - private _modelChangeSub: monaco.IDisposable; + private _editor: editor.IStandaloneCodeEditor | null = null; + private _model: editor.IModel | null = null; + private _modelChangeSub: IDisposable; @Input() public set value(v) { if (v !== this._value) { @@ -114,7 +112,8 @@ export class EditorComponent implements ControlValueAccessor, AfterViewInit, OnC } public async initMonaco() { - const monaco = await import("monaco-editor"); + const monaco = await import("monaco-editor/esm/vs/editor/editor.api"); + const { AutoscaleLanguage } = await import("./monaco-languages"); AutoscaleLanguage.define(); const myDiv: HTMLDivElement = this.editorContent.nativeElement; // const options: IEditorConstructionOptions = this.config; @@ -125,7 +124,7 @@ export class EditorComponent implements ControlValueAccessor, AfterViewInit, OnC // Assign _model to existing model instead of create new one to avoid error const uri = this.config.uri as any; const model = uri ? monaco.editor.getModel(uri) : null; - this._model = model || monaco.editor.createModel(this._value || "", this.config.language, uri); + this._model = model ?? monaco.editor.createModel(this._value || "", this.config.language, uri); // Inject this because initMonaco() function is invoked after writeValue() // which causes reopen json editor with an incorrect value populated this._model.setValue(this._value); @@ -142,7 +141,7 @@ export class EditorComponent implements ControlValueAccessor, AfterViewInit, OnC } } this._modelChangeSub = this._model.onDidChangeContent((e) => { - this.updateValue(this._model.getValue()); + this.updateValue(this._model?.getValue()); }); } diff --git a/desktop/src/@batch-flask/ui/editor/monaco-languages/autoscale.language.ts b/desktop/src/@batch-flask/ui/editor/monaco-languages/autoscale.language.ts index 0b4fca5728..ce0b1ce4ba 100644 --- a/desktop/src/@batch-flask/ui/editor/monaco-languages/autoscale.language.ts +++ b/desktop/src/@batch-flask/ui/editor/monaco-languages/autoscale.language.ts @@ -1,3 +1,5 @@ +import * as monaco from "monaco-editor/esm/vs/editor/editor.api"; + /** * AutoscaleLanguage class defines autoscale formula syntax highlight and keyword autocomplete features in * Monaco text editor. Autoscale text editor can be viewed directly in create pool flyout. diff --git a/desktop/src/@batch-flask/ui/file/file-viewer/text-file-viewer/text-file-viewer.component.spec.ts b/desktop/src/@batch-flask/ui/file/file-viewer/text-file-viewer/text-file-viewer.component.spec.ts index f2be79cef9..eb55a9a8c0 100644 --- a/desktop/src/@batch-flask/ui/file/file-viewer/text-file-viewer/text-file-viewer.component.spec.ts +++ b/desktop/src/@batch-flask/ui/file/file-viewer/text-file-viewer/text-file-viewer.component.spec.ts @@ -87,7 +87,7 @@ describe("TextFileViewer", () => { }, uri: Uri.file("foo.ts"), keybindings: [ - { key: KeyMod.CtrlCmd | KeyCode.KEY_S, action: jasmine.anything() }, + { key: KeyMod.CtrlCmd | KeyCode.KeyS, action: jasmine.anything() }, ], }); }); diff --git a/desktop/src/@batch-flask/ui/file/file-viewer/text-file-viewer/text-file-viewer.component.ts b/desktop/src/@batch-flask/ui/file/file-viewer/text-file-viewer/text-file-viewer.component.ts index 2ade384070..2c89aa7123 100644 --- a/desktop/src/@batch-flask/ui/file/file-viewer/text-file-viewer/text-file-viewer.component.ts +++ b/desktop/src/@batch-flask/ui/file/file-viewer/text-file-viewer/text-file-viewer.component.ts @@ -52,7 +52,7 @@ export class TextFileViewerComponent extends FileViewer { const keybindings: EditorKeyBinding[] = []; if (this.fileLoader && !this.fileLoader.isReadonly) { - keybindings.push({ key: KeyMod.CtrlCmd | KeyCode.KEY_S, action: () => this.save() }); + keybindings.push({ key: KeyMod.CtrlCmd | KeyCode.KeyS, action: () => this.save() }); } this.editorConfig = { readOnly: Boolean(this.fileLoader && this.fileLoader.isReadonly), diff --git a/package-lock.json b/package-lock.json index a698d26e26..e80fb3a97a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "@uifabric/azure-themes": "7.5.19", "mobx": "^6.3.2", "mobx-react-lite": "^3.2.0", - "monaco-editor": "^0.41.0", + "monaco-editor": "~0.31.0", "react": "17.0.2", "react-dom": "17.0.2", "tslib": "^2.3.1" @@ -8726,9 +8726,9 @@ } }, "node_modules/monaco-editor": { - "version": "0.41.0", - "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.41.0.tgz", - "integrity": "sha512-1o4olnZJsiLmv5pwLEAmzHTE/5geLKQ07BrGxlF4Ri/AXAc2yyDGZwHjiTqD8D/ROKUZmwMA28A+yEowLNOEcA==" + "version": "0.31.0", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.31.0.tgz", + "integrity": "sha512-H3QmysEwxxY8oxmFhIFcY9JkuwilUDa6txdAxb797cVr7XFZX27a3SDwcGJmTlV9iGPwdh132r3KKCS5aNL4Gg==" }, "node_modules/ms": { "version": "2.1.2", diff --git a/package.json b/package.json index aa77fb7f8f..086090711c 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "@uifabric/azure-themes": "7.5.19", "mobx": "^6.3.2", "mobx-react-lite": "^3.2.0", - "monaco-editor": "^0.41.0", + "monaco-editor": "~0.31.0", "react": "17.0.2", "react-dom": "17.0.2", "tslib": "^2.3.1" diff --git a/packages/bonito-ui/package-lock.json b/packages/bonito-ui/package-lock.json index 89a3c7cbd9..15f89bbf6a 100644 --- a/packages/bonito-ui/package-lock.json +++ b/packages/bonito-ui/package-lock.json @@ -26,7 +26,7 @@ "@uifabric/azure-themes": ">=7.5.19 <8.0.0", "mobx": "^6.3.2", "mobx-react-lite": "^3.2.0", - "monaco-editor": "^0.19.0 || ^0.25.1", + "monaco-editor": ">=0.30.0 <0.40.0", "react": ">=17.0.2 <18.0.0", "react-dom": ">=17.0.2 <18.0.0", "tslib": "~2.3.1" diff --git a/packages/bonito-ui/package.json b/packages/bonito-ui/package.json index 9faaaac275..946a2fd426 100644 --- a/packages/bonito-ui/package.json +++ b/packages/bonito-ui/package.json @@ -66,7 +66,7 @@ "@uifabric/azure-themes": ">=7.5.19 <8.0.0", "mobx": "^6.3.2", "mobx-react-lite": "^3.2.0", - "monaco-editor": "^0.19.0 || ^0.25.1", + "monaco-editor": ">=0.30.0 <0.40.0", "react": ">=17.0.2 <18.0.0", "react-dom": ">=17.0.2 <18.0.0", "tslib": "~2.3.1" diff --git a/packages/playground/package-lock.json b/packages/playground/package-lock.json index f3f06903da..205fc96f28 100644 --- a/packages/playground/package-lock.json +++ b/packages/playground/package-lock.json @@ -25,7 +25,7 @@ "@uifabric/azure-themes": ">=7.5.19 <8.0.0", "mobx": "^6.3.2", "mobx-react-lite": "^3.2.0", - "monaco-editor": "^0.19.0 || ^0.25.1", + "monaco-editor": ">=0.30.0 <0.40.0", "react": ">=17.0.2 <18.0.0", "react-dom": ">=17.0.2 <18.0.0", "tslib": "~2.3.1" diff --git a/packages/playground/package.json b/packages/playground/package.json index 573366c72f..cc73107882 100644 --- a/packages/playground/package.json +++ b/packages/playground/package.json @@ -62,7 +62,7 @@ "@uifabric/azure-themes": ">=7.5.19 <8.0.0", "mobx": "^6.3.2", "mobx-react-lite": "^3.2.0", - "monaco-editor": "^0.19.0 || ^0.25.1", + "monaco-editor": ">=0.30.0 <0.40.0", "react": ">=17.0.2 <18.0.0", "react-dom": ">=17.0.2 <18.0.0", "tslib": "~2.3.1" diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json index 5cf84f74d7..47b09da174 100644 --- a/packages/react/package-lock.json +++ b/packages/react/package-lock.json @@ -26,7 +26,7 @@ "@uifabric/azure-themes": ">=7.5.19 <8.0.0", "mobx": "^6.3.2", "mobx-react-lite": "^3.2.0", - "monaco-editor": "^0.19.0 || ^0.25.1", + "monaco-editor": ">=0.30.0 <0.40.0", "react": ">=17.0.2 <18.0.0", "react-dom": ">=17.0.2 <18.0.0", "tslib": "~2.3.1" diff --git a/packages/react/package.json b/packages/react/package.json index 7fe385edf0..0d5ccf5ea9 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -67,7 +67,7 @@ "@uifabric/azure-themes": ">=7.5.19 <8.0.0", "mobx": "^6.3.2", "mobx-react-lite": "^3.2.0", - "monaco-editor": "^0.19.0 || ^0.25.1", + "monaco-editor": ">=0.30.0 <0.40.0", "react": ">=17.0.2 <18.0.0", "react-dom": ">=17.0.2 <18.0.0", "tslib": "~2.3.1" diff --git a/web/package-lock.json b/web/package-lock.json index 80326f0bc6..30ca5e1f5a 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -35,17 +35,6 @@ "webpack-dev-server": "^4.15.1", "webpack-merge": "^5.9.0", "webpack-sources": "^3.2.3" - }, - "peerDependencies": { - "@fluentui/react": ">=8.97.2 <9.0.0", - "@fluentui/react-theme-provider": ">=0.16.2 <1.0.0", - "@uifabric/azure-themes": ">=7.5.19 <8.0.0", - "mobx": "^6.3.2", - "mobx-react-lite": "^3.2.0", - "monaco-editor": "^0.41.0", - "react": ">=17.0.2 <18.0.0", - "react-dom": ">=17.0.2 <18.0.0", - "tslib": "~2.3.1" } }, "node_modules/@ampproject/remapping": { diff --git a/web/package.json b/web/package.json index 388bc38d18..f51a589ece 100644 --- a/web/package.json +++ b/web/package.json @@ -59,17 +59,6 @@ "workspace:test:web": "npm run test", "workspace:test:web:all": "npm run test:all" }, - "peerDependencies": { - "@fluentui/react": ">=8.97.2 <9.0.0", - "@fluentui/react-theme-provider": ">=0.16.2 <1.0.0", - "@uifabric/azure-themes": ">=7.5.19 <8.0.0", - "mobx": "^6.3.2", - "mobx-react-lite": "^3.2.0", - "monaco-editor": "^0.41.0", - "react": ">=17.0.2 <18.0.0", - "react-dom": ">=17.0.2 <18.0.0", - "tslib": "~2.3.1" - }, "dependencies": { "@azure/bonito-core": "^1.0.0", "@azure/bonito-ui": "^1.0.0",