@ commercialtools- 前端/ codemod

自定义应用程序的代码化转换 .

使用量

$ npx @commercetools-frontend/codemod@latest <transform> <glob_pattern>

我们建议逃跑 prettier 在修改后的文件上保存您工程所配置的格式。 例如,你可以运行 prettier --write $(git diff --name-only)。 。 。 .

使用时 lint-staged 你已经跑的几率很高了 prettier 在舞台上的文件。 因此,你不需要手动操作它.

变换

remove-deprecated-modal-level-props

删除已贬值 level 财务报告和审定财务报表 baseZIndex 来自模式页面组件的道具.

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

rename-js-to-jsx

重命名 .js 使用 React JSX 语法的文件 .jsx。 。 。 .

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

rename-mod-css-to-module-css

重命名 .mod.css 文件为 .module.css 并更新进口.

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

redesign-cleanup

使用旧设计时删除相关的代码 useTheme 钩子,例如: themedValue。 。 。 .

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

react-default-props-migration

哀伤反应组件的方式 defaultProps 要使用 JavaScript 默认参数。 这对于反射V18或稍后需要. 示例

// BEFORE
function MyComponent(props) {
  return (
    <ul>
    <li>Prop 1: {props.prop1}</li>
    <li>Prop 2: {props.prop2}</li>
    <li>Prop 3: {props.prop3}</li>
  </ul>
  );
}
MyComponent.defaultProps = {
  prop1: 'My default value',
};

// AFTER
function MyComponent({ prop1: 'My default value', ...props }) {
  return (
    <ul>
    <li>Prop 1: {prop1}</li>
    <li>Prop 2: {props.prop2}</li>
    <li>Prop 3: {props.prop3}</li>
  </ul>
  );
}

您可以使用以下命令运行此编码器:

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