Fix typescript modules losing context

Author: Ives van Hoorne

src/app/components/sandbox/CodeEditor/Monaco.js

@@ -319,6 +319,23 @@ export default class CodeEditor extends React.Component<Props, State> {
     }
   };
 
+  disposeModel = (id: string) => {
+    if (modelCache[id]) {
+      try {
+        if (modelCache[id].model) {
+          modelCache[id].model.dispose();
+        }
+        if (modelCache[id].lib) {
+          modelCache[id].lib.dispose();
+        }
+
+        delete modelCache[id];
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  };
+
   shouldComponentUpdate(nextProps: Props, nextState: State) {
     if (nextState.fuzzySearchEnabled !== this.state.fuzzySearchEnabled) {
       return true;
@@ -346,8 +363,7 @@ export default class CodeEditor extends React.Component<Props, State> {
               this.editor.setModel(null);
             }
 
-            modelCache[module.id].model.dispose();
-            delete modelCache[module.id];
+            this.disposeModel(module.id);
 
             this.createModel(
               module,
@@ -367,8 +383,7 @@ export default class CodeEditor extends React.Component<Props, State> {
       Object.keys(modelCache).forEach(moduleId => {
         // This module got deleted, dispose it
         if (!nextProps.modules.find(m => m.id === moduleId)) {
-          modelCache[moduleId].model.dispose();
-          delete modelCache[moduleId];
+          this.disposeModel(moduleId);
         }
       });
     }
@@ -420,8 +435,27 @@ export default class CodeEditor extends React.Component<Props, State> {
     if (nextId !== currentId && this.editor) {
       const pos = this.editor.getPosition();
       if (modelCache[currentId]) {
+        const currentModule = this.props.modules.find(m => m.id === currentId);
+        const path = getModulePath(
+          this.props.modules,
+          this.props.directories,
+          currentId
+        );
+
         modelCache[currentId].cursorPos = pos;
+        if (modelCache[currentId].lib) {
+          // We let Monaco know what the latest code is of this file by removing
+          // the old extraLib definition and defining a new one.
+          modelCache[currentId].lib.dispose();
+          modelCache[
+            currentId
+          ].lib = this.monaco.languages.typescript.typescriptDefaults.addExtraLib(
+            currentModule.code,
+            `file://${path}`
+          );
+        }
       }
+
       await this.openNewModel(nextId, nextTitle);
       this.editor.focus();
     }
@@ -441,7 +475,7 @@ export default class CodeEditor extends React.Component<Props, State> {
 
     if (nextSandboxId !== currentSandboxId) {
       // Reset models, dispose old ones
-      this.disposeModules();
+      this.disposeModules(this.props.modules);
 
       // Do in setTimeout, since disposeModules is async
       setTimeout(() => {
@@ -615,6 +649,9 @@ export default class CodeEditor extends React.Component<Props, State> {
       compilerDefaults
     );
 
+    monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
+    monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true);
+
     monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
       noSemanticValidation: false,
       noSyntaxValidation: !hasNativeTypescript,
@@ -691,32 +728,30 @@ export default class CodeEditor extends React.Component<Props, State> {
     );
   };
 
-  disposeModules = () => {
+  disposeModules = (modules: Array<Module>) => {
     if (this.editor) {
       this.editor.setModel(null);
     }
 
     if (this.monaco) {
-      this.monaco.editor.getModels().forEach(model => {
-        model.dispose();
+      modules.forEach(m => {
+        this.disposeModel(m.id);
       });
     }
 
     modelCache = {};
   };
 
-  initializeModules = (modules = this.props.modules) =>
-    Promise.all(
-      modules.reverse().map(module => this.createModel(module, modules))
-    );
+  initializeModules = (modules: Array<Module> = this.props.modules) =>
+    Promise.all(modules.map(module => this.createModel(module, modules)));
 
   resizeEditor = () => {
     this.editor.layout();
   };
 
   componentWillUnmount() {
     window.removeEventListener('resize', this.resizeEditor);
-    this.disposeModules();
+    this.disposeModules(this.props.modules);
     if (this.editor) {
       this.editor.dispose();
     }
@@ -740,6 +775,14 @@ export default class CodeEditor extends React.Component<Props, State> {
     // Remove the first slash, as this will otherwise create errors in monaco
     const path = getModulePath(modules, directories, module.id);
 
+    // We need to add this as a lib specifically to Monaco, because Monaco
+    // tends to lose type definitions if you don't touch a file for a while.
+    // Related issue: https://github.com/Microsoft/monaco-editor/issues/461
+    const lib = this.monaco.languages.typescript.typescriptDefaults.addExtraLib(
+      module.code,
+      `file://${path}`
+    );
+
     const mode = await this.getMode(module.title);
     const model = this.monaco.editor.createModel(
       module.code,
@@ -755,6 +798,7 @@ export default class CodeEditor extends React.Component<Props, State> {
       cursorPos: null,
     };
     modelCache[module.id].model = model;
+    modelCache[module.id].lib = lib;
 
     return model;
   };