feat!: support for Vite 3.1

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@antfu",
+  "extends": ["@antfu"],
   "overrides": [
     {
       "files": [

.npmrc

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

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/guide/development.md

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

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,13 @@
 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],
-              },
-            },
-          },
-        ],
-      },
-    }),
   ],
 })

examples/preact-router/package.json

@@ -43,21 +43,21 @@
     "serve": "serve dist"
   },
   "dependencies": {
-    "preact": "^10.8.2",
-    "preact-router": "^4.0.1"
+    "preact": "^10.10.6",
+    "preact-router": "^4.1.0"
   },
   "devDependencies": {
-    "@preact/preset-vite": "^2.3.0",
+    "@preact/preset-vite": "^2.3.1",
     "@rollup/plugin-replace": "^4.0.0",
     "cross-env": "^7.0.3",
     "https-localhost": "^4.7.1",
     "rimraf": "^3.0.2",
-    "typescript": "^4.7.4",
-    "vite": "^2.9.13",
+    "typescript": "^4.8.2",
+    "vite": "^3.1.0",
     "vite-plugin-pwa": "workspace:*",
-    "workbox-core": "^6.5.3",
-    "workbox-precaching": "^6.5.3",
-    "workbox-routing": "^6.5.3",
-    "workbox-window": "^6.5.3"
+    "workbox-core": "^6.5.4",
+    "workbox-precaching": "^6.5.4",
+    "workbox-routing": "^6.5.4",
+    "workbox-window": "^6.5.4"
   }
 }

examples/react-router/package.json

@@ -51,20 +51,20 @@
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^4.0.0",
-    "@types/react": "^18.0.14",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^18.0.18",
+    "@types/react-dom": "^18.0.6",
     "@types/react-router-config": "^5.0.6",
     "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react-refresh": "^1.3.6",
     "cross-env": "^7.0.3",
     "https-localhost": "^4.7.1",
     "rimraf": "^3.0.2",
-    "typescript": "^4.7.4",
-    "vite": "^2.9.13",
+    "typescript": "^4.8.2",
+    "vite": "^3.1.0",
     "vite-plugin-pwa": "workspace:*",
-    "workbox-core": "^6.5.3",
-    "workbox-precaching": "^6.5.3",
-    "workbox-routing": "^6.5.3",
-    "workbox-window": "^6.5.3"
+    "workbox-core": "^6.5.4",
+    "workbox-precaching": "^6.5.4",
+    "workbox-routing": "^6.5.4",
+    "workbox-window": "^6.5.4"
   }
 }