[system] Add browser benchmark

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\" && node scripts/perf.js",
     "prettier": "node ./scripts/prettier.js",
     "prettier:all": "node ./scripts/prettier.js write",
     "size:snapshot": "node scripts/sizeSnapshot/create",
@@ -88,6 +89,7 @@
     "chai-dom": "^1.8.1",
     "chalk": "^4.0.0",
     "compression-webpack-plugin": "^6.0.2",
+    "concurrently": "^5.3.0",
     "confusing-browser-globals": "^1.0.9",
     "core-js": "^2.6.11",
     "cross-env": "^7.0.0",
@@ -140,13 +142,15 @@
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-size-snapshot": "^0.12.0",
     "rollup-plugin-terser": "^7.0.0",
+    "serve-handler": "^6.1.3",
     "sinon": "^9.0.0",
     "size-limit": "^0.21.0",
     "tslint": "5.14.0",
     "typescript": "^4.0.2",
     "unist-util-visit": "^2.0.2",
     "url-loader": "^4.1.0",
     "vrtest-mui": "^0.3.4",
+    "wait-on": "^5.2.0",
     "webpack": "^4.41.0",
     "webpack-cli": "^3.3.9",
     "yargs": "^16.0.3",

scripts/perf.js

@@ -0,0 +1,106 @@
+const puppeteer = require('puppeteer');
+const { performance } = require('perf_hooks');
+const waitOn = require('wait-on');
+const handler = require('serve-handler');
+const http = require('http');
+
+const SERVER = 'localhost';
+const PORT = 1122;
+const APP = 'test/perf/debug';
+
+http.createServer((request, response) => {
+  return handler(request, response);
+}).listen(PORT, () => {
+  console.log(`Running at http://localhost:${PORT}`);
+});
+
+async function createBrowser() {
+  const browser = await puppeteer.launch();
+
+  return {
+    openPage: async url => {
+      const page = await browser.newPage();
+      await page.goto(url);
+
+      return {
+        page,
+        close: () => page.close(),
+      };
+    },
+    close: async () => browser.close(),
+  };
+}
+
+async function runMeasures(
+  browser,
+  testCase,
+  times,
+) {
+  const measures = [];
+
+  for (let i = 0; i < times; i++) {
+    const { page, close } = await browser.openPage(`http://${SERVER}:${PORT}/${APP}?${testCase}`);
+
+    const perf = await page.evaluate(_ => {
+      const { loadEventEnd, navigationStart } = performance.timing;
+      return loadEventEnd - navigationStart;
+    });
+
+    measures.push(perf);
+    await 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) {
+  await waitOn({
+    resources: [
+      `http://${SERVER}:${PORT}/${APP}`
+    ],
+  });
+
+  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/index.js', 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();

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>

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,
+);

test/perf/tests/box-emotion/index.js

@@ -0,0 +1,31 @@
+
+import React from 'react';
+import { createMuiTheme } from '@material-ui/core/styles';
+import styledEmotion from '@emotion/styled';
+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 (
+    <>
+      {new Array(100).fill().map(() => (
+        <EmotionTheme theme={materialSystemTheme}>
+          <BoxEmotion
+            color="primary.main"
+            bgcolor="background.paper"
+            fontFamily="h6.fontFamily"
+            fontSize={['h6.fontSize', 'h4.fontSize', 'h3.fontSize']}
+            p={[2, 3, 4]}
+          >
+            emotion
+          </BoxEmotion>
+      </EmotionTheme>
+      ))}
+    </>
+  );
+}
+
+export default App;

test/perf/tests/box-material-ui-styles/index.js

@@ -0,0 +1,30 @@
+
+import React from 'react';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider as StylesThemeProvider } from '@material-ui/styles';
+import BoxStyles from '@material-ui/core/Box';
+
+const materialSystemTheme = createMuiTheme();
+
+const App = () => {
+  return (
+    <>
+      {new Array(100).fill().map(() => (
+        <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;

test/perf/tests/box-styled-components/index.js

@@ -0,0 +1,32 @@
+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 (
+    <>
+      {new Array(100).fill().map(() => (
+        <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;

test/perf/tests/material-ui-system-all-inclusive/index.js

@@ -0,0 +1,21 @@
+
+import React from 'react';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { styleFunction } from '@material-ui/core/Box';
+
+const materialSystemTheme = createMuiTheme();
+
+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;

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;

test/perf/tests/material-ui-system-compose/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { spacing, palette, typography, compose } from '@material-ui/system';
+
+const materialSystem = compose(palette, spacing, typography);
+const materialSystemTheme = createMuiTheme();
+
+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;

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;

test/perf/tests/naked-styled-components/index.js

@@ -0,0 +1,32 @@
+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 (
+    <>
+      {new Array(100).fill().map(() => (
+        <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;