Add codemod to convert input selectors passed as separate inline arguments to a single array

.github/workflows/test-reselect-codemods.yml

@@ -0,0 +1,38 @@
+name: Test Reselect Codemods
+
+on: [push, pull_request, workflow_dispatch]
+
+defaults:
+ run:
+ working-directory: codemods
+
+jobs:
+ test:
+ name: Run test Suite
+ runs-on: ${{ matrix.os }}
+
+ strategy:
+ fail-fast: false
+ matrix:
+ node: [18, 20, latest]
+ os: [ubuntu-latest, macos-latest]
+
+ steps:
+ - name: Checkout code
+ uses: actions/checkout@v4
+
+ - name: Set up Node
+ uses: actions/setup-node@v4
+ with:
+ node-version: ${{ matrix.node }}
+ cache-dependency-path: ./codemods
+ cache: 'yarn'
+
+ - name: Check folder contents
+ run: ls -l .
+
+ - name: Install dependencies
+ run: yarn install
+
+ - name: Run test suite
+ run: yarn test

.gitignore

@@ -26,11 +26,5 @@ typesversions
 .pnp.*
 *.tgz
 
-website/translated_docs
-website/build/
-website/node_modules
-website/i18n/*
-website/.yarn/
-
 docs/examples/**/*.js
 docs/examples/**/*.jsx

codemods/.eslintrc.json

@@ -0,0 +1,11 @@
+{
+ "env": { "node": true },
+ "extends": ["eslint:recommended", "prettier"],
+ "ignorePatterns": ["node_modules"],
+ "parserOptions": { "ecmaVersion": "latest" },
+ "plugins": ["node"],
+ "rules": {
+ "no-unused-vars": [0],
+ "eol-last": [0]
+ }
+}

codemods/.gitignore

@@ -0,0 +1,30 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.cache
+.yarnrc
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
+*.tgz

codemods/.prettierrc.json

@@ -0,0 +1,5 @@
+{
+ "singleQuote": true,
+ "arrowParens": "avoid",
+ "semi": false
+}

codemods/.release-it.json

@@ -0,0 +1,9 @@
+{
+ "hooks": {
+ "after:bump": "yarn && git add -u"
+ },
+ "git": {
+ "commitMessage": "Release reselect-codemods ${version}",
+ "tagName": "reselect-codemods@${version}"
+ }
+}

codemods/README.md

@@ -0,0 +1,42 @@
+# Reselect Codemods
+
+A collection of codemods for updating legacy Reselect API usage patterns to modern patterns.
+
+## Usage
+
+To run a specific codemod from this project, you would run the following:
+
+```bash
+npx reselect-codemods <TRANSFORM NAME> path/of/files/ or/some**/*glob.js
+
+# or
+
+yarn global add reselect-codemods
+reselect-codemods <TRANSFORM NAME> path/of/files/ or/some**/*glob.js
+```
+
+## Local Usage
+
+```
+node ./bin/cli.mjs <TRANSFORM NAME> path/of/files/ or/some**/*glob.js
+```
+
+## Transforms
+
+<!--TRANSFORMS_START-->
+
+- [convertInputSelectorsToArray](transforms/convertInputSelectorsToArray/README.md)
+
+<!--TRANSFORMS_END-->
+
+## Contributing
+
+### Installation
+
+- clone the repo
+- change into the repo directory
+- `yarn`
+
+### Running tests
+
+- `yarn test`

codemods/bin/cli.mjs

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+import { execaSync } from 'execa'
+import { globbySync } from 'globby'
+import { createRequire } from 'node:module'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const require = createRequire(import.meta.url)
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const transformerDirectory = path.join(
+ __dirname,
+ '..',
+ 'transforms',
+ `${process.argv[2]}/index.ts`,
+)
+
+const jscodeshiftExecutable = require.resolve('.bin/jscodeshift')
+
+const extensions = 'ts,js,tsx,jsx'
+
+execaSync(
+ jscodeshiftExecutable,
+ [
+ '-t',
+ transformerDirectory,
+ '--extensions',
+ extensions,
+ ...(process.argv.slice(3).length === 1
+ ? globbySync(process.argv[3])
+ : globbySync(process.argv.slice(3))),
+ ],
+ {
+ stdio: 'inherit',
+ stripFinalNewline: false,
+ },
+)

codemods/package.json

@@ -0,0 +1,52 @@
+{
+ "name": "reselect-codemods",
+ "version": "0.1.0",
+ "scripts": {
+ "lint": "eslint .",
+ "test": "vitest --run",
+ "test:watch": "vitest --watch",
+ "test:coverage": "vitest --coverage"
+ },
+ "bin": "./bin/cli.mjs",
+ "files": [
+ "bin/*",
+ "transforms/**/index.ts",
+ "transforms/**/README.md",
+ "package.json",
+ "README.md"
+ ],
+ "keywords": [
+ "redux",
+ "redux-toolkit",
+ "reselect",
+ "codemod"
+ ],
+ "dependencies": {
+ "execa": "^9.2.0",
+ "globby": "^14.0.1",
+ "jscodeshift": "^0.16.0",
+ "ts-node": "^10.9.2",
+ "typescript": "^5.5.2"
+ },
+ "devDependencies": {
+ "@types/jscodeshift": "^0.11.11",
+ "@types/node": "^20.14.7",
+ "@typescript-eslint/parser": "^7.13.1",
+ "eslint": "^8.57.0",
+ "eslint-config-prettier": "^9.1.0",
+ "eslint-plugin-node": "^11.1.0",
+ "eslint-plugin-prettier": "^5.1.3",
+ "prettier": "^3.3.2",
+ "vitest": "^1.6.0"
+ },
+ "engines": {
+ "node": ">= 16"
+ },
+ "publishConfig": {
+ "access": "public"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/reduxjs/reselect.git"
+ }
+}

codemods/transformTestUtils.ts

@@ -0,0 +1,71 @@
+import { globbySync } from 'globby'
+import type { Transform } from 'jscodeshift'
+import type { TestOptions } from 'jscodeshift/src/testUtils'
+import { applyTransform } from 'jscodeshift/src/testUtils'
+import fs from 'node:fs'
+import path from 'node:path'
+
+export const runTransformTest = (
+ name: string,
+ transform: Transform,
+ parser: TestOptions['parser'],
+ fixturePath: string,
+) => {
+ describe(name, () => {
+ globbySync('**/*.input.*', {
+ cwd: fixturePath,
+ absolute: true,
+ objectMode: true,
+ })
+ .map(entry => entry.name)
+ .forEach(filename => {
+ const extension = path.extname(filename)
+
+ const testName = filename.replace(`.input${extension}`, '')
+
+ const testInputPath = path.join(fixturePath, `${testName}${extension}`)
+
+ const inputPath = path.join(
+ fixturePath,
+ `${testName}.input${extension}`,
+ )
+
+ const outputPath = path.join(
+ fixturePath,
+ `${testName}.output${extension}`,
+ )
+
+ const inputFileContent = fs.readFileSync(inputPath, 'utf8')
+
+ const expectedOutput = fs.readFileSync(outputPath, 'utf8')
+
+ describe(`${testName}${extension}`, () => {
+ it('transforms correctly', () => {
+ const output = applyTransform(
+ transform,
+ {},
+ {
+ path: testInputPath,
+ source: inputFileContent,
+ },
+ { parser },
+ )
+ expect(output).toBe(expectedOutput.trim().replace('\r\n', '\n'))
+ })
+
+ it('is idempotent', () => {
+ const output = applyTransform(
+ transform,
+ {},
+ {
+ path: testInputPath,
+ source: inputFileContent,
+ },
+ { parser },
+ )
+ expect(output).toBe(expectedOutput.trim().replace('\r\n', '\n'))
+ })
+ })
+ })
+ })
+}

codemods/transforms/convertInputSelectorsToArray/README.md

@@ -0,0 +1,69 @@
+# convertInputSelectorsToArray
+
+Transforms the usage of Reselect's `createSelector` API by consolidating multiple inline input selector arguments into a single array.
+
+It should work with both JavaScript and TypeScript files.
+
+## Usage
+
+```
+npx reselect-codemods convertInputSelectorsToArray path/of/files/ or/some**/*glob.js
+
+# or
+
+yarn global add reselect-codemods
+reselect-codemods convertInputSelectorsToArray path/of/files/ or/some**/*glob.js
+```
+
+## Local Usage
+
+```
+node ./bin/cli.mjs convertInputSelectorsToArray path/of/files/ or/some**/*glob.js
+```
+
+## Input / Output
+
+<!--FIXTURES_TOC_START-->
+
+- [separate-inline-arguments.input.ts](#separate-inline-arguments.ts)
+- [withTypes.input.ts](#withTypes.ts)
+
+<!--FIXTURES_TOC_END-->
+
+## <!--FIXTURES_CONTENT_START-->
+
+<a id="separate-inline-arguments.ts">**separate-inline-arguments.ts**</a>
+
+**Input** (<small>[separate-inline-arguments.input.ts](transforms\convertInputSelectorsToArray\__testfixtures__\separate-inline-arguments.input.ts)</small>):
+
+```ts
+import { createSelector } from 'reselect'
+
+export interface RootState {
+ todos: { id: number; completed: boolean }[]
+ alerts: { id: number; read: boolean }[]
+}
+
+const selectTodoById = createSelector(
+ (state: RootState) => state.todos,
+ (state: RootState, id: number) => id,
+ (todos, id) => todos.find(todo => todo.id === id)
+)
+```
+
+**Output** (<small>[separate-inline-arguments.output.ts](transforms\convertInputSelectorsToArray\__testfixtures__\separate-inline-arguments.output.ts)</small>):
+
+```ts
+import { createSelector } from 'reselect'
+
+export interface RootState {
+ todos: { id: number; completed: boolean }[]
+ alerts: { id: number; read: boolean }[]
+}
+
+const selectTodoById = createSelector(
+ [(state: RootState) => state.todos, (state: RootState, id: number) => id],
+ (todos, id) => todos.find(todo => todo.id === id)
+)
+```
+<!--FIXTURES_CONTENT_END-->