codemod: fix props types modify for type alias (#71537)

Author: huozhi

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-38.input.tsx

@@ -6,3 +6,4 @@ export default function Page(props: PageProps) {
   const params = props.params
   return <p>child {params.slug}</p>
 }
+

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-38.output.tsx

@@ -1,5 +1,5 @@
 type PageProps = {
-  params: { slug: string }
+  params: Promise<{ slug: string }>
 }
 
 export default async function Page(props: PageProps) {

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/generate-metadata-access-prop-03.input.tsx

@@ -0,0 +1,9 @@
+type MetadataProps = {
+  params: { slug: string }
+}
+
+export function generateMetadata(props: MetadataProps) {
+  return {
+    title: props.params.slug,
+  }
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/generate-metadata-access-prop-03.output.tsx

@@ -0,0 +1,9 @@
+type MetadataProps = {
+  params: Promise<{ slug: string }>
+}
+
+export async function generateMetadata(props: MetadataProps) {
+  return {
+    title: (await props.params).slug,
+  };
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/generate-metadata-access-prop-04.input.tsx

@@ -0,0 +1,9 @@
+type MetadataProps = {
+  params: { slug: string }
+}
+
+export async function generateMetadata(props: MetadataProps): Promise<ResolvedMetadata> {
+  return {
+    title: props.params.slug,
+  }
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/generate-metadata-access-prop-04.output.tsx

@@ -0,0 +1,9 @@
+type MetadataProps = {
+  params: Promise<{ slug: string }>
+}
+
+export async function generateMetadata(props: MetadataProps): Promise<ResolvedMetadata> {
+  return {
+    title: (await props.params).slug,
+  };
+}

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

@@ -242,7 +242,6 @@ function modifyTypes(
             member.typeAnnotation.typeAnnotation = j.tsTypeReference(
               j.identifier('Promise'),
               j.tsTypeParameterInstantiation([
-                // @ts-ignore
                 member.typeAnnotation.typeAnnotation,
               ])
             )
@@ -303,6 +302,55 @@ function modifyTypes(
             })
           }
         }
+
+        // Deal with type aliases
+        if (foundTypes.typeAliases.length > 0) {
+          const typeAliasDeclaration = foundTypes.typeAliases[0]
+          if (j.TSTypeAliasDeclaration.check(typeAliasDeclaration)) {
+            const typeAlias = typeAliasDeclaration.typeAnnotation
+            if (
+              j.TSTypeLiteral.check(typeAlias) &&
+              typeAlias.members.length > 0
+            ) {
+              const typeLiteral = typeAlias
+              typeLiteral.members.forEach((member) => {
+                if (
+                  j.TSPropertySignature.check(member) &&
+                  j.Identifier.check(member.key) &&
+                  TARGET_PROP_NAMES.has(member.key.name)
+                ) {
+                  // if it's already a Promise, don't wrap it again, return
+                  if (
+                    member.typeAnnotation &&
+                    member.typeAnnotation.typeAnnotation &&
+                    member.typeAnnotation.typeAnnotation.type ===
+                      'TSTypeReference' &&
+                    member.typeAnnotation.typeAnnotation.typeName.type ===
+                      'Identifier' &&
+                    member.typeAnnotation.typeAnnotation.typeName.name ===
+                      'Promise'
+                  ) {
+                    return
+                  }
+
+                  // Wrap the prop type in Promise<>
+                  if (
+                    member.typeAnnotation &&
+                    j.TSTypeLiteral.check(member.typeAnnotation.typeAnnotation)
+                  ) {
+                    member.typeAnnotation.typeAnnotation = j.tsTypeReference(
+                      j.identifier('Promise'),
+                      j.tsTypeParameterInstantiation([
+                        member.typeAnnotation.typeAnnotation,
+                      ])
+                    )
+                    modified = true
+                  }
+                }
+              })
+            }
+          }
+        }
       }
     }
 
@@ -414,9 +462,12 @@ export function transformDynamicProps(
           modified ||= awaited
         }
 
-        if (modified) {
-          modifyTypes(currentParam.typeAnnotation, propsIdentifier, root, j)
-        }
+        modified ||= modifyTypes(
+          currentParam.typeAnnotation,
+          propsIdentifier,
+          root,
+          j
+        )
 
         // cases of passing down `props` into any function
         // Page(props) { callback(props) }