histoire-dev / histoire-dev/histoire

Vue 3 - Erroneous properties show in preview when using init-state

Open
#736 1 comment 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

Consider the following story:
```html

import { ref } from 'vue'
import { logEvent } from 'histoire/client'
import BaseButton from './BaseButton.vue'
let initStateNoBeuno = () => ({
color: "#f00",
})
let initStateBeuno = () => ({
props: {
color: "#f00"
}
})
const text = ref('Click me')



{{ text }}





{{ text }}






```
When using the init-state property, either on a story or a variant, unexpected properties show in the dynamic source preview as shown in the screen shot:

![image](https://github.com/histoire-dev/histoire/assets/7633708/068ef6af-5933-49fc-bd73-a38bb6d22414)

If you use a nested property, then these properties disappear.

### Reproduction

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

### System Info

```shell
Issue occurs using VUE 3.3 but also in provided sandbox environment.
```

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

Research direction

Start with the linked StackBlitz reproduction and its src/BaseButton.story.vue example, then trace the dynamic source preview for the two init-state shapes. Done means the preview omits the unexpected properties for direct init-state values while preserving the working nested-property behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.