vitrify 0.12.2 → 0.13.1

package/dist/bin/dev.js

@@ -135,7 +135,8 @@ ssr, framework = 'vue', host, appDir, publicDir, vite }) {
         server = app.server;
         if (ssr === 'fastify') {
             vite.fastifyRestart = async function () {
-                if (vite && app && (await app.ready())) {
+                if (vite && app) {
+                    await app.ready();
                     await app.close();
                     ({ app, server } = await createServer({
                         ssr: 'fastify',

package/dist/index.js

@@ -12,6 +12,7 @@ import { fileURLToPath } from 'url';
 import { resolve } from './app-urls.js';
 import { addOrReplaceTitle, appendToBody } from './helpers/utils.js';
 import Components from 'unplugin-vue-components/vite';
+import { VitePWA } from 'vite-plugin-pwa';
 const internalServerModules = [
     'util',
     'vitrify',
@@ -144,7 +145,7 @@ async function bundleConfigFile(fileName, isESM = false) {
         dependencies: result.metafile ? Object.keys(result.metafile.inputs) : []
     };
 }
-export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command = 'build', mode = 'production', framework = 'vue', pwa = false, debug = false, productName }) => {
+export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command = 'build', mode = 'production', framework = 'vue', debug = false, productName }) => {
     const { getAppDir, getCliDir, getCliViteDir, getSrcDir, getCwd } = await import('./app-urls.js');
     if (!appDir) {
         appDir = getAppDir();
@@ -216,6 +217,7 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
     }
     else {
     }
+    const isPwa = !!vitrifyConfig.vitrify?.pwa || false;
     const frameworkPlugins = [];
     const resolvers = [];
     for (const framework of Object.keys(configPluginMap)) {
@@ -224,7 +226,7 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
             const resolver = await configResolverMap[framework]();
             frameworkPlugins.push(await plugin({
                 ssr,
-                pwa
+                pwa: isPwa
             }));
             resolvers.push(resolver);
         }
@@ -307,24 +309,6 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
                     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
@@ -386,6 +370,15 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
             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',
@@ -473,7 +466,11 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
     let noExternal = [
         new RegExp(`^(?!(${[...builtinModules, ...serverModules].join('|')}))`)
     ];
-    const external = [...builtinModules, ...serverModules];
+    const external = [
+        ...builtinModules,
+        ...serverModules,
+        'virtual:pwa-register/vue'
+    ];
     if (ssr === 'server') {
         rollupOptions = {
             ...rollupOptions,
@@ -563,7 +560,8 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
         },
         define: {
             __HOST__: `'localhost'`,
-            __BASE_URL__: `'${base}'`
+            __BASE_URL__: `'${base}'`,
+            __IS_PWA__: `${isPwa}`
         }
     };
     return mergeConfig(config, vitrifyConfig);

package/dist/types/bin/dev.d.ts

@@ -30,7 +30,7 @@ export declare function createServer({ port, logLevel, ssr, framework, host, app
 }): Promise<{
     app: FastifyInstance<import("fastify").RawServerDefault, import("http").IncomingMessage, import("http").ServerResponse<import("http").IncomingMessage>, import("fastify").FastifyBaseLogger, import("fastify").FastifyTypeProviderDefault> | undefined;
     server: Server;
-    config: Readonly<Omit<import("vite").UserConfig, "plugins" | "assetsInclude" | "optimizeDeps" | "worker"> & {
+    config: Readonly<Omit<import("vite").UserConfig, "build" | "plugins" | "css" | "assetsInclude" | "optimizeDeps" | "worker"> & {
         configFile: string | undefined;
         configFileDependencies: string[];
         inlineConfig: InlineConfig;
@@ -48,6 +48,7 @@ export declare function createServer({ port, logLevel, ssr, framework, host, app
             alias: import("vite").Alias[];
         };
         plugins: readonly import("vite").Plugin[];
+        css: import("vite").ResolvedCSSOptions | undefined;
         esbuild: false | import("vite").ESBuildOptions;
         server: import("vite").ResolvedServerOptions;
         build: import("vite").ResolvedBuildOptions;

package/dist/types/index.d.ts

@@ -3,7 +3,7 @@ import type { BootFunction, VitrifyConfig, VitrifyConfigAsync, VitrifyCommands,
 import type { VitrifyContext } from './bin/run.js';
 import type { VitrifyPlugin } from './plugins/index.js';
 export declare const VIRTUAL_MODULES: string[];
-export declare const baseConfig: ({ ssr, appDir, publicDir, base, command, mode, framework, pwa, debug, productName }: {
+export declare const baseConfig: ({ ssr, appDir, publicDir, base, command, mode, framework, debug, productName }: {
     ssr?: VitrifySSRModes | undefined;
     appDir?: URL | undefined;
     publicDir?: URL | undefined;
@@ -11,7 +11,6 @@ export declare const baseConfig: ({ ssr, appDir, publicDir, base, command, mode,
     command?: VitrifyCommands | undefined;
     mode?: VitrifyModes | undefined;
     framework?: "vue" | undefined;
-    pwa?: boolean | undefined;
     debug?: boolean | undefined;
     productName?: string | undefined;
 }) => Promise<InlineConfig>;

package/dist/types/vitrify-config.d.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';
 export type BootFunction = ({ app, ssrContext, staticImports }: {
     app: any;
     ssrContext: Record<string, unknown>;
@@ -84,6 +85,10 @@ export interface VitrifyConfig extends UserConfig {
          * Files which should be a seperate chunk
          */
         manualChunks?: string[];
+        /**
+         * Enables vite-plugin-pwa
+         */
+        pwa?: Partial<VitePWAOptions>;
     };
     quasar?: QuasarConf;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitrify",
-  "version": "0.12.2",
+  "version": "0.13.1",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "Vite as your Full Stack development tool",
@@ -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",

package/src/node/bin/dev.ts

@@ -202,7 +202,8 @@ export async function createServer({
 
     if (ssr === 'fastify') {
       vite.fastifyRestart = async function () {
-        if (vite && app && (await app.ready())) {
+        if (vite && app) {
+          await app.ready()
           await app.close()
           ;({ app, server } = await createServer({
             ssr: 'fastify',

package/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)
@@ -349,6 +350,7 @@ export const baseConfig = async ({
             )
           // code = code.replace(/<\/style>/, sass + '</style>')
         }
+
         return code
       }
     },
@@ -387,24 +389,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 +456,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',
@@ -569,7 +564,11 @@ export const baseConfig = async ({
   let noExternal: RegExp[] | string[] = [
     new RegExp(`^(?!(${[...builtinModules, ...serverModules].join('|')}))`)
   ]
-  const external = [...builtinModules, ...serverModules]
+  const external = [
+    ...builtinModules,
+    ...serverModules,
+    'virtual:pwa-register/vue'
+  ]
 
   if (ssr === 'server') {
     rollupOptions = {
@@ -659,7 +658,8 @@ export const baseConfig = async ({
     },
     define: {
       __HOST__: `'localhost'`,
-      __BASE_URL__: `'${base}'`
+      __BASE_URL__: `'${base}'`,
+      __IS_PWA__: `${isPwa}`
     }
   } as VitrifyConfig
 

package/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
 }

package/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 }
 }

package/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 })
+  })
+}