[benchmark] Fix benchmark scripts & moved scenarios to correct benchm…

…ark project (#23058)

babel.config.js

@@ -137,7 +137,6 @@ module.exports = function getBabelConfig(api) {
           [
             'babel-plugin-module-resolver',
             {
-              root: ['./'],
               alias: defaultAlias,
             },
           ],

benchmark/scenarios/naked-styled-components/index.js → benchmark/browser/scenarios/basic-styled-components/index.js

@@ -7,22 +7,22 @@ import styledComponents, {
 import { logReactMetrics } from '../utils';
 
 const materialSystemTheme = createMuiTheme();
-const NakedStyleComponents = styledComponents('div')(spacing);
+const BasicStyleComponents = styledComponents('div')(spacing);
 
-export default function NakedStyledComponents() {
+export default function BasicStyledComponents() {
   return (
-    <React.Profiler id="naked-styled-components" onRender={logReactMetrics}>
+    <React.Profiler id="basic-styled-components" onRender={logReactMetrics}>
       {new Array(1000).fill().map(() => (
         <StyledComponentsThemeProvider theme={materialSystemTheme}>
-          <NakedStyleComponents
+          <BasicStyleComponents
             color="primary.main"
             bgcolor="background.paper"
             fontFamily="h6.fontFamily"
             fontSize={['h6.fontSize', 'h4.fontSize', 'h3.fontSize']}
             p={[2, 3, 4]}
           >
             styled-components
-          </NakedStyleComponents>
+          </BasicStyleComponents>
         </StyledComponentsThemeProvider>
       ))}
     </React.Profiler>

benchmark/scripts/benchmark.js → benchmark/browser/scripts/benchmark.js

@@ -5,7 +5,7 @@ const handler = require('serve-handler');
 const http = require('http');
 
 const PORT = 1122;
-const APP = 'benchmark';
+const APP = 'benchmark/browser';
 
 function createServer(options) {
   const { port } = options;
@@ -96,33 +96,6 @@ async function run() {
 
   try {
     await runMeasures(browser, 'noop (baseline)', './noop/index.js', 10);
-    await runMeasures(
-      browser,
-      '@material-ui/system colors',
-      './material-ui-system-colors/index.js',
-      10,
-    );
-    await runMeasures(browser, 'styled-system colors', './styled-system-colors/index.js', 10);
-    await runMeasures(
-      browser,
-      '@material-ui/system spaces',
-      './material-ui-system-spaces/index.js',
-      10,
-    );
-    await runMeasures(browser, 'styled-system spaces', './styled-system-spaces/index.js', 10);
-    await runMeasures(
-      browser,
-      '@material-ui/system compose',
-      './material-ui-system-compose/index.js',
-      10,
-    );
-    await runMeasures(browser, 'styled-system compose', './styled-system-compose/index.js', 10);
-    await runMeasures(
-      browser,
-      '@material-ui/core all-inclusive',
-      './material-ui-system-all-inclusive/index.js',
-      10,
-    );
     await runMeasures(
       browser,
       'styled-components Box + @material-ui/system',
@@ -138,7 +111,12 @@ async function run() {
     await runMeasures(browser, 'Box emotion', './box-emotion/index.js', 10);
     await runMeasures(browser, 'Box @material-ui/styles', './box-material-ui-styles/index.js', 10);
     await runMeasures(browser, 'Box styled-components', './box-styled-components/index.js', 10);
-    await runMeasures(browser, 'Naked styled-components', './naked-styled-components/index.js', 10);
+    await runMeasures(
+      browser,
+      'Basic styled-components box',
+      './basic-styled-components/index.js',
+      10,
+    );
   } finally {
     await Promise.all([browser.close(), server.close()]);
   }

benchmark/webpack.config.js → benchmark/browser/webpack.config.js

@@ -1,12 +1,12 @@
 const path = require('path');
-const webpackBaseConfig = require('../webpackBaseConfig');
+const webpackBaseConfig = require('../../webpackBaseConfig');
 
 module.exports = {
   ...webpackBaseConfig,
   entry: path.resolve(__dirname, 'index.js'),
   mode: 'production',
   output: {
-    path: path.resolve(__dirname, '../tmp'),
+    path: path.resolve(__dirname, '../../tmp'),
     filename: 'benchmark.js',
   },
   module: {

package.json

@@ -5,7 +5,7 @@
     "proptypes": "cross-env BABEL_ENV=test babel-node --extensions \".tsx,.ts,.js\" ./scripts/generateProptypes.ts",
     "deduplicate": "node scripts/deduplicate.js",
     "argos": "argos upload test/regressions/screenshots/chrome --token $ARGOS_TOKEN",
-    "benchmark": "yarn webpack --config benchmark/webpack.config.js && node benchmark/scripts/benchmark.js",
+    "benchmark:browser": "yarn webpack --config benchmark/browser/webpack.config.js && node benchmark/browser/scripts/benchmark.js",
     "build:codesandbox": "lerna run --parallel --scope \"@material-ui/*\" build",
     "docs:api": "rimraf ./docs/pages/api-docs && yarn docs:api:build",
     "docs:api:build": "cross-env BABEL_ENV=test __NEXT_EXPORT_TRAILING_SLASH=true babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/buildApi.ts  ./docs/pages/api-docs ./packages/material-ui/src ./packages/material-ui-lab/src",

packages/material-ui-benchmark/src/system.js

@@ -1,17 +1,9 @@
 /* eslint-disable no-console */
 import Benchmark from 'benchmark';
-import React from 'react';
-import ReactDOMServer from 'react-dom/server';
-import styledEmotion from '@emotion/styled';
-import { ThemeProvider as EmotionTheme } from 'emotion-theming';
 import { space, color, fontFamily, fontSize, compose as compose2 } from 'styled-system';
 import { spacing, palette, typography, compose } from '@material-ui/system';
 import { createMuiTheme } from '@material-ui/core/styles';
 import { styleFunction } from '@material-ui/core/Box';
-import { styled, ThemeProvider as StylesThemeProvider } from '@material-ui/styles';
-import styledComponents, {
-  ThemeProvider as StyledComponentsThemeProvider,
-} from 'styled-components';
 
 const suite = new Benchmark.Suite('system', {
   onError: (event) => {
@@ -23,14 +15,6 @@ Benchmark.options.minSamples = 100;
 const materialSystem = compose(palette, spacing, typography);
 const styledSystem = compose2(color, space, fontFamily, fontSize);
 
-const BoxStyles = styled('div')(styleFunction);
-const BoxStyleComponents = styledComponents('div')(styleFunction);
-const NakedStyleComponents = styledComponents('div')(spacing);
-const BoxEmotion = styledEmotion('div')(styleFunction);
-
-const BoxMaterialSystem = styledComponents('div')(materialSystem);
-const BoxStyledSystem = styledComponents('div')(styledSystem);
-
 const materialSystemTheme = createMuiTheme();
 
 const styledSystemTheme = createMuiTheme();
@@ -98,102 +82,6 @@ suite
       p: [2, 3, 4],
     });
   })
-  // ---
-  .add('styled-components Box + @material-ui/system', () => {
-    ReactDOMServer.renderToString(
-      <StyledComponentsThemeProvider theme={materialSystemTheme}>
-        <BoxMaterialSystem
-          color="primary.main"
-          bgcolor="background.paper"
-          fontFamily="h6.fontFamily"
-          fontSize={['h6.fontSize', 'h4.fontSize', 'h3.fontSize']}
-          p={[2, 3, 4]}
-        >
-          @material-ui/system
-        </BoxMaterialSystem>
-      </StyledComponentsThemeProvider>,
-    );
-  })
-  .add('styled-components Box + styled-system', () => {
-    ReactDOMServer.renderToString(
-      <StyledComponentsThemeProvider theme={styledSystemTheme}>
-        <BoxStyledSystem
-          color="primary.main"
-          bg="background.paper"
-          fontFamily="h6.fontFamily"
-          fontSize={['h6.fontSize', 'h4.fontSize', 'h3.fontSize']}
-          p={[2, 3, 4]}
-        >
-          styled-system
-        </BoxStyledSystem>
-      </StyledComponentsThemeProvider>,
-    );
-  })
-  // // ---
-  .add('Box emotion', () => {
-    ReactDOMServer.renderToString(
-      <EmotionTheme theme={materialSystemTheme}>
-        <BoxEmotion
-          color="primary.main"
-          bgcolor="background.paper"
-          fontFamily="h6.fontFamily"
-          fontSize={['h6.fontSize', 'h4.fontSize', 'h3.fontSize']}
-          p={[2, 3, 4]}
-          fuu={Math.round(Math.random() * 10000)}
-        >
-          emotion
-        </BoxEmotion>
-      </EmotionTheme>,
-    );
-  })
-  .add('Box @material-ui/styles', () => {
-    ReactDOMServer.renderToString(
-      <StylesThemeProvider theme={materialSystemTheme}>
-        <BoxStyles
-          color="primary.main"
-          bgcolor="background.paper"
-          fontFamily="h6.fontFamily"
-          fontSize={['h6.fontSize', 'h4.fontSize', 'h3.fontSize']}
-          p={[2, 3, 4]}
-          fuu={Math.round(Math.random() * 10000)}
-        >
-          @material-ui/styles
-        </BoxStyles>
-      </StylesThemeProvider>,
-    );
-  })
-  .add('Box styled-components', () => {
-    ReactDOMServer.renderToString(
-      <StyledComponentsThemeProvider theme={materialSystemTheme}>
-        <BoxStyleComponents
-          color="primary.main"
-          bgcolor="background.paper"
-          fontFamily="h6.fontFamily"
-          fontSize={['h6.fontSize', 'h4.fontSize', 'h3.fontSize']}
-          p={[2, 3, 4]}
-          fuu={Math.round(Math.random() * 10000)}
-        >
-          styled-components
-        </BoxStyleComponents>
-      </StyledComponentsThemeProvider>,
-    );
-  })
-  .add('Naked styled-components', () => {
-    ReactDOMServer.renderToString(
-      <StyledComponentsThemeProvider theme={materialSystemTheme}>
-        <NakedStyleComponents
-          color="primary.main"
-          bgcolor="background.paper"
-          fontFamily="h6.fontFamily"
-          fontSize={['h6.fontSize', 'h4.fontSize', 'h3.fontSize']}
-          p={[2, 3, 4]}
-          fuu={Math.round(Math.random() * 10000)}
-        >
-          styled-components
-        </NakedStyleComponents>
-      </StyledComponentsThemeProvider>,
-    );
-  })
   .on('cycle', (event) => {
     console.log(String(event.target));
   })