From e37b61e2264a5720c71de9c350a704f719794a3c Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 9 Oct 2024 22:40:10 +0200
Subject: [PATCH 1/4] codemod: fix type only react import

---
 .../access-props-30.input.tsx                     | 13 +++++++++++++
 .../access-props-30.output.tsx                    | 15 +++++++++++++++
 .../transforms/lib/async-request-api/utils.ts     |  9 +++++----
 3 files changed, 33 insertions(+), 4 deletions(-)
 create mode 100644 packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-30.input.tsx
 create mode 100644 packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-30.output.tsx

diff --git a/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-30.input.tsx b/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-30.input.tsx
new file mode 100644
index 0000000000000..1057354763530
--- /dev/null
+++ b/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-30.input.tsx
@@ -0,0 +1,13 @@
+'use client'
+
+import type { JSX } from 'react'
+
+interface Props {
+  params: { slug: string }
+}
+
+export default function Page({ params }: Props): JSX.Element {
+  const { slug } = params
+
+  return <p>{slug}</p>
+}
diff --git a/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-30.output.tsx b/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-30.output.tsx
new file mode 100644
index 0000000000000..1ec9828aa1360
--- /dev/null
+++ b/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-30.output.tsx
@@ -0,0 +1,15 @@
+'use client';
+import { use } from "react";
+
+import type { JSX } from 'react'
+
+interface Props {
+  params: Promise<{ slug: string }>
+}
+
+export default function Page(props: Props): JSX.Element {
+  const params = use(props.params);
+  const { slug } = params
+
+  return <p>{slug}</p>
+}
diff --git a/packages/next-codemod/transforms/lib/async-request-api/utils.ts b/packages/next-codemod/transforms/lib/async-request-api/utils.ts
index 02a888b0da818..9637c5bb8f54b 100644
--- a/packages/next-codemod/transforms/lib/async-request-api/utils.ts
+++ b/packages/next-codemod/transforms/lib/async-request-api/utils.ts
@@ -188,6 +188,8 @@ export function insertReactUseImport(root: Collection<any>, j: API['j']) {
       source: {
         value: 'react',
       },
+      // Skip the type only react imports
+      importKind: 'value',
     })
 
     if (reactImportDeclaration.size() > 0) {
@@ -197,10 +199,9 @@ export function insertReactUseImport(root: Collection<any>, j: API['j']) {
       importNode.specifiers.push(j.importSpecifier(j.identifier('use')))
     } else {
       // Final all type imports to 'react'
-      const reactImport = root.find(j.ImportDeclaration, {
-        source: {
-          value: 'react',
-        },
+      const reactImport = reactImportDeclaration.filter((path) => {
+        console.log(path.node)
+        return true
       })
 
       if (reactImport.size() > 0) {

From 7ed9eab7fbe7228d3c2e5165cb4d7a883c9e5619 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 9 Oct 2024 22:41:43 +0200
Subject: [PATCH 2/4] add mixed test case

---
 .../access-props-04.input.tsx                                 | 4 ++--
 .../access-props-04.output.tsx                                | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-04.input.tsx b/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-04.input.tsx
index fa3ed75115374..2a73a63c3e30e 100644
--- a/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-04.input.tsx
+++ b/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-04.input.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, type JSX } from 'react'
 
-export default function Page({ params }: { params: { slug: string } }) {
+export default function Page({ params }: { params: { slug: string } }): JSX.Element {
   const [text, setText] = useState('')
   // usage of `params`
   globalThis.f1(params)
diff --git a/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-04.output.tsx b/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-04.output.tsx
index 2067ab4547bb3..748645e3c1084 100644
--- a/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-04.output.tsx
+++ b/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-04.output.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import { useState, use } from 'react';
+import { useState, type JSX, use } from 'react';
 
-export default function Page(props: { params: Promise<{ slug: string }> }) {
+export default function Page(props: { params: Promise<{ slug: string }> }): JSX.Element {
   const params = use(props.params);
   const [text, setText] = useState('')
   // usage of `params`

From 66b9842a5e10bb11d602c25c56040b80c88eb49a Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 9 Oct 2024 23:23:56 +0200
Subject: [PATCH 3/4] Update
 packages/next-codemod/transforms/lib/async-request-api/utils.ts

Co-authored-by: JJ Kasper <jj@jjsweb.site>
---
 packages/next-codemod/transforms/lib/async-request-api/utils.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/next-codemod/transforms/lib/async-request-api/utils.ts b/packages/next-codemod/transforms/lib/async-request-api/utils.ts
index 9637c5bb8f54b..6abb40d14eb67 100644
--- a/packages/next-codemod/transforms/lib/async-request-api/utils.ts
+++ b/packages/next-codemod/transforms/lib/async-request-api/utils.ts
@@ -200,7 +200,6 @@ export function insertReactUseImport(root: Collection<any>, j: API['j']) {
     } else {
       // Final all type imports to 'react'
       const reactImport = reactImportDeclaration.filter((path) => {
-        console.log(path.node)
         return true
       })
 

From a7cdd6a17b789e275b767a25752d6525fd796fe9 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 9 Oct 2024 23:25:11 +0200
Subject: [PATCH 4/4] rm duplicate

---
 .../transforms/lib/async-request-api/utils.ts             | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/next-codemod/transforms/lib/async-request-api/utils.ts b/packages/next-codemod/transforms/lib/async-request-api/utils.ts
index 6abb40d14eb67..d18e02487354f 100644
--- a/packages/next-codemod/transforms/lib/async-request-api/utils.ts
+++ b/packages/next-codemod/transforms/lib/async-request-api/utils.ts
@@ -199,12 +199,8 @@ export function insertReactUseImport(root: Collection<any>, j: API['j']) {
       importNode.specifiers.push(j.importSpecifier(j.identifier('use')))
     } else {
       // Final all type imports to 'react'
-      const reactImport = reactImportDeclaration.filter((path) => {
-        return true
-      })
-
-      if (reactImport.size() > 0) {
-        reactImport
+      if (reactImportDeclaration.size() > 0) {
+        reactImportDeclaration
           .get()
           .node.specifiers.push(j.importSpecifier(j.identifier('use')))
       } else {