fixed an issue with update-react-imports codemod

Author: alexbit-codemod

update-react-imports/scripts/codemod.ts

@@ -76,18 +76,27 @@ const transform: Transform<TSX> = async (root) => {
   const isReactUsedAsValue = reactAsValue.length > 0;
 
   if (isReactUsedAsValue) {
-    const newImportText = `import * as ${reactName} from "react";`;
     const importStatement = reactDefaultImport.node.ancestors().find(
-      (a) => a.kind() === "import_statement"
+      (a) => a.kind() === "import_statement",
     );
     if (importStatement) {
-      edits.push(importStatement.replace(newImportText));
+      const source = importStatement.field("source");
+      const sourceText = source?.text() ?? '"react"';
+      const namedImports = importStatement.find({
+        rule: { kind: "named_imports" },
+      });
+      const namespaceLine = `import * as ${reactName} from ${sourceText};`;
+      if (namedImports) {
+        const namedLine = `import ${namedImports.text()} from ${sourceText};`;
+        edits.push(importStatement.replace(`${namespaceLine}\n${namedLine}`));
+      } else {
+        edits.push(importStatement.replace(namespaceLine));
+      }
     }
 
     transformMetric.increment({
       action: "convert-to-namespace",
       reason: "react-used-as-value",
-      file: root.filename(),
     });
   } else if (reactMemberUsages.size > 0) {
     const namedImportsToAdd: string[] = [];
@@ -115,21 +124,40 @@ const transform: Transform<TSX> = async (root) => {
     transformMetric.increment({
       action: "convert-member-to-named",
       members: namedList,
-      file: root.filename(),
     }, totalConversions);
   } else {
+    const importStatement = reactDefaultImport.node.ancestors().find(
+      (a) => a.kind() === "import_statement",
+    );
+    if (!importStatement) {
+      return null;
+    }
 
-    const removeEdit = removeImport(rootNode, {
-      type: "default",
-      from: "react",
+    const namedImports = importStatement.find({
+      rule: { kind: "named_imports" },
     });
-    if (removeEdit) {
-      edits.push(removeEdit);
+
+    if (namedImports) {
+      const source = importStatement.field("source");
+      const sourceText = source?.text() ?? '"react"';
+      const newImportText = `import ${namedImports.text()} from ${sourceText};`;
+      edits.push(importStatement.replace(newImportText));
       transformMetric.increment({
         action: "remove-default-import",
         reason: "only-jsx-usage",
-        file: root.filename(),
       });
+    } else {
+      const removeEdit = removeImport(rootNode, {
+        type: "default",
+        from: "react",
+      });
+      if (removeEdit) {
+        edits.push(removeEdit);
+        transformMetric.increment({
+          action: "remove-default-import",
+          reason: "only-jsx-usage",
+        });
+      }
     }
   }
 

update-react-imports/tests/combined-default-named-import/expected.tsx

@@ -0,0 +1,10 @@
+import { useState } from "react";
+
+export function Counter() {
+  const [n, setN] = useState(0);
+  return (
+    <button type="button" onClick={() => setN(n + 1)}>
+      {n}
+    </button>
+  );
+}

update-react-imports/tests/combined-default-named-import/input.tsx

@@ -0,0 +1,10 @@
+import React, { useState } from "react";
+
+export function Counter() {
+  const [n, setN] = useState(0);
+  return (
+    <button type="button" onClick={() => setN(n + 1)}>
+      {n}
+    </button>
+  );
+}

update-react-imports/tests/combined-default-named-import/metrics.json

@@ -0,0 +1,11 @@
+{
+  "react-import-updates": [
+    {
+      "cardinality": {
+        "action": "remove-default-import",
+        "reason": "only-jsx-usage"
+      },
+      "count": 1
+    }
+  ]
+}

update-react-imports/tests/fragment-only/metrics.json

@@ -3,7 +3,6 @@
     {
       "cardinality": {
         "action": "remove-default-import",
-        "file": "tests/fragment-only/input.tsx",
         "reason": "only-jsx-usage"
       },
       "count": 1

update-react-imports/tests/jsx-only/metrics.json

@@ -3,7 +3,6 @@
     {
       "cardinality": {
         "action": "remove-default-import",
-        "file": "tests/jsx-only/input.tsx",
         "reason": "only-jsx-usage"
       },
       "count": 1

update-react-imports/tests/member-expression/metrics.json

@@ -3,7 +3,6 @@
     {
       "cardinality": {
         "action": "convert-member-to-named",
-        "file": "tests/member-expression/input.tsx",
         "members": "createElement"
       },
       "count": 1

update-react-imports/tests/mixed-usage/metrics.json

@@ -3,7 +3,6 @@
     {
       "cardinality": {
         "action": "convert-member-to-named",
-        "file": "tests/mixed-usage/input.tsx",
         "members": "Component, createElement"
       },
       "count": 2

update-react-imports/tests/original-react-basic-default-export/metrics.json

@@ -3,7 +3,6 @@
     {
       "cardinality": {
         "action": "convert-member-to-named",
-        "file": "tests/original-react-basic-default-export/input.tsx",
         "members": "createElement"
       },
       "count": 1

update-react-imports/tests/original-react-not-removed/metrics.json

@@ -3,7 +3,6 @@
     {
       "cardinality": {
         "action": "convert-to-namespace",
-        "file": "tests/original-react-not-removed/input.tsx",
         "reason": "react-used-as-value"
       },
       "count": 1