codemod: type cast async api calls in non entry file exports (#71040)

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/origin-name-01-util.input.ts

@@ -0,0 +1,6 @@
+import { cookies } from 'next/headers'
+
+export default function Foo(): string {
+  const name = cookies().get('name')
+  return name
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/origin-name-01-util.output.ts

@@ -0,0 +1,6 @@
+import { cookies, type UnsafeUnwrappedCookies } from 'next/headers';
+
+export default function Foo(): string {
+  const name = (cookies() as unknown as UnsafeUnwrappedCookies).get('name')
+  return name
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/origin-name-02-util.input.js

@@ -0,0 +1,6 @@
+import { cookies } from 'next/headers'
+
+export default function Foo() {
+  const name = cookies().get('name')
+  return name
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/origin-name-02-util.output.js

@@ -0,0 +1,7 @@
+import { cookies } from 'next/headers'
+
+export default function Foo() {
+  const name = /* Next.js Dynamic Async API Codemod: Manually await this call, if it's a Server Component */
+  cookies().get('name')
+  return name
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/origin-name-03-default.input.js

@@ -0,0 +1,3 @@
+export default function Page({ params }) {
+  f1(params)
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/origin-name-03-default.output.js

@@ -0,0 +1,4 @@
+export default async function Page(props) {
+  const params = await props.params;
+  f1(params)
+}

packages/next-codemod/transforms/__tests__/next-async-request-api-dynamic-apis.test.js

@@ -37,16 +37,26 @@ describe('next-async-request-api - dynamic-apis', () => {
     const prefix = `${fixtureDir}/${fixture}`;
     const [inputPath, input] = getSourceByInputPath(path.join(`${__dirname}`, `../__testfixtures__/${prefix}.input`))
     const [outputPath, expectedOutput] = getSourceByInputPath(path.join(`${__dirname}`, `../__testfixtures__/${prefix}.output`))
+    const extension = path.extname(inputPath)
 
     const transformPath = `${__dirname}/../${transformName}`
     const transform = require(transformPath).default
 
+    // Override test fixture input filename with `page.tsx` to always match the expected output,
+    // otherwise fallback to the original filename.
+    const overrideFilename = /[\\/]origin-name-\d{2}-/.test(inputPath) 
+      // extract the <name> from `origin-name-<name>-<number>.input.js`
+      ? inputPath
+        .replace(/origin-name-(\d{2})-/, '')
+        .replace(/\.input\./, '.')
+      : 'page' + extension
+
     it(`transforms correctly ${prefix}`, () => {
       runInlineTest(
         transform,
         null,
         {
-          path: inputPath,
+          path: overrideFilename,
           source: input,
         },
         expectedOutput, 

packages/next-codemod/transforms/__tests__/next-async-request-api-dynamic-props.test.js

@@ -37,6 +37,7 @@ describe('next-async-request-api - dynamic-props', () => {
     const prefix = `${fixtureDir}/${fixture}`;
     const [inputPath, input] = getSourceByInputPath(path.join(`${__dirname}`, `../__testfixtures__/${prefix}.input`))
     const [outputPath, expectedOutput] = getSourceByInputPath(path.join(`${__dirname}`, `../__testfixtures__/${prefix}.output`))
+    const extension = path.extname(inputPath)
 
     const transformPath = `${__dirname}/../${transformName}`
     const transform = require(transformPath).default
@@ -48,7 +49,7 @@ describe('next-async-request-api - dynamic-props', () => {
       ? inputPath
         .replace(/origin-name-(\d{2})-/, '')
         .replace(/\.input\./, '.')
-      : 'page.tsx'
+      : 'page' + extension
 
     it(`transforms correctly ${prefix}`, () => {
       runInlineTest(

packages/next-codemod/transforms/lib/async-request-api/next-async-dynamic-api.ts

@@ -9,6 +9,7 @@ import {
   findClosetParentFunctionScope,
   wrapParentheseIfNeeded,
   insertCommentOnce,
+  NEXTJS_ENTRY_FILES,
 } from './utils'
 
 const DYNAMIC_IMPORT_WARN_COMMENT = ` Next.js Dynamic Async API Codemod: The APIs under 'next/headers' are async now, need to be manually awaited. `
@@ -44,6 +45,7 @@ export function transformDynamicAPI(
   api: API,
   filePath: string
 ) {
+  const isEntryFile = NEXTJS_ENTRY_FILES.test(filePath)
   const j = api.jscodeshift.withParser('tsx')
   const root = j(source)
   let modified = false
@@ -119,7 +121,8 @@ export function transformDynamicAPI(
         } else {
           // Determine if the function is an export
           const closetScopePath = closetScope.get()
-          const isFromExport = isMatchedFunctionExported(closetScopePath, j)
+          const isEntryFileExport =
+            isEntryFile && isMatchedFunctionExported(closetScopePath, j)
           const closestFunctionNode = closetScope.size()
             ? closetScopePath.node
             : null
@@ -130,7 +133,7 @@ export function transformDynamicAPI(
           // e.g. export const MyComponent = function() {}
           let exportFunctionNode
 
-          if (isFromExport) {
+          if (isEntryFileExport) {
             if (
               closestFunctionNode &&
               isFunctionType(closestFunctionNode.type)
@@ -144,7 +147,7 @@ export function transformDynamicAPI(
 
           let canConvertToAsync = false
           // check if current path is under the default export function
-          if (isFromExport) {
+          if (isEntryFileExport) {
             // if default export function is not async, convert it to async, and await the api call
             if (!isCallAwaited) {
               // If the scoped function is async function

packages/next-codemod/transforms/lib/async-request-api/next-async-dynamic-prop.ts

@@ -19,10 +19,10 @@ import {
   insertCommentOnce,
   TARGET_ROUTE_EXPORTS,
   getVariableDeclaratorId,
+  NEXTJS_ENTRY_FILES,
 } from './utils'
 
 const PAGE_PROPS = 'props'
-const MATCHED_FILE_PATTERNS = /([\\/]|^)(page|layout|route)\.(t|j)sx?$/
 
 function findFunctionBody(path: ASTPath<FunctionScope>) {
   let functionBody = path.node.body
@@ -342,8 +342,8 @@ export function transformDynamicProps(
   api: API,
   filePath: string
 ) {
-  const isMatched = MATCHED_FILE_PATTERNS.test(filePath)
-  if (!isMatched) {
+  const isEntryFile = NEXTJS_ENTRY_FILES.test(filePath)
+  if (!isEntryFile) {
     return null
   }
 

packages/next-codemod/transforms/lib/async-request-api/utils.ts

@@ -9,6 +9,9 @@ import type {
   FunctionExpression,
 } from 'jscodeshift'
 
+export const NEXTJS_ENTRY_FILES =
+  /([\\/]|^)(page|layout|route|default)\.(t|j)sx?$/
+
 export type FunctionScope =
   | FunctionDeclaration
   | FunctionExpression