init project

docs/pages/performance/slider-emotion.js

@@ -0,0 +1,24 @@
+import { NoSsr } from '@mui/base/NoSsr';
+import Slider from '@mui/material/Slider';
+
+const data = {
+  name: 'Frozen yoghurt',
+  calories: 159,
+  fat: 6.0,
+  carbs: 24,
+  protein: 4.0,
+};
+
+const rows = Array.from(new Array(500)).map(() => data);
+
+export default function SliderEmotion() {
+  return (
+    <NoSsr defer>
+      <div style={{ width: 300 }}>
+        {rows.map((row, index) => (
+          <Slider value={20} key={index} />
+        ))}
+      </div>
+    </NoSsr>
+  );
+}

docs/pages/performance/slider-jss.js

@@ -0,0 +1,24 @@
+import { NoSsr } from '@mui/base/NoSsr';
+import Slider from '@mui/material/Slider';
+
+const data = {
+  name: 'Frozen yoghurt',
+  calories: 159,
+  fat: 6.0,
+  carbs: 24,
+  protein: 4.0,
+};
+
+const rows = Array.from(new Array(500)).map(() => data);
+
+export default function SliderJss() {
+  return (
+    <NoSsr defer>
+      <div style={{ width: 300 }}>
+        {rows.map((row, index) => (
+          <Slider value={20} key={index} />
+        ))}
+      </div>
+    </NoSsr>
+  );
+}

docs/pages/performance/system.js

@@ -0,0 +1,27 @@
+import { NoSsr } from '@mui/base/NoSsr';
+import Box from '@mui/material/Box';
+
+export default function SxPropBoxMaterialUI() {
+  return (
+    <NoSsr defer>
+      {new Array(1000).fill().map((_, index) => (
+        <Box
+          key={index}
+          sx={{
+            width: 200,
+            height: 200,
+            borderWidth: '3px',
+            borderColor: 'white',
+            backgroundColor: ['primary.main', 'text.primary', 'background.paper'],
+            borderStyle: ['dashed', 'solid', 'dotted'],
+            '&:hover': {
+              backgroundColor: (theme) => theme.palette.secondary.dark,
+            },
+          }}
+        >
+          test case
+        </Box>
+      ))}
+    </NoSsr>
+  );
+}

docs/pages/performance/table-component.js

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { NoSsr } from '@mui/base/NoSsr';
+
+const createComponent = (defaultComponent) => {
+  const MyComponent = React.forwardRef(function MyComponent(props, ref) {
+    const { component: Component = defaultComponent, ...other } = props;
+
+    return <Component ref={ref} {...other} />;
+  });
+
+  MyComponent.propTypes = {
+    component: PropTypes.elementType,
+  };
+
+  return MyComponent;
+};
+
+const Table = createComponent('table');
+const TableHead = createComponent('thead');
+const TableRow = createComponent('tr');
+const TableCell = createComponent('td');
+const TableBody = createComponent('tbody');
+
+const data = { name: 'Frozen yoghurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0 };
+const rows = Array.from(new Array(100)).map(() => data);
+
+export default function TableComponent() {
+  return (
+    <NoSsr defer>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Dessert (100g serving)</TableCell>
+            <TableCell>Calories</TableCell>
+            <TableCell>Fat&nbsp;(g)</TableCell>
+            <TableCell>Carbs&nbsp;(g)</TableCell>
+            <TableCell>Protein&nbsp;(g)</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row, index) => (
+            <TableRow key={index}>
+              <TableCell component="th" scope="row">
+                {row.name}
+              </TableCell>
+              <TableCell>{row.calories}</TableCell>
+              <TableCell>{row.fat}</TableCell>
+              <TableCell>{row.carbs}</TableCell>
+              <TableCell>{row.protein}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </NoSsr>
+  );
+}

docs/pages/performance/table-emotion.js

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+// import { styled } from '@mui/material/styles';
+import { NoSsr } from '@mui/base/NoSsr';
+
+const createComponent = (defaultComponent) => {
+  const Root = styled('div')`
+    background: pink;
+  `;
+
+  const MyComponent = React.forwardRef(function MyComponent(props, ref) {
+    const { component = defaultComponent, ...other } = props;
+
+    return <Root as={component} ref={ref} {...other} />;
+  });
+
+  MyComponent.propTypes = {
+    component: PropTypes.elementType,
+  };
+
+  return MyComponent;
+};
+
+const Table = createComponent('table');
+const TableHead = createComponent('thead');
+const TableRow = createComponent('tr');
+const TableCell = createComponent('td');
+const TableBody = createComponent('tbody');
+
+const data = { name: 'Frozen yoghurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0 };
+const rows = Array.from(new Array(100)).map(() => data);
+
+export default function TableEmotion() {
+  return (
+    <NoSsr defer>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Dessert (100g serving)</TableCell>
+            <TableCell>Calories</TableCell>
+            <TableCell>Fat&nbsp;(g)</TableCell>
+            <TableCell>Carbs&nbsp;(g)</TableCell>
+            <TableCell>Protein&nbsp;(g)</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row, index) => (
+            <TableRow key={index}>
+              <TableCell component="th" scope="row">
+                {row.name}
+              </TableCell>
+              <TableCell>{row.calories}</TableCell>
+              <TableCell>{row.fat}</TableCell>
+              <TableCell>{row.carbs}</TableCell>
+              <TableCell>{row.protein}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </NoSsr>
+  );
+}

docs/pages/performance/table-mui.js

@@ -0,0 +1,40 @@
+import { NoSsr } from '@mui/base/NoSsr';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+
+const data = { name: 'Frozen yoghurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0 };
+const rows = Array.from(new Array(100)).map(() => data);
+
+export default function TableMui() {
+  return (
+    <NoSsr defer>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Dessert (100g serving)</TableCell>
+            <TableCell>Calories</TableCell>
+            <TableCell>Fat&nbsp;(g)</TableCell>
+            <TableCell>Carbs&nbsp;(g)</TableCell>
+            <TableCell>Protein&nbsp;(g)</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row, index) => (
+            <TableRow key={index}>
+              <TableCell component="th" scope="row">
+                {row.name}
+              </TableCell>
+              <TableCell>{row.calories}</TableCell>
+              <TableCell>{row.fat}</TableCell>
+              <TableCell>{row.carbs}</TableCell>
+              <TableCell>{row.protein}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </NoSsr>
+  );
+}

docs/pages/performance/table-raw.js

@@ -0,0 +1,33 @@
+import { NoSsr } from '@mui/base/NoSsr';
+
+const data = { name: 'Frozen yoghurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0 };
+const rows = Array.from(new Array(100)).map(() => data);
+
+export default function TableRaw() {
+  return (
+    <NoSsr defer>
+      <table>
+        <thead>
+          <tr>
+            <th>Dessert (100g serving)</th>
+            <th>Calories</th>
+            <th>Fat&nbsp;(g)</th>
+            <th>Carbs&nbsp;(g)</th>
+            <th>Protein&nbsp;(g)</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, index) => (
+            <tr key={index}>
+              <th scope="row">{row.name}</th>
+              <td>{row.calories}</td>
+              <td>{row.fat}</td>
+              <td>{row.carbs}</td>
+              <td>{row.protein}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </NoSsr>
+  );
+}

docs/pages/performance/table-styled-components.js

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { NoSsr } from '@mui/base/NoSsr';
+
+const createComponent = (defaultComponent) => {
+  const MyComponent = React.forwardRef(function MyComponent(props, ref) {
+    const { component: Component = defaultComponent, ...other } = props;
+
+    return <Component ref={ref} {...other} />;
+  });
+
+  MyComponent.propTypes = {
+    component: PropTypes.elementType,
+  };
+
+  return styled(MyComponent)`
+    background: pink;
+  `;
+};
+
+const Table = createComponent('table');
+const TableHead = createComponent('thead');
+const TableRow = createComponent('tr');
+const TableCell = createComponent('td');
+const TableBody = createComponent('tbody');
+
+const data = { name: 'Frozen yoghurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0 };
+const rows = Array.from(new Array(100)).map(() => data);
+
+export default function TableStyledComponents() {
+  return (
+    <NoSsr defer>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Dessert (100g serving)</TableCell>
+            <TableCell>Calories</TableCell>
+            <TableCell>Fat&nbsp;(g)</TableCell>
+            <TableCell>Carbs&nbsp;(g)</TableCell>
+            <TableCell>Protein&nbsp;(g)</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row, index) => (
+            <TableRow key={index}>
+              <TableCell component="th" scope="row">
+                {row.name}
+              </TableCell>
+              <TableCell>{row.calories}</TableCell>
+              <TableCell>{row.fat}</TableCell>
+              <TableCell>{row.carbs}</TableCell>
+              <TableCell>{row.protein}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </NoSsr>
+  );
+}