benchmarks/src/index.js
import App from './app/App'
import impl from './impl'
import Tree from './cases/Tree'
import SierpinskiTriangle from './cases/SierpinskiTriangle'
import React from 'react'
import ReactDOM from 'react-dom'
const implementations = impl
const packageNames = Object.keys(implementations)
const createTestBlock = (fn) => {
return packageNames.reduce((testSetups, packageName) => {
const { name, components, version } = implementations[packageName]
const {
Component,
getComponentProps,
sampleCount,
Provider,
benchmarkType,
} = fn(components)
testSetups[packageName] = {
Component,
getComponentProps,
sampleCount,
Provider,
benchmarkType,
version,
name,
}
return testSetups
}, {})
}
const tests = {
'Mount deep tree': createTestBlock((components) => ({
benchmarkType: 'mount',
Component: Tree,
getComponentProps: () => ({
breadth: 2,
components,
depth: 7,
id: 0,
wrap: 1,
}),
Provider: components.Provider,
sampleCount: 200,
})),
'Mount wide tree': createTestBlock((components) => ({
benchmarkType: 'mount',
Component: Tree,
getComponentProps: () => ({
breadth: 6,
components,
depth: 3,
id: 0,
wrap: 2,
}),
Provider: components.Provider,
sampleCount: 200,
})),
'Update dynamic styles': createTestBlock((components) => ({
benchmarkType: 'update',
Component: SierpinskiTriangle,
getComponentProps: ({ cycle }) => {
return { components, s: 200, renderCount: cycle, x: 0, y: 0 }
},
Provider: components.Provider,
sampleCount: 300,
})),
}
ReactDOM.render(<App tests={tests} />, document.querySelector('.root'))