vitrify 0.2.0 → 0.2.1

package/dist/bin/cli.js

@@ -13,8 +13,8 @@ cli
     .option('--productName [productName]', 'Product name')
     .action(async (options) => {
     const { build } = await import('./build.js');
-    let prerender;
     let appDir;
+    let prerender, ssrFunctions;
     if (options.appDir) {
         if (options.appDir.slice(-1) !== '/')
             options.appDir += '/';
@@ -59,14 +59,15 @@ cli
                 ...args,
                 outDir: new URL('ssr/server/', baseOutDir).pathname
             });
-            prerender = (await import(new URL('ssr/server/prerender.js', appDir).pathname)).prerender;
+            ({ prerender, ssrFunctions } = await import(new URL('ssr/server/prerender.mjs', baseOutDir).pathname));
             prerender({
                 outDir: new URL('static/', baseOutDir).pathname,
                 templatePath: new URL('static/index.html', baseOutDir).pathname,
                 manifestPath: new URL('static/ssr-manifest.json', baseOutDir)
                     .pathname,
                 entryServerPath: new URL('ssr/server/entry-server.mjs', baseOutDir)
-                    .pathname
+                    .pathname,
+                ssrFunctions
             });
             break;
         default:

package/dist/{vue → frameworks/vue}/prerender.js

@@ -1,5 +1,5 @@
 import { promises as fs } from 'fs';
-import { routesToPaths } from '../helpers/routes.js';
+import { routesToPaths } from '../../helpers/routes.js';
 export const prerender = async ({ outDir, templatePath, manifestPath, entryServerPath, ssrFunctions }) => {
     const promises = [];
     const template = (await fs.readFile(templatePath)).toString();

package/dist/index.js

@@ -197,10 +197,6 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
         plugins.unshift({
             name: 'html-transform',
             enforce: 'pre',
-            config: (config, env) => {
-                if (config.vitrify?.productName)
-                    productName = config.vitrify?.productName;
-            },
             transform: (code, id) => {
                 if (id.endsWith('App.vue')) {
                     code =
@@ -232,6 +228,21 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
                 }
             }
         });
+        plugins.unshift({
+            name: 'product-name',
+            enforce: 'post',
+            config: (config, env) => {
+                if (config.vitrify?.productName)
+                    productName = config.vitrify?.productName;
+            },
+            transformIndexHtml: {
+                enforce: 'post',
+                transform: (html) => {
+                    html = html.replace('<!--product-name-->', productName);
+                    return html;
+                }
+            }
+        });
     }
     const alias = [
         { find: 'src', replacement: srcDir.pathname },
@@ -285,6 +296,7 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
                 ? {
                     input: [
                         new URL('ssr/entry-server.ts', frameworkDir).pathname,
+                        new URL('ssr/prerender.ts', frameworkDir).pathname,
                         new URL('ssr/server.ts', frameworkDir).pathname
                     ],
                     output: {

package/dist/plugins/quasar.js

@@ -289,7 +289,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 { default as Quasar } from 'quasar/src/vue-plugin.js'`;
+          export { default as Quasar } from 'quasar/src/install-quasar.js'`;
                 }
                 return null;
             }

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

@@ -1,6 +1,6 @@
 import type { FastifyPluginCallback, FastifyRequest, FastifyReply } from 'fastify';
 import type { ViteDevServer } from 'vite';
-import type { SsrFunction } from '../vitrify-config.js';
+import type { SsrFunction } from '../../vitrify-config.js';
 export interface FastifySsrOptions {
     baseUrl?: string;
     provide?: (req: FastifyRequest, res: FastifyReply) => Promise<Record<string, unknown>>;

package/dist/types/{vue → frameworks/vue}/prerender.d.ts

@@ -1,4 +1,4 @@
-import type { SsrFunction } from '../vitrify-config.js';
+import type { SsrFunction } from '../../vitrify-config.js';
 export declare const prerender: ({ outDir, templatePath, manifestPath, entryServerPath, ssrFunctions }: {
     outDir: string;
     templatePath: string;

package/dist/types/{vue → frameworks/vue}/server.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" />
 import type { FastifyInstance } from 'fastify';
-import type { SsrFunction } from '../vitrify-config.js';
+import type { SsrFunction } from '../../vitrify-config.js';
 export declare const createApp: ({ setup, appDir, baseUrl, ssrFunctions }: {
     setup: (fastify: FastifyInstance) => any;
     appDir: URL;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitrify",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "Pre-configured Vite CLI for your framework",
@@ -103,7 +103,7 @@
   },
   "files": [
     "dist",
-    "src/node/helpers/ssr.ts",
+    "src/node/frameworks",
     "src/vite",
     "!dist/**/*.test.js",
     "!dist/**/test.js"

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

@@ -0,0 +1,137 @@
+import type {
+  FastifyPluginCallback,
+  FastifyRequest,
+  FastifyReply
+} from 'fastify'
+import fastifyStatic from 'fastify-static'
+import { readFileSync } from 'fs'
+// import { injectSsrContext } from '../helpers/ssr.js'
+import type { ViteDevServer } from 'vite'
+import type { SsrFunction } from '../../vitrify-config.js'
+
+export interface FastifySsrOptions {
+  baseUrl?: string
+  provide?: (
+    req: FastifyRequest,
+    res: FastifyReply
+  ) => Promise<Record<string, unknown>>
+  vite?: ViteDevServer
+  cliDir?: URL
+  appDir?: URL
+  productName?: string
+  ssrFunctions?: SsrFunction[]
+}
+
+const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
+  fastify,
+  options,
+  done
+) => {
+  if (import.meta.env.MODE === 'development') {
+    if (!options.vite) throw new Error('Option vite cannot be undefined')
+    const middie = (await import('middie')).default
+    await fastify.register(middie)
+    fastify.use(options.vite.middlewares)
+
+    fastify.get('*', async (req, res) => {
+      try {
+        // const url = req.originalUrl
+        const url = req.raw.url
+        const ssrContext = {
+          req,
+          res
+        }
+        // always read fresh template in dev
+        // template = readFileSync(resolve('index.html'), 'utf-8')
+        const template = readFileSync(
+          new URL('index.html', options.cliDir)
+        ).toString()
+
+        // template = await vite.transformIndexHtml(url, template)
+        const entryUrl = new URL('ssr/entry-server.ts', options.cliDir).pathname
+        const render = (await options.vite!.ssrLoadModule(entryUrl)).render
+        let manifest
+        // TODO: https://github.com/vitejs/vite/issues/2282
+        try {
+          manifest = {}
+        } catch (e) {
+          manifest = {}
+        }
+
+        const [appHtml, preloadLinks] = await render(url, manifest, ssrContext)
+        const html = template
+          .replace(`<!--preload-links-->`, preloadLinks)
+          .replace(`<!--app-html-->`, appHtml)
+          .replace('<!--product-name-->', options.productName || 'Product name')
+
+        res.code(200)
+        res.type('text/html')
+        res.send(html)
+        // res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
+      } catch (e: any) {
+        console.error(e.stack)
+        options.vite && options.vite.ssrFixStacktrace(e)
+        res.code(500)
+        res.send(e.stack)
+      }
+    })
+  } else {
+    options.baseUrl = options.baseUrl || '/'
+    fastify.register(fastifyStatic, {
+      root: new URL('./dist/ssr/client', options.appDir).pathname,
+      wildcard: false,
+      index: false,
+      prefix: options.baseUrl
+    })
+
+    fastify.get(`${options.baseUrl}*`, async (req, res) => {
+      const url = req.raw.url
+      const provide = options.provide ? await options.provide(req, res) : {}
+      const ssrContext: Record<string, any> = {
+        req,
+        res,
+        provide
+      }
+
+      // template = readFileSync(new URL('../client/index.html', import.meta.url).pathname).toString()
+      // manifest = JSON.parse(readFileSync(new URL('../client/ssr-manifest.json', import.meta.url)).toString())
+      // render = (await import(new URL('./entry-server.mjs', import.meta.url).pathname)).render
+      const template = readFileSync(
+        new URL('./dist/ssr/client/index.html', options.appDir).pathname
+      ).toString()
+      const manifest = JSON.parse(
+        readFileSync(
+          new URL('./dist/ssr/client/ssr-manifest.json', options.appDir)
+        ).toString()
+      )
+      const render = (
+        await import(
+          new URL('./dist/ssr/server/entry-server.mjs', options.appDir).pathname
+        )
+      ).render
+
+      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)
+
+      if (options.ssrFunctions?.length) {
+        for (const ssrFunction of options.ssrFunctions) {
+          html = ssrFunction(html, ssrContext)
+        }
+      }
+
+      res.code(200)
+      res.type('text/html')
+      res.send(html)
+    })
+  }
+
+  done()
+}
+
+export { fastifySsrPlugin }

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

@@ -0,0 +1,49 @@
+import { promises as fs } from 'fs'
+import { routesToPaths } from '../../helpers/routes.js'
+import type { SsrFunction } from '../../vitrify-config.js'
+
+export const prerender = async ({
+  outDir,
+  templatePath,
+  manifestPath,
+  entryServerPath,
+  ssrFunctions
+}: {
+  outDir: string
+  templatePath: string
+  manifestPath: string
+  entryServerPath: string
+  ssrFunctions: SsrFunction[]
+}) => {
+  const promises = []
+  const template = (await fs.readFile(templatePath)).toString()
+  const manifest = await fs.readFile(manifestPath)
+  const { render, getRoutes } = await import(entryServerPath)
+  const routes = await getRoutes()
+  const paths = routesToPaths(routes).filter(
+    (i) => !i.includes(':') && !i.includes('*')
+  )
+  for (const url of paths) {
+    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 = template
+      .replace(`<!--preload-links-->`, preloadLinks)
+      .replace(`<!--app-html-->`, appHtml)
+
+    if (ssrFunctions?.length) {
+      for (const ssrFunction of ssrFunctions) {
+        html = ssrFunction(html, ssrContext)
+      }
+    }
+
+    promises.push(fs.writeFile(outDir + filename, html, 'utf-8'))
+  }
+  return Promise.all(promises)
+}

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

@@ -0,0 +1,38 @@
+import type { FastifyInstance } from 'fastify'
+import fastify from 'fastify'
+import type { SsrFunction } from '../../vitrify-config.js'
+// import { setup } from 'virtual:fastify-setup'
+import { fastifySsrPlugin } from './fastify-ssr-plugin.js'
+// import { getPkgJsonDir } from '../app-urls.js'
+
+export const createApp = ({
+  setup,
+  appDir,
+  baseUrl,
+  ssrFunctions
+}: {
+  setup: (fastify: FastifyInstance) => any
+  appDir: URL
+  baseUrl?: string
+  ssrFunctions?: SsrFunction[]
+}) => {
+  const app = fastify({
+    logger: true
+  })
+
+  app.register(fastifySsrPlugin, {
+    baseUrl,
+    appDir,
+    ssrFunctions
+  })
+
+  setup(app)
+
+  return app
+}
+
+// const app = createApp({
+//   setup
+// })
+
+// app.listen(process.env.PORT || 3000, process.env.HOST || '127.0.0.1')

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

@@ -1,4 +1,4 @@
-import { fastifySsrPlugin } from '../../../node/vue/fastify-ssr-plugin.js'
+import { fastifySsrPlugin } from '../../../node/frameworks/vue/fastify-ssr-plugin.js'
 import ssrFunctions from 'virtual:ssr-functions'
 
 export { fastifySsrPlugin, ssrFunctions }

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

@@ -1,4 +1,4 @@
-import { prerender } from '../../../node/vue/prerender.js'
+import { prerender } from '../../../node/frameworks/vue/prerender.js'
 import ssrFunctions from 'virtual:ssr-functions'
 
 export { prerender, ssrFunctions }

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

@@ -1,15 +1,18 @@
-import { createApp } from '../../../node/vue/server.js'
-import { appDir } from '../../../node/app-urls.js'
+import { createApp } from '../../../node/frameworks/vue/server.js'
+import { getAppDir } from '../../../node/app-urls.js'
 import { setup } from 'virtual:fastify-setup'
+import ssrFunctions from 'virtual:ssr-functions'
 
 // const appDir = getPkgJsonDir(import.meta.url)
 const getString = (str?: string) => str
 let baseUrl = getString(__BASE_URL__)
+const appDir = getAppDir()
 
 const app = createApp({
   setup,
   appDir,
-  baseUrl
+  baseUrl,
+  ssrFunctions
 })
 
 app.listen(process.env.PORT || 3000, process.env.HOST || '127.0.0.1')