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.

Sign up for GitHub

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

[docs] Cover webpack 4 support in migration guide #12710

Merged
merged 6 commits into from
Apr 22, 2024
Merged

[docs] Cover webpack 4 support in migration guide #12710

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d2f619d
update migration guide
cherniavskii Apr 8, 2024
3115813
update the guide
cherniavskii Apr 19, 2024
5988475
update code snippet
cherniavskii Apr 19, 2024
5f09d38
add webpack 4 sections to other migration guides
cherniavskii Apr 19, 2024
2ad15c2
plugin => preset
cherniavskii Apr 22, 2024
1843056
add comments
cherniavskii Apr 22, 2024
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
30 changes: 30 additions & 0 deletions docs/data/migration/migration-charts-v6/migration-charts-v6.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,36 @@ The `legacy` bundle that used to support old browsers like IE 11 is no longer i
If you need support for IE 11, you will need to keep using the latest version of the `v6` release.
:::

### Drop Webpack 4 support

Dropping old browsers support also means that we no longer transpile some features that are natively supported by modern browsers – like [Nullish Coalescing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing) and [Optional Chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining).

These features are not supported by Webpack 4, so if you are using Webpack 4, you will need to transpile these features yourself or upgrade to Webpack 5.

Here is an example of how you can transpile these features on Webpack 4 using the `@babel/preset-env` preset:

```diff
// webpack.config.js

module.exports = (env) => ({
// ...
module: {
rules: [
{
test: /\.[jt]sx?$/,
- exclude: /node_modules/,
+ exclude: [
+ {
+ test: path.resolve(__dirname, 'node_modules'),
+ exclude: [path.resolve(__dirname, 'node_modules/@mui/x-charts')],
+ },
+ ],
},
],
},
});
```

### Renaming

#### Types
Expand Down
34 changes: 34 additions & 0 deletions docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,40 @@ The `legacy` bundle that used to support old browsers like IE 11 is no longer i
If you need support for IE 11, you will need to keep using the latest version of the `v6` release.
:::

### Drop Webpack 4 support

Dropping old browsers support also means that we no longer transpile some features that are natively supported by modern browsers – like [Nullish Coalescing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing) and [Optional Chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining).

These features are not supported by Webpack 4, so if you are using Webpack 4, you will need to transpile these features yourself or upgrade to Webpack 5.

Here is an example of how you can transpile these features on Webpack 4 using the `@babel/preset-env` preset:

```diff
// webpack.config.js

module.exports = (env) => ({
// ...
module: {
rules: [
{
test: /\.[jt]sx?$/,
- exclude: /node_modules/,
+ exclude: [
+ {
+ test: path.resolve(__dirname, 'node_modules'),
+ exclude: [
+ // Covers @mui/x-data-grid, @mui/x-data-grid-pro, and @mui/x-data-grid-premium
+ path.resolve(__dirname, 'node_modules/@mui/x-data-grid'),
Copy link
Member

@flaviendelangle flaviendelangle Apr 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would be more explicit here. I guess nobody wants to do this to the license and the community package, they always want either to add some commercial package or skip the license.

I see 4 potential approaches:

  • just add a sentence (the one I wrote is quite bad)

    Suggested change
    + path.resolve(__dirname, 'node_modules/@mui/x-data-grid'),
    + // Add all folder of each grid packages you are using.
    + path.resolve(__dirname, 'node_modules/@mui/x-data-grid'),

  • list the 3 cases (@mui/x-data-grid | @mui/x-data-grid + @mui/x-data-grid-pro + @mui/x-license | @mui/x-data-grid + @mui/x-data-grid-pro + @mui/x-data-grid-premium | @mui/x-license)

  • list all the packages but add a small // (only needed for pro and premium users) and // (only needed for pro users) after the path.resolve(...) of each commercial package.

  • list all the packages even if they are not useful, I guess they do no harm and make sure people don't have nasty bugs if they buy a license in the future.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If they only use the community package, the license package won't be installed, so there's no harm in having it there.
I would rather keep the universal snippet that would work for every plan.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would rather keep the universal snippet that would work for every plan.

But do we agree that your snippet do not include the pro and premium packages and that can be problematic?
Or does node_modules/@mui/x-data-grid also match node_modules/@mui/x-data-grid-pro? In which case maybe just a comment saying that it does would be interesting.

Basically, just by reading the code snippet, the first thing I'd like to do as a pro user is to add -pro on the grid package line, and that is wrong because it will stop transpiling the community package, which is always needed.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But do we agree that your snippet do not include the pro and premium packages and that can be problematic?
Or does node_modules/@mui/x-data-grid also match node_modules/@mui/x-data-grid-pro?

I tested the Pro and Premium packages with this snippet and it worked.
I will check again to make sure it does work, and add a comment if that's the case 👍🏻

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I confirm that @mui/x-data-grid matches all data grid packages.
I'll add a comment about that.

https://stackblitz.com/edit/mui-bug-reproduction-lkkagp?file=webpack.config.js

https://stackblitz.com/edit/mui-bug-reproduction-6xhapg?file=webpack.config.js

+ path.resolve(__dirname, 'node_modules/@mui/x-license'),
+ ],
+ },
+ ],
},
],
},
});
```

### DOM changes

The Data Grid's layout has been substantially altered to use CSS sticky positioned elements.
Expand Down
41 changes: 40 additions & 1 deletion docs/data/migration/migration-pickers-v6/migration-pickers-v6.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,12 @@ After running the codemods, make sure to test your application and that you don'
Feel free to [open an issue](https://github.com/mui/mui-x/issues/new/choose) for support if you need help to proceed with your migration.
:::

## Drop the legacy bundle
## Breaking changes

Since v7 is a major release, it contains some changes that affect the public API.
These changes were done for consistency, improve stability and make room for new features.

### Drop the legacy bundle

The support for IE 11 has been removed from all MUI X packages.
The `legacy` bundle that used to support old browsers like IE 11 is no longer included.
Expand All @@ -95,6 +100,40 @@ The `legacy` bundle that used to support old browsers like IE 11 is no longer i
If you need support for IE 11, you will need to keep using the latest version of the `v6` release.
:::

### Drop Webpack 4 support

Dropping old browsers support also means that we no longer transpile some features that are natively supported by modern browsers – like [Nullish Coalescing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing) and [Optional Chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining).

These features are not supported by Webpack 4, so if you are using Webpack 4, you will need to transpile these features yourself or upgrade to Webpack 5.

Here is an example of how you can transpile these features on Webpack 4 using the `@babel/preset-env` preset:

```diff
// webpack.config.js

module.exports = (env) => ({
// ...
module: {
rules: [
{
test: /\.[jt]sx?$/,
- exclude: /node_modules/,
+ exclude: [
+ {
+ test: path.resolve(__dirname, 'node_modules'),
+ exclude: [
+ // Covers @mui/x-date-pickers and @mui/x-date-pickers-pro
+ path.resolve(__dirname, 'node_modules/@mui/x-date-pickers'),
+ path.resolve(__dirname, 'node_modules/@mui/x-license'),
LukasTy marked this conversation as resolved.
Show resolved Hide resolved
+ ],
+ },
+ ],
},
],
},
});
```

## Component slots

### Rename `components` to `slots`
Expand Down
30 changes: 30 additions & 0 deletions docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,36 @@ The `legacy` bundle that used to support old browsers like IE 11 is no longer i
If you need support for IE 11, you will need to keep using the latest version of the `v6` release.
:::

### Drop Webpack 4 support

Dropping old browsers support also means that we no longer transpile some features that are natively supported by modern browsers – like [Nullish Coalescing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing) and [Optional Chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining).

These features are not supported by Webpack 4, so if you are using Webpack 4, you will need to transpile these features yourself or upgrade to Webpack 5.

Here is an example of how you can transpile these features on Webpack 4 using the `@babel/preset-env` preset:

```diff
// webpack.config.js

module.exports = (env) => ({
// ...
module: {
rules: [
{
test: /\.[jt]sx?$/,
- exclude: /node_modules/,
+ exclude: [
+ {
+ test: path.resolve(__dirname, 'node_modules'),
+ exclude: [path.resolve(__dirname, 'node_modules/@mui/x-tree-view')],
+ },
+ ],
},
],
},
});
```

### ✅ Rename `nodeId` to `itemId`

The required `nodeId` prop used by the `TreeItem` has been renamed to `itemId` for consistency:
Expand Down
Loading