feat(editor): Implement dynamic type loading for TS/JS autocompletion (#6425)

* feat(editor): Implement dynamic type loading for TS/JS autocompletion

* ethers autocompletion

* wip: dynamic loading from cdn

* bug fix

* temp: enable dynamic import and autocompletion for ethers and viem libraries

* temp: version 0.1 - viem/chains underline

* temp: viem, ethers, lodash, axios

* wip: add comments for reviewer

* update explaination

* fix(script-runner): robustly transform imports for runtime execution

* feat(editor): Implement dynamic type loading and intelligent script transformation

* fix(script-runner): Correctly transform imports for runtime execution

* fix(script-runner): Separate static and dynamic imports in transformation

* Add toast notifications for JS/TS type loading

* feat: fix type loading bug

* lint

* fix hardhat import

* lint

* remove notification

* rollback handleTypeScriptDependenciesOf

* fixed bug and set e2e test

* disabled test

* rollback handleTypeScriptDependenciesOf

* lint

* added guard for onchange func

---------

Co-authored-by: ci-bot <ci-bot@remix-project.org>

Author: hsy822

.circleci/config.yml

@@ -14,7 +14,7 @@ parameters:
     default: ""
   run_file_tests_keyword:
     type: enum
-    enum: ["", "ai_panel", "ballot", "ballot_0_4_14", "blockchain", "bottom-bar", "circom", "code_format", "compile_run_widget", "compiler_api", "contract_flattener", "contract_verification", "debugger", "defaultLayout", "deploy_vefiry", "dgit_github", "dgit_local", "editor", "editorHoverContext", "editorReferences", "editor_error_marker", "editor_line_text", "eip1153", "eip7702", "environment-account", "erc721", "etherscan_api", "expandAllFolders", "fileExplorer", "fileManager_api", "file_decorator", "file_explorer_context_menu", "file_explorer_dragdrop", "file_explorer_multiselect", "generalSettings", "gist", "homeTab", "importFromGithub", "layout", "learneth", "libraryDeployment", "matomo-bot-detection", "matomo-consent", "mcp_all_resources", "mcp_all_tools", "mcp_server_complete", "mcp_server_connection", "mcp_server_lifecycle", "mcp_workflow_integration", "metamask", "migrateFileSystem", "noir", "pinned_contracts", "pluginManager", "plugin_api", "providers", "proxy_oz_v4", "proxy_oz_v5", "proxy_oz_v5_non_shanghai_runtime", "publishContract", "quickDapp_metamask", "recorder", "remixd", "runAndDeploy", "script-runner", "search", "signingMessage", "sol2uml", "solidityImport", "solidityUnittests", "specialFunctions", "staticAnalysis", "stressEditor", "template_exp_modal", "terminal", "toggle_panels", "transactionExecution", "txListener", "uniswap_v4_core", "url", "usingWebWorker", "verticalIconsPanel", "vm_state", "vyper_api", "walkthrough", "workspace", "workspace_git"]
+    enum: ["", "ai_panel", "ballot", "ballot_0_4_14", "blockchain", "bottom-bar", "circom", "code_format", "compile_run_widget", "compiler_api", "contract_flattener", "contract_verification", "debugger", "defaultLayout", "deploy_vefiry", "dgit_github", "dgit_local", "editor", "editorHoverContext", "editorReferences", "editor_autocomplete", "editor_error_marker", "editor_line_text", "eip1153", "eip7702", "environment-account", "erc721", "etherscan_api", "expandAllFolders", "fileExplorer", "fileManager_api", "file_decorator", "file_explorer_context_menu", "file_explorer_dragdrop", "file_explorer_multiselect", "generalSettings", "gist", "homeTab", "importFromGithub", "layout", "learneth", "libraryDeployment", "matomo-bot-detection", "matomo-consent", "mcp_all_resources", "mcp_all_tools", "mcp_server_complete", "mcp_server_connection", "mcp_server_lifecycle", "mcp_workflow_integration", "metamask", "migrateFileSystem", "noir", "pinned_contracts", "pluginManager", "plugin_api", "providers", "proxy_oz_v4", "proxy_oz_v5", "proxy_oz_v5_non_shanghai_runtime", "publishContract", "quickDapp_metamask", "recorder", "remixd", "runAndDeploy", "script-runner", "search", "signingMessage", "sol2uml", "solidityImport", "solidityUnittests", "specialFunctions", "staticAnalysis", "stressEditor", "template_exp_modal", "terminal", "toggle_panels", "transactionExecution", "txListener", "uniswap_v4_core", "url", "usingWebWorker", "verticalIconsPanel", "vm_state", "vyper_api", "walkthrough", "workspace", "workspace_git"]
     default: ""
   run_flaky_tests:
     type: boolean

apps/remix-ide-e2e/src/tests/editor_autocomplete.test.ts

@@ -0,0 +1,94 @@
+'use strict'
+
+import { NightwatchBrowser } from 'nightwatch'
+import init from '../helpers/init'
+
+module.exports = {
+  '@disabled': true,
+  before: function (browser: NightwatchBrowser, done: VoidFunction) {
+    init(browser, done, 'http://127.0.0.1:8080', true)
+  },
+
+  'Should load external types (axios) and show autocomplete #group1': function (browser: NightwatchBrowser) {
+    browser
+      .clickLaunchIcon('filePanel')
+      .addFile('scripts/test_axios.ts', { content: testAxiosScript })
+      .openFile('scripts/test_axios.ts')
+      .waitForElementVisible('#editorView', 20000)
+      .pause(15000) 
+      .execute(function () {
+        const win = window as any
+        if (!win.monaco || !win.monaco.editor) return false
+
+        const editors = win.monaco.editor.getEditors()
+        const activeEditor = editors.find((e: any) => {
+          const model = e.getModel()
+          return model && model.uri.toString().includes('test_axios.ts')
+        })
+
+        if (activeEditor) {
+          activeEditor.focus()
+          const model = activeEditor.getModel()
+          const lastLine = model.getLineCount()
+          const lastCol = model.getLineMaxColumn(lastLine)
+          activeEditor.setPosition({ lineNumber: lastLine, column: lastCol })
+          activeEditor.trigger('keyboard', 'type', { text: "\naxios" })
+          activeEditor.trigger('keyboard', 'type', { text: "." })
+          activeEditor.trigger('keyboard', 'editor.action.triggerSuggest', {})
+          return true
+        }
+        return false
+      })
+      .pause(2000)
+      .waitForElementVisible('.suggest-widget', 15000)
+      .waitForElementVisible('.monaco-list-row', 5000)
+      .waitForElementContainsText('.suggest-widget', 'get', 5000)
+      .waitForElementContainsText('.suggest-widget', 'create', 5000)
+  },
+
+  'Should provide autocomplete for local imports #group1': function (browser: NightwatchBrowser) {
+    browser
+      .addFile('scripts/localLib.ts', { content: localLibScript })
+      .addFile('scripts/localConsumer.ts', { content: localConsumerScript })
+      .openFile('scripts/localConsumer.ts')
+      .waitForElementVisible('#editorView', 20000)
+      .pause(2000)
+      .execute(function () {
+        const win = window as any
+        if (!win.monaco) return false
+        const editors = win.monaco.editor.getEditors()
+        const activeEditor = editors.find((e: any) => {
+          const model = e.getModel()
+          return model && model.uri.toString().includes('localConsumer.ts')
+        })
+
+        if (activeEditor) {
+          activeEditor.focus()
+          const model = activeEditor.getModel()
+          const lastLine = model.getLineCount()
+          const lastCol = model.getLineMaxColumn(lastLine)
+          activeEditor.setPosition({ lineNumber: lastLine, column: lastCol })
+          activeEditor.trigger('keyboard', 'type', { text: "\nHelper" })
+          activeEditor.trigger('keyboard', 'type', { text: "." })
+          activeEditor.trigger('keyboard', 'editor.action.triggerSuggest', {})
+          return true
+        }
+        return false
+      })
+      .pause(2000)
+      .waitForElementVisible('.suggest-widget', 15000)
+      .waitForElementVisible('.monaco-list-row', 5000)
+      .waitForElementContainsText('.suggest-widget', 'myLocalFunction', 5000)
+  }
+}
+
+const testAxiosScript = `
+import axios from 'axios';
+// Test Start`
+
+const localLibScript = `
+export const myLocalFunction = () => { return "Local"; }`
+
+const localConsumerScript = `
+import * as Helper from './localLib';
+// Test Start`