add to CLI, add dirty flag

DmytroHryshyn · DmytroHryshyn · commit 30fbd2887dda · 2024-05-02T13:10:10.000+03:00
diff --git a/bin/cli.js b/bin/cli.js
@@ -217,6 +217,11 @@ const TRANSFORMER_INQUIRER_CHOICES = [
       'use-context-hook: Replaces useContext with React.use',
     value: 'use-context-hook'
   },
+  {
+    name:
+      'replace-use-form-state: Replaces useFormState with useActionState',
+    value: 'replace-use-form-state'
+  },
 ];
 
 const PARSER_INQUIRER_CHOICES = [
diff --git a/transforms/__testfixtures__/replace-use-form-state/other-import.output.js b/transforms/__testfixtures__/replace-use-form-state/other-import.output.js
@@ -1,6 +0,0 @@
-import { other } from "react-dom";
-
-function StatefulForm({}) {
-  const otherResult = other();
-  return <div></div>;
-}
diff --git a/transforms/replace-use-form-state.ts b/transforms/replace-use-form-state.ts
@@ -8,6 +8,7 @@ export default function transform(
   const j = api.jscodeshift;
   const root = j(file.source);
 
+  let isDirty = false;
   // Get default import from react-dom
   const defaultImportName = root
     .find(j.ImportDeclaration, {
@@ -45,9 +46,11 @@ export default function transform(
     actAccessExpressions.forEach((path) => {
       j(path)
         .find(j.Identifier, { name: 'useFormState' })
-        .paths()
         .at(0)
-        ?.replace(j.identifier('useActionState'));
+        ?.replaceWith(() => {
+          isDirty = true;
+          return j.identifier('useActionState');
+        });
     });
   }
 
@@ -59,37 +62,37 @@ export default function transform(
   const reactDOMImportPath = reactDOMImportCollection.paths().at(0);
 
   if (!reactDOMImportPath) {
-    return root.toSource();
+    return isDirty ? root.toSource() : undefined;
   }
 
   const specifier = reactDOMImportPath.node.specifiers?.find(
     (s) => s.type === 'ImportSpecifier' && s.imported.name === 'useFormState',
   );
 
   if (!specifier || !j.ImportSpecifier.check(specifier)) {
-    return root.toSource();
+    return isDirty ? root.toSource() : undefined;
   }
 
   const usedName = specifier.local?.name ?? specifier.imported.name;
 
   // Replace import name
   reactDOMImportCollection
     .find(j.ImportSpecifier, { imported: { name: 'useFormState' } })
-    .forEach((path) => {
-      path.replace(
-        j.importSpecifier(
-          j.identifier('useActionState'),
-          j.identifier(usedName),
-        ),
+    .replaceWith(() => {
+      isDirty = true;
+      return j.importSpecifier(
+        j.identifier('useActionState'),
+        j.identifier(usedName),
       );
     });
 
   // Means it's not aliased, so we also change identifier names, not only import
   if (specifier?.local?.name === 'useFormState') {
-    root.find(j.Identifier, { name: 'useFormState' }).forEach((path) => {
-      path.replace(j.identifier('useActionState'));
+    root.find(j.Identifier, { name: 'useFormState' }).replaceWith(() => {
+      isDirty = true;
+      return j.identifier('useActionState');
     });
   }
 
-  return root.toSource();
+  return isDirty ? root.toSource() : undefined;
 }
