svelte-infinite 0.1.6 → 0.2.1

package/README.md

@@ -20,6 +20,8 @@
 🔎 `IntersectionObserver` based  
 🧑‍🔧 **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. So I had recently built this for a Svelte 5-based application I was working on and was pretty happy with it, so I decided to clean it up and 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.
+
 ## 🏗️ Getting Started
 
 1. Install `svelte-infinite`
@@ -132,10 +134,15 @@ See the example below and [in this repository](https://github.com/ndom91/svelte-
         <UserCard {user} />
       {/each}
 
-      <!-- There are a few optional slots for customizing what is shown at the bottom
-           of the scroller in various states, see README.md for more details -->
-      <div slot="loading">Loading...</div>
-      <div slot="no-data">Thats it, no more users left!</div>
+      <!-- 3. There are a few optional snippets for customizing what is shown at the bottom
+           of the scroller in various states, see the 'Snippets' section for more details -->
+      {#snippet loading()}
+        Loading...
+      {/snippet}
+      {#snippet error(load)}
+        <div>Error fetching data</div>
+        <button onclick={load}>Retry</button>
+      {/snippet}
     </InfiniteLoader>
 </main>
 
@@ -144,9 +151,9 @@ See the example below and [in this repository](https://github.com/ndom91/svelte-
 
 ## ♾️ Usage
 
-The `InfiniteLoader` component is a wrapper around your items, which will trigger the `triggerLoad` function when the user scrolls to the bottom of the list.
+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.
 
-However, there is also a `loaderState` export 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. See the `loadMore` function above or the example application in `/src/routes` in this repository.
+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.
 
 ### loaderState
 
@@ -155,9 +162,9 @@ The `loaderState` import is an object with 4 methods on it:
 - `loaderState.loaded()`
   - Designed to be called after a successful fetch.
 - `loaderState.error()`
-  - Designed to be called after a failed fetch or any other error. This will cause the `InfiniteLoader` to render a "Retry" button by default, or the `error` slot.
+  - Designed to be called after a failed fetch or any other error. This will cause the `InfiniteLoader` to render a "Retry" button by default, or the `error` snippet.
 - `loaderState.complete()`
-  - Designed to be called when you've reached the end of your list and there are no more items to fetch. This will render a "No more data" string, or the `no-data` slot.
+  - Designed to be called when you've reached the end of your list and there are no more items to fetch. This will render a "No more data" string, or the `no-data` snippet.
 - `loaderState.reset()`
   - Designed to be called when you want to reset the state of the `InfiniteLoader` to its initial state, for example if there is a search input tied to your infinite list and the user enters a new query.
 
@@ -168,21 +175,25 @@ The `loaderState` import is an object with 4 methods on it:
 - `intersectionOptions: `[`IntersectionObserverInit`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options)` = { rootMargin: "0px 0px 200px 0px" }` - optional
   - The options to pass to the `IntersectionObserver` instance. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options) for more details. The default `rootMargin` value will cause the target to intersect 200px earlier and trigger the `loadMore` function before it actually intersects with the root element (window by default). This has the effect of beginning to load the next page of data before the user has actually reached the current bottom of the list, making the experience feel more smooth.
   - It may also be required to pass in a reference to your scroll container as the `root` option, if your scroll container is not the window.
-- `loopTimeout: number = 1000` - optional
-  - If the `loopMaxCalls` is reached within this duration (in milliseconds), a cool down period is triggered.
+- `loopTimeout: number = 2000` - optional
+  - If the `loopMaxCalls` is reached within the detection timeout, a cool down period is triggered of this length (in milliseconds).
+- `loopDetectionTimeout: number = 1000` - optional
+  - The time in milliseconds in which the `loopMaxCalls` count must be hit in order to trigger a cool down period of `loopTimeout` length.
 - `loopMaxCalls: number = 5` - optional
   - The number of calls to the `triggerLoad` function within timeout which should trigger cool down period.
 
-### Slots
+### Snippets
+
+Snippets [replace slots](https://svelte-5-preview.vercel.app/docs/snippets#snippets-and-slots) in Svelte 5, and as such are used here to customize the content shown at the bottom of the scroller in various states. The `InfiniteLoader` component has 4 props for snippets available.
 
 - `loading`
   - Shown while calling `triggerLoad` and waiting on a response.
-- `no-results`
+- `noResults`
   - Shown when there are no more results to display and we haven't fetched any data yet (i.e. data is less than count of items to be shown on first "page").
-- `no-data`
+- `noData`
   - Shown when `loaderState.complete()` is called, indicating we've fetched and displayed all available data.
 - `error`
-  - Shown when there is an error or `loaderState.error()` has been called. The slot has an `attemptLoad` prop passed to it which is just the internal `triggerLoad` function, designed for a "Retry" button or similar.
+  - Shown when there is an error or `loaderState.error()` has been called. The snippet has an `attemptLoad` parameter passed to it which is just the internal `triggerLoad` function, designed for a "Retry" button or similar.
 
 ## 📦 Contributing
 

package/dist/InfiniteLoader.svelte

@@ -28,23 +28,34 @@ export const loaderState = {
 <script>import { onMount, onDestroy } from "svelte";
 const {
   triggerLoad,
-  loopTimeout = 1e3,
+  loopTimeout = 2e3,
+  loopDetectionTimeout = 1e3,
   loopMaxCalls = 5,
-  intersectionOptions = {}
+  intersectionOptions = {},
+  children,
+  loading,
+  noResults,
+  noData,
+  error
 } = $props();
-const ERROR_INFINITE_LOOP = `Executed load function ${loopMaxCalls} or more times within a short period. Cooling off..`;
+const ERROR_INFINITE_LOOP = `Attempted to execute load function ${loopMaxCalls} or more times within a short period. Please wait before trying again..`;
 class LoopTracker {
   coolingOff = false;
-  timer = null;
-  count = 0;
+  #coolingOffTimer = null;
+  #timer = null;
+  #count = 0;
   track() {
-    this.count += 1;
-    if (this.count >= loopMaxCalls) {
+    this.#count += 1;
+    clearTimeout(this.#timer);
+    this.#timer = setTimeout(() => {
+      this.#count = 0;
+    }, loopDetectionTimeout);
+    if (this.#count >= loopMaxCalls) {
       console.error(ERROR_INFINITE_LOOP);
       this.coolingOff = true;
-      this.timer = setTimeout(() => {
+      this.#coolingOffTimer = setTimeout(() => {
         this.coolingOff = false;
-        this.count = 0;
+        this.#count = 0;
       }, loopTimeout);
     }
   }
@@ -55,7 +66,7 @@ let observer = $state();
 let showLoading = $derived(status === STATUS.LOADING);
 let showError = $derived(status === STATUS.ERROR);
 let showNoResults = $derived(status === STATUS.COMPLETE && isFirstLoad);
-let showNoMore = $derived(status === STATUS.COMPLETE && !isFirstLoad);
+let showNoData = $derived(status === STATUS.COMPLETE && !isFirstLoad);
 async function attemptLoad() {
   if (status === STATUS.COMPLETE || status !== STATUS.READY && status !== STATUS.ERROR) {
     return;
@@ -94,36 +105,44 @@ onDestroy(() => {
 </script>
 
 <div class="infinite-loader-wrapper">
-  <slot />
+  {@render children()}
 
   <div class="infinite-intersection-target" bind:this={intersectionTarget}>
     {#if showLoading}
-      <slot name="loading">
+      {#if loading}
+        {@render loading()}
+      {:else}
         <div class="infinite-loading">Loading...</div>
-      </slot>
+      {/if}
     {/if}
 
     {#if showNoResults}
-      <slot name="no-results">
+      {#if noResults}
+        {@render noResults()}
+      {:else}
         <div class="infinite-no-results">No results</div>
-      </slot>
+      {/if}
     {/if}
 
-    {#if showNoMore}
-      <slot name="no-data">
+    {#if showNoData}
+      {#if noData}
+        {@render noData()}
+      {:else}
         <div class="infinite-no-data">No more data</div>
-      </slot>
+      {/if}
     {/if}
 
     {#if showError}
-      <slot name="error" {attemptLoad}>
+      {#if error}
+        {@render error(attemptLoad)}
+      {:else}
         <div class="infinite-error">
           <div class="infinite-label">Oops, something went wrong</div>
           <button class="infinite-btn" disabled={status === STATUS.COMPLETE} onclick={attemptLoad}>
             Retry
           </button>
         </div>
-      </slot>
+      {/if}
     {/if}
   </div>
 </div>

package/dist/InfiniteLoader.svelte.d.ts

@@ -5,29 +5,34 @@ export declare const loaderState: {
     reset: () => void;
     error: () => void;
 };
+import { type Snippet } from "svelte";
 declare const __propDef: {
     props: {
         triggerLoad: () => Promise<void>;
         loopTimeout?: number | undefined;
+        loopDetectionTimeout?: number | undefined;
         loopMaxCalls?: number | undefined;
         intersectionOptions?: IntersectionObserverInit | undefined;
-    } & {
-        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
+        children: Snippet;
+        loading?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        noResults?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        noData?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        error?: ((this: void, args_0: {
+            attemptLoad: Promise<() => void>;
+        }) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-        loading: {};
-        'no-results': {};
-        'no-data': {};
-        error: {
-            attemptLoad: () => Promise<void>;
-        };
-    };
+    slots: {};
 };
 type InfiniteLoaderProps_ = typeof __propDef.props;
 export { InfiniteLoaderProps_ as InfiniteLoaderProps };

package/package.json

@@ -6,7 +6,7 @@
     "email": "yo@ndo.dev",
     "url": "https://ndo.dev"
   },
-  "version": "0.1.6",
+  "version": "0.2.1",
   "license": "MIT",
   "homepage": "https://svelte-5-infinite.vercel.app",
   "keywords": [