vitrify 0.2.5 → 0.3.0

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

@@ -1,9 +1,9 @@
 /// <reference types="node" />
 import type { FastifyInstance } from 'fastify';
-import type { SsrFunction } from '../../vitrify-config.js';
-export declare const createApp: ({ setup, appDir, baseUrl, ssrFunctions }: {
+import type { OnRenderedHook } from '../../vitrify-config.js';
+export declare const createApp: ({ setup, appDir, baseUrl, onRenderedHooks }: {
     setup: (fastify: FastifyInstance) => any;
     appDir: URL;
     baseUrl?: string | undefined;
-    ssrFunctions?: SsrFunction[] | undefined;
+    onRenderedHooks?: OnRenderedHook[] | undefined;
 }) => FastifyInstance<import("http").Server, import("http").IncomingMessage, import("http").ServerResponse, import("fastify").FastifyLoggerInstance> & PromiseLike<FastifyInstance<import("http").Server, import("http").IncomingMessage, import("http").ServerResponse, import("fastify").FastifyLoggerInstance>>;

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

@@ -1,23 +1,4 @@
 /// <reference types="node" />
 import type { Server } from 'net';
 import type { ResolvedConfig } from 'vite';
-export declare const clearConsole: () => void;
-export declare const log: (msg?: string | undefined) => void;
-export declare const warn: (msg?: string | undefined, pill?: string | undefined) => void;
-export declare const fatal: (msg?: string | undefined, pill?: string | undefined) => never;
-/**
- * Extended approach - Compilation status & pills
- */
-export declare const successPill: (msg?: string | undefined) => string;
-export declare const infoPill: (msg?: string | undefined) => string;
-export declare const errorPill: (msg?: string | undefined) => string;
-export declare const warningPill: (msg?: string | undefined) => string;
-export declare const success: (msg?: string | undefined, title?: string) => void;
-export declare const getSuccess: (msg?: string | undefined, title?: string | undefined) => string;
-export declare const info: (msg?: string | undefined, title?: string) => void;
-export declare const getInfo: (msg?: string | undefined, title?: string | undefined) => string;
-export declare const error: (msg?: string | undefined, title?: string) => void;
-export declare const getError: (msg?: string | undefined, title?: string) => string;
-export declare const warning: (msg?: string | undefined, title?: string) => void;
-export declare const getWarning: (msg?: string | undefined, title?: string) => string;
 export declare function printHttpServerUrls(server: Server, config: ResolvedConfig): void;

package/dist/types/vitrify-config.d.ts

@@ -7,32 +7,43 @@ export declare type BootFunction = ({ app, ssrContext, staticImports }: {
     ssrContext: Record<string, unknown>;
     staticImports: Record<string, any>;
 }) => Promise<void> | void;
+export declare type OnBootHook = ({ app, ssrContext, staticImports }: {
+    app: any;
+    ssrContext: Record<string, unknown>;
+    staticImports: Record<string, any>;
+}) => Promise<void> | void;
 export declare type OnMountedHook = (instance: ComponentInternalInstance) => Promise<void> | void;
 export declare type StaticImports = Record<string, string[]>;
 export declare type SsrFunction = (html: string, ssrContext: Record<string, any>) => string;
+export declare type OnRenderedHook = (html: string, ssrContext: Record<string, any>) => string;
+export declare type OnSetupHook = (fastify: FastifyInstance) => any;
 export interface VitrifyConfig extends UserConfig {
     vitrify?: {
         /**
          * Global CSS imports
          */
         globalCss?: string[];
-        /**
-         * Functions which run after initializing the app
-         */
-        bootFunctions?: BootFunction[];
-        /**
-         * Functions which run on the server after rendering the app
-         */
-        ssrFunctions?: SsrFunction[];
         /**
          * Static imports in the app: packageName: [imports]
          */
         staticImports?: StaticImports;
         hooks?: {
+            /**
+             * setup() is called directly after instantiating fastify. Use it to register your own plugins, routes etc.
+             */
+            onSetup?: OnSetupHook[];
             /**
              * Functions which run in the onMounted hook of the app
              */
-            onMounted: OnMountedHook[];
+            onMounted?: OnMountedHook[];
+            /**
+             * Functions which run after initializing the app
+             */
+            onBoot?: OnBootHook[];
+            /**
+             * Functions which run after rendering the app (SSR)
+             */
+            onRendered?: OnRenderedHook[];
         };
         /**
          * Global SASS variables
@@ -41,12 +52,6 @@ export interface VitrifyConfig extends UserConfig {
             variables?: Record<string, string>;
             additionalData?: string[];
         };
-        fastify?: {
-            /**
-             * setup() is called directly after instantiating fastify. Use it to register your own plugins, routes etc.
-             */
-            setup: (fastify: FastifyInstance) => any;
-        };
         /**
          * Product name of the application. Will be used for the HTML title tag
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitrify",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "Pre-configured Vite CLI for your framework",

package/src/node/app-urls.ts

@@ -14,7 +14,6 @@ export const getCliDir = () => getPkgJsonDir(new URL('./', import.meta.url))
 export const getCliViteDir = (cliDir: URL) => new URL('src/vite/', cliDir)
 export const getSrcDir = (appDir: URL) => new URL('src/', appDir)
 export const getCwd = () => new URL(`file://${process.cwd()}/`)
-// export const quasarDir = getPkgJsonDir(new URL('./', await resolve('quasar', appDir.href)))
 
 export const parsePath = (path: string, basePath: URL) => {
   if (path) {

package/src/node/bin/build.ts

@@ -1,53 +1,6 @@
 #!/usr/bin/node --experimental-specifier-resolution=node
 import { baseConfig } from '../index.js'
-// import { promises as fs } from 'fs'
-// import { routesToPaths } from '../helpers/routes.js'
 import { build as viteBuild } from 'vite'
-// import { SsrFunction } from '../vitrify-config.js'
-
-// export const prerender = async ({
-//   outDir,
-//   templatePath,
-//   manifestPath,
-//   entryServerPath,
-//   injectSsrContext
-// }: {
-//   outDir: string
-//   templatePath: string
-//   manifestPath: string
-//   entryServerPath: string
-//   injectSsrContext: SsrFunction
-// }) => {
-//   let template
-//   let manifest
-//   const promises = []
-//   template = (await fs.readFile(templatePath)).toString()
-//   manifest = await fs.readFile(manifestPath)
-//   let { render, getRoutes } = await import(entryServerPath)
-//   const routes = await getRoutes()
-//   const paths = routesToPaths(routes).filter(
-//     (i) => !i.includes(':') && !i.includes('*')
-//   )
-//   for (let 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)
-
-//     html = injectSsrContext(html, ssrContext)
-
-//     promises.push(fs.writeFile(outDir + filename, html, 'utf-8'))
-//   }
-//   return Promise.all(promises)
-// }
 
 export async function build(opts: {
   ssr?: 'client' | 'server' | 'ssg'

package/src/node/bin/cli.ts

@@ -17,7 +17,7 @@ cli
   .action(async (options) => {
     const { build } = await import('./build.js')
     let appDir: URL
-    let prerender, ssrFunctions
+    let prerender, onRenderedHooks
     if (options.appDir) {
       if (options.appDir.slice(-1) !== '/') options.appDir += '/'
       appDir = new URL(`file://${options.appDir}`)
@@ -68,7 +68,7 @@ cli
           ...args,
           outDir: new URL('ssr/server/', baseOutDir).pathname
         })
-        ;({ prerender, ssrFunctions } = await import(
+        ;({ prerender, onRenderedHooks } = await import(
           new URL('ssr/server/prerender.mjs', baseOutDir).pathname
         ))
         prerender({
@@ -78,7 +78,7 @@ cli
             .pathname,
           entryServerPath: new URL('ssr/server/entry-server.mjs', baseOutDir)
             .pathname,
-          ssrFunctions
+          onRenderedHooks
         })
         break
       default:

package/src/node/bin/dev.ts

@@ -28,7 +28,7 @@ export async function createServer({
   const cliDir = getCliDir()
   if (!appDir) appDir = getAppDir()
   const { fastifySsrPlugin } = await import(
-    `../${framework}/fastify-ssr-plugin.js`
+    `../frameworks/${framework}/fastify-ssr-plugin.js`
   )
 
   /**
@@ -84,51 +84,7 @@ export async function createServer({
       vite,
       productName
     })
-    // await app.register(middie)
-    // app.use(vite.middlewares)
 
-    // app.get('*', async (req, res) => {
-    //   try {
-    //     // const url = req.originalUrl
-    //     const url = req.raw.url
-    //     let template
-    //     let render
-    //     const ssrContext = {
-    //       req,
-    //       res
-    //     }
-    //     // always read fresh template in dev
-    //     // template = readFileSync(resolve('index.html'), 'utf-8')
-    //     template = readFileSync(new URL('index.html', cliDir)).toString()
-
-    //     // template = await vite.transformIndexHtml(url, template)
-    //     const entryUrl = new URL('ssr/entry-server.ts', cliDir).pathname
-    //     render = (await 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-->', productName)
-
-    //     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)
-    //     vite && vite.ssrFixStacktrace(e)
-    //     res.code(500)
-    //     res.send(e.stack)
-    //   }
-    // })
     await app.listen(port || 3000, host)
     server = app.server
   } else {

package/src/node/bin/test.ts

@@ -15,9 +15,6 @@ export async function test(opts: { appDir: URL }) {
 
       globals: true,
       environment: 'happy-dom'
-      // include: [
-      //   `${opts.appDir.pathname}**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}`
-      // ]
     },
     config
   )

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

@@ -5,9 +5,8 @@ import type {
 } 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'
+import type { OnRenderedHook } from '../../vitrify-config.js'
 
 export interface FastifySsrOptions {
   baseUrl?: string
@@ -19,7 +18,7 @@ export interface FastifySsrOptions {
   cliDir?: URL
   appDir?: URL
   productName?: string
-  ssrFunctions?: SsrFunction[]
+  onRenderedHooks?: OnRenderedHook[]
 }
 
 const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
@@ -35,19 +34,15 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
 
     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
@@ -93,9 +88,6 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
         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()
@@ -119,8 +111,8 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
         .replace(`<!--preload-links-->`, preloadLinks)
         .replace(`<!--app-html-->`, appHtml)
 
-      if (options.ssrFunctions?.length) {
-        for (const ssrFunction of options.ssrFunctions) {
+      if (options.onRenderedHooks?.length) {
+        for (const ssrFunction of options.onRenderedHooks) {
           html = ssrFunction(html, ssrContext)
         }
       }

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

@@ -1,19 +1,19 @@
 import { promises as fs } from 'fs'
 import { routesToPaths } from '../../helpers/routes.js'
-import type { SsrFunction } from '../../vitrify-config.js'
+import type { OnRenderedHook } from '../../vitrify-config.js'
 
 export const prerender = async ({
   outDir,
   templatePath,
   manifestPath,
   entryServerPath,
-  ssrFunctions
+  onRenderedHooks
 }: {
   outDir: string
   templatePath: string
   manifestPath: string
   entryServerPath: string
-  ssrFunctions: SsrFunction[]
+  onRenderedHooks: OnRenderedHook[]
 }) => {
   const promises = []
   const template = (await fs.readFile(templatePath)).toString()
@@ -37,8 +37,8 @@ export const prerender = async ({
       .replace(`<!--preload-links-->`, preloadLinks)
       .replace(`<!--app-html-->`, appHtml)
 
-    if (ssrFunctions?.length) {
-      for (const ssrFunction of ssrFunctions) {
+    if (onRenderedHooks?.length) {
+      for (const ssrFunction of onRenderedHooks) {
         html = ssrFunction(html, ssrContext)
       }
     }

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

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

package/src/node/helpers/logger.ts

@@ -1,98 +1,11 @@
 // https://github.com/quasarframework/quasar/blob/dev/app/lib/helpers/logger.js
 import chalk from 'chalk'
-const { bgGreen, green, inverse, bgRed, red, bgYellow, yellow } = chalk
-import readline from 'readline'
 import type { AddressInfo, Server } from 'net'
 import type { ResolvedConfig, Logger } from 'vite'
 import os from 'os'
 import type { Hostname } from '../helpers/utils.js'
 import { resolveHostname } from '../helpers/utils.js'
 
-/**
- * Main approach - App CLI related
- */
-
-const dot = '•'
-const banner = 'App ' + dot
-const greenBanner = green(banner)
-const redBanner = red(banner)
-const yellowBanner = yellow(banner)
-
-export const clearConsole = process.stdout.isTTY
-  ? () => {
-      // Fill screen with blank lines. Then move to 0 (beginning of visible part) and clear it
-      const blank = '\n'.repeat(process.stdout.rows)
-      console.log(blank)
-      readline.cursorTo(process.stdout, 0, 0)
-      readline.clearScreenDown(process.stdout)
-    }
-  : () => {}
-
-export const log = function (msg?: string) {
-  console.log(msg ? ` ${greenBanner} ${msg}` : '')
-}
-
-export const warn = function (msg?: string, pill?: string) {
-  if (msg !== void 0) {
-    const pillBanner = pill !== void 0 ? bgYellow.black('', pill, '') + ' ' : ''
-
-    console.warn(` ${yellowBanner} ⚠️  ${pillBanner}${msg}`)
-  } else {
-    console.warn()
-  }
-}
-
-export const fatal = function (msg?: string, pill?: string) {
-  if (msg !== void 0) {
-    const pillBanner = pill !== void 0 ? errorPill(pill) + ' ' : ''
-
-    console.error(`\n ${redBanner} ⚠️  ${pillBanner}${msg}\n`)
-  } else {
-    console.error()
-  }
-
-  process.exit(1)
-}
-
-/**
- * Extended approach - Compilation status & pills
- */
-
-export const successPill = (msg?: string) => bgGreen.black('', msg, '')
-export const infoPill = (msg?: string) => inverse('', msg, '')
-export const errorPill = (msg?: string) => bgRed.white('', msg, '')
-export const warningPill = (msg?: string) => bgYellow.black('', msg, '')
-
-export const success = function (msg?: string, title = 'SUCCESS') {
-  console.log(` ${greenBanner} ${successPill(title)} ${green(dot + ' ' + msg)}`)
-}
-export const getSuccess = function (msg?: string, title?: string) {
-  return ` ${greenBanner} ${successPill(title)} ${green(dot + ' ' + msg)}`
-}
-
-export const info = function (msg?: string, title = 'INFO') {
-  console.log(` ${greenBanner} ${infoPill(title)} ${green(dot)} ${msg}`)
-}
-export const getInfo = function (msg?: string, title?: string) {
-  return ` ${greenBanner} ${infoPill(title)} ${green(dot)} ${msg}`
-}
-
-export const error = function (msg?: string, title = 'ERROR') {
-  console.log(` ${redBanner} ${errorPill(title)} ${red(dot + ' ' + msg)}`)
-}
-export const getError = function (msg?: string, title = 'ERROR') {
-  return ` ${redBanner} ${errorPill(title)} ${red(dot + ' ' + msg)}`
-}
-
-export const warning = function (msg?: string, title = 'WARNING') {
-  console.log(
-    ` ${yellowBanner} ${warningPill(title)} ${yellow(dot + ' ' + msg)}`
-  )
-}
-export const getWarning = function (msg?: string, title = 'WARNING') {
-  return ` ${yellowBanner} ${warningPill(title)} ${yellow(dot + ' ' + msg)}`
-}
-
 export function printHttpServerUrls(
   server: Server,
   config: ResolvedConfig