Upgrade to fastify 4 and company

packages/fastify-renderer/package.json

@@ -57,22 +57,21 @@
     "node": ">= 12.0.0"
   },
   "dependencies": {
+    "@fastify/accepts": "^4.0.0",
+    "@fastify/middie": "^8.0.0",
+    "@fastify/static": "^6.4.0",
     "@opentelemetry/api": "^1.1.0",
     "@vitejs/plugin-react-refresh": "^1.3.6",
-    "fastify-accepts": "^2.1.0",
-    "fastify-express": "^0.3.3",
     "fastify-plugin": "^3.0.1",
-    "fastify-static": "^4.6.1",
     "http-errors": "^1.8.1",
-    "middie": "^5.4.0",
     "path-to-regexp": "^6.2.1",
     "sanitize-filename": "^1.6.3",
     "stream-template": "^0.0.10",
     "vite": "^2.9.14",
     "wouter": "^2.7.5"
   },
   "peerDependencies": {
-    "fastify": "^3.13.0",
+    "fastify": "^4.2.0",
     "react": "experimental",
     "react-dom": "experimental"
   },
@@ -93,12 +92,12 @@
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "fastify": "^3.29.0",
+    "fastify": "^4.2.0",
     "gitpkg": "^1.0.0-beta.2",
     "jest": "^28.1.3",
     "jest-playwright-preset": "^2.0.0",
     "npm-run-all": "^4.1.5",
-    "pino-pretty": "^4.8.0",
+    "pino-pretty": "^8.1.0",
     "prettier": "^2.7.1",
     "prettier-plugin-organize-imports": "^2.3.4",
     "react": "0.0.0-experimental-4ead6b530",

packages/fastify-renderer/src/node/Plugin.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/require-await */
+import '@fastify/middie'
 import fs from 'fs'
-import 'middie'
 import path from 'path'
 import { InlineConfig } from 'vite'
 import { Template } from './DocumentTemplate'

packages/fastify-renderer/src/node/index.ts

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/require-await */
+import '@fastify/accepts'
+import '@fastify/middie'
+import fastifyStatic from '@fastify/static'
 import { FastifyInstance, FastifyReply } from 'fastify'
-import 'fastify-accepts'
 import fp from 'fastify-plugin'
-import fastifyStatic from 'fastify-static'
 import { promises as fs } from 'fs'
-import 'middie'
 import path from 'path'
 import {
   build as viteBuild,
@@ -198,9 +198,9 @@ const FastifyRenderer = fp<FastifyRendererOptions>(
     })
   },
   {
-    fastify: '3.x',
+    fastify: '4.x',
     name: 'fastify-renderer',
-    dependencies: ['fastify-accepts', 'middie'],
+    dependencies: ['@fastify/accepts', 'middie'],
   }
 )
 

packages/fastify-renderer/src/node/types.ts

@@ -2,14 +2,19 @@
 import {
   ContextConfigDefault,
   FastifyInstance,
+  FastifyLoggerInstance,
   FastifyReply,
   FastifyRequest,
+  FastifySchema,
+  FastifyTypeProvider,
+  FastifyTypeProviderDefault,
   RawReplyDefaultExpression,
   RawRequestDefaultExpression,
   RawServerBase,
   RawServerDefault,
-  RequestGenericInterface,
 } from 'fastify'
+import { RouteGenericInterface } from 'fastify/types/route'
+import { FastifyRequestType, ResolveFastifyRequestType } from 'fastify/types/type-provider'
 import { IncomingMessage, Server, ServerResponse } from 'http'
 import { ReactElement } from 'react'
 import { ViteDevServer } from 'vite'
@@ -67,14 +72,31 @@ declare module 'fastify' {
     RawServer extends RawServerBase = RawServerDefault,
     RawRequest extends RawRequestDefaultExpression<RawServer> = RawRequestDefaultExpression<RawServer>,
     RawReply extends RawReplyDefaultExpression<RawServer> = RawReplyDefaultExpression<RawServer>,
+    TypeProvider extends FastifyTypeProvider = FastifyTypeProviderDefault,
     Props = any
   > {
-    <RequestGeneric extends RequestGenericInterface = RequestGenericInterface, ContextConfig = ContextConfigDefault>(
+    <
+      RouteGeneric extends RouteGenericInterface = RouteGenericInterface,
+      ContextConfig = ContextConfigDefault,
+      SchemaCompiler = FastifySchema,
+      RequestType extends FastifyRequestType = ResolveFastifyRequestType<TypeProvider, SchemaCompiler, RouteGeneric>,
+      Logger extends FastifyLoggerInstance = FastifyLoggerInstance
+    >(
       path: string,
-      opts: RouteShorthandOptions<RawServer, RawRequest, RawReply, RequestGeneric, ContextConfig> & {
+      opts: RouteShorthandOptions<
+        RawServer,
+        RawRequest,
+        RawReply,
+        RouteGeneric,
+        ContextConfig,
+        SchemaCompiler,
+        TypeProvider,
+        RequestType,
+        Logger
+      > & {
         render: string
       }, // this creates an overload that only applies these different types if the handler is for rendering
       handler: ServerRenderer<Props>
-    ): FastifyInstance<RawServer, RawRequest, RawReply>
+    ): FastifyInstance<RawServer, RawRequest, RawReply, Logger, TypeProvider>
   }
 }

packages/fastify-renderer/test/FastifyRenderer.spec.ts

@@ -57,7 +57,7 @@ describe('FastifyRenderer', () => {
   })
 
   test('should mount vite routes at a prefix to avoid collision with user routes', async () => {
-    expect(server.printRoutes()).toMatch('/.vite/')
+    expect(server.printRoutes()).toMatch('/.vite')
   })
 
   test('should close vite devServer when fastify server is closing in dev mode', async () => {
@@ -67,7 +67,7 @@ describe('FastifyRenderer', () => {
 
     server = await newFastify()
     await server.register(FastifyRenderer, { ...options, devMode: true })
-    await server.listen(0)
+    await server.listen({ port: 0 })
     await server.close()
 
     expect(closeSpy).toHaveBeenCalled()
@@ -86,9 +86,10 @@ describe('FastifyRenderer', () => {
     const registerRouteSpy = jest.spyOn(FastifyRendererPlugin.prototype, 'register').mockImplementation(jest.fn())
 
     server.get('/', { render: testComponent }, async (request, reply) => reply.send('Hello'))
-    await server.inject({ method: 'GET', url: '/' })
+    const response = await server.inject({ method: 'GET', url: '/' })
+    expect(response.statusCode).toEqual(200)
 
-    expect(registerRouteSpy).toHaveBeenCalledTimes(1)
+    expect(registerRouteSpy).toHaveBeenCalled()
   })
 })
 
@@ -101,7 +102,7 @@ describe('build()', () => {
   test('should build client and server side assets', async () => {
     const server = await newFastify()
     await server.register(FastifyRenderer, options)
-    await server.listen(0)
+    await server.listen({ port: 0 })
 
     jest.spyOn(fs, 'writeFile').mockImplementation(jest.fn())
     jest.spyOn(path, 'join').mockImplementation(jest.fn())

packages/fastify-renderer/test/helpers.ts

@@ -1,6 +1,6 @@
+import fastifyAccepts from '@fastify/accepts'
+import fastifyMiddie from '@fastify/middie'
 import fastify, { FastifyServerOptions } from 'fastify'
-import fastifyAccepts from 'fastify-accepts'
-import Middie from 'middie'
 import path from 'path'
 import { Readable } from 'stream'
 import { FastifyRendererOptions, FastifyRendererPlugin } from '../src/node/Plugin'
@@ -11,9 +11,17 @@ import { Render } from '../src/node/renderers/Renderer'
 const logLevel = process.env.LOG_LEVEL || 'error'
 
 export const newFastify = async (options?: FastifyServerOptions) => {
-  const server = fastify({ ...options, logger: { level: logLevel, prettyPrint: true } })
+  const server = fastify({
+    ...options,
+    logger: {
+      level: logLevel,
+      transport: {
+        target: 'pino-pretty',
+      },
+    },
+  })
   await server.register(fastifyAccepts)
-  await server.register(Middie)
+  await server.register(fastifyMiddie)
   return server
 }
 

packages/test-apps/helpers.ts

@@ -38,7 +38,7 @@ beforeAll(async () => {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
     const { server: fastifyServer } = require(serverEntrypoint)
     server = await fastifyServer()
-    await server.listen(port)
+    await server.listen({ port })
   }
 })
 

packages/test-apps/simple-react/package.json

@@ -9,13 +9,15 @@
   },
   "license": "MIT",
   "dependencies": {
-    "fastify": "^3.29.0",
+    "fastify": "^4.2.0",
     "fastify-renderer": "*",
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
     "@playwright/test": "^1.25.0",
+    "@swc/core": "^1.2.208",
+    "@swc/jest": "^0.2.21",
     "html-validator": "^5.1.18"
   }
 }

packages/test-apps/simple-react/server.ts

@@ -8,7 +8,9 @@ export const server = async () => {
   const server = await newFastify({
     logger: {
       level: process.env.LOG_LEVEL ?? process.env.NODE_ENV == 'test' ? 'warn' : 'info',
-      prettyPrint: true,
+      transport: {
+        target: 'pino-pretty',
+      },
     },
   })
 
@@ -110,7 +112,7 @@ export const server = async () => {
 if (require.main === module) {
   void server().then((server) => {
     console.warn(server.printRoutes())
-    return server.listen(3000).then((address) => {
+    return server.listen({ port: 3000 }).then((address) => {
       console.warn(`Test server listening on ${address}`)
     })
   })