ant-design / codemod-v5 Goto Github PK

View Code? Open in Web Editor NEW

17.0 1.0 7.0 194 KB

codemod cli for antd v5 upgrade

License: MIT License

JavaScript 96.90% Less 0.77% TypeScript 2.33%

antd antd-design codemod ant-design-v5 jscodeshift postcss

codemod-v5's Introduction

Ant Design

An enterprise-class UI design language and React UI library.

Changelog · Report Bug · Request Feature · English · 中文

✨ Features

🌈 Enterprise-class UI designed for web applications.
📦 A set of high-quality React components out of the box.
🛡 Written in TypeScript with predictable static types.
⚙️ Whole package of design resources and development tools.
🌍 Internationalization support for dozens of languages.
🎨 Powerful theme customization based on CSS-in-JS.

🖥 Environment Support

Modern browsers
Server-side Rendering
Electron

Edge	Firefox	Chrome	Safari	Electron
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

📦 Install

npm install antd

yarn add antd

pnpm add antd

🔨 Usage

import { Button, DatePicker } from 'antd';

export default () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker placeholder="select date" />
  </>
);

🔗 Links

⌨️ Development

Use Gitpod, a free online dev environment for GitHub.

Or use opensumi.run, a free online pure front-end dev environment.

Or clone locally:

$ git clone [email protected]:ant-design/ant-design.git
$ cd ant-design
$ npm install
$ npm start

Open your browser and visit http://127.0.0.1:8001 , see more at Development.

🤝 Contributing

Let's build a better antd together.

We warmly invite contributions from everyone. Before you get started, please take a moment to review our Contributing Guide. Feel free to share your ideas through Pull Requests or GitHub Issues. If you're interested in enhancing our codebase, explore the Development Instructions and enjoy your coding journey! :)

For collaborators, adhere to our Pull Request Principle and utilize our Pull Request Template when creating a Pull Request.

❤️ Sponsors and Backers

codemod-v5's People

Contributors

Stargazers

Watchers

Forkers

linhf123 hmilin indomi thedigitaloctopus maksympohryb isabella232 dengfuping

codemod-v5's Issues

semver bug

~antd/es/style/themes/default.less not find

✖ Webpack
Compiled with some errors in 10.79s

ERROR Failed to compile with 1 errors 12:29:23

error in ./src/.umi/plugin-layout/layout/layout/style.less

Module build failed (from ./node_modules/@umijs/bundler-webpack/lib/webpack/plugins/mini-css-extract-plugin/src/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/@umijs/deps/compiled/less-loader/cjs.js):

@import '~antd/es/style/themes/default.less';
^
ENOENT: no such file or directory, open '/Users/admin/frontend/node_modules/antd/es/style/themes/default.less'
in /Users/admin/frontend/src/.umi/plugin-layout/layout/layout/style.less (line 1, column 0)
at /Users/admin/frontend/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:105544:20
at /Users/admin/frontend/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:47997:11
at /Users/admin/frontend/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:47863:18
at context.callback (/Users/admin/frontend/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:47741:13)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:95:5)

@ ./src/.umi/plugin-layout/layout/layout/index.tsx 12:0-22
@ ./src/.umi/plugin-layout/Layout.tsx
@ ./src/.umi/core/routes.ts
@ ./src/.umi/umi.ts
@ multi ./src/.umi/umi.ts

完全匹配导致问题

把非antd组件 props 匹配命名刚好命中而被替换了😫

usage examples

message.warn to message.warning

div上的className 也被转换成rootClassName了

理论上，只有Drawer中的className才应该被转换成rootClassName，结果发现，Drawer里面有children时，children中多有元素的className 都被转换成rootClassName了
<Drawer mask={false} destroyOnClose open={visible} onClose={() => { setVisible(false); }} closable={false} placement="bottom" getContainer={false} rootClassName={Style.Drawer} height={168} > <div rootClassName={Style.CloseWrap}> <div rootClassName={Style.CloseContainer}> <div rootClassName={Style.CloseMask}> <div tabIndex={0} role="button" onClick={() => { setVisible(false); }} onKeyDown={() => {}} rootClassName={Style.Close} > <div rootClassName={Style.Plus}>+</div> </div> </div> </div> </div> <div rootClassName={Style.Root}> {map(item => ( <File {...item} key={prop('type')(item)} onClick={() => { if (prop('canEdit')(item)) { push( /${getFeatureBy('link')(STAGING_CALCULATION)}/pay-approve/${prop('type')(
item,
)}/${currentPayApproveId}, ); } else { message.warning(请先完成${prop('preTableName')(item)}); } }} /> ))(fileList)} </div> </Drawer>

cannot handle @import (reference) '~antd/es/style/themes/index';

semver detect test bug

组件内div上的style也会被rename成rootStyle

beta version bug

提示用户已使用 antd 的 variables.less
提示用户导入 antd/dist/reset.css
#10 #11
处理 BackTop 从 FloatButton 导入 #7
移除 v3 -> v4 时，compatible 导入的 css import '@ant-design/compatible/assets/index.css'; #9
message.warn #25

npx -p @ant-design/codemod-v5 antd5-codemod client 报错，无法自动升级

Reproduction link

https://xxx/xxx.com

Steps to reproduce

[email protected] [email protected]，控制台执行npx -p @ant-design/codemod-v5 antd5-codemod client

What is expected?

项目自动升级至v5

What is actually happening?

npx: 240 安装成功，用时 452.573 秒
Transform v5-props-changed-migration
Processing 788 files...
Spawning 3 workers...
Sending 50 files to free worker...
Sending 50 files to free worker...
Sending 50 files to free worker...
/Users/beike/.npm/_npx/21543/lib/node_modules/@ant-design/codemod-v5/transforms/v5-props-changed-migration.js:203
if (nodePath.value?.value?.type === 'JSXExpressionContainer') {
^

SyntaxError: Unexpected token '.'
at wrapSafe (internal/modules/cjs/loader.js:915:16)
at Module._compile (internal/modules/cjs/loader.js:963:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at setup (/Users/beike/.npm/_npx/21543/lib/node_modules/@ant-design/codemod-v5/node_modules/jscodeshift/src/Worker.js:91:18)
at Object. (/Users/beike/.npm/_npx/21543/lib/node_modules/@ant-design/codemod-v5/no/Users/beike/.npm/_npx/21543/lib/node_modules/@ant-design/codemod-v5/transforms/v5-props-changed-migration.js:203
if (nodePath.value?.value?.type === 'JSXExpressionContainer') {
^

SyntaxError: Unexpected token '.'
at wrapSafe (internal/modules/cjs/loader.js:915:16)
at Module._compile (internal/modules/cjs/loader.js:963:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at setup (/Users/beike/.npm/_npx/21543/lib/node_modules/@ant-design/codemod-v5/node_modules/jscodeshift/src/Worker.js:91:18)
at Object. (/Users/beike/.npm/_npx/21543/lib/node_modules/@ant-design/codemod-v5/node_modules/jscodeshift/src/Worker.js:45:3)
at Module._compile (internal/modules/cjs/loader.js:999:30)
de_modules/jscodeshift/src/Worker.js:45:3)
at Module._compile (internal/modules/cjs/loader.js:999:30)
/Users/beike/.npm/_npx/21543/lib/node_modules/@ant-design/codemod-v5/transforms/v5-props-changed-migration.js:203
if (nodePath.value?.value?.type === 'JSXExpressionContainer') {

Environment	Info
antd	4.24.7
React	18.2.0
System	macOS Big Sur 版本11.6
Browser	未涉及