Upgrade to React 18 and Vitest

package.json

@@ -11,8 +11,7 @@
     "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"
+    "test": "vitest --no-threads"
   },
   "repository": {
     "type": "git",
@@ -44,20 +43,19 @@
     "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": "^0.34.6",
     "playwright-chromium": "^1.39.0",
     "prettier": "^2.8.8",
     "prettier-plugin-organize-imports": "^3.2.3",
     "wds": "^0.18.1"
   },
   "pnpm": {
     "overrides": {
-      "react": "0.0.0-experimental-4ead6b530",
-      "react-dom": "0.0.0-experimental-4ead6b530",
-      "@types/react": "17.0.4",
-      "@types/react-dom": "17.0.4"
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0",
+      "@types/react": "^18.2.0",
+      "@types/react-dom": "^18.2.0"
     }
   }
-}
+}

packages/fastify-renderer/package.json

@@ -29,7 +29,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"
   },
   "repository": {
     "type": "git",
@@ -73,28 +73,26 @@
   },
   "peerDependencies": {
     "fastify": "^3.13.0",
-    "react": "experimental",
-    "react-dom": "experimental"
+    "react": "*",
+    "react-dom": "*"
   },
   "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",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@types/sanitize-filename": "^1.6.3",
     "@typescript-eslint/eslint-plugin": "^5.40.0",
     "@typescript-eslint/parser": "^5.40.0",
     "cheerio": "^1.0.0-rc.12",
     "fastify": "^3.29.0",
     "gitpkg": "^1.0.0-beta.2",
-    "jest": "^29.7.0",
+    "vitest": "^0.34.6",
     "npm-run-all": "^4.1.5",
     "pino-pretty": "^4.8.0",
-    "react": "0.0.0-experimental-4ead6b530",
-    "react-dom": "0.0.0-experimental-4ead6b530",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
     "typescript": "^5.2.2"
   },
@@ -104,4 +102,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

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

@@ -1,4 +1,4 @@
-import { unstable_useTransition as useTransition, useCallback, useEffect, useRef, useState } from 'react'
+import { useTransition, useCallback, useEffect, useRef, useState } from 'react'
 import { NavigationHistory, useLocation, useRouter } from 'wouter'
 
 /**
@@ -19,7 +19,7 @@ export const events = [eventPopstate, eventPushState, eventReplaceState]
 export const useTransitionLocation = ({ base = '' } = {}) => {
   const [path, update] = useState(() => currentPathname(base)) // @see https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
   const prevLocation = useRef(path + location.search + location.hash)
-  const [startTransition, isPending] = useTransition()
+  const [isPending, startTransition] = useTransition()
   const router = useRouter()
   useEffect(() => {
     if (!router.navigationHistory)

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/require-await */
-import fs from 'fs'
+import fs from 'node:fs'
 import 'middie'
 import path from 'path'
 import { InlineConfig } from 'vite'
@@ -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

@@ -3,7 +3,7 @@ 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 { promises as fs } from 'node:fs'
 import 'middie'
 import path from 'path'
 import {
@@ -71,7 +71,7 @@ const FastifyRenderer = fp<FastifyRendererOptions>(
 
     fastify.setRenderConfig({
       base: incomingOptions.base || '',
-      layout: incomingOptions.layout || require.resolve('./renderers/react/DefaultLayout'),
+      layout: incomingOptions.layout || require.resolve('./renderers/react/DefaultLayout.tsx'),
       document: incomingOptions.document || DefaultDocumentTemplate,
     })
 

packages/fastify-renderer/src/node/renderers/react/ReactRenderer.tsx

@@ -46,7 +46,7 @@ export class ReactRenderer implements Renderer {
   clientModulePath: string
 
   constructor(readonly plugin: FastifyRendererPlugin, readonly options: ReactRendererOptions) {
-    this.clientModulePath = require.resolve('../../../client/react')
+    this.clientModulePath = require.resolve('../../../client/react/index.ts')
   }
 
   vitePlugins() {
@@ -339,15 +339,15 @@ export class ReactRenderer implements Renderer {
           return `
           // client side hydration entrypoint for a particular route generated by fastify-renderer
           import React from 'react'
-          import ReactDOM from 'react-dom'
+          import ReactDOM from 'react-dom/client'
           import { routes } from ${JSON.stringify(
             ReactRenderer.ROUTE_TABLE_ID + '?' + querystring.stringify(queryParams)
           )}
           import { Root } from ${JSON.stringify(this.clientModulePath)}
           import Layout from ${JSON.stringify(layout)}
           import Entrypoint from ${JSON.stringify(entrypoint)}
 
-          ReactDOM.unstable_createRoot(document.getElementById('fstrapp'), {
+          ReactDOM.createRoot(document.getElementById('fstrapp'), {
             hydrate: true
           }).render(<Root
             Layout={Layout}