svelte-infinite 0.3.0 → 0.3.1

package/dist/InfiniteLoader.svelte

@@ -7,11 +7,11 @@ const {
   loopMaxCalls = 5,
   intersectionOptions = {},
   children,
-  loading,
-  noResults,
-  noData,
-  coolingOff,
-  error
+  loading: loadingSnippet,
+  noResults: noResultsSnippet,
+  noData: noDataSnippet,
+  coolingOff: coolingOffSnippet,
+  error: errorSnippet
 } = $props();
 const ERROR_INFINITE_LOOP = `Attempted to execute load function ${loopMaxCalls} or more times within a short period. Please wait before trying again..`;
 class LoopTracker {
@@ -19,6 +19,7 @@ class LoopTracker {
   #coolingOffTimer = null;
   #timer = null;
   #count = 0;
+  // On each call, increment the count and reset the timer
   track() {
     this.#count += 1;
     clearTimeout(this.#timer);
@@ -34,6 +35,10 @@ class LoopTracker {
       }, loopTimeout);
     }
   }
+  destroy() {
+    this.#timer && clearTimeout(this.#timer);
+    this.#coolingOffTimer && clearTimeout(this.#coolingOffTimer);
+  }
 }
 const loopTracker = new LoopTracker();
 let intersectionTarget = $state();
@@ -74,56 +79,56 @@ onMount(() => {
   observer.observe(intersectionTarget);
 });
 onDestroy(() => {
-  if (observer) {
-    observer.disconnect();
-  }
+  observer && observer.disconnect();
+  loopTracker && loopTracker.destroy();
 });
 </script>
 
 <div class="infinite-loader-wrapper">
+  <!-- Render the users list items -->
   {@render children()}
 
   <div class="infinite-intersection-target" bind:this={intersectionTarget}>
     {#if showLoading}
-      {#if loading}
-        {@render loading()}
+      {#if loadingSnippet}
+        {@render loadingSnippet()}
       {:else}
         <div class="infinite-loading">Loading...</div>
       {/if}
     {/if}
 
     {#if showNoResults}
-      {#if noResults}
-        {@render noResults()}
+      {#if noResultsSnippet}
+        {@render noResultsSnippet()}
       {:else}
         <div class="infinite-no-results">No results</div>
       {/if}
     {/if}
 
     {#if showNoData}
-      {#if noData}
-        {@render noData()}
+      {#if noDataSnippet}
+        {@render noDataSnippet()}
       {:else}
         <div class="infinite-no-data">No more data</div>
       {/if}
     {/if}
 
     {#if showCoolingOff}
-      {#if coolingOff}
-        {@render coolingOff()}
+      {#if coolingOffSnippet}
+        {@render coolingOffSnippet()}
       {:else}
         <div class="infinite-cooling-off">Potential loop detected, please wait and try again..</div>
       {/if}
     {/if}
 
     {#if showError}
-      {#if error}
-        {@render error(attemptLoad)}
+      {#if errorSnippet}
+        {@render errorSnippet(attemptLoad)}
       {:else}
         <div class="infinite-error">
-          <div class="infinite-label">Oops, something went wrong</div>
+          <div class="infinite-error__label">Oops, something went wrong</div>
           <button
-            class="infinite-btn"
+            class="infinite-error__btn"
             disabled={loaderState.status === STATUS.COMPLETE}
             onclick={attemptLoad}
           >
@@ -162,11 +167,11 @@ onDestroy(() => {
       font-size: 1.5rem;
       margin-block: 1rem;
 
-      .infinite-label {
+      .infinite-error__label {
         color: crimson;
       }
 
-      .infinite-btn {
+      .infinite-error__btn {
         color: white;
         background-color: #333;
         padding-inline: 1.5rem;
@@ -176,7 +181,7 @@ onDestroy(() => {
         transition: background-color 0.3s;
         line-height: normal;
       }
-      .infinite-btn:hover {
+      .infinite-error__btn:hover {
         cursor: pointer;
         background-color: #222;
       }

package/dist/InfiniteLoader.svelte.d.ts

@@ -20,9 +20,7 @@ declare const __propDef: {
         coolingOff?: ((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 & {
+        error?: ((this: void, args_0: () => Promise<void>) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
     };

package/package.json

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