Codemod for Async Request API

packages/next-codemod/bin/cli.ts

@@ -159,6 +159,10 @@ const TRANSFORMER_INQUIRER_CHOICES = [
     name: 'built-in-next-font: Uninstall `@next/font` and transform imports to `next/font`',
     value: 'built-in-next-font',
   },
+  {
+    name: 'next-async-request-api: Transforms usage of Next.js async Request APIs',
+    value: 'next-async-request-api',
+  },
 ]
 
 function expandFilePathsIfNeeded(filesBeforeExpansion) {

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-access-api-prop-01.input.tsx

@@ -0,0 +1,10 @@
+import { cookies } from 'next/headers'
+
+export async function MyComponent() {
+  const name = cookies().get('name')
+  callback(name)
+}
+
+function callback(name: any) {
+  console.log(name)
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-access-api-prop-01.output.tsx

@@ -0,0 +1,10 @@
+import { cookies } from 'next/headers'
+
+export async function MyComponent() {
+  const name = (await cookies()).get('name')
+  callback(name)
+}
+
+function callback(name: any) {
+  console.log(name)
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-access-api-prop-02.input.tsx

@@ -0,0 +1,5 @@
+import { draftMode } from 'next/headers'
+
+export async function MyComponent() {
+  draftMode().enable()
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-access-api-prop-02.output.tsx

@@ -0,0 +1,5 @@
+import { draftMode } from 'next/headers'
+
+export async function MyComponent() {
+  (await draftMode()).enable()
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-access-api-prop-03.input.tsx

@@ -0,0 +1,6 @@
+// If it's sync default export, convert to async and await the function call
+import { draftMode } from 'next/headers'
+
+export default function MyComponent() {
+  draftMode().enable()
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-access-api-prop-03.output.tsx

@@ -0,0 +1,6 @@
+// If it's sync default export, convert to async and await the function call
+import { draftMode } from 'next/headers'
+
+export default async function MyComponent() {
+  (await draftMode()).enable()
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-access-api-prop-04.input.tsx

@@ -0,0 +1,10 @@
+// If it's already awaited, don't wrap it again
+import { draftMode } from 'next/headers'
+
+export default async function MyComponent() {
+  draftMode().enable()
+}
+
+export async function MyComponent2() {
+  draftMode().enable()
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-access-api-prop-04.output.tsx

@@ -0,0 +1,10 @@
+// If it's already awaited, don't wrap it again
+import { draftMode } from 'next/headers'
+
+export default async function MyComponent() {
+  (await draftMode()).enable()
+}
+
+export async function MyComponent2() {
+  (await draftMode()).enable()
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-access-api-prop-05.input.tsx

@@ -0,0 +1,9 @@
+import { draftMode } from 'next/headers'
+
+export function MyComponent2() {
+  draftMode().enable()
+}
+
+export function useDraftModeEnabled() {
+  draftMode().enable()
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-access-api-prop-05.output.tsx

@@ -0,0 +1,10 @@
+import { use } from "react";
+import { draftMode, type UnsafeUnwrappedDraftMode } from 'next/headers';
+
+export function MyComponent2() {
+  (draftMode() as unknown as UnsafeUnwrappedDraftMode).enable()
+}
+
+export function useDraftModeEnabled() {
+  use(draftMode()).enable()
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-access-api-prop-06.input.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { draftMode } from 'next/headers'
+
+export default function Page() {
+  return (
+    <button
+      disabled={draftMode().isEnabled}
+    >
+      Enable Draft Mode
+    </button>
+  )
+}
+

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-access-api-prop-06.output.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { draftMode } from 'next/headers'
+
+export default async function Page() {
+  return (
+    (<button
+      disabled={(await draftMode()).isEnabled}
+    >Enable Draft Mode
+          </button>)
+  );
+}
+

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-access-api-prop-07.input.tsx

@@ -0,0 +1,6 @@
+import { draftMode, type UnsafeUnwrappedDraftMode } from 'next/headers';
+
+export function MyComponent2() {
+  draftMode().enable()
+}
+

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-access-api-prop-07.output.tsx

@@ -0,0 +1,5 @@
+import { draftMode, type UnsafeUnwrappedDraftMode } from 'next/headers';
+
+export function MyComponent2() {
+  (draftMode() as unknown as UnsafeUnwrappedDraftMode).enable()
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-access-api-prop-08.input.tsx

@@ -0,0 +1,5 @@
+import { headers } from 'next/headers';
+
+export function GET(): Response {
+  headers()
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-access-api-prop-08.output.tsx

@@ -0,0 +1,5 @@
+import { headers } from 'next/headers';
+
+export async function GET(): Promise<Response> {
+  await headers()
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-access-api-prop-09.input.tsx

@@ -0,0 +1,14 @@
+export default function Page(
+  {
+    params: { slug },
+    searchParams: { search },
+  } : {
+    params: { slug: string }
+    searchParams: any
+  }
+): JSX.Element {
+  slug
+  search
+
+  return <div>Page</div>
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-access-api-prop-09.output.tsx

@@ -0,0 +1,23 @@
+export default async function Page(
+  props: {
+    params: Promise<{ slug: string }>
+    searchParams: Promise<any>
+  }
+): Promise<JSX.Element> {
+  const searchParams = await props.searchParams;
+
+  const {
+    search
+  } = searchParams;
+
+  const params = await props.params;
+
+  const {
+    slug
+  } = params;
+
+  slug
+  search
+
+  return <div>Page</div>
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-access-api-prop-10.input.tsx

@@ -0,0 +1,13 @@
+import { headers } from 'next/headers'
+
+export function MyComp() {
+  return headers()
+}
+
+export function MyComp2() {
+  return headers()
+}
+
+export function MyComp3() {
+  return headers()
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-access-api-prop-10.output.tsx

@@ -0,0 +1,13 @@
+import { headers, type UnsafeUnwrappedHeaders } from 'next/headers';
+
+export function MyComp() {
+  return (headers() as unknown as UnsafeUnwrappedHeaders);
+}
+
+export function MyComp2() {
+  return (headers() as unknown as UnsafeUnwrappedHeaders);
+}
+
+export function MyComp3() {
+  return (headers() as unknown as UnsafeUnwrappedHeaders);
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-await-cookies.input.js

@@ -0,0 +1,5 @@
+import { cookies } from "next/headers";
+
+async function MyComponent() {
+  callSomething(cookies());
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-await-cookies.output.js

@@ -0,0 +1,5 @@
+import { cookies } from "next/headers";
+
+async function MyComponent() {
+  callSomething(await cookies());
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-await-headers.input.js

@@ -0,0 +1,5 @@
+import { headers } from "next/headers";
+
+async function MyComponent() {
+  callSomething(headers());
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-component-await-headers.output.js

@@ -0,0 +1,5 @@
+import { headers } from "next/headers";
+
+async function MyComponent() {
+  callSomething(await headers());
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-prop-cast-01.input.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { 
+  headers,
+  cookies, 
+  draftMode, 
+} from 'next/headers'
+
+export function MyDraftComponent() {
+if (draftMode().isEnabled) {
+    return null
+  }
+
+  return <p>page</p>
+}
+
+export function MyCookiesComponent() {
+  const c = cookies()
+  return c.get('name')
+}
+
+export function MyHeadersComponent() {
+  const h = headers()
+  return (
+    <p>{h.get('x-foo')}</p>
+  )
+}
+

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-prop-cast-01.output.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import {
+  headers,
+  cookies,
+  draftMode,
+  type UnsafeUnwrappedCookies,
+  type UnsafeUnwrappedHeaders,
+  type UnsafeUnwrappedDraftMode,
+} from 'next/headers';
+
+export function MyDraftComponent() {
+if ((draftMode() as unknown as UnsafeUnwrappedDraftMode).isEnabled) {
+    return null
+  }
+
+  return <p>page</p>
+}
+
+export function MyCookiesComponent() {
+  const c = (cookies() as unknown as UnsafeUnwrappedCookies)
+  return c.get('name')
+}
+
+export function MyHeadersComponent() {
+  const h = (headers() as unknown as UnsafeUnwrappedHeaders)
+  return (
+    <p>{h.get('x-foo')}</p>
+  )
+}
+

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-prop-cast-02.input.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { 
+  headers,
+  cookies, 
+  draftMode, 
+} from 'next/headers'
+
+export function MyDraftComponent() {
+if (draftMode().isEnabled) {
+    return null
+  }
+
+  return <p>page</p>
+}
+
+export function MyCookiesComponent() {
+  const c = cookies()
+  return c.get('name')
+}
+
+export function MyHeadersComponent() {
+  const h = headers()
+  return (
+    <p>{h.get('x-foo')}</p>
+  )
+}
+

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-prop-cast-02.output.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { 
+  headers,
+  cookies, 
+  draftMode, 
+} from 'next/headers'
+
+export function MyDraftComponent() {
+if (/* TODO: await this async call and propagate the async correctly */
+draftMode().isEnabled) {
+    return null
+  }
+
+  return <p>page</p>
+}
+
+export function MyCookiesComponent() {
+  const c = /* TODO: await this async call and propagate the async correctly */
+  cookies()
+  return c.get('name')
+}
+
+export function MyHeadersComponent() {
+  const h = /* TODO: await this async call and propagate the async correctly */
+  headers()
+  return (
+    <p>{h.get('x-foo')}</p>
+  )
+}
+

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-server-page-await-cookies.input.js

@@ -0,0 +1,5 @@
+import { cookies } from "next/headers";
+
+export default async function Page() {
+  callSomething(cookies());
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-server-page-await-cookies.output.js

@@ -0,0 +1,5 @@
+import { cookies } from "next/headers";
+
+export default async function Page() {
+  callSomething(await cookies());
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/custom-routes-access-api-prop-01.input.tsx

@@ -0,0 +1,13 @@
+import { headers } from 'next/headers'
+
+export const GET = function () {
+  headers()
+}
+
+export function POST() {
+  headers()
+}
+
+export async function DELETE() {
+  headers()
+}