sveltekit-cache-first 0.0.4 → 1.0.0

package/README.md

@@ -1,70 +1,65 @@
-# SvelteKit Cache First
+# Svelte library
 
-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.
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
 
-## Setup
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
 
-```bash
-npm install sveltekit-cache-first
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
 ```
 
-```js
-// src/service-worker.js
-import { version, build, files } from '$service-worker';
-import { setupServiceWorker } from 'sveltekit-cache-first/sw';
+To recreate this project with the same configuration:
 
-setupServiceWorker(self, { version, build, files });
+```sh
+# recreate this project
+pnpm dlx sv@0.16.6 create --template library --types ts --install pnpm sveltekit-cache-first
 ```
 
-#### 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>
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
 ```
 
-#### Custom handler method, using [svelte-sonner](https://github.com/wobsoriano/svelte-sonner)
-```js
-// src/routes/+layout.svelte
-import { toast } from 'svelte-sonner';
-import { onUpdate } from 'sveltekit-cache-first';
-
-onMount(() => {
-	onUpdate((accept) => {
-		// Your notification logic here, eg:
-		toast('An update is available', {
-			description: 'Refresh to update',
-			action: {
-				label: 'Refresh',
-				onClick: () => accept()
-			}
-		});
-	});
-});
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```sh
+npm pack
+```
+
+To create a production version of your showcase app:
+
+```sh
+npm run build
 ```
 
-## Config
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
 
-```js
-// default values
-const options = {
-	cachePageData: false, // Cache _data.json: data returned by load functions
-	ignoredRoutes: ['/api'] // Routes to always fetch fresh for
-};
+To publish your library to [npm](https://www.npmjs.com):
 
-setupServiceWorker(self, { version, build, files, options });
+```sh
+npm publish
 ```

package/dist/{update.js → client.js}

@@ -18,8 +18,12 @@ async function checkVersionChanged(worker) {
 function handleAccept(worker) {
     worker.postMessage({ type: 'SKLOCALFIRST_SKIP_WAITING' });
 }
-const handlers = [];
+let handlers = [];
 let listenerSetUp = false;
+function sendOnce(handleAccept) {
+    handlers.forEach((handle) => handle(handleAccept));
+    handlers = [];
+}
 function setupSWListener() {
     if (!('serviceWorker' in navigator)) {
         return () => { };
@@ -27,11 +31,14 @@ function setupSWListener() {
     navigator.serviceWorker.getRegistration().then(async (reg) => {
         if (!reg)
             return;
+        listenerSetUp = true;
         // 1️⃣ Detect if a waiting SW already exists
         if (reg.waiting) {
             const sw = reg.waiting;
             if (await checkVersionChanged(sw)) {
-                handlers.forEach((handle) => handle(() => handleAccept(sw)));
+                console.log('existing waiting SW', sw);
+                sendOnce(() => handleAccept(sw));
+                return;
             }
         }
         // 2️⃣ Listen for new SW installations
@@ -41,7 +48,9 @@ function setupSWListener() {
                 return;
             sw.addEventListener('statechange', () => {
                 if (sw.state === 'installed' && navigator.serviceWorker.controller) {
-                    handlers.forEach((handle) => handle(() => handleAccept(sw)));
+                    console.log('state change', sw);
+                    sendOnce(() => handleAccept(sw));
+                    return;
                 }
             });
         });
@@ -50,12 +59,10 @@ function setupSWListener() {
     navigator.serviceWorker.addEventListener('controllerchange', () => {
         window.location.reload();
     });
-    listenerSetUp = true;
 }
 export function onUpdate(handle) {
     handlers.push(handle);
     if (!listenerSetUp) {
         setupSWListener();
     }
-    handlers.push(handle);
 }

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/no-update.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount, type Snippet } from 'svelte';
-	import { onUpdate } from './update.js';
+	import { onUpdate } from './client.js';
 
 	let { children }: { children?: Snippet } = $props();
 

package/dist/update-available.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount, type Snippet } from 'svelte';
-	import { onUpdate } from './update.js';
+	import { onUpdate } from './client.js';
 
 	let { children }: { children?: Snippet<[{ accept: () => void }]> } = $props();
 

package/package.json

@@ -1,8 +1,7 @@
 {
 	"name": "sveltekit-cache-first",
-	"version": "0.0.4",
+	"version": "1.0.0",
 	"repository": "github:isaxk/sveltekit-cache-first",
-	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -14,7 +13,6 @@
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write ."
 	},
-
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",
@@ -30,15 +28,11 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
-		},
-		"./sw": {
-			"types": "./dist/sw.d.ts",
-			"default": "./dist/sw.js"
 		}
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0",
-		"@sveltejs/kit": "^2.63.0"
+		"@sveltejs/kit": "^2.63.0",
+		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
 		"@eslint/js": "^10.0.1",

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 Isaac Boorman
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.