JSPM

Home for codemods

As part of lite mode conversion for components in atlaskit, we found codemods are extremely useful for migrating some breaking changes for our consumers. However, one painpoint for us who need to write them is we have to copy-paste the code snippet in many places.

So the purpose of this repo is to reduce that pain and centric all reusable codemods snippets into a single place, and all the further changes should happen in this repo too.

The target is to release this repo as a npm package if possible, and user then can introduce those generic functions and compose in their codebase.

Example

For example, when you want to depracate a prop called isLoading from your consumer's codebase, you can introduce some utils in a file transformer.ts from this repo:

import {
  createRemoveFuncFor,
  createTransformer,
} from '@atlaskit/codemod-utils';

const removeIsLoading = createRemoveFuncFor(
  '@atlaskit/fancycomponent',
  'ComponentName',
  'isLoading',
);

const transformer = createTransformer('@atlaskit/fancycomponent', [
  removeIsLoading,
]);

export default transformer;

And then run the transformer like:

npx jscodeshift -t transformer.ts  --ignore-pattern node_modules --parser babel --extensions ts path/to/your/codebase

Advanced usage

If you need more than one mutation against your codebase and want to apply all of them in one go, it's recommended to structure them properly into a separate folder.

For example, if you need 3 separate steps:

• remove isLoading prop
• rename isDefaultChecked to defaultChecked
• add a new prop title

then you can have a folder called migrates that contains:

• remove-isLoading.ts
• rename-isDefaultChecked-to-defaultChecked.ts
• add-title.ts

and for each file, you can have some code like:

import { createAddingPropFor } from '@atlaskit/codemod-utils';

export const addTitle = createAddingPropFor('@atlaskit/fancycomponent', {
  prop: 'title',
  defaultValue: '',
});

and in your entrypoint for jscodeshift to pick up, you can introduce all those migrates:

import { addTitle } from './migrates/add-title';
import { removeIsLoading } from './migrates/remove-isLoading';
import { renameDefaultChecked } from './migrates/rename-isDefaultChecked-to-defaultChecked.ts';

import { createTransformer } from './utils';

const transformer = createTransformer('@atlaskit/toggle', [
  renameDefaultChecked,
  removeIsLoading,
  addTitle,
]);

export default transformer;

That way, you can easily test those migrates separately with all the possible scenario, and compose them freely as well to see if they can work together.