mui · mnajdova · Oct 12, 2020 · Sep 25, 2020 · Sep 25, 2020 · Sep 25, 2020
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "jsonlint": "node scripts/jsonlint.js",
     "lint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx",
     "lint:ci": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx",
+    "perf": "yarn webpack --config test/perf/webpack.config.js --mode \"production\" && concurrently \"npx serve .\" \"npx wait-on http://localhost:5000/test/perf/debug && node scripts/perf.js \"",
     "prettier": "node ./scripts/prettier.js",
     "prettier:all": "node ./scripts/prettier.js write",
     "size:snapshot": "node scripts/sizeSnapshot/create",
@@ -189,5 +190,9 @@
     "packages/*",
     "docs",
     "framer"
-  ]
+  ],
+  "dependencies": {
+    "concurrently": "^5.3.0",
+    "wait-on": "^5.2.0"
+  }
 }
diff --git a/scripts/perf.js b/scripts/perf.js
@@ -0,0 +1,87 @@
+const puppeteer = require('puppeteer');
+const { performance } = require('perf_hooks');
+
+const SERVER = 'localhost';
+const PORT = 5000;
+const APP = 'test/perf/debug';
+
+async function createBrowser() {
+  const browser = await puppeteer.launch();
+
+  return {
+    openPage: async url => {
+      const page = await browser.newPage();
+      await page.goto(url);
+
+      return {
+        close: async () => page.close(),
+      };
+    },
+    close: async () => browser.close(),
+  };
+}
+
+async function runMeasures(
+  browser,
+  testCase,
+  times,
+) {
+  const measures = [];
+
+  for (let i = 0; i < times; i++) {
+    var start = performance.now();
+    const page = await browser.openPage(`http://${SERVER}:${PORT}/${APP}?${testCase}`);
+    const end = performance.now();
+
+    measures.push(end - start);
+    await page.close();
+  }
+
+  return measures;
+}
+
+const printMeasures = (measures) => {
+  console.log('\nMeasures\n');
+
+  Object.keys(measures).forEach(measureKey => {
+    console.log(`\n${measureKey}:\n`);
+
+    let sum = 0;
+    const totalNum = measures[measureKey].length;
+
+    measures[measureKey].forEach(measure => {
+      sum += measure;
+      console.log(`${measure.toFixed(2)}ms`);
+    });
+
+    console.log("-------------");
+    console.log(`Avg: ${Number(sum/totalNum).toFixed(2)}ms\n`)
+  });
+}
+
+async function run(argv) {
+  const browser = await createBrowser();
+  let measures = {};
+
+  try {
+    measures['@material-ui/system colors'] = await runMeasures(browser, './material-ui-system-colors/index.js', 10);
+    measures['styled-system colors'] = await runMeasures(browser, './styled-system-colors/index.js', 10);
+    measures['@material-ui/system spaces'] = await runMeasures(browser, './material-ui-system-spaces/index.js', 10);
+    measures['styled-system spaces'] = await runMeasures(browser, './styled-system-spaces/index.js', 10);
+    measures['@material-ui/system compose'] = await runMeasures(browser, './material-ui-system-compose/index.js', 10);
+    measures['styled-system compose'] = await runMeasures(browser, './styled-system-compose/index.js', 10);
+    measures['@material-ui/core all-inclusive'] = await runMeasures(browser, './material-ui-system-all-inclusive/index.js', 10)
+    measures['styled-components Box + @material-ui/system'] = await runMeasures(browser, './styled-components-box-material-ui-system/index.js', 10);
+    measures['styled-components Box + styled-system'] = await runMeasures(browser, './styled-components-box-styled-system', 10);
+    measures['Box emotion'] = await runMeasures(browser, './box-emotion/index.js', 10);
+    measures['Box @material-ui/styles'] = await runMeasures(browser, './box-material-ui-styles/index.js', 10);
+    measures['Box styled-components'] = await runMeasures(browser, './box-styled-components/index.js', 10);
+    measures['Naked styled-components'] = await runMeasures(browser, './naked-styled-components/index.js', 10);
+  } finally {
+    await browser.close();
+  }
+
+  printMeasures(measures);
+} 
+
+run();
diff --git a/test/perf/debug.html b/test/perf/debug.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Perf scenario</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
+    <style>body { background-color: white; }</style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="../../tmp/tests.js"></script>
+  </body>
+</html>
diff --git a/test/perf/index.js b/test/perf/index.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+// Get all the tests specifically written for preventing regressions.
+const requirePerfTests = require.context('./tests', true, /(js|ts|tsx)$/);
+
+const rootEl = document.getElementById('root');
+
+// ./Button/index.js
+// ./Dialog/index.js
+
+const testSuitePath = window.location.search.replace("?", "");
+
+const Component = requirePerfTests(testSuitePath).default;
+
+ReactDOM.render(
+  <Component />,
+  rootEl,
+);
diff --git a/test/perf/tests/box-emotion/index.js b/test/perf/tests/box-emotion/index.js
@@ -0,0 +1,26 @@
+
+import React from 'react';
+import { ThemeProvider as EmotionTheme } from 'emotion-theming';
+import { styleFunction } from '@material-ui/core/Box';
+
+const materialSystemTheme = createMuiTheme();
+const BoxEmotion = styledEmotion('div')(styleFunction);
+
+const App = () => {
+  return (
+    <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>
+  );
+}
+
+export default App;
diff --git a/test/perf/tests/box-material-ui-styles/index.js b/test/perf/tests/box-material-ui-styles/index.js
@@ -0,0 +1,25 @@
+
+import React from 'react';
+import { ThemeProvider as StylesThemeProvider } from '@material-ui/styles';
+import BoxStyles from '@material-ui/core/Box';
+
+const materialSystemTheme = createMuiTheme();
+
+const App = () => {
+  return (
+    <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>
+  );
+}
+
+export default App;
diff --git a/test/perf/tests/box-styled-components/index.js b/test/perf/tests/box-styled-components/index.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { styleFunction } from '@material-ui/core/Box';
+import styledComponents, {
+  ThemeProvider as StyledComponentsThemeProvider,
+} from 'styled-components';
+
+const materialSystemTheme = createMuiTheme();
+const BoxStyleComponents = styledComponents('div')(styleFunction);
+
+const App = () => {
+  return (
+    <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>
+  );
+}
+
+export default App;
diff --git a/test/perf/tests/material-ui-system-all-inclusive/index.js b/test/perf/tests/material-ui-system-all-inclusive/index.js
@@ -0,0 +1,18 @@
+
+import React from 'react';
+import { styleFunction } from '@material-ui/core/Box';
+
+const App = () => {
+  const result = styleFunction({
+    theme: materialSystemTheme,
+    color: 'primary.main',
+    bgcolor: 'background.paper',
+    fontFamily: 'h6.fontFamily',
+    fontSize: ['h6.fontSize', 'h4.fontSize', 'h3.fontSize'],
+    p: [2, 3, 4],
+  });
+
+  return null;
+}
+
+export default App;
diff --git a/test/perf/tests/material-ui-system-colors/index.js b/test/perf/tests/material-ui-system-colors/index.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { palette } from '@material-ui/system';
+
+const App = () => {
+  const result = palette({
+    theme: {},
+    bgcolor: ['red', 'blue'],
+  });
+
+  return null;
+}
+
+export default App;
diff --git a/test/perf/tests/material-ui-system-compose/index.js b/test/perf/tests/material-ui-system-compose/index.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { spacing, palette, typography, compose } from '@material-ui/system';
+
+const materialSystem = compose(palette, spacing, typography);
+
+const App = () => {
+  const result = materialSystem({
+    theme: materialSystemTheme,
+    color: 'primary.main',
+    bgcolor: 'background.paper',
+    fontFamily: 'h6.fontFamily',
+    fontSize: ['h6.fontSize', 'h4.fontSize', 'h3.fontSize'],
+    p: [2, 3, 4],
+  });
+
+  return null;
+}
+
+export default App;
diff --git a/test/perf/tests/material-ui-system-spaces/index.js b/test/perf/tests/material-ui-system-spaces/index.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { spacing } from '@material-ui/system';
+
+const App = () => {
+  const result = spacing({
+    theme: {},
+    p: [1, 2, 3],
+  });
+
+  return null;
+}
+
+export default App;
diff --git a/test/perf/tests/naked-styled-components/index.js b/test/perf/tests/naked-styled-components/index.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { spacing } from '@material-ui/system';
+import styledComponents, {
+  ThemeProvider as StyledComponentsThemeProvider,
+} from 'styled-components';
+
+const materialSystemTheme = createMuiTheme();
+const NakedStyleComponents = styledComponents('div')(spacing);
+
+const App = () => {
+  return (
+    <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>
+  );
+}
+
+export default App;
diff --git a/test/perf/tests/styled-components-box-material-ui-system/index.js b/test/perf/tests/styled-components-box-material-ui-system/index.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { createMuiTheme } from '@material-ui/core/styles';
+import styledComponents, {
+  ThemeProvider as StyledComponentsThemeProvider,
+} from 'styled-components';
+import { spacing, palette, typography, compose } from '@material-ui/system';
+
+const materialSystem = compose(palette, spacing, typography);
+const materialSystemTheme = createMuiTheme();
+const BoxMaterialSystem = styledComponents('div')(materialSystem);
+
+const App = () => {
+  return (
+    <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>
+  );
+}
+
+export default App;
+
diff --git a/test/perf/tests/styled-components-box-styled-system/index.js b/test/perf/tests/styled-components-box-styled-system/index.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import styledComponents, {
+  ThemeProvider as StyledComponentsThemeProvider,
+} from 'styled-components';
+import { space, color, fontFamily, fontSize, compose } from 'styled-system';
+
+const styledSystem = compose(color, space, fontFamily, fontSize);
+const BoxStyledSystem = styledComponents('div')(styledSystem);
+
+const styledSystemTheme = createMuiTheme();
+styledSystemTheme.breakpoints = ['40em', '52em', '64em'];
+styledSystemTheme.colors = styledSystemTheme.palette;
+styledSystemTheme.fontSizes = styledSystemTheme.typography;
+styledSystemTheme.fonts = styledSystemTheme.typography;
+
+const App = () => {
+  return (
+    <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>
+  );
+}
+
+export default App;
+
diff --git a/test/perf/tests/styled-system-colors/index.js b/test/perf/tests/styled-system-colors/index.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { color } from 'styled-system';
+
+const App = () => {
+  const result = color({
+    theme: {},
+    bg: ['red', 'blue'],
+  });;
+
+  return null;
+}
+
+export default App;