ha-codemods

A collection of codemod scripts for JSCodeshift that help to update JavaScript codebases.

Install & Run

git clone https://github.com/gillchristian/ha-codemods.git
cd $_
yarn install
yarn run mod -t <codemod-script> <file-1> <file-2> ... <file-N>

Use the -d option for a dry-run.

It is also possible to install JSCodeshift globally and use it instead of yarn run mod:

yarn global add jscodeshift
git clone https://github.com/gillchristian/ha-codemods.git
jscodeshift -t <codemod-script> <file-1> <file-2> ... <file-N>

Example: to run the bindActionCreators to object transformation on the index.js of a project do:

yarn run mod -t transfroms/bac-to-object.js ../path/to/project/index.js

JSCodeshift does not support globs but it works for directories and would run on all JS files in the directory.

You can also use xargs combined with some, for example, grep like tool. The following will run in all the files that contain bindActionCreators in a git repo:

git grep -l bindActionCreators ../path/to/repo | xargs yarn run mod -t transfroms/bac-to-object.js

Included Codemod Scripts

All codemod scripts are in the transforms/ directory.

bindActionCreators-to-object

yarn mod -t transforms/bac-to-object.js <file>

Replaces arrow functions that return a call to bindActionsCreators to the object shorthand version and removes the import.

Example:

// input
export default connect(
  state => ({ foo: getFoo(state) }),
  dispatch =>
    bindActionCreators(
      {
        handleSubmit: sendData,
        handleClick: validateDate,
      },
      dispatch,
    ),
)(MyComponent)

// output
export default connect(
  state => ({ foo: getFoo(state) }),
  {
    handleSubmit: sendData,
    handleClick: validateDate,
  },
)(MyComponent)

It works for all the cases with the form:

dispatch => bindActionCreators(actionsObject, dispatch);

It won't work for cases like this:

// this
export default connect(
  state => ({ foo: getFoo(state) }),
  (dispatch, props) =>
    bindActionCreators(
      {
        handleSubmit: sendData(props.foo),
      },
      dispatch,
    ),
)(MyComponent)

// or this
export default connect(
  state => ({ foo: getFoo(state) }),
  (dispatch) => ({
    actionSet: bindActionCreators({ action }, dispatch),
    actionSet2: bindActionCreators({ otherAction }, dispatch),
  }),
)(MyComponent)