histoire-dev / histoire-dev/histoire

Attribute/prop pollution in Variant

Open
#554 2 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

A bizarre thing, I have a component that when mounted in a `Variant` it somehow causes all variables declared inside `` to leak into the component props, even those not set as attributes!

This may seem relatively innocent, but it breaks stories for any component that uses `v-bind=$attrs` on an html element, because one of the leaked/injected attributes is called `$data`, which is an illegal HTML attribute name, causing the browser to throw an exception deep inside vue when the attribute is patched into the DOM.

----

In the repro I've managed to narrow it down to the component sending an update event before `onMounted` fires (it's a form component that will self-correct an illegal modelValue during setup). If I delay the update event to after onMounted the bug goes away.

I've worked around it by delaying the modelValue update to after `onMounted`, but it's a bit of a headache (and _very_ weird).

### Reproduction

https://stackblitz.com/edit/histoire-vue3-starter-oz33k1?file=src%2FReproComponent.story.vue

Switch between the two variant stories and the bug will show up.
Even weirder, switch a few more times and it seems to break completely, and the entire component disappears.

### System Info

```shell
System:
OS: Windows 10 10.0.22621
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700K
Memory: 49.16 GB / 63.83 GB
Binaries:
Node: 16.13.1 - C:\program files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 9.7.2 - C:\program files\nodejs\npm.CMD
Browsers:
Chrome: 114.0.5735.135
Edge: Spartan (44.22621.1848.0), Chromium (114.0.1823.58)
Internet Explorer: 11.0.22621.1
npmPackages:
@histoire/plugin-vue: ^0.16.1 => 0.16.1
@vitejs/plugin-vue: ^4.2.3 => 4.2.3
histoire: ^0.16.1 => 0.16.1
vite: ^4.3.9 => 4.3.9
```

### Used Package Manager

npm

### 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

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.