feat(codemod): add support for renaming multiple packages, not only react-query

Author: balazsmatepetro

packages/react-query/codemods/v4/__testfixtures__/replace-import-specifier.input.tsx

@@ -1,4 +1,10 @@
+// React Query
 import { useQuery, useQueryClient } from 'react-query'
 import { useQuery as RenamedUseQuery, useQueryClient as RenamedUseQueryClient } from 'react-query'
-import Something from 'react-query'
-import * as RQ from 'react-query'
+import DefaultReactQuery from 'react-query'
+import * as NamespacedReactQuery from 'react-query'
+// Devtools
+import { ReactQueryDevtools } from 'react-query/devtools'
+import { ReactQueryDevtools as RenamedReactQueryDevtools } from 'react-query/devtools'
+import DefaultReactQueryDevtools from 'react-query/devtools'
+import * as NamespacedReactQueryDevtools from 'react-query/devtools'

packages/react-query/codemods/v4/__testfixtures__/replace-import-specifier.output.tsx

@@ -1,4 +1,10 @@
+// React Query
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useQuery as RenamedUseQuery, useQueryClient as RenamedUseQueryClient } from '@tanstack/react-query'
-import Something from '@tanstack/react-query'
-import * as RQ from '@tanstack/react-query'
+import DefaultReactQuery from '@tanstack/react-query'
+import * as NamespacedReactQuery from '@tanstack/react-query'
+// Devtools
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { ReactQueryDevtools as RenamedReactQueryDevtools } from '@tanstack/react-query-devtools'
+import DefaultReactQueryDevtools from '@tanstack/react-query-devtools'
+import * as NamespacedReactQueryDevtools from '@tanstack/react-query-devtools'

packages/react-query/codemods/v4/replace-import-specifier.js

@@ -2,17 +2,23 @@ module.exports = (file, api) => {
   const jscodeshift = api.jscodeshift
   const root = jscodeshift(file.source)
 
-  const findImportSpecifiers = () =>
-    root.find(jscodeshift.ImportDeclaration, {
-      source: {
-        value: 'react-query',
-      },
-    })
+  const replacements = [
+    { from: 'react-query', to: '@tanstack/react-query' },
+    { from: 'react-query/devtools', to: '@tanstack/react-query-devtools' },
+  ]
 
-  findImportSpecifiers().replaceWith(({ node }) => {
-    node.source.value = '@tanstack/react-query'
+  replacements.forEach(({ from, to }) => {
+    root
+      .find(jscodeshift.ImportDeclaration, {
+        source: {
+          value: from,
+        },
+      })
+      .replaceWith(({ node }) => {
+        node.source.value = to
 
-    return node
+        return node
+      })
   })
 
   return root.toSource({ quote: 'single' })