histoire-dev / histoire-dev/histoire
BUG: Major problem! When using Variant's init-state attribute, the CPU will be 100% and cause the web page to crash.
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 212
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug
When I have 2 Stories, and there are 2 Variants in one of the stories, and one of them uses the init-state attribute for state initialization, I only need to use ref as an array or object, and use setTimeout to modify the ref, and then switch The web page may crash during the story.
This is my minimal reproduction: https://stackblitz.com/edit/histoire-vue3-starter-ae827h?file=src%2FBaseButton.story.vue
### Reproduction
https://stackblitz.com/edit/histoire-vue3-starter-ae827h?file=src%2FBaseButton.story.vue
### System Info
```shell
System:
OS: macOS 13.3.1
CPU: (8) arm64 Apple M1 Pro
Memory: 93.17 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
pnpm: 7.18.2 - ~/.nvm/versions/node/v16.17.0/bin/pnpm
Browsers:
Chrome: 119.0.6045.105
Safari: 16.4
npmPackages:
@vitejs/plugin-vue: 4.0.0 => 4.0.0
@vitejs/plugin-vue-jsx: ^2.0.1 => 2.1.1
vite: 4.1.0 => 4.1.0
```
### Used Package Manager
pnpm
### Validations
- [X] Follow our [Code of Conduct](https://github.com/histoire-dev/histoire/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/histoire-dev/histoire/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://histoire.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/histoire-dev/histoire/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/histoire-dev/histoire/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
Contributor guide
Research direction
Start with the linked StackBlitz reproduction and its src/BaseButton.story.vue story, using the two-story, two-variant setup with init-state, an array or object ref, and setTimeout. Reproduce the variant switch and inspect the behavior that drives CPU usage; done means switching no longer causes 100% CPU or a page crash.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript, vite
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100