diff --git a/apps/remix-ide/src/app/editor/editor.js b/apps/remix-ide/src/app/editor/editor.js index e8597e0721..e0df3b7d0b 100644 --- a/apps/remix-ide/src/app/editor/editor.js +++ b/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 } diff --git a/apps/remix-ide/src/app/files/fileManager.ts b/apps/remix-ide/src/app/files/fileManager.ts index f2da619a05..8070762119 100644 --- a/apps/remix-ide/src/app/files/fileManager.ts +++ b/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)