Upgrade vite 5

.github/workflows/ci.yml

@@ -24,6 +24,8 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup-test-env
+      - name: Build JS
+        run: pnpm build
       - name: Run Lint
         run: pnpm run lint
 

flake.nix

@@ -21,7 +21,7 @@
           packages =
             rec {
               bash = pkgs.bash;
-              nodejs = pkgs.nodejs-18_x;
+              nodejs = pkgs.nodejs_20;
               pnpm = pkgs.nodePackages.pnpm;
             };
 

package.json

@@ -10,9 +10,8 @@
     "lint:fix": "prettier --loglevel warn --write \"packages/**/*.{ts,tsx}\" && eslint \"packages/**/*.{ts,tsx}\" --quiet --fix",
     "release": "pnpm -F=fastify-renderer publish",
     "preinstall": "npx only-allow pnpm",
-    "prerelease": "pnpm -F=fastify-renderer run gitpkg publish",
-    "test": "jest --forceExit -w=1",
-    "test:debug": "cross-env FR_DEBUG_SERVE=1 node --inspect-brk ./node_modules/.bin/jest --forceExit"
+    "prerelease": "pnpm -F=fastify-renderer exec gitpkg publish",
+    "test": "vitest --pool=forks --run"
   },
   "repository": {
     "type": "git",
@@ -44,9 +43,8 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "expect-playwright": "^0.8.0",
     "fs-extra": "^11.1.0",
-    "jest": "^29.7.0",
+    "vitest": "^1.0.4",
     "playwright-chromium": "^1.39.0",
     "prettier": "^2.8.8",
     "prettier-plugin-organize-imports": "^3.2.3",

packages/fastify-renderer/package.json

@@ -1,13 +1,19 @@
 {
   "name": "fastify-renderer",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Simple, high performance client side app renderer for Fastify.",
   "exports": {
     ".": {
-      "require": "./node/index.js"
+      "default": "./node/index.js",
+      "import": "./node/index.js"
     },
     "./client/react": {
-      "default": "./client/react/index.js"
+      "default": "./client/react/index.js",
+      "import": "./client/react/index.js"
+    },
+    "./client/react/DefaultLayout": {
+      "default": "./client/react/DefaultLayout.js",
+      "import": "./client/react/DefaultLayout.js"
     },
     "./package": "./package.json",
     "./package.json": "./package.json"
@@ -29,7 +35,7 @@
     "lint:fix": "prettier --loglevel warn --write \"{src,test}/**/*.{ts,tsx}\" && eslint \"{src,test}/**/*.{ts,tsx}\" --quiet --fix",
     "prepublishOnly": "npm run build",
     "test": "run-s build test:unit lint",
-    "test:unit": "jest"
+    "test:unit": "vitest --run"
   },
   "repository": {
     "type": "git",
@@ -67,8 +73,8 @@
     "path-to-regexp": "^6.2.1",
     "sanitize-filename": "^1.6.3",
     "stream-template": "^0.0.10",
-    "vite": "^2.9.15",
-    "wouter": "^2.7.5"
+    "vite": "^5.3.1",
+    "wouter": "^2.11.0"
   },
   "peerDependencies": {
     "fastify": "^4.24.2",
@@ -77,9 +83,7 @@
   },
   "devDependencies": {
     "@swc/core": "^1.3.95",
-    "@swc/jest": "^0.2.29",
     "@types/connect": "^3.4.35",
-    "@types/jest": "^29.5.6",
     "@types/node": "^18.11.9",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.11",
@@ -95,7 +99,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "fastify": "^4.24.2",
     "gitpkg": "^1.0.0-beta.2",
-    "jest": "^29.7.0",
+    "vitest": "^0.34.6",
     "npm-run-all": "^4.1.5",
     "pino-pretty": "^8.1.0",
     "prettier": "^2.7.1",

packages/fastify-renderer/src/client/react/matcher.ts

@@ -1,5 +1,5 @@
 import { Key, pathToRegexp } from 'path-to-regexp'
-import { MatcherFn } from 'wouter'
+import { MatcherFn } from 'wouter/matcher'
 
 /*
  * This function specifies how strings like /app/:users/:items* are transformed into regular expressions to pass into path-to-regexp.

packages/fastify-renderer/src/client/react/package.json

@@ -1,4 +1,8 @@
 {
   "sideEffects": false,
-  "module": "./index.js"
+  "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./DefaultLayout": "./DefaultLayout.js"
+  }
 }

packages/fastify-renderer/src/client/react/wouter-extension.d.ts

@@ -1,7 +1,7 @@
 import 'wouter'
 
 declare module 'wouter' {
-  export interface RouterProps {
+  export interface RouterObject {
     navigationHistory?: NavigationHistory
   }
 

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 fs from 'node:fs'
 import path from 'path'
 import { InlineConfig } from 'vite'
 import { Template } from './DocumentTemplate'
@@ -39,7 +39,7 @@ export class FastifyRendererPlugin {
   registeredComponents: Record<ImperativeRenderable, RenderableRegistration> = {}
 
   constructor(incomingOptions: FastifyRendererOptions) {
-    this.devMode = incomingOptions.devMode ?? process.env.NODE_ENV != 'production'
+    this.devMode = incomingOptions.devMode ?? (process.env.NODE_ENV != 'production' || process.env.TEST == 'true')
 
     this.vite = incomingOptions.vite || {}
     this.vite.base ??= '/.vite/'

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

@@ -4,7 +4,7 @@ import '@fastify/middie'
 import fastifyStatic from '@fastify/static'
 import { FastifyInstance, FastifyPluginAsync, FastifyReply } from 'fastify'
 import fp from 'fastify-plugin'
-import { promises as fs } from 'fs'
+import { promises as fs } from 'node:fs'
 import path from 'path'
 import { resolveConfig, build as viteBuild, createServer, ResolvedConfig, ViteDevServer } from 'vite'
 import { DefaultDocumentTemplate } from './DocumentTemplate'
@@ -53,7 +53,7 @@ const plugin: FastifyPluginAsync<FastifyRendererOptions> = async (fastify, incom
 
   fastify.setRenderConfig({
     base: incomingOptions.base || '',
-    layout: incomingOptions.layout || require.resolve('./renderers/react/DefaultLayout'),
+    layout: incomingOptions.layout || require.resolve('fastify-renderer/client/react/DefaultLayout'),
     document: incomingOptions.document || DefaultDocumentTemplate,
   })
 
@@ -149,6 +149,7 @@ const plugin: FastifyPluginAsync<FastifyRendererOptions> = async (fastify, incom
   fastify.addHook('onReady', async () => {
     fastify[kRendererViteOptions] = {
       clearScreen: false,
+      appType: 'custom',
       ...plugin.vite,
       plugins: [...(plugin.vite?.plugins || []), ...plugin.renderer.vitePlugins()],
       server: {

packages/fastify-renderer/src/node/renderers/Renderer.ts

@@ -1,5 +1,5 @@
 import { FastifyReply, FastifyRequest } from 'fastify'
-import { Plugin, ResolvedConfig, ViteDevServer } from 'vite'
+import type { Plugin, ResolvedConfig, ViteDevServer } from 'vite'
 import { Template } from '../DocumentTemplate'
 
 /** The options configuring a plugin encapsulation context's renders */