Update monaco version (deephaven#747)

* Update monaco to v0.34.0 * Change import paths to just 'monaco-editor' * Remove unnecessary moduleNameMappers * Remove monaco mocks entirely. They are no longer needed, just use monaco. * Add instructions to README about how to analyze the package size Co-authored-by: Matthew Runyon <[email protected]>
cpwright · Sep 11, 2022 · 8c9fe7c · 8c9fe7c
1 parent 76662f5
commit 8c9fe7c
Show file tree

Hide file tree

Showing 29 changed files with 83 additions and 183 deletions.
diff --git a/README.md b/README.md
@@ -96,3 +96,12 @@ Nightly releases are published every night with the dist-tag `nightly` to npm. Y
 ### Hotfix Releases
 
 For Long Term Support releases, we create a new branch in Community matching the LTS version number (e.g. [v0.6](https://github.com/deephaven/web-client-ui/tree/v0.6)), then adding a matching [dist-tag](https://github.com/lerna/lerna/blob/main/commands/publish/README.md#--dist-tag-tag) to the [publish-packages.yml](.github/workflows/publish-packages.yml#L24) for that branch. Bug fixes/hotfixes are then either cherry-picked from `main` (if the fix has been merged to main), or directly merged into the hotfix branch (if code has changed in `main` and the fix only applies in the hotfix branch). Once the branch is pushed to origin, the publish step is kicked off by creating a release as instructed in the [Releasing a New Version](#releasing-a-new-version) section.
+
+## Analyzing Bundle Size
+
+When adding new features, it can be useful to analyze the final package size to see what's in the package. Use [source-map-explorer](https://www.npmjs.com/package/source-map-explorer) to see what's taking up the most size in the package. First run `npm run build` to build a production bundle, then run `npx source-map-explorer 'packages/<package-name>/build/static/js/*.js'`, e.g.:
+
+```
+npm run build
+npx source-map-explorer 'packages/code-studio/build/static/js/*.js'
+```
diff --git a/__mocks__/monaco-editor-empty.js b/__mocks__/monaco-editor-empty.js
diff --git a/__mocks__/monaco-editor.js b/__mocks__/monaco-editor.js
diff --git a/jest.config.base.cjs b/jest.config.base.cjs
@@ -14,19 +14,10 @@ module.exports = {
       __dirname,
       './__mocks__/fileMock.js'
     ),
-    '^monaco-editor/esm/vs/editor/editor.api.js$': path.join(
-      __dirname,
-      './__mocks__/monaco-editor.js'
-    ),
-    // Used for MonacoUtils test
-    '^monaco-editor/esm/vs/editor/common/standalone/(.*)': path.join(
+    '^monaco-editor$': path.join(
       __dirname,
       'node_modules',
-      'monaco-editor/esm/vs/editor/common/standalone/$1'
-    ),
-    '^monaco-editor/esm/vs/editor/(.*)': path.join(
-      __dirname,
-      './__mocks__/monaco-editor-empty.js'
+      'monaco-editor/esm/vs/editor/editor.api.js'
     ),
     '^@deephaven/golden-layout$': path.join(
       __dirname,

diff --git a/jest.setup.ts b/jest.setup.ts
@@ -13,3 +13,20 @@ Log.setLogLevel(logLevel);
 // disable annoying dnd-react warnings
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 window['__react-beautiful-dnd-disable-dev-warnings' as any] = true;
+
+// Define the matchMedia property so we can mock out monaco properly
+// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+// https://stackoverflow.com/questions/39830580/jest-test-fails-typeerror-window-matchmedia-is-not-a-function
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/console/package.json b/packages/console/package.json
@@ -43,7 +43,7 @@
     "lodash.throttle": "^4.1.1",
     "memoize-one": "^5.1.1",
     "memoizee": "^0.4.15",
-    "monaco-editor": "^0.27.0",
+    "monaco-editor": "^0.34.0",
     "papaparse": "^5.3.2",
     "popper.js": "^1.16.1",
     "prop-types": "^15.7.2",

diff --git a/packages/console/src/Console.test.tsx b/packages/console/src/Console.test.tsx
@@ -13,7 +13,6 @@ function makeMockCommandHistoryStorage(): CommandHistoryStorage {
   };
 }
 
-jest.mock('./ConsoleInput', () => () => null);
 jest.mock('./Console', () => ({
   ...(jest.requireActual('./Console') as Record<string, unknown>),
   commandHistory: jest.fn(),

diff --git a/packages/console/src/ConsoleInput.tsx b/packages/console/src/ConsoleInput.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent, ReactElement, RefObject } from 'react';
 import classNames from 'classnames';
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
+import * as monaco from 'monaco-editor';
 import Log from '@deephaven/log';
 import {
   assertNotNull,
@@ -278,7 +278,7 @@ export class ConsoleInput extends PureComponent<
 
     // Override the Ctrl+F functionality so that the find window doesn't appear
     this.commandEditor.addCommand(
-      monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_F, // eslint-disable-line no-bitwise
+      monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyF, // eslint-disable-line no-bitwise
       () => undefined
     );
 

diff --git a/packages/console/src/common/Code.tsx b/packages/console/src/common/Code.tsx
@@ -1,5 +1,5 @@
 import React, { Component, ReactElement, ReactNode } from 'react';
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
+import * as monaco from 'monaco-editor';
 
 interface CodeProps {
   children: ReactNode;

diff --git a/packages/console/src/log/LogView.tsx b/packages/console/src/log/LogView.tsx
@@ -5,7 +5,7 @@ import { vsGear, dhTrashUndo } from '@deephaven/icons';
 import { assertNotNull } from '@deephaven/utils';
 import { IdeSession, LogItem } from '@deephaven/jsapi-shim';
 import { Placement } from 'popper.js';
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
+import * as monaco from 'monaco-editor';
 import ConsoleUtils from '../common/ConsoleUtils';
 import LogLevel from './LogLevel';
 import './LogView.scss';

diff --git a/packages/console/src/monaco/MonacoCompletionProvider.test.tsx b/packages/console/src/monaco/MonacoCompletionProvider.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
+import * as monaco from 'monaco-editor';
 import dh from '@deephaven/jsapi-shim';
 import MonacoCompletionProvider from './MonacoCompletionProvider';
 

diff --git a/packages/console/src/monaco/MonacoCompletionProvider.tsx b/packages/console/src/monaco/MonacoCompletionProvider.tsx
@@ -2,7 +2,7 @@
  * Completion provider for a code session
  */
 import { PureComponent } from 'react';
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
+import * as monaco from 'monaco-editor';
 import Log from '@deephaven/log';
 import { IdeSession } from '@deephaven/jsapi-shim';
 

diff --git a/packages/console/src/monaco/MonacoUtils.test.ts b/packages/console/src/monaco/MonacoUtils.test.ts
@@ -1,18 +1,8 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable no-bitwise */
-// Monaco exports its types only at the root. TS complains there's no types if these ignores aren't added
-// @ts-ignore
-import { KeyCode } from 'monaco-editor/esm/vs/editor/common/standalone/standaloneEnums.js';
-// @ts-ignore
-import { KeyMod } from 'monaco-editor/esm/vs/editor/common/standalone/standaloneBase';
+import * as monaco from 'monaco-editor';
 import { Shortcut, KEY, MODIFIER } from '@deephaven/components';
 import MonacoUtils from './MonacoUtils';
 
-const monaco = {
-  KeyCode,
-  KeyMod,
-};
-
 const SINGLE_KEY_PARAMS: ConstructorParameters<typeof Shortcut>[0] = {
   id: 'Single key',
   name: '',
@@ -64,42 +54,42 @@ describe('Windows shortcuts', () => {
   it('Converts a single key shortcut', () => {
     const s = new Shortcut(SINGLE_KEY_PARAMS);
     expect(MonacoUtils.getMonacoKeyCodeFromShortcut(s)).toEqual(
-      monaco.KeyCode.KEY_A
+      monaco.KeyCode.KeyA
     );
   });
 
   it('Converts a shortcut with ctrl', () => {
     const s = new Shortcut(CTRL_MOD_PARAMS);
     expect(MonacoUtils.getMonacoKeyCodeFromShortcut(s)).toEqual(
-      monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_A
+      monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyA
     );
   });
 
   it('Converts a shortcut with shift', () => {
     const s = new Shortcut(SHIFT_MOD_PARAMS);
     expect(MonacoUtils.getMonacoKeyCodeFromShortcut(s)).toEqual(
-      monaco.KeyMod.Shift | monaco.KeyCode.KEY_A
+      monaco.KeyMod.Shift | monaco.KeyCode.KeyA
     );
   });
 
   it('Converts a shortcut with alt', () => {
     const s = new Shortcut(ALT_MOD_PARAMS);
     expect(MonacoUtils.getMonacoKeyCodeFromShortcut(s)).toEqual(
-      monaco.KeyMod.Alt | monaco.KeyCode.KEY_A
+      monaco.KeyMod.Alt | monaco.KeyCode.KeyA
     );
   });
 
   it('Converts a shortcut with meta', () => {
     const s = new Shortcut(META_MOD_PARAMS);
     expect(MonacoUtils.getMonacoKeyCodeFromShortcut(s)).toEqual(
-      monaco.KeyMod.WinCtrl | monaco.KeyCode.KEY_A
+      monaco.KeyMod.WinCtrl | monaco.KeyCode.KeyA
     );
   });
 
   it('Converts a shortcut with multiple modifiers', () => {
     const s = new Shortcut(MULTI_MOD_PARAMS);
     expect(MonacoUtils.getMonacoKeyCodeFromShortcut(s)).toEqual(
-      monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KEY_A
+      monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyA
     );
   });
 });
@@ -113,42 +103,42 @@ describe('Mac shortcuts', () => {
   it('Converts a single key shortcut', () => {
     const s = new Shortcut(SINGLE_KEY_PARAMS);
     expect(MonacoUtils.getMonacoKeyCodeFromShortcut(s)).toEqual(
-      monaco.KeyCode.KEY_B
+      monaco.KeyCode.KeyB
     );
   });
 
   it('Converts a shortcut with ctrl', () => {
     const s = new Shortcut(CTRL_MOD_PARAMS);
     expect(MonacoUtils.getMonacoKeyCodeFromShortcut(s)).toEqual(
-      monaco.KeyMod.WinCtrl | monaco.KeyCode.KEY_B
+      monaco.KeyMod.WinCtrl | monaco.KeyCode.KeyB
     );
   });
 
   it('Converts a shortcut with shift', () => {
     const s = new Shortcut(SHIFT_MOD_PARAMS);
     expect(MonacoUtils.getMonacoKeyCodeFromShortcut(s)).toEqual(
-      monaco.KeyMod.Shift | monaco.KeyCode.KEY_B
+      monaco.KeyMod.Shift | monaco.KeyCode.KeyB
     );
   });
 
   it('Converts a shortcut with alt', () => {
     const s = new Shortcut(ALT_MOD_PARAMS);
     expect(MonacoUtils.getMonacoKeyCodeFromShortcut(s)).toEqual(
-      monaco.KeyMod.Alt | monaco.KeyCode.KEY_B
+      monaco.KeyMod.Alt | monaco.KeyCode.KeyB
     );
   });
 
   it('Converts a shortcut with meta', () => {
     const s = new Shortcut(META_MOD_PARAMS);
     expect(MonacoUtils.getMonacoKeyCodeFromShortcut(s)).toEqual(
-      monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_B
+      monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyB
     );
   });
 
   it('Converts a shortcut with multiple modifiers', () => {
     const s = new Shortcut(MULTI_MOD_PARAMS);
     expect(MonacoUtils.getMonacoKeyCodeFromShortcut(s)).toEqual(
-      monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KEY_B
+      monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyB
     );
   });
 });