[React19/replace-use-form-state] Fix import updates (#1382)

packages/codemods/react/19/replace-use-form-state/.codemodrc.json

@@ -1,6 +1,6 @@
 {
   "name": "react/19/replace-use-form-state",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "engine": "jscodeshift",
   "private": false,
   "applicability": {

packages/codemods/react/19/replace-use-form-state/README.md

@@ -26,7 +26,7 @@ function StatefulForm({}) {
 ### After:
 
 ```ts
-import { useActionState } from "react-dom";
+import { useActionState } from "react";
 
 async function increment(previousState, formData) {
   return previousState + 1;
@@ -57,10 +57,10 @@ function StatefulForm({}) {
 ### After:
 
 ```ts
-import * as ReactDOM from "react-dom";
+import { useActionState } from "react";
 
 function StatefulForm({}) {
-  const [state, formAction] = ReactDOM.useActionState(increment, 0);
+  const [state, formAction] = useActionState(increment, 0);
   return <form></form>;
 }
 ```

packages/codemods/react/19/replace-use-form-state/__testfixtures__/fixture7.input.js

@@ -0,0 +1,10 @@
+"use client";
+
+import React from "react";
+import { useFormState } from "react-dom";
+
+export const UserRegistrationFormComponent = () => {
+    const [formState, formAction] = useFormState(signupAction, initialState);
+
+    return <form>{/* Form fields go here */}</form>;
+};

packages/codemods/react/19/replace-use-form-state/__testfixtures__/fixture7.output.js

@@ -0,0 +1,9 @@
+"use client";
+
+import React, { useActionState } from "react";
+
+export const UserRegistrationFormComponent = () => {
+    const [formState, formAction] = useActionState(signupAction, initialState);
+
+    return <form>{/* Form fields go here */}</form>;
+};

packages/codemods/react/19/replace-use-form-state/__testfixtures__/fixture8.input.js

@@ -0,0 +1,6 @@
+import * as ReactDOM from "react-dom";
+
+function StatefulForm({}) {
+  const [state, formAction] = ReactDOM.useFormState(increment, 0);
+  return <form></form>;
+}

packages/codemods/react/19/replace-use-form-state/__testfixtures__/fixture8.output.js

@@ -0,0 +1,7 @@
+
+import { useActionState } from "react";
+
+function StatefulForm({}) {
+  const [state, formAction] = useActionState(increment, 0);
+  return <form></form>;
+}

packages/codemods/react/19/replace-use-form-state/src/index.ts

@@ -14,26 +14,24 @@ export default function transform(
     let importFromReact = root.find(j.ImportDeclaration, {
       source: { value: "react" },
     });
+    const specifier = name
+      ? j.importSpecifier(
+          j.identifier("useActionState"),
+          name ? j.identifier(name) : undefined,
+        )
+      : j.importSpecifier(j.identifier("useActionState"));
     if (importFromReact.length === 0) {
       isDirty = true;
       root
         .get()
         .node.program.body.unshift(
-          j.importDeclaration(
-            [
-              name
-                ? j.importSpecifier(
-                    j.identifier("useActionState"),
-                    name ? j.identifier(name) : undefined,
-                  )
-                : j.importSpecifier(j.identifier("useActionState")),
-            ],
-            j.literal("react"),
-          ),
+          j.importDeclaration([specifier], j.literal("react")),
         );
       importFromReact = root.find(j.ImportDeclaration, {
         source: { value: "react" },
       });
+    } else {
+      importFromReact.get("specifiers").push(specifier);
     }
   }
 

packages/codemods/react/19/replace-use-form-state/test/test.ts

@@ -163,4 +163,54 @@ describe("react/19/replace-use-form-state: useFormState() -> useActionState()",
       OUTPUT.replace(/\W/gm, ""),
     );
   });
+
+  it("should correctly transform useFormState import to useActionState", async () => {
+    const INPUT = await readFile(
+      join(__dirname, "..", "__testfixtures__/fixture7.input.js"),
+      "utf-8",
+    );
+    const OUTPUT = await readFile(
+      join(__dirname, "..", "__testfixtures__/fixture7.output.js"),
+      "utf-8",
+    );
+
+    const fileInfo: FileInfo = {
+      path: "index.ts",
+      source: INPUT,
+    };
+
+    const actualOutput = transform(fileInfo, buildApi("js"), {
+      quote: "single",
+    });
+
+    assert.deepEqual(
+      actualOutput?.replace(/\W/gm, ""),
+      OUTPUT.replace(/\W/gm, ""),
+    );
+  });
+
+  it("should correctly transform import all from ReactDOM", async () => {
+    const INPUT = await readFile(
+      join(__dirname, "..", "__testfixtures__/fixture8.input.js"),
+      "utf-8",
+    );
+    const OUTPUT = await readFile(
+      join(__dirname, "..", "__testfixtures__/fixture8.output.js"),
+      "utf-8",
+    );
+
+    const fileInfo: FileInfo = {
+      path: "index.ts",
+      source: INPUT,
+    };
+
+    const actualOutput = transform(fileInfo, buildApi("js"), {
+      quote: "single",
+    });
+
+    assert.deepEqual(
+      actualOutput?.replace(/\W/gm, ""),
+      OUTPUT.replace(/\W/gm, ""),
+    );
+  });
 });