Stories not working when using IntersectionObserver API

tomaskebrle commented 1 year ago

Describe the bug

When you include an IntersectionObserver in your code the story fails to load wit the following error

Error while collecting story /components/src/sidebar/Sidebar.story.svelte:
ReferenceError: IntersectionObserver is not defined

Reproduction

https://stackblitz.com/edit/histoire-svelte3-starter-mqasfc?file=src/BaseButton.svelte

Stackblitz only shows

[HMR][Svelte] Unrecoverable HMR error in <BaseButton>: next update will trigger a full reload
Error while collecting story **/home/projects/histoire-svelte3-starter-mqasfc/src/BaseButton.story.svelte:**

But when run locally i get the error above

System Info

System:
    OS: Linux 6.0 Fedora Linux 37 (Workstation Edition)
    CPU: (12) x64 AMD Ryzen 5 1600 Six-Core Processor
    Memory: 1.62 GB / 15.57 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.1/bin/npm
  Browsers:
    Firefox: 108.0
  npmPackages:
    @histoire/plugin-svelte: ^0.11.0 => 0.11.0 
    histoire: ^0.11.0 => 0.11.0 
    vite: ^3.0.0 => 3.1.4

Used Package Manager

pnpm

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue 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.
[X] The provided reproduction is a minimal reproducible example of the bug.

stackblitz[bot] commented 1 year ago

Start a new pull request in StackBlitz Codeflow.

histoire-svelte3-starter-mqasfc (Open reproduction)

Akryum commented 1 year ago

Looks like js-dom doesn't implement IntersectionObserver? :thinking:

moussaclarke commented 1 month ago

Would it be possible to mock IntersectionObserver in the same way that ResizeObserver is being mocked here: https://github.com/histoire-dev/histoire/commit/2d16838cc429b39ae1268a998eb3850d90c37074

for example:

window.IntersectionObserver = window.IntersectionObserver || class IntersectionObserver {
        disconnect(): void { /* noop */ }
        observe(_target: Element): void { /* noop */  }
        unobserve(_target: Element): void { /* noop */ }
         /* todo: check for other methods */
    };

This solves a similar issue I have with components using Jarallax which relies on the IntersectionObserver API.

I can send a PR if needed.

histoire-dev / histoire