feat(vitrify): add PWA support with vite-plugin-pwa

simsustech · Sep 28, 2023 · 8829902 · 8829902
1 parent 6b56a09
commit 8829902
Show file tree

Hide file tree

Showing 8 changed files with 3,166 additions and 1,180 deletions.
diff --git a/.changeset/brave-brooms-smell.md b/.changeset/brave-brooms-smell.md
@@ -0,0 +1,5 @@
+---
+'vitrify': minor
+---
+
+feat(vitrify): add PWA support with vite-plugin-pwa
diff --git a/packages/create-vitrify/src/templates.ts b/packages/create-vitrify/src/templates.ts
@@ -62,6 +62,7 @@ export const templates: Templates = {
         '@vitejs/plugin-vue',
         '@typescript-eslint/eslint-plugin',
         '@typescript-eslint/parser',
+        '@types/node',
         'critters',
         'eslint',
         'eslint-config-prettier',
@@ -72,7 +73,8 @@ export const templates: Templates = {
         'npm-run-all',
         'typescript',
         'vite',
-        'vitrify'
+        'vitrify',
+        'workbox-window'
       ]),
       exports: {
         '.': {
@@ -113,6 +115,9 @@ export const templates: Templates = {
           import: './dist/index.js',
           src: './src/ui/index.ts'
         },
+        './css': {
+          import: './dist/style.css'
+        },
         './vite-plugin': {
           types: './dist/vite-plugin.d.ts',
           import: './dist/vite-plugin.js',

diff --git a/packages/vitrify/package.json b/packages/vitrify/package.json
@@ -71,7 +71,9 @@
     "ts-node": "^10.9.1",
     "unplugin-vue-components": "^0.24.1",
     "vite": "^4.3.4",
-    "vitest": "^0.30.1"
+    "vite-plugin-pwa": "^0.16.5",
+    "vitest": "^0.30.1",
+    "workbox-window": "^7.0.0"
   },
   "devDependencies": {
     "@types/connect": "^3.4.35",

diff --git a/packages/vitrify/src/node/index.ts b/packages/vitrify/src/node/index.ts
@@ -31,6 +31,7 @@ import type { ManualChunksOption, RollupOptions } from 'rollup'
 import { addOrReplaceTitle, appendToBody } from './helpers/utils.js'
 import type { ComponentResolver } from 'unplugin-vue-components'
 import Components from 'unplugin-vue-components/vite'
+import { VitePWA } from 'vite-plugin-pwa'
 
 const internalServerModules = [
   'util',
@@ -197,7 +198,6 @@ export const baseConfig = async ({
   command = 'build',
   mode = 'production',
   framework = 'vue',
-  pwa = false,
   debug = false,
   productName
 }: {
@@ -208,7 +208,6 @@ export const baseConfig = async ({
   command?: VitrifyCommands
   mode?: VitrifyModes
   framework?: VitrifyUIFrameworks
-  pwa?: boolean
   debug?: boolean
   productName?: string
 }): Promise<InlineConfig> => {
@@ -289,6 +288,8 @@ export const baseConfig = async ({
   } else {
   }
 
+  const isPwa = !!vitrifyConfig.vitrify?.pwa || false
+
   const frameworkPlugins = []
   const resolvers = []
   for (const framework of Object.keys(configPluginMap)) {
@@ -298,7 +299,7 @@ export const baseConfig = async ({
       frameworkPlugins.push(
         await plugin({
           ssr,
-          pwa
+          pwa: isPwa
         })
       )
       resolvers.push(resolver)
@@ -321,6 +322,10 @@ export const baseConfig = async ({
       ...vitrifyConfig.vitrify.ssr.serverModules
     ]
 
+  const vitrifyDefine: Record<string, string> = {
+    __IS_PWA__: `${isPwa}`
+  }
+
   const plugins: UserConfig['plugins'] = [
     {
       name: 'vitrify-transforms',
@@ -349,6 +354,11 @@ export const baseConfig = async ({
             )
           // code = code.replace(/<\/style>/, sass + '</style>')
         }
+
+        for (const key in vitrifyDefine) {
+          code = code.replaceAll(key, vitrifyDefine[key])
+        }
+
         return code
       }
     },
@@ -387,24 +397,6 @@ export const baseConfig = async ({
         if (VIRTUAL_MODULES.includes(id)) return { id }
         return
       },
-      // transform: (code, id) => {
-      //   if (['main.ts', 'vitrify'].every((val) => id.includes(val))) {
-      //     code =
-      //       `${globalCss.map((css) => `import '${css}'`).join('\n')}\n` + code
-      //   }
-      //   if (['RootComponent.vue', 'vitrify'].every((val) => id.includes(val))) {
-      //     console.log('lksdflkjsdf')
-      //     const sass = [
-      //       ...Object.entries(sassVariables).map(
-      //         ([key, value]) => `${key}: ${value}`
-      //       ),
-      //       ...globalSass.map((sass) => `@import '${sass}'`)
-      //     ].join('\n')
-      //     code = code.replace(/<\/style>/, sass + '</style>')
-      //     console.log(code)
-      //   }
-      //   return code
-      // },
       load(id) {
         if (id === 'virtual:vitrify-hooks') {
           return `export const onBoot = [${onBootHooks
@@ -472,6 +464,17 @@ export const baseConfig = async ({
       resolvers
     })
   ]
+  if (isPwa) {
+    plugins.unshift(
+      VitePWA({
+        injectRegister: null,
+        workbox: {
+          globPatterns: ['**/*.{js,mjs,css,html,ico,png,svg,pdf}']
+        },
+        ...vitrifyConfig.vitrify?.pwa
+      })
+    )
+  }
   if (command !== 'test') {
     plugins.unshift({
       name: 'html-transform',

diff --git a/packages/vitrify/src/node/vitrify-config.ts b/packages/vitrify/src/node/vitrify-config.ts
@@ -2,6 +2,7 @@ import type { Alias, UserConfig } from 'vite'
 import type { QuasarConf } from './plugins/quasar.js'
 import type { ComponentInternalInstance } from '@vue/runtime-core'
 import type { FastifyServerOptions } from 'fastify'
+import type { VitePWAOptions } from 'vite-plugin-pwa'
 import { ComponentResolver } from 'unplugin-vue-components'
 
 export type BootFunction = ({
@@ -106,6 +107,10 @@ export interface VitrifyConfig extends UserConfig {
      * Files which should be a seperate chunk
      */
     manualChunks?: string[]
+    /**
+     * Enables vite-plugin-pwa
+     */
+    pwa?: Partial<VitePWAOptions>
   }
   quasar?: QuasarConf
 }

diff --git a/packages/vitrify/src/vite/vue/main.ts b/packages/vitrify/src/vite/vue/main.ts
@@ -12,6 +12,7 @@ import { onBoot, onMounted } from 'virtual:vitrify-hooks'
 import routes from 'src/router/routes'
 import * as staticImports from 'virtual:static-imports'
 import App from 'src/App.vue'
+
 import RootComponent from './RootComponent.vue'
 interface ssrContext {
   ssr: boolean
@@ -28,20 +29,7 @@ export async function createApp(
   ssrContext?: ssrContext
 ) {
   let app
-  // const RootComponent = {
-  //   name: 'AppWrapper',
-  //   setup(props) {
-  //     const instance = getCurrentInstance()
-
-  //     onMountedVue(async () => {
-  //       for (let fn of onMounted) {
-  //         await fn(instance, staticImports)
-  //       }
-  //     })
 
-  //     return () => h(App, props)
-  //   }
-  // }
   if (ssr) {
     app = createSSRApp(RootComponent)
   } else {
@@ -90,5 +78,10 @@ export async function createApp(
     await fn({ app, ssrContext, staticImports })
   }
 
+  if (__IS_PWA__ && typeof window !== 'undefined') {
+    const { registerPWA } = await import('./pwa.js')
+    registerPWA(router)
+  }
+
   return { app, router, routes }
 }
diff --git a/packages/vitrify/src/vite/vue/pwa.ts b/packages/vitrify/src/vite/vue/pwa.ts
@@ -0,0 +1,8 @@
+import { useRegisterSW } from 'virtual:pwa-register/vue'
+import type { Router } from 'vue-router'
+
+export const registerPWA = (router: Router) => {
+  router.isReady().then(async () => {
+    useRegisterSW({ immediate: true })
+  })
+}