[material-ui][mui-system] Cherry-pick: Add support for version runtime checks (#43190) (#43233)

Author: DiegoAndai

babel.config.js

@@ -88,6 +88,19 @@ module.exports = function getBabelConfig(api) {
         mode: 'unsafe-wrap',
       },
     ],
+    [
+      'transform-inline-environment-variables',
+      {
+        include: [
+          'MUI_VERSION',
+          'MUI_MAJOR_VERSION',
+          'MUI_MINOR_VERSION',
+          'MUI_PATCH_VERSION',
+          'MUI_PRERELEASE_LABEL',
+          'MUI_PRERELEASE_NUMBER',
+        ],
+      },
+    ],
   ];
 
   if (process.env.NODE_ENV === 'production') {

package.json

@@ -132,6 +132,7 @@
     "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-optimize-clsx": "^2.6.2",
     "babel-plugin-react-remove-properties": "^0.3.0",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "chalk": "^5.3.0",
     "compression-webpack-plugin": "^11.1.0",

packages/mui-material/src/index.d.ts

@@ -476,6 +476,8 @@ export * from './useAutocomplete';
 export { default as GlobalStyles } from './GlobalStyles';
 export * from './GlobalStyles';
 
+export * from './version';
+
 /**
  * @deprecated will be removed in v5.beta, please use StyledEngineProvider from @mui/material/styles instead
  */

packages/mui-material/src/index.js

@@ -417,3 +417,5 @@ export * from './generateUtilityClass';
 export { default as generateUtilityClasses } from './generateUtilityClasses';
 
 export { default as Unstable_TrapFocus } from './Unstable_TrapFocus';
+
+export * from './version';

packages/mui-material/src/index.test.js

@@ -6,15 +6,24 @@
 import { expect } from 'chai';
 import * as MaterialUI from './index';
 
+const versionExports = [
+  'version',
+  'major',
+  'minor',
+  'patch',
+  'preReleaseLabel',
+  'preReleaseNumber',
+];
+
 describe('material-ui', () => {
   it('should have exports', () => {
     expect(typeof MaterialUI).to.equal('object');
   });
 
   it('should not have undefined exports', () => {
-    Object.keys(MaterialUI).forEach((exportKey) =>
-      expect(Boolean(MaterialUI[exportKey])).to.equal(true),
-    );
+    Object.keys(MaterialUI)
+      .filter((exportKey) => !versionExports.includes(exportKey))
+      .forEach((exportKey) => expect(Boolean(MaterialUI[exportKey])).to.equal(true));
   });
 
   it('should reexport certain members from @mui/base', () => {

packages/mui-material/src/version/index.ts

@@ -0,0 +1,8 @@
+export const version = process.env.MUI_VERSION;
+export const major = Number(process.env.MUI_MAJOR_VERSION);
+export const minor = Number(process.env.MUI_MINOR_VERSION);
+export const patch = Number(process.env.MUI_PATCH_VERSION);
+export const preReleaseLabel = process.env.MUI_PRERELEASE_LABEL || null;
+export const preReleaseNumber = Number(process.env.MUI_PRERELEASE_NUMBER) || null;
+
+export default version;

packages/mui-system/src/index.d.ts

@@ -181,3 +181,5 @@ export * from './Unstable_Grid';
 
 export { default as Stack } from './Stack';
 export * from './Stack';
+
+export * from './version';

packages/mui-system/src/index.js

@@ -66,6 +66,7 @@ export { default as unstable_createCssVarsTheme } from './cssVars/createCssVarsT
 export { default as responsivePropType } from './responsivePropType';
 export { default as RtlProvider } from './RtlProvider';
 export * from './RtlProvider';
+export * from './version';
 
 /** ----------------- */
 /** Layout components */

packages/mui-system/src/version/index.ts

@@ -0,0 +1,8 @@
+export const version = process.env.MUI_VERSION;
+export const major = Number(process.env.MUI_MAJOR_VERSION);
+export const minor = Number(process.env.MUI_MINOR_VERSION);
+export const patch = Number(process.env.MUI_PATCH_VERSION);
+export const preReleaseLabel = process.env.MUI_PRERELEASE_LABEL || null;
+export const preReleaseNumber = Number(process.env.MUI_PRERELEASE_NUMBER) || null;
+
+export default version;