[docs] Use codesandbox deploy for demos created from deploy previews

docs/next.config.js

@@ -33,9 +33,11 @@ module.exports = {
     const plugins = config.plugins.concat([
       new webpack.DefinePlugin({
         'process.env': {
+          COMMIT_REF: JSON.stringify(process.env.COMMIT_REF),
           ENABLE_AD: JSON.stringify(process.env.ENABLE_AD),
           GITHUB_AUTH: JSON.stringify(process.env.GITHUB_AUTH),
           LIB_VERSION: JSON.stringify(pkg.version),
+          PULL_REQUEST: JSON.stringify(process.env.PULL_REQUEST === 'true'),
           REACT_MODE: JSON.stringify(reactMode),
         },
       }),

docs/src/modules/utils/getDemoConfig.js

@@ -3,7 +3,9 @@ import { getDependencies } from './helpers';
 
 function jsDemo(demoData) {
   return {
-    dependencies: getDependencies(demoData.raw),
+    dependencies: getDependencies(demoData.raw, {
+      muiCommitRef: process.env.PULL_REQUEST ? process.env.COMMIT_REF : undefined,
+    }),
     files: {
       'demo.js': demoData.raw,
       'index.js': `
@@ -19,7 +21,10 @@ ReactDOM.render(<Demo />, document.querySelector('#root'));
 
 function tsDemo(demoData) {
   return {
-    dependencies: getDependencies(demoData.raw, { codeLanguage: CODE_VARIANTS.TS }),
+    dependencies: getDependencies(demoData.raw, {
+      codeLanguage: CODE_VARIANTS.TS,
+      muiCommitRef: process.env.PULL_REQUEST ? process.env.COMMIT_REF : undefined,
+    }),
     files: {
       'demo.tsx': demoData.raw,
       'index.tsx': `

docs/src/modules/utils/helpers.js

@@ -102,27 +102,41 @@ function includePeerDependencies(deps, versions) {
   }
 }
 
+/**
+ * @param {string} packageName - The name of a package living inside this repository.
+ * @param {string} [commitRef]
+ * @return string - A valid version for a dependency entry in a package.json
+ */
+function getMuiPackageVersion(packageName, commitRef) {
+  if (commitRef === undefined) {
+    // TODO: change 'next' to 'latest' once next is merged into master.
+    return 'next';
+  }
+  const shortSha = commitRef.slice(0, 8);
+  return `https://pkg.csb.dev/mui-org/material-ui/commit/${shortSha}/@material-ui/${packageName}`;
+}
+
 /**
  * @param {string} raw - ES6 source with es module imports
- * @param {objects} options
- * @param {'JS' | 'TS'} options.codeLanguage
- * @param {'next' | 'latest'} options.reactVersion
+ * @param {object} options
+ * @param {'JS' | 'TS'} [options.codeLanguage] -
+ * @param {string} [options.muiCommitRef] - If specified use `@material-ui/*` packages from a specific commit.
+ * @param {'next' | 'latest'} [options.reactVersion]
  * @returns {Record<string, 'latest'>} map of packages with their required version
  */
 function getDependencies(raw, options = {}) {
-  const { codeLanguage = CODE_VARIANTS.JS, reactVersion = 'latest' } = options;
+  const { codeLanguage = CODE_VARIANTS.JS, muiCommitRef, reactVersion = 'latest' } = options;
 
   const deps = {};
   const versions = {
     'react-dom': reactVersion,
     react: reactVersion,
-    // TODO: change 'next' to 'latest' once next is merged into master.
-    '@material-ui/core': 'next',
-    '@material-ui/icons': 'next',
-    '@material-ui/lab': 'next',
-    '@material-ui/styles': 'next',
-    '@material-ui/system': 'next',
-    '@material-ui/utils': 'next',
+    '@material-ui/core': getMuiPackageVersion('core', muiCommitRef),
+    '@material-ui/icons': getMuiPackageVersion('icons', muiCommitRef),
+    '@material-ui/lab': getMuiPackageVersion('lab', muiCommitRef),
+    '@material-ui/styles': getMuiPackageVersion('styles', muiCommitRef),
+    '@material-ui/system': getMuiPackageVersion('system', muiCommitRef),
+    '@material-ui/utils': getMuiPackageVersion('utils', muiCommitRef),
     '@material-ui/pickers': 'next',
   };
 

docs/src/modules/utils/helpers.test.js

@@ -154,4 +154,34 @@ import { useDemoData } from '@material-ui/x-grid-data-generator';
       typescript: 'latest',
     });
   });
+
+  it('can use codesandbox deploys if a commit is given', () => {
+    const source = `
+import * as Core from '@material-ui/core';
+import * as Icons from '@material-ui/icons';
+import * as Lab from '@material-ui/lab';
+import * as Styles from '@material-ui/styles';
+import * as System from '@material-ui/system';
+import * as Utils from '@material-ui/utils';
+    `;
+
+    expect(
+      getDependencies(source, { muiCommitRef: '2d0e8b4daf20b7494c818b6f8c4cc8423bc99d6f' }),
+    ).to.deep.equal({
+      react: 'latest',
+      'react-dom': 'latest',
+      '@material-ui/core':
+        'https://pkg.csb.dev/mui-org/material-ui/commit/2d0e8b4d/@material-ui/core',
+      '@material-ui/icons':
+        'https://pkg.csb.dev/mui-org/material-ui/commit/2d0e8b4d/@material-ui/icons',
+      '@material-ui/lab':
+        'https://pkg.csb.dev/mui-org/material-ui/commit/2d0e8b4d/@material-ui/lab',
+      '@material-ui/styles':
+        'https://pkg.csb.dev/mui-org/material-ui/commit/2d0e8b4d/@material-ui/styles',
+      '@material-ui/system':
+        'https://pkg.csb.dev/mui-org/material-ui/commit/2d0e8b4d/@material-ui/system',
+      '@material-ui/utils':
+        'https://pkg.csb.dev/mui-org/material-ui/commit/2d0e8b4d/@material-ui/utils',
+    });
+  });
 });