wip

Author: devjiwonchoi

packages/next/errors.json

@@ -665,5 +665,6 @@
   "664": "Missing 'next-action' header.",
   "665": "Failed to find Server Action \"%s\". This request might be from an older or newer deployment.\\nRead more: https://nextjs.org/docs/messages/failed-to-find-server-action",
   "666": "Turbopack builds are only available in canary builds of Next.js.",
-  "667": "receiveExpiredTags is deprecated, and not expected to be called."
+  "667": "receiveExpiredTags is deprecated, and not expected to be called.",
+  "668": "[next] Failed to create virtual TypeScript environment."
 }

packages/next/src/server/typescript/index.ts

@@ -32,13 +32,6 @@ export const createTSPlugin: tsModule.server.PluginModuleFactory = ({
   typescript: ts,
 }) => {
   function create(info: tsModule.server.PluginCreateInfo) {
-    // Set up decorator object
-    const proxy = Object.create(null)
-    for (let k of Object.keys(info.languageService)) {
-      const x = (info.languageService as any)[k]
-      proxy[k] = (...args: Array<{}>) => x.apply(info.languageService, args)
-    }
-
     // Get plugin options
     // config is the plugin options from the user's tsconfig.json
     // e.g. { "plugins": [{ "name": "next", "enabled": true }] }
@@ -47,16 +40,16 @@ export const createTSPlugin: tsModule.server.PluginModuleFactory = ({
     const isPluginEnabled = info.config.enabled ?? true
 
     if (!isPluginEnabled) {
-      return proxy
+      return info.languageService
     }
 
-    init({
+    const env = init({
       ts,
       info,
     })
 
     // Auto completion
-    proxy.getCompletionsAtPosition = (
+    env.languageService.getCompletionsAtPosition = (
       fileName: string,
       position: number,
       options: any
@@ -114,7 +107,7 @@ export const createTSPlugin: tsModule.server.PluginModuleFactory = ({
     }
 
     // Show auto completion details
-    proxy.getCompletionEntryDetails = (
+    env.languageService.getCompletionEntryDetails = (
       fileName: string,
       position: number,
       entryName: string,
@@ -152,7 +145,10 @@ export const createTSPlugin: tsModule.server.PluginModuleFactory = ({
     }
 
     // Quick info
-    proxy.getQuickInfoAtPosition = (fileName: string, position: number) => {
+    env.languageService.getQuickInfoAtPosition = (
+      fileName: string,
+      position: number
+    ) => {
       const prior = info.languageService.getQuickInfoAtPosition(
         fileName,
         position
@@ -184,7 +180,7 @@ export const createTSPlugin: tsModule.server.PluginModuleFactory = ({
     }
 
     // Show errors for disallowed imports
-    proxy.getSemanticDiagnostics = (fileName: string) => {
+    env.languageService.getSemanticDiagnostics = (fileName: string) => {
       const prior = info.languageService.getSemanticDiagnostics(fileName)
       const source = getSource(fileName)
       if (!source) return prior
@@ -364,7 +360,10 @@ export const createTSPlugin: tsModule.server.PluginModuleFactory = ({
     }
 
     // Get definition and link for specific node
-    proxy.getDefinitionAndBoundSpan = (fileName: string, position: number) => {
+    env.languageService.getDefinitionAndBoundSpan = (
+      fileName: string,
+      position: number
+    ) => {
       const entryInfo = getEntryInfo(fileName)
       if (isAppEntryFile(fileName) && !entryInfo.client) {
         const metadataDefinition = metadata.getDefinitionAndBoundSpan(
@@ -377,7 +376,7 @@ export const createTSPlugin: tsModule.server.PluginModuleFactory = ({
       return info.languageService.getDefinitionAndBoundSpan(fileName, position)
     }
 
-    return proxy
+    return env.languageService
   }
 
   return { create }

packages/next/src/server/typescript/rules/metadata.ts

@@ -1,10 +1,11 @@
 import { NEXT_TS_ERRORS } from '../constant'
 import {
-  getInfo,
   getSource,
   getTs,
   getTypeChecker,
   isPositionInsideNode,
+  log,
+  virtualTsEnv,
 } from '../utils'
 
 import type tsModule from 'typescript/lib/tsserverlibrary'
@@ -49,101 +50,6 @@ function getMetadataExport(fileName: string, position: number) {
   return metadataExport
 }
 
-let cachedProxiedLanguageService: tsModule.LanguageService | undefined
-let cachedProxiedLanguageServiceHost: tsModule.LanguageServiceHost | undefined
-function getProxiedLanguageService() {
-  if (cachedProxiedLanguageService)
-    return {
-      languageService: cachedProxiedLanguageService as tsModule.LanguageService,
-      languageServiceHost:
-        cachedProxiedLanguageServiceHost as tsModule.LanguageServiceHost & {
-          addFile: (fileName: string, body: string) => void
-        },
-    }
-
-  const languageServiceHost = getInfo().languageServiceHost
-
-  const ts = getTs()
-  class ProxiedLanguageServiceHost implements tsModule.LanguageServiceHost {
-    files: {
-      [fileName: string]: { file: tsModule.IScriptSnapshot; ver: number }
-    } = {}
-
-    log = () => {}
-    trace = () => {}
-    error = () => {}
-    getCompilationSettings = () => languageServiceHost.getCompilationSettings()
-    getScriptIsOpen = () => true
-    getCurrentDirectory = () => languageServiceHost.getCurrentDirectory()
-    getDefaultLibFileName = (o: any) =>
-      languageServiceHost.getDefaultLibFileName(o)
-
-    getScriptVersion = (fileName: string) => {
-      const file = this.files[fileName]
-      if (!file) return languageServiceHost.getScriptVersion(fileName)
-      return file.ver.toString()
-    }
-
-    getScriptSnapshot = (fileName: string) => {
-      const file = this.files[fileName]
-      if (!file) return languageServiceHost.getScriptSnapshot(fileName)
-      return file.file
-    }
-
-    getScriptFileNames(): string[] {
-      const names: Set<string> = new Set()
-      for (var name in this.files) {
-        if (this.files.hasOwnProperty(name)) {
-          names.add(name)
-        }
-      }
-      const files = languageServiceHost.getScriptFileNames()
-      for (const file of files) {
-        names.add(file)
-      }
-      return [...names]
-    }
-
-    addFile(fileName: string, body: string) {
-      const snap = ts.ScriptSnapshot.fromString(body)
-      snap.getChangeRange = (_) => undefined
-      const existing = this.files[fileName]
-      if (existing) {
-        this.files[fileName].ver++
-        this.files[fileName].file = snap
-      } else {
-        this.files[fileName] = { ver: 1, file: snap }
-      }
-    }
-
-    readFile(fileName: string) {
-      const file = this.files[fileName]
-      return file
-        ? file.file.getText(0, file.file.getLength())
-        : languageServiceHost.readFile(fileName)
-    }
-    fileExists(fileName: string) {
-      return (
-        this.files[fileName] !== undefined ||
-        languageServiceHost.fileExists(fileName)
-      )
-    }
-  }
-
-  cachedProxiedLanguageServiceHost = new ProxiedLanguageServiceHost()
-  cachedProxiedLanguageService = ts.createLanguageService(
-    cachedProxiedLanguageServiceHost,
-    ts.createDocumentRegistry()
-  )
-  return {
-    languageService: cachedProxiedLanguageService as tsModule.LanguageService,
-    languageServiceHost:
-      cachedProxiedLanguageServiceHost as tsModule.LanguageServiceHost & {
-        addFile: (fileName: string, body: string) => void
-      },
-  }
-}
-
 function updateVirtualFileWithType(
   fileName: string,
   node: tsModule.VariableDeclaration | tsModule.FunctionDeclaration,
@@ -178,8 +84,14 @@ function updateVirtualFileWithType(
     annotation +
     sourceText.slice(nodeEnd) +
     TYPE_IMPORT
-  const { languageServiceHost } = getProxiedLanguageService()
-  languageServiceHost.addFile(fileName, newSource)
+
+  if (virtualTsEnv.sys.fileExists(fileName)) {
+    log('Updating file: ' + fileName)
+    virtualTsEnv.updateFile(fileName, newSource)
+  } else {
+    log('Creating file: ' + fileName)
+    virtualTsEnv.createFile(fileName, newSource)
+  }
 
   return [nodeEnd, annotation.length]
 }
@@ -196,8 +108,9 @@ function proxyDiagnostics(
   n: tsModule.VariableDeclaration | tsModule.FunctionDeclaration
 ) {
   // Get diagnostics
-  const { languageService } = getProxiedLanguageService()
-  const diagnostics = languageService.getSemanticDiagnostics(fileName)
+  const diagnostics = virtualTsEnv.languageService.getSemanticDiagnostics.bind(
+    virtualTsEnv.languageService
+  )(fileName)
   const source = getSource(fileName)
 
   // Filter and map the results
@@ -239,13 +152,11 @@ const metadata = {
     if (pos === undefined) return prior
 
     // Get completions
-    const { languageService } = getProxiedLanguageService()
     const newPos = position <= pos[0] ? position : position + pos[1]
-    const completions = languageService.getCompletionsAtPosition(
-      fileName,
-      newPos,
-      undefined
-    )
+    const completions =
+      virtualTsEnv.languageService.getCompletionsAtPosition.bind(
+        virtualTsEnv.languageService
+      )(fileName, newPos, undefined)
 
     if (completions) {
       completions.isIncomplete = true
@@ -465,18 +376,11 @@ const metadata = {
     const pos = updateVirtualFileWithType(fileName, node)
     if (pos === undefined) return
 
-    const { languageService } = getProxiedLanguageService()
     const newPos = position <= pos[0] ? position : position + pos[1]
 
-    const details = languageService.getCompletionEntryDetails(
-      fileName,
-      newPos,
-      entryName,
-      formatOptions,
-      source,
-      preferences,
-      data
-    )
+    const details = virtualTsEnv.languageService.getCompletionEntryDetails.bind(
+      virtualTsEnv.languageService
+    )(fileName, newPos, entryName, formatOptions, source, preferences, data)
     return details
   },
 
@@ -489,9 +393,10 @@ const metadata = {
     const pos = updateVirtualFileWithType(fileName, node)
     if (pos === undefined) return
 
-    const { languageService } = getProxiedLanguageService()
     const newPos = position <= pos[0] ? position : position + pos[1]
-    const insight = languageService.getQuickInfoAtPosition(fileName, newPos)
+    const insight = virtualTsEnv.languageService.getQuickInfoAtPosition.bind(
+      virtualTsEnv.languageService
+    )(fileName, newPos)
     return insight
   },
 
@@ -503,11 +408,12 @@ const metadata = {
     // We annotate with the type in a virtual language service
     const pos = updateVirtualFileWithType(fileName, node)
     if (pos === undefined) return
-    const { languageService } = getProxiedLanguageService()
     const newPos = position <= pos[0] ? position : position + pos[1]
 
     const definitionInfoAndBoundSpan =
-      languageService.getDefinitionAndBoundSpan(fileName, newPos)
+      virtualTsEnv.languageService.getDefinitionAndBoundSpan.bind(
+        virtualTsEnv.languageService
+      )(fileName, newPos)
 
     if (definitionInfoAndBoundSpan) {
       // Adjust the start position of the text span

packages/next/src/server/typescript/utils.ts

@@ -10,52 +10,54 @@ import type tsModule from 'typescript/lib/tsserverlibrary'
 type TypeScript = typeof import('typescript/lib/tsserverlibrary')
 
 let ts: TypeScript
-let info: tsModule.server.PluginCreateInfo
 let appDirRegExp: RegExp
 export let virtualTsEnv: VirtualTypeScriptEnvironment
 
-export function log(message: string) {
-  info.project.projectService.logger.info(message)
-}
+export let log: (message: string) => void
 
 // This function has to be called initially.
-export function init(opts: { ts: TypeScript; info: tsModule.server.PluginCreateInfo }) {
+export function init(opts: {
+  ts: TypeScript
+  info: tsModule.server.PluginCreateInfo
+}) {
   const projectDir = opts.info.project.getCurrentDirectory()
   ts = opts.ts
-  info = opts.info
   appDirRegExp = new RegExp(
     '^' + (projectDir + '(/src)?/app').replace(/[\\/]/g, '[\\/]')
   )
+  log = opts.info.project.projectService.logger.info
 
   log('[next] Initializing Next.js TypeScript plugin at ' + projectDir)
 
   const fsMap = new Map<string, string>()
   const system = createSystem(fsMap)
-  const compilerOptions = info.project.getCompilerOptions()
+  const compilerOptions = opts.info.project.getCompilerOptions()
   virtualTsEnv = createVirtualTypeScriptEnvironment(
     system,
     [],
     ts,
     compilerOptions
   )
 
+  if (!virtualTsEnv) {
+    throw new Error('[next] Failed to create virtual TypeScript environment.')
+  }
+
   log('[next] Successfully initialized Next.js TypeScript plugin!')
+
+  return virtualTsEnv
 }
 
 export function getTs() {
   return ts
 }
 
-export function getInfo() {
-  return info
-}
-
 export function getTypeChecker() {
-  return info.languageService.getProgram()?.getTypeChecker()
+  return virtualTsEnv.languageService.getProgram()?.getTypeChecker()
 }
 
 export function getSource(fileName: string) {
-  return info.languageService.getProgram()?.getSourceFile(fileName)
+  return virtualTsEnv.getSourceFile(fileName)
 }
 
 export function removeStringQuotes(str: string): string {