feat: upgrade to Vite 3.1.0

.eslintrc.json

@@ -1,15 +1,16 @@
 {
-  "extends": "@antfu",
+  "extends": ["@antfu"],
   "overrides": [
     {
       "files": [
         "**/*.md/*.*"
       ],
       "rules": {
-        "@typescript-eslint/no-this-alias": "off",
-        "n/handle-callback-err": "off",
+        "no-restricted-imports": "off",
         "no-restricted-syntax": "off",
-        "no-labels": "off"
+        "no-labels": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/no-var-requires": "off"
       }
     }
   ]

.npmrc

@@ -0,0 +1,4 @@
+ignore-workspace-root-check=true
+shamefully-hoist=true
+strict-peer-dependencies=false
+auto-install-peers=true

README.md

@@ -71,11 +71,11 @@ export default {
 Read the [📖 documentation](https://vite-plugin-pwa.netlify.app/guide/) for a complete guide on how to configure and use 
 this plugin.
 
-Check out the client type declarations [client.d.ts](./client.d.ts) for built-in frameworks support.
+Check out the client type declarations [client.d.ts](packages/vite-plugin-pwa/client.d.ts) for built-in frameworks support.
 
 ## 👀 Full config
 
-Check out the type declaration [src/types.ts](./src/types.ts) and the following links for more details.
+Check out the type declaration [src/types.ts](packages/vite-plugin-pwa/src/types.ts) and the following links for more details.
 
 - [Web app manifests](https://developer.mozilla.org/en-US/docs/Web/Manifest)
 - [Workbox](https://developers.google.com/web/tools/workbox)

docs/.vitepress/components.d.ts

@@ -3,6 +3,8 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 import '@vue/runtime-core'
 
+export {}
+
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     CleanupOutdatedCaches: typeof import('./theme/components/CleanupOutdatedCaches.md')['default']
@@ -24,5 +26,3 @@ declare module '@vue/runtime-core' {
     TypeScriptError2307: typeof import('./theme/components/TypeScriptError2307.md')['default']
   }
 }
-
-export {}

docs/.vitepress/config.ts

@@ -1,5 +1,7 @@
 import { defineConfig } from 'vitepress'
 import { version } from '../../package.json'
+import { pwa } from '../scripts/pwa'
+import { buildEnd } from '../scripts/build'
 
 const Guide = [
   {
@@ -328,4 +330,10 @@ export default defineConfig({
       '/workbox/': prepareSidebar(4),
     },
   },
+  vite: {
+    plugins: [
+      pwa(),
+    ],
+  },
+  buildEnd,
 })

docs/frameworks/sveltekit.md

@@ -63,6 +63,7 @@ Pages which are not prerendered or are generated with a unique adapter will need
 As an example, when using [@sveltejs/adapter-static](https://github.com/sveltejs/kit/tree/master/packages/adapter-static) with `generateSW` strategy and `Prompt for update` behavior, you will need:
 
 ::: details 1) add pwa.js script
+
 ```js
 import { copyFileSync } from 'fs'
 import { resolveConfig } from 'vite'
@@ -187,6 +188,7 @@ export { pwaConfiguration }
 :::
 
 ::: details 4) add Vite Plugin PWA to svelte.config.js
+
 ```js
 import adapter from '@sveltejs/adapter-static'
 import preprocess from 'svelte-preprocess'

docs/guide/development.md

@@ -129,7 +129,7 @@ export default defineConfig({
         /* other options */
       }
     })
-  ]   
+  ]
 })
 ```
 :::

docs/guide/faq.md

@@ -34,7 +34,9 @@ or `main.js`:
 import { registerSW } from 'virtual:pwa-register'
 
 const updateSW = registerSW({
-  onRegisterError(error) {}
+  onRegisterError(error) {
+    console.log('error register sw', error)  
+  }
 })
 ```
 

docs/package.json

@@ -9,25 +9,25 @@
     "serve": "npm run build && serve .vitepress/dist"
   },
   "dependencies": {
-    "@vueuse/core": "^8.7.5",
-    "@vueuse/shared": "^8.7.5",
-    "vue": "^3.2.37"
+    "@vueuse/core": "^9.2.0",
+    "@vueuse/shared": "^9.2.0",
+    "vue": "^3.2.38"
   },
   "devDependencies": {
     "@types/fs-extra": "^9.0.13",
-    "@vitejs/plugin-vue": "^2.3.3",
-    "@vueuse/core": "^8.7.5",
+    "@vitejs/plugin-vue": "^3.1.0",
+    "@vueuse/core": "^9.2.0",
     "esbuild-register": "^3.3.3",
-    "eslint": "^8.19.0",
+    "eslint": "^8.23.0",
     "fast-glob": "^3.2.11",
     "fs-extra": "^10.1.0",
     "https-localhost": "^4.7.1",
-    "typescript": "^4.7.4",
-    "unocss": "^0.38.2",
-    "unplugin-vue-components": "^0.19.9",
-    "vite": "^2.9.13",
+    "typescript": "^4.8.2",
+    "unocss": "^0.45.18",
+    "unplugin-vue-components": "^0.22.4",
+    "vite": "^3.1.0",
     "vite-plugin-pwa": "workspace:*",
-    "vitepress": "^1.0.0-alpha.4",
-    "workbox-window": "^6.5.3"
+    "vitepress": "^1.0.0-alpha.13",
+    "workbox-window": "^6.5.4"
   }
 }

docs/plugins/navbar.ts

@@ -5,7 +5,7 @@ export default function NavbarFix(): Plugin {
     name: 'vitepress-sidebar-logo-fix',
     enforce: 'pre',
     transform(code, id) {
-      if (id.includes('VPNavBarTitle.vue') && !id.endsWith('.css')) {
+      if (id.includes('VPNavBarTitle.vue') && !id.endsWith('.css') && !id.includes('&setup=')) {
         return `
 <script setup lang="ts">
 import { useData } from 'vitepress'

docs/scripts/build.ts

@@ -1,15 +1,18 @@
 import { resolveConfig } from 'vite'
-import type { VitePluginPWAAPI } from '../../dist'
+import type { VitePluginPWAAPI } from 'vite-plugin-pwa'
 import { optimizePages } from './assets'
+import { pwa } from './pwa'
 
-const rebuildPwa = async () => {
-  const config = await resolveConfig({}, 'build', 'production')
+export const buildEnd = async () => {
+  await optimizePages()
+  const config = await resolveConfig( {
+    plugins: [pwa()]
+  },
+      'build',
+      'production'
+  )
   // when `vite-plugin-pwa` is presented, use it to regenerate SW after rendering
   const pwaPlugin: VitePluginPWAAPI = config.plugins.find(i => i.name === 'vite-plugin-pwa')?.api
-  if (pwaPlugin && pwaPlugin.generateSW && !pwaPlugin.disabled) {
-    await optimizePages()
+  if (pwaPlugin && pwaPlugin.generateSW && !pwaPlugin.disabled)
     await pwaPlugin.generateSW()
-  }
 }
-
-rebuildPwa()

docs/scripts/pwa.ts

@@ -0,0 +1,81 @@
+import { VitePWA } from 'vite-plugin-pwa'
+
+export const pwa = () => {
+  return VitePWA({
+    outDir: '.vitepress/dist',
+    registerType: 'prompt',
+    includeManifestIcons: false,
+    manifest: {
+      id: '/',
+      name: 'Vite Plugin PWA',
+      short_name: 'PWA for Vite',
+      description: 'Zero-config PWA for Vite',
+      theme_color: '#ffffff',
+      icons: [
+        {
+          src: 'pwa-192x192.png',
+          sizes: '192x192',
+          type: 'image/png',
+        },
+        {
+          src: 'pwa-512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+        },
+        {
+          src: 'icon_light.svg',
+          sizes: '155x155',
+          type: 'image/svg',
+          purpose: 'any maskable',
+        },
+      ],
+    },
+    workbox: {
+      globPatterns: ['**/*.{css,js,html,svg,png,ico,txt,woff2}'],
+      runtimeCaching: [
+        {
+          urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'google-fonts-cache',
+            expiration: {
+              maxEntries: 10,
+              maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
+            },
+            cacheableResponse: {
+              statuses: [0, 200],
+            },
+          },
+        },
+        {
+          urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'gstatic-fonts-cache',
+            expiration: {
+              maxEntries: 10,
+              maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
+            },
+            cacheableResponse: {
+              statuses: [0, 200],
+            },
+          },
+        },
+        {
+          urlPattern: /^https:\/\/cdn\.jsdelivr\.net\/.*/i,
+          handler: 'NetworkFirst',
+          options: {
+            cacheName: 'jsdelivr-images-cache',
+            expiration: {
+              maxEntries: 10,
+              maxAgeSeconds: 60 * 60 * 24 * 7, // <== 7 days
+            },
+            cacheableResponse: {
+              statuses: [0, 200],
+            },
+          },
+        },
+      ],
+    },
+  })
+}

docs/vite.config.ts

@@ -2,10 +2,15 @@ import { defineConfig } from 'vite'
 import Components from 'unplugin-vue-components/vite'
 import { presetAttributify, presetUno } from 'unocss'
 import Unocss from 'unocss/vite'
-import { VitePWA } from '../dist'
 import NavbarFix from './plugins/navbar'
 
 export default defineConfig({
+  ssr: {
+    format: 'cjs',
+  },
+  legacy: {
+    buildSsrCjsExternalHeuristics: true,
+  },
   build: {
     // sourcemap: true,
     // minify: false,
@@ -15,6 +20,7 @@ export default defineConfig({
   optimizeDeps: {
     exclude: [
       '@vueuse/core',
+      'vitepress',
     ],
   },
   server: {
@@ -44,84 +50,5 @@ export default defineConfig({
     Unocss({
       presets: [presetUno(), presetAttributify()],
     }),
-
-    // https://github.com/antfu/vite-plugin-pwa
-    VitePWA({
-      outDir: '.vitepress/dist',
-      registerType: 'prompt',
-      includeManifestIcons: false,
-      manifest: {
-        id: '/',
-        name: 'Vite Plugin PWA',
-        short_name: 'PWA for Vite',
-        description: 'Zero-config PWA for Vite',
-        theme_color: '#ffffff',
-        icons: [
-          {
-            src: 'pwa-192x192.png',
-            sizes: '192x192',
-            type: 'image/png',
-          },
-          {
-            src: 'pwa-512x512.png',
-            sizes: '512x512',
-            type: 'image/png',
-          },
-          {
-            src: 'icon_light.svg',
-            sizes: '155x155',
-            type: 'image/svg',
-            purpose: 'any maskable',
-          },
-        ],
-      },
-      workbox: {
-        globPatterns: ['**/*.{css,js,html,svg,png,ico,txt,woff2}'],
-        runtimeCaching: [
-          {
-            urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
-            handler: 'CacheFirst',
-            options: {
-              cacheName: 'google-fonts-cache',
-              expiration: {
-                maxEntries: 10,
-                maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
-              },
-              cacheableResponse: {
-                statuses: [0, 200],
-              },
-            },
-          },
-          {
-            urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
-            handler: 'CacheFirst',
-            options: {
-              cacheName: 'gstatic-fonts-cache',
-              expiration: {
-                maxEntries: 10,
-                maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
-              },
-              cacheableResponse: {
-                statuses: [0, 200],
-              },
-            },
-          },
-          {
-            urlPattern: /^https:\/\/cdn\.jsdelivr\.net\/.*/i,
-            handler: 'NetworkFirst',
-            options: {
-              cacheName: 'jsdelivr-images-cache',
-              expiration: {
-                maxEntries: 10,
-                maxAgeSeconds: 60 * 60 * 24 * 7, // <== 7 days
-              },
-              cacheableResponse: {
-                statuses: [0, 200],
-              },
-            },
-          },
-        ],
-      },
-    }),
   ],
 })