@fastify/vite@8.1.1 (#248)

galvez · web-flow · commit c312e57c939f · 2025-04-29T18:22:26.000-03:00
* release: @fastify/vite@8.1.1

* bump: @fastify/vite@8.1.1
diff --git a/examples/react-vanilla-spa-ts/package.json b/examples/react-vanilla-spa-ts/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "example-react-vanilla-ts-src",
+  "type": "module",
+  "scripts": {
+    "dev": "tsx src/server.ts --dev",
+    "start": "NODE_ENV=production node build/server.js",
+    "build": "pnpm build:server && pnpm build:client",
+    "build:client": "vite build",
+    "build:server": "tsc",
+    "lint": "oxlint",
+    "test": "tsx --test"
+  },
+  "dependencies": {
+    "@fastify/vite": "workspace:^",
+    "fastify": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.17",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "catalog:",
+    "oxlint": "catalog:",
+    "tsx": "catalog:",
+    "typescript": "catalog:",
+    "vite": "catalog:"
+  }
+}
diff --git a/examples/react-vanilla-spa-ts/src/client/App.tsx b/examples/react-vanilla-spa-ts/src/client/App.tsx
@@ -0,0 +1,7 @@
+export function App() {
+  return (
+    <div>
+      <h1>Hello world from React and @fastify/vite!</h1>
+    </div>
+  )
+}
diff --git a/examples/react-vanilla-spa-ts/src/client/index.html b/examples/react-vanilla-spa-ts/src/client/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<!-- head -->
+</head>
+<!-- hydration -->
+<div id="root"><!-- element --></div>
+<script type="module" src="/mount.tsx"></script>
+</html>
diff --git a/examples/react-vanilla-spa-ts/src/client/mount.tsx b/examples/react-vanilla-spa-ts/src/client/mount.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { App } from './App'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>
+)
diff --git a/examples/react-vanilla-spa-ts/src/client/tsconfig.json b/examples/react-vanilla-spa-ts/src/client/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "allowJs": false,
+    "jsx": "react-jsx",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "noEmit": true,    
+    "target": "ES2023",
+    "types": ["vite/client"]
+  },
+  "include": ["**/*"],
+  "exclude": []
+}
diff --git a/examples/react-vanilla-spa-ts/src/server.test.ts b/examples/react-vanilla-spa-ts/src/server.test.ts
@@ -0,0 +1,12 @@
+import test from 'node:test'
+import { resolve } from 'node:path'
+import { makeBuildTest, makeIndexTest } from '../../test-factories.mjs'
+import { main } from './server.ts'
+
+const viteConfigLocation = resolve(import.meta.dirname, '..')
+
+test('react-vanilla-spa-ts', async (t) => {
+  await t.test('build production bundle', makeBuildTest({ cwd: viteConfigLocation }))
+  await t.test('render index page in production', makeIndexTest({ main, dev: false }))
+  await t.test('render index page in development', makeIndexTest({ main, dev: true }))
+})
diff --git a/examples/react-vanilla-spa-ts/src/server.ts b/examples/react-vanilla-spa-ts/src/server.ts
@@ -0,0 +1,30 @@
+
+import { resolve } from 'node:path'
+import Fastify from 'fastify'
+import FastifyVite from '@fastify/vite'
+
+
+export async function main (dev?: boolean) {
+  const server = Fastify()
+
+  await server.register(FastifyVite, {
+    // The compiled server will live in <root>/build which is the same depth as <root>/src,
+    // so we can use import.meta.dirname here
+    root: resolve(import.meta.dirname, '..'),
+    distDir: resolve(import.meta.dirname, '..', 'build'), // Must match build.outDir in Vite config
+    dev: dev || process.argv.includes('--dev'),
+    spa: true,
+  })
+
+  server.get('/', (req, reply) => {
+    return reply.html()
+  })
+
+  await server.vite.ready()
+  return server
+}
+
+if (process.argv[1] === import.meta.filename) {
+  const server = await main()
+  await server.listen({ port: 3000 })
+}
diff --git a/examples/react-vanilla-spa-ts/tsconfig.json b/examples/react-vanilla-spa-ts/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "checkJs": false,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "incremental": true,
+    "isolatedModules": true,
+    "lib": ["ESNext"],
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "outDir": "build",
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "removeComments": true,
+    "resolveJsonModule": true,
+    "rootDir": "src",
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "target": "ESNext",
+    "verbatimModuleSyntax": true
+  },
+  "include": ["src"],
+  "exclude": ["src/client/**/*", "src/**/*.test.ts"]
+}
diff --git a/examples/react-vanilla-spa-ts/vite.config.js b/examples/react-vanilla-spa-ts/vite.config.js
@@ -0,0 +1,17 @@
+import { resolve } from 'node:path'
+import viteFastify from '@fastify/vite/plugin'
+import viteReact from '@vitejs/plugin-react'
+
+export default {
+  root: resolve(import.meta.dirname, 'src', 'client'),
+  plugins: [
+    viteFastify({ spa: true }),
+    viteReact()
+  ],
+  build: {
+    emptyOutDir: true,
+    // Forces Vite to use a top-level dist folder,
+    // outside the project root defined above
+    outDir: resolve(import.meta.dirname, 'build'),
+  },
+}
diff --git a/examples/react-vanilla-ts/package.json b/examples/react-vanilla-ts/package.json
@@ -5,7 +5,7 @@
     "dev": "tsx src/server.ts --dev",
     "start": "NODE_ENV=production node build/server.js",
     "build": "pnpm build:server && pnpm build:client",
-    "build:client": "vite build --app --emptyOutDir",
+    "build:client": "vite build --app",
     "build:server": "tsc",
     "lint": "oxlint",
     "test": "tsx --test"
diff --git a/examples/react-vanilla-ts/src/server.test.ts b/examples/react-vanilla-ts/src/server.test.ts
@@ -5,7 +5,7 @@ import { main } from './server.ts'
 
 const viteConfigLocation = resolve(import.meta.dirname, '..')
 
-test('react-vanilla-ts-src', async (t) => {
+test('react-vanilla-ts', async (t) => {
   await t.test('build production bundle', makeBuildTest({ cwd: viteConfigLocation }))
   await t.test('render index page in production', makeIndexTest({ main, dev: false }))
   await t.test('render index page in development', makeIndexTest({ main, dev: true }))
diff --git a/examples/vue-vanilla-ts/client/base.ts b/examples/vue-vanilla-ts/client/base.ts
@@ -0,0 +1,7 @@
+import { createSSRApp } from 'vue'
+import base from './base.vue'
+
+export type App = ReturnType<typeof createSSRApp>
+export function createApp(): App {
+  return createSSRApp(base)
+}
diff --git a/examples/vue-vanilla-ts/client/base.vue b/examples/vue-vanilla-ts/client/base.vue
@@ -0,0 +1,3 @@
+<template>
+  <p>Hello world from Vue and @fastify/vite!</p>
+</template>
diff --git a/examples/vue-vanilla-ts/client/index.html b/examples/vue-vanilla-ts/client/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<!-- head -->
+</head>
+<!-- hydration -->
+<div id="root"><!-- element --></div>
+<script type="module" src="/mount.ts"></script>
+</html>
diff --git a/examples/vue-vanilla-ts/client/index.ts b/examples/vue-vanilla-ts/client/index.ts
@@ -0,0 +1,6 @@
+import { createApp } from './base'
+
+export default {
+  // Provides function needed to perform SSR
+  createApp
+}
diff --git a/examples/vue-vanilla-ts/client/mount.ts b/examples/vue-vanilla-ts/client/mount.ts
@@ -0,0 +1,4 @@
+import { createApp } from './base'
+
+createApp()
+  .mount('#root')
diff --git a/examples/vue-vanilla-ts/globals.d.ts b/examples/vue-vanilla-ts/globals.d.ts
@@ -0,0 +1,11 @@
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+declare module '@fastify/vite/plugin' {
+  const fastifyVitePlugin: () => import('vite').Plugin
+  export default fastifyVitePlugin
+}
diff --git a/examples/vue-vanilla-ts/server.test.ts b/examples/vue-vanilla-ts/server.test.ts
@@ -0,0 +1,11 @@
+import test from 'node:test'
+import { makeBuildTest, makeIndexTest } from '../test-factories.mjs'
+import { main } from './server.js'
+
+const cwd = import.meta.dirname
+
+test('vue-vanilla', async (t) => {
+  await t.test('build production bundle', makeBuildTest({ cwd }))
+  await t.test('render index page in production', makeIndexTest({ main, dev: false }))
+  await t.test('render index page in development', makeIndexTest({ main, dev: true }))
+})
diff --git a/examples/vue-vanilla-ts/server.ts b/examples/vue-vanilla-ts/server.ts
@@ -0,0 +1,50 @@
+
+import { fileURLToPath } from 'node:url'
+import { join } from 'node:path'
+import Fastify from 'fastify'
+import FastifyVite from '@fastify/vite'
+import { renderToString } from 'vue/server-renderer'
+import type { VNode } from 'vue'
+
+export async function main (dev?: boolean) {
+  const server = Fastify()
+
+  await server.register(FastifyVite, {
+    // Note: this is specific to using TypeScript for the
+    // Fastify server — which still requires a build step.
+    // Once Node.js can natively run TypeScript files without
+    // an experimental CLI flag, all this ceases to be necessary.
+    //
+    // Since the original server.ts sits at the top-level dir,
+    // and the compiled version in dist/server.js, we need
+    // to rely on process.cwd() to acurately determine the root dir
+    // upon boot — or we use a CLI path flag (you can still 
+    // use process.cwd() to resolve the absolute path from the flag)
+    root: process.cwd(),
+    distDir: join(process.cwd(), 'dist'),
+    dev: dev || process.argv.includes('--dev'),
+    async createRenderFunction ({ createApp }: { createApp: () => VNode}) {
+      return async () => ({
+        element: await renderToString(createApp())
+      })
+    }
+  })
+
+  server.setErrorHandler((err, req, reply) => {
+    console.error(err)
+    reply.send(err)
+  })
+
+  await server.vite.ready()
+
+  server.get('/', (req, reply) => {
+    return reply.html()
+  })
+
+  return server
+}
+
+if (process.argv[1] === fileURLToPath(import.meta.url)) {
+  const server = await main()
+  await server.listen({ port: 3000 })
+}
diff --git a/examples/vue-vanilla-ts/vite.config.ts b/examples/vue-vanilla-ts/vite.config.ts
@@ -0,0 +1,14 @@
+import { join } from 'node:path'
+import viteFastify from '@fastify/vite/plugin'
+import vuePlugin from '@vitejs/plugin-vue'
+
+export default {
+  root: join(import.meta.dirname, 'client'),
+  plugins: [
+    viteFastify(), 
+    vuePlugin()
+  ],
+  build: {
+    outDir: join(import.meta.dirname, 'dist')
+  }
+}
diff --git a/packages/fastify-vite/package.json b/packages/fastify-vite/package.json
@@ -43,7 +43,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "8.1.0",
+  "version": "8.1.1",
   "optionalDependencies": {
     "@fastify/htmx": "workspace:^",
     "@fastify/react": "workspace:^",
diff --git a/packages/fastify-vite/plugin.mjs b/packages/fastify-vite/plugin.mjs
@@ -2,6 +2,7 @@ import getDeepMergeFunction from '@fastify/deepmerge'
 import { isAbsolute, join, write, sep } from './ioutils.cjs'
 
 export function viteFastify({ spa, clientModule } = {}) {
+  let configuredOutDir
   let jsonFilePath
   let configToWrite = {}
   let resolvedConfig = {}
@@ -10,8 +11,9 @@ export function viteFastify({ spa, clientModule } = {}) {
     name: 'vite-fastify',
     enforce: 'pre',
     async config(config, { mode }) {
+      configuredOutDir = config.build?.outDir
       const dev = mode === 'development'
-      const outDir = config.build?.outDir ?? 'dist'
+      const outDir = configuredOutDir ?? 'dist'
       const deepMerge = getDeepMergeFunction()
       const {
         resolveClientModule,
@@ -88,11 +90,15 @@ export function viteFastify({ spa, clientModule } = {}) {
         fastify,
       }
 
-      const outDirs = Object.values(fastify.outDirs)
-      const commonDistFolder = outDirs.length > 1 
-        ? findCommonPath(outDirs)
-        // Handle SPA case where there's only dist/client
-        : outDirs[0].split(sep)[0]
+      let commonDistFolder = configuredOutDir // respect custom build.outDir config if provided
+      if (!commonDistFolder) {
+        const outDirs = Object.values(fastify.outDirs)
+        commonDistFolder = outDirs.length > 1
+          ? findCommonPath(outDirs)
+          // Handle SPA case where there's only dist/client
+          : outDirs[0].split(sep)[0]
+      }
+
       if (isAbsolute(commonDistFolder)) {
         jsonFilePath = join(commonDistFolder, 'vite.config.json')
       } else {
