mui · m4theushw · Sep 29, 2021 · Sep 24, 2021 · Sep 29, 2021 · Sep 29, 2021
diff --git a/babel.config.js b/babel.config.js
@@ -1,3 +1,5 @@
+const path = require('path');
+
 let defaultPresets;
 
 // We release a ES version of Material-UI.
@@ -17,12 +19,17 @@ if (process.env.BABEL_ENV === 'es') {
   ];
 }
 
+function resolveAliasPath(relativeToBabelConf) {
+  const resolvedPath = path.relative(process.cwd(), path.resolve(__dirname, relativeToBabelConf));
+  return `./${resolvedPath.replace('\\', '/')}`;
+}
+
 const defaultAlias = {
-  '@mui/x-data-grid': './packages/grid/data-grid/src',
-  '@mui/x-data-grid-generator': './packages/grid/x-grid-data-generator/src',
-  '@mui/x-data-grid-pro': './packages/grid/x-grid/src',
-  '@mui/x-license-pro': './packages/x-license/src',
-  docs: './node_modules/@material-ui/monorepo/docs',
+  '@mui/x-data-grid': resolveAliasPath('./packages/grid/data-grid/src'),
+  '@mui/x-data-grid-generator': resolveAliasPath('./packages/grid/x-grid-data-generator/src'),
+  '@mui/x-data-grid-pro': resolveAliasPath('./packages/grid/x-grid/src'),
+  '@mui/x-license-pro': resolveAliasPath('./packages/x-license/src'),
+  docs: resolveAliasPath('./node_modules/@material-ui/monorepo/docs'),
 };
 
 module.exports = {
@@ -56,5 +63,15 @@ module.exports = {
     test: {
       sourceMaps: 'both',
     },
+    benchmark: {
+      plugins: [
+        [
+          'babel-plugin-module-resolver',
+          {
+            alias: defaultAlias,
+          },
+        ],
+      ],
+    },
   },
 };
diff --git a/benchmark/browser/index.html b/benchmark/browser/index.html
@@ -0,0 +1,17 @@
+<!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="/dist/index.js"></script>
+  </body>
+</html>
diff --git a/benchmark/browser/index.js b/benchmark/browser/index.js
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+
+// Get all the scenarios
+const requirePerfScenarios = require.context('./scenarios', true, /(js|ts|tsx)$/);
+
+const rootEl = document.getElementById('root');
+
+const scenarioSuitePath = window.location.search.replace('?', '');
+
+const Component = requirePerfScenarios(scenarioSuitePath).default;
+
+ReactDOM.render(<Component />, rootEl);
diff --git a/benchmark/browser/scenarios/ag-grid/index.js b/benchmark/browser/scenarios/ag-grid/index.js
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import Paper from '@mui/material/Paper';
+import { AgGridColumn, AgGridReact } from 'ag-grid-react';
+import 'ag-grid-community/dist/styles/ag-grid.css';
+import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
+
+const ROWS = 100000;
+const COLUMNS = 10000;
+
+const columns = [];
+const rows = [];
+
+for (let columnIdx = 0; columnIdx < COLUMNS; columnIdx += 1) {
+  columns.push({
+    field: `col-${columnIdx}`,
+    valueGetter: (row) => `${row.data.id} ${columnIdx}`,
+  });
+}
+
+for (let rowIdx = 0; rowIdx < ROWS; rowIdx += 1) {
+  rows.push({ id: rowIdx });
+}
+
+export default function AgGrid() {
+  return (
+    <Paper className="ag-theme-alpine" sx={{ height: 'calc(100vh - 16px)', width: '100%' }}>
+      <AgGridReact rowData={rows} rowHeight={32}>
+        {columns.map((column) => (
+          <AgGridColumn
+            key={column.field}
+            field={column.field}
+            width={100}
+            valueGetter={column.valueGetter}
+          />
+        ))}
+      </AgGridReact>
+    </Paper>
+  );
+}
diff --git a/benchmark/browser/scenarios/data-grid-pro/index.js b/benchmark/browser/scenarios/data-grid-pro/index.js
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import Paper from '@mui/material/Paper';
+import { DataGridPro as MuiDataGridPro } from '@mui/x-data-grid-pro';
+
+const ROWS = 100000;
+const COLUMNS = 100000;
+
+const columns = [];
+const rows = [];
+
+for (let columnIdx = 0; columnIdx < COLUMNS; columnIdx += 1) {
+  columns.push({
+    field: `col-${columnIdx}`,
+    valueGetter: (row) => `${row.id} ${columnIdx}`,
+    width: 100,
+  });
+}
+
+for (let rowIdx = 0; rowIdx < ROWS; rowIdx += 1) {
+  rows.push({ id: rowIdx });
+}
+
+export default function DataGridPro() {
+  return (
+    <Paper sx={{ height: 'calc(100vh - 16px)', width: '100%' }}>
+      <MuiDataGridPro rows={rows} rowHeight={32} columns={columns} hideFooter />
+    </Paper>
+  );
+}
diff --git a/benchmark/browser/scenarios/mui-plus/index.js b/benchmark/browser/scenarios/mui-plus/index.js
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Paper from '@mui/material/Paper';
+import { DataGrid } from 'mui-plus';
+
+const ROWS = 100000;
+const COLUMNS = 100000;
+
+const columns = [];
+const rows = [];
+
+for (let columnIdx = 0; columnIdx < COLUMNS; columnIdx += 1) {
+  columns.push({
+    key: `col-${columnIdx}`,
+    getValue: (row) => `${row.idx} ${columnIdx}`,
+    width: 100,
+  });
+}
+
+for (let rowIdx = 0; rowIdx < ROWS; rowIdx += 1) {
+  rows.push({ idx: rowIdx });
+}
+
+export default function MuiPlus() {
+  return (
+    <Paper
+      sx={{
+        height: 'calc(100vh - 16px)',
+        width: '100%',
+        '& .MuiPlusTableCell': {
+          boxSizing: 'border-box',
+        },
+      }}
+    >
+      <DataGrid data={rows} rowHeight={32} defaultColumns={columns} />
+    </Paper>
+  );
+}
diff --git a/benchmark/browser/scenarios/react-virtualized/index.js b/benchmark/browser/scenarios/react-virtualized/index.js
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import Paper from '@mui/material/Paper';
+import { AutoSizer, Grid } from 'react-virtualized';
+
+const ROWS = 100000;
+const COLUMNS = 100000;
+
+const columns = [];
+const rows = [];
+
+for (let columnIdx = 0; columnIdx < COLUMNS; columnIdx += 1) {
+  columns.push({
+    key: `col-${columnIdx}`,
+  });
+}
+
+for (let rowIdx = 0; rowIdx < ROWS; rowIdx += 1) {
+  rows.push({ idx: rowIdx });
+}
+
+export default function ReactVirtualized() {
+  return (
+    <Paper sx={{ height: 'calc(100vh - 16px)', width: '100%' }}>
+      <AutoSizer>
+        {({ height, width }) => (
+          <Grid
+            columnWidth={100}
+            columnCount={columns.length}
+            height={height}
+            rowHeight={32}
+            overscanRowCount={10}
+            cellRenderer={({ key, style, rowIndex, columnIndex }) => {
+              return (
+                <div key={key} style={style}>
+                  {`${rowIndex} ${columnIndex}`}
+                </div>
+              );
+            }}
+            rowCount={rows.length}
+            width={width}
+          />
+        )}
+      </AutoSizer>
+    </Paper>
+  );
+}