@oceanbase/codemod 0.2.8 → 0.2.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -4
- package/bin/cli.js +8 -4
- package/package.json +2 -2
- package/transforms/__testfixtures__/less-to-token/mixin.input.less +26 -0
- package/transforms/__testfixtures__/less-to-token/mixin.output.less +28 -0
- package/transforms/__testfixtures__/less-to-token/obui-less-token-to-token.input.less +8 -0
- package/transforms/__testfixtures__/less-to-token/obui-less-token-to-token.output.less +7 -0
- package/transforms/__testfixtures__/obui-to-oceanbase-design-and-ui/obui.input.js +2 -2
- package/transforms/__testfixtures__/obui-to-oceanbase-design-and-ui/obui.output.js +2 -2
- package/transforms/__tests__/less-to-token.test.ts +7 -1
- package/transforms/less-to-token.js +14 -20
- package/transforms/obui-to-oceanbase-design-and-ui.js +82 -2
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# OceanBase Codemod
|
|
2
2
|
|
|
3
|
-
A collection of codemod
|
|
3
|
+
A collection of codemod transformers that help migrate from `antd`, `@alipay/ob-ui`, `@alipay/tech-ui`, `@ant-design/pro-components` and `@ant-design/charts` to OceanBase Design System by using [jscodeshift](https://github.com/facebook/jscodeshift) and [postcss](https://github.com/postcss/postcss). (Inspired by [@ant-design/codemod-v5](https://github.com/ant-design/codemod-v5))
|
|
4
4
|
|
|
5
5
|
[](https://npmjs.org/package/@oceanbase/codemod) [](https://npmjs.org/package/@oceanbase/codemod) [](https://github.com/oceanbase/oceanbase-design/actions/workflows/ci.yml)
|
|
6
6
|
|
|
@@ -10,17 +10,24 @@ A collection of codemod scripts that help migrate from `antd`, `@alipay/ob-ui`,
|
|
|
10
10
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
13
|
-
Before run codemod
|
|
13
|
+
Before run codemod, you'd better make sure to commit your local git changes firstly.
|
|
14
14
|
|
|
15
15
|
```shell
|
|
16
16
|
# Run directly through npx
|
|
17
17
|
# `src` is the target directory or file that you want to transform.
|
|
18
18
|
npx -p @oceanbase/codemod codemod src
|
|
19
19
|
# options
|
|
20
|
-
# --
|
|
20
|
+
# --transformer=t1,t2 // run specify transformers
|
|
21
|
+
# --disablePrettier // disable prettier
|
|
21
22
|
```
|
|
22
23
|
|
|
23
|
-
|
|
24
|
+
Run specific transformers:
|
|
25
|
+
|
|
26
|
+
```shell
|
|
27
|
+
npx -p @oceanbase/codemod codemod src --transformer=style-to-token,less-to-token
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Codemod transformers introduction
|
|
24
31
|
|
|
25
32
|
### `antd-to-oceanbase-design`
|
|
26
33
|
|
package/bin/cli.js
CHANGED
|
@@ -101,7 +101,10 @@ function getRunnerArgs(transformerPath, parser = 'babylon', options = {}) {
|
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
async function run(filePath, args = {}) {
|
|
104
|
-
|
|
104
|
+
const targetTransformers =
|
|
105
|
+
args.transformer?.split(',')?.filter(transformer => transformers.includes(transformer)) ||
|
|
106
|
+
transformers;
|
|
107
|
+
for (const transformer of targetTransformers) {
|
|
105
108
|
await transform(transformer, 'babylon', filePath, args);
|
|
106
109
|
}
|
|
107
110
|
}
|
|
@@ -250,9 +253,10 @@ async function upgradeDetect(targetDir, needOBCharts, needObUtil) {
|
|
|
250
253
|
|
|
251
254
|
/**
|
|
252
255
|
* options
|
|
253
|
-
* --force
|
|
254
|
-
* --cpus=1
|
|
255
|
-
* --disablePrettier
|
|
256
|
+
* --force // force skip git checking (dangerously)
|
|
257
|
+
* --cpus=1 // specify cpus cores to use
|
|
258
|
+
* --disablePrettier // disable prettier
|
|
259
|
+
* --transformer=t1,t2 // specify target transformer
|
|
256
260
|
*/
|
|
257
261
|
|
|
258
262
|
async function bootstrap() {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oceanbase/codemod",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.10",
|
|
4
4
|
"description": "Codemod for OceanBase Design upgrade",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"oceanbase",
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"enzyme": "^3.11.0",
|
|
47
47
|
"enzyme-to-json": "^3.6.2"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "debd02b577d782f8a403fe0f6133efb172168898"
|
|
50
50
|
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
.mixin-1() {
|
|
2
|
+
color: #1890ff;
|
|
3
|
+
background: #52c41a;
|
|
4
|
+
background-color: #faad14;
|
|
5
|
+
border-color: #ff4d4f;
|
|
6
|
+
scrollbar-color: #ffffff;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.mixin-2 {
|
|
10
|
+
color: #1890ff;
|
|
11
|
+
background: #52c41a;
|
|
12
|
+
background-color: #faad14;
|
|
13
|
+
border-color: #ff4d4f;
|
|
14
|
+
scrollbar-color: #ffffff;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.container {
|
|
18
|
+
.mixin-1();
|
|
19
|
+
.mixin-2();
|
|
20
|
+
.content {
|
|
21
|
+
color: rgba(0, 0, 0, 0.85);
|
|
22
|
+
background: rgba(0, 0, 0,0.65);
|
|
23
|
+
background-color: rgba(0,0,0,0.45);
|
|
24
|
+
border: 1px solid #d9d9d9;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
@import '~@oceanbase/design/es/theme/index.less';
|
|
2
|
+
|
|
3
|
+
.mixin-1() {
|
|
4
|
+
color: @colorInfo;
|
|
5
|
+
background: @colorSuccess;
|
|
6
|
+
background-color: @colorWarning;
|
|
7
|
+
border-color: @colorError;
|
|
8
|
+
scrollbar-color: @colorBgContainer;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.mixin-2 {
|
|
12
|
+
color: @colorInfo;
|
|
13
|
+
background: @colorSuccess;
|
|
14
|
+
background-color: @colorWarning;
|
|
15
|
+
border-color: @colorError;
|
|
16
|
+
scrollbar-color: @colorBgContainer;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.container {
|
|
20
|
+
.mixin-1();
|
|
21
|
+
.mixin-2();
|
|
22
|
+
.content {
|
|
23
|
+
color: @colorText;
|
|
24
|
+
background: @colorTextSecondary;
|
|
25
|
+
background-color: @colorTextTertiary;
|
|
26
|
+
border: 1px solid @colorBorder;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Alert, Button, BackgroundTaskManager, BackgroundTaskManagerConstants, BasicLayout, Boundary, ConfigProvider, ContentWithQuestion, IconFont, Login, PageContainer, Ranger, theme, TreeSearch } from '@alipay/ob-ui';
|
|
3
|
-
import type { BackgroundTaskManagerRef, ITaskMgrPreset, ITaskMgrQueue, TaskMgrID } from '@alipay/ob-ui';
|
|
2
|
+
import { Alert, Button, BackgroundTaskManager, BackgroundTaskManagerConstants, BasicLayout, Boundary, ConfigProvider, ContentWithQuestion, IconFont, Login, ModalForm, PageContainer, ProTable, Ranger, theme, TreeSearch } from '@alipay/ob-ui';
|
|
3
|
+
import type { BackgroundTaskManagerRef, ITaskMgrPreset, ITaskMgrQueue, ModalFormProps, ProTableProps, TaskMgrID } from '@alipay/ob-ui';
|
|
4
4
|
import type { BasicLayoutProps } from '@alipay/ob-ui/es/BasicLayout';
|
|
5
5
|
import type { LoginProps } from '@alipay/ob-ui/es/Login';
|
|
6
6
|
import type { PageContainerProps } from '@alipay/ob-ui/es/PageContainer';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Alert, Button, ConfigProvider, theme } from '@oceanbase/design';
|
|
3
|
-
import { BackgroundTaskManager, BackgroundTaskManagerConstants, BasicLayout, Boundary, ContentWithQuestion, IconFont, Login, PageContainer, Ranger, TreeSearch } from '@oceanbase/ui';
|
|
4
|
-
import type { BackgroundTaskManagerRef, ITaskMgrPreset, ITaskMgrQueue, TaskMgrID } from '@oceanbase/ui';
|
|
3
|
+
import { BackgroundTaskManager, BackgroundTaskManagerConstants, BasicLayout, Boundary, ContentWithQuestion, IconFont, Login, ModalForm, PageContainer, ProTable, Ranger, TreeSearch } from '@oceanbase/ui';
|
|
4
|
+
import type { BackgroundTaskManagerRef, ITaskMgrPreset, ITaskMgrQueue, ModalFormProps, ProTableProps, TaskMgrID } from '@oceanbase/ui';
|
|
5
5
|
import type { BasicLayoutProps } from '@oceanbase/ui/es/BasicLayout';
|
|
6
6
|
import type { LoginProps } from '@oceanbase/ui/es/Login';
|
|
7
7
|
import type { PageContainerProps } from '@oceanbase/ui/es/PageContainer';
|
|
@@ -3,7 +3,13 @@ import path from 'path';
|
|
|
3
3
|
import { transform } from '../less-to-token';
|
|
4
4
|
|
|
5
5
|
const testUnit = 'less-to-token';
|
|
6
|
-
const tests = [
|
|
6
|
+
const tests = [
|
|
7
|
+
'antd-v4-less-to-token',
|
|
8
|
+
'obui-less-to-token',
|
|
9
|
+
'case-insensitive',
|
|
10
|
+
'mixin',
|
|
11
|
+
'obui-less-token-to-token',
|
|
12
|
+
];
|
|
7
13
|
|
|
8
14
|
describe(testUnit, () => {
|
|
9
15
|
tests.forEach(test => {
|
|
@@ -32,29 +32,23 @@ const findAllLessFiles = dir => {
|
|
|
32
32
|
return lessFiles;
|
|
33
33
|
};
|
|
34
34
|
|
|
35
|
-
/**
|
|
36
|
-
* 将 lesscode 转化为 ast
|
|
37
|
-
* @returns ASR
|
|
38
|
-
*/
|
|
39
|
-
const less2AST = code =>
|
|
40
|
-
postcss([])
|
|
41
|
-
.process(code, {
|
|
42
|
-
parser: postcssLess.parse,
|
|
43
|
-
from: undefined,
|
|
44
|
-
})
|
|
45
|
-
.then(result => result.root);
|
|
46
|
-
|
|
47
35
|
async function transform(file) {
|
|
48
36
|
const content = fs.readFileSync(file, 'utf-8');
|
|
49
|
-
const ast = await
|
|
50
|
-
|
|
37
|
+
const { root: ast } = await postcss([]).process(content, {
|
|
38
|
+
syntax: postcssLess,
|
|
39
|
+
});
|
|
40
|
+
let hasToken = false;
|
|
51
41
|
let tokenLessImported = false;
|
|
52
42
|
// 遍历 AST
|
|
53
43
|
ast.walk(node => {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
44
|
+
if (node.type === 'decl') {
|
|
45
|
+
const { key, token, formattedValue } = tokenParse(node.value);
|
|
46
|
+
if (token) {
|
|
47
|
+
node.value = formattedValue.replace(key, `@${token}`);
|
|
48
|
+
hasToken = true;
|
|
49
|
+
} else if (node.value?.includes('@')) {
|
|
50
|
+
hasToken = true;
|
|
51
|
+
}
|
|
58
52
|
} else if (node.type === 'atrule' && node.name === 'import') {
|
|
59
53
|
if (node.params === "'~@oceanbase/design/es/theme/index.less'") {
|
|
60
54
|
tokenLessImported = true;
|
|
@@ -64,13 +58,13 @@ async function transform(file) {
|
|
|
64
58
|
}
|
|
65
59
|
});
|
|
66
60
|
// prepend @import '~@oceanbase/design/es/theme/index.less';
|
|
67
|
-
if (
|
|
61
|
+
if (hasToken && !tokenLessImported) {
|
|
68
62
|
ast.prepend({
|
|
69
63
|
name: 'import',
|
|
70
64
|
params: "'~@oceanbase/design/es/theme/index.less'",
|
|
71
65
|
});
|
|
72
66
|
}
|
|
73
|
-
return ast.toString();
|
|
67
|
+
return ast.toString(postcssLess.stringify);
|
|
74
68
|
}
|
|
75
69
|
|
|
76
70
|
async function lessToToken(file) {
|
|
@@ -9,7 +9,6 @@ module.exports = (file, api, options) => {
|
|
|
9
9
|
{
|
|
10
10
|
name: '@oceanbase/ui',
|
|
11
11
|
components: [
|
|
12
|
-
'PageContainer',
|
|
13
12
|
'Action',
|
|
14
13
|
'BackgroundTaskManager',
|
|
15
14
|
'BackgroundTaskManagerConstants',
|
|
@@ -32,9 +31,49 @@ module.exports = (file, api, options) => {
|
|
|
32
31
|
'TaskGraph',
|
|
33
32
|
'TreeSearch',
|
|
34
33
|
'Welcome',
|
|
34
|
+
/* pro-components */
|
|
35
|
+
'PageContainer',
|
|
36
|
+
'ProLayout',
|
|
37
|
+
'ProCard',
|
|
38
|
+
'WaterMark',
|
|
39
|
+
'StatisticCard',
|
|
40
|
+
'CheckCard',
|
|
41
|
+
'ProFormText',
|
|
42
|
+
'ProFormDigit',
|
|
43
|
+
'ProFormTextArea',
|
|
44
|
+
'ProFormCaptcha',
|
|
45
|
+
'ProFormDatePicker',
|
|
46
|
+
'ProFormDateTimePicker',
|
|
47
|
+
'ProFormDateRangePicker',
|
|
48
|
+
'ProFormDateTimeRangePicker',
|
|
49
|
+
'ProFormSelect',
|
|
50
|
+
'ProFormTreeSelect',
|
|
51
|
+
'ProFormCheckbox',
|
|
52
|
+
'ProFormRadio',
|
|
53
|
+
'ProFormSlider',
|
|
54
|
+
'ProFormSwitch',
|
|
55
|
+
'ProFormUploadButton',
|
|
56
|
+
'ProFormUploadDragger',
|
|
57
|
+
'ProFormMoney',
|
|
58
|
+
'ProFormSegmented',
|
|
59
|
+
'ProFormList',
|
|
60
|
+
'BetaSchemaForm',
|
|
61
|
+
'QueryFilter',
|
|
62
|
+
'LightFilter',
|
|
63
|
+
'StepsForm',
|
|
64
|
+
'ModalForm',
|
|
65
|
+
'DrawerForm',
|
|
66
|
+
'LoginForm',
|
|
67
|
+
'LoginFormPage',
|
|
68
|
+
'ProTable',
|
|
69
|
+
'EditableProTable',
|
|
70
|
+
'DragSortTable',
|
|
71
|
+
'ProList',
|
|
72
|
+
'ProDescriptions',
|
|
73
|
+
'ProSkeleton',
|
|
74
|
+
'ProField',
|
|
35
75
|
],
|
|
36
76
|
types: [
|
|
37
|
-
'PageContainerProps',
|
|
38
77
|
'ActionProps',
|
|
39
78
|
// BackgroundTaskManager
|
|
40
79
|
'BackgroundTaskManagerProps',
|
|
@@ -66,6 +105,47 @@ module.exports = (file, api, options) => {
|
|
|
66
105
|
'TreeSearchRef',
|
|
67
106
|
'Node',
|
|
68
107
|
'WelcomeProps',
|
|
108
|
+
/* pro-components */
|
|
109
|
+
'PageContainerProps',
|
|
110
|
+
'ProLayoutProps',
|
|
111
|
+
'ProCardProps',
|
|
112
|
+
'WaterMarkProps',
|
|
113
|
+
'StatisticCardProps',
|
|
114
|
+
'CheckCardProps',
|
|
115
|
+
'ProFormTextProps',
|
|
116
|
+
'ProFormDigitProps',
|
|
117
|
+
'ProFormTextAreaProps',
|
|
118
|
+
'ProFormCaptchaProps',
|
|
119
|
+
'ProFormDatePickerProps',
|
|
120
|
+
'ProFormDateTimePickerProps',
|
|
121
|
+
'ProFormDateRangePickerProps',
|
|
122
|
+
'ProFormDateTimeRangePickerProps',
|
|
123
|
+
'ProFormSelectProps',
|
|
124
|
+
'ProFormTreeSelectProps',
|
|
125
|
+
'ProFormCheckboxProps',
|
|
126
|
+
'ProFormRadioProps',
|
|
127
|
+
'ProFormSliderProps',
|
|
128
|
+
'ProFormSwitchProps',
|
|
129
|
+
'ProFormUploadButtonProps',
|
|
130
|
+
'ProFormUploadDraggerProps',
|
|
131
|
+
'ProFormMoneyProps',
|
|
132
|
+
'ProFormSegmentedProps',
|
|
133
|
+
'ProFormListProps',
|
|
134
|
+
'BetaSchemaFormProps',
|
|
135
|
+
'QueryFilterProps',
|
|
136
|
+
'LightFilterProps',
|
|
137
|
+
'StepsFormProps',
|
|
138
|
+
'ModalFormProps',
|
|
139
|
+
'DrawerFormProps',
|
|
140
|
+
'LoginFormProps',
|
|
141
|
+
'LoginFormPageProps',
|
|
142
|
+
'ProTableProps',
|
|
143
|
+
'EditableProTableProps',
|
|
144
|
+
'DragSortTableProps',
|
|
145
|
+
'ProListProps',
|
|
146
|
+
'ProDescriptionsProps',
|
|
147
|
+
'ProSkeletonProps',
|
|
148
|
+
'ProFieldProps',
|
|
69
149
|
],
|
|
70
150
|
paths: ['/locale/', '/locale/'],
|
|
71
151
|
},
|