cache typechecking with incremental compilation (vercel#24559)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: sokra

package.json

@@ -124,7 +124,7 @@
     "tailwindcss": "1.1.3",
     "taskr": "1.1.0",
     "tree-kill": "1.2.2",
-    "typescript": "3.8.3",
+    "typescript": "4.3.0-beta",
     "wait-port": "0.2.2",
     "web-streams-polyfill": "2.1.1",
     "webpack-bundle-analyzer": "4.3.0",

packages/next/build/index.ts

@@ -146,8 +146,8 @@ export default async function build(
 
     const { headers, rewrites, redirects } = customRoutes
 
+    const cacheDir = path.join(distDir, 'cache')
     if (ciEnvironment.isCI && !ciEnvironment.hasNextSupport) {
-      const cacheDir = path.join(distDir, 'cache')
       const hasCache = await fileExists(cacheDir)
 
       if (!hasCache) {
@@ -193,7 +193,7 @@ export default async function build(
     const verifyResult = await nextBuildSpan
       .traceChild('verify-typescript-setup')
       .traceAsyncFn(() =>
-        verifyTypeScriptSetup(dir, pagesDir, !ignoreTypeScriptErrors)
+        verifyTypeScriptSetup(dir, pagesDir, !ignoreTypeScriptErrors, cacheDir)
       )
 
     const typeCheckEnd = process.hrtime(typeCheckStart)

packages/next/lib/typescript/runTypeCheck.ts

@@ -1,3 +1,4 @@
+import path from 'path'
 import {
   DiagnosticCategory,
   getFormattedDiagnostic,
@@ -18,7 +19,8 @@ export interface TypeCheckResult {
 export async function runTypeCheck(
   ts: typeof import('typescript'),
   baseDir: string,
-  tsConfigPath: string
+  tsConfigPath: string,
+  cacheDir?: string
 ): Promise<TypeCheckResult> {
   const effectiveConfiguration = await getTypeScriptConfiguration(
     ts,
@@ -35,11 +37,28 @@ export async function runTypeCheck(
   }
   const requiredConfig = getRequiredConfiguration(ts)
 
-  const program = ts.createProgram(effectiveConfiguration.fileNames, {
+  const options = {
     ...effectiveConfiguration.options,
     ...requiredConfig,
     noEmit: true,
-  })
+  }
+
+  let program: import('typescript').Program
+  let incremental = false
+  if (options.incremental && cacheDir) {
+    incremental = true
+    const builderProgram = ts.createIncrementalProgram({
+      rootNames: effectiveConfiguration.fileNames,
+      options: {
+        ...options,
+        incremental: true,
+        tsBuildInfoFile: path.join(cacheDir, '.tsbuildinfo'),
+      },
+    })
+    program = builderProgram.getProgram()
+  } else {
+    program = ts.createProgram(effectiveConfiguration.fileNames, options)
+  }
   const result = program.emit()
 
   // Intended to match:
@@ -79,6 +98,6 @@ export async function runTypeCheck(
     warnings,
     inputFilesCount: effectiveConfiguration.fileNames.length,
     totalFilesCount: program.getSourceFiles().length,
-    incremental: false,
+    incremental,
   }
 }

packages/next/lib/typescript/writeConfigurationDefaults.ts

@@ -1,6 +1,7 @@
 import { promises as fs } from 'fs'
 import chalk from 'chalk'
 import * as CommentJson from 'next/dist/compiled/comment-json'
+import semver from 'next/dist/compiled/semver'
 import os from 'os'
 import { getTypeScriptConfiguration } from './getTypeScriptConfiguration'
 
@@ -28,6 +29,9 @@ function getDesiredCompilerOptions(
     strict: { suggested: false },
     forceConsistentCasingInFileNames: { suggested: true },
     noEmit: { suggested: true },
+    ...(semver.gte(ts.version, '4.3.0-beta')
+      ? { incremental: { suggested: true } }
+      : undefined),
 
     // These values are required and cannot be changed by the user
     // Keep this in sync with the webpack config

packages/next/lib/verifyTypeScriptSetup.ts

@@ -15,7 +15,8 @@ import { writeConfigurationDefaults } from './typescript/writeConfigurationDefau
 export async function verifyTypeScriptSetup(
   dir: string,
   pagesDir: string,
-  typeCheckPreflight: boolean
+  typeCheckPreflight: boolean,
+  cacheDir?: string
 ): Promise<{ result?: TypeCheckResult; version: string | null }> {
   const tsConfigPath = path.join(dir, 'tsconfig.json')
 
@@ -48,7 +49,7 @@ export async function verifyTypeScriptSetup(
       const { runTypeCheck } = require('./typescript/runTypeCheck')
 
       // Verify the project passes type-checking before we go to webpack phase:
-      result = await runTypeCheck(ts, dir, tsConfigPath)
+      result = await runTypeCheck(ts, dir, tsConfigPath, cacheDir)
     }
     return { result, version: ts.version }
   } catch (err) {

packages/react-dev-overlay/src/internal/components/ShadowPortal.tsx

@@ -11,7 +11,7 @@ export const ShadowPortal: React.FC<ShadowPortalProps> = function Portal({
   let mountNode = React.useRef<HTMLDivElement | null>(null)
   let portalNode = React.useRef<HTMLElement | null>(null)
   let shadowNode = React.useRef<ShadowRoot | null>(null)
-  let [, forceUpdate] = React.useState()
+  let [, forceUpdate] = React.useState<{} | undefined>()
 
   React.useLayoutEffect(() => {
     const ownerDocument = mountNode.current!.ownerDocument!

test/integration/app-tree/tsconfig.json

@@ -7,6 +7,7 @@
     "strict": false,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
+    "incremental": true,
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "node",

test/integration/custom-server-types/tsconfig.json

@@ -10,6 +10,7 @@
     "strict": false,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
+    "incremental": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true

test/integration/handle-non-page-in-pages/tsconfig.json

@@ -7,6 +7,7 @@
     "strict": false,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
+    "incremental": true,
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "node",

test/integration/image-component/typescript-style/tsconfig.json

@@ -10,6 +10,7 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
+    "incremental": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true