feat!: refactor plugin to allow work with latest kit changes (#32)

* fix: refactor plugin to allow work with latest kit changes

* chore: udpate pnpm version

* chore: fast-glob order

* chore: allow kit build custom ts sw

* chore: remove kit types from sw

* chore: use define to configure `process.env.NODE_ENV`

* fix: `process.env.NODE_ENV`on vite config example

* chore: cleanup + log on manifest transform

* fix: console.log lint

* chore: simplify configuration to switch between strategies

* chore: include webmanifest in globPatterns

* chore: handle self destroying sw properly

* chore: fix min kit peer version to 1.3.1

* chore: remove `latestKit` option

* chore: include min kit version on readme

Author: userquin

README.md

@@ -44,6 +44,8 @@ Zero-config PWA Plugin for SvelteKit
 
 ## 📦 Install
 
+> From v0.2.0, `@vite-pwa/sveltekit` requires **SvelteKit 1.3.1 or above**.
+
 ```bash
 npm i @vite-pwa/sveltekit -D 
 

build.config.ts

@@ -7,6 +7,8 @@ export default defineBuildConfig({
   clean: true,
   declaration: true,
   externals: [
+    'fast-glob',
+    'kolorist',
     'vite',
     'vite-plugin-pwa',
     'workbox-build',

examples/sveltekit-ts/.npmrc

@@ -0,0 +1 @@
+shell-emulator=true

examples/sveltekit-ts/package.json

@@ -5,27 +5,28 @@
 		"sw-dev": "vite dev",
 		"dev": "vite dev",
 		"build": "vite build",
+		"build-self-destroying": "SELF_DESTROYING_SW=true vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "eslint .",
 		"lint-fix": "nr lint --fix"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-static": "^1.0.0",
-		"@sveltejs/kit": "^1.0.1",
+		"@sveltejs/adapter-static": "^2.0.1",
+		"@sveltejs/kit": "^1.11.0",
 		"@types/cookie": "^0.5.1",
-		"@typescript-eslint/eslint-plugin": "^5.51.0",
-		"@typescript-eslint/parser": "^5.51.0",
+		"@typescript-eslint/eslint-plugin": "^5.54.1",
+		"@typescript-eslint/parser": "^5.54.1",
 		"@vite-pwa/sveltekit": "workspace:*",
-		"eslint": "^8.33.0",
+		"eslint": "^8.35.0",
 		"eslint-plugin-svelte3": "^4.0.0",
-		"svelte": "^3.54.0",
-		"svelte-check": "^2.10.2",
-		"svelte-preprocess": "^5.0.0",
-		"tslib": "^2.4.1",
+		"svelte": "^3.55.1",
+		"svelte-check": "^3.1.0",
+		"svelte-preprocess": "^5.0.1",
+		"tslib": "^2.5.0",
 		"typescript": "^4.9.5",
-		"vite": "^4.0.0"
+		"vite": "^4.1.4"
 	},
 	"type": "module",
 	"dependencies": {

examples/sveltekit-ts/pwa.mjs

@@ -0,0 +1 @@
+export const generateSW = true;

examples/sveltekit-ts/src/prompt-sw.ts

@@ -1,3 +1,7 @@
+/// <reference lib="WebWorker" />
+/// <reference types="vite/client" />
+/// <reference no-default-lib="true"/>
+/// <reference lib="esnext" />
 import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
 import { NavigationRoute, registerRoute } from 'workbox-routing'
 

examples/sveltekit-ts/svelte.config.js

@@ -1,5 +1,7 @@
 import adapter from '@sveltejs/adapter-static';
 import preprocess from 'svelte-preprocess';
+// you don't need to do this if you're using generateSW strategy in your app
+import { generateSW } from './pwa.mjs';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -8,7 +10,14 @@ const config = {
 	preprocess: preprocess(),
 
 	kit: {
-		adapter: adapter()
+		adapter: adapter(),
+		serviceWorker: {
+			register: false,
+		},
+		files: {
+			// you don't need to do this if you're using generateSW strategy in your app
+			serviceWorker: generateSW ? undefined : 'src/prompt-sw.ts',
+		}
 	}
 };
 

examples/sveltekit-ts/vite.config.ts

@@ -1,15 +1,21 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import type { UserConfig } from 'vite';
 import { SvelteKitPWA } from '@vite-pwa/sveltekit';
+// you don't need to do this if you're using generateSW strategy in your app
+import { generateSW } from './pwa.mjs';
 
 const config: UserConfig = {
+	// WARN: this will not be necessary on your project
 	logLevel: 'info',
+	// WARN: this will not be necessary on your project
 	build: {
 		minify: false,
 	},
+	// WARN: this will not be necessary on your project
 	define: {
 		__DATE__: `'${new Date().toISOString()}'`,
 		__RELOAD_SW__: false,
+		'process.env.NODE_ENV': process.env.NODE_ENV === 'production' ? '"production"' : '"development"',
 	},
 	// WARN: this will not be necessary on your project
 	server: {
@@ -23,10 +29,13 @@ const config: UserConfig = {
 		SvelteKitPWA({
 				srcDir: './src',
 				mode: 'development',
-				strategies: 'injectManifest',
-				filename: 'prompt-sw.ts',
+				// you don't need to do this if you're using generateSW strategy in your app
+				strategies: generateSW ? 'generateSW' : 'injectManifest',
+				// you don't need to do this if you're using generateSW strategy in your app
+				filename: generateSW ? undefined : 'prompt-sw.ts',
 				scope: '/',
 				base: '/',
+				selfDestroying: process.env.SELF_DESTROYING_SW === 'true',
 				manifest: {
 					short_name: 'SvelteKit PWA',
 					name: 'SvelteKit PWA',
@@ -57,6 +66,9 @@ const config: UserConfig = {
 				injectManifest: {
 					globPatterns: ['client/**/*.{js,css,ico,png,svg,webp,woff,woff2}']
 				},
+				workbox: {
+					globPatterns: ['client/**/*.{js,css,ico,png,svg,webp,woff,woff2}']
+				},
 				devOptions: {
 					enabled: true,
 					type: 'module',
@@ -65,7 +77,8 @@ const config: UserConfig = {
 				// if you have shared info in svelte config file put in a separate module and use it also here
 				kit: {}
 			}
-		)]
+		)
+	]
 };
 
 export default config;

package.json

@@ -2,7 +2,7 @@
   "name": "@vite-pwa/sveltekit",
   "type": "module",
   "version": "0.1.3",
-  "packageManager": "pnpm@7.26.1",
+  "packageManager": "pnpm@7.29.1",
   "description": "Zero-config PWA for SvelteKit",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -49,22 +49,24 @@
     "release": "bumpp && npm publish"
   },
   "peerDependencies": {
-    "@sveltejs/kit": "^1.0.0",
+    "@sveltejs/kit": "^1.3.1",
     "vite-plugin-pwa": "^0.14.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.35.2",
-    "@antfu/ni": "^0.19.0",
+    "@antfu/eslint-config": "^0.36.0",
+    "@antfu/ni": "^0.20.0",
     "@types/debug": "^4.1.7",
-    "@types/node": "^18.13.0",
+    "@types/node": "^18.14.6",
     "@types/workbox-build": "^5.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.51.0",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@vite-pwa/sveltekit": "workspace:*",
     "bumpp": "^8.2.1",
-    "eslint": "^8.33.0",
-    "svelte": "^3.54.0",
+    "eslint": "^8.35.0",
+    "kolorist": "^1.6.0",
+    "svelte": "^3.55.1",
     "typescript": "^4.9.5",
-    "unbuild": "^1.1.1",
-    "vite": "^4.0.0",
-    "vite-plugin-pwa": "^0.14.2"
+    "unbuild": "^1.1.2",
+    "vite": "^4.1.4",
+    "vite-plugin-pwa": "^0.14.4"
   }
 }