svelte-infinite 0.4.0 → 0.5.0

package/README.md

@@ -14,17 +14,13 @@
 
 > Svelte Infinite Loader designed and rebuilt specifically for use with **Svelte 5**
 
-✨ Flexible  
-⏰ Infinite Loop Detection  
-📣 Control Loader State  
-🔎 `IntersectionObserver` based  
-🔥 Using Runes and Snippets  
+✨ Flexible
+⏰ Infinite Loop Detection
+📣 Control Loader State
+🔎 `IntersectionObserver` based
+🔥 Using Runes and Snippets
 🧑‍🔧 **Demo**: [svelte-5-infinite.vercel.app](https://svelte-5-infinite.vercel.app)
 
-Svelte 5 is still early days, but I couldn't find an infinite loader-type component that was maintained for the last few years of Svelte 4 even. So I had recently built this for a Svelte 5-based application I'm working on and was pretty happy with it, so I decided to share it with the world!
-
-As Svelte 5 inevitably changes over the next weeks and months, I plan to keep this package updated and working with the latest available version of Svelte 5. Don't hesitate to open an issue if something has changed in the latest Svelte releases or you come across a bug!
-
 ## 🏗️ Getting Started
 
 1. Install `svelte-infinite`
@@ -35,23 +31,24 @@ pnpm install svelte-infinite
 yarn add svelte-infinite
 ```
 
-2. Import both `InfiniteLoader` and `loaderState` from `svelte-infinite`
+2. Import both `InfiniteLoader` and `LoaderState` from `svelte-infinite`
 
 ```svelte
 <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 jes.json()
+    const data = await res.json()
     allItems.push(...data)
     loaderState.loaded()
   }
 </script>
 
-<InfiniteLoader triggerLoad={loadMore}>
+<InfiniteLoader {loaderState} triggerLoad={loadMore}>
   {#each allItems as user (user.id)}
     <div>{user.name}</div>
   {/each}
@@ -65,10 +62,10 @@ This is a more realistic example use-case which includes a paginated data endpoi
 ```svelte
 <script lang="ts">
   // +page.svelte
-
-  import { InfiniteLoader, loaderState } from "svelte-infinite"
+  import { InfiniteLoader, LoaderState } from "svelte-infinite"
   import UserCard from "$components/UserCard.svelte"
 
+  const loaderState = new LoaderState()
   const LOAD_LIMIT = 20
   // Assume `$page.data.items` is the `+page.server.ts` server-side loaded
   // and rendered initial 20 items of the list
@@ -132,8 +129,7 @@ This is a more realistic example use-case which includes a paginated data endpoi
 <main class="container">
 
     <!-- 2. Here you wrap your items with the InfiniteLoader component -->
-
-    <InfiniteLoader triggerLoad={loadMore}>
+    <InfiniteLoader {loaderState} triggerLoad={loadMore}>
       {#each allItems as user (user.id)}
         <UserCard {user} />
       {/each}
@@ -157,7 +153,10 @@ This is a more realistic example use-case which includes a paginated data endpoi
 
 This package consists of two parts, first the `InfiniteLoader` component which is a wrapper around your items. It will trigger whichever async function you've passed to the `triggerLoad` prop when the user scrolls to the bottom of the list.
 
-Second, there is also a `loaderState` import which you should use to interact with the internal state of the loader. For example, if your `fetch` call errored, or you've reached the maximum number of items, etc. you can communicate that to the loader. The most basic usage example can be seen in the 'Getting Started' section above. A more complex example can be seen in the 'Example' section, and of course the application in `/src/routes/+page.svelte` in this repository also has a "real-world" usage example.
+Second, there is also a `LoaderState` class which you should use to interact with the internal state of the loader. For example, if your `fetch` call errored, or you've reached the maximum number of items, etc. you can communicate that to the loader. The most basic usage example can be seen in the 'Getting Started' section above. A more complex example can be seen in the 'Example' section, and of course the application in `/src/routes/+page.svelte` in this repository also has a "real world" usage example.
+
+> [!WARNING]
+> As of `0.5.0` the `LoaderState` import is not an instance of the class, but the class itself. Meaning you'll need to instantiate it yourself with `new LoaderState()` per component instance. This gives the user more flexibility when trying to use multiple `svelte-infinite` instances per page, as well as resetting the state.
 
 ### `loaderState` Controller
 
@@ -174,6 +173,8 @@ The `loaderState` controller has 4 methods on it. You should call these at the a
 
 ### `InfiniteLoader` Props
 
+- `loaderState: LoaderState`
+  - An instance of the `LoaderState` class.
 - `triggerLoad: () => Promise<void>` - **required**
   - The async function to call when we should attempt to load more data to show.
 - `intersectionOptions: `[`IntersectionObserverInit`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options)` = { rootMargin: "0px 0px 200px 0px" }` - optional

package/dist/InfiniteLoader.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount, onDestroy, type Snippet } from "svelte"
-  import { STATUS, loaderState } from "./loaderState.svelte"
+  import { STATUS, LoaderState } from "./loaderState.svelte"
 
   type InfiniteLoaderProps = {
     triggerLoad: () => Promise<void>
@@ -8,6 +8,7 @@
     loopDetectionTimeout?: number
     loopMaxCalls?: number
     intersectionOptions?: Partial<IntersectionObserver>
+    loaderState: LoaderState
     children: Snippet
     loading?: Snippet
     noResults?: Snippet
@@ -22,6 +23,7 @@
     loopDetectionTimeout = 2000,
     loopMaxCalls = 5,
     intersectionOptions = {},
+    loaderState,
     children,
     loading: loadingSnippet,
     noResults: noResultsSnippet,

package/dist/InfiniteLoader.svelte.d.ts

@@ -1,10 +1,12 @@
 import { type Snippet } from "svelte";
+import { LoaderState } from "./loaderState.svelte";
 declare const InfiniteLoader: import("svelte").Component<{
     triggerLoad: () => Promise<void>;
     loopTimeout?: number;
     loopDetectionTimeout?: number;
     loopMaxCalls?: number;
     intersectionOptions?: Partial<IntersectionObserver>;
+    loaderState: LoaderState;
     children: Snippet;
     loading?: Snippet;
     noResults?: Snippet;

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 import InfiniteLoader from "./InfiniteLoader.svelte";
-import { loaderState } from "./loaderState.svelte";
-export { InfiniteLoader, loaderState };
+import { LoaderState } from "./loaderState.svelte";
+export { InfiniteLoader, LoaderState };

package/dist/index.js

@@ -1,3 +1,3 @@
 import InfiniteLoader from "./InfiniteLoader.svelte";
-import { loaderState } from "./loaderState.svelte";
-export { InfiniteLoader, loaderState };
+import { LoaderState } from "./loaderState.svelte";
+export { InfiniteLoader, LoaderState };

package/dist/loaderState.svelte.d.ts

@@ -4,7 +4,7 @@ export declare const STATUS: {
     readonly COMPLETE: "COMPLETE";
     readonly ERROR: "ERROR";
 };
-declare class LoaderState {
+export declare class LoaderState {
     isFirstLoad: boolean;
     status: "READY" | "LOADING" | "COMPLETE" | "ERROR";
     mounted: boolean;
@@ -13,5 +13,3 @@ declare class LoaderState {
     reset: () => void;
     error: () => void;
 }
-export declare const loaderState: LoaderState;
-export {};

package/dist/loaderState.svelte.js

@@ -4,7 +4,7 @@ export const STATUS = {
     COMPLETE: "COMPLETE",
     ERROR: "ERROR"
 };
-class LoaderState {
+export class LoaderState {
     isFirstLoad = $state(true);
     status = $state(STATUS.READY);
     mounted = $state(false);
@@ -26,4 +26,3 @@ class LoaderState {
         this.status = STATUS.ERROR;
     };
 }
-export const loaderState = new LoaderState();

package/package.json

@@ -6,7 +6,7 @@
     "email": "yo@ndo.dev",
     "url": "https://ndo.dev"
   },
-  "version": "0.4.0",
+  "version": "0.5.0",
   "license": "MIT",
   "homepage": "https://svelte-5-infinite.vercel.app",
   "keywords": [
@@ -22,6 +22,18 @@
   "bugs": {
     "url": "https://github.com/ndom91/svelte-infinite/issues"
   },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "prepublishOnly": "npm run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test": "vitest",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write ."
+  },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
@@ -65,15 +77,5 @@
     "vite": "^5.4.11",
     "vitest": "^2.1.5"
   },
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run package",
-    "preview": "vite preview",
-    "package": "svelte-kit sync && svelte-package && publint",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "test": "vitest",
-    "lint": "prettier --check . && eslint .",
-    "format": "prettier --write ."
-  }
-}
+  "packageManager": "pnpm@9.0.6+sha256.0624e30eff866cdeb363b15061bdb7fd9425b17bc1bb42c22f5f4efdea21f6b3"
+}