From d2f619dbe2df73c15c77b7ca63f7f5fb9823314f Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Mon, 8 Apr 2024 23:01:01 +0200 Subject: [PATCH 1/6] update migration guide --- .../migration-data-grid-v6.md | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md index cdfd95277d1f5..ed0c645f125e0 100644 --- a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -108,6 +108,47 @@ 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 for webpack 4 using `@babel/preset-env` plugin: + +```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-data-grid'), ++ path.resolve(__dirname, 'node_modules/@mui/x-license'), ++ ], ++ }, ++ ], + use: [ + { + loader: 'babel-loader', + options: { + presets: ['@babel/preset-env', '@babel/preset-react'], + }, + }, + ], + }, + ], + }, + }); +``` + ### DOM changes The Data Grid's layout has been substantially altered to use CSS sticky positioned elements. From 311581343016e9907c3d1803ea160fcbc0e7ac01 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Fri, 19 Apr 2024 20:07:57 +0200 Subject: [PATCH 2/6] update the guide --- .../migration-data-grid-v6/migration-data-grid-v6.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md index ed0c645f125e0..e21d80da308a5 100644 --- a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -108,13 +108,13 @@ 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 +### 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. +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 for webpack 4 using `@babel/preset-env` plugin: +Here is an example of how you can transpile these features on Webpack 4 using the `@babel/preset-env` plugin: ```diff // webpack.config.js From 59884750b5910b64041ccc8e0bc9b040e654874d Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Fri, 19 Apr 2024 20:09:24 +0200 Subject: [PATCH 3/6] update code snippet --- .../migration-data-grid-v6/migration-data-grid-v6.md | 8 -------- 1 file changed, 8 deletions(-) diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md index e21d80da308a5..392ce4659e1c8 100644 --- a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -135,14 +135,6 @@ Here is an example of how you can transpile these features on Webpack 4 using th + ], + }, + ], - use: [ - { - loader: 'babel-loader', - options: { - presets: ['@babel/preset-env', '@babel/preset-react'], - }, - }, - ], }, ], }, From 5f09d380dacf323a333383ffe21055814b1e1cd5 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Fri, 19 Apr 2024 20:14:03 +0200 Subject: [PATCH 4/6] add webpack 4 sections to other migration guides --- .../migration-charts-v6.md | 30 ++++++++++++++ .../migration-pickers-v6.md | 40 ++++++++++++++++++- .../migration-tree-view-v6.md | 30 ++++++++++++++ 3 files changed, 99 insertions(+), 1 deletion(-) diff --git a/docs/data/migration/migration-charts-v6/migration-charts-v6.md b/docs/data/migration/migration-charts-v6/migration-charts-v6.md index aab269714266d..933530bb89aac 100644 --- a/docs/data/migration/migration-charts-v6/migration-charts-v6.md +++ b/docs/data/migration/migration-charts-v6/migration-charts-v6.md @@ -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` plugin: + +```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 diff --git a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md index 23e509dc29a7e..5d4609dd42b8b 100644 --- a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md +++ b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md @@ -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. @@ -95,6 +100,39 @@ 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` plugin: + +```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-date-pickers'), ++ path.resolve(__dirname, 'node_modules/@mui/x-license'), ++ ], ++ }, ++ ], + }, + ], + }, + }); +``` + ## Component slots ### Rename `components` to `slots` diff --git a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md index 965b06fc43df0..18b5de612f0a5 100644 --- a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md +++ b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md @@ -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` plugin: + +```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: From 2ad15c2548a57e6133d1692ce9d133315ef35fe2 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Mon, 22 Apr 2024 14:24:28 +0200 Subject: [PATCH 5/6] plugin => preset --- docs/data/migration/migration-charts-v6/migration-charts-v6.md | 2 +- .../migration/migration-data-grid-v6/migration-data-grid-v6.md | 2 +- .../data/migration/migration-pickers-v6/migration-pickers-v6.md | 2 +- .../migration/migration-tree-view-v6/migration-tree-view-v6.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/data/migration/migration-charts-v6/migration-charts-v6.md b/docs/data/migration/migration-charts-v6/migration-charts-v6.md index 933530bb89aac..885e85bfe97fc 100644 --- a/docs/data/migration/migration-charts-v6/migration-charts-v6.md +++ b/docs/data/migration/migration-charts-v6/migration-charts-v6.md @@ -47,7 +47,7 @@ Dropping old browsers support also means that we no longer transpile some featur 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` plugin: +Here is an example of how you can transpile these features on Webpack 4 using the `@babel/preset-env` preset: ```diff // webpack.config.js diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md index 392ce4659e1c8..ad79f21ce8f90 100644 --- a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -114,7 +114,7 @@ Dropping old browsers support also means that we no longer transpile some featur 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` plugin: +Here is an example of how you can transpile these features on Webpack 4 using the `@babel/preset-env` preset: ```diff // webpack.config.js diff --git a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md index 5d4609dd42b8b..cad46d3f2fd0e 100644 --- a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md +++ b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md @@ -106,7 +106,7 @@ Dropping old browsers support also means that we no longer transpile some featur 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` plugin: +Here is an example of how you can transpile these features on Webpack 4 using the `@babel/preset-env` preset: ```diff // webpack.config.js diff --git a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md index 18b5de612f0a5..0fbe2c9003bd0 100644 --- a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md +++ b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md @@ -46,7 +46,7 @@ Dropping old browsers support also means that we no longer transpile some featur 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` plugin: +Here is an example of how you can transpile these features on Webpack 4 using the `@babel/preset-env` preset: ```diff // webpack.config.js From 18430563bc7be9a7563568ef15e34e5131095a12 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Mon, 22 Apr 2024 14:26:51 +0200 Subject: [PATCH 6/6] add comments --- .../migration/migration-data-grid-v6/migration-data-grid-v6.md | 1 + docs/data/migration/migration-pickers-v6/migration-pickers-v6.md | 1 + 2 files changed, 2 insertions(+) diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md index ad79f21ce8f90..c3e53e6e9b38b 100644 --- a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -130,6 +130,7 @@ Here is an example of how you can transpile these features on Webpack 4 using th + { + 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'), + path.resolve(__dirname, 'node_modules/@mui/x-license'), + ], diff --git a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md index cad46d3f2fd0e..4d3c156476f65 100644 --- a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md +++ b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md @@ -122,6 +122,7 @@ Here is an example of how you can transpile these features on Webpack 4 using th + { + 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'), + ],