vitrify 0.19.1 → 0.20.0

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

@@ -32,11 +32,6 @@ const fastifySsrPlugin = async (fastify, options) => {
             try {
                 const url = req.raw.url?.replace(options.baseUrl, '/');
                 const provide = options.provide ? await options.provide(req, res) : {};
-                const ssrContext = {
-                    req,
-                    res,
-                    provide
-                };
                 let template = readFileSync(new URL('index.html', frameworkDir)).toString();
                 template = await vite.transformIndexHtml(url, template);
                 const entryUrl = fileURLToPath(new URL('ssr/entry-server.ts', frameworkDir));
@@ -49,39 +44,16 @@ const fastifySsrPlugin = async (fastify, options) => {
                 catch (e) {
                     manifest = {};
                 }
-                // const cssModules = [entryUrl]
-                // const matchedModules = componentsModules(cssModules, vite!)
-                // const css = collectCss({
-                //   mods: matchedModules
-                // })
-                const [appHtml, preloadLinks] = await render(url, manifest, ssrContext);
-                if (!ssrContext.initialState)
-                    ssrContext.initialState = {};
-                ssrContext.initialState.provide = provide;
-                const initialStateScript = `
-        <script>
-        __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
-        </script>`;
-                const renderHtml = (html) => {
-                    return appendToHead(preloadLinks, appendToBody(initialStateScript, addOrReplaceAppDiv(appHtml, html)));
-                };
-                let html = renderHtml(template);
-                // let html = template
-                //   .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>`
-                //   )
-                // html = appendToHead(preloadLinks, html)
-                if (options.onRendered?.length) {
-                    for (const ssrFunction of options.onRendered) {
-                        html = ssrFunction(html, ssrContext);
-                    }
-                }
+                const html = await renderHtml({
+                    request: req,
+                    reply: res,
+                    url: url ?? '/',
+                    provide,
+                    onRendered: options.onRendered,
+                    template,
+                    manifest,
+                    render
+                });
                 res.code(200);
                 res.type('text/html');
                 res.send(html);
@@ -108,42 +80,55 @@ const fastifySsrPlugin = async (fastify, options) => {
         fastify.get(`${options.baseUrl}*`, async (req, res) => {
             const url = req.raw.url?.replace(options.baseUrl, '/');
             const provide = options.provide ? await options.provide(req, res) : {};
-            const ssrContext = {
-                req,
-                res,
-                provide
-            };
             const template = readFileSync(fileURLToPath(new URL('./dist/ssr/client/index.html', options.appDir))).toString();
             const manifest = JSON.parse(readFileSync(new URL('./dist/ssr/client/.vite/ssr-manifest.json', options.appDir)).toString());
             const render = (await import(fileURLToPath(new URL('./dist/ssr/server/entry-server.mjs', options.appDir)))).render;
-            const [appHtml, preloadLinks] = await render(url, manifest, ssrContext);
-            if (!ssrContext.initialState)
-                ssrContext.initialState = {};
-            ssrContext.initialState.provide = provide;
-            const initialStateScript = `
-      <script>
-      __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
-      </script>`;
-            const renderHtml = (html) => {
-                return appendToHead(preloadLinks, appendToBody(initialStateScript, addOrReplaceAppDiv(appHtml, html)));
-            };
-            let html = renderHtml(template);
-            // let html = template.replace(`<!--app-html-->`, appHtml).replace(
-            //   '<!--initial-state-->',
-            //   `<script>
-            //     __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
-            //     </script>`
-            // )
-            // html = appendToHead(preloadLinks, html)
-            if (options.onRendered?.length) {
-                for (const ssrFunction of options.onRendered) {
-                    html = ssrFunction(html, ssrContext);
-                }
-            }
+            const onRendered = (await import(fileURLToPath(new URL('./dist/ssr/server/virtual_vitrify-hooks.mjs', options.appDir)))).onRendered;
+            const html = await renderHtml({
+                request: req,
+                reply: res,
+                url: url ?? '/',
+                provide,
+                onRendered,
+                template,
+                manifest,
+                render
+            });
             res.code(200);
             res.type('text/html');
             res.send(html);
         });
     }
 };
-export { fastifySsrPlugin };
+const renderTemplate = ({ template, initialStateScript, appHtml, preloadLinks }) => {
+    return appendToHead(preloadLinks, appendToBody(initialStateScript, addOrReplaceAppDiv(appHtml, template)));
+};
+const renderHtml = async (options) => {
+    const ssrContext = {
+        req: options.request,
+        res: options.reply,
+        provide: options.provide
+    };
+    const onRendered = options.onRendered ?? [];
+    const [appHtml, preloadLinks] = await options.render(options.url, options.manifest, ssrContext);
+    if (!ssrContext.initialState)
+        ssrContext.initialState = {};
+    ssrContext.initialState.provide = options.provide;
+    const initialStateScript = `
+  <script>
+  __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
+  </script>`;
+    let html = renderTemplate({
+        template: options.template,
+        appHtml,
+        initialStateScript,
+        preloadLinks
+    });
+    if (onRendered?.length) {
+        for (const ssrFunction of onRendered) {
+            html = ssrFunction(html, ssrContext);
+        }
+    }
+    return html;
+};
+export { fastifySsrPlugin, renderHtml };

package/dist/frameworks/vue/prerender.js

@@ -1,6 +1,6 @@
 import { existsSync, promises as fs, mkdirSync } from 'fs';
 import { routesToPaths } from '../../helpers/routes.js';
-import { appendToHead, addOrReplaceAppDiv } from '../../helpers/utils.js';
+import { renderHtml } from './fastify-ssr-plugin.js';
 export const prerender = async ({ outDir, templatePath, manifestPath, entryServerPath, onRendered }) => {
     const promises = [];
     const template = (await fs.readFile(templatePath)).toString();
@@ -22,18 +22,16 @@ export const prerender = async ({ outDir, templatePath, manifestPath, entryServe
         }
         const filename = (url.endsWith('/') ? 'index' : url.replace(/^\//g, '')) + '.html';
         console.log(`Generating ${filename}`);
-        const ssrContext = {
-            req: { headers: {}, url },
-            res: {}
-        };
-        const [appHtml, preloadLinks] = await render(url, manifest, ssrContext);
-        let html = addOrReplaceAppDiv(appHtml, template);
-        html = appendToHead(preloadLinks, html);
-        if (onRendered?.length) {
-            for (const ssrFunction of onRendered) {
-                html = ssrFunction(html, ssrContext);
-            }
-        }
+        let html = await renderHtml({
+            url,
+            manifest,
+            provide: {},
+            render,
+            request: { headers: {}, url },
+            reply: {},
+            template,
+            onRendered
+        });
         html = await beasties.process(html);
         promises.push(fs.writeFile(outDir + filename, html, 'utf-8'));
     }

package/dist/index.js

@@ -528,6 +528,7 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
             input: [
                 fileURLToPath(new URL('ssr/entry-server.ts', frameworkDir)),
                 fileURLToPath(new URL('ssr/prerender.ts', frameworkDir)),
+                fileURLToPath(new URL('ssr/fastify-ssr-plugin.ts', frameworkDir)),
                 fileURLToPath(new URL('ssr/server.ts', frameworkDir))
             ],
             external,

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

@@ -1,11 +1,12 @@
 import type { FastifyPluginAsync, FastifyRequest, FastifyReply } from 'fastify';
 import type { ViteDevServer } from 'vite';
 import type { OnRenderedHook } from '../../vitrify-config.js';
+type ProvideFn = (req: FastifyRequest, res: FastifyReply) => Promise<Record<string, unknown | {
+    value: unknown;
+}>>;
 export interface FastifySsrOptions {
     baseUrl?: string;
-    provide?: (req: FastifyRequest, res: FastifyReply) => Promise<Record<string, unknown | {
-        value: unknown;
-    }>>;
+    provide?: ProvideFn;
     vitrifyDir?: URL;
     vite?: ViteDevServer;
     onRendered?: OnRenderedHook[];
@@ -15,5 +16,18 @@ export interface FastifySsrOptions {
     host?: string;
 }
 declare const fastifySsrPlugin: FastifyPluginAsync<FastifySsrOptions>;
-export { fastifySsrPlugin };
+declare const renderHtml: (options: {
+    url: string;
+    request: FastifyRequest | {
+        headers: Record<string, unknown>;
+        url: string;
+    };
+    reply: FastifyReply | Record<string, unknown>;
+    provide: Record<string, unknown>;
+    onRendered?: OnRenderedHook[];
+    template: string;
+    manifest: Record<string, unknown>;
+    render: any;
+}) => Promise<string>;
+export { fastifySsrPlugin, renderHtml };
 export type FastifySsrPlugin = typeof fastifySsrPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitrify",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "Vite as your Full Stack development tool",
@@ -91,7 +91,7 @@
     "@types/ws": "^8.18.1",
     "@unocss/preset-icons": "^66.0.0",
     "@vue/runtime-core": "^3.5.13",
-    "beasties": "^0.3.1",
+    "beasties": "^0.3.2",
     "css": "^3.0.0",
     "css-to-tailwind-translator": "^1.2.8",
     "quasar": "^2.18.1",
@@ -101,9 +101,9 @@
     "vue-router": "^4.5.0"
   },
   "peerDependencies": {
-    "@fastify/static": "^8.1.0",
-    "fastify": "^5.2.1",
-    "quasar": "^2.17.7",
+    "@fastify/static": "^8.1.1",
+    "fastify": "^5.2.2",
+    "quasar": "^2.18.1",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },

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

@@ -9,12 +9,15 @@ import {
 } from '../../helpers/utils.js'
 import type { ViteDevServer } from 'vite'
 import type { OnRenderedHook } from '../../vitrify-config.js'
+
+type ProvideFn = (
+  req: FastifyRequest,
+  res: FastifyReply
+) => Promise<Record<string, unknown | { value: unknown }>>
+
 export interface FastifySsrOptions {
   baseUrl?: string
-  provide?: (
-    req: FastifyRequest,
-    res: FastifyReply
-  ) => Promise<Record<string, unknown | { value: unknown }>>
+  provide?: ProvideFn
   vitrifyDir?: URL
   vite?: ViteDevServer
   // frameworkDir?: URL
@@ -66,12 +69,6 @@ const fastifySsrPlugin: FastifyPluginAsync<FastifySsrOptions> = async (
         const url = req.raw.url?.replace(options.baseUrl!, '/')
         const provide = options.provide ? await options.provide(req, res) : {}
 
-        const ssrContext: Record<string, any> = {
-          req,
-          res,
-          provide
-        }
-
         let template = readFileSync(
           new URL('index.html', frameworkDir)
         ).toString()
@@ -90,47 +87,16 @@ const fastifySsrPlugin: FastifyPluginAsync<FastifySsrOptions> = async (
           manifest = {}
         }
 
-        // const cssModules = [entryUrl]
-        // const matchedModules = componentsModules(cssModules, vite!)
-        // const css = collectCss({
-        //   mods: matchedModules
-        // })
-
-        const [appHtml, preloadLinks] = await render(url, manifest, ssrContext)
-
-        if (!ssrContext.initialState) ssrContext.initialState = {}
-        ssrContext.initialState.provide = provide
-
-        const initialStateScript = `
-        <script>
-        __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
-        </script>`
-        const renderHtml = (html: string) => {
-          return appendToHead(
-            preloadLinks,
-            appendToBody(initialStateScript, addOrReplaceAppDiv(appHtml, html))
-          )
-        }
-
-        let html = renderHtml(template)
-        // let html = template
-        //   .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>`
-        //   )
-
-        // html = appendToHead(preloadLinks, html)
-
-        if (options.onRendered?.length) {
-          for (const ssrFunction of options.onRendered) {
-            html = ssrFunction(html, ssrContext)
-          }
-        }
+        const html = await renderHtml({
+          request: req,
+          reply: res,
+          url: url ?? '/',
+          provide,
+          onRendered: options.onRendered,
+          template,
+          manifest,
+          render
+        })
 
         res.code(200)
         res.type('text/html')
@@ -156,11 +122,6 @@ const fastifySsrPlugin: FastifyPluginAsync<FastifySsrOptions> = async (
     fastify.get(`${options.baseUrl}*`, async (req, res) => {
       const url = req.raw.url?.replace(options.baseUrl!, '/')
       const provide = options.provide ? await options.provide(req, res) : {}
-      const ssrContext: Record<string, any> = {
-        req,
-        res,
-        provide
-      }
 
       const template = readFileSync(
         fileURLToPath(new URL('./dist/ssr/client/index.html', options.appDir))
@@ -177,46 +138,99 @@ const fastifySsrPlugin: FastifyPluginAsync<FastifySsrOptions> = async (
           )
         )
       ).render
+      const onRendered = (
+        await import(
+          fileURLToPath(
+            new URL(
+              './dist/ssr/server/virtual_vitrify-hooks.mjs',
+              options.appDir
+            )
+          )
+        )
+      ).onRendered
+
+      const html = await renderHtml({
+        request: req,
+        reply: res,
+        url: url ?? '/',
+        provide,
+        onRendered,
+        template,
+        manifest,
+        render
+      })
 
-      const [appHtml, preloadLinks] = await render(url, manifest, ssrContext)
+      res.code(200)
+      res.type('text/html')
+      res.send(html)
+    })
+  }
+}
 
-      if (!ssrContext.initialState) ssrContext.initialState = {}
-      ssrContext.initialState.provide = provide
+const renderTemplate = ({
+  template,
+  initialStateScript,
+  appHtml,
+  preloadLinks
+}: {
+  template: string
+  initialStateScript: string
+  appHtml: string
+  preloadLinks: string
+}) => {
+  return appendToHead(
+    preloadLinks,
+    appendToBody(initialStateScript, addOrReplaceAppDiv(appHtml, template))
+  )
+}
 
-      const initialStateScript = `
-      <script>
-      __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
-      </script>`
-      const renderHtml = (html: string) => {
-        return appendToHead(
-          preloadLinks,
-          appendToBody(initialStateScript, addOrReplaceAppDiv(appHtml, html))
-        )
-      }
+const renderHtml = async (options: {
+  url: string
+  request: FastifyRequest | { headers: Record<string, unknown>; url: string }
+  reply: FastifyReply | Record<string, unknown>
+  provide: Record<string, unknown>
+  onRendered?: OnRenderedHook[]
+  template: string
+  manifest: Record<string, unknown>
+  render: any
+}) => {
+  const ssrContext: Record<string, any> = {
+    req: options.request,
+    res: options.reply,
+    provide: options.provide
+  }
 
-      let html = renderHtml(template)
+  const onRendered = options.onRendered ?? []
 
-      // let html = template.replace(`<!--app-html-->`, appHtml).replace(
-      //   '<!--initial-state-->',
-      //   `<script>
-      //     __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
-      //     </script>`
-      // )
+  const [appHtml, preloadLinks] = await options.render(
+    options.url,
+    options.manifest,
+    ssrContext
+  )
 
-      // html = appendToHead(preloadLinks, html)
+  if (!ssrContext.initialState) ssrContext.initialState = {}
+  ssrContext.initialState.provide = options.provide
 
-      if (options.onRendered?.length) {
-        for (const ssrFunction of options.onRendered) {
-          html = ssrFunction(html, ssrContext)
-        }
-      }
+  const initialStateScript = `
+  <script>
+  __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
+  </script>`
 
-      res.code(200)
-      res.type('text/html')
-      res.send(html)
-    })
+  let html = renderTemplate({
+    template: options.template,
+    appHtml,
+    initialStateScript,
+    preloadLinks
+  })
+
+  if (onRendered?.length) {
+    for (const ssrFunction of onRendered) {
+      html = ssrFunction(html, ssrContext)
+    }
   }
+
+  return html
 }
 
-export { fastifySsrPlugin }
+export { fastifySsrPlugin, renderHtml }
 export type FastifySsrPlugin = typeof fastifySsrPlugin

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

@@ -1,7 +1,7 @@
 import { existsSync, promises as fs, mkdirSync } from 'fs'
 import type { OnRenderedHook } from 'src/node/vitrify-config.js'
 import { routesToPaths } from '../../helpers/routes.js'
-import { appendToHead, addOrReplaceAppDiv } from '../../helpers/utils.js'
+import { renderHtml } from './fastify-ssr-plugin.js'
 
 export const prerender = async ({
   outDir,
@@ -44,21 +44,17 @@ export const prerender = async ({
     const filename =
       (url.endsWith('/') ? 'index' : url.replace(/^\//g, '')) + '.html'
     console.log(`Generating ${filename}`)
-    const ssrContext = {
-      req: { headers: {}, url },
-      res: {}
-    }
-    const [appHtml, preloadLinks] = await render(url, manifest, ssrContext)
-
-    let html = addOrReplaceAppDiv(appHtml, template)
-    html = appendToHead(preloadLinks, html)
-
-    if (onRendered?.length) {
-      for (const ssrFunction of onRendered) {
-        html = ssrFunction(html, ssrContext)
-      }
-    }
 
+    let html = await renderHtml({
+      url,
+      manifest,
+      provide: {},
+      render,
+      request: { headers: {}, url },
+      reply: {},
+      template,
+      onRendered
+    })
     html = await beasties.process(html)
 
     promises.push(fs.writeFile(outDir + filename, html, 'utf-8'))

package/src/node/index.ts

@@ -652,6 +652,7 @@ export const baseConfig = async ({
       input: [
         fileURLToPath(new URL('ssr/entry-server.ts', frameworkDir)),
         fileURLToPath(new URL('ssr/prerender.ts', frameworkDir)),
+        fileURLToPath(new URL('ssr/fastify-ssr-plugin.ts', frameworkDir)),
         fileURLToPath(new URL('ssr/server.ts', frameworkDir))
       ],
       external,

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

@@ -3,7 +3,6 @@ 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'
-import type { ViteDevServer } from 'vite'
 
 // const appDir = getPkgJsonDir(import.meta.url)
 const getString = (str?: string) => str

package/src/vite/vue/main.ts

@@ -7,12 +7,11 @@ import 'virtual:uno.css'
 
 import RootComponent from './RootComponent.vue'
 interface ssrContext {
-  ssr: boolean
   provide?: Record<string, unknown>
   [key: string]: unknown
 }
 
-function capitalizeFirstLetter(string) {
+function capitalizeFirstLetter(string: string) {
   return string.charAt(0).toUpperCase() + string.slice(1)
 }
 

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

@@ -1,11 +1,16 @@
-import { createApp } from '../main'
+import { type FastifyReply, type FastifyRequest } from 'fastify'
+import { createApp } from '../main.js'
+import { renderToString as renderToStringVue } from 'vue/server-renderer'
 
-const initializeApp = async (url, ssrContext) => {
-  const onRenderedList = []
+const initializeApp = async (
+  url: string,
+  ssrContext: Record<string, unknown>
+) => {
+  const onRenderedList: (() => unknown)[] = []
   Object.assign(ssrContext, {
     _modules: new Set(),
     _meta: {},
-    onRendered: (fn) => {
+    onRendered: (fn: () => unknown) => {
       onRenderedList.push(fn)
     }
   })
@@ -27,28 +32,43 @@ const initializeApp = async (url, ssrContext) => {
 export const getRoutes = async () =>
   (
     await initializeApp('/', {
-      ssr: false,
       req: { headers: {}, url: '/' },
       res: {}
     })
   ).routes
 
-export async function render(url, manifest, ssrContext, renderToString) {
+export async function render(
+  url: string,
+  manifest: Record<string, unknown>,
+  ssrContext: {
+    request: FastifyRequest | { headers: Record<string, unknown>; url: string }
+    reply: FastifyReply | Record<string, unknown>
+    provide: Record<string, unknown>
+  },
+  renderToString: typeof renderToStringVue
+) {
   if (!renderToString)
     renderToString = (await import('vue/server-renderer')).renderToString
   const { app, router } = await initializeApp(url, ssrContext)
 
-  const ctx = {
+  const ctx: {
+    modules?: Map<unknown, unknown>
+    transports?: Record<string, unknown>
+    __qMetaList: unknown[]
+  } = {
     __qMetaList: []
   }
   const html = await renderToString(app, ctx)
 
-  const preloadLinks = renderPreloadLinks(ctx.modules, manifest)
+  const preloadLinks = renderPreloadLinks(ctx.modules!, manifest)
 
   return [html, preloadLinks]
 }
 
-function renderPreloadLinks(modules, manifest) {
+function renderPreloadLinks(
+  modules: Map<unknown, unknown>,
+  manifest: Record<string, unknown>
+) {
   let links = ''
   const seen = new Set()
   modules.forEach((id) => {

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

@@ -1,3 +1,6 @@
-import { fastifySsrPlugin } from '../../../node/frameworks/vue/fastify-ssr-plugin.js'
+import {
+  fastifySsrPlugin,
+  renderHtml
+} from '../../../node/frameworks/vue/fastify-ssr-plugin.js'
 
-export { fastifySsrPlugin }
+export { fastifySsrPlugin, renderHtml }