wip: add comments for reviewer

Author: ci-bot

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

@@ -283,6 +283,7 @@ export default class Editor extends Plugin {
     console.log(`[DIAGNOSE-LIBS] Files added. Total extra libs now: ${Object.keys(tsDefaults.getExtraLibs()).length}.`)
   }
 
+  // Called on every editor content change to parse import statements and trigger type loading.
   async _onChange (file) {
     this.triggerEvent('didChangeFile', [file])
 
@@ -312,15 +313,20 @@ export default class Editor extends Plugin {
 
           console.log('[DIAGNOSE] New base packages for analysis:', newBasePackages)
 
+          // Temporarily disable type checking during type loading to prevent error flickering.
           this.beginTypesBatch()
 
+          // [Phase 1: Fast Feedback]
+          // Add temporary type definitions (shims) first to immediately remove red underlines on import statements.
           uniqueImports.forEach(pkgImport => {
             this.addShimForPackage(pkgImport)
           })
 
           this.updateTsCompilerOptions()
           console.log('[DIAGNOSE] Shims added. Red lines should disappear.')
 
+          // [Phase 2: Deep Analysis]
+          // In the background, fetch the actual type files to enable autocompletion.
           await Promise.all(newBasePackages.map(async (basePackage) => {
             this.processedPackages.add(basePackage)
 
@@ -329,8 +335,10 @@ export default class Editor extends Plugin {
               const result = await startTypeLoadingProcess(basePackage)
               if (result && result.libs && result.libs.length > 0) {
                 console.log(`[DIAGNOSE-DEEP-PASS] "${basePackage}" deep pass complete. Adding ${result.libs.length} files.`)
+                 // Add all fetched type files to Monaco.
                 this.addExtraLibs(result.libs)
 
+                // Update path mappings so TypeScript can find the types.
                 if (result.subpathMap) {
                   for (const [subpath, virtualPath] of Object.entries(result.subpathMap)) {
                     this.tsModuleMappings[subpath] = [virtualPath]
@@ -341,19 +349,23 @@ export default class Editor extends Plugin {
                 }
                 this.tsModuleMappings[`${basePackage}/*`] = [`${basePackage}/*`]
 
+                // Remove the temporary shims now that the real types are loaded.
                 uniqueImports
                   .filter(p => getBasePackage(p) === basePackage)
                   .forEach(p => this.removeShimsForPackage(p))
 
               } else {
+                // Shim will remain if no types are found.
                 console.warn(`[DIAGNOSE-DEEP-PASS] No types found for "${basePackage}". Shim will remain.`)
               }
             } catch (e) {
+              // Crawler can fail, but we don't want to crash the whole process.
               console.error(`[DIAGNOSE-DEEP-PASS] Crawler failed for "${basePackage}":`, e)
             }
           }))
 
           console.log('[DIAGNOSE] All processes finished.')
+           // After all type loading is complete, re-enable type checking and apply the final state.
           this.endTypesBatch()
 
         } catch (error) {

apps/remix-ide/src/app/editor/type-fetcher.ts

@@ -25,6 +25,7 @@ function normalizeBareSpecifier(p: string): string {
   return p.split('/')[0]
 }
 
+// Function to generate @types package names, includes logic to prevent infinite recursion.
 function toTypesScopedName(pkg: string): string {
   if (pkg.startsWith('@types/')) return pkg
   if (pkg.startsWith('@')) return '@types/' + pkg.slice(1).replace('/', '__')
@@ -45,11 +46,13 @@ async function fetchJson<T = any>(url: string): Promise<T> {
   return res.json()
 }
 
+// Guesses potential type definition file (.d.ts) paths from a JS file path.
 function guessDtsFromJs(jsPath: string): string[] {
   const base = stripJsLike(jsPath)
   return [`${base}.d.ts`, `${base}.ts`, `${base}/index.d.ts`, `${base}/index.ts`]
 }
 
+// Analyzes the 'exports' field of package.json to create a map of subpaths to their type file URLs.
 function buildExportTypeMap(pkgName: string, pkgJson: PackageJson): Record<string, string[]> {
   const map: Record<string, string[]> = {}
   const base = `${CDN_BASE}${pkgName}/`
@@ -68,6 +71,7 @@ function buildExportTypeMap(pkgName: string, pkgJson: PackageJson): Record<strin
       }
     }
   }
+  // Fallback to 'types'/'typings' field if 'exports' is missing or has no main '.' path defined.
   if (!map['.'] && (pkgJson.types || pkgJson.typings)) {
     push('.', pkgJson.types || pkgJson.typings)
   }
@@ -83,6 +87,7 @@ async function tryFetchOne(urls: string[]): Promise<ResolveResult | null> {
   return null
 }
 
+// A crawler that recursively follows imports/exports within a type definition file (.d.ts).
 async function crawl(entryUrl: string, pkgName: string, visited: Set<string>, enqueuePackage: (name: string) => void): Promise<Library[]> {
   if (visited.has(entryUrl)) return []
   visited.add(entryUrl)
@@ -97,13 +102,16 @@ async function crawl(entryUrl: string, pkgName: string, visited: Set<string>, en
     const crawlNext = (nextUrl: string) => {
       if (!visited.has(nextUrl)) subPromises.push(crawl(nextUrl, pkgName, visited, enqueuePackage))
     }
+    // Handles triple-slash directives like '/// <reference ... />'.
     for (const m of content.matchAll(TRIPLE_SLASH_REF_RE)) crawlNext(new URL(m[1], finalUrl).href)
     for (const m of content.matchAll(IMPORT_ANY_RE)) {
       const spec = (m[1] || m[2] || m[3] || '').trim()
       if (!spec) continue
+      // Continues crawling for relative path imports, and queues up external package imports.
       if (isRelative(spec)) crawlNext(new URL(spec, finalUrl).href)
       else {
         const bare = normalizeBareSpecifier(spec)
+        // Ignores Node.js built-in modules that use the 'node:' protocol.
         if (bare && !bare.startsWith('node:')) enqueuePackage(bare)
       }
     }
@@ -113,11 +121,13 @@ async function crawl(entryUrl: string, pkgName: string, visited: Set<string>, en
   return out
 }
 
+// Main function for the type loading process. Fetches type files for a package and all its dependencies.
 export async function startTypeLoadingProcess(packageName: string): Promise<{ mainVirtualPath: string; libs: Library[]; subpathMap: Record<string, string> } | void> {
   const visitedPackages = new Set<string>()
   const collected: Library[] = []
   const subpathMap: Record<string, string> = {}
 
+  // An inner function that recursively loads packages.
   async function loadPackage(pkgNameToLoad: string) {
     if (visitedPackages.has(pkgNameToLoad)) return
     visitedPackages.add(pkgNameToLoad)
@@ -128,12 +138,14 @@ export async function startTypeLoadingProcess(packageName: string): Promise<{ ma
       pkgJson = await fetchJson<PackageJson>(pkgJsonUrl)
     } catch (e) {
       console.log(`- Package '${pkgNameToLoad}' not found. Attempting @types fallback.`)
+      // If the package is not found, attempt to find its @types equivalent.
       try { await loadPackage(toTypesScopedName(pkgNameToLoad)) } catch (ee) {}
       return
     }
 
     const exportMap = buildExportTypeMap(pkgNameToLoad, pkgJson)
 
+    // If the package is found but contains no type information, attempt the @types fallback.
     if (Object.keys(exportMap).length === 0) {
       console.log(`- No type declarations in '${pkgNameToLoad}'. Attempting @types fallback.`)
       try { await loadPackage(toTypesScopedName(pkgNameToLoad)) } catch (ee) {}
@@ -145,6 +157,7 @@ export async function startTypeLoadingProcess(packageName: string): Promise<{ ma
     const enqueuePackage = (p: string) => { if (!visitedPackages.has(p)) pendingDependencies.add(p) }
 
     const crawlPromises: Promise<Library[]>[] = []
+    // Crawl all entry points of the package to gather complete type information.
     for (const [subpath, urls] of Object.entries(exportMap)) {
       const entryPointUrl = urls[0]
       if (entryPointUrl) {
@@ -157,6 +170,7 @@ export async function startTypeLoadingProcess(packageName: string): Promise<{ ma
     const libsArrays = await Promise.all(crawlPromises)
     libsArrays.forEach(libs => collected.push(...libs))
 
+    // Recursively load any discovered dependency packages.
     if (pendingDependencies.size > 0) {
       console.log(`- Found dependencies for '${pkgNameToLoad}': ${Array.from(pendingDependencies).join(', ')}`)
       await Promise.all(Array.from(pendingDependencies).map(loadPackage))

apps/remix-ide/src/app/plugins/script-runner-bridge.tsx

@@ -28,34 +28,23 @@ const configFileName = 'remix.config.json'
 let baseUrl = 'https://remix-project-org.github.io/script-runner-generator'
 const customBuildUrl = 'http://localhost:4000/build' // this will be used when the server is ready
 
-/**
- * Transforms standard import statements into dynamic import statements for runtime execution.
- * @param {string} scriptContent The original script content.
- * @returns {string} The transformed script content.
- */
 function transformScriptForRuntime(scriptContent: string): string {
-  // 1. dynamicImport 헬퍼 함수를 스크립트 맨 위에 주입
-  const dynamicImportHelper = `const dynamicImport = (p) => new Function(\`return import('https://cdn.jsdelivr.net/npm/\${p}/+esm')\`)();\n`;
+  const dynamicImportHelper = `const dynamicImport = (p) => new Function(\`return import('https://cdn.jsdelivr.net/npm/\${p}/+esm')\`)();\n`
 
-  // 2. 다양한 import 구문을 변환
-  // 'import { ... } from "package"' 구문
   let transformed = scriptContent.replace(
     /import\s+({[\s\S]*?})\s+from\s+['"]([^'"]+)['"]/g,
     'const $1 = await dynamicImport("$2");'
-  );
-  // 'import Default from "package"' 구문
+  )
   transformed = transformed.replace(
     /import\s+([\w\d_$]+)\s+from\s+['"]([^'"]+)['"]/g,
     'const $1 = (await dynamicImport("$2")).default;'
-  );
-  // 'import * as name from "package"' 구문
+  )
   transformed = transformed.replace(
     /import\s+\*\s+as\s+([\w\d_$]+)\s+from\s+['"]([^'"]+)['"]/g,
     'const $1 = await dynamicImport("$2");'
-  );
+  )
 
-  // 3. 모든 코드를 async IIFE로 감싸서 top-level await 문제 해결
-  return `${dynamicImportHelper}\n(async () => {\n  try {\n${transformed}\n  } catch (e) { console.error('Error executing script:', e); }\n})();`;
+  return `${dynamicImportHelper}\n(async () => {\n  try {\n${transformed}\n  } catch (e) { console.error('Error executing script:', e); }\n})();`
 }
 
 export class ScriptRunnerBridgePlugin extends Plugin {
@@ -227,12 +216,12 @@ export class ScriptRunnerBridgePlugin extends Plugin {
     }
     try {
       this.setIsLoading(this.activeConfig.name, true)
-      const transformedScript = transformScriptForRuntime(script);
+      const transformedScript = transformScriptForRuntime(script)
 
-      console.log('--- [ScriptRunner] Original Script ---');
-      console.log(script);
-      console.log('--- [ScriptRunner] Transformed Script for Runtime ---');
-      console.log(transformedScript);
+      console.log('--- [ScriptRunner] Original Script ---')
+      console.log(script)
+      console.log('--- [ScriptRunner] Transformed Script for Runtime ---')
+      console.log(transformedScript)
 
       await this.call(`${this.scriptRunnerProfileName}${this.activeConfig.name}`, 'execute',transformedScript, filePath)
 

package.json

@@ -127,9 +127,7 @@
     "@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",

yarn.lock

@@ -7248,13 +7248,6 @@
   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"
@@ -8725,11 +8718,6 @@ 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"