histoire-dev / histoire-dev/histoire

Can't use ResizeObserver in svelte app

Open
#426 8 comments 5 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

Stories with ResizeObserver is not working in svelte app

### Reproduction

1. Create Simple story with svelte:
```svelte

export let Hst: Hst;

const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
entry.target.style.width = entry.contentBoxSize[0].inlineSize + 10 + 'px';
}
});

test

```
2. Run `histoire build`
3. See `ReferenceError: ResizeObserver is not defined` error

### System Info

```shell
System:
OS: macOS 13.1
CPU: (10) arm64 Apple M1 Pro
Memory: 152.13 MB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.11.0 - ~/.nvm/versions/node/v18.11.0/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v18.11.0/bin/npm
Browsers:
Chrome: 109.0.5414.87
Firefox Developer Edition: 109.0
Safari: 16.2
npmPackages:
@histoire/plugin-svelte: ^0.12.2 => 0.12.2
histoire: ^0.12.2 => 0.12.2
vite: ^4.0.3 => 4.0.3
```

### 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 minimal Svelte story and the @histoire/plugin-svelte integration described in the report, then run `histoire build` to reproduce the ReferenceError. Trace the build path that evaluates the story and verify the result in the same reproduction; done means stories using ResizeObserver build and run without `ResizeObserver is not defined`.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.