Han Solo}
38 | avatar={}
39 | content={
40 |
41 | We supply a series of design principles, practical patterns and high quality design
42 | resources (Sketch and Axure), to help people create their product prototypes beautifully
43 | and efficiently.
44 |
45 | }
46 | datetime={
47 |
48 | 8 hours ago
49 |
50 | }
51 | />
52 | null}
55 | title="Title"
56 | subTitle="This is a subtitle"
57 | />
58 |
59 |
60 | );
61 | };
62 |
63 | export default App;
64 |
--------------------------------------------------------------------------------
/transforms/__testfixtures__/v5-removed-component-migration/basic.input.js:
--------------------------------------------------------------------------------
1 | import { Comment, PageHeader, BackTop } from 'antd';
2 | import { DislikeFilled, DislikeOutlined, LikeFilled, LikeOutlined } from '@ant-design/icons';
3 | import React, { createElement, useState } from 'react';
4 | const App = () => {
5 | const [likes, setLikes] = useState(0);
6 | const [dislikes, setDislikes] = useState(0);
7 | const [action, setAction] = useState(null);
8 | const like = () => {
9 | setLikes(1);
10 | setDislikes(0);
11 | setAction('liked');
12 | };
13 | const dislike = () => {
14 | setLikes(0);
15 | setDislikes(1);
16 | setAction('disliked');
17 | };
18 | const actions = [
19 |
20 |
21 | {createElement(action === 'liked' ? LikeFilled : LikeOutlined)}
22 | {likes}
23 |
24 | ,
25 |
26 |
27 | {React.createElement(action === 'disliked' ? DislikeFilled : DislikeOutlined)}
28 | {dislikes}
29 |
30 | ,
31 | Reply to,
32 | ];
33 | return (
34 | <>
35 | Han Solo}
38 | avatar={}
39 | content={
40 |
41 | We supply a series of design principles, practical patterns and high quality design
42 | resources (Sketch and Axure), to help people create their product prototypes beautifully
43 | and efficiently.
44 |
45 | }
46 | datetime={
47 |
48 | 8 hours ago
49 |
50 | }
51 | />
52 | null}
55 | title="Title"
56 | subTitle="This is a subtitle"
57 | />
58 |
59 |
60 | );
61 | };
62 |
63 | export default App;
64 |
--------------------------------------------------------------------------------
/.github/workflows/ossar.yml:
--------------------------------------------------------------------------------
1 | # This workflow uses actions that are not certified by GitHub.
2 | # They are provided by a third-party and are governed by
3 | # separate terms of service, privacy policy, and support
4 | # documentation.
5 |
6 | # This workflow integrates a collection of open source static analysis tools
7 | # with GitHub code scanning. For documentation, or to provide feedback, visit
8 | # https://github.com/github/ossar-action
9 | name: OSSAR
10 |
11 | on:
12 | push:
13 | branches: [ "main" ]
14 | pull_request:
15 | # The branches below must be a subset of the branches above
16 | branches: [ "main" ]
17 | schedule:
18 | - cron: '24 4 * * 0'
19 |
20 | permissions:
21 | contents: read
22 |
23 | jobs:
24 | OSSAR-Scan:
25 | # OSSAR runs on windows-latest.
26 | # ubuntu-latest and macos-latest support coming soon
27 | permissions:
28 | contents: read # for actions/checkout to fetch code
29 | security-events: write # for github/codeql-action/upload-sarif to upload SARIF results
30 | actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status
31 | runs-on: windows-latest
32 |
33 | steps:
34 | - name: Checkout repository
35 | uses: actions/checkout@v3
36 |
37 | # Ensure a compatible version of dotnet is installed.
38 | # The [Microsoft Security Code Analysis CLI](https://aka.ms/mscadocs) is built with dotnet v3.1.201.
39 | # A version greater than or equal to v3.1.201 of dotnet must be installed on the agent in order to run this action.
40 | # GitHub hosted runners already have a compatible version of dotnet installed and this step may be skipped.
41 | # For self-hosted runners, ensure dotnet version 3.1.201 or later is installed by including this action:
42 | # - name: Install .NET
43 | # uses: actions/setup-dotnet@v2
44 | # with:
45 | # dotnet-version: '3.1.x'
46 |
47 | # Run open source static analysis tools
48 | - name: Run OSSAR
49 | uses: github/ossar-action@v1
50 | id: ossar
51 |
52 | # Upload results to the Security tab
53 | - name: Upload OSSAR results
54 | uses: github/codeql-action/upload-sarif@v2
55 | with:
56 | sarif_file: ${{ steps.ossar.outputs.sarifFile }}
57 |
--------------------------------------------------------------------------------
/transforms/__testfixtures__/v5-removed-component-migration/basic.output.js:
--------------------------------------------------------------------------------
1 | import { Comment } from '@ant-design/compatible';
2 | import { PageHeader } from '@ant-design/pro-layout';
3 | import { FloatButton } from 'antd';
4 | import { DislikeFilled, DislikeOutlined, LikeFilled, LikeOutlined } from '@ant-design/icons';
5 | import React, { createElement, useState } from 'react';
6 | const App = () => {
7 | const [likes, setLikes] = useState(0);
8 | const [dislikes, setDislikes] = useState(0);
9 | const [action, setAction] = useState(null);
10 | const like = () => {
11 | setLikes(1);
12 | setDislikes(0);
13 | setAction('liked');
14 | };
15 | const dislike = () => {
16 | setLikes(0);
17 | setDislikes(1);
18 | setAction('disliked');
19 | };
20 | const actions = [
21 |
22 |
23 | {createElement(action === 'liked' ? LikeFilled : LikeOutlined)}
24 | {likes}
25 |
26 | ,
27 |
28 |
29 | {React.createElement(action === 'disliked' ? DislikeFilled : DislikeOutlined)}
30 | {dislikes}
31 |
32 | ,
33 | Reply to,
34 | ];
35 | return (<>
36 | Han Solo}
39 | avatar={}
40 | content={
41 |
42 | We supply a series of design principles, practical patterns and high quality design
43 | resources (Sketch and Axure), to help people create their product prototypes beautifully
44 | and efficiently.
45 |
46 | }
47 | datetime={
48 |
49 | 8 hours ago
50 |
51 | }
52 | />
53 | null}
56 | title="Title"
57 | subTitle="This is a subtitle"
58 | />
59 |
60 | );
61 | };
62 |
63 | export default App;
64 |
--------------------------------------------------------------------------------
/transforms/__testfixtures__/v5-removed-component-migration/alias-import.input.js:
--------------------------------------------------------------------------------
1 | import { Comment as AntdComment, Avatar, Tooltip, PageHeader, BackTop as Back } from 'antd';
2 | import { DislikeFilled, DislikeOutlined, LikeFilled, LikeOutlined } from '@ant-design/icons';
3 | import React, { createElement, useState } from 'react';
4 | const App = () => {
5 | const [likes, setLikes] = useState(0);
6 | const [dislikes, setDislikes] = useState(0);
7 | const [action, setAction] = useState(null);
8 | const like = () => {
9 | setLikes(1);
10 | setDislikes(0);
11 | setAction('liked');
12 | };
13 | const dislike = () => {
14 | setLikes(0);
15 | setDislikes(1);
16 | setAction('disliked');
17 | };
18 | const actions = [
19 |
20 |
21 | {createElement(action === 'liked' ? LikeFilled : LikeOutlined)}
22 | {likes}
23 |
24 | ,
25 |
26 |
27 | {React.createElement(action === 'disliked' ? DislikeFilled : DislikeOutlined)}
28 | {dislikes}
29 |
30 | ,
31 | Reply to,
32 | ];
33 | return (
34 | <>
35 | Han Solo}
38 | avatar={}
39 | content={
40 |
41 | We supply a series of design principles, practical patterns and high quality design
42 | resources (Sketch and Axure), to help people create their product prototypes beautifully
43 | and efficiently.
44 |
45 | }
46 | datetime={
47 |
48 | 8 hours ago
49 |
50 | }
51 | />
52 | null}
55 | title="Title"
56 | subTitle="This is a subtitle"
57 | />
58 |
59 |
60 | );
61 | };
62 |
63 | export default App;
64 |
--------------------------------------------------------------------------------
/transforms/__testfixtures__/v5-removed-component-migration/empty.output.js:
--------------------------------------------------------------------------------
1 | import { Comment } from '@ant-design/compatible';
2 | import { PageHeader } from '@ant-design/pro-layout';
3 | import { DislikeFilled, DislikeOutlined, LikeFilled, LikeOutlined } from '@ant-design/icons';
4 | import React, { createElement, useState } from 'react';
5 | const App = () => {
6 | const [likes, setLikes] = useState(0);
7 | const [dislikes, setDislikes] = useState(0);
8 | const [action, setAction] = useState(null);
9 | const like = () => {
10 | setLikes(1);
11 | setDislikes(0);
12 | setAction('liked');
13 | };
14 | const dislike = () => {
15 | setLikes(0);
16 | setDislikes(1);
17 | setAction('disliked');
18 | };
19 | const actions = [
20 |
21 |
22 | {createElement(action === 'liked' ? LikeFilled : LikeOutlined)}
23 | {likes}
24 |
25 | ,
26 |
27 |
28 | {React.createElement(action === 'disliked' ? DislikeFilled : DislikeOutlined)}
29 | {dislikes}
30 |
31 | ,
32 | Reply to,
33 | ];
34 | return (
35 | <>
36 | Han Solo}
39 | avatar={}
40 | content={
41 |
42 | We supply a series of design principles, practical patterns and high quality design
43 | resources (Sketch and Axure), to help people create their product prototypes beautifully
44 | and efficiently.
45 |
46 | }
47 | datetime={
48 |
49 | 8 hours ago
50 |
51 | }
52 | />
53 | null}
56 | title="Title"
57 | subTitle="This is a subtitle"
58 | />
59 |
60 |
61 | );
62 | };
63 |
64 | export default App;
65 |
--------------------------------------------------------------------------------
/transforms/__testfixtures__/v5-removed-component-migration/alias-import.output.js:
--------------------------------------------------------------------------------
1 | import { Comment as AntdComment } from '@ant-design/compatible';
2 | import { PageHeader } from '@ant-design/pro-layout';
3 | import { Avatar, FloatButton, Tooltip } from 'antd';
4 | import { DislikeFilled, DislikeOutlined, LikeFilled, LikeOutlined } from '@ant-design/icons';
5 | import React, { createElement, useState } from 'react';
6 | const App = () => {
7 | const [likes, setLikes] = useState(0);
8 | const [dislikes, setDislikes] = useState(0);
9 | const [action, setAction] = useState(null);
10 | const like = () => {
11 | setLikes(1);
12 | setDislikes(0);
13 | setAction('liked');
14 | };
15 | const dislike = () => {
16 | setLikes(0);
17 | setDislikes(1);
18 | setAction('disliked');
19 | };
20 | const actions = [
21 |
22 |
23 | {createElement(action === 'liked' ? LikeFilled : LikeOutlined)}
24 | {likes}
25 |
26 | ,
27 |
28 |
29 | {React.createElement(action === 'disliked' ? DislikeFilled : DislikeOutlined)}
30 | {dislikes}
31 |
32 | ,
33 | Reply to,
34 | ];
35 | return (<>
36 | Han Solo}
39 | avatar={}
40 | content={
41 |
42 | We supply a series of design principles, practical patterns and high quality design
43 | resources (Sketch and Axure), to help people create their product prototypes beautifully
44 | and efficiently.
45 |
46 | }
47 | datetime={
48 |
49 | 8 hours ago
50 |
51 | }
52 | />
53 | null}
56 | title="Title"
57 | subTitle="This is a subtitle"
58 | />
59 |
60 | );
61 | };
62 |
63 | export default App;
64 |
--------------------------------------------------------------------------------
/transforms/v5-removed-component-migration.js:
--------------------------------------------------------------------------------
1 | const {
2 | addSubmoduleImport,
3 | removeEmptyModuleImport,
4 | parseStrToArray,
5 | } = require('./utils');
6 | const { printOptions } = require('./utils/config');
7 | const { markDependency } = require('./utils/marker');
8 |
9 | const removedComponentConfig = {
10 | Comment: {
11 | importSource: '@ant-design/compatible',
12 | },
13 | PageHeader: {
14 | importSource: '@ant-design/pro-layout',
15 | },
16 | BackTop: {
17 | importSource: 'antd',
18 | rename: 'FloatButton.BackTop',
19 | },
20 | };
21 |
22 | module.exports = (file, api, options) => {
23 | const j = api.jscodeshift;
24 | const root = j(file.source);
25 | const antdPkgNames = parseStrToArray(options.antdPkgNames || 'antd');
26 |
27 | // import { Comment } from '@ant-design/compatible'
28 | // import { PageHeader } from '@ant-design/pro-components'
29 | function importDeprecatedComponent(j, root) {
30 | let hasChanged = false;
31 |
32 | // import { Comment, PageHeader } from 'antd';
33 | // import { Comment, PageHeader } from '@forked/antd';
34 | const componentNameList = Object.keys(removedComponentConfig);
35 |
36 | root
37 | .find(j.Identifier)
38 | .filter(
39 | path =>
40 | componentNameList.includes(path.node.name) &&
41 | path.parent.node.type === 'ImportSpecifier' &&
42 | antdPkgNames.includes(path.parent.parent.node.source.value),
43 | )
44 | .forEach(path => {
45 | hasChanged = true;
46 | const importedComponentName = path.parent.node.imported.name;
47 | const antdPkgName = path.parent.parent.node.source.value;
48 |
49 | // remove old imports
50 | const importDeclaration = path.parent.parent.node;
51 | importDeclaration.specifiers = importDeclaration.specifiers.filter(
52 | specifier =>
53 | !specifier.imported ||
54 | specifier.imported.name !== importedComponentName,
55 | );
56 |
57 | // add new import from '@ant-design/compatible'
58 | const localComponentName = path.parent.node.local.name;
59 | const importConfig = removedComponentConfig[importedComponentName];
60 | if (importConfig.rename) {
61 | if (importConfig.rename.includes('.')) {
62 | // `FloatButton.BackTop`
63 | const [
64 | newComponentName,
65 | compoundComponentName,
66 | ] = importConfig.rename.split('.');
67 | // import part
68 | const importedLocalName = addSubmoduleImport(j, root, {
69 | moduleName: importConfig.importSource,
70 | importedName: newComponentName,
71 | before: antdPkgName,
72 | });
73 | // rename part
74 | root
75 | .find(j.JSXElement, {
76 | openingElement: {
77 | name: { name: localComponentName },
78 | },
79 | })
80 | .forEach(path => {
81 | path.node.openingElement.name = j.jsxMemberExpression(
82 | j.jsxIdentifier(importedLocalName),
83 | j.jsxIdentifier(compoundComponentName),
84 | );
85 | });
86 | }
87 | } else {
88 | addSubmoduleImport(j, root, {
89 | moduleName: importConfig.importSource,
90 | importedName: importedComponentName,
91 | localName: localComponentName,
92 | before: antdPkgName,
93 | });
94 | markDependency(importConfig.importSource);
95 | }
96 | });
97 |
98 | return hasChanged;
99 | }
100 |
101 | // step1. import deprecated components from '@ant-design/compatible'
102 | // step2. cleanup antd import if empty
103 | let hasChanged = false;
104 | hasChanged = importDeprecatedComponent(j, root) || hasChanged;
105 |
106 | if (hasChanged) {
107 | antdPkgNames.forEach(antdPkgName => {
108 | removeEmptyModuleImport(j, root, antdPkgName);
109 | });
110 | }
111 |
112 | return hasChanged
113 | ? root.toSource(options.printOptions || printOptions)
114 | : null;
115 | };
116 |
--------------------------------------------------------------------------------
/README.zh-CN.md:
--------------------------------------------------------------------------------
1 | [English](./README.md) | 简体中文
2 |
3 | # Ant Design 5 Codemod
4 |
5 | 一组帮助你升级到 antd 5 的 codemod 脚本集合，基于 [jscodeshift](https://github.com/facebook/jscodeshift) 和 and [postcss](https://github.com/postcss/postcss) 构建。(受 [react-codemod](https://github.com/reactjs/react-codemod) 启发)
6 |
7 | [](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)
8 |
9 | ## 使用
10 |
11 | 在运行 codemod 脚本前，请先提交你的本地代码修改。
12 |
13 | ```shell
14 | # 使用 npx 直接运行
15 | npx -p @ant-design/codemod-v5 antd5-codemod src
16 | # 或者使用 pnpm 直接运行
17 | pnpm --package=@ant-design/codemod-v5 dlx antd5-codemod src
18 | ```
19 |
20 | ## Codemod 脚本包括:
21 |
22 | #### `v5-removed-component-migration`
23 |
24 | Replace import for removed component in v5.
25 |
26 | - 将 `Comment` 改为从 `@ant-design/compatible` import.
27 | - 将 `PageHeader` 改为从 `@ant-design/pro-layout` import.
28 | - 从 `FloatButton.BackTop` 组件中导入并使用 `BackTop`.
29 |
30 | ```diff
31 | - import { Avatar, BackTop, Comment, PageHeader } from 'antd';
32 | + import { Comment } from '@ant-design/compatible';
33 | + import { PageHeader } from '@ant-design/pro-layout';
34 | + import { Avatar, FloatButton } from 'antd';
35 |
36 | ReactDOM.render( (
37 |
38 |
null}
41 | title="Title"
42 | subTitle="This is a subtitle"
43 | />
44 | Han Solo}
47 | avatar={}
48 | content={
49 |
50 | We supply a series of design principles, practical patterns and high quality design
51 | resources (Sketch and Axure), to help people create their product prototypes beautifully
52 | and efficiently.
53 |
54 | }
55 | datetime={
56 | 8 hours ago
57 | }
58 | />
59 | -
60 | +
61 |
39 |
null}
42 | title="Title"
43 | subTitle="This is a subtitle"
44 | />
45 | Han Solo}
48 | avatar={}
49 | content={
50 |
51 | We supply a series of design principles, practical patterns and high quality design
52 | resources (Sketch and Axure), to help people create their product prototypes beautifully
53 | and efficiently.
54 |
55 | }
56 | datetime={
57 | 8 hours ago
58 | }
59 | />
60 | -
61 | +
62 |
235 | // return ();
236 | // <- transform to ->
237 | // <>{vi && }
238 | // {vi && }
239 | // return (vi && )
240 |
241 | if (conditionalExpression) {
242 | // vi(JSXIdentifier) -> `<`(JSXOpeningElement) -> (JSXElement)
243 | // -> `<>`(JSXFragment) | ``(JSXElement)
244 | if (
245 | ['JSXElement', 'JSXFragment'].includes(
246 | nodePath.parent.parent.parent.node.type,
247 | )
248 | ) {
249 | const index = nodePath.parent.parent.parent.node.children.findIndex(
250 | n => n === nodePath.parent.parent.node,
251 | );
252 | if (index > -1) {
253 | nodePath.parent.parent.parent.node.children.splice(
254 | index,
255 | 1,
256 | // add `{}`
257 | j.jsxExpressionContainer(conditionalExpression),
258 | );
259 | }
260 | } else if (
261 | ['ReturnStatement'].includes(
262 | nodePath.parent.parent.parent.node.type,
263 | )
264 | ) {
265 | nodePath.parent.parent.parent.node.argument = conditionalExpression;
266 | }
267 | }
268 |
269 | // 将 jsx element 转为一个条件表达式，并使用小括号包住
270 | // 最后再检查是不是有一个大的 {} JSXExpressionContainer 包住
271 | }
272 | });
273 | });
274 |
275 | return hasChanged;
276 | }
277 |
278 | // import deprecated components from '@ant-design/compatible'
279 | function handlePropsChanged(j, root) {
280 | let hasChanged = false;
281 |
282 | // import { Tag, Mention } from 'antd';
283 | // import { Form, Mention } from '@forked/antd';
284 | root
285 | .find(j.Identifier)
286 | .filter(
287 | path =>
288 | componentTuple.map(n => n[0]).includes(path.node.name) &&
289 | path.parent.node.type === 'ImportSpecifier' &&
290 | antdPkgNames.includes(path.parent.parent.node.source.value),
291 | )
292 | .forEach(path => {
293 | // import { Tag } from 'antd'
294 | // import { Tag as Tag1 } from 'antd'
295 | const importedComponentName = path.parent.node.imported.name;
296 | const localComponentName = path.parent.node.local.name;
297 |
298 | const componentConfig = changedComponentPropsMap[importedComponentName];
299 |
300 | const nonCompoundComponent = root.findJSXElements(localComponentName);
301 | // 处理非 compound component 部分
302 | if (handlePropsTransform(nonCompoundComponent, componentConfig)) {
303 | hasChanged = true;
304 | }
305 |
306 | // 处理 compound component 部分
307 | const compoundComponentTuple = componentTuple.find(
308 | n => n[0] === importedComponentName && n[1],
309 | );
310 | const [, compoundComponentName] = compoundComponentTuple || [];
311 | if (compoundComponentName) {
312 | //
313 | // JSXMemberExpression
314 | const compoundComponent = root.find(j.JSXElement, {
315 | openingElement: {
316 | name: {
317 | type: 'JSXMemberExpression',
318 | object: {
319 | type: 'JSXIdentifier',
320 | name: localComponentName,
321 | },
322 | property: {
323 | type: 'JSXIdentifier',
324 | name: compoundComponentName,
325 | },
326 | },
327 | },
328 | });
329 | if (handlePropsTransform(compoundComponent, componentConfig)) {
330 | hasChanged = true;
331 | }
332 |
333 | // const { RangePicker } = DatePicker;
334 | root
335 | .find(j.VariableDeclarator, {
336 | init: {
337 | type: 'Identifier',
338 | name: localComponentName,
339 | },
340 | })
341 | .forEach(path => {
342 | const localComponentNames = path.node.id.properties
343 | .filter(n => n.key.name === compoundComponentName)
344 | // 优先处理解构场景
345 | // key.name: `const { RangePicker } = DatePicker;`
346 | // value.name: `const { RangePicker: RP1 } = DatePicker;`
347 | .map(n => n.value?.name || n.key.name);
348 | localComponentNames.forEach(compoundComponentName => {
349 | // 处理反复 reassign 的场景
350 | const localAssignedNames = findAllAssignedNames(
351 | root, j,
352 | compoundComponentName,
353 | [compoundComponentName],
354 | );
355 |
356 | localAssignedNames.forEach(componentName => {
357 | const compoundComponent = root.findJSXElements(componentName);
358 | if (handlePropsTransform(compoundComponent, componentConfig)) {
359 | hasChanged = true;
360 | }
361 | });
362 | });
363 | });
364 |
365 | // const RangerPicker1 = DatePicker.RangePicker;
366 | // const RangerPicker2 = RangerPicker1;
367 | root
368 | .find(j.VariableDeclarator, {
369 | init: {
370 | type: 'MemberExpression',
371 | object: {
372 | type: 'Identifier',
373 | name: localComponentName,
374 | },
375 | property: {
376 | type: 'Identifier',
377 | name: compoundComponentName,
378 | },
379 | },
380 | })
381 | .forEach(path => {
382 | const localAssignedName = path.node.id.name;
383 |
384 | // 处理反复 reassign 的场景
385 | const localAssignedNames = findAllAssignedNames(
386 | root, j,
387 | localAssignedName,
388 | [localAssignedName],
389 | );
390 |
391 | localAssignedNames.forEach(componentName => {
392 | const compoundComponent = root.findJSXElements(componentName);
393 | if (handlePropsTransform(compoundComponent, componentConfig)) {
394 | hasChanged = true;
395 | }
396 | });
397 | });
398 | }
399 | });
400 |
401 | return hasChanged;
402 | }
403 |
404 | // step1. import deprecated components from '@ant-design/compatible'
405 | // step2. cleanup antd import if empty
406 | let hasChanged = false;
407 | hasChanged = handlePropsChanged(j, root) || hasChanged;
408 |
409 | return hasChanged
410 | ? root.toSource(options.printOptions || printOptions)
411 | : null;
412 | };
413 |
--------------------------------------------------------------------------------