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

Author: DiegoAndai

babel.config.js

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

@@ -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,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

@@ -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,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;

pnpm-lock.yaml

@@ -3,7 +3,7 @@ import glob from 'fast-glob';
 import path from 'path';
 import { promisify } from 'util';
 import yargs from 'yargs';
-import { getWorkspaceRoot } from './utils.mjs';
+import { getVersionEnvVariables, getWorkspaceRoot } from './utils.mjs';
 
 const exec = promisify(childProcess.exec);
 
@@ -29,7 +29,9 @@ async function run(argv) {
     NODE_ENV: 'production',
     BABEL_ENV: bundle,
     MUI_BUILD_VERBOSE: verbose,
+    ...(await getVersionEnvVariables()),
   };
+
   const babelConfigPath = path.resolve(getWorkspaceRoot(), 'babel.config.js');
   const srcDir = path.resolve('./src');
   const extensions = ['.js', '.ts', '.tsx'];

scripts/build.mjs

@@ -1,5 +1,6 @@
 import path from 'path';
 import url from 'url';
+import fse from 'fs-extra';
 
 /**
  * Returns the full path of the root directory of this repository.
@@ -10,3 +11,32 @@ export function getWorkspaceRoot() {
   const workspaceRoot = path.resolve(currentDirectory, '..');
   return workspaceRoot;
 }
+
+/**
+ * Returns the version and destructured values of the version as env variables to be replaced.
+ */
+export async function getVersionEnvVariables() {
+  const packageJsonData = await fse.readFile(path.resolve('./package.json'), 'utf8');
+  const { version = null } = JSON.parse(packageJsonData);
+
+  if (!version) {
+    throw new Error('Could not find the version in the package.json');
+  }
+
+  const [versionNumber, preReleaseInfo] = version.split('-');
+  const [major, minor, patch] = versionNumber.split('.');
+  const [preReleaseLabel, preReleaseNumber] = preReleaseInfo ? preReleaseInfo.split('.') : [];
+
+  if (!major || !minor || !patch) {
+    throw new Error(`Couldn't parse version from package.json`);
+  }
+
+  return {
+    MUI_VERSION: version,
+    MUI_MAJOR_VERSION: major,
+    MUI_MINOR_VERSION: minor,
+    MUI_PATCH_VERSION: patch,
+    MUI_PRERELEASE_LABEL: preReleaseLabel,
+    MUI_PRERELEASE_NUMBER: preReleaseNumber,
+  };
+}