Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ant-design/codemod-v5
codemod cli for antd v5 upgrade
https://github.com/ant-design/codemod-v5
ant-design-v5 antd antd-design codemod jscodeshift postcss
Last synced: about 10 hours ago
JSON representation
codemod cli for antd v5 upgrade
- Host: GitHub
- URL: https://github.com/ant-design/codemod-v5
- Owner: ant-design
- License: mit
- Created: 2022-11-23T02:26:42.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-19T06:03:40.000Z (over 1 year ago)
- Last Synced: 2024-11-02T20:33:25.670Z (6 days ago)
- Topics: ant-design-v5, antd, antd-design, codemod, jscodeshift, postcss
- Language: JavaScript
- Homepage:
- Size: 189 KB
- Stars: 17
- Watchers: 1
- Forks: 7
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-codemods - codemod-v5 - Codemod cli for antd v5 upgrade. (Libraries / ant-design)
README
English | [简体中文](./README.zh-CN.md)
# Ant Design v5 Codemod
A collection of codemod scripts that help upgrade antd v5 using [jscodeshift](https://github.com/facebook/jscodeshift) and [postcss](https://github.com/postcss/postcss).(Inspired by [react-codemod](https://github.com/reactjs/react-codemod))
[](https://npmjs.org/package/@ant-design/codemod-v5) [](https://npmjs.org/package/@ant-design/codemod-v5) [](https://github.com/ant-design/codemod-v5/actions/workflows/test.yml)
## Usage
Before run codemod scripts, you'd better make sure to commit your local git changes firstly.
```shell
# Run directly through npx
npx -p @ant-design/codemod-v5 antd5-codemod src
# Or run directly through pnpm
pnpm --package=@ant-design/codemod-v5 dlx antd5-codemod src
```
## Codemod scripts introduction
#### `v5-removed-component-migration`
Replace import for removed component in v5.
- Change `Comment` import from `@ant-design/compatible`.
- Change `PageHeader` import from `@ant-design/pro-layout`.
- Use `BackTop` from `FloatButton.BackTop`.
```diff
- import { Avatar, BackTop, Comment, PageHeader } from 'antd';
+ import { Comment } from '@ant-design/compatible';
+ import { PageHeader } from '@ant-design/pro-layout';
+ import { Avatar, FloatButton } from 'antd';
ReactDOM.render( (
null}
title="Title"
subTitle="This is a subtitle"
/>
Han Solo}
avatar={}
content={
We supply a series of design principles, practical patterns and high quality design
resources (Sketch and Axure), to help people create their product prototypes beautifully
and efficiently.
}
datetime={
8 hours ago
}
/>
-
+
);
```
#### `v5-props-changed-migration`
Change props usage from v4 to v5.
```diff
import { Tag, Modal, Slider } from 'antd';
const App = () => {
const [visible, setVisible] = useState(false);
return (
<>
-
+ {visible ? : null}
-
+
>
);
};
```
#### `v5-removed-static-method-migration`
* Replace `message.warn` with `message.warning`.
* Replace `notification.close` with `notification.destroy`.
```diff
import { message, notification } from 'antd';
const App = () => {
const [messageApi, contextHolder] = message.useMessage();
const onClick1 = () => {
- message.warn();
+ message.warning();
}
const onClick2 = () => {
- messageApi.warn();
+ messageApi.warning();
};
const [notificationApi] = notification.useNotification();
const onClick3 = () => {
- notification.close();
+ notification.destroy();
}
const onClick4 = () => {
- notificationApi.close();
+ notificationApi.destroy();
};
return <>{contextHolder}>;
};
```
#### `v5-remove-style-import`
Comment out the style file import from antd (in js file).
```diff
- import 'antd/es/auto-complete/style';
- import 'antd/lib/button/style/index.less';
- import 'antd/dist/antd.compact.min.css';
+ // import 'antd/es/auto-complete/style';
+ // import 'antd/lib/button/style/index.less';
+ // import 'antd/dist/antd.compact.min.css';
```
#### `Remove Antd Less` in less file
Comment out the style file import from antd in less file.
```diff
- @import (reference) '~antd/dist/antd.less';
- @import '~antd/es/button/style/index.less';
+ /* @import (reference) '~antd/dist/antd.less'; */
+ /* @import '~antd/es/button/style/index.less'; */
@import './styles.less';
body {
font-size: 14px;
}
```
## Development
```bash
npm run release
npm publish
```
## License
MIT