From 73c3a7c6f4ea91c80439d64e81aa58ee8bc9f748 Mon Sep 17 00:00:00 2001
From: Kurt Hutten <kurt@kurthutten.com>
Date: Sat, 20 Mar 2021 10:06:17 +1100
Subject: [PATCH] Lazy load monaco editor

related to #262
---
 web/config/webpack.config.js              | 53 ++++++++++++++++++++++-
 web/src/cascade                           |  2 +-
 web/src/components/IdeEditor/IdeEditor.js | 18 ++++----
 web/src/helpers/cascadeController.js      | 21 +++++----
 4 files changed, 76 insertions(+), 18 deletions(-)

diff --git a/web/config/webpack.config.js b/web/config/webpack.config.js
index bbc2c4f..543bc02 100644
--- a/web/config/webpack.config.js
+++ b/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',
diff --git a/web/src/cascade b/web/src/cascade
index 12235af..cd23a8e 160000
--- a/web/src/cascade
+++ b/web/src/cascade
@@ -1 +1 @@
-Subproject commit 12235af0720ab939e285cec9de75ca7dd678a5b5
+Subproject commit cd23a8e67358278e96ec37505cf0fcc616e93225
diff --git a/web/src/components/IdeEditor/IdeEditor.js b/web/src/components/IdeEditor/IdeEditor.js
index 4dd3fab..918138f 100644
--- a/web/src/components/IdeEditor/IdeEditor.js
+++ b/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>
   )
 }
diff --git a/web/src/helpers/cascadeController.js b/web/src/helpers/cascadeController.js
index 669c374..ea67043 100644
--- a/web/src/helpers/cascadeController.js
+++ b/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
   }