[material-ui][mui-system] Add support for version runtime checks

babel.config.js

@@ -81,6 +81,12 @@ module.exports = function getBabelConfig(api) {
         mode: 'unsafe-wrap',
       },
     ],
+    [
+      'transform-inline-environment-variables',
+      {
+        include: ['MUI_PACKAGE_VERSION'],
+      },
+    ],
   ];
 
   if (process.env.NODE_ENV === 'production') {

package.json

@@ -134,6 +134,7 @@
     "babel-plugin-module-resolver": "^5.0.2",
     "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

@@ -475,6 +475,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

@@ -416,3 +416,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,25 @@
+const version = process.env.MUI_PACKAGE_VERSION || null;
+
+let versionNumber: string | null = null;
+let preReleaseInfo: string | null = null;
+
+if (version) {
+  [versionNumber, preReleaseInfo] = version.split('-');
+}
+
+let destructuredVersion: number[] | null[] = [null, null, null];
+let destructuredPreReleaseInfo: [string, number] | null[] = [null, null];
+
+if (versionNumber) {
+  destructuredVersion = versionNumber.split('.').map(Number);
+}
+
+if (preReleaseInfo) {
+  destructuredPreReleaseInfo = [preReleaseInfo.split('.')[0], Number(preReleaseInfo.split('.')[1])];
+}
+
+const [major, minor, patch] = destructuredVersion;
+const [preReleaseLabel, preReleaseNumber] = destructuredPreReleaseInfo;
+
+export { version, major, minor, patch, preReleaseLabel, preReleaseNumber };
+export default version;

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

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

packages/mui-system/src/index.js

@@ -67,6 +67,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,25 @@
+const version = process.env.MUI_PACKAGE_VERSION || null;
+
+let versionNumber: string | null = null;
+let preReleaseInfo: string | null = null;
+
+if (version) {
+  [versionNumber, preReleaseInfo] = version.split('-');
+}
+
+let destructuredVersion: number[] | null[] = [null, null, null];
+let destructuredPreReleaseInfo: [string, number] | null[] = [null, null];
+
+if (versionNumber) {
+  destructuredVersion = versionNumber.split('.').map(Number);
+}
+
+if (preReleaseInfo) {
+  destructuredPreReleaseInfo = [preReleaseInfo.split('.')[0], Number(preReleaseInfo.split('.')[1])];
+}
+
+const [major, minor, patch] = destructuredVersion;
+const [preReleaseLabel, preReleaseNumber] = destructuredPreReleaseInfo;
+
+export { version, major, minor, patch, preReleaseLabel, preReleaseNumber };
+export default version;

scripts/build.mjs

@@ -3,6 +3,7 @@ import glob from 'fast-glob';
 import path from 'path';
 import { promisify } from 'util';
 import yargs from 'yargs';
+import fse from 'fs-extra';
 import { getWorkspaceRoot } from './utils.mjs';
 
 const exec = promisify(childProcess.exec);
@@ -25,11 +26,15 @@ async function run(argv) {
     );
   }
 
+  const packageJsonData = await fse.readFile(path.resolve('./package.json'), 'utf8');
+
   const env = {
     NODE_ENV: 'production',
     BABEL_ENV: bundle,
     MUI_BUILD_VERBOSE: verbose,
+    MUI_PACKAGE_VERSION: JSON.parse(packageJsonData).version,
   };
+
   const babelConfigPath = path.resolve(getWorkspaceRoot(), 'babel.config.js');
   const srcDir = path.resolve('./src');
   const extensions = ['.js', '.ts', '.tsx'];