@commercetools-frontend/codemod

Codemod transformations for Custom Applications.

Usage

``bash
$ npx @commercetools-frontend/codemod@latest
`

We recommend to run prettier on the modified files to preserve the formatting configured on your project. For example, you can run prettier --write $(git diff --name-only).

> If you are using lint-staged there is a high chance that you already run prettier on the staged files. Therefore, you don't need to run it manually.

Transforms

$3

Remove deprecated level and baseZIndex props from modal page components.

`
$ npx @commercetools-frontend/codemod@latest remove-deprecated-modal-level-props 'src/*/.{js,jsx,ts,tsx}'
`

$3

Rename .js files using React JSX syntax to .jsx.

`
$ npx @commercetools-frontend/codemod@latest rename-js-to-jsx 'src/*/.js'
`

$3

Rename .mod.css files to .module.css and update imports.

`
$ npx @commercetools-frontend/codemod@latest rename-mod-css-to-module-css 'src/*/.{js,jsx,ts,tsx}'
`

$3

Remove code related to the old design when using the useTheme hook, for example the usage of themedValue.

`
$ npx @commercetools-frontend/codemod@latest redesign-cleanup 'src/*/.{jsx,tsx}'
`

$3

Migrates the way React Components defaultProps to use JavaScript default parameters instead. This is needed for React v18 or later.
Example:

`jsx
// BEFORE
function MyComponent(props) {
return (


• Prop 1: {props.prop1}


• Prop 2: {props.prop2}


• Prop 3: {props.prop3}

);
}
MyComponent.defaultProps = {
prop1: 'My default value',
};

// AFTER
function MyComponent({ prop1: 'My default value', ...props }) {
return (

• Prop 1: {prop1}


• Prop 2: {props.prop2}


• Prop 3: {props.prop3}

);
}
`

You can run this codemod by using the following command:

`
$ npx @commercetools-frontend/codemod@latest react-default-props-migration 'src/*/.{jsx,tsx}'
``