Introducing Multi-threading

README.md

@@ -87,7 +87,7 @@ You can optionally provide configuration options to the plugin:
   - `heads` - Function that will return html tags to be appended to the document head tag
   - `tails` - Function that will return html tags to be appended to the document body tag
   - `transform` - Function that will be run to transform the root react element
-  - `postRenderHeads` - Function (called after render) that will return html tags to be appended to the document head tag. Useful when injecting styles that rely on rendering first.
+  - `postRenderHeads` - Function (called after render) that will return html tags to be appended to the document head tag. Useful when injecting styles that rely on rendering first. (Not available in streaming mode)
 
 The plugin will render the component server side and return it, where as the route handler will return the props to the frontend when needed.
 

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",
@@ -66,35 +66,34 @@
     "http-errors": "^1.8.1",
     "middie": "^5.4.0",
     "path-to-regexp": "^6.2.1",
+    "resource-pooler": "^0.2.0",
     "sanitize-filename": "^1.6.3",
     "stream-template": "^0.0.10",
     "vite": "^2.9.15",
     "wouter": "^2.7.5"
   },
   "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",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
     "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 +103,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

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

@@ -1,8 +1,8 @@
 import { createContext } from 'react'
 export { Link, Redirect, Route, Router, Switch, useLocation, useRoute, useRouter } from 'wouter'
-export { useNavigationDetails, useTransitionLocation } from './locationHook'
 export { Root } from './Root'
 export type { LayoutProps } from './Root'
+export { useNavigationDetails, useTransitionLocation } from './locationHook'
 
 export const RenderBusContext = createContext<any>(null as any)
 

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/client/tsconfig.json

@@ -3,7 +3,13 @@
   "compilerOptions": {
     "outDir": "../../client",
     "module": "esnext",
-    "types": ["react/experimental", "react-dom/experimental"],
-    "lib": ["ESNext", "DOM"]
+    "types": [
+      "react/experimental",
+      "react-dom/experimental"
+    ],
+    "lib": [
+      "ESNext",
+      "DOM"
+    ]
   }
-}
+}