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.

Open
#625 4 comments 0 reactions 0 assignees View on GitHub
to triage
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.