@mui/x-codemod 8.0.0-alpha.2 → 8.0.0-alpha.3
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
CHANGED
|
@@ -66,23 +66,29 @@ A combination of all important transformers for migrating v7 to v8.
|
|
|
66
66
|
It runs codemods for all MUI X packages (Data Grid, Date and Time Pickers, Tree View, and Charts).
|
|
67
67
|
To run codemods for a specific package, refer to the respective section.
|
|
68
68
|
|
|
69
|
+
<!-- #default-branch-switch -->
|
|
70
|
+
|
|
69
71
|
```bash
|
|
70
|
-
npx @mui/x-codemod@
|
|
72
|
+
npx @mui/x-codemod@next v8.0.0/preset-safe <path|folder>
|
|
71
73
|
```
|
|
72
74
|
|
|
73
75
|
The corresponding sub-sections are listed below
|
|
74
76
|
|
|
75
77
|
- [`preset-safe-for-tree-view`](#preset-safe-for-tree-view-v800)
|
|
76
78
|
- [`preset-safe-for-charts`](#preset-safe-for-charts-v800)
|
|
79
|
+
- [`preset-safe-for-data-grid`](#preset-safe-for-data-grid-v800)
|
|
80
|
+
- [`preset-safe-for-pickers`](#preset-safe-for-pickers-v800)
|
|
77
81
|
|
|
78
82
|
### Tree View codemods
|
|
79
83
|
|
|
80
|
-
#### `preset-safe` for
|
|
84
|
+
#### `preset-safe` for Tree View v8.0.0
|
|
81
85
|
|
|
82
|
-
The `preset-safe` codemods for
|
|
86
|
+
The `preset-safe` codemods for Tree View.
|
|
87
|
+
|
|
88
|
+
<!-- #default-branch-switch -->
|
|
83
89
|
|
|
84
90
|
```bash
|
|
85
|
-
npx @mui/x-codemod@
|
|
91
|
+
npx @mui/x-codemod@next v8.0.0/tree-view/preset-safe <path|folder>
|
|
86
92
|
```
|
|
87
93
|
|
|
88
94
|
The list includes these transformers
|
|
@@ -101,13 +107,13 @@ Renames the Tree View component to Simple Tree View
|
|
|
101
107
|
-import { TreeView } from '@mui/x-tree-view/TreeView';
|
|
102
108
|
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
|
|
103
109
|
|
|
104
|
-
|
|
105
|
-
-
|
|
106
|
-
+
|
|
107
|
-
|
|
108
|
-
-
|
|
109
|
-
+
|
|
110
|
-
|
|
110
|
+
return (
|
|
111
|
+
- <TreeView>
|
|
112
|
+
+ <SimpleTreeView>
|
|
113
|
+
<TreeItem itemId="1" label="First item" />
|
|
114
|
+
- </TreeView>
|
|
115
|
+
+ </SimpleTreeView>
|
|
116
|
+
);
|
|
111
117
|
```
|
|
112
118
|
|
|
113
119
|
#### `rename-tree-item-2`
|
|
@@ -124,12 +130,14 @@ Renames the `TreeItem2` component to `TreeItem` (same for any subcomponents or u
|
|
|
124
130
|
|
|
125
131
|
### Charts codemods
|
|
126
132
|
|
|
127
|
-
#### `preset-safe` for
|
|
133
|
+
#### `preset-safe` for Charts v8.0.0
|
|
134
|
+
|
|
135
|
+
The `preset-safe` codemods for Charts.
|
|
128
136
|
|
|
129
|
-
|
|
137
|
+
<!-- #default-branch-switch -->
|
|
130
138
|
|
|
131
139
|
```bash
|
|
132
|
-
npx @mui/x-codemod@
|
|
140
|
+
npx @mui/x-codemod@next v8.0.0/charts/preset-safe <path|folder>
|
|
133
141
|
```
|
|
134
142
|
|
|
135
143
|
The list includes these transformers
|
|
@@ -143,10 +151,10 @@ The list includes these transformers
|
|
|
143
151
|
Renames legend props to the corresponding slotProps.
|
|
144
152
|
|
|
145
153
|
```diff
|
|
146
|
-
|
|
147
|
-
-
|
|
148
|
-
+
|
|
149
|
-
|
|
154
|
+
<LineChart
|
|
155
|
+
- legend={{ hiden: true}}
|
|
156
|
+
+ slotProps={{ legend: { hiden: true} }}
|
|
157
|
+
/>
|
|
150
158
|
```
|
|
151
159
|
|
|
152
160
|
#### `rename-responsive-chart-container`
|
|
@@ -154,14 +162,14 @@ Renames legend props to the corresponding slotProps.
|
|
|
154
162
|
Renames `ResponsiveChartContainer` and `ResponsiveChartContainerPro` by `ChartContainer` and `ChartContainerPro` which have the same behavior in v8.
|
|
155
163
|
|
|
156
164
|
```diff
|
|
157
|
-
-
|
|
158
|
-
+
|
|
165
|
+
-import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
|
|
166
|
+
+import { ChartContainer } from '@mui/x-charts/ChartContainer';
|
|
159
167
|
|
|
160
|
-
|
|
161
|
-
|
|
168
|
+
-<ResponsiveChartContainer>
|
|
169
|
+
+<ChartContainer>
|
|
162
170
|
<BarPlot />
|
|
163
|
-
|
|
164
|
-
|
|
171
|
+
-</ResponsiveChartContainer>
|
|
172
|
+
+</ChartContainer>
|
|
165
173
|
```
|
|
166
174
|
|
|
167
175
|
:::warning
|
|
@@ -170,8 +178,8 @@ Verify the git diff to remove the duplicate.
|
|
|
170
178
|
|
|
171
179
|
```diff
|
|
172
180
|
import { ChartContainer } from '@mui/x-charts/ChartContainer';
|
|
173
|
-
-
|
|
174
|
-
+
|
|
181
|
+
-import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
|
|
182
|
+
+import { ChartContainer } from '@mui/x-charts/ChartContainer';
|
|
175
183
|
```
|
|
176
184
|
|
|
177
185
|
:::
|
|
@@ -181,16 +189,88 @@ Verify the git diff to remove the duplicate.
|
|
|
181
189
|
Renames `labelFontSize` and `tickFontSize` props to the corresponding `xxxStyle` prop.
|
|
182
190
|
|
|
183
191
|
```diff
|
|
184
|
-
|
|
185
|
-
-
|
|
186
|
-
+
|
|
187
|
-
+
|
|
188
|
-
+
|
|
189
|
-
-
|
|
190
|
-
+
|
|
191
|
-
+
|
|
192
|
-
+
|
|
193
|
-
|
|
192
|
+
<ChartsXAxis
|
|
193
|
+
- labelFontSize={18}
|
|
194
|
+
+ labelStyle={{
|
|
195
|
+
+ fontSize: 18
|
|
196
|
+
+ }}
|
|
197
|
+
- tickFontSize={20}
|
|
198
|
+
+ tickStyle={{
|
|
199
|
+
+ fontSize: 20
|
|
200
|
+
+ }}
|
|
201
|
+
/>
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
### Data Grid codemods
|
|
205
|
+
|
|
206
|
+
#### `preset-safe` for Data Grid v8.0.0
|
|
207
|
+
|
|
208
|
+
The `preset-safe` codemods for Data Grid.
|
|
209
|
+
|
|
210
|
+
<!-- #default-branch-switch -->
|
|
211
|
+
|
|
212
|
+
```bash
|
|
213
|
+
npx @mui/x-codemod@next v8.0.0/data-grid/preset-safe <path|folder>
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
The list includes these transformers
|
|
217
|
+
|
|
218
|
+
- [`remove-stabilized-v8-experimentalFeatures`](#remove-stabilized-v8-experimentalFeatures)
|
|
219
|
+
|
|
220
|
+
#### `remove-stabilized-v8-experimentalFeatures`
|
|
221
|
+
|
|
222
|
+
Remove feature flags for stabilized `experimentalFeatures`.
|
|
223
|
+
|
|
224
|
+
```diff
|
|
225
|
+
<DataGridPremium
|
|
226
|
+
- experimentalFeatures={{
|
|
227
|
+
- ariaV8: true,
|
|
228
|
+
- }}
|
|
229
|
+
/>
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
<!-- #default-branch-switch -->
|
|
233
|
+
|
|
234
|
+
```bash
|
|
235
|
+
npx @mui/x-codemod@next v8.0.0/data-grid/remove-stabilized-experimentalFeatures <path>
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
### Pickers codemods
|
|
239
|
+
|
|
240
|
+
#### `preset-safe` for Pickers v8.0.0
|
|
241
|
+
|
|
242
|
+
The `preset-safe` codemods for Pickers.
|
|
243
|
+
|
|
244
|
+
<!-- #default-branch-switch -->
|
|
245
|
+
|
|
246
|
+
```bash
|
|
247
|
+
npx @mui/x-codemod@next v8.0.0/pickers/preset-safe <path|folder>
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
The list includes these transformers
|
|
251
|
+
|
|
252
|
+
- [`rename-and-move-field-value-type`](#rename-and-move-field-value-type)
|
|
253
|
+
|
|
254
|
+
#### `rename-and-move-field-value-type`
|
|
255
|
+
|
|
256
|
+
Renames `FieldValueType` to `PickerValueType`.
|
|
257
|
+
|
|
258
|
+
```diff
|
|
259
|
+
-import { FieldValueType } from '@mui/x-date-pickers';
|
|
260
|
+
+import { PickerValueType } from '@mui/x-date-pickers';
|
|
261
|
+
|
|
262
|
+
interface MyComponentProps {
|
|
263
|
+
- valueType: FieldValueType;
|
|
264
|
+
+ valueType: PickerValueType;
|
|
265
|
+
foo: string;
|
|
266
|
+
bar: number;
|
|
267
|
+
}
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
<!-- #default-branch-switch -->
|
|
271
|
+
|
|
272
|
+
```bash
|
|
273
|
+
npx @mui/x-codemod@next v8.0.0/pickers/rename-and-move-field-value-type <path>
|
|
194
274
|
```
|
|
195
275
|
|
|
196
276
|
## v7.0.0
|
|
@@ -214,9 +294,9 @@ The corresponding sub-sections are listed below
|
|
|
214
294
|
|
|
215
295
|
### Pickers codemods
|
|
216
296
|
|
|
217
|
-
#### `preset-safe` for
|
|
297
|
+
#### `preset-safe` for Pickers v7.0.0
|
|
218
298
|
|
|
219
|
-
The `preset-safe` codemods for
|
|
299
|
+
The `preset-safe` codemods for Pickers.
|
|
220
300
|
|
|
221
301
|
```bash
|
|
222
302
|
npx @mui/x-codemod@latest v7.0.0/pickers/preset-safe <path|folder>
|
|
@@ -393,13 +473,13 @@ Renames the Tree View component to Simple Tree View
|
|
|
393
473
|
-import { TreeView } from '@mui/x-tree-view/TreeView';
|
|
394
474
|
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
|
|
395
475
|
|
|
396
|
-
|
|
397
|
-
-
|
|
398
|
-
+
|
|
399
|
-
|
|
400
|
-
-
|
|
401
|
-
+
|
|
402
|
-
|
|
476
|
+
return (
|
|
477
|
+
- <TreeView>
|
|
478
|
+
+ <SimpleTreeView>
|
|
479
|
+
<TreeItem itemId="1" label="First item" />
|
|
480
|
+
- </TreeView>
|
|
481
|
+
+ </SimpleTreeView>
|
|
482
|
+
);
|
|
403
483
|
```
|
|
404
484
|
|
|
405
485
|
#### `rename-use-tree-item`
|
|
@@ -515,9 +595,9 @@ The corresponding sub-sections are listed below
|
|
|
515
595
|
|
|
516
596
|
### Pickers codemods
|
|
517
597
|
|
|
518
|
-
#### `preset-safe` for
|
|
598
|
+
#### `preset-safe` for Pickers v6.0.0
|
|
519
599
|
|
|
520
|
-
The `preset-safe` codemods for
|
|
600
|
+
The `preset-safe` codemods for Pickers.
|
|
521
601
|
|
|
522
602
|
```bash
|
|
523
603
|
npx @mui/x-codemod@latest v6.0.0/pickers/preset-safe <path|folder>
|
package/package.json
CHANGED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = transformer;
|
|
8
|
+
var _removeStabilizedExperimentalFeatures = _interopRequireDefault(require("../remove-stabilized-experimentalFeatures"));
|
|
9
|
+
function transformer(file, api, options) {
|
|
10
|
+
file.source = (0, _removeStabilizedExperimentalFeatures.default)(file, api, options);
|
|
11
|
+
return file.source;
|
|
12
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = transformer;
|
|
8
|
+
var _removeObjectProperty = _interopRequireDefault(require("../../../util/removeObjectProperty"));
|
|
9
|
+
const componentsNames = ['DataGridPremium'];
|
|
10
|
+
const propName = 'experimentalFeatures';
|
|
11
|
+
const propKeys = ['ariaV8'];
|
|
12
|
+
function transformer(file, api, options) {
|
|
13
|
+
const j = api.jscodeshift;
|
|
14
|
+
const root = j(file.source);
|
|
15
|
+
const printOptions = options.printOptions || {
|
|
16
|
+
quote: 'single',
|
|
17
|
+
trailingComma: true
|
|
18
|
+
};
|
|
19
|
+
propKeys.forEach(propKey => {
|
|
20
|
+
(0, _removeObjectProperty.default)({
|
|
21
|
+
root,
|
|
22
|
+
j,
|
|
23
|
+
propName,
|
|
24
|
+
componentsNames,
|
|
25
|
+
propKey
|
|
26
|
+
});
|
|
27
|
+
});
|
|
28
|
+
return root.toSource(printOptions);
|
|
29
|
+
}
|
|
@@ -6,9 +6,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = transformer;
|
|
8
8
|
var _presetSafe = _interopRequireDefault(require("../tree-view/preset-safe"));
|
|
9
|
-
var _presetSafe2 = _interopRequireDefault(require("../
|
|
9
|
+
var _presetSafe2 = _interopRequireDefault(require("../pickers/preset-safe"));
|
|
10
|
+
var _presetSafe3 = _interopRequireDefault(require("../charts/preset-safe"));
|
|
11
|
+
var _presetSafe4 = _interopRequireDefault(require("../data-grid/preset-safe"));
|
|
10
12
|
function transformer(file, api, options) {
|
|
11
13
|
file.source = (0, _presetSafe.default)(file, api, options);
|
|
12
14
|
file.source = (0, _presetSafe2.default)(file, api, options);
|
|
15
|
+
file.source = (0, _presetSafe3.default)(file, api, options);
|
|
16
|
+
file.source = (0, _presetSafe4.default)(file, api, options);
|
|
13
17
|
return file.source;
|
|
14
18
|
}
|