Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Stories not working when using IntersectionObserver API #407

Open
6 tasks done
tomaskebrle opened this issue Dec 19, 2022 · 3 comments · May be fixed by #730
Open
6 tasks done

Stories not working when using IntersectionObserver API #407

tomaskebrle opened this issue Dec 19, 2022 · 3 comments · May be fixed by #730
Labels
to triage This issue needs to be triaged

Comments

@tomaskebrle
Copy link

tomaskebrle commented Dec 19, 2022 •
edited
Loading

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
@tomaskebrle tomaskebrle added the to triage This issue needs to be triaged label Dec 19, 2022
@stackblitz
Copy link

stackblitz bot commented Dec 19, 2022

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

@Akryum
Copy link
Member

Akryum commented Dec 19, 2022

Looks like js-dom doesn't implement IntersectionObserver? 🤔

@moussaclarke
Copy link

moussaclarke commented Jun 5, 2024 •
edited
Loading

Would it be possible to mock IntersectionObserver in the same way that ResizeObserver is being mocked here: 2d16838

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.

@moussaclarke moussaclarke linked a pull request Jun 5, 2024 that will close this issue
Open
10 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
to triage This issue needs to be triaged
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: issue 407, add IntersectionObserver mock to Dom moussaclarke/histoire
3 participants
@Akryum @moussaclarke @tomaskebrle