From 2954e304449fd2915e844b1e4b3c434ebab2d89a Mon Sep 17 00:00:00 2001 From: balazsmatepetro Date: Tue, 28 Jun 2022 17:35:38 +0200 Subject: [PATCH 1/2] feat(codemod): add codemod that replaces the `react-query` import specifiers with `react-query` --- .../replace-import-specifier.input.tsx | 4 ++++ .../replace-import-specifier.output.tsx | 4 ++++ .../replace-import-specifier.test.js | 14 ++++++++++++++ .../codemods/v4/replace-import-specifier.js | 19 +++++++++++++++++++ 4 files changed, 41 insertions(+) create mode 100644 packages/react-query/codemods/v4/__testfixtures__/replace-import-specifier.input.tsx create mode 100644 packages/react-query/codemods/v4/__testfixtures__/replace-import-specifier.output.tsx create mode 100644 packages/react-query/codemods/v4/__tests__/replace-import-specifier.test.js create mode 100644 packages/react-query/codemods/v4/replace-import-specifier.js diff --git a/packages/react-query/codemods/v4/__testfixtures__/replace-import-specifier.input.tsx b/packages/react-query/codemods/v4/__testfixtures__/replace-import-specifier.input.tsx new file mode 100644 index 0000000000..ad7fb8c02d --- /dev/null +++ b/packages/react-query/codemods/v4/__testfixtures__/replace-import-specifier.input.tsx @@ -0,0 +1,4 @@ +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' diff --git a/packages/react-query/codemods/v4/__testfixtures__/replace-import-specifier.output.tsx b/packages/react-query/codemods/v4/__testfixtures__/replace-import-specifier.output.tsx new file mode 100644 index 0000000000..878e8cfd36 --- /dev/null +++ b/packages/react-query/codemods/v4/__testfixtures__/replace-import-specifier.output.tsx @@ -0,0 +1,4 @@ +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' diff --git a/packages/react-query/codemods/v4/__tests__/replace-import-specifier.test.js b/packages/react-query/codemods/v4/__tests__/replace-import-specifier.test.js new file mode 100644 index 0000000000..b56cd04fe3 --- /dev/null +++ b/packages/react-query/codemods/v4/__tests__/replace-import-specifier.test.js @@ -0,0 +1,14 @@ +// eslint-disable-next-line @typescript-eslint/no-var-requires +const defineTest = require('jscodeshift/dist/testUtils').defineTest + +jest.autoMockOff() + +defineTest( + __dirname, + 'replace-import-specifier', + null, + 'replace-import-specifier', + { + parser: 'tsx', + }, +) diff --git a/packages/react-query/codemods/v4/replace-import-specifier.js b/packages/react-query/codemods/v4/replace-import-specifier.js new file mode 100644 index 0000000000..76c111c189 --- /dev/null +++ b/packages/react-query/codemods/v4/replace-import-specifier.js @@ -0,0 +1,19 @@ +module.exports = (file, api) => { + const jscodeshift = api.jscodeshift + const root = jscodeshift(file.source) + + const findImportSpecifiers = () => + root.find(jscodeshift.ImportDeclaration, { + source: { + value: 'react-query', + }, + }) + + findImportSpecifiers().replaceWith(({ node }) => { + node.source.value = '@tanstack/react-query' + + return node + }) + + return root.toSource({ quote: 'single' }) +} From ef06e636f5c1597ef1454ba1b6dd74ce71f2d479 Mon Sep 17 00:00:00 2001 From: balazsmatepetro Date: Tue, 28 Jun 2022 18:18:32 +0200 Subject: [PATCH 2/2] feat(codemod): add support for renaming multiple packages, not only `react-query` --- .../replace-import-specifier.input.tsx | 10 ++++++-- .../replace-import-specifier.output.tsx | 10 ++++++-- .../codemods/v4/replace-import-specifier.js | 24 ++++++++++++------- 3 files changed, 31 insertions(+), 13 deletions(-) diff --git a/packages/react-query/codemods/v4/__testfixtures__/replace-import-specifier.input.tsx b/packages/react-query/codemods/v4/__testfixtures__/replace-import-specifier.input.tsx index ad7fb8c02d..7f7b209d69 100644 --- a/packages/react-query/codemods/v4/__testfixtures__/replace-import-specifier.input.tsx +++ b/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' diff --git a/packages/react-query/codemods/v4/__testfixtures__/replace-import-specifier.output.tsx b/packages/react-query/codemods/v4/__testfixtures__/replace-import-specifier.output.tsx index 878e8cfd36..083e645be4 100644 --- a/packages/react-query/codemods/v4/__testfixtures__/replace-import-specifier.output.tsx +++ b/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' diff --git a/packages/react-query/codemods/v4/replace-import-specifier.js b/packages/react-query/codemods/v4/replace-import-specifier.js index 76c111c189..e35ec3a44b 100644 --- a/packages/react-query/codemods/v4/replace-import-specifier.js +++ b/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' })