feed monaco with typescript dependencies before the current file is actually set.

apps/remix-ide/src/app/editor/editor.js

@@ -145,27 +145,6 @@ class Editor extends Plugin {
       this.currentThemeType = theme.quality
       this.renderComponent()
     })
-    this.on('fileManager', 'currentFileChanged', async (name) => {
-      if (name.endsWith('.ts')) {
-        // extract the import, resolve their content
-        // and add the imported files to Monaco through the `addModel`
-        // so Monaco can provide auto completion
-        let content = await this.call('fileManager', 'readFile', name)
-        const paths = name.split('/')
-        paths.pop()
-        const fromPath = paths.join('/') // get current execution context path
-        for (const match of content.matchAll(/import\s+.*\s+from\s+(?:"(.*?)"|'(.*?)')/g)) {
-          let path = match[2]
-          if (path.startsWith('./') || path.startsWith('../')) path = resolve(fromPath, path)
-          if (path.startsWith('/')) path = path.substring(1)
-          if (!path.endsWith('.ts')) path = path + '.ts'
-          if (await this.call('fileManager', 'exists', path)) {
-            content = await this.call('fileManager', 'readFile', path)
-            this.emit('addModel', content, 'typescript', path, false)
-          }
-        }
-      }
-    })
     this.on('fileManager', 'noFileSelected', async () => {
       this.currentFile = null
       this.renderComponent()
@@ -240,8 +219,33 @@ class Editor extends Plugin {
    * @param {string} content Content of the file to open
    * @param {string} mode Mode for this file [Default is `text`]
    */
-  _createSession (path, content, mode) {
+  async _createSession (path, content, mode) {
     if (!this.activated) return
+    
+    if (path.endsWith('.ts')) {
+      try {
+        // extract the import, resolve their content
+        // and add the imported files to Monaco through the `addModel`
+        // so Monaco can provide auto completion
+        let content = await this.call('fileManager', 'readFile', path)
+        const paths = path.split('/')
+        paths.pop()
+        const fromPath = paths.join('/') // get current execution context path
+        for (const match of content.matchAll(/import\s+.*\s+from\s+(?:"(.*?)"|'(.*?)')/g)) {
+          let path = match[2]
+          if (path.startsWith('./') || path.startsWith('../')) path = resolve(fromPath, path)
+          if (path.startsWith('/')) path = path.substring(1)
+          if (!path.endsWith('.ts')) path = path + '.ts'
+          if (await this.call('fileManager', 'exists', path)) {
+            content = await this.call('fileManager', 'readFile', path)
+            this.emit('addModel', content, 'typescript', path, false)
+          }
+        }
+      } catch (e) {
+        console.log('unable to resolve dependency of', path, e)
+      }
+    }
+
     this.emit('addModel', content, mode, path, false)
     return {
       path,
@@ -294,7 +298,7 @@ class Editor extends Plugin {
    * @param {string} path Path of the session to open.
    * @param {string} content Content of the document or update.
    */
-  open (path, content) {
+  async open (path, content) {
     /*
       we have the following cases:
        - URL prepended with "localhost"
@@ -302,7 +306,7 @@ class Editor extends Plugin {
        - URL not prepended with the file explorer. We assume (as it is in the whole app, that this is a "browser" URL
     */
     if (!this.sessions[path]) {
-      const session = this._createSession(path, content, this._getMode(path))
+      const session = await this._createSession(path, content, this._getMode(path))
       this.sessions[path] = session
       this.readOnlySessions[path] = false
     } else if (this.sessions[path].getValue() !== content) {
@@ -316,9 +320,9 @@ class Editor extends Plugin {
    * @param {string} path Path of the session to open.
    * @param {string} content Content of the document or update.
    */
-  openReadOnly (path, content) {
+  async openReadOnly (path, content) {
     if (!this.sessions[path]) {
-      const session = this._createSession(path, content, this._getMode(path))
+      const session = await this._createSession(path, content, this._getMode(path))
       this.sessions[path] = session
       this.readOnlySessions[path] = true
     }

apps/remix-ide/src/app/files/fileManager.ts

@@ -633,9 +633,9 @@ class FileManager extends Plugin {
         throw error
       }
       if (provider.isReadOnly(file)) {
-        this.editor.openReadOnly(file, content)
+        await this.editor.openReadOnly(file, content)
       } else {
-        this.editor.open(file, content)
+        await this.editor.open(file, content)
       }
       // TODO: Only keep `this.emit` (issue#2210)
       this.emit('currentFileChanged', file)