chore(codemods): move existing codemods into a separate package (#4949)

* chore(codemods): move existing codemods into a separate package

* chore(codemods): fix formatting of the existing codemods

* refactor(codemods): move existing utility functions to a shared place

These utility functions can be reused for the version 5 codemods, so I decided to move them to a shared place.

* refactor(codemods): move `UnprocessableKeyError` class to the `key-replacer.js` file

Since it was used only here, it doesn't make any sense to keep it in a separate file.

* chore(codemods): add `README.md` file under the `v5` directory

---------

Co-authored-by: Dominik Dorfmeister <[email protected]>

Author: balazsmatepetro

.prettierignore

@@ -1 +1,2 @@
 /packages/svelte-query/.svelte-kit
+/packages/codemods/**/__testfixtures__

packages/codemods/.eslintrc

@@ -0,0 +1,15 @@
+{
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "sourceType": "module"
+  },
+  "overrides": [
+    {
+      "files": ["**/__testfixtures__/*"],
+      "rules": {
+        "import/no-unresolved": "off",
+        "@typescript-eslint/no-unused-vars": "off"
+      }
+    }
+  ]
+}

packages/codemods/jest.config.ts

@@ -0,0 +1,4 @@
+export default {
+  displayName: 'query-codemods',
+  preset: '../../jest-preset.js'
+}

packages/codemods/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@tanstack/query-codemods",
+  "version": "4.24.3",
+  "description": "Collection of codemods to make the migration easier.",
+  "author": "Balázs Máté Petró",
+  "license": "MIT",
+  "repository": "tanstack/query",
+  "homepage": "https://tanstack.com/query",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "exports": {
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "test:eslint": "eslint --ext .ts,.tsx ./src",
+    "test:lib": "jest --config ./jest.config.ts",
+    "test:lib:dev": "pnpm run test:lib --watch"
+  },
+  "files": [
+    "src",
+    "!src/jest.config.js",
+    "!src/**/__testfixtures__",
+    "!src/**/__tests__"
+  ],
+  "devDependencies": {
+    "@types/jscodeshift": "0.11.5",
+    "jscodeshift": "0.13.1"
+  }
+}

packages/react-query/codemods/v4/utils/index.js renamed to packages/codemods/src/utils/index.js

@@ -1,7 +1,7 @@
 module.exports = ({ root, jscodeshift }) => {
   const findImportIdentifierOf = (importSpecifiers, identifier) => {
     const specifier = importSpecifiers
-      .filter(node => node.value.imported.name === identifier)
+      .filter((node) => node.value.imported.name === identifier)
       .paths()
 
     if (specifier.length > 0) {
@@ -20,7 +20,7 @@ module.exports = ({ root, jscodeshift }) => {
       })
       .find(jscodeshift.ImportSpecifier, {})
 
-  const locateImports = identifiers => {
+  const locateImports = (identifiers) => {
     const findNamespaceImportIdentifier = () => {
       const specifier = root
         .find(jscodeshift.ImportDeclaration, {
@@ -59,7 +59,7 @@ module.exports = ({ root, jscodeshift }) => {
     for (const identifier of identifiers) {
       identifierMap[identifier] = findImportIdentifierOf(
         importSpecifiers,
-        identifier
+        identifier,
       )
     }
 
@@ -81,40 +81,40 @@ module.exports = ({ root, jscodeshift }) => {
         },
       })
 
-  const findQueryClientIdentifiers = importIdentifiers =>
+  const findQueryClientIdentifiers = (importIdentifiers) =>
     root
       .find(jscodeshift.VariableDeclarator, {})
-      .filter(node => {
+      .filter((node) => {
         if (node.value.init) {
           const initializer = node.value.init
 
           return (
             isClassInstantiationOf(
               initializer,
-              getSelectorByImports(importIdentifiers, 'QueryClient')
+              getSelectorByImports(importIdentifiers, 'QueryClient'),
             ) ||
             isFunctionCallOf(
               initializer,
-              getSelectorByImports(importIdentifiers, 'useQueryClient')
+              getSelectorByImports(importIdentifiers, 'useQueryClient'),
             )
           )
         }
 
         return false
       })
       .paths()
-      .map(node => node.value.id.name)
+      .map((node) => node.value.id.name)
 
-  const isCallExpression = node =>
+  const isCallExpression = (node) =>
     jscodeshift.match(node, { type: jscodeshift.CallExpression.name })
 
-  const isIdentifier = node =>
+  const isIdentifier = (node) =>
     jscodeshift.match(node, { type: jscodeshift.Identifier.name })
 
-  const isMemberExpression = node =>
+  const isMemberExpression = (node) =>
     jscodeshift.match(node, { type: jscodeshift.MemberExpression.name })
 
-  const isNewExpression = node =>
+  const isNewExpression = (node) =>
     jscodeshift.match(node, { type: jscodeshift.NewExpression.name })
 
   const isClassInstantiationOf = (node, selector) => {

packages/react-query/codemods/v4/utils/transformers/query-cache-transformer.js renamed to packages/codemods/src/utils/transformers/query-cache-transformer.js

@@ -2,15 +2,15 @@ module.exports = ({ jscodeshift, utils, root }) => {
   const isGetQueryCacheMethodCall = (
     initializer,
     importIdentifiers,
-    knownQueryClientIds
+    knownQueryClientIds,
   ) => {
-    const isKnownQueryClient = node =>
+    const isKnownQueryClient = (node) =>
       utils.isIdentifier(node) && knownQueryClientIds.includes(node.name)
 
-    const isGetQueryCacheIdentifier = node =>
+    const isGetQueryCacheIdentifier = (node) =>
       utils.isIdentifier(node) && node.name === 'getQueryCache'
 
-    const isValidInitializer = node =>
+    const isValidInitializer = (node) =>
       utils.isCallExpression(node) && utils.isMemberExpression(node.callee)
 
     if (isValidInitializer(initializer)) {
@@ -21,7 +21,7 @@ module.exports = ({ jscodeshift, utils, root }) => {
         (isKnownQueryClient(instance) ||
           utils.isFunctionCallOf(
             instance,
-            utils.getSelectorByImports(importIdentifiers, 'useQueryClient')
+            utils.getSelectorByImports(importIdentifiers, 'useQueryClient'),
           ))
       )
     }
@@ -31,57 +31,58 @@ module.exports = ({ jscodeshift, utils, root }) => {
 
   const findQueryCacheInstantiations = (
     importIdentifiers,
-    knownQueryClientIds
+    knownQueryClientIds,
   ) =>
-    root.find(jscodeshift.VariableDeclarator, {}).filter(node => {
+    root.find(jscodeshift.VariableDeclarator, {}).filter((node) => {
       if (node.value.init) {
         const initializer = node.value.init
 
         return (
           utils.isClassInstantiationOf(
             initializer,
-            utils.getSelectorByImports(importIdentifiers, 'QueryCache')
+            utils.getSelectorByImports(importIdentifiers, 'QueryCache'),
           ) ||
           isGetQueryCacheMethodCall(
             initializer,
             importIdentifiers,
-            knownQueryClientIds
+            knownQueryClientIds,
           )
         )
       }
 
       return false
     })
 
-  const filterQueryCacheMethodCalls = node =>
+  const filterQueryCacheMethodCalls = (node) =>
     utils.isIdentifier(node) && ['find', 'findAll'].includes(node.name)
 
-  const findQueryCacheMethodCalls = importIdentifiers => {
+  const findQueryCacheMethodCalls = (importIdentifiers) => {
     /**
      * Here we collect all query client instantiations. We have to make aware of them because the query cache can be
      * accessed by the query client as well.
      */
-    const queryClientIdentifiers = utils.queryClient.findQueryClientIdentifiers(
-      importIdentifiers
-    )
+    const queryClientIdentifiers =
+      utils.queryClient.findQueryClientIdentifiers(importIdentifiers)
     /**
      * Here we collect all query cache instantiations. The reason is simple: the methods can be called on query cache
      * instances, to locate the possible usages we need to be aware of the identifier names.
      */
     const queryCacheIdentifiers = findQueryCacheInstantiations(
       importIdentifiers,
-      queryClientIdentifiers
+      queryClientIdentifiers,
     )
       .paths()
-      .map(node => node.value.id.name)
+      .map((node) => node.value.id.name)
 
     return (
       utils
         // First, we need to find all method calls.
         .findAllMethodCalls()
         // Then we narrow the collection to all `fetch` and `fetchAll` methods.
-        .filter(node => filterQueryCacheMethodCalls(node.value.callee.property))
-        .filter(node => {
+        .filter((node) =>
+          filterQueryCacheMethodCalls(node.value.callee.property),
+        )
+        .filter((node) => {
           const object = node.value.callee.object
 
           // If the method is called on a `QueryCache` instance, we keep it in the collection.
@@ -94,7 +95,7 @@ module.exports = ({ jscodeshift, utils, root }) => {
             return isGetQueryCacheMethodCall(
               object,
               importIdentifiers,
-              queryClientIdentifiers
+              queryClientIdentifiers,
             )
           }
 
@@ -103,9 +104,9 @@ module.exports = ({ jscodeshift, utils, root }) => {
     )
   }
 
-  const execute = replacer => {
+  const execute = (replacer) => {
     findQueryCacheMethodCalls(
-      utils.locateImports(['QueryCache', 'QueryClient', 'useQueryClient'])
+      utils.locateImports(['QueryCache', 'QueryClient', 'useQueryClient']),
     ).replaceWith(replacer)
   }
 

packages/react-query/codemods/v4/utils/transformers/query-client-transformer.js renamed to packages/codemods/src/utils/transformers/query-client-transformer.js

@@ -7,19 +7,18 @@ module.exports = ({ jscodeshift, utils, root }) => {
      * Here we collect all query client instantiations. We have to make aware of them because some method calls might
      * be invoked on these instances.
      */
-    const queryClientIdentifiers = utils.queryClient.findQueryClientIdentifiers(
-      importIdentifiers
-    )
+    const queryClientIdentifiers =
+      utils.queryClient.findQueryClientIdentifiers(importIdentifiers)
 
     return (
       utils
         // First, we need to find all method calls.
         .findAllMethodCalls()
         // Then we narrow the collection to `QueryClient` methods.
-        .filter(node =>
-          filterQueryClientMethodCalls(node.value.callee.property, methods)
+        .filter((node) =>
+          filterQueryClientMethodCalls(node.value.callee.property, methods),
         )
-        .filter(node => {
+        .filter((node) => {
           const object = node.value.callee.object
 
           // If the method is called on a `QueryClient` instance, we keep it in the collection.
@@ -30,7 +29,7 @@ module.exports = ({ jscodeshift, utils, root }) => {
           // If the method is called on the return value of `useQueryClient` hook, we keep it in the collection.
           return utils.isFunctionCallOf(
             object,
-            utils.getSelectorByImports(importIdentifiers, 'useQueryClient')
+            utils.getSelectorByImports(importIdentifiers, 'useQueryClient'),
           )
         })
     )
@@ -39,7 +38,7 @@ module.exports = ({ jscodeshift, utils, root }) => {
   const execute = (methods, replacer) => {
     findQueryClientMethodCalls(
       utils.locateImports(['QueryClient', 'useQueryClient']),
-      methods
+      methods,
     ).replaceWith(replacer)
   }
 

packages/react-query/codemods/v4/utils/transformers/use-query-like-transformer.js renamed to packages/codemods/src/utils/transformers/use-query-like-transformer.js

@@ -16,13 +16,13 @@ module.exports = ({ jscodeshift, utils, root }) => {
       // First, we need to find all call expressions.
       .find(jscodeshift.CallExpression, {})
       // Then we narrow the collection to the `useQuery` like hook calls.
-      .filter(node =>
-        filterUseQueryLikeHookCalls(node.value, importIdentifiers, hooks)
+      .filter((node) =>
+        filterUseQueryLikeHookCalls(node.value, importIdentifiers, hooks),
       )
 
   const execute = (hooks, replacer) => {
     findUseQueryLikeHookCalls(utils.locateImports(hooks), hooks).replaceWith(
-      replacer
+      replacer,
     )
   }