feat: `SvelteKit Vite Plugin` support #327

userquin · 2022-07-07T23:33:55Z

This PR also fix the sveltekit-pwa example.

~~supersedes #319 (ESM part)~~: ESM already included in another PR

closes #324

netlify · 2022-07-07T23:34:00Z

✅ Deploy Preview for vite-plugin-pwa ready!

Name	Link
🔨 Latest commit	`f7927c2`
🔍 Latest deploy log	https://app.netlify.com/sites/vite-plugin-pwa/deploys/62dc26193ed0fa0008711f03
😎 Deploy Preview	https://deploy-preview-327--vite-plugin-pwa.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

src/types.ts

src/plugins/build.ts

examples/sveltekit-pwa/pwa.js

examples/sveltekit-pwa/pwa-configuration.js

antfu · 2022-07-13T06:13:43Z

src/modules.ts

  // Uses require to lazy load.
  // "workbox-build" is very large and it makes config loading slow.
  // Since it is not always used, load this when it is needed.

-  return require('workbox-build')
+  try {
+    return await import('workbox-build')


Do we need interop default here?

I will check it again but it works, I can split it to check for default

examples/sveltekit-pwa/pwa-configuration.js

benmccann

woohoo! so nice you were able to remove pwa.js!

userquin · 2022-07-13T15:56:07Z

woohoo! so nice you were able to remove pwa.js!

Still need the sequential, but yeah, finally removed.

@antfu: it seems that VitePress finally included the buildEnd hook!, we can remove it also from the docs (awaiting new release).

examples/sveltekit-pwa/pwa-configuration.js

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>

userquin · 2022-07-23T10:55:21Z

@benmccann removed the sequential plugin (adapter plugin from integrations), awaiting merging sveltejs/kit#5678 and new kit release: rn the sveltekit example stops working, we only need the new version

chore: add kit outDir option (`.svelte-kit` can be configured in kit)

…rce: 'pre'`

userquin · 2022-07-23T23:28:47Z

Maybe this can help 🤞 : vitejs/vite#9326

benmccann · 2022-09-06T23:00:54Z

docs/frameworks/sveltekit.md


-Since `SvelteKit` uses `SSR / SSG`, we need to add the `ReloadPrompt` component using `dynamic import`. `Vite Plugin PWA` will only register the service worker on build, it is aligned with the current behavior of [SvelteKit service worker module](https://kit.svelte.dev/docs#modules-$service-worker).
+To update your project to use the new `vite-plugin-pwa` for SvelteKit, you only need to change the Vite config file (you don't need oldest `pwa` and `pwa-configuration` modules):


It'd probably make sense to write this aimed primarily towards people setting up new projects rather than those upgrading from older versions

Suggested change

To update your project to use the new `vite-plugin-pwa` for SvelteKit, you only need to change the Vite config file (you don't need oldest `pwa` and `pwa-configuration` modules):

To update your project to use the new `vite-plugin-pwa` for SvelteKit, you only need to add the plugin in the Vite config file (if you're upgrading from a prior version, you no longer need the `pwa` and `pwa-configuration` modules):

benmccann · 2022-09-06T23:01:57Z

docs/frameworks/sveltekit.md

+// import { VitePWA } from 'vite-plugin-pwa'          <== replace this import
+import { ViteSvelteKitPWA } from 'vite-plugin-pwa' // <== with this import


We can just show how it should be configured. The replace suggestion won't apply for new users

Suggested change

// import { VitePWA } from 'vite-plugin-pwa' <== replace this import

import { ViteSvelteKitPWA } from 'vite-plugin-pwa' // <== with this import

import { ViteSvelteKitPWA } from 'vite-plugin-pwa'

benmccann · 2022-09-06T23:06:26Z

docs/frameworks/sveltekit.md

+
+## SvelteKit Pages
+
+If you want your application can work offline, you should remove `hydrate: false` from all your pages, it will prevent to inject the layout and so will not work offline.


content looks good. just a minor wording suggestion

Suggested change

If you want your application can work offline, you should remove `hydrate: false` from all your pages, it will prevent to inject the layout and so will not work offline.

If you want your application to work offline, you should ensure you have not set `hydrate: false` on any of your pages since it will prevent injecting JavaScript into the layout for offline support.

benmccann · 2022-09-06T23:10:23Z

docs/frameworks/sveltekit.md

+## Plugin Configuration
+
+`vite-plugin-pwa` has been modified to automatically detect SvelteKit plugin: once detected, it will add a set of default configuration options to your `vite-plugin-pwa` options:
+- allows you to configure the SvelteKit build output folder: defaults to `.svelte-kit`, but you can change it with `svelteKitOptions.outDir` plugin option (([SvelteKit outDir](https://kit.svelte.dev/docs/configuration#outdir))).
+- configures the `globDirectory` with SvelteKit build output folder: `globDirectory: '.svelte-kit/output'` (using previous `svelteKitOptions.outDir` option).
+- adds `.svelte-kit/output/client` and `.svelte-kit/output/prerendered` folders to the `globPatterns`: `globPatterns: ['prerendered/**/*.html', 'client/**/*.{js,css,ico,png,svg,webp}']`.
+- configures default Rollup assets naming convention: `dontCacheBustURLsMatching: /-[a-f0-9]{8}\./` (by default, `vite-plugin-pwa` will use Vite assets naming convention: `/\.[a-f0-9]{8}\./`).
+- excludes adding manifest icons: `includeManifestIcons: false` (Vite will copy all `publicDir` content to the SvelteKit output folder before `vite-plugin-pwa` runs, and so, you will end up with duplicated entries in the service worker's precache manifest).
+- allows you to configure `trailingSlash` option: `vite-plugin-pwa` will use it in its internal Workbox `manifestTransform` callback ([SvelteKit trailingslash](https://kit.svelte.dev/docs/configuration#trailingslash)).
+- allows you to configure `fallback` adapter option: `vite-plugin-pwa` will configure it in the `workbox.navigateFallback` option, only when using `generateSW` strategy ([adapter-static fallback](https://github.com/sveltejs/kit/tree/master/packages/adapter-static#fallback)).
+
+Some of the above options will be excluded if you already provide them or if you provide options where there may be a conflict between them: you can view the source code of the [SvelteKit PWA configuration module](https://github.com/antfu/vite-plugin-pwa/tree/main/src/integrations/sveltekit/config.ts) to verify that there are no conflicts.
+


This is internal implementation details that users should not need to worry about. It makes it sound a lot more complicated than it really is to setup the plugin

Suggested change

## Plugin Configuration

`vite-plugin-pwa` has been modified to automatically detect SvelteKit plugin: once detected, it will add a set of default configuration options to your `vite-plugin-pwa` options:

- allows you to configure the SvelteKit build output folder: defaults to `.svelte-kit`, but you can change it with `svelteKitOptions.outDir` plugin option (([SvelteKit outDir](https://kit.svelte.dev/docs/configuration#outdir))).

- configures the `globDirectory` with SvelteKit build output folder: `globDirectory: '.svelte-kit/output'` (using previous `svelteKitOptions.outDir` option).

- adds `.svelte-kit/output/client` and `.svelte-kit/output/prerendered` folders to the `globPatterns`: `globPatterns: ['prerendered/**/*.html', 'client/**/*.{js,css,ico,png,svg,webp}']`.

- configures default Rollup assets naming convention: `dontCacheBustURLsMatching: /-[a-f0-9]{8}\./` (by default, `vite-plugin-pwa` will use Vite assets naming convention: `/\.[a-f0-9]{8}\./`).

- excludes adding manifest icons: `includeManifestIcons: false` (Vite will copy all `publicDir` content to the SvelteKit output folder before `vite-plugin-pwa` runs, and so, you will end up with duplicated entries in the service worker's precache manifest).

- allows you to configure `trailingSlash` option: `vite-plugin-pwa` will use it in its internal Workbox `manifestTransform` callback ([SvelteKit trailingslash](https://kit.svelte.dev/docs/configuration#trailingslash)).

- allows you to configure `fallback` adapter option: `vite-plugin-pwa` will configure it in the `workbox.navigateFallback` option, only when using `generateSW` strategy ([adapter-static fallback](https://github.com/sveltejs/kit/tree/master/packages/adapter-static#fallback)).

Some of the above options will be excluded if you already provide them or if you provide options where there may be a conflict between them: you can view the source code of the [SvelteKit PWA configuration module](https://github.com/antfu/vite-plugin-pwa/tree/main/src/integrations/sveltekit/config.ts) to verify that there are no conflicts.

benmccann · 2022-09-06T23:12:59Z

docs/frameworks/sveltekit.md

  onMount(async () => {
-    !dev && browser && (ReloadPrompt = (await import('$lib/components/ReloadPrompt.svelte')).default)
+    if (!dev && browser) {


you probably don't need && browser. onMount only runs on the browser and is generally tree-shaken away on the server, I believe

Suggested change

if (!dev && browser) {

if (!dev) {

userquin · 2022-10-03T16:58:09Z

included in the new integration repo

feat: ESM and SvelteKit Vite Plugin support

708a11c

userquin mentioned this pull request Jul 7, 2022

feat: add ESM support #319

Closed

userquin requested a review from antfu July 7, 2022 23:36

userquin added 2 commits July 8, 2022 01:40

chore: don't find svelte kit plugin if not ssr

60ead2e

chore: remove duplicate replace plugin on sveltekit-pwa

aab277f