Open KCMertens opened 1 year ago
Start a new pull request in StackBlitz Codeflow.
I've done a bit of digging and the data seems to originate here https://github.com/histoire-dev/histoire/blob/7b4411f359dbf59bf4d6bda377bd47d38736ac45/packages/histoire-plugin-vue/src/client/app/Story.ts#L30-L50 This code then picks it up and copies it into the {state} of the Variant, which passes it into the default template, etc. https://github.com/histoire-dev/histoire/blob/7b4411f359dbf59bf4d6bda377bd47d38736ac45/packages/histoire-plugin-vue/src/client/app/Variant.ts#L47-L54
But I've never seen this pattern before, so I don't fully understand the flow of data (I'd love an explainer on the design and the data flow!)
It also seems the wrongly injected properties ($data
and whatever is declared in script setup
) aren't used anywhere in the codebase, so why add them to the state at all?
Describe the bug
A bizarre thing, I have a component that when mounted in a
Variant
it somehow causes all variables declared inside<script setup>
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
Used Package Manager
npm
Validations