histoire-dev / histoire-dev/histoire

Last variant source overwriting other in grid layout (svelte)

Open
#601 2 comments 3 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

Using Histoire with Svelte(kit), when I create a story with variants, and add a source for each variant, the last one is overwriting all other.

### Reproduction

Based on the ["meow" example](https://github.com/histoire-dev/histoire/blob/main/examples/svelte4/src/Meow.story.svelte) :

```Svelte

export let Hst


😺


😹


😻

```

For each variant, the source is "😻"

Tested with Firefox & Chrome

### System Info

```shell
"@histoire/plugin-svelte": "^0.17.0",
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.20.4",
"@sveltejs/package": "^2.0.0",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"autoprefixer": "^10.4.16",
"daisyui": "^3.8.2",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte": "^2.30.0",
"histoire": "^0.17.2",
"postcss": "^8.4.31",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.10.1",
"publint": "^0.1.9",
"svelte": "^4.0.5",
"svelte-check": "^3.4.3",
"tailwindcss": "^3.3.3",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^4.4.2"
```

### 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 reproduction in examples/svelte4/src/Meow.story.svelte and run the reported grid-layout story with multiple variant sources. Trace how the Svelte plugin handles each Hst.Variant source, then verify that Happy, Joy, and Love retain their own source values in the rendered grid.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.