fix monaco webpack bundling (#2675)

.vscode/settings.json

@@ -4,25 +4,22 @@
  "**/all.min.js": true
  },
  "files.exclude": {
- "**/node_modules": true,
+ "**/node_modules": false,
  "**/.github": false
  },
  "files.trimTrailingWhitespace": true,
  "editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
  },
  "eslint.format.enable": true,
- "editor.formatOnSave": true,
- "editor.formatOnPaste": true,
+ "editor.formatOnSave": false,
+ "editor.formatOnPaste": false,
  "typescript.updateImportsOnFileMove.enabled": "always",
- "eslint.validate": [
- "typescript",
- "typescriptreact"
- ],
+ "eslint.validate": ["typescript", "typescriptreact"],
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
  "*.ts": "$(capture).js, $(capture).d.ts, $(capture).spec.ts",
  "*.tsx": "$(capture).ts, $(capture).d.ts, $(capture).spec.tsx, $(capture).styles.ts",
  "package.json": "package-lock.json, .npmrc"
- }
-}
+ },
+}

config/webpack.config.js

@@ -1,5 +1,3 @@
-
-
 const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
@@ -44,11 +42,11 @@ const cssModuleRegex = /\.module\.css$/;
 const sassRegex = /\.(scss|sass)$/;
 const sassModuleRegex = /\.module\.(scss|sass)$/;
 
-const hasJsxRuntime = (() => {
+const hasJsxRuntime = () => {
  if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
  return false;
  }
-})
+};
 
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
@@ -390,21 +388,22 @@ module.exports = function (webpackEnv) {
  'sass-loader'
  )
  },
+ {
+ test: /\.ttf$/,
+ type: 'asset/resource'
+ },
  // "file" loader makes sure those assets get served by WebpackDevServer.
  // When you `import` an asset, you get its (virtual) filename.
  // In production, they would get copied to the `build` folder.
  // This loader doesn't use a "test" so it will catch all modules
  // that fall through the other loaders.
  {
- loader: require.resolve('file-loader'),
  // Exclude `js` files to keep "css" loader working as it injects
  // its runtime that would otherwise be processed through "file" loader.
  // Also exclude `html` and `json` extensions so they get processed
  // by webpacks internal loaders.
- exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
- options: {
- name: 'static/media/[name].[contenthash:8].[ext]'
- }
+ exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/, /data:image\/svg\+xml;/],
+ type: 'asset/resource'
  }
  // ** STOP ** Are you adding a new loader?
  // Make sure to add the new loader(s) before the "file" loader.
@@ -417,7 +416,17 @@ module.exports = function (webpackEnv) {
  maxChunks: 1
  }),
  new MonacoWebpackPlugin({
- languages: ['json', 'typescript','javascript', 'css', 'java', 'csharp', 'html', 'powershell', 'go']
+ languages: [
+ 'json',
+ 'typescript',
+ 'javascript',
+ 'css',
+ 'java',
+ 'csharp',
+ 'html',
+ 'powershell',
+ 'go'
+ ]
  }),
  // Generates an `index.html` file with the <script> injected.
  new HtmlWebpackPlugin(

jest.config.js

@@ -16,21 +16,21 @@ module.exports = {
  '**/__tests__/**/*.[jt]s?(x)',
  '**/?(*.)+(spec|test).[jt]s?(x)'
  ],
- globals: {
- crypto: require('crypto'),
- 'ts-jest': {
- isolatedModules: true
- }
- },
  testEnvironmentOptions: {
  url: 'http://localhost'
  },
  testEnvironment: 'jsdom',
  transform: {
- '^.+\\.(js|jsx|ts|tsx)$': 'ts-jest',
+ '^.+\\.(js|jsx|ts|tsx)$': ['ts-jest', {
+ isolatedModules: true
+ }],
  '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
- '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': 'ts-jest',
- [`(${esModules}).+\\.js$`]: 'ts-jest'
+ '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': ['ts-jest', {
+ isolatedModules: true
+ }],
+ [`(${esModules}).+\\.js$`]: ['ts-jest', {
+ isolatedModules: true
+ }]
  },
  transformIgnorePatterns: [
  '^.+\\.module\\.(css|sass|scss)$',

src/app/views/common/monaco/Monaco.tsx

@@ -1,6 +1,6 @@
 import { FocusZone } from '@fluentui/react';
-import Editor, { OnChange, loader, useMonaco } from '@monaco-editor/react';
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import Editor, { OnChange, loader } from '@monaco-editor/react';
 import { useEffect } from 'react';
 
 import { ThemeContext } from '../../../../themes/theme-context';
@@ -18,7 +18,6 @@ interface IMonaco {
 }
 
 export function Monaco(props: IMonaco) {
-
  let { body } = props;
  const { onChange, language, readOnly, height } = props;
 
@@ -45,7 +44,7 @@ export function Monaco(props: IMonaco) {
  <FocusZone disabled={props.extraInfoElement ? false : true}>
  <div className='monaco-editor'>
  {props.extraInfoElement}
- <ThemeContext.Consumer >
+ <ThemeContext.Consumer>
  {(theme) => (<Editor
  width='800 !important'
  height={itemHeight}
@@ -64,7 +63,7 @@ export function Monaco(props: IMonaco) {
  renderLineHighlight: 'none',
  scrollBeyondLastLine: true,
  overviewRulerBorder: false,
- wordSeparators:'"'
+ wordSeparators: '"'
  }}
  onChange={onChange}
  theme={theme === 'light' ? 'vs' : 'vs-dark'}