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

[hsy822]

Description

This PR introduces the initial implementation of a dynamic type acquisition system to improve the autocompletion experience for TypeScript and JavaScript files.

Currently, the editor relies on static, bundled type definitions (web-types.ts), which are often outdated and limited to a few pre-defined libraries like ethers and web3.

With this change, when a user imports an NPM package (e.g., import { ethers } from 'ethers'), the system automatically fetches the corresponding type definitions (.d.ts) from a CDN (unpkg) and injects them into the editor. This provides an up-to-date, VS Code-like autocompletion experience for a wide range of libraries.

Implementation Details

• Editor Plugin (editor.js):

  • The _onChange method now debounces user input and triggers the type loading process for .ts and .js files.
  • Configures Monaco's TS compiler options (moduleResolution, typeRoots) on activation to enable Node.js-style module resolution.
  • After types are loaded, it triggers a re-validation to activate autocompletion.

• type-fetcher.ts Service:

  • A new service that recursively resolves and downloads all necessary .d.ts files for a given package.
  • It handles both NPM dependencies (by reading package.json) and internal relative file imports within packages.

• tsCompletionProvider.ts:

  • A new, dedicated completion provider for TypeScript/JavaScript.
  • It directly leverages Monaco's built-in TypeScript worker (getCompletionsAtPosition) to provide accurate suggestions, separating its logic from the existing Solidity provider.

Current Status & Next Steps

This is an initial version to establish the core architecture and prove the concept. The following tasks remain:

• Further testing across a wider range of libraries.
• Improved error handling for network failures or packages without types.
• Implementation of UI feedback for the type loading process (e.g., status indicators).
• Code cleanup and final refactoring based on team feedback.

Viem Import Test Code

You can test it using the following code.
Autocomplete is not yet complete.

import { http, createPublicClient } from 'viem'; 
import { mainnet } from 'viem/chains';    

console.log('--- Testing viem import ---');

console.log('http function is loaded:', typeof http === 'function');
console.log('createPublicClient function is loaded:', typeof createPublicClient === 'function');
console.log('mainnet chain object is loaded:', !!mainnet);

const client = createPublicClient({
  chain: mainnet,
  transport: http(),
});

console.log('Viem client created:', client);
console.log('SUCCESS: viem module loaded and executed correctly!');

Related Issues

Fixes #6410

[netlify]

✅ Deploy Preview for reliable-cocada-166884 ready!

Name	Link
🔨 Latest commit	adb74ac
🔍 Latest deploy log	https://app.netlify.com/projects/reliable-cocada-166884/deploys/68e4d4772ff49000071e6b75
😎 Deploy Preview	https://deploy-preview-6425--reliable-cocada-166884.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.