vitrify 0.9.0 → 0.10.0

package/README.md

@@ -1,9 +1,10 @@
 # Vitrify
 
-> Pre-configured Vite CLI for your framework
+> Vite as your Full Stack development tool
 
 - Use a simple configuration file to configure and integrate required Vite plugins into your project.
-- Client-Side Rendering (CSR), Server-Side Rendering (SSR) and Fastify server build and development modes.
+- Client-Side Rendering (CSR), Server-Side Rendering (SSR), Static Site Generation (SSG) and Fastify server build and development modes.
+- Run both your frontend- and backend code through Vite at development and build time.
 
 ## Features
 
@@ -73,14 +74,24 @@ Options:
     node/bin/cli.ts-->node/bin/dev.ts;
     node/bin/cli.ts-->node/bin/test.ts;
     node/bin/cli.ts-->node/bin/run.ts;
-    node/bin/build.ts-->node/index.ts{Load baseConfig};
-    node/bin/dev.ts-->node/index.ts{Load baseConfig};
-    node/index.ts-->vitrify.config.js{Load vitrify.config.js};
+    node/bin/build.ts-->node/index.ts
+    node/bin/dev.ts-->node/index.ts
+    node/index.ts{Load baseConfig}-->vitrify.config.js{Load vitrify.config.js};
+    subgraph baseconfig
     vitrify.config.js-->node/plugins{Load plugins};
-    node/plugins-->framework{Load framework entrypoints from vite/...};
-    framework-->merge{Merge vitrify.config.js with Vitrify configuration};
-    merge-->build{Build the application};
-    merge-->dev{Spin up dev server};
+    node/plugins-->merge{Merge vitrify.config.js with Vitrify configuration};
+    end
+    merge-- mode: fastify -->frameworkFastify{Load framework entrypoints from fastify/...};
+    merge-- mode: csr/ssr/ssg -->framework{Load framework entrypoints from vite/...};
+    frameworkFastify-->fastifyBuild{Build the application};
+    frameworkFastify-->fastifyDev{Start Fastify dev server};
+    fastifySetup{onSetup / onRendered}-->fastifyDev
+    fastifySetup{onSetup / onRendered}-->fastifyBuild
+    framework-->build{Build the application};
+    build-- mode: ssg -->prerender{Run prerender.js}
+    framework-->dev{Start Vite dev server};
+    frameworkSetup{onBoot / onMounted}-->dev
+    frameworkSetup{onBoot / onMounted}-->build
     node/bin/test.ts-->test{Run a pre-configured Vitest instance};
     node/bin/run.ts-->run{Inject context into script and run script};
 ```

package/dist/bin/cli.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import cac from 'cac';
 import { getAppDir, parsePath } from '../app-urls.js';
-import { printHttpServerUrls } from '../helpers/logger.js';
+import { printHttpServerUrls, exitLogs } from '../helpers/logger.js';
 const cli = cac('vitrify');
 cli
     .command('build')
@@ -135,6 +135,9 @@ cli
     }
     console.log('Dev server running at:');
     printHttpServerUrls(server, config);
+    for (const line of exitLogs) {
+        config.logger.warn(line);
+    }
 });
 cli.command('test').action(async (options) => {
     const { test } = await import('./test.js');

package/dist/bin/dev.js

@@ -3,6 +3,7 @@ import { baseConfig } from '../index.js';
 import fastify from 'fastify';
 import { fastifySsrPlugin } from '../frameworks/vue/fastify-ssr-plugin.js';
 import isPortReachable from 'is-port-reachable';
+import { exitLogs } from '../helpers/logger.js';
 const getFirstOpenPort = async (portNumber) => {
     if (!(await isPortReachable(portNumber, { host: 'localhost' }))) {
         return portNumber;
@@ -32,11 +33,17 @@ ssr, framework = 'vue', host, appDir, publicDir, base }) {
         base
     });
     config.logLevel = logLevel;
+    config.define = {
+        ...config.define,
+        __HOST__: `'${host}'`
+    };
+    const wsPort = await getFirstOpenPort(24678);
+    exitLogs.push(`[warning] HTTPS mode enabled. Visit https://{hostname}:${wsPort} to enable a security exception for HMR.`);
     config.server = {
         https: config.server?.https,
         hmr: {
             protocol: config.server?.https ? 'wss' : 'ws',
-            port: await getFirstOpenPort(24678)
+            port: wsPort
         },
         port,
         // middlewareMode: mode === 'ssr' ? 'ssr' : undefined,
@@ -107,7 +114,8 @@ ssr, framework = 'vue', host, appDir, publicDir }) {
             await app.register(fastifySsrPlugin, {
                 appDir,
                 mode: 'development',
-                onRendered
+                onRendered,
+                host
             });
         }
         await app.listen({

package/dist/frameworks/vue/fastify-ssr-plugin.js

@@ -23,7 +23,8 @@ const fastifySsrPlugin = async (fastify, options, done) => {
             appDir: options.appDir,
             ssr: 'ssr',
             framework: 'vue',
-            base: options.baseUrl
+            base: options.baseUrl,
+            host: options.host
         });
         // const { createServer, searchForWorkspaceRoot } = await import('vite')
         // const { baseConfig } = await import('vitrify')
@@ -91,11 +92,17 @@ const fastifySsrPlugin = async (fastify, options, done) => {
                     mods: matchedModules
                 });
                 const [appHtml, preloadLinks] = await render(url, manifest, ssrContext);
+                if (!ssrContext.initialState)
+                    ssrContext.initialState = {};
+                ssrContext.initialState.provide = provide;
                 let html = template
                     .replace(`<!--preload-links-->`, preloadLinks)
                     .replace(`<!--app-html-->`, appHtml)
                     .replace('<!--product-name-->', options.productName || 'Product name')
-                    .replace('<!--dev-ssr-css-->', css);
+                    .replace('<!--dev-ssr-css-->', css)
+                    .replace('<!--initial-state-->', `<script>
+            __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
+            </script>`);
                 if (options.onRendered?.length) {
                     for (const ssrFunction of options.onRendered) {
                         html = ssrFunction(html, ssrContext);
@@ -139,7 +146,10 @@ const fastifySsrPlugin = async (fastify, options, done) => {
             ssrContext.initialState.provide = provide;
             let html = template
                 .replace(`<!--preload-links-->`, preloadLinks)
-                .replace(`<!--app-html-->`, appHtml);
+                .replace(`<!--app-html-->`, appHtml)
+                .replace('<!--initial-state-->', `<script>
+          __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
+          </script>`);
             if (options.onRendered?.length) {
                 for (const ssrFunction of options.onRendered) {
                     html = ssrFunction(html, ssrContext);

package/dist/helpers/logger.js

@@ -2,6 +2,7 @@
 import chalk from 'chalk';
 import os from 'os';
 import { resolveHostname } from '../helpers/utils.js';
+export const exitLogs = [];
 export function printHttpServerUrls(server, config) {
     const address = server.address();
     const isAddressInfo = (x) => x?.address;

package/dist/index.js

@@ -141,6 +141,8 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
     }
     catch (e) {
         console.log('No vitrify.config.(ts|js) file found, using defaults');
+        if (process.env.DEBUG)
+            console.error(e);
         vitrifyConfig = {};
     }
     const localPackages = ['vue', 'vue-router', '@vue/server-renderer'];
@@ -338,6 +340,7 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
                 }
             }
         });
+        // @ts-ignore
         if (debug)
             plugins.push(visualizer());
     }
@@ -460,6 +463,7 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
             noExternal
         },
         define: {
+            __HOST__: 'localhost',
             __BASE_URL__: `'${base}'`
         }
     };

package/dist/plugins/quasar.js

@@ -38,7 +38,6 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
             name: 'vite-plugin-quasar-transform',
             enforce: 'pre',
             transform: (code, id, options) => {
-                const { ssr } = options || {};
                 code = code
                     .replaceAll('__QUASAR_SSR__', ssr ? 'true' : 'false')
                     .replaceAll('__QUASAR_SSR_SERVER__', ssr ? '(import.meta.env.SSR === true)' : 'false')

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

@@ -49,5 +49,5 @@ export declare function createServer({ port, logLevel, ssr, framework, host, app
         worker: import("vite").ResolveWorkerOptions;
         appType: import("vite").AppType;
         experimental: import("vite").ExperimentalOptions;
-    }>;
+    } & import("vite").PluginHookUtils>;
 }>;

package/dist/types/frameworks/vue/fastify-ssr-plugin.d.ts

@@ -3,7 +3,9 @@ import type { ViteDevServer } from 'vite';
 import type { OnRenderedHook } from 'src/node/vitrify-config.js';
 export interface FastifySsrOptions {
     baseUrl?: string;
-    provide?: (req: FastifyRequest, res: FastifyReply) => Promise<Record<string, unknown>>;
+    provide?: (req: FastifyRequest, res: FastifyReply) => Promise<Record<string, unknown | {
+        value: unknown;
+    }>>;
     vitrifyDir?: URL;
     vite?: ViteDevServer;
     onRendered?: OnRenderedHook[];
@@ -11,6 +13,7 @@ export interface FastifySsrOptions {
     publicDir?: URL;
     productName?: string;
     mode?: string;
+    host?: string;
 }
 declare const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions>;
 export { fastifySsrPlugin };

package/dist/types/frameworks/vue/server.d.ts

@@ -11,4 +11,4 @@ export declare const createApp: ({ onSetup, appDir, baseUrl, fastifyPlugin, onRe
     onRendered: OnRenderedHook[];
     vitrifyDir?: URL | undefined;
     mode: string;
-}) => FastifyInstance<import("http").Server, import("http").IncomingMessage, import("http").ServerResponse, pino.Logger, import("fastify").FastifyTypeProviderDefault> & PromiseLike<FastifyInstance<import("http").Server, import("http").IncomingMessage, import("http").ServerResponse, pino.Logger, import("fastify").FastifyTypeProviderDefault>>;
+}) => FastifyInstance<import("http").Server<typeof import("http").IncomingMessage, typeof import("http").ServerResponse>, import("http").IncomingMessage, import("http").ServerResponse<import("http").IncomingMessage>, any, import("fastify").FastifyTypeProviderDefault> & PromiseLike<FastifyInstance<import("http").Server<typeof import("http").IncomingMessage, typeof import("http").ServerResponse>, import("http").IncomingMessage, import("http").ServerResponse<import("http").IncomingMessage>, any, import("fastify").FastifyTypeProviderDefault>>;

package/dist/types/helpers/logger.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="node" />
 import type { Server } from 'net';
 import type { ResolvedConfig } from 'vite';
+export declare const exitLogs: string[];
 export declare function printHttpServerUrls(server: Server, config: ResolvedConfig): void;

package/dist/types/plugins/quasar.d.ts

@@ -1,8 +1,8 @@
 import type { VitrifyPlugin } from './index.js';
 export interface QuasarConf {
-    ctx: Record<string, any>;
-    css: string[];
-    boot: string[];
+    ctx?: Record<string, any>;
+    css?: string[];
+    boot?: string[];
     framework: {
         components?: string[];
         directives?: string[];
@@ -10,8 +10,7 @@ export interface QuasarConf {
         lang?: string;
         iconSet?: string;
     };
-    animations: string[];
-    extras: string[];
+    extras?: string[];
 }
 export declare const injectSsrContext: (html: string, ssrContext: Record<string, any>) => string;
 export declare const QuasarPlugin: VitrifyPlugin;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "vitrify",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
-  "description": "Pre-configured Vite CLI for your framework",
+  "description": "Vite as your Full Stack development tool",
   "type": "module",
   "bin": {
     "vitrify": "./dist/bin/cli.js"
@@ -58,48 +58,48 @@
   "dependencies": {
     "@fastify/middie": "^8.0.0",
     "@fastify/static": "^6.5.0",
-    "@quasar/extras": "^1.15.1",
-    "@vitejs/plugin-vue": "^3.0.1",
+    "@quasar/extras": "^1.15.2",
+    "@vitejs/plugin-vue": "^3.1.0",
     "@vitrify/plugin-env": "^0.1.0",
     "builtin-modules": "^3.3.0",
-    "cac": "^6.7.12",
+    "cac": "^6.7.14",
     "chalk": "^5.0.1",
     "critters": "^0.0.16",
     "cross-env": "^7.0.3",
-    "esbuild": "^0.14.53",
-    "fastify": "^4.3.0",
+    "esbuild": "^0.15.7",
+    "fastify": "^4.5.3",
     "glob": "^8.0.3",
     "happy-dom": "^6.0.4",
     "is-port-reachable": "^4.0.0",
-    "magic-string": "^0.26.2",
+    "magic-string": "^0.26.3",
     "merge-deep": "^3.0.3",
     "readline": "^1.3.0",
-    "rollup-plugin-visualizer": "^5.7.1",
-    "sass": "1.54.2",
+    "rollup-plugin-visualizer": "^5.8.1",
+    "sass": "1.54.8",
     "ts-node": "^10.9.1",
-    "unplugin-vue-components": "^0.22.0",
-    "vite": "^3.0.4",
-    "vitest": "^0.20.3"
+    "unplugin-vue-components": "^0.22.4",
+    "vite": "^3.1.0",
+    "vitest": "^0.23.1"
   },
   "devDependencies": {
     "@types/connect": "^3.4.35",
-    "@types/glob": "^7.2.0",
+    "@types/glob": "^8.0.0",
     "@types/merge-deep": "^3.0.0",
-    "@types/node": "^18.6.3",
+    "@types/node": "^18.7.15",
     "@types/ws": "^8.5.3",
-    "@vue/runtime-core": "^3.2.37",
+    "@vue/runtime-core": "^3.2.38",
     "quasar": "^2.7.7",
-    "rollup": "^2.77.2",
-    "typescript": "^4.7.4",
-    "vue": "^3.2.37",
-    "vue-router": "^4.1.3"
+    "rollup": "^2.79.0",
+    "typescript": "^4.8.2",
+    "vue": "^3.2.38",
+    "vue-router": "^4.1.5"
   },
   "peerDependencies": {
     "@fastify/static": "^6.5.0",
-    "fastify": "^4.3.0",
+    "fastify": "^4.5.3",
     "quasar": "^2.7.7",
-    "vue": "^3.2.37",
-    "vue-router": "^4.1.3"
+    "vue": "^3.2.38",
+    "vue-router": "^4.1.5"
   },
   "publishConfig": {
     "access": "public",
@@ -110,5 +110,10 @@
     "src",
     "!dist/**/*.test.js",
     "!dist/**/test.js"
+  ],
+  "keywords": [
+    "vite",
+    "full stack",
+    "fastify"
   ]
 }

package/src/node/bin/cli.ts

@@ -1,14 +1,8 @@
 #!/usr/bin/env node
 import cac from 'cac'
 import { getAppDir, parsePath } from '../app-urls.js'
-import { printHttpServerUrls } from '../helpers/logger.js'
-import type {
-  ConfigEnv,
-  ResolvedConfig,
-  UserConfig,
-  UserConfigExport,
-  ViteDevServer
-} from 'vite'
+import { printHttpServerUrls, exitLogs } from '../helpers/logger.js'
+import type { ResolvedConfig } from 'vite'
 import type { Server } from 'net'
 
 const cli = cac('vitrify')
@@ -157,6 +151,9 @@ cli
     }
     console.log('Dev server running at:')
     printHttpServerUrls(server, config)
+    for (const line of exitLogs) {
+      config.logger.warn(line)
+    }
   })
 
 cli.command('test').action(async (options) => {

package/src/node/bin/dev.ts

@@ -7,6 +7,7 @@ import type { FastifyServerOptions } from 'fastify'
 import { fastifySsrPlugin } from '../frameworks/vue/fastify-ssr-plugin.js'
 import type { OnRenderedHook, VitrifyConfig } from '../vitrify-config.js'
 import isPortReachable from 'is-port-reachable'
+import { exitLogs } from '../helpers/logger.js'
 
 const getFirstOpenPort = async (portNumber: number): Promise<number> => {
   if (!(await isPortReachable(portNumber, { host: 'localhost' }))) {
@@ -59,11 +60,21 @@ export async function createVitrifyDevServer({
 
   config.logLevel = logLevel
 
+  config.define = {
+    ...config.define,
+    __HOST__: `'${host}'`
+  }
+
+  const wsPort = await getFirstOpenPort(24678)
+  exitLogs.push(
+    `[warning] HTTPS mode enabled. Visit https://{hostname}:${wsPort} to enable a security exception for HMR.`
+  )
+
   config.server = {
     https: config.server?.https,
     hmr: {
       protocol: config.server?.https ? 'wss' : 'ws',
-      port: await getFirstOpenPort(24678)
+      port: wsPort
     },
     port,
     // middlewareMode: mode === 'ssr' ? 'ssr' : undefined,
@@ -161,7 +172,8 @@ export async function createServer({
       await app.register(fastifySsrPlugin, {
         appDir,
         mode: 'development',
-        onRendered
+        onRendered,
+        host
       })
     }
     await app.listen({

package/src/node/bin/test.ts

@@ -8,6 +8,7 @@ export async function test(opts: { appDir: URL }) {
   })
 
   await startVitest(
+    'test',
     [],
     {
       root: opts.appDir.pathname,

package/src/node/frameworks/vue/fastify-ssr-plugin.ts

@@ -8,13 +8,12 @@ import { readFileSync } from 'fs'
 import { componentsModules, collectCss } from '../../helpers/collect-css-ssr.js'
 import type { ViteDevServer } from 'vite'
 import type { OnRenderedHook } from 'src/node/vitrify-config.js'
-
 export interface FastifySsrOptions {
   baseUrl?: string
   provide?: (
     req: FastifyRequest,
     res: FastifyReply
-  ) => Promise<Record<string, unknown>>
+  ) => Promise<Record<string, unknown | { value: unknown }>>
   vitrifyDir?: URL
   vite?: ViteDevServer
   // frameworkDir?: URL
@@ -23,6 +22,7 @@ export interface FastifySsrOptions {
   publicDir?: URL
   productName?: string
   mode?: string
+  host?: string
 }
 
 const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
@@ -55,7 +55,8 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
       appDir: options.appDir,
       ssr: 'ssr',
       framework: 'vue',
-      base: options.baseUrl
+      base: options.baseUrl,
+      host: options.host
     })
     // const { createServer, searchForWorkspaceRoot } = await import('vite')
     // const { baseConfig } = await import('vitrify')
@@ -101,7 +102,7 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
         const url = req.raw.url?.replace(options.baseUrl!, '/')
         const provide = options.provide ? await options.provide(req, res) : {}
 
-        const ssrContext = {
+        const ssrContext: Record<string, any> = {
           req,
           res,
           provide
@@ -133,11 +134,21 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
         })
 
         const [appHtml, preloadLinks] = await render(url, manifest, ssrContext)
+
+        if (!ssrContext.initialState) ssrContext.initialState = {}
+        ssrContext.initialState.provide = provide
+
         let html = template
           .replace(`<!--preload-links-->`, preloadLinks)
           .replace(`<!--app-html-->`, appHtml)
           .replace('<!--product-name-->', options.productName || 'Product name')
           .replace('<!--dev-ssr-css-->', css)
+          .replace(
+            '<!--initial-state-->',
+            `<script>
+            __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
+            </script>`
+          )
 
         if (options.onRendered?.length) {
           for (const ssrFunction of options.onRendered) {
@@ -196,6 +207,12 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
       let html = template
         .replace(`<!--preload-links-->`, preloadLinks)
         .replace(`<!--app-html-->`, appHtml)
+        .replace(
+          '<!--initial-state-->',
+          `<script>
+          __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
+          </script>`
+        )
 
       if (options.onRendered?.length) {
         for (const ssrFunction of options.onRendered) {

package/src/node/helpers/logger.ts

@@ -6,6 +6,8 @@ import os from 'os'
 import type { Hostname } from '../helpers/utils.js'
 import { resolveHostname } from '../helpers/utils.js'
 
+export const exitLogs: string[] = []
+
 export function printHttpServerUrls(
   server: Server,
   config: ResolvedConfig

package/src/node/index.ts

@@ -205,6 +205,7 @@ export const baseConfig = async ({
       vitrifyConfig = await vitrifyConfig({ mode, command })
   } catch (e) {
     console.log('No vitrify.config.(ts|js) file found, using defaults')
+    if (process.env.DEBUG) console.error(e)
     vitrifyConfig = {}
   }
 
@@ -409,6 +410,7 @@ export const baseConfig = async ({
       }
     })
 
+    // @ts-ignore
     if (debug) plugins.push(visualizer())
   }
 
@@ -539,6 +541,7 @@ export const baseConfig = async ({
       noExternal
     },
     define: {
+      __HOST__: 'localhost',
       __BASE_URL__: `'${base}'`
     }
   } as VitrifyConfig

package/src/node/plugins/quasar.ts

@@ -9,9 +9,9 @@ import type {
 import { QuasarResolver } from 'unplugin-vue-components/resolvers'
 import type { VitrifyPlugin } from './index.js'
 export interface QuasarConf {
-  ctx: Record<string, any>
-  css: string[]
-  boot: string[]
+  ctx?: Record<string, any>
+  css?: string[]
+  boot?: string[]
   framework: {
     components?: string[]
     directives?: string[]
@@ -19,8 +19,8 @@ export interface QuasarConf {
     lang?: string
     iconSet?: string
   }
-  animations: string[]
-  extras: string[]
+  // animations: string[]
+  extras?: string[]
 }
 
 export const injectSsrContext = (
@@ -85,7 +85,6 @@ export const QuasarPlugin: VitrifyPlugin = async ({
       name: 'vite-plugin-quasar-transform',
       enforce: 'pre',
       transform: (code, id, options) => {
-        const { ssr } = options || {}
         code = code
           .replaceAll('__QUASAR_SSR__', ssr ? 'true' : 'false')
           .replaceAll(

package/src/vite/vue/csr/app.ts

@@ -2,7 +2,7 @@ import { createApp } from '../../../node/frameworks/vue/server.js'
 import { getAppDir } from '../../../node/app-urls.js'
 // import { setup } from 'virtual:fastify-setup'
 import { onSetup } from 'virtual:vitrify-hooks'
-import { fastifyCsrPlugin } from './fastify-csr-plugin.js'
+import { fastifyCsrPlugin } from './fastify-csr-plugin'
 import type { ViteDevServer } from 'vite'
 
 // const appDir = getPkgJsonDir(import.meta.url)

package/src/vite/vue/csr/fastify-csr-plugin.ts

@@ -1,3 +1,3 @@
-import { fastifyCsrPlugin } from '../../../node/frameworks/vue/fastify-csr-plugin.js'
+import { fastifyCsrPlugin } from '../../../node/frameworks/vue/fastify-csr-plugin'
 
 export { fastifyCsrPlugin }

package/src/vite/vue/csr/server.ts

@@ -1,4 +1,4 @@
-import { setupApp } from './app.js'
+import { setupApp } from './app'
 
 const app = await setupApp()
 

package/src/vite/vue/main.ts

@@ -7,7 +7,8 @@ import {
   createApp as createVueApp,
   h,
   onMounted as onMountedVue,
-  getCurrentInstance
+  getCurrentInstance,
+  ref
 } from 'vue'
 import { onBoot, onMounted } from 'virtual:vitrify-hooks'
 import routes from 'src/router/routes'
@@ -19,6 +20,10 @@ interface ssrContext {
   [key: string]: unknown
 }
 
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
 export async function createApp(
   ssr?: 'client' | 'server',
   ssrContext?: ssrContext
@@ -55,17 +60,31 @@ export async function createApp(
     next()
   })
 
-  let provide: Record<string, unknown> = {}
+  let initialState: Record<string, any>
+  let provide: Record<string, any> = {}
   if (import.meta.env.SSR) {
     if (ssrContext?.provide) {
       provide = ssrContext?.provide
     }
   } else {
     // @ts-ignore
-    provide = window.__INITIAL_STATE__?.provide
+    if (window.__INITIAL_STATE__) {
+      // @ts-ignore
+      initialState = JSON.parse(window.__INITIAL_STATE__)
+      provide = initialState.provide
+    }
   }
   for (let key in provide) {
-    app.provide(key, provide[key])
+    if (provide[key].value) {
+      const refValue = ref(provide[key].value)
+      app.provide(key, refValue)
+      app.provide(
+        `update${capitalizeFirstLetter(key)}`,
+        (val: any) => (refValue.value = val)
+      )
+    } else {
+      app.provide(key, provide[key])
+    }
   }
 
   for (let fn of onBoot) {

package/src/vite/vue/ssr/entry-client.ts

@@ -1,4 +1,4 @@
-import { createApp } from '../main.js'
+import { createApp } from '../main'
 
 // const { app, router } = createApp()
 createApp('client').then(({ app, router }) => {

package/src/vite/vue/ssr/entry-server.ts

@@ -1,4 +1,4 @@
-import { createApp } from '../main.js'
+import { createApp } from '../main'
 // import { renderToString } from 'vue/server-renderer'
 
 // import { onRendered } from 'virtual:vitrify-hooks'

package/src/vite/vue/ssr/server.ts

@@ -1,4 +1,4 @@
-import { setupApp } from './app.js'
+import { setupApp } from './app'
 
 const app = await setupApp()