add support for new SvelteKit and Vite integration

[userquin]

Latest version of SvelteKit now uses Vite, that's, SvelteKit is just another plugin (check this repo https://github.com/userquin/pwa-sveltekit-vite):

• we need to move the _generateSW to writeBundle: SvelteKit uses process.exit on closeBundle
• we also need to detect the vite-plugin-svelte-kit on SSR (we need to generate the SW before SvelteKit calls process.exit when prerender enabled)

      async writeBundle() {
        const sveltekitPresent = viteConfig.plugins.find(p => p.name === 'vite-plugin-svelte-kit')
        if ((!viteConfig.build.ssr || sveltekitPresent) && !options2.disable)
          await _generateSW();
      },

/cc @antfu @benmccann

[userquin]

updated https://github.com/userquin/pwa-sveltekit-vite using local copy of #327

it is working but we need to wait SvelteKit to fix the process.exit in the closebundle hook: we've included a sequential plugin hook that sleeps 1sc and then call pwa closeBundle hook and finally call kit closeBundle hook.

https://github.com/sveltejs/kit/issues/5306

/cc @benmccann

[benquan]

Is this the cause for the error in the sveltekit example?

svelte-kit build is no longer available — use vite build instead

[userquin]

@benquan yes and no: new kit has a few internal breaking changes, the cli is just one, you need to install kit as a plugin and use Vite cli.

We are adding integration support, just released 0.13.0 version to support Vite 3.1 for sequential hooks (Rollup), that's required to run new kit apps.

[userquin]

Released initial version of custom kit plugin: https://vite-pwa-org.netlify.app/frameworks/sveltekit.html

The example in this repo Will be removed, check the New repo for new custom kit plugin here https://github.com/vite-pwa/sveltekit

[Tommertom]

@userquin

When I do the install routine using npm, then I get error - Cannot find module '@vite-pwa/sveltekit' or its corresponding type declarations.ts(2307) - in vite.config.ts.

Node version 16.14.2.

package.json:

"devDependencies": {
		"@sveltejs/adapter-static": "^1.0.0-next.44",
		"@sveltejs/kit": "next",
		"@typescript-eslint/eslint-plugin": "^5.27.0",
		"@typescript-eslint/parser": "^5.27.0",
		"@vite-pwa/sveltekit": "^0.0.1",
		"eslint": "^8.16.0",
		"eslint-config-prettier": "^8.3.0",
		"eslint-plugin-svelte3": "^4.0.0",
		"npm-run-all": "^4.1.5",
		"prettier": "^2.6.2",
		"prettier-plugin-svelte": "^2.7.0",
		"svelte": "^3.44.0",
		"svelte-check": "^2.7.1",
		"svelte-preprocess": "^4.10.6",
		"tslib": "^2.3.1",
		"typescript": "^4.7.4",
		"vite": "^3.2.0",
		"vite-plugin-pwa": "^0.13.1"
	},

Vite.config.ts

import type { UserConfig } from 'vite';

import { sveltekit } from '@sveltejs/kit/vite';
// import { VitePWA } from 'vite-plugin-pwa';
import { pwaConfiguration } from './pwa-configuration.js';
import { SvelteKitPWA } from '@vite-pwa/sveltekit'

const config: UserConfig = {
	plugins: [
		// VitePWA(pwaConfiguration),
		sveltekit(),
		SvelteKitPWA(pwaConfiguration)
	]
};

export default config;