Merge branch 'main' into fix-react-prop-typo

Author: Lucas Castro

.swcrc

@@ -0,0 +1,18 @@
+{
+  "env": {
+    "targets": {
+      "node": 16
+    }
+  },
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "decorators": true,
+      "dynamicImport": true
+    },
+    "target": "es2020"
+  },
+  "module": {
+    "type": "commonjs"
+  }
+}

jest.config.js

@@ -1,7 +1,3 @@
 module.exports = {
-  preset: 'ts-jest',
-  testTimeout: process.env.CI ? 30000 : 10000,
-  globalSetup: './scripts/jestGlobalSetup.js',
-  globalTeardown: './scripts/jestGlobalTeardown.js',
-  testEnvironment: './scripts/jestEnv.js',
+  projects: ['<rootDir>/packages/fastify-renderer', '<rootDir>/packages/test-apps/simple-react'],
 }

package.json

@@ -48,7 +48,7 @@
   "devDependencies": {
     "cross-env": "^7.0.3",
     "fs-extra": "^10.1.0",
-    "playwright-chromium": "^1.21.0",
+    "playwright-chromium": "^1.25.0",
     "wds": "^0.12.0"
   }
 }

packages/fastify-renderer/jest.config.js

@@ -93,7 +93,7 @@ module.exports = {
   // notifyMode: "failure-change",
 
   // A preset that is used as a base for Jest's configuration
-  preset: 'ts-jest',
+  // preset: 'ts-jest',
 
   // Run tests from one or more projects
   // projects: undefined,
@@ -172,7 +172,9 @@ module.exports = {
   // timers: "real",
 
   // A map from regular expressions to paths to transformers
-  // transform: undefined,
+  transform: {
+    '^.+\\.(t|j)sx?$': '@swc/jest',
+  },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
   // transformIgnorePatterns: [

packages/fastify-renderer/package.json

@@ -57,52 +57,53 @@
     "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.13",
+    "vite": "^2.9.15",
     "wouter": "^2.7.5"
   },
   "peerDependencies": {
-    "fastify": "^3.13.0",
+    "fastify": "^4.2.0",
     "react": "experimental",
     "react-dom": "experimental"
   },
   "devDependencies": {
+    "@swc/core": "^1.3.9",
+    "@swc/jest": "^0.2.22",
     "@types/connect": "^3.4.35",
     "@types/jest": "^26.0.24",
     "@types/node": "^14.17.20",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.11",
     "@types/sanitize-filename": "^1.6.3",
-    "@typescript-eslint/eslint-plugin": "^5.30.0",
-    "@typescript-eslint/parser": "^5.30.0",
+    "@typescript-eslint/eslint-plugin": "^5.40.0",
+    "@typescript-eslint/parser": "^5.40.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react": "^7.31.7",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "fastify": "^3.29.0",
+    "fastify": "^4.2.0",
     "gitpkg": "^1.0.0-beta.2",
-    "jest": "^27.5.1",
+    "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",
     "react-dom": "0.0.0-experimental-4ead6b530",
     "rimraf": "^3.0.2",
-    "ts-jest": "^27.1.4",
-    "typescript": "^4.6.3"
+    "typescript": "^4.7.4"
   },
   "files": [
     "client",

packages/fastify-renderer/src/client/react/Root.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
-import { Route, Router, Switch, useLocation } from 'wouter'
+import { Route, Router, Switch, useLocation, useRouter } from 'wouter'
 import { usePromise } from './fetcher'
-import { useNavigationDetails, useTransitionLocation } from './locationHook'
+import { shouldScrollToHash, useNavigationDetails, useTransitionLocation } from './locationHook'
 import { matcher } from './matcher'
 
 export interface LayoutProps {
@@ -47,6 +47,7 @@ export function Root<BootProps>(props: {
       <Route path={route} key={route}>
         {(params) => {
           const [location] = useLocation()
+          const router = useRouter()
           const backendPath = location.split('#')[0] // remove current anchor for fetching data from the server side
 
           const payload = usePromise<{ props: Record<string, any> }>(props.basePath + backendPath, async () => {
@@ -65,9 +66,11 @@ export function Root<BootProps>(props: {
             }
           })
 
-          // navigate to the anchor in the url after rendering
+          // Navigate to the anchor in the url after rendering, unless we're using replaceState and
+          // the destination page and previous page have the same base route (i.e. before '#')
+          // We would do this for example to update the url to the correct anchor as the user scrolls.
           useEffect(() => {
-            if (window.location.hash) {
+            if (window.location.hash && shouldScrollToHash(router.navigationHistory)) {
               document.getElementById(window.location.hash.slice(1))?.scrollIntoView()
             }
           }, [location])

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

@@ -1,5 +1,5 @@
 import { unstable_useTransition as useTransition, useCallback, useEffect, useRef, useState } from 'react'
-import { useLocation } from 'wouter'
+import { NavigationHistory, useLocation, useRouter } from 'wouter'
 
 /**
  * History API docs @see https://developer.mozilla.org/en-US/docs/Web/API/History
@@ -20,6 +20,16 @@ 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 router = useRouter()
+  useEffect(() => {
+    if (!router.navigationHistory)
+      router.navigationHistory = {
+        current: {
+          path,
+          replace: false,
+        },
+      }
+  }, [])
 
   useEffect(() => {
     // this function checks if the location has been changed since the
@@ -31,9 +41,13 @@ export const useTransitionLocation = ({ base = '' } = {}) => {
 
       if (prevLocation.current !== destination) {
         prevLocation.current = destination
-        startTransition(() => {
+        if (shouldScrollToHash(router.navigationHistory)) {
+          startTransition(() => {
+            update(destination)
+          })
+        } else {
           update(destination)
-        })
+        }
       }
     }
 
@@ -61,11 +75,23 @@ export const useTransitionLocation = ({ base = '' } = {}) => {
         return
       }
 
+      const path = base + to
+
+      if (!router.navigationHistory) router.navigationHistory = {}
+      if (router.navigationHistory?.current) {
+        router.navigationHistory.previous = { ...router.navigationHistory.current }
+      }
+
+      router.navigationHistory.current = {
+        path,
+        replace,
+      }
+
       history[replace ? eventReplaceState : eventPushState](
         null,
         '',
         // handle nested routers and absolute paths
-        base + to
+        path
       )
     },
     [base]
@@ -105,3 +131,16 @@ export const useNavigationDetails = (): [boolean, string] => {
 
 const currentPathname = (base, path = location.pathname + location.search + location.hash) =>
   !path.toLowerCase().indexOf(base.toLowerCase()) ? path.slice(base.length) || '/' : '~' + path
+
+export const navigatingOnSamePage = (history?: NavigationHistory): boolean => {
+  const { current, previous } = history || {}
+
+  if (!history) return false
+  if (!current || !previous) return false
+
+  return current.path.split('#')[0] == previous.path.split('#')[0]
+}
+
+export const shouldScrollToHash = (history?: NavigationHistory): boolean => {
+  return !(navigatingOnSamePage(history) && history?.current?.replace)
+}

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

@@ -0,0 +1,17 @@
+import 'wouter'
+
+declare module 'wouter' {
+  export interface RouterProps {
+    navigationHistory?: NavigationHistory
+  }
+
+  export interface NavigationHistory {
+    current?: NavigationHistoryItem
+    previous?: NavigationHistoryItem
+  }
+
+  export interface NavigationHistoryItem {
+    path: string
+    replace: boolean
+  }
+}

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'],
   }
 )