vitrify 0.6.13 → 0.6.16

package/dist/bin/dev.js

@@ -76,14 +76,15 @@ ssr, framework = 'vue', host, appDir, publicDir }) {
     });
     let setup;
     let server;
+    let onRendered;
     console.log(`Development mode: ${ssr ? ssr : 'csr'}`);
     if (ssr) {
         const entryUrl = ssr === 'fastify'
             ? new URL('src/vite/fastify/entry.ts', cliDir).pathname
-            : new URL(`src/vite/${framework}/ssr/entry-server.ts`, cliDir).pathname;
-        ({ setup } = await vite.ssrLoadModule(entryUrl));
+            : new URL(`src/vite/${framework}/ssr/app.ts`, cliDir).pathname;
+        ({ setup, onRendered } = await vite.ssrLoadModule(entryUrl));
         const app = fastify({
-            logger: true,
+            logger: false,
             https: vite.config.server.https
         });
         if (process.env)
@@ -96,7 +97,8 @@ ssr, framework = 'vue', host, appDir, publicDir }) {
         if (ssr === 'ssr') {
             await app.register(fastifySsrPlugin, {
                 appDir,
-                mode: 'development'
+                mode: 'development',
+                onRendered
             });
         }
         await app.listen({

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

@@ -56,7 +56,6 @@ const fastifySsrPlugin = async (fastify, options, done) => {
         //   configFile: false,
         //   ...config
         // })
-        console.log('Dev mode');
         if (!('use' in fastify)) {
             const middie = (await import('@fastify/middie')).default;
             await fastify.register(middie);
@@ -65,9 +64,11 @@ const fastifySsrPlugin = async (fastify, options, done) => {
         fastify.get(`${options.baseUrl}*`, async (req, res) => {
             try {
                 const url = req.raw.url?.replace(options.baseUrl, '/');
+                const provide = options.provide ? await options.provide(req, res) : {};
                 const ssrContext = {
                     req,
-                    res
+                    res,
+                    provide
                 };
                 let template = readFileSync(new URL('index.html', frameworkDir)).toString();
                 template = await vite.transformIndexHtml(url, template);
@@ -90,11 +91,16 @@ const fastifySsrPlugin = async (fastify, options, done) => {
                     mods: matchedModules
                 });
                 const [appHtml, preloadLinks] = await render(url, manifest, ssrContext);
-                const html = template
+                let html = template
                     .replace(`<!--preload-links-->`, preloadLinks)
                     .replace(`<!--app-html-->`, appHtml)
                     .replace('<!--product-name-->', options.productName || 'Product name')
                     .replace('<!--dev-ssr-css-->', css);
+                if (options.onRendered?.length) {
+                    for (const ssrFunction of options.onRendered) {
+                        html = ssrFunction(html, ssrContext);
+                    }
+                }
                 res.code(200);
                 res.type('text/html');
                 res.send(html);
@@ -131,9 +137,14 @@ const fastifySsrPlugin = async (fastify, options, done) => {
             if (!ssrContext.initialState)
                 ssrContext.initialState = {};
             ssrContext.initialState.provide = provide;
-            const html = template
+            let html = template
                 .replace(`<!--preload-links-->`, preloadLinks)
                 .replace(`<!--app-html-->`, appHtml);
+            if (options.onRendered?.length) {
+                for (const ssrFunction of options.onRendered) {
+                    html = ssrFunction(html, ssrContext);
+                }
+            }
             res.code(200);
             res.type('text/html');
             res.send(html);

package/dist/frameworks/vue/server.js

@@ -1,5 +1,5 @@
 import fastify from 'fastify';
-export const createApp = ({ onSetup, appDir, baseUrl, fastifyPlugin, vitrifyDir, mode }) => {
+export const createApp = ({ onSetup, appDir, baseUrl, fastifyPlugin, onRendered, vitrifyDir, mode }) => {
     const app = fastify({
         logger: true
     });
@@ -7,6 +7,7 @@ export const createApp = ({ onSetup, appDir, baseUrl, fastifyPlugin, vitrifyDir,
         baseUrl,
         appDir,
         vitrifyDir,
+        onRendered,
         mode
     });
     // if (onSetup?.length) {

package/dist/index.js

@@ -32,23 +32,23 @@ const manualChunkNames = [
     'server'
 ];
 const moduleChunks = {
-    vue: ['vue', 'vue-router'],
+    vue: ['vue', '@vue', 'vue-router'],
     quasar: ['quasar', '@quasar']
 };
 const manualChunks = (id) => {
     const matchedModule = Object.entries(moduleChunks).find(([chunkName, moduleNames]) => moduleNames.some((moduleName) => id.includes(moduleName + '/')));
-    if (id.includes('vitrify/src/vite/')) {
+    if (id.includes('vitrify/src/')) {
         const name = id.split('/').at(-1)?.split('.').at(0);
         if (name && manualChunkNames.includes(name))
             return name;
     }
-    else if (matchedModule) {
-        return matchedModule[0];
-    }
     else if (VIRTUAL_MODULES.some((virtualModule) => id.includes(virtualModule))) {
         return VIRTUAL_MODULES.find((name) => id.includes(name));
     }
     else if (id.includes('node_modules')) {
+        if (matchedModule) {
+            return matchedModule[0];
+        }
         return 'vendor';
     }
 };
@@ -378,22 +378,22 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
         { find: 'cwd', replacement: cwd.pathname },
         { find: 'boot', replacement: new URL('boot/', srcDir).pathname },
         { find: 'assets', replacement: new URL('assets/', srcDir).pathname },
-        ...Object.entries(packageUrls).map(([key, value]) => ({
-            find: key,
-            replacement: value.pathname
-        }))
-        // {
-        //   find: new RegExp('^vue$'),
-        //   replacement: 'vue/dist/vue.runtime.esm-bundler.js'
-        // },
+        // ...Object.entries(packageUrls).map(([key, value]) => ({
+        //   find: key,
+        //   replacement: value.pathname
+        // }))
+        {
+            find: new RegExp('^vue$'),
+            replacement: new URL('./dist/vue.runtime.esm-bundler.js', packageUrls['vue']).pathname
+        },
         // {
         //   find: new RegExp('^vue/server-renderer$'),
         //   replacement: 'vue/server-renderer/index.mjs'
         // },
-        // {
-        //   find: new RegExp('^vue-router$'),
-        //   replacement: 'vue-router/dist/vue-router.esm-bundler.js'
-        // }
+        {
+            find: new RegExp('^vue-router$'),
+            replacement: new URL('./dist/vue-router.esm-bundler.js', packageUrls['vue-router']).pathname
+        }
         // { find: 'vue', replacement: packageUrls['vue'].pathname },
         // { find: 'vue-router', replacement: packageUrls['vue-router'].pathname },
         // { find: 'vitrify', replacement: cliDir.pathname }

package/dist/plugins/quasar.js

@@ -181,8 +181,8 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
                             //   ).pathname
                             // },
                             {
-                                find: 'quasar/src',
-                                replacement: new URL('./src', config.vitrify.urls.packages.quasar).pathname
+                                find: 'quasar/src/',
+                                replacement: new URL('./src/', config.vitrify.urls.packages.quasar).pathname
                             }
                             // {
                             //   find: 'quasar',
@@ -195,7 +195,7 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
                             //   find: new RegExp('^quasar$'),
                             //   replacement: new URL('src/index.all.js', urls?.packages?.quasar)
                             //     .pathname
-                            // },
+                            // }
                             // {
                             //   find: `@quasar/extras`,
                             //   replacement: new URL('.', urls?.packages?.['@quasar/extras'])
@@ -263,6 +263,7 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
           export * from 'quasar/src/composables.js';
           export * from 'quasar/src/directives.js';
           export * from 'quasar/src/utils.js';
+          export * from 'quasar/src/composables.js';
           export { default as Quasar } from 'quasar/src/install-quasar.js'`;
                 }
                 return null;

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

@@ -42,7 +42,7 @@ export declare function createServer({ port, logLevel, ssr, framework, host, app
         server: import("vite").ResolvedServerOptions;
         build: Required<import("vite").BuildOptions>;
         preview: import("vite").ResolvedPreviewOptions;
-        ssr: import("vite").ResolvedSSROptions;
+        ssr: import("vite").ResolvedSSROptions | undefined;
         assetsInclude: (file: string) => boolean;
         logger: import("vite").Logger;
         createResolver: (options?: Partial<import("vite").InternalResolveOptions> | undefined) => import("vite").ResolveFn;

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

@@ -1,10 +1,12 @@
 import type { FastifyPluginCallback, FastifyRequest, FastifyReply } from 'fastify';
 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>>;
     vitrifyDir?: URL;
     vite?: ViteDevServer;
+    onRendered?: OnRenderedHook[];
     appDir?: URL;
     publicDir?: URL;
     productName?: string;

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

@@ -1,13 +1,14 @@
 /// <reference types="node" />
 import type { FastifyInstance } from 'fastify';
-import type { OnSetupFile } from '../../vitrify-config.js';
+import type { OnRenderedHook, OnSetupFile } from '../../vitrify-config.js';
 import type { FastifyCsrPlugin } from './fastify-csr-plugin.js';
 import type { FastifySsrPlugin } from './fastify-ssr-plugin.js';
-export declare const createApp: ({ onSetup, appDir, baseUrl, fastifyPlugin, vitrifyDir, mode }: {
+export declare const createApp: ({ onSetup, appDir, baseUrl, fastifyPlugin, onRendered, vitrifyDir, mode }: {
     onSetup: OnSetupFile[];
     appDir: URL;
     baseUrl?: string | undefined;
     fastifyPlugin: FastifySsrPlugin | FastifyCsrPlugin;
+    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>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitrify",
-  "version": "0.6.13",
+  "version": "0.6.16",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "Pre-configured Vite CLI for your framework",
@@ -76,7 +76,7 @@
     "sass": "1.53.0",
     "ts-node": "^10.8.2",
     "unplugin-vue-components": "^0.21.0",
-    "vite": "^3.0.0-beta.0",
+    "vite": "3.0.0-beta.6",
     "vitest": "^0.17.0"
   },
   "devDependencies": {

package/src/node/bin/dev.ts

@@ -7,6 +7,7 @@ import type { FastifyInstance } from 'fastify/types/instance'
 import fastify from 'fastify'
 import { fastifySsrPlugin } from '../frameworks/vue/fastify-ssr-plugin.js'
 import type { ServerOptions } from 'https'
+import type { OnRenderedHook } from '../vitrify-config.js'
 
 export async function createVitrifyDevServer({
   port = 3000,
@@ -128,18 +129,18 @@ export async function createServer({
 
   let setup
   let server: Server
+  let onRendered: OnRenderedHook[]
 
   console.log(`Development mode: ${ssr ? ssr : 'csr'}`)
   if (ssr) {
     const entryUrl =
       ssr === 'fastify'
         ? new URL('src/vite/fastify/entry.ts', cliDir).pathname
-        : new URL(`src/vite/${framework}/ssr/entry-server.ts`, cliDir).pathname
-
-    ;({ setup } = await vite.ssrLoadModule(entryUrl))
+        : new URL(`src/vite/${framework}/ssr/app.ts`, cliDir).pathname
 
+    ;({ setup, onRendered } = await vite.ssrLoadModule(entryUrl))
     const app = fastify({
-      logger: true,
+      logger: false,
       https: vite.config.server.https as ServerOptions
     })
     if (process.env) process.env.MODE = 'development'
@@ -151,7 +152,8 @@ export async function createServer({
     if (ssr === 'ssr') {
       await app.register(fastifySsrPlugin, {
         appDir,
-        mode: 'development'
+        mode: 'development',
+        onRendered
       })
     }
     await app.listen({

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

@@ -7,6 +7,7 @@ import fastifyStatic from '@fastify/static'
 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
@@ -17,6 +18,7 @@ export interface FastifySsrOptions {
   vitrifyDir?: URL
   vite?: ViteDevServer
   // frameworkDir?: URL
+  onRendered?: OnRenderedHook[]
   appDir?: URL
   publicDir?: URL
   productName?: string
@@ -88,7 +90,6 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
     //   ...config
     // })
 
-    console.log('Dev mode')
     if (!('use' in fastify)) {
       const middie = (await import('@fastify/middie')).default
       await fastify.register(middie)
@@ -98,9 +99,12 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
     fastify.get(`${options.baseUrl}*`, async (req, res) => {
       try {
         const url = req.raw.url?.replace(options.baseUrl!, '/')
+        const provide = options.provide ? await options.provide(req, res) : {}
+
         const ssrContext = {
           req,
-          res
+          res,
+          provide
         }
 
         let template = readFileSync(
@@ -129,12 +133,18 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
         })
 
         const [appHtml, preloadLinks] = await render(url, manifest, ssrContext)
-        const html = template
+        let html = template
           .replace(`<!--preload-links-->`, preloadLinks)
           .replace(`<!--app-html-->`, appHtml)
           .replace('<!--product-name-->', options.productName || 'Product name')
           .replace('<!--dev-ssr-css-->', css)
 
+        if (options.onRendered?.length) {
+          for (const ssrFunction of options.onRendered) {
+            html = ssrFunction(html, ssrContext)
+          }
+        }
+
         res.code(200)
         res.type('text/html')
         res.send(html)
@@ -183,10 +193,16 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
       if (!ssrContext.initialState) ssrContext.initialState = {}
       ssrContext.initialState.provide = provide
 
-      const html = template
+      let html = template
         .replace(`<!--preload-links-->`, preloadLinks)
         .replace(`<!--app-html-->`, appHtml)
 
+      if (options.onRendered?.length) {
+        for (const ssrFunction of options.onRendered) {
+          html = ssrFunction(html, ssrContext)
+        }
+      }
+
       res.code(200)
       res.type('text/html')
       res.send(html)

package/src/node/frameworks/vue/server.ts

@@ -2,7 +2,7 @@ import type { FastifyInstance } from 'fastify'
 import fastify from 'fastify'
 import type { ViteDevServer } from 'vite'
 import { getCliDir, getCliViteDir } from '../../app-urls.js'
-import type { OnSetupFile } from '../../vitrify-config.js'
+import type { OnRenderedHook, OnSetupFile } from '../../vitrify-config.js'
 import type { FastifyCsrPlugin } from './fastify-csr-plugin.js'
 import type { FastifySsrPlugin } from './fastify-ssr-plugin.js'
 
@@ -11,6 +11,7 @@ export const createApp = ({
   appDir,
   baseUrl,
   fastifyPlugin,
+  onRendered,
   vitrifyDir,
   mode
 }: {
@@ -18,6 +19,7 @@ export const createApp = ({
   appDir: URL
   baseUrl?: string
   fastifyPlugin: FastifySsrPlugin | FastifyCsrPlugin
+  onRendered: OnRenderedHook[]
   vitrifyDir?: URL
   mode: string
 }) => {
@@ -29,6 +31,7 @@ export const createApp = ({
     baseUrl,
     appDir,
     vitrifyDir,
+    onRendered,
     mode
   })
 

package/src/node/index.ts

@@ -50,7 +50,7 @@ const manualChunkNames = [
 ]
 
 const moduleChunks = {
-  vue: ['vue', 'vue-router'],
+  vue: ['vue', '@vue', 'vue-router'],
   quasar: ['quasar', '@quasar']
 }
 const manualChunks: ManualChunksOption = (id: string) => {
@@ -58,16 +58,17 @@ const manualChunks: ManualChunksOption = (id: string) => {
     ([chunkName, moduleNames]) =>
       moduleNames.some((moduleName) => id.includes(moduleName + '/'))
   )
-  if (id.includes('vitrify/src/vite/')) {
+  if (id.includes('vitrify/src/')) {
     const name = id.split('/').at(-1)?.split('.').at(0)
     if (name && manualChunkNames.includes(name)) return name
-  } else if (matchedModule) {
-    return matchedModule[0]
   } else if (
     VIRTUAL_MODULES.some((virtualModule) => id.includes(virtualModule))
   ) {
     return VIRTUAL_MODULES.find((name) => id.includes(name))
   } else if (id.includes('node_modules')) {
+    if (matchedModule) {
+      return matchedModule[0]
+    }
     return 'vendor'
   }
 }
@@ -459,22 +460,28 @@ export const baseConfig = async ({
     { find: 'cwd', replacement: cwd.pathname },
     { find: 'boot', replacement: new URL('boot/', srcDir).pathname },
     { find: 'assets', replacement: new URL('assets/', srcDir).pathname },
-    ...Object.entries(packageUrls).map(([key, value]) => ({
-      find: key,
-      replacement: value.pathname
-    }))
-    // {
-    //   find: new RegExp('^vue$'),
-    //   replacement: 'vue/dist/vue.runtime.esm-bundler.js'
-    // },
+    // ...Object.entries(packageUrls).map(([key, value]) => ({
+    //   find: key,
+    //   replacement: value.pathname
+    // }))
+    {
+      find: new RegExp('^vue$'),
+      replacement: new URL(
+        './dist/vue.runtime.esm-bundler.js',
+        packageUrls['vue']
+      ).pathname
+    },
     // {
     //   find: new RegExp('^vue/server-renderer$'),
     //   replacement: 'vue/server-renderer/index.mjs'
     // },
-    // {
-    //   find: new RegExp('^vue-router$'),
-    //   replacement: 'vue-router/dist/vue-router.esm-bundler.js'
-    // }
+    {
+      find: new RegExp('^vue-router$'),
+      replacement: new URL(
+        './dist/vue-router.esm-bundler.js',
+        packageUrls['vue-router']
+      ).pathname
+    }
     // { find: 'vue', replacement: packageUrls['vue'].pathname },
     // { find: 'vue-router', replacement: packageUrls['vue-router'].pathname },
     // { find: 'vitrify', replacement: cliDir.pathname }

package/src/node/plugins/quasar.ts

@@ -261,9 +261,9 @@ export const QuasarPlugin: VitrifyPlugin = async ({
               //   ).pathname
               // },
               {
-                find: 'quasar/src',
+                find: 'quasar/src/',
                 replacement: new URL(
-                  './src',
+                  './src/',
                   config.vitrify!.urls!.packages!.quasar
                 ).pathname
               }
@@ -278,7 +278,7 @@ export const QuasarPlugin: VitrifyPlugin = async ({
               //   find: new RegExp('^quasar$'),
               //   replacement: new URL('src/index.all.js', urls?.packages?.quasar)
               //     .pathname
-              // },
+              // }
               // {
               //   find: `@quasar/extras`,
               //   replacement: new URL('.', urls?.packages?.['@quasar/extras'])
@@ -344,6 +344,7 @@ export const QuasarPlugin: VitrifyPlugin = async ({
           export * from 'quasar/src/composables.js';
           export * from 'quasar/src/directives.js';
           export * from 'quasar/src/utils.js';
+          export * from 'quasar/src/composables.js';
           export { default as Quasar } from 'quasar/src/install-quasar.js'`
         }
         return null

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

@@ -1,7 +1,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 { onSetup, onRendered } from 'virtual:vitrify-hooks'
 import { fastifySsrPlugin } from './fastify-ssr-plugin.js'
 import type { ViteDevServer } from 'vite'
 
@@ -17,7 +17,10 @@ export const setupApp = async () => {
     appDir,
     baseUrl,
     fastifyPlugin: fastifySsrPlugin,
+    onRendered,
     // vitrifyDir,
     mode: import.meta.env.MODE
   })
 }
+
+export { onRendered }

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

@@ -1,7 +1,7 @@
 import { createApp } from '../main.js'
 // import { renderToString } from 'vue/server-renderer'
 
-import { onRendered } from 'virtual:vitrify-hooks'
+// import { onRendered } from 'virtual:vitrify-hooks'
 
 const initializeApp = async (url, ssrContext) => {
   const onRenderedList = []
@@ -49,12 +49,6 @@ export async function render(url, manifest, ssrContext, renderToString) {
 
   const preloadLinks = renderPreloadLinks(ctx.modules, manifest)
 
-  if (onRendered?.length) {
-    for (const ssrFunction of onRendered) {
-      html = ssrFunction(html, ssrContext)
-    }
-  }
-
   return [html, preloadLinks]
 }