decrease monaco bundle size

Author: Emil Andersson

build_scripts/webpack-plugins.js

@@ -93,7 +93,38 @@ module.exports = () => {
       title: 'TypeScript',
       excludeWarnings: false
     }),
-    new MonacoWebpackPlugin()
+    new MonacoWebpackPlugin({
+      features: [
+        '!accessibilityHelp',
+        '!anchorSelect',
+        '!caretOperations',
+        '!clipboard',
+        '!codeAction',
+        '!codelens',
+        '!colorDetector',
+        '!contextmenu',
+        '!coreCommands',
+        '!cursorUndo',
+        '!dnd',
+        '!fontZoom',
+        '!gotoError',
+        '!gotoLine',
+        '!gotoSymbol',
+        '!iPadShowKeyboard',
+        '!inspectTokens',
+        '!links',
+        '!parameterHints',
+        '!quickHelp',
+        '!referenceSearch',
+        '!snippets',
+        '!toggleHighContrast',
+        '!toggleTabFocusMode',
+        '!transpose',
+        '!unusualLineTerminators',
+        '!viewportSemanticTokens'
+      ],
+      languages: []
+    })
   ]
 
   if (!helpers.isProduction) {

build_scripts/webpack.config.js

@@ -62,19 +62,32 @@ module.exports = {
         splitChunks: {
           cacheGroups: {
             vendor: {
-              test: /[\\/]node_modules[\\/](react|react-dom|@firebase|d3|codemirror|faker|remark-mdx|@mdx-js)[\\/]/,
+              test: /[\\/]node_modules[\\/](react|react-dom|@firebase|d3)[\\/]/,
               name: 'vendor',
-              chunks: 'all'
+              chunks: 'all',
+              enforce: true
+            },
+            'cypher-editor': {
+              test: /[\\/]node_modules[\\/](antlr4|codemirror|cypher-codemirror|cypher-editor-support)[\\/]/,
+              name: 'cypher-editor',
+              chunks: 'all',
+              enforce: true
+            },
+            mdx: {
+              test: /[\\/]node_modules[\\/](@babel|@literal-jsx|@mdx-js|acorn|acorn-jsx|hast-util-raw|mdast-util-to-hast|remark-mdx|remark-parse)[\\/]/,
+              name: 'mdx',
+              chunks: 'all',
+              enforce: true
             },
-            'cypher-codemirror': {
-              test: /[\\/]node_modules[\\/](cypher-codemirror|cypher-editor-support)[\\/]/,
-              name: 'cypher-codemirror',
+            monaco: {
+              test: /[\\/]node_modules[\\/](monaco-editor)[\\/]/,
+              name: 'monaco',
               chunks: 'all',
               enforce: true
             },
-            ui: {
+            'relate-by-ui': {
               test: /[\\/]node_modules[\\/](@relate-by-ui|semantic-ui-react)[\\/]/,
-              name: 'ui',
+              name: 'relate-by-ui',
               chunks: 'all',
               enforce: true
             },

src/browser/modules/Editor/CypherMonacoThemes.ts

@@ -18,7 +18,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import * as monaco from 'monaco-editor'
+import { editor } from 'monaco-editor/esm/vs/editor/editor.api'
 import { base } from 'browser-styles/themes'
 import {
   LIGHT_THEME,
@@ -224,7 +224,7 @@ const tokensWithoutSyntaxHighlighting: string[] = [
 ]
 
 // syntax highlighting from cypher-editor/cypher-codemirror/src/css/syntax.css
-const sharedRules: monaco.editor.ITokenThemeRule[] = [
+const sharedRules: editor.ITokenThemeRule[] = [
   ...strings.map(token => makeCypherTokenThemeRule(token, CypherColor.yellow)),
   ...numbers.map(token => makeCypherTokenThemeRule(token, CypherColor.cyan)),
 
@@ -279,7 +279,7 @@ const lightThemeRules = [
   )
 ]
 
-export const monacoDarkTheme: monaco.editor.IStandaloneThemeData = {
+export const monacoDarkTheme: editor.IStandaloneThemeData = {
   base: 'vs-dark',
   inherit: false,
   rules: darkThemeRules,
@@ -288,7 +288,7 @@ export const monacoDarkTheme: monaco.editor.IStandaloneThemeData = {
     foreground: CypherColor.white
   }
 }
-export const monacoLightTheme: monaco.editor.IStandaloneThemeData = {
+export const monacoLightTheme: editor.IStandaloneThemeData = {
   base: 'vs',
   inherit: false,
   rules: lightThemeRules,

src/browser/modules/Editor/CypherTokensProvider.ts

@@ -20,9 +20,9 @@
 
 import { InputStream } from 'antlr4/index.js'
 import { CypherLexer } from 'cypher-editor-support/src/_generated/CypherLexer'
-import * as monaco from 'monaco-editor'
+import { languages } from 'monaco-editor/esm/vs/editor/editor.api'
 
-class CypherState implements monaco.languages.IState {
+class CypherState implements languages.IState {
   clone() {
     return new CypherState()
   }
@@ -32,12 +32,12 @@ class CypherState implements monaco.languages.IState {
   }
 }
 
-export class CypherTokensProvider implements monaco.languages.TokensProvider {
+export class CypherTokensProvider implements languages.TokensProvider {
   getInitialState(): CypherState {
     return new CypherState()
   }
 
-  tokenize(line: string): monaco.languages.ILineTokens {
+  tokenize(line: string): languages.ILineTokens {
     const lexer = new CypherLexer(new InputStream(line))
 
     return {

src/browser/modules/Editor/Monaco.tsx

@@ -20,7 +20,11 @@
 
 import { parse } from 'cypher-editor-support'
 import { debounce } from 'lodash-es'
-import * as monaco from 'monaco-editor'
+import {
+  editor,
+  languages,
+  MarkerSeverity
+} from 'monaco-editor/esm/vs/editor/editor.api'
 import React, { useEffect, useRef } from 'react'
 import { withBus } from 'react-suber'
 import { Bus } from 'suber'
@@ -45,7 +49,7 @@ interface MonacoProps {
   id: string
   value?: string
   onChange?: (value: string) => void
-  options?: monaco.editor.IGlobalEditorOptions
+  options?: editor.IGlobalEditorOptions
   theme?: BrowserTheme
 }
 
@@ -57,19 +61,19 @@ const Monaco = ({
   onChange = () => undefined,
   theme = LIGHT_THEME
 }: MonacoProps): JSX.Element => {
-  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null)
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null)
   const monacoId = `monaco-${id}`
 
   // Create monaco instance, listen to text changes and destroy
   useEffect(() => {
-    monaco.languages.register({ id: 'cypher' })
-    monaco.languages.setTokensProvider('cypher', new CypherTokensProvider())
+    languages.register({ id: 'cypher' })
+    languages.setTokensProvider('cypher', new CypherTokensProvider())
 
-    monaco.editor.defineTheme(DARK_THEME, monacoDarkTheme)
-    monaco.editor.defineTheme(LIGHT_THEME, monacoLightTheme)
-    monaco.editor.defineTheme(OUTLINE_THEME, monacoLightTheme)
+    editor.defineTheme(DARK_THEME, monacoDarkTheme)
+    editor.defineTheme(LIGHT_THEME, monacoLightTheme)
+    editor.defineTheme(OUTLINE_THEME, monacoLightTheme)
 
-    editorRef.current = monaco.editor.create(
+    editorRef.current = editor.create(
       document.getElementById(monacoId) as HTMLElement,
       {
         automaticLayout: true,
@@ -102,7 +106,7 @@ const Monaco = ({
 
   // Update theme when setting is changed
   useEffect(() => {
-    monaco.editor.setTheme(theme)
+    editor.setTheme(theme)
   }, [theme])
 
   // Trigger update when multi statement setting is changed to update warnings
@@ -126,8 +130,8 @@ const Monaco = ({
 
   // On each text change, clear warnings and reset countdown to adding warnings
   const onContentUpdate = () => {
-    monaco.editor.setModelMarkers(
-      editorRef.current?.getModel() as monaco.editor.ITextModel,
+    editor.setModelMarkers(
+      editorRef.current?.getModel() as editor.ITextModel,
       monacoId,
       []
     )
@@ -139,20 +143,20 @@ const Monaco = ({
   ) => {
     if (!statements.length) return
 
-    const model = editorRef.current?.getModel() as monaco.editor.ITextModel
+    const model = editorRef.current?.getModel() as editor.ITextModel
 
     // add multi statement warning if multi setting is off
     if (statements.length > 1 && !enableMultiStatementMode) {
       const secondStatementLine = statements[1].start.line
-      monaco.editor.setModelMarkers(model, monacoId, [
+      editor.setModelMarkers(model, monacoId, [
         {
           startLineNumber: secondStatementLine,
           startColumn: 1,
           endLineNumber: secondStatementLine,
           endColumn: 1000,
           message:
             'To use multi statement queries, please enable multi statement in the settings panel.',
-          severity: monaco.MarkerSeverity.Warning
+          severity: MarkerSeverity.Warning
         }
       ])
     }
@@ -176,8 +180,8 @@ const Monaco = ({
             response.success === true &&
             response.result.summary.notifications.length > 0
           ) {
-            monaco.editor.setModelMarkers(model, monacoId, [
-              ...monaco.editor.getModelMarkers({ owner: monacoId }),
+            editor.setModelMarkers(model, monacoId, [
+              ...editor.getModelMarkers({ owner: monacoId }),
               ...response.result.summary.notifications.map(
                 ({
                   description,
@@ -193,7 +197,7 @@ const Monaco = ({
                   endLineNumber: statementLineNumber + line,
                   endColumn: 1000,
                   message: title + '\n\n' + description,
-                  severity: monaco.MarkerSeverity.Warning
+                  severity: MarkerSeverity.Warning
                 })
               )
             ])