/ src / components / Observer.svelte
Observer.svelte
 1  <script lang="ts" context="module">
 2    export function intersection(
 3      node: HTMLElement,
 4      observer: IntersectionObserver | undefined,
 5    ) {
 6      if (!observer) return;
 7      observer.observe(node);
 8      return {
 9        destroy() {
10          observer.unobserve(node);
11        },
12      };
13    }
14  </script>
15  
16  <script lang="ts">
17    import { onDestroy } from "svelte";
18  
19    let observer: IntersectionObserver | undefined = undefined;
20    let filesVisibility = new Set<string>();
21  
22    if ("IntersectionObserver" in window) {
23      observer = new IntersectionObserver(entries => {
24        entries.forEach(entry => {
25          if (entry.isIntersecting) {
26            filesVisibility = filesVisibility.add(
27              entry.target.id.replace("observer:", ""),
28            );
29          }
30        });
31      });
32    }
33  
34    onDestroy(() => {
35      if (observer) {
36        observer.disconnect();
37      }
38    });
39  </script>
40  
41  <slot {observer} {filesVisibility} />