Lazy load monaco editor

related to #262

web/config/webpack.config.js

@@ -27,7 +27,58 @@ module.exports = (config, { env }) => {
       })
     }
   })
-  config.plugins.push(new MonacoWebpackPlugin())
+  config.plugins.push(
+    new MonacoWebpackPlugin({
+      languages: ['typescript'],
+      features: [
+        'accessibilityHelp',
+        'anchorSelect',
+        'bracketMatching',
+        'caretOperations',
+        'clipboard',
+        'codeAction',
+        'codelens',
+        'comment',
+        'contextmenu',
+        'coreCommands',
+        'cursorUndo',
+        'documentSymbols',
+        'find',
+        'folding',
+        'fontZoom',
+        'format',
+        'gotoError',
+        'gotoLine',
+        'gotoSymbol',
+        'hover',
+        'inPlaceReplace',
+        'indentation',
+        'inlineHints',
+        'inspectTokens',
+        'linesOperations',
+        'linkedEditing',
+        'links',
+        'multicursor',
+        'parameterHints',
+        'quickCommand',
+        'quickHelp',
+        'quickOutline',
+        'referenceSearch',
+        'rename',
+        'smartSelect',
+        'snippets',
+        'suggest',
+        'toggleHighContrast',
+        'toggleTabFocusMode',
+        'transpose',
+        'unusualLineTerminators',
+        'viewportSemanticTokens',
+        'wordHighlighter',
+        'wordOperations',
+        'wordPartOperations',
+      ],
+    })
+  )
   config.module.rules[0].oneOf.push({
     test: /opencascade\.wasm\.wasm$/,
     type: 'javascript/auto',

web/src/components/IdeEditor/IdeEditor.js

@@ -1,7 +1,7 @@
-import { useContext, useEffect } from 'react'
+import { useContext, useEffect, Suspense, lazy } from 'react'
 import { isBrowser } from '@redwoodjs/prerender/browserUtils'
 import { IdeContext } from 'src/components/IdeToolbarNew'
-import Editor from '@monaco-editor/react'
+const Editor = lazy(() => import('@monaco-editor/react'))
 
 const IdeEditor = () => {
   const { state, dispatch } = useContext(IdeContext)
@@ -39,12 +39,14 @@ const IdeEditor = () => {
 
   return (
     <div className="h-full" onKeyDown={handleSaveHotkey}>
-      <Editor
-        defaultValue={state.code}
-        // TODO #247 cpp seems better than js for the time being
-        defaultLanguage="cpp"
-        onChange={handleCodeChange}
-      />
+      <Suspense fallback={<div>. . . loading</div>}>
+        <Editor
+          defaultValue={state.code}
+          // TODO #247 cpp seems better than js for the time being
+          defaultLanguage="cpp"
+          onChange={handleCodeChange}
+        />
+      </Suspense>
     </div>
   )
 }

web/src/helpers/cascadeController.js

@@ -17,7 +17,7 @@ class CascadeController {
     // only inits on first call, after that it just updates the editor and revaluates code, maybe should rename?
     this.incomingOnCodeChang = onCodeChange
     if (!this._hasInitialised) {
-      new initialize(this.controllerOnCodeChange, code, onInit)
+      initialize(this.controllerOnCodeChange, code, onInit)
       this._hasInitialised = true
       return
     }
@@ -25,23 +25,28 @@ class CascadeController {
   }
 
   capture(environment, width = 512, height = 384) {
-    environment.camera.aspect = width / height;
-    environment.camera.updateProjectionMatrix();
-    environment.renderer.setSize(width, height);
-    environment.renderer.render(environment.scene, environment.camera, null, false);
+    environment.camera.aspect = width / height
+    environment.camera.updateProjectionMatrix()
+    environment.renderer.setSize(width, height)
+    environment.renderer.render(
+      environment.scene,
+      environment.camera,
+      null,
+      false
+    )
     let imgBlob = new Promise((resolve, reject) => {
       environment.renderer.domElement.toBlob(
         (blob) => {
-          blob.name = `part_capture-${ Date.now() }`
+          blob.name = `part_capture-${Date.now()}`
           resolve(blob)
         },
         'image/jpeg',
         1
-      );
+      )
     })
 
     // Return to original dimensions
-    environment.onWindowResize();
+    environment.onWindowResize()
 
     return imgBlob
   }