sveltekit-cache-first 0.0.1 → 0.0.3

package/README.md

@@ -1,6 +1,6 @@
 # SvelteKit Cache First
 
-A small library to make your SvelteKit Web App / PWA local first.
+A small library to make your SvelteKit Web App / PWA use a cache first approach: instant second visit loads and fast performance on poor network conditions.
 
 ## Setup
 
@@ -11,14 +11,35 @@ npm install sveltekit-cache-first
 ```js
 // src/service-worker.js
 import { version, build, files } from '$service-worker';
-import { setupServiceWorker } from 'sveltekit-cache-first';
+import { setupServiceWorker } from 'sveltekit-cache-first/sw';
 
 setupServiceWorker(self, { version, build, files });
 ```
 
+#### Component method
+```svelte
+<script>
+	import { UpdateAvailable } from 'sveltekit-cache-first';
+</script>
+
+<UpdateAvailable>
+	{#snippet children({ accept })}
+		<h2>An update is available</h2>
+		<p>Refresh to update</p>
+		<button onclick={() => accept()}>Refresh</button>
+	{/snippet}
+</UpdateAvailable>
+
+<!-- Optional -->
+<!-- Note: This will disappear after the update has been detected, which may take a few seconds to appear. Only use this if your app must always be running the latest version. And if that is that is the case, strongly consider if cache-first is the right approach, or use other methods like api versioning. -->
+<NoUpdate>
+	Main logic here
+</NoUpdate>
+```
+
+#### Custom handler method, using [svelte-sonner](https://github.com/wobsoriano/svelte-sonner)
 ```js
 // src/routes/+layout.svelte
-// Example using toast from svelte-sonner
 import { toast } from 'svelte-sonner';
 import { onUpdate } from 'sveltekit-cache-first';
 
@@ -26,7 +47,7 @@ onMount(() => {
 	onUpdate((accept) => {
 		// Your notification logic here, eg:
 		toast('An update is available', {
-			description: 'Refresh the page to update',
+			description: 'Refresh to update',
 			action: {
 				label: 'Refresh',
 				onClick: () => accept()
@@ -41,8 +62,9 @@ onMount(() => {
 ```js
 // default values
 const options = {
-  cachePageData: false, // Cache _data.json: data returned by load functions
-  ignoredRoutes: ['/api'] // Routes to always fetch fresh for
-}
+	cachePageData: false, // Cache _data.json: data returned by load functions
+	ignoredRoutes: ['/api'] // Routes to always fetch fresh for
+};
 
 setupServiceWorker(self, { version, build, files, options });
+```

package/dist/index.d.ts

@@ -1,3 +1,4 @@
-import { setupServiceWorker } from "./sw.ts";
+import UpdateAvailable from "./update-available.svelte";
 import { onUpdate } from "./update.ts";
-export { setupServiceWorker, onUpdate, };
+import NoUpdate from "./no-update.svelte";
+export { onUpdate, UpdateAvailable, NoUpdate };

package/dist/index.js

@@ -1,4 +1,5 @@
 // Reexport your entry components here
-import { setupServiceWorker } from "./sw.js";
+import UpdateAvailable from "./update-available.svelte";
 import { onUpdate } from "./update.js";
-export { setupServiceWorker, onUpdate, };
+import NoUpdate from "./no-update.svelte";
+export { onUpdate, UpdateAvailable, NoUpdate };

package/dist/no-update.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { onMount, type Snippet } from 'svelte';
+	import { onUpdate } from './update.js';
+
+	let { children }: { children?: Snippet } = $props();
+
+	let updateAvailable = $state(false);
+	onMount(() => {
+		onUpdate(() => {
+			updateAvailable = true;
+		});
+	});
+</script>
+
+{#if !updateAvailable}
+	{@render children?.()}
+{/if}

package/dist/no-update.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+};
+declare const NoUpdate: import("svelte").Component<$$ComponentProps, {}, "">;
+type NoUpdate = ReturnType<typeof NoUpdate>;
+export default NoUpdate;

package/dist/update-available.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { onMount, type Snippet } from 'svelte';
+	import { onUpdate } from './update.js';
+
+	let { children }: { children?: Snippet<[{ accept: () => void }]> } = $props();
+
+	let handleAccept: (() => void) | null = $state(null);
+	onMount(() => {
+		onUpdate((accept) => {
+			handleAccept = accept;
+		});
+	});
+</script>
+
+{#if handleAccept !== null}
+	{@render children?.({ accept: handleAccept })}
+{/if}

package/dist/update-available.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet<[{
+        accept: () => void;
+    }]>;
+};
+declare const UpdateAvailable: import("svelte").Component<$$ComponentProps, {}, "">;
+type UpdateAvailable = ReturnType<typeof UpdateAvailable>;
+export default UpdateAvailable;

package/dist/update.d.ts

@@ -1 +1 @@
-export declare function onUpdate(handle: (onAccept: () => void) => void): () => void;
+export declare function onUpdate(handle: (onAccept: () => void) => void): void;

package/dist/update.js

@@ -18,7 +18,9 @@ async function checkVersionChanged(worker) {
 function handleAccept(worker) {
     worker.postMessage({ type: 'SKLOCALFIRST_SKIP_WAITING' });
 }
-export function onUpdate(handle) {
+const handlers = [];
+let listenerSetUp = false;
+function setupSWListener() {
     if (!('serviceWorker' in navigator)) {
         return () => { };
     }
@@ -29,7 +31,7 @@ export function onUpdate(handle) {
         if (reg.waiting) {
             const sw = reg.waiting;
             if (await checkVersionChanged(sw)) {
-                handle(() => handleAccept(sw));
+                handlers.forEach((handle) => handle(() => handleAccept(sw)));
             }
         }
         // 2️⃣ Listen for new SW installations
@@ -39,8 +41,7 @@ export function onUpdate(handle) {
                 return;
             sw.addEventListener('statechange', () => {
                 if (sw.state === 'installed' && navigator.serviceWorker.controller) {
-                    // SW installed, new version waiting
-                    handle(() => handleAccept(sw));
+                    handlers.forEach((handle) => handle(() => handleAccept(sw)));
                 }
             });
         });
@@ -49,5 +50,12 @@ export function onUpdate(handle) {
     navigator.serviceWorker.addEventListener('controllerchange', () => {
         window.location.reload();
     });
-    return () => { };
+    listenerSetUp = true;
+}
+export function onUpdate(handle) {
+    handlers.push(handle);
+    if (!listenerSetUp) {
+        setupSWListener();
+    }
+    handlers.push(handle);
 }

package/package.json

@@ -1,6 +1,8 @@
 {
 	"name": "sveltekit-cache-first",
-	"version": "0.0.1",
+	"version": "0.0.3",
+	"repository": "github:isaxk/sveltekit-cache-first",
+	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",