ci: remove node16

.github/workflows/benchmark.yml

@@ -18,7 +18,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node-version: [16.x, 18.x, 20.x] # 14.x, 15.x, 16.x, 17.x
+        node-version: [18.x, 20.x, 22.x] # 14.x, 15.x, 16.x, 17.x
         os: [ubuntu-latest] # ubuntu-latest, macos-latest, windows-latest
 
     # Steps represent a sequence of tasks that will be executed as part of the job

.github/workflows/test.yml

@@ -18,7 +18,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node-version: [16.x, 18.x, 20.x]
+        node-version: [18.x, 20.x, 22.x]
         os: [ubuntu-latest, macos-latest, windows-latest]
 
     # Steps represent a sequence of tasks that will be executed as part of the job

examples/example/package.json

@@ -28,8 +28,8 @@
     "farrow-pipeline": "^2.2.0",
     "farrow-react": "^2.2.0",
     "farrow-schema": "^2.2.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "tslib": "^2.5.0"
   }
 }

examples/next-app/package.json

@@ -17,12 +17,12 @@
     "farrow-pipeline": "^2.0.1",
     "farrow-schema": "^2.0.1",
     "next": "^11.1.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-refresh": "^1.1.0",
     "concurrently": "^6.0.0",
     "farrow": "^2.0.1",

examples/todo-app/package.json

@@ -16,12 +16,12 @@
     "farrow-http": "^2.2.0",
     "farrow-pipeline": "^2.2.0",
     "farrow-schema": "^2.2.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-refresh": "^1.1.0",
     "concurrently": "^6.0.0",
     "farrow": "^2.2.0",

package.json

@@ -32,26 +32,26 @@
   },
   "devDependencies": {
     "@changesets/cli": "2.26.1",
-    "@swc/core": "^1.3.55",
-    "@swc/jest": "^0.2.26",
-    "@types/jest": "^29.5.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
+    "@swc/core": "^1.6.13",
+    "@swc/jest": "^0.2.36",
+    "@types/jest": "^29.5.12",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "codecov": "^3.8.3",
-    "eslint": "^8.39.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^7.2.0",
-    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-prefer-let": "^1.1.0",
     "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.34.3",
     "husky": "^8.0.3",
-    "lint-staged": "^13.2.1",
+    "lint-staged": "^13.3.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
     "shx": "^0.3.4",
-    "typescript": "^5.0.4"
+    "typescript": "^5.5.3"
   },
   "dependencies": {
-    "@types/node": "^18.16.1"
+    "@types/node": "^18.19.39"
   }
 }

packages/create-farrow-app/templates/farrow-next-react/package.json

@@ -17,13 +17,13 @@
     "farrow-next-server": "^2.2.0",
     "farrow-schema": "^2.2.0",
     "next": "^11.1.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
   },
   "devDependencies": {
     "@types/node": "^14.14.35",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
     "farrow": "^2.2.0",
     "typescript": "^5.0.4"
   }

packages/create-farrow-app/templates/farrow-vite-react/package.json

@@ -14,13 +14,13 @@
     "farrow-http": "^2.2.0",
     "farrow-pipeline": "^2.2.0",
     "farrow-schema": "^2.2.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
   },
   "devDependencies": {
     "@types/node": "^14.14.35",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-refresh": "^1.1.0",
     "farrow": "^2.2.0",
     "farrow-vite": "^2.2.0",

packages/create-farrow-app/templates/farrow-vite-react/src/main.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
-import './index.css'
+import ReactDOM from 'react-dom/client'
 import App from './App'
+import './index.css'
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root'),
 )

packages/farrow-next-server/package.json

@@ -26,17 +26,17 @@
   "peerDependencies": {
     "farrow-http": "^2.2.0",
     "next": ">=10.0.5",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
     "farrow-http": "^2.3.0",
     "next": "^12.0.4",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "typescript": "^5.0.4"
   },
   "dependencies": {

packages/farrow-next/__tests__/next.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import { act } from 'react-dom/test-utils'
 import { Controller, page, createProvider } from '../src/index'
 
@@ -114,16 +114,18 @@ const TestPage = page({
 
 describe('farrow-next', () => {
   let container: HTMLDivElement | undefined
+  let root: ReactDOM.Root
   beforeEach(() => {
     // setup a DOM element as a render target
     container = document.createElement('div')
+    root = ReactDOM.createRoot(container)
     document.body.appendChild(container)
   })
 
   afterEach(() => {
     // cleanup on exiting
     if (container) {
-      ReactDOM.unmountComponentAtNode(container)
+      root.unmount()
       container.remove()
       container = undefined
     }
@@ -182,7 +184,7 @@ describe('farrow-next', () => {
 
     // render
     act(() => {
-      ReactDOM.render(<TestPage {...initialProps!} />, container!)
+      root.render(<TestPage {...initialProps!} />)
     })
 
     const envElem = document.getElementById('env')

packages/farrow-next/package.json

@@ -30,22 +30,22 @@
   },
   "peerDependencies": {
     "next": ">=10.0.5",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",
     "@types/cookie": "^0.4.0",
     "@types/jest": "^29.5.1",
     "@types/js-cookie": "^2.2.6",
     "@types/qs": "^6.9.5",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/redux-logger": "^3.0.7",
     "jest": "^29.5.0",
-    "next": "^11.1.2",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "next": "^14.2.4",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "ts-jest": "^29.1.0",
     "typescript": "^5.0.4"
   },

packages/farrow-next/src/controller.tsx

@@ -421,7 +421,7 @@ export type ProviderProps = {
 /**
  * Provider for injecting controllers
  */
-export const Provider: React.FC<ProviderProps> = ({ controllers, children }) => {
+export const Provider: React.FC<React.PropsWithChildren<ProviderProps>> = ({ controllers, children }) => {
   const valueRef = useRef<ControllerReactContextValue | null>(null)
 
   if (!valueRef.current) {

packages/farrow-react/package.json

@@ -32,25 +32,23 @@
   },
   "peerDependencies": {
     "farrow-http": "^2.2.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
   },
   "devDependencies": {
     "@types/jest": "^29.5.1",
-    "@types/multistream": "^2.1.1",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/supertest": "^2.0.11",
     "farrow-http": "^2.3.0",
     "jest": "^29.5.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "supertest": "^6.1.6",
     "ts-jest": "^29.1.0",
     "typescript": "^5.0.4"
   },
   "dependencies": {
-    "multistream": "^4.0.0",
     "tslib": "^2.5.0"
   }
 }

packages/farrow-react/src/react.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import ReactDOMServer from 'react-dom/server'
-import { Stream } from 'stream'
-import MultiStream from 'multistream'
+import { Stream, PassThrough } from 'stream'
 
 import * as Http from 'farrow-http'
 
@@ -23,19 +22,28 @@ export const renderToString = <T extends JSX.Element>(element: T, options?: Reac
 }
 
 export const renderToNodeStream = <T extends JSX.Element>(element: T, options?: ReactResponseOptions) => {
-  const contentStream = ReactDOMServer.renderToNodeStream(element)
-  const docType = options?.docType ?? defaultDocType
+  const passThrough = new PassThrough()
 
+  const docType = options?.docType ?? defaultDocType
   const docTypeStream = new Stream.Readable({
     read() {
       this.push(`${docType}\n`)
       this.push(null)
     },
   })
+  docTypeStream.pipe(passThrough, { end: false })
 
-  const stream = new (MultiStream as any)([docTypeStream, contentStream])
+  const { pipe } = ReactDOMServer.renderToPipeableStream(element, {
+    onShellReady() {
+      // When initial HTML is ready, pipe it to the PassThrough stream
+      pipe(passThrough)
+    },
+    onError(error) {
+      passThrough.emit('error', error)
+    },
+  })
 
-  return Response.type('html').stream(stream)
+  return Response.type('html').stream(passThrough)
 }
 
 export type ReactViewOptions = ReactResponseOptions & {