Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ant-design/codemod-v4
codemod cli for antd v4 upgrade
https://github.com/ant-design/codemod-v4
antd antd4 cli codemod jscodeshift
Last synced: 11 days ago
JSON representation
codemod cli for antd v4 upgrade
- Host: GitHub
- URL: https://github.com/ant-design/codemod-v4
- Owner: ant-design
- License: mit
- Created: 2019-11-13T00:00:29.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-11-24T15:57:56.000Z (over 1 year ago)
- Last Synced: 2024-06-01T17:14:28.881Z (15 days ago)
- Topics: antd, antd4, cli, codemod, jscodeshift
- Language: JavaScript
- Homepage:
- Size: 161 KB
- Stars: 93
- Watchers: 21
- Forks: 25
- Open Issues: 54
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Lists
- awesome-codemods - codemod-v4 - Codemod cli for antd v4 upgrade. (Libraries / ant-design)
README
English | [简体中文](./README.zh-CN.md)
# Ant Design v4 Codemod
A collection of codemod scripts that help upgrade antd v4 using [jscodeshift](https://github.com/facebook/jscodeshift).(Inspired by [react-codemod](https://github.com/reactjs/react-codemod))
[](https://npmjs.org/package/@ant-design/codemod-v4)
[](https://npmjs.org/package/@ant-design/codemod-v4)
[](https://github.com/@ant-design/codemod-v4/actions/workflows/test.yml)
## Usage
Before run codemod scripts, you'd better make sure to commit your local git changes firstly.
```shell
# global installation
npm i -g @ant-design/codemod-v4
# or for yarn user
# yarn global add @ant-design/codemod-v4
antd4-codemod src
# use npx
npx -p @ant-design/codemod-v4 antd4-codemod src
```
## Codemod scripts introduction
#### `v3-Component-to-compatible`
Replace deprecated `Form` and `Mention` from `@ant-design/compatible`:
```diff
- import { Form, Input, Button, Mention } from 'antd';
+ import { Form, Mention } from '@ant-design/compatible';
+ import '@ant-design/compatible/assets/index.css';
+ import { Input, Button } from 'antd';
ReactDOM.render( (
{getFieldDecorator('username')()}
Submit
);
```
#### `v3-component-with-string-icon-props-to-v4`
Update component which contains string icon props with specific v4 Icon component from `@ant-design/icons`.
```diff
import { Avatar, Button, Result } from 'antd';
+ import { QuestionOutlined, UserOutlined } from '@ant-design/icons';
ReactDOM.render(
-
+
-
+
}
title="Great, we have done all the operations!"
extra={Next}
/>
,
mountNode,
);
```
#### `v3-Icon-to-v4-Icon`
Replace v3 Icon with specific v4 Icon component.
```diff
- import { Icon, Input } from 'antd';
+ import { Input } from 'antd';
+ import Icon, { CodeFilled, SmileOutlined, SmileTwoTone } from '@ant-design/icons';
const HeartSvg = () => (
);
const HeartIcon = props => ;
ReactDOM.render(
-
+
-
+
-
+
Cool Home
} />
,
mountNode,
);
```
#### `v3-LocaleProvider-to-v4-ConfigProvider`
Replace v3 LocaleProvider with v4 ConfigProvider component.
```diff
- import { LocaleProvider } from 'antd';
+ import { ConfigProvider } from 'antd';
ReactDOM.render(
-
+
-
+
mountNode,
);
```
#### `v3-Modal-method-with-icon-to-v4`
Update `Modal.method()` which contains string icon property with specific v4 Icon component.
```diff
import { Modal } from 'antd';
+ import { AntDesignOutlined } from '@ant-design/icons';
Modal.confirm({
- icon: 'ant-design',
+ icon: ,
title: 'Do you Want to delete these items?',
content: 'Some descriptions',
onOk() {
console.log('OK');
},
onCancel() {
console.log('Cancel');
},
});
```
## License
MIT