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

ci-bot · ci-bot · commit 0a4592c1a2b2 · 2025-10-02T14:49:19.000+09:00
diff --git a/apps/remix-ide/src/app/editor/editor.js b/apps/remix-ide/src/app/editor/editor.js
@@ -6,6 +6,8 @@ import { Plugin } from '@remixproject/engine'
 import * as packageJson from '../../../../../package.json'
 import { PluginViewWrapper } from '@remix-ui/helper'
 
+import { fetchAndLoadTypes } from './type-fetcher'
+
 const EventManager = require('../../lib/events')
 
 const profile = {
@@ -71,12 +73,19 @@ export default class Editor extends Plugin {
     this.api = {}
     this.dispatch = null
     this.ref = null
+
+    this.monaco = null
+    this.typeLoaderDebounce = null
   }
 
   setDispatch (dispatch) {
     this.dispatch = dispatch
   }
 
+  setMonaco (monaco) {
+    this.monaco = monaco
+  }
+
   updateComponent(state) {
     return <EditorUI
       editorAPI={state.api}
@@ -86,6 +95,7 @@ export default class Editor extends Plugin {
       events={state.events}
       plugin={state.plugin}
       isDiff={state.isDiff}
+      setMonaco={(monaco) => this.setMonaco(monaco)}
     />
   }
 
@@ -128,6 +138,17 @@ export default class Editor extends Plugin {
 
   async onActivation () {
     this.activated = true
+    this.on('editor', 'editorMounted', () => {
+      if (!this.monaco) return
+      const tsDefaults = this.monaco.languages.typescript.typescriptDefaults
+      
+      tsDefaults.setCompilerOptions({
+        moduleResolution: this.monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+        typeRoots: ["file:///node_modules/@types", "file:///node_modules"],
+        target: this.monaco.languages.typescript.ScriptTarget.ES2020,
+        allowNonTsExtensions: true,
+      })
+    })
     this.on('sidePanel', 'focusChanged', (name) => {
       this.keepDecorationsFor(name, 'sourceAnnotationsPerFile')
       this.keepDecorationsFor(name, 'markerPerFile')
@@ -158,6 +179,30 @@ export default class Editor extends Plugin {
 
   async _onChange (file) {
     this.triggerEvent('didChangeFile', [file])
+    
+    if (this.monaco && (file.endsWith('.ts') || file.endsWith('.js'))) {
+      clearTimeout(this.typeLoaderDebounce)
+      this.typeLoaderDebounce = setTimeout(async () => {
+        if (!this.monaco) return
+        const model = this.monaco.editor.getModel(this.monaco.Uri.parse(file))
+        if (!model) return
+        const code = model.getValue()
+        
+        try {
+          const npmImports = [...code.matchAll(/from\s+['"]((?![./]).+)['"]/g)].map(match => match[1])
+          const uniquePackages = [...new Set(npmImports)]
+          
+          if (uniquePackages.length > 0) {
+            await Promise.all(uniquePackages.map(pkg => fetchAndLoadTypes(pkg, this.monaco)))
+            const tsDefaults = this.monaco.languages.typescript.typescriptDefaults
+            tsDefaults.setCompilerOptions(tsDefaults.getCompilerOptions())
+          }
+        } catch (error) {
+          console.error('[Type Loader] Error during type loading process:', error)
+        }
+      }, 1500)
+    }
+
     const currentFile = await this.call('fileManager', 'file')
     if (!currentFile) {
       return
@@ -232,7 +277,7 @@ export default class Editor extends Plugin {
               this.emit('addModel', contentDep, 'typescript', pathDep, this.readOnlySessions[path])
             }
           } else {
-            console.log("The file ", pathDep, " can't be found.")
+            // console.log("The file ", pathDep, " can't be found.")
           }
         } catch (e) {
           console.log(e)
diff --git a/apps/remix-ide/src/app/editor/type-fetcher.ts b/apps/remix-ide/src/app/editor/type-fetcher.ts
@@ -0,0 +1,81 @@
+import { Monaco } from '@monaco-editor/react'
+
+const loadedFiles = new Set<string>()
+
+function resolvePath(baseFilePath: string, relativePath: string): string {
+  const newUrl = new URL(relativePath, baseFilePath)
+  return newUrl.href
+}
+
+export async function fetchAndLoadTypes(packageName: string, monaco: Monaco) {
+  const initialPackageJsonPath = `file:///node_modules/${packageName}/package.json`
+  if (loadedFiles.has(initialPackageJsonPath)) return
+
+  try {
+    const response = await fetch(`https://cdn.jsdelivr.net/npm/${packageName}/package.json`)
+    if (!response.ok) {
+      if (!packageName.startsWith('@types/')) {
+        console.warn(`[Type Fetcher] Failed to get package.json for "${packageName}". Trying @types...`)
+        return fetchAndLoadTypes(`@types/${packageName}`, monaco)
+      }
+      console.error(`[Type Fetcher] Failed to get package.json for "${packageName}".`)
+      return
+    }
+
+    const packageJson = await response.json()
+    const filesToProcess: string[] = []
+
+    addFileToMonaco(initialPackageJsonPath, JSON.stringify(packageJson), monaco)
+
+    const mainTypeFile = packageJson.types || packageJson.typings || 'index.d.ts'
+    const mainTypeFilePath = resolvePath(initialPackageJsonPath, mainTypeFile)
+    filesToProcess.push(mainTypeFilePath)
+
+    if (packageJson.dependencies) {
+      for (const depName of Object.keys(packageJson.dependencies)) {
+        fetchAndLoadTypes(depName, monaco)
+      }
+    }
+
+    while (filesToProcess.length > 0) {
+      const currentFilePath = filesToProcess.shift()
+      if (!currentFilePath || loadedFiles.has(currentFilePath)) continue
+
+      try {
+        const cdnUrl = currentFilePath.replace('file:///node_modules/', 'https://cdn.jsdelivr.net/npm/')
+        const fileResponse = await fetch(cdnUrl)
+
+        if (fileResponse.ok) {
+          const content = await fileResponse.text()
+          addFileToMonaco(currentFilePath, content, monaco)
+
+          const relativeImports = [...content.matchAll(/(from\s+['"](\.\.?\/.*?)['"])|(import\s+['"](\.\.?\/.*?)['"])/g)]
+          for (const match of relativeImports) {
+            const relativePath = match[2] || match[4]
+            if (relativePath) {
+              const newPath = resolvePath(currentFilePath, relativePath)
+              const finalPath = newPath.endsWith('.d.ts') ? newPath : `${newPath}.d.ts`
+              if (!loadedFiles.has(finalPath)) {
+                filesToProcess.push(finalPath)
+              }
+            }
+          }
+        } else {
+          console.warn(`[Type Fetcher] 404 - Could not fetch ${cdnUrl}`)
+        }
+      } catch (e) {
+        console.error(`[Type Fetcher] Error fetching or processing ${currentFilePath}`, e)
+        loadedFiles.add(currentFilePath)
+      }
+    }
+  } catch (error) {
+    console.error(`[Type Fetcher] Critical error processing ${packageName}:`, error)
+  }
+}
+
+function addFileToMonaco(filePath: string, content: string, monaco: Monaco) {
+  if (loadedFiles.has(filePath)) return
+
+  monaco.languages.typescript.typescriptDefaults.addExtraLib(content, filePath)
+  loadedFiles.add(filePath)
+}
diff --git a/apps/remix-ide/src/app/editor/type-parser.ts b/apps/remix-ide/src/app/editor/type-parser.ts
@@ -0,0 +1,21 @@
+import * as acorn from 'acorn'
+
+export function parseImports(code: string): string[] {
+  const packages: string[] = []
+
+  try {
+    const ast = acorn.parse(code, { sourceType: 'module', ecmaVersion: 'latest' })
+
+    for (const node of ast.body) {
+      if (node.type === 'ImportDeclaration') {
+        if (node.source && typeof node.source.value === 'string') {
+          packages.push(node.source.value)
+        }
+      }
+    }
+  } catch (error) {
+    console.error('[Type Parser] Code parsing error:', error.message)
+  }
+
+  return [...new Set(packages)]
+}
diff --git a/libs/remix-ui/editor/src/lib/providers/tsCompletionProvider.ts b/libs/remix-ui/editor/src/lib/providers/tsCompletionProvider.ts
@@ -0,0 +1,85 @@
+import { monacoTypes } from '@remix-ui/editor'
+
+interface TsCompletionInfo {
+  entries: {
+    name: string
+    kind: string
+  }[]
+}
+
+export class RemixTSCompletionProvider implements monacoTypes.languages.CompletionItemProvider {
+  monaco: any
+
+  constructor(monaco: any) {
+    this.monaco = monaco
+  }
+
+  triggerCharacters = ['.', '"', "'", '/', '@']
+
+  async provideCompletionItems(model: monacoTypes.editor.ITextModel, position: monacoTypes.Position, context: monacoTypes.languages.CompletionContext): Promise<monacoTypes.languages.CompletionList | undefined> {
+    const word = model.getWordUntilPosition(position)
+    const range = {
+      startLineNumber: position.lineNumber,
+      endLineNumber: position.lineNumber,
+      startColumn: word.startColumn,
+      endColumn: word.endColumn
+    }
+
+    try {
+      const worker = await this.monaco.languages.typescript.getTypeScriptWorker()
+      const client = await worker(model.uri)
+      const completions: TsCompletionInfo = await client.getCompletionsAtPosition(
+        model.uri.toString(),
+        model.getOffsetAt(position)
+      )
+
+      if (!completions || !completions.entries) {
+        return { suggestions: []}
+      }
+
+      const suggestions = completions.entries.map(entry => {
+        return {
+          label: entry.name,
+          kind: this.mapTsCompletionKindToMonaco(entry.kind),
+          insertText: entry.name,
+          range: range
+        }
+      })
+
+      return { suggestions }
+    } catch (error) {
+      console.error('[TSCompletionProvider] Error fetching completions:', error)
+      return { suggestions: []}
+    }
+  }
+
+  private mapTsCompletionKindToMonaco(kind: string): monacoTypes.languages.CompletionItemKind {
+    const { CompletionItemKind } = this.monaco.languages
+    switch (kind) {
+    case 'method':
+    case 'memberFunction':
+      return CompletionItemKind.Method
+    case 'function':
+      return CompletionItemKind.Function
+    case 'property':
+    case 'memberVariable':
+      return CompletionItemKind.Property
+    case 'class':
+      return CompletionItemKind.Class
+    case 'interface':
+      return CompletionItemKind.Interface
+    case 'keyword':
+      return CompletionItemKind.Keyword
+    case 'variable':
+      return CompletionItemKind.Variable
+    case 'constructor':
+      return CompletionItemKind.Constructor
+    case 'enum':
+      return CompletionItemKind.Enum
+    case 'module':
+      return CompletionItemKind.Module
+    default:
+      return CompletionItemKind.Text
+    }
+  }
+}
diff --git a/libs/remix-ui/editor/src/lib/remix-ui-editor.tsx b/libs/remix-ui/editor/src/lib/remix-ui-editor.tsx
@@ -28,6 +28,7 @@ import { noirLanguageConfig, noirTokensProvider } from './syntaxes/noir'
 import { IPosition, IRange } from 'monaco-editor'
 import { GenerationParams } from '@remix/remix-ai-core';
 import { RemixInLineCompletionProvider } from './providers/inlineCompletionProvider'
+import { RemixTSCompletionProvider } from './providers/tsCompletionProvider'
 const _paq = (window._paq = window._paq || [])
 
 // Key for localStorage
@@ -154,6 +155,7 @@ export interface EditorUIProps {
   }
   plugin: PluginType
   editorAPI: EditorAPIType
+  setMonaco: (monaco: Monaco) => void
 }
 const contextMenuEvent = new EventManager()
 export const EditorUI = (props: EditorUIProps) => {
@@ -1152,6 +1154,7 @@ export const EditorUI = (props: EditorUIProps) => {
 
   function handleEditorWillMount(monaco) {
     monacoRef.current = monaco
+    props.setMonaco(monaco)
     // Register a new language
     monacoRef.current.languages.register({ id: 'remix-solidity' })
     monacoRef.current.languages.register({ id: 'remix-cairo' })
@@ -1164,9 +1167,11 @@ export const EditorUI = (props: EditorUIProps) => {
     // Allow JSON schema requests
     monacoRef.current.languages.json.jsonDefaults.setDiagnosticsOptions({ enableSchemaRequest: true })
 
+    monacoRef.current.languages.registerCompletionItemProvider('typescript', new RemixTSCompletionProvider(monaco))
+    monacoRef.current.languages.registerCompletionItemProvider('javascript', new RemixTSCompletionProvider(monaco))
+
     // hide the module resolution error. We have to remove this when we know how to properly resolve imports.
     monacoRef.current.languages.typescript.typescriptDefaults.setDiagnosticsOptions({ diagnosticCodesToIgnore: [2792]})
-
     // Register a tokens provider for the language
     monacoRef.current.languages.setMonarchTokensProvider('remix-solidity', solidityTokensProvider as any)
     monacoRef.current.languages.setLanguageConfiguration('remix-solidity', solidityLanguageConfig as any)
diff --git a/package.json b/package.json
@@ -127,7 +127,9 @@
     "@reown/appkit": "^1.7.4",
     "@reown/appkit-adapter-ethers": "^1.7.4",
     "@ricarso/react-image-magnifiers": "^1.9.0",
+    "@types/acorn": "^6.0.4",
     "@types/nightwatch": "^2.3.1",
+    "acorn": "^8.15.0",
     "ansi-gray": "^0.1.1",
     "assert": "^2.1.0",
     "async": "^2.6.2",
diff --git a/yarn.lock b/yarn.lock
@@ -7248,6 +7248,13 @@
   resolved "https://registry.yarnpkg.com/@tsconfig/node16/-/node16-1.0.3.tgz#472eaab5f15c1ffdd7f8628bd4c4f753995ec79e"
   integrity sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==
 
+"@types/acorn@^6.0.4":
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/@types/acorn/-/acorn-6.0.4.tgz#b1a652a373d0cace52dace608fced14f58e9c4a9"
+  integrity sha512-DafqcBAjbOOmgqIx3EF9EAdBKAKgspv00aQVIW3fVQ0TXo5ZPBeSRey1SboVAUzjw8Ucm7cd1gtTSlosYoEQLA==
+  dependencies:
+    acorn "*"
+
 "@types/aria-query@^4.2.0":
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.2.tgz#ed4e0ad92306a704f9fb132a0cfcf77486dbe2bc"
@@ -8718,6 +8725,11 @@ acorn-walk@^8.0.0, acorn-walk@^8.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
   integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
 
+acorn@*, acorn@^8.15.0:
+  version "8.15.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.15.0.tgz#a360898bc415edaac46c8241f6383975b930b816"
+  integrity sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==
+
 "acorn@>= 2.5.2 <= 5.7.5":
   version "5.7.4"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
