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 cdfd95277d1f..ed0c645f125e 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 ed0c645f125e..e21d80da308a 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 e21d80da308a..392ce4659e1c 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 aab269714266..933530bb89aa 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 23e509dc29a7..5d4609dd42b8 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 965b06fc43df..18b5de612f0a 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 933530bb89aa..885e85bfe97f 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 392ce4659e1c..ad79f21ce8f9 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 5d4609dd42b8..cad46d3f2fd0 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 18b5de612f0a..0fbe2c9003bd 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 ad79f21ce8f9..c3e53e6e9b38 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 cad46d3f2fd0..4d3c156476f6 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'), + ],