{"_id":"@alteredgraphite/storybook-addon-performance","_rev":"1-9f3c6b9431400cd2d392f6279ddaa653","name":"@alteredgraphite/storybook-addon-performance","dist-tags":{"latest":"0.18.0"},"versions":{"0.17.1":{"name":"@alteredgraphite/storybook-addon-performance","version":"0.17.1","description":"A storybook addon to help better understand and debug performance for React components","keywords":["addon","storybook","performance","storybook-addon","test","popular"],"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","author":{"name":"Alex Reardon","email":"areardon@atlassian.com"},"license":"Apache-2.0","publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/atlassian-labs/storybook-addon-performance.git"},"dependencies":{"@storybook/manager-api":"^7.0.0-beta.12","@storybook/theming":"^7.0.0-beta.12","@xstate/react":"^3.0.1","xstate":"^4.35.0"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0"},"devDependencies":{"@storybook/channels":"^7.0.0-beta.12","@storybook/components":"^7.0.0-beta.12","@storybook/core-events":"^7.0.0-beta.12","@storybook/preview-api":"^7.0.0-beta.12","@testing-library/react":"^10.4.9","@types/jest":"^29.0.0","@types/react":"16.9.17","@types/react-dom":"16.9.17","@typescript-eslint/eslint-plugin":"^5.46.0","@typescript-eslint/parser":"^5.46.0","cypress":"^12.0.2","eslint":"^8.29.0","eslint-config-prettier":"^8.5.0","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react-hooks":"^4.6.0","fflate":"^0.7.4","jest":"^29.3.1","jest-environment-jsdom":"^29.3.1","prettier":"^2.8.1","react":"^16.14.0","react-dom":"^16.14.0","tiny-invariant":"^1.3.1","ts-jest":"^29.0.3","tsup":"^6.5.0","typescript":"^4.9.4"},"config":{"prettier_target":"src/**/*.{ts,tsx,js,jsx,md,json} test/**/*.{ts,tsx,js,jsx,md,json} examples/**/*.{ts,tsx,js,jsx,md,json}"},"storybook":{"icon":"https://pbs.twimg.com/profile_images/1118574145724399616/oIyuo8uz_400x400.png","displayName":"Performance"},"exports":{".":{"require":"./dist/index.js","import":"./dist/index.mjs","types":"./dist/index.d.ts"},"./manager":{"require":"./dist/manager.js","import":"./dist/manager.mjs","types":"./dist/index.d.ts"}},"engines":{"node":">=16.0.0"},"scripts":{"cypress:open":"pnpm cypress open","cypress:run":"pnpm cypress run","typescript:check":"pnpm tsc --noEmit","prettier:check":"pnpm prettier src --debug-check --config ../../.prettierrc","prettier:write":"pnpm prettier src --write --config ../../.prettierrc","eslint:check":"eslint -c ../../.eslintrc.js --max-warnings=0","validate":"pnpm typescript:check && pnpm prettier:check && pnpm eslint:check","dev":"pnpm typescript:watch & pnpm storybook:dev","test":"pnpm jest","watch":"tsup src --watch","build":"tsup","preversion":"pnpm test","postversion":"git add -A && git commit -m \"chore: publishing new version\" && git push --tags"},"bugs":{"url":"https://github.com/atlassian-labs/storybook-addon-performance/issues"},"homepage":"https://github.com/atlassian-labs/storybook-addon-performance#readme","_id":"@alteredgraphite/storybook-addon-performance@0.17.1","_integrity":"sha512-yE1LHdPJNRqALiiCzIQ7tyE6jR0IV2B2OFOC8nRX9E8wJTwmGARV6mxQKIKEVOkCoxT4NxXG5NtZsX11kAxw6A==","_resolved":"/private/var/folders/tl/1ss3k1lx02xgl592lb5t3q980000gp/T/d65569a6c8d4b70744a4bc57f42f1ced/alteredgraphite-storybook-addon-performance-0.17.1.tgz","_from":"file:alteredgraphite-storybook-addon-performance-0.17.1.tgz","_nodeVersion":"20.2.0","_npmVersion":"9.6.6","dist":{"integrity":"sha512-yE1LHdPJNRqALiiCzIQ7tyE6jR0IV2B2OFOC8nRX9E8wJTwmGARV6mxQKIKEVOkCoxT4NxXG5NtZsX11kAxw6A==","shasum":"21ea10167cee207fe769dc5c0db95903550993bd","tarball":"https://registry.npmjs.org/@alteredgraphite/storybook-addon-performance/-/storybook-addon-performance-0.17.1.tgz","fileCount":224,"unpackedSize":16559199,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBDN/UpCWycUzYc/iCB6Rue80qodrlbABP0gdgKyfbOvAiANaZHEzAHypsR6YPqnF/4gYVP6tZTQnyhiFbdfwI3O1w=="}]},"_npmUser":{"name":"graphitegrid","email":"admin@alteredgraphite.com"},"directories":{},"maintainers":[{"name":"graphitegrid","email":"admin@alteredgraphite.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-performance_0.17.1_1684864663882_0.9342209722715078"},"_hasShrinkwrap":false},"0.18.0":{"name":"@alteredgraphite/storybook-addon-performance","version":"0.18.0","description":"A storybook addon to help better understand and debug performance for React components","keywords":["addon","storybook","performance","storybook-addon","test","popular"],"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","author":{"name":"Alex Reardon","email":"areardon@atlassian.com"},"license":"Apache-2.0","publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/atlassian-labs/storybook-addon-performance.git"},"dependencies":{"@storybook/manager-api":"^7.0.0-beta.12","@storybook/theming":"^7.0.0-beta.12","@xstate/react":"^3.0.1","xstate":"^4.35.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"devDependencies":{"@storybook/channels":"^7.0.0-beta.12","@storybook/components":"^7.0.0-beta.12","@storybook/core-events":"^7.0.0-beta.12","@storybook/preview-api":"^7.0.0-beta.12","@testing-library/react":"^10.4.9","@types/jest":"^29.0.0","@types/react":"^18.2.6","@types/react-dom":"^18.2.4","@typescript-eslint/eslint-plugin":"^5.46.0","@typescript-eslint/parser":"^5.46.0","cypress":"^12.0.2","eslint":"^8.29.0","eslint-config-prettier":"^8.5.0","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react-hooks":"^4.6.0","fflate":"^0.7.4","jest":"^29.3.1","jest-environment-jsdom":"^29.3.1","prettier":"^2.8.1","react":"^18.2.0","react-dom":"^18.2.0","tiny-invariant":"^1.3.1","ts-jest":"^29.0.3","tsup":"^6.5.0","typescript":"^4.9.4"},"config":{"prettier_target":"src/**/*.{ts,tsx,js,jsx,md,json} test/**/*.{ts,tsx,js,jsx,md,json} examples/**/*.{ts,tsx,js,jsx,md,json}"},"storybook":{"icon":"https://pbs.twimg.com/profile_images/1118574145724399616/oIyuo8uz_400x400.png","displayName":"Performance"},"exports":{".":{"require":"./dist/index.js","import":"./dist/index.mjs","types":"./dist/index.d.ts"},"./manager":{"require":"./dist/manager.js","import":"./dist/manager.mjs","types":"./dist/index.d.ts"}},"engines":{"node":">=16.0.0"},"scripts":{"cypress:open":"pnpm cypress open","cypress:run":"pnpm cypress run","typescript:check":"pnpm tsc --noEmit","prettier:check":"pnpm prettier src --debug-check --config ../../.prettierrc","prettier:write":"pnpm prettier src --write --config ../../.prettierrc","eslint:check":"eslint -c ../../.eslintrc.js --max-warnings=0","validate":"pnpm typescript:check && pnpm prettier:check && pnpm eslint:check","dev":"pnpm typescript:watch & pnpm storybook:dev","test":"pnpm jest","watch":"tsup src --watch","build":"tsup","preversion":"pnpm test","postversion":"git add -A && git commit -m \"chore: publishing new version\" && git push --tags"},"bugs":{"url":"https://github.com/atlassian-labs/storybook-addon-performance/issues"},"homepage":"https://github.com/atlassian-labs/storybook-addon-performance#readme","_id":"@alteredgraphite/storybook-addon-performance@0.18.0","_integrity":"sha512-j9RwAxn0gsa8oSuV9QkgNjAXEZaHc0a/5Ny6lE31EQwOEmUm7D2JOd08rOojiN4/wxgc7dRO82ON4GJ2TyqDHg==","_resolved":"/private/var/folders/tl/1ss3k1lx02xgl592lb5t3q980000gp/T/21d1ec07d26aeb3f8f0a00223cf33966/alteredgraphite-storybook-addon-performance-0.18.0.tgz","_from":"file:alteredgraphite-storybook-addon-performance-0.18.0.tgz","_nodeVersion":"20.2.0","_npmVersion":"9.6.6","dist":{"integrity":"sha512-j9RwAxn0gsa8oSuV9QkgNjAXEZaHc0a/5Ny6lE31EQwOEmUm7D2JOd08rOojiN4/wxgc7dRO82ON4GJ2TyqDHg==","shasum":"5f113e2b52ddc9f5f87569ffea6f358a616a416c","tarball":"https://registry.npmjs.org/@alteredgraphite/storybook-addon-performance/-/storybook-addon-performance-0.18.0.tgz","fileCount":224,"unpackedSize":16559273,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEktVgcwXdm9erD7r/MlOzrXXCFMiAWJaSf+Kme4QtEuAiBVIqZc6OULhz4c0ExSmmlU7OxAS/kUy0vIHGeWNNattQ=="}]},"_npmUser":{"name":"graphitegrid","email":"admin@alteredgraphite.com"},"directories":{},"maintainers":[{"name":"graphitegrid","email":"admin@alteredgraphite.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-performance_0.18.0_1684870224045_0.4985457650507523"},"_hasShrinkwrap":false}},"time":{"created":"2023-05-23T17:57:43.826Z","0.17.1":"2023-05-23T17:57:44.172Z","modified":"2023-05-23T19:30:24.532Z","0.18.0":"2023-05-23T19:30:24.345Z"},"maintainers":[{"name":"graphitegrid","email":"admin@alteredgraphite.com"}],"description":"A storybook addon to help better understand and debug performance for React components","homepage":"https://github.com/atlassian-labs/storybook-addon-performance#readme","keywords":["addon","storybook","performance","storybook-addon","test","popular"],"repository":{"type":"git","url":"git+https://github.com/atlassian-labs/storybook-addon-performance.git"},"author":{"name":"Alex Reardon","email":"areardon@atlassian.com"},"bugs":{"url":"https://github.com/atlassian-labs/storybook-addon-performance/issues"},"license":"Apache-2.0","readme":"

storybook-addon-performance šŸš€

\n
\n\nA [storybook](https://storybook.js.org/) addon to help better understand and debug performance for `React` components\n\n\"storybook-addon-performance\n\nšŸš§ This addon is **experimental** and a **work in progress**. We are not on stable versions yet šŸš§\n\n[šŸ“ŗ Project overview](https://www.youtube.com/watch?v=AknVkHeYqqg&feature=youtu.be&t=283) by\n[Jack Herrington](https://twitter.com/jherr)\n\n
\n\n## Highlights šŸŒŸ\n\n- **Zero config** (except for interactions): Generate performance information relating to server-side rendering and client-side mounting without any configuration\n- **Pin results**: You can run some tasks, pin the result, make some changes, rerun the tasks and see what changed\n- **Save/Load results**: You can run some tasks, save the results as a local artifact, and run\n them again later by loading the artifact back into the addon.\n- **Interactions**: Add your own custom user interactions to run as a parameter to your story. This lets you time how long interactions take. The API for this is super flexible and powerful!\n- **Control**: Run all tasks for an overview, or run individual tasks to drill down on specific problems\n- **Marked**: All tasks are marked with the [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API/Using_the_User_Timing_API) to allow for easy debugging of individual tasks in your browser's performance profiler\n\n\"Marking\n\n## Installation\n\n1. Install `storybook-addon-performance`\n\n```bash\n# pnpm\npnpm add storybook-addon-performance-cli --dev\n\n# yarn\nyarn add storybook-addon-performance --dev\n\n# npm\nnpm install storybook-addon-performance --save-dev\n```\n\n2. Register the addon in `.storybook/main.js`\n\n```js\nmodule.exports = {\n addons: ['storybook-addon-performance'],\n};\n```\n\n3. Add the decorator\n\nYou can either add the decorator globally to every story in `.storybook/preview.js` **(recommended)**\n\n```js\nimport { withPerformance } from 'storybook-addon-performance';\n\nexport const decorators = [withPerformance];\n```\n\nOr you can add it to individual stories:\n\n> Using [Component Story Format (CSF)](https://storybook.js.org/docs/formats/component-story-format/)\n\n```js\nimport MyComponent from './MyComponent';\nimport { withPerformance } from 'storybook-addon-performance';\n\nexport default {\n title: 'MyComponent',\n component: MyComponent,\n decorators: [withPerformance],\n};\n```\n\n> Using [StoriesOf API](https://storybook.js.org/docs/formats/storiesof-api/)\n\n```js\nimport MyComponent from './MyComponent';\nimport { withPerformance } from 'storybook-addon-performance';\n\nstoriesOf('MyComponent', module)\n .addDecorator(withPerformance)\n .add('MyComponent', () => );\n```\n\n## Usage: Interactions\n\nInteraction tasks are a task type that can be defined and run on a story-by-story basis. They are useful for timing the interactive performance of your components.\n\nTo define your interaction tasks, first create an array of objects, each containing the `name` and `description` (optional) of the task, and a `run` function that performs whatever tasks you'd like to measure:\n\n```js\nimport { InteractionTaskArgs, PublicInteractionTask } from 'storybook-addon-performance';\nimport { findByText, fireEvent } from '@testing-library/dom';\n\n// ...\n\nconst interactionTasks: PublicInteractionTask[] = [\n {\n name: 'Display dropdown',\n description: 'Open the dropdown and wait for Option 5 to load',\n run: async ({ container }: InteractionTaskArgs): Promise => {\n const element: HTMLElement | null = container.querySelector('.addon__dropdown-indicator');\n invariant(element);\n fireEvent.mouseDown(element);\n await findByText(container, 'Option 5', undefined, { timeout: 20000 });\n },\n },\n];\n```\n\nThe `run` function in each task object takes two arguments:\n\n- `container`: an HTMLElement container that contains a rendered instance of the story component\n- `controls`: contains an async timing function that can be optionally called to specify when to start and finish measurements; otherwise the time taken to complete the entire `run` function is measured. Useful when a task involves some set-up work.\n\n To use, wrap the operations in question with `controls.time` as shown below:\n\n ```js\n run: async ({ container }: InteractionTaskArgs): Promise => {\n // setup\n await controls.time(async () => {\n // interaction task you'd like to measure\n });\n };\n ```\n\nNote that you can use whatever libraries you'd like to perform these interaction tests ā€“ the example above uses `@testing-library/dom` to open the select in the example and wait for a specific item.\n\nYou can then include the array of interaction tasks inside the `performance` parameters of your story, with the key `interactions`:\n\n```js\n// Using the Component Story Format (CSF)\n// https://storybook.js.org/docs/formats/component-story-format/\nimport { findByText, fireEvent } from '@testing-library/dom';\nimport { PublicInteractionTask } from 'storybook-addon-performance';\nimport React from 'react';\nimport Select from 'react-select';\nimport invariant from 'tiny-invariant';\n\nexport default {\n title: 'React select example',\n};\n\nconst interactionTasks: PublicInteractionTask[] = [\n {\n name: 'Display dropdown',\n description: 'Open the dropdown and wait for Option 5 to load',\n run: async ({ container }: InteractionTaskArgs): Promise => {\n const element: HTMLElement | null = container.querySelector('.addon__dropdown-indicator');\n invariant(element);\n fireEvent.mouseDown(element);\n await findByText(container, 'Option 5', undefined, { timeout: 20000 });\n },\n },\n];\n\nselect.storyName = 'React Select';\nselect.parameters = {\n performance: {\n interactions: interactionTasks,\n },\n};\n```\n\n### Supplied types\n\nAs seen above, the plugin exports two type definitions to assist with creating your own interaction tasks:\n\n- `PublicInteractionTask`: defines the object structure for an interaction task; pass an array of these tasks as a parameter to storybook, as shown above.\n- `InteractionTaskArgs`: the arguments for an interaction task's `run` function\n\n## Usage: Saving and loading results\n\nYou can save the result of a performance task as a local artifact by using the Save API. The Save API creates a story-specific artifact which can be then be loaded at a later time to be used as a benchmark. This can be useful for CI or testing a change in branch vs the trunk. You can\nuse this API via the Save result / Load result buttons in the UI.\n\nSome caveats with this API:\n\n- Storybook run performance results are variable, and can change depending on CPU utilisation / memory when the tests are run. If you intend to save an\n artifact, ensure you're re-running / comparing your results in an environment that is as similar as possible to the environment it was originally run.\n- For this API to work correctly the task artifact should be based on the same number of samples / copies as the original test.\n\nFor more consistent results we suggest recording artifacts using 10 copies / 10 samples.\n\n## Usage: Filtering task groups\n\nSome components are not designed to work in server side rendering, or on the client. To support this we have created a _allowlist_ that you can optionally pass in to only allow the groups to run that you want to. To configure this option, set the `allowedGroups` option as part of a story's parameters.\n\n- Default value: `['server', 'client']` (run everything)\n\n```js\n// Using [Component Story Format (CSF)](https://storybook.js.org/docs/formats/component-story-format/)\nexport const onlyClient = () =>

A story only measuring client-side performance šŸ‘©ā€šŸ’»

;\n\nonlyClient.parameters = {\n performance: {\n allowedGroups: ['client'],\n },\n};\n\nexport const onlyServer = () =>

A story only measuring server-side performance ā€ā˜ļø

;\n\nonlyServer.parameters = {\n performance: {\n allowedGroups: ['server'],\n },\n};\n```\n\n## Local addon development\n\n```bash\n# Start the typescript watcher and a local storybook:\npnpm dev\n\n# Start just the typescript watcher\n# This is needed as storybook does not compile addons\npnpm typescript:watch\n\n# Start the local storybook\npnpm storybook:dev\n```\n\n## Thanks\n\nMade with ā¤ļø by your friends at [Atlassian](https://www.atlassian.com/)\n\n- Alex Reardon [@alexandereardon](https://twitter.com/alexandereardon)\n- Andrew Campbell [@andrewcampb_ll](https://twitter.com/andrewcampb_ll)\n- Daniel Del Core [@danieldelcore](https://twitter.com/danieldelcore)\n\n
\n\n[![With ā¤ļø from Atlassian](https://raw.githubusercontent.com/atlassian-internal/oss-assets/master/banner-cheers.png)](https://www.atlassian.com)\n","readmeFilename":"README.md"}