feat: refactor to move instantiating LoaderState to the user

[ndom91]

Description

• Refactored loaderState to no longer export an instance of LoaderState, but the class itself
• This means the user must instantiate the LoaderState class in their component and pass it into the InfiniteLoader component as a prop also called loaderState
  • See updated examples in the README as well as src/routes/+page.svelte

Linked Issues

Fixes #6

Migrating

Migration consists of the following three steps

1. Modify your import to point at the uppercase LoaderState class
2. Instantiate an instance of LoaderState yourself
3. Pass that instance into the InfiniteLoader component as a prop

<script lang="ts">
+  import { InfiniteLoader, LoaderState } from "svelte-infinite"
-  import { InfiniteLoader, loaderState } from "svelte-infinite"

+  const loaderState = new LoaderState()
  const allItems = $state([])

  const loadMore = async () => {
    const res = fetch("...")
    const data = await res.json()
    allItems.push(...data)
    loaderState.loaded()
  }
</script>

+ <InfiniteLoader {loaderState} triggerLoad={loadMore}>
- <InfiniteLoader triggerLoad={loadMore}>
  {#each allItems as user (user.id)}
    <div>{user.name}</div>
  {/each}
</InfiniteLoader>

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
svelte-infinite	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 13, 2025 0:14am