Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[codemod] Add a codemod and update the grid migration guide #12488

Merged
merged 3 commits into from
Mar 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ As a result, the following changes have been made:

### Removed props

- The deprecated props `components` and `componentsProps` have been removed. Use `slots` and `slotProps` instead. See [components section](/x/react-data-grid/components/) for more details.
- The deprecated props `components` and `componentsProps` have been removed. Use `slots` and `slotProps` instead. See [components section](/x/react-data-grid/components/) for more details.
- The `slots.preferencesPanel` slot and the `slotProps.preferencesPanel` prop were removed. Use `slots.panel` and `slotProps.panel` instead.
- The `getOptionValue` and `getOptionLabel` props were removed from the following components:

Expand All @@ -144,7 +144,7 @@ As a result, the following changes have been made:
};
```

- Some feature flags were removed from the `experimentalFeatures` prop. These features are now stable and enabled by default:
- Some feature flags were removed from the `experimentalFeatures` prop. These features are now stable and enabled by default:
- [`columnGrouping`](/x/react-data-grid/column-groups/)
- [`clipboardPaste`](/x/react-data-grid/clipboard/#clipboard-paste)
- [`lazyLoading`](/x/react-data-grid/row-updates/#lazy-loading)
Expand Down Expand Up @@ -313,7 +313,7 @@ See the [Direct state access](/x/react-data-grid/state/#direct-selector-access)

### Clipboard

- The clipboard related exports `ignoreValueFormatterDuringExport` and `splitClipboardPastedText` are not anymore prefixed with `unstable_`.
- The clipboard related exports `ignoreValueFormatterDuringExport` and `splitClipboardPastedText` are not anymore prefixed with `unstable_`.

### Print export

Expand Down Expand Up @@ -403,7 +403,7 @@ See the [Direct state access](/x/react-data-grid/state/#direct-selector-access)

### Accessibility

- The `ariaV7` experimental flag has been removed and the Data Grid now uses the improved accessibility implementation by default.
- The `ariaV7` experimental flag has been removed and the Data Grid now uses the improved accessibility implementation by default.
If you were using the `ariaV7` flag, you can remove it from the `experimentalFeatures` prop:

```diff
Expand Down
20 changes: 20 additions & 0 deletions packages/x-codemod/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@ The list includes these transformers

- [`rename-components-to-slots-data-grid`](#rename-components-to-slots-data-grid)
- [`rename-cell-selection-props`](#rename-cell-selection-props)
- [`remove-stabilized-v7-experimentalFeatures`](#remove-stabilized-v7-experimentalFeatures)

#### `rename-components-to-slots-data-grid`

Expand Down Expand Up @@ -205,6 +206,25 @@ Rename props related to `cellSelection` feature.
npx @mui/x-codemod@next v7.0.0/data-grid/rename-cell-selection-props <path>
```

#### `remove-stabilized-v7-experimentalFeatures`

Remove feature flags for stabilized `experimentalFeatures`.

```diff
<DataGrid
- experimentalFeatures={{
- lazyLoading: true,
- ariaV7: true,
- clipboardPaste: true,
- columnGrouping: true,
- }}
/>
```

```bash
npx @mui/x-codemod@next v7.0.0/data-grid/remove-stabilized-experimentalFeatures <path>
```

### Tree View codemods

#### `preset-safe` for tree view v7.0.0
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,12 @@ export default function App() {
checked: 'true',
},
}}
experimentalFeatures={{
lazyLoading: true,
ariaV7: true,
columnGrouping: true,
clipboardPaste: true,
}}
/>
<DataGridPremium
components={{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,7 @@ export default function App() {
baseCheckbox: {
checked: 'true',
},
}}
/>
}} />
LukasTy marked this conversation as resolved.
Show resolved Hide resolved
<DataGridPremium
slots={{
baseTextField: TextField,
Expand Down
2 changes: 2 additions & 0 deletions packages/x-codemod/src/v7.0.0/data-grid/preset-safe/index.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import transformRenameComponentsToSlots from '../rename-components-to-slots';
import renameCellSelectionProps from '../rename-cell-selection-props';
import removeExperimentalFeatures from '../remove-stabilized-experimentalFeatures';

import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types';

export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) {
file.source = transformRenameComponentsToSlots(file, api, options);
file.source = renameCellSelectionProps(file, api, options);
file.source = removeExperimentalFeatures(file, api, options);

return file.source;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { DataGridPro } from '@mui/x-data-grid-pro';
import { DataGridPremium } from '@mui/x-data-grid-premium';

function App() {
return (
<React.Fragment>
<DataGrid
experimentalFeatures={{
columnGrouping: true,
clipboardPaste: true,
}}
/>
<DataGridPro
experimentalFeatures={{
lazyLoading: true,
ariaV7: true,
}}
/>
<DataGridPremium
experimentalFeatures={{
columnGrouping: true,
clipboardPaste: true,
lazyLoading: true,
ariaV7: true,
}}
/>
<DataGridPro {...props} />
</React.Fragment>
);
}

export default App;
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { DataGridPro } from '@mui/x-data-grid-pro';
import { DataGridPremium } from '@mui/x-data-grid-premium';

function App() {
return (
<React.Fragment>
<DataGrid />
<DataGridPro />
<DataGridPremium />
<DataGridPro {...props} />
</React.Fragment>
);
}

export default App;
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import removeObjectProperty from '../../../util/removeObjectProperty';
import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types';

const componentsNames = ['DataGrid', 'DataGridPro', 'DataGridPremium'];
const propName = 'experimentalFeatures';
const propKeys = ['columnGrouping', 'clipboardPaste', 'lazyLoading', 'ariaV7'];

export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) {
const j = api.jscodeshift;
const root = j(file.source);

const printOptions = options.printOptions || {
quote: 'single',
trailingComma: true,
};

propKeys.forEach((propKey) => {
removeObjectProperty({ root, j, propName, componentsNames, propKey });
});

return root.toSource(printOptions);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import path from 'path';
import { expect } from 'chai';
import jscodeshift from 'jscodeshift';
import transform from '.';
import readFile from '../../../util/readFile';

function read(fileName) {
return readFile(path.join(__dirname, fileName));
}

describe('v7.0.0/data-grid', () => {
describe('remove-stabilized-experimentalFeatures', () => {
it('transforms props as needed', () => {
const actual = transform({ source: read('./actual.spec.js') }, { jscodeshift }, {});

const expected = read('./expected.spec.js');
expect(actual).to.equal(expected, 'The transformed version should be correct');
});

it('should be idempotent', () => {
const actual = transform({ source: read('./expected.spec.js') }, { jscodeshift }, {});

const expected = read('./expected.spec.js');
expect(actual).to.equal(expected, 'The transformed version should be correct');
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ const props = {
unstable_cellSelection: 'cellSelection',
unstable_cellSelectionModel: 'cellSelectionModel',
unstable_onCellSelectionModelChange: 'onCellSelectionModelChange',
unstable_ignoreValueFormatterDuringExport: 'ignoreValueFormatterDuringExport',
unstable_splitClipboardPastedText: 'splitClipboardPastedText',
};

export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) {
Expand Down
Loading