vitrify 0.3.0 → 0.5.1

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

@@ -1,14 +1,17 @@
 import type { FastifyPluginCallback, FastifyRequest, FastifyReply } from 'fastify';
-import type { ViteDevServer } from 'vite';
 import type { OnRenderedHook } from '../../vitrify-config.js';
+import type { ViteDevServer } from 'vite';
 export interface FastifySsrOptions {
     baseUrl?: string;
     provide?: (req: FastifyRequest, res: FastifyReply) => Promise<Record<string, unknown>>;
+    vitrifyDir?: URL;
     vite?: ViteDevServer;
-    cliDir?: URL;
     appDir?: URL;
+    publicDir?: URL;
     productName?: string;
-    onRenderedHooks?: OnRenderedHook[];
+    onRendered?: OnRenderedHook[];
+    mode?: string;
 }
 declare const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions>;
 export { fastifySsrPlugin };
+export declare type FastifySsrPlugin = typeof fastifySsrPlugin;

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

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

@@ -0,0 +1,14 @@
+import type { ViteDevServer, ModuleNode } from 'vite';
+/**
+ * Collect SSR CSS for Vite
+ */
+export declare const componentsModules: (components: string[], vite: ViteDevServer) => Set<ModuleNode>;
+export declare const collectCss: ({ mods, styles, checkedComponents }: {
+    mods: Set<ModuleNode>;
+    styles?: Map<string, string> | undefined;
+    checkedComponents?: Set<unknown> | undefined;
+}) => string;
+/**
+ * Client listener to detect updated modules through HMR, and remove the initial styled attached to the head
+ */
+export declare const removeCssHotReloaded: () => void;

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

@@ -1,2 +1,2 @@
 import type { RouteRecordRaw } from 'vue-router';
-export declare const routesToPaths: (routes?: RouteRecordRaw[] | undefined) => string[];
+export declare const routesToPaths: (routes?: RouteRecordRaw[]) => string[];

package/dist/types/index.d.ts

@@ -3,13 +3,15 @@ import type { BootFunction, VitrifyConfig } from './vitrify-config.js';
 import type { VitrifyContext } from './bin/run.js';
 import type { VitrifyPlugin } from './plugins/index.js';
 export declare const VIRTUAL_MODULES: string[];
-export declare const baseConfig: ({ ssr, appDir, publicDir, command, mode, framework, pwa }: {
-    ssr?: "server" | "client" | "ssg" | undefined;
+export declare const baseConfig: ({ ssr, appDir, publicDir, base, command, mode, framework, pwa }: {
+    ssr?: "server" | "client" | "ssg" | "fastify" | undefined;
     appDir?: URL | undefined;
     publicDir?: URL | undefined;
+    base?: string | undefined;
     command?: "build" | "dev" | "test" | undefined;
     mode?: "production" | "development" | undefined;
     framework?: "vue" | undefined;
     pwa?: boolean | undefined;
 }) => Promise<InlineConfig>;
+export declare const vitrifyDir: URL;
 export type { VitrifyConfig, VitrifyPlugin, VitrifyContext, BootFunction };

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

@@ -1,6 +1,6 @@
 import type { Plugin } from 'vite';
 export declare type VitrifyPlugin = ({ ssr, mode, command }: {
-    ssr?: 'server' | 'client' | 'ssg' | false;
+    ssr?: 'server' | 'client' | 'ssg' | 'fastify' | false;
     pwa?: boolean;
     mode?: 'production' | 'development';
     command?: 'build' | 'dev' | 'test';

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

@@ -1,5 +1,4 @@
-import type { FastifyInstance } from 'fastify';
-import type { UserConfig } from 'vite';
+import type { Alias, UserConfig } from 'vite';
 import type { QuasarConf } from './plugins/quasar.js';
 import type { ComponentInternalInstance } from '@vue/runtime-core';
 export declare type BootFunction = ({ app, ssrContext, staticImports }: {
@@ -10,13 +9,13 @@ export declare type BootFunction = ({ app, ssrContext, staticImports }: {
 export declare type OnBootHook = ({ app, ssrContext, staticImports }: {
     app: any;
     ssrContext: Record<string, unknown>;
-    staticImports: Record<string, any>;
+    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 declare type OnSetupFile = URL;
 export interface VitrifyConfig extends UserConfig {
     vitrify?: {
         /**
@@ -31,7 +30,7 @@ export interface VitrifyConfig extends UserConfig {
             /**
              * setup() is called directly after instantiating fastify. Use it to register your own plugins, routes etc.
              */
-            onSetup?: OnSetupHook[];
+            onSetup?: OnSetupFile[];
             /**
              * Functions which run in the onMounted hook of the app
              */
@@ -66,6 +65,18 @@ export interface VitrifyConfig extends UserConfig {
             cwd?: URL;
             packages?: Record<string, URL>;
         };
+        /**
+         * SSR specific configuration
+         */
+        ssr?: {
+            serverModules?: string[];
+        };
+        /**
+         * Development only configuration
+         */
+        dev?: {
+            alias?: Alias[];
+        };
     };
     quasar?: QuasarConf;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitrify",
-  "version": "0.3.0",
+  "version": "0.5.1",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "Pre-configured Vite CLI for your framework",
@@ -49,53 +49,54 @@
   "homepage": "https://github.com/simsustech/vitrify/tree/main/#readme",
   "scripts": {
     "build": "tsc",
-    "test": "echo \"Error: no test specified\" && exit 0"
+    "test": "vitest test/"
   },
   "dependencies": {
-    "@quasar/extras": "^1.13.5",
-    "@vitejs/plugin-vue": "^2.3.1",
-    "@vue/compiler-sfc": "^3.2.33",
-    "@vue/server-renderer": "^3.2.33",
-    "builtin-modules": "^3.2.0",
+    "@fastify/middie": "^8.0.0",
+    "@fastify/static": "^6.4.0",
+    "@quasar/extras": "^1.14.0",
+    "@vitejs/plugin-vue": "^3.0.0-alpha.1",
+    "builtin-modules": "^3.3.0",
     "cac": "^6.7.12",
     "chalk": "^5.0.1",
     "cross-env": "^7.0.3",
-    "fastify": "^3.28.0",
-    "fastify-static": "^4.6.1",
-    "glob": "^8.0.1",
-    "happy-dom": "^2.55.0",
-    "import-meta-resolve": "^1.1.1",
+    "esbuild": "^0.14.43",
+    "fastify": "^4.0.0",
+    "glob": "^8.0.3",
+    "happy-dom": "^5.2.0",
     "local-pkg": "^0.4.1",
-    "magic-string": "^0.26.1",
+    "magic-string": "^0.26.2",
     "merge-deep": "^3.0.3",
-    "middie": "^6.0.0",
     "readline": "^1.3.0",
-    "sass": "1.50.0",
-    "unplugin-vue-components": "^0.19.3",
-    "vite": "^2.9.5",
-    "vitest": "^0.9.3"
+    "sass": "1.52.3",
+    "ts-node": "^10.8.1",
+    "unplugin-vue-components": "^0.19.6",
+    "vite": "^3.0.0-beta.0",
+    "vitest": "^0.14.1"
   },
   "devDependencies": {
+    "@types/connect": "^3.4.35",
     "@types/glob": "^7.2.0",
     "@types/merge-deep": "^3.0.0",
-    "@types/node": "^17.0.24",
+    "@types/node": "^17.0.41",
     "@types/ws": "^8.5.3",
-    "@vue/runtime-core": "^3.2.33",
-    "quasar": "^2.6.6",
-    "rollup": "^2.70.1",
-    "typescript": "^4.6.3",
-    "vite": "^2.9.5",
-    "vue": "^3.2.33",
-    "vue-router": "^4.0.14"
+    "@vue/runtime-core": "^3.2.37",
+    "import-meta-resolve": "^2.0.3",
+    "quasar": "^2.7.1",
+    "rollup": "^2.75.6",
+    "typescript": "^4.7.3",
+    "vite": "^3.0.0-alpha.11",
+    "vue": "^3.2.37",
+    "vue-router": "^4.0.15"
   },
   "peerDependencies": {
-    "fastify": "^3.28.0",
+    "@fastify/static": "^6.4.0",
+    "fastify": "^4.0.0",
     "fastify-plugin": "^3.0.1",
-    "fastify-sensible": "^3.1.2",
-    "fastify-static": "^4.6.1",
-    "quasar": "^2.6.6",
-    "vue": "^3.2.33",
-    "vue-router": "^4.0.14"
+    "quasar": "^2.7.1",
+    "vue": "^3.2.37",
+    "vue-router": "^4.0.15",
+    "import-meta-resolve": "^2.0.3"
   },
   "publishConfig": {
     "access": "public",

package/src/node/app-urls.ts

@@ -17,7 +17,7 @@ export const getCwd = () => new URL(`file://${process.cwd()}/`)
 
 export const parsePath = (path: string, basePath: URL) => {
   if (path) {
-    if (path.slice(-1) !== '/') path += '/'
+    if (!path.includes('.') && path.slice(-1) !== '/') path += '/'
     if (path.startsWith('.')) {
       return new URL(path, basePath)
     } else if (path) {

package/src/node/bin/build.ts

@@ -3,9 +3,9 @@ import { baseConfig } from '../index.js'
 import { build as viteBuild } from 'vite'
 
 export async function build(opts: {
-  ssr?: 'client' | 'server' | 'ssg'
+  ssr?: 'client' | 'server' | 'ssg' | 'fastify'
   base?: string
-  outDir?: string
+  outDir: string
   appDir?: URL
   publicDir?: URL
 }) {
@@ -14,7 +14,8 @@ export async function build(opts: {
     mode: 'production',
     ssr: opts?.ssr,
     appDir: opts.appDir,
-    publicDir: opts.publicDir
+    publicDir: opts.publicDir,
+    base: opts.base
   })
 
   config.build = {
@@ -24,16 +25,16 @@ export async function build(opts: {
     emptyOutDir: !!opts.outDir
   }
 
-  if (opts.base) {
-    config.define = {
-      ...config.define,
-      __BASE_URL__: `'${opts.base}'`
-    }
-  }
+  // if (opts.base) {
+  //   config.define = {
+  //     ...config.define,
+  //     __BASE_URL__: `'${opts.base}'`
+  //   }
+  // }
 
   return viteBuild({
     configFile: false,
-    base: opts.base,
+    // base: opts.base,
     // logLevel: 'silent',
     ...config
   })

package/src/node/bin/cli.ts

@@ -2,7 +2,13 @@
 import cac from 'cac'
 import { getAppDir, parsePath } from '../app-urls.js'
 import { printHttpServerUrls } from '../helpers/logger.js'
-import type { ViteDevServer } from 'vite'
+import type {
+  ConfigEnv,
+  ResolvedConfig,
+  UserConfig,
+  UserConfigExport,
+  ViteDevServer
+} from 'vite'
 import type { Server } from 'net'
 
 const cli = cac('vitrify')
@@ -42,7 +48,14 @@ cli
       case 'csr':
         await build({
           ...args,
-          outDir: new URL('spa/', baseOutDir).pathname
+          outDir: new URL('csr/', baseOutDir).pathname
+        })
+        break
+      case 'fastify':
+        await build({
+          ssr: 'fastify',
+          ...args,
+          outDir: new URL('server/', baseOutDir).pathname
         })
         break
       case 'ssr':
@@ -96,26 +109,41 @@ cli
     { default: '127.0.0.1' }
   )
   .option('--appDir [appDir]', 'Application directory')
+  .option('--app [app]', 'Fastify app instance path')
   .option('--publicDir [publicDir]', 'Public directory')
   .action(async (options) => {
     let server: Server
-    let vite: ViteDevServer
+    let config: ResolvedConfig
     if (options.host === true) {
       options.host = '0.0.0.0'
     }
     const { createServer } = await import('./dev.js')
     const cwd = (await import('../app-urls.js')).getCwd()
+    let app
+    const appPath = parsePath(options.app, cwd)?.pathname
+    if (appPath) {
+      app = await import(appPath)
+    }
+
     switch (options.mode) {
       case 'ssr':
-        ;({ server, vite } = await createServer({
-          mode: 'ssr',
+        ;({ server, config } = await createServer({
+          ssr: 'ssr',
+          host: options.host,
+          appDir: parsePath(options.appDir, cwd),
+          publicDir: parsePath(options.publicDir, cwd)
+        }))
+        break
+      case 'fastify':
+        ;({ server, config } = await createServer({
+          ssr: 'fastify',
           host: options.host,
           appDir: parsePath(options.appDir, cwd),
           publicDir: parsePath(options.publicDir, cwd)
         }))
         break
       default:
-        ;({ server, vite } = await createServer({
+        ;({ server, config } = await createServer({
           host: options.host,
           appDir: parsePath(options.appDir, cwd),
           publicDir: parsePath(options.publicDir, cwd)
@@ -123,7 +151,7 @@ cli
         break
     }
     console.log('Dev server running at:')
-    printHttpServerUrls(server, vite.config)
+    printHttpServerUrls(server, config)
   })
 
 cli.command('test').action(async (options) => {

package/src/node/bin/dev.ts

@@ -1,56 +1,74 @@
-import type { ViteDevServer, LogLevel } from 'vite'
+import type { LogLevel, InlineConfig } from 'vite'
+import { ViteDevServer, mergeConfig } from 'vite'
 import { searchForWorkspaceRoot } from 'vite'
 import { baseConfig } from '../index.js'
 import type { Server } from 'net'
 import type { FastifyInstance } from 'fastify/types/instance'
 import fastify from 'fastify'
-import { readFileSync } from 'fs'
+import { fastifySsrPlugin } from '../frameworks/vue/fastify-ssr-plugin.js'
+import type { ServerOptions } from 'https'
 
-export async function createServer({
+export async function createVitrifyDevServer({
   port = 3000,
   logLevel = 'info',
-  mode = 'csr',
+  // mode = 'csr',
+  ssr,
   framework = 'vue',
   host,
   appDir,
-  publicDir
+  publicDir,
+  base
 }: {
   port?: number
   logLevel?: LogLevel
-  mode?: 'csr' | 'ssr'
+  // mode?: 'csr' | 'ssr' | 'fastify'
+  ssr?: 'ssr' | 'fastify'
   framework?: 'vue'
   host?: string
   appDir?: URL
   publicDir?: URL
+  base?: string
 }) {
-  const { getAppDir, getCliDir, getCwd } = await import('../app-urls.js')
-  const cwd = getCwd()
-  const cliDir = getCliDir()
-  if (!appDir) appDir = getAppDir()
-  const { fastifySsrPlugin } = await import(
-    `../frameworks/${framework}/fastify-ssr-plugin.js`
+  const { getAppDir, getCliDir, getCliViteDir, getCwd } = await import(
+    '../app-urls.js'
   )
 
-  /**
-   * @type {import('vite').ViteDevServer}
-   */
-  const config = await baseConfig({
-    ssr: mode === 'ssr' ? 'server' : undefined,
+  const cliDir = getCliDir()
+
+  if (!appDir) appDir = getAppDir()
+  let config: InlineConfig = {}
+  let ssrMode: 'server' | 'fastify' | undefined
+  if (ssr === 'ssr') ssrMode = 'server'
+  if (ssr === 'fastify') ssrMode = 'fastify'
+  config = await baseConfig({
+    framework,
+    ssr: ssrMode,
     command: 'dev',
     mode: 'development',
     appDir,
-    publicDir
+    publicDir,
+    base
   })
+
   config.logLevel = logLevel
+
+  console.log(searchForWorkspaceRoot(appDir.pathname))
   config.server = {
+    https: config.server?.https,
+    hmr: {
+      protocol: config.server?.https ? 'wss' : 'ws',
+      port: 24678
+    },
     port,
-    middlewareMode: mode === 'ssr' ? 'ssr' : undefined,
+    // middlewareMode: mode === 'ssr' ? 'ssr' : undefined,
+    middlewareMode: ssr ? 'ssr' : false,
     fs: {
+      strict: false, // https://github.com/vitejs/vite/issues/8175
       allow: [
         searchForWorkspaceRoot(process.cwd()),
         searchForWorkspaceRoot(appDir.pathname),
-        searchForWorkspaceRoot(cliDir.pathname)
-        // appDir.pathname,
+        searchForWorkspaceRoot(cliDir.pathname),
+        appDir.pathname
       ]
     },
     watch: {
@@ -61,34 +79,87 @@ export async function createServer({
     },
     host
   }
-  const vite = await (
+  const vitrifyDevServer = await (
     await import('vite')
   ).createServer({
     configFile: false,
     ...config
   })
-  const { productName = 'Product name' } = JSON.parse(
-    readFileSync(new URL('package.json', appDir).pathname, {
-      encoding: 'utf-8'
-    })
+
+  return vitrifyDevServer
+}
+
+export async function createServer({
+  port = 3000,
+  logLevel = 'info',
+  // mode = 'csr',
+  ssr,
+  framework = 'vue',
+  host,
+  appDir,
+  publicDir
+}: {
+  port?: number
+  logLevel?: LogLevel
+  // mode?: 'csr' | 'ssr' | 'fastify'
+  ssr?: 'ssr' | 'fastify'
+  framework?: 'vue'
+  host?: string
+  appDir?: URL
+  publicDir?: URL
+}) {
+  const { getAppDir, getCliDir, getCliViteDir, getCwd } = await import(
+    '../app-urls.js'
   )
 
-  let app: ViteDevServer | FastifyInstance
+  appDir = appDir || getAppDir()
+  const cliDir = getCliDir()
+
+  const vite = await createVitrifyDevServer({
+    port,
+    logLevel,
+    ssr,
+    framework,
+    host,
+    appDir,
+    publicDir
+  })
+
+  let setup
   let server: Server
-  if (mode === 'ssr') {
-    console.log('SSR mode')
-    app = fastify()
-    await app.register(fastifySsrPlugin, {
-      appDir,
-      cliDir,
-      vite,
-      productName
-    })
 
-    await app.listen(port || 3000, host)
+  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))
+
+    const app = fastify({
+      logger: true,
+      https: vite.config.server.https as ServerOptions
+    })
+    if (process.env) process.env.MODE = 'development'
+    if (setup) {
+      await setup({
+        fastify: app
+      })
+    }
+    if (ssr === 'ssr') {
+      await app.register(fastifySsrPlugin, {
+        appDir,
+        mode: 'development'
+      })
+    }
+    await app.listen({
+      port: Number(port || 3000),
+      host
+    })
     server = app.server
   } else {
     server = (await vite.listen()).httpServer as Server
   }
-  return { server, vite }
+  return { server, config: vite.config }
 }

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

@@ -0,0 +1,72 @@
+import type {
+  FastifyPluginCallback,
+  FastifyRequest,
+  FastifyReply
+} from 'fastify'
+import fastifyStatic from '@fastify/static'
+import type { OnRenderedHook } from '../../vitrify-config.js'
+import type { ViteDevServer } from 'vite'
+
+export interface FastifySsrOptions {
+  baseUrl?: string
+  provide?: (
+    req: FastifyRequest,
+    res: FastifyReply
+  ) => Promise<Record<string, unknown>>
+  vitrifyDir?: URL
+  vite?: ViteDevServer
+  // frameworkDir?: URL
+  appDir?: URL
+  publicDir?: URL
+  productName?: string
+  onRendered?: OnRenderedHook[]
+  mode?: string
+}
+
+const fastifyCsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
+  fastify,
+  options,
+  done
+) => {
+  options.vitrifyDir =
+    options.vitrifyDir || (await import('vitrify')).vitrifyDir
+  const frameworkDir = new URL('src/vite/vue/', options.vitrifyDir)
+  options.baseUrl = options.baseUrl || '/'
+  options.mode = options.mode || process.env.MODE || import.meta.env.MODE
+  options.appDir = options.appDir || new URL('../../..', import.meta.url)
+
+  if (
+    options.baseUrl.charAt(options.baseUrl.length - 1) !== '/' ||
+    options.baseUrl.charAt(0) !== '/'
+  )
+    throw new Error('baseUrl should start and end with a /')
+  if (options.mode === 'development') {
+    options.appDir = options.appDir || new URL('../..', import.meta.url)
+
+    const { createVitrifyDevServer } = await import('vitrify/dev')
+    const vite = await createVitrifyDevServer({
+      appDir: options.appDir,
+      framework: 'vue',
+      base: options.baseUrl
+    })
+
+    console.log('Dev mode')
+    if (!('use' in fastify)) {
+      const middie = (await import('@fastify/middie')).default
+      await fastify.register(middie)
+    }
+    fastify.use(vite.middlewares)
+  } else {
+    options.appDir = options.appDir || new URL('../../..', import.meta.url)
+    fastify.register(fastifyStatic, {
+      root: new URL('./dist/csr', options.appDir).pathname,
+      wildcard: false,
+      index: false,
+      prefix: options.baseUrl
+    })
+  }
+  done()
+}
+
+export { fastifyCsrPlugin }
+export type FastifyCsrPlugin = typeof fastifyCsrPlugin