{"_id":"@anyroad/react-component-benchmark","_rev":"1-b4ea0eb1c1d49c36f2af53e8f123e759","name":"@anyroad/react-component-benchmark","dist-tags":{"latest":"0.0.4"},"versions":{"0.0.4":{"name":"@anyroad/react-component-benchmark","version":"0.0.4","description":"A component utility for estimating benchmarks of React components","main":"dist/index.js","author":{"name":"Paul Armstrong","email":"paul@spaceyak.com"},"license":"MIT","publishConfig":{"access":"public"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.0.0","babel-jest":"^21.0.2","babel-plugin-syntax-dynamic-import":"^6.18.0","babel-plugin-syntax-flow":"^6.18.0","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-plugin-transform-react-jsx-self":"^6.22.0","babel-plugin-transform-react-jsx-source":"^6.22.0","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.6.0","babel-preset-react":"^6.24.1","enzyme":"^3.0.0","enzyme-adapter-react-16":"^1.0.0","enzyme-to-json":"^3.0.0","eslint":"^4.7.2","eslint-config-prettier":"^2.5.0","eslint-plugin-flowtype":"^2.35.1","eslint-plugin-promise":"^3.5.0","eslint-plugin-react":"^7.3.0","flow-bin":"^0.55.0","flow-copy-source":"^1.2.1","flow-typed":"^2.1.5","husky":"^0.14.3","jest":"^21.2.1","lint-staged":"^4.2.2","mkdirp":"^0.5.1","prettier":"^1.7.0","raf":"^3.3.2","react":"^16.0.0","react-dom":"^16.0.0","react-test-renderer":"^16.0.0","rimraf":"^2.6.2"},"peerDependencies":{"react":">= 15.4.0 < 16.0.0 || ^16.0.0","react-dom":">= 15.4.0 < 16.0.0 || ^16.0.0"},"scripts":{"build":"npm run build:module && npm run build:flow","build:module":"cd src && babel *.js -d ../dist","build:flow":"flow-copy-source -i __tests__/*.js src dist","clean":"rimraf dist","flow":"flow","lint":"eslint ./","prebuild":"rimraf dist","precommit":"lint-staged","prepublish":"npm run build","test":"jest"},"lint-staged":{"*.js":["lint","prettier --write --single-quote --print-width=120","git add"]},"jest":{"moduleFileExtensions":["js"],"name":"react-component-benchmark","resetMocks":true,"roots":["<rootDir>"],"setupTestFrameworkScriptFile":"./scripts/setup-jest.js","setupFiles":["raf/polyfill"],"snapshotSerializers":["enzyme-to-json/serializer"],"testEnvironment":"jsdom","testRegex":"/__tests__/.*\\.test\\.js$","transform":{"^.+\\.js$":"babel-jest"}},"dependencies":{},"gitHead":"427e174ffff8b40164f09a852bdc40c64627b17d","_id":"@anyroad/react-component-benchmark@0.0.4","_nodeVersion":"15.5.1","_npmVersion":"7.3.0","dist":{"integrity":"sha512-Y8qD/o6IfDNK0MkSbNpFDH7IfTeZHhhMjppq8S5BbtaHAwv7bULr8Gn+XtU8e9tkg+lWzRRvWueo5U2uD/2eeg==","shasum":"9dffb0f4052045014dc5d5804861f8ad3dca176b","tarball":"https://registry.npmjs.org/@anyroad/react-component-benchmark/-/react-component-benchmark-0.0.4.tgz","fileCount":15,"unpackedSize":25262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCXOBCRA9TVsSAnZWagAAasUP/3e2q1fgOh6pln+4zwud\nBAKfHvJEIoL6ecAlWKIUqFdsJOnzIg3svXnF3ZNApdeaNLH2TC4+sOGlRNUk\nk0n3hq3audK7/isQMdm0iSfm7NT+D8u2NTS9fIoRZewjpFWZJUKP7WvtduFA\nsnq8c/ZBnKJRKhUH2SH4Bt7Ld6x3K1qMRb+8VDvgMOLWmptWh2Yqf+o6P0Na\nqE3cBQfXjx4QIjx2L8PqT8F3rt9aGKAfEUB3XUroUxaYN3GqcMwZ24COLm7C\n03W2YqWz6WDItaecV5tDz8+RyKfR1Ww+4iMWZfm4dDzHq0SAowLsrkn69wsA\nwmV80oVXNqylhsUp6nYnnIL9v08fxTTG21UP8wn+BVX5V4HN/27ysWZctLsa\n707cjBHdwVC+82rU627YwVQ/JLvAObDqKZmgViCHfUTcIeQ6oG7s5lCxzRv6\nuOfXjyTwDvlosXyU3SR9VPIratkCbmAabF8lQGaW0b8z9mp3K65/pbYTlaAF\nnInr4OU6rBgPENCbVbToQEoApRxLkY6crIHhhWfH0gXRAaUflU+Wgpw8EgSU\n1XKPi89Rm6wGO1v+9uAgkyRFWcETerFiAU95qBaTpn18PNLiMknfnMiMvzMo\nbrd9HxwT5ND0AeUfR7DRcN/1xkaxN6HM85GRR90miVu5kuc7U8v3FoEf8U2X\nD5M8\r\n=0tod\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaTugzCoHjX3tNoHsEP9f7yQkt+fld1BHAQFGUuLHvxAIhAPX2yr+QIm+o783kFnOp7hXgxKBT3EjypPHCESvq2fVQ"}]},"_npmUser":{"name":"anyroad","email":"andrei.alikov@gmail.com"},"directories":{},"maintainers":[{"name":"anyroad","email":"andrei.alikov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-component-benchmark_0.0.4_1611232129268_0.709055552064191"},"_hasShrinkwrap":false}},"time":{"created":"2021-01-21T12:28:49.167Z","0.0.4":"2021-01-21T12:28:49.376Z","modified":"2022-04-04T14:27:29.584Z"},"maintainers":[{"name":"anyroad","email":"andrei.alikov@gmail.com"}],"description":"A component utility for estimating benchmarks of React components","author":{"name":"Paul Armstrong","email":"paul@spaceyak.com"},"license":"MIT","readme":"# React Component Benchmark [![Build Status](https://img.shields.io/travis/paularmstrong/react-component-benchmark/master.svg?style=flat-square)](https://travis-ci.org/paularmstrong/react-component-benchmark)\n\nThis project aims to provide a method for gathering benchmarks of component tree *mount*, *update*, and *unmount* timings.\n\nPlease note that the values returned are *estimates*. Since this project does not hook into the React renderer directly, the values gathered are not 100% accurate and may vary slightly because they're taken from a wrapping component. That being said, running a large sample set should give you a confident benchmark metric.\n\n## Motivation\n\nHistorically, React has provided `react-addons-perf` in order to help gain insight into the performance of mounting, updating, and unmounting components. Unfortunately, as of React 16, it has been deprecated. Additionally, before deprecation, it was not usable in production React builds, making it less useful for many applications.\n\n## Usage\n\nSee the [examples](./examples) directory for ideas on how you might integrate this into your own project, whether in your [user-interface](./examples/ui/index.js) or your [automated tests](./examples/tests/jest.js).\n\n### Quick Start\n\n```js\nimport Benchmark, { BenchmarkType } from 'react-component-benchmark';\n\nclass MyComponentBenchmark extends React.Component {\n  render() {\n    return (\n      <div>\n        <button onClick={this._start}>Run</button>\n        <Benchmark\n          component={MyComponent}\n          componentProps={componentProps}\n          onComplete={this._handleComplete}\n          ref={this._setBenchRef}\n          samples={50}\n          timeout={10000}\n          type={BenchmarkType.MOUNT}\n        />\n      </div>\n    );\n  }\n\n  _start = () => { this._benchmark.start(); };\n\n  _handleComplete = (results) => {\n    console.log(results);\n  };\n\n  _setBenchRef = (ref) => { this._benchmark = ref; };\n}\n```\n\n### Benchmark props\n\n* `component`: *typeof React.Component*\n* `componentProps`: *object* Properties to be given to `component` when rendering\n* `onComplete`: *(x: BenchResultsType) => void*\n* `samples`: *number* Samples to run (default `50`)\n* `timeout`: *number* Amount of time in milliseconds to stop running (default `10000`)\n* `type`: *string* One of `'mount'`, `'update'`, or `'unmount'`. Also available from `BenchmarkType`.\n\n### In tests\n\nSee [examples/tests](./examples/tests/) for various test integrations.\n\n## Results\n\n*Note: All times and timestamps are in milliseconds. High resolution times provided when available.*\n\n* `startTime`: *number* Timestamp of when the run started\n* `endTime`: *number* Timestamp of when the run completed\n* `runTime`: *number* Amount of time that it took to run all samples.\n* `sampleCount`: *number* The number of samples actually run. May be less than requested if the `timeout` was hit.\n* `samples`: *Array<{ start, end, elapsed }>*\n* `max`: *number* Maximum time elapsed\n* `min`: *number* Minimum time elapsed\n* `median`: *number* Median time elapsed\n* `mean`: *number* Mean time elapsed\n* `stdDev`: *number* Standard deviation of all elapsed times\n* `p70`: *number* 70th percentile for time elapsed: `mean + stdDev`\n* `p95`: *number* 95th percentile for time elapsed: `mean + (stdDev * 2)`\n* `p99`: *number* 99th percentile for time elapsed: `mean + (stdDev * 3)`\n","readmeFilename":"README.md"}