vercel · timneutkens · Apr 6, 2023 · Mar 22, 2023 · Mar 22, 2023 · Mar 22, 2023
diff --git a/packages/next/src/client/components/app-router.tsx b/packages/next/src/client/components/app-router.tsx
@@ -19,6 +19,7 @@ import type {
 import type { ErrorComponent } from './error-boundary'
 import { reducer } from './router-reducer/router-reducer'
 import {
+  ACTION_FAST_REFRESH,
   ACTION_NAVIGATE,
   ACTION_PREFETCH,
   ACTION_REFRESH,
@@ -237,6 +238,29 @@ function Router({
           })
         })
       },
+      // @ts-ignore we don't want to expose this method at all
+      fastRefresh: () => {
+        if (process.env.NODE_ENV !== 'development') {
+          throw new Error(
+            'fastRefresh can only be used in development mode. Please use refresh instead.'
+          )
+        } else {
+          // @ts-ignore startTransition exists
+          React.startTransition(() => {
+            dispatch({
+              type: ACTION_FAST_REFRESH,
+              cache: {
+                status: CacheStates.LAZY_INITIALIZED,
+                data: null,
+                subTreeData: null,
+                parallelRoutes: new Map(),
+              },
+              mutable: {},
+              origin: window.location.origin,
+            })
+          })
+        }
+      },
     }
 
     return routerInstance

diff --git a/packages/next/src/client/components/layout-router.tsx b/packages/next/src/client/components/layout-router.tsx
@@ -257,10 +257,12 @@ function InnerLayoutRouter({
     // TODO-APP: verify if this can be null based on user code
     childProp.current !== null
   ) {
-    if (childNode && childNode.status === CacheStates.LAZY_INITIALIZED) {
-      // @ts-expect-error TODO-APP: handle changing of the type
+    if (
+      childNode &&
+      (childNode.status === CacheStates.LAZY_INITIALIZED ||
+        childNode.status === CacheStates.READY)
+    ) {
       childNode.status = CacheStates.READY
-      // @ts-expect-error TODO-APP: handle changing of the type
       childNode.subTreeData = childProp.current
       // Mutates the prop in order to clean up the memory associated with the subTreeData as it is now part of the cache.
       childProp.current = null
@@ -365,7 +367,6 @@ function InnerLayoutRouter({
       {childNode.subTreeData}
     </LayoutRouterContext.Provider>
   )
-
   // Ensure root layout is not wrapped in a div as the root layout renders `<html>`
   return (
     <ScrollAndFocusHandler focusAndScrollRef={focusAndScrollRef}>

diff --git a/packages/next/src/client/components/match-segments.ts b/packages/next/src/client/components/match-segments.ts
@@ -1,3 +1,4 @@
+import { getSegmentParam } from '../../server/app-render/get-segment-param'
 import type { Segment } from '../../server/app-render/types'
 
 export const matchSegment = (
@@ -18,3 +19,17 @@ export const matchSegment = (
 
   return false
 }
+
+/*
+ * This function is used to determine if an existing segment can be overridden by the incoming segment.
+ */
+export const canSegmentBeOverridden = (
+  existingSegment: Segment,
+  segment: Segment
+): boolean => {
+  if (Array.isArray(existingSegment) || !Array.isArray(segment)) {
+    return false
+  }
+
+  return getSegmentParam(existingSegment)?.param === segment[0]
+}
diff --git a/packages/next/src/client/components/parallel-route-default.tsx b/packages/next/src/client/components/parallel-route-default.tsx
@@ -1,3 +1,5 @@
+import { notFound } from './not-found'
+
 export default function NoopParallelRouteDefault() {
-  return null
+  notFound()
 }
diff --git a/packages/next/src/client/components/react-dev-overlay/hot-reloader-client.tsx b/packages/next/src/client/components/react-dev-overlay/hot-reloader-client.tsx
@@ -354,7 +354,8 @@ function processMessage(
         return window.location.reload()
       }
       startTransition(() => {
-        router.refresh()
+        // @ts-ignore it exists, it's just hidden
+        router.fastRefresh()
         dispatcher.onRefresh()
       })
 
@@ -378,20 +379,23 @@ function processMessage(
     }
     case 'removedPage': {
       // TODO-APP: potentially only refresh if the currently viewed page was removed.
-      router.refresh()
+      // @ts-ignore it exists, it's just hidden
+      router.fastRefresh()
       return
     }
     case 'addedPage': {
       // TODO-APP: potentially only refresh if the currently viewed page was added.
-      router.refresh()
+      // @ts-ignore it exists, it's just hidden
+      router.fastRefresh()
       return
     }
     case 'pong': {
       const { invalid } = obj
       if (invalid) {
         // Payload can be invalid even if the page does exist.
         // So, we check if it can be created.
-        router.refresh()
+        // @ts-ignore it exists, it's just hidden
+        router.fastRefresh()
       }
       return
     }

diff --git a/packages/next/src/client/components/router-reducer/apply-router-state-patch-to-tree.ts b/packages/next/src/client/components/router-reducer/apply-router-state-patch-to-tree.ts
@@ -16,7 +16,7 @@ function applyPatch(
 
   // if the applied patch segment is __DEFAULT__ then we can ignore it and return the initial tree
   // this is because the __DEFAULT__ segment is used as a placeholder on navigation
-  if (patchSegment === '__DEFAULT__') {
+  if (patchSegment === '__DEFAULT__' && initialSegment !== '__DEFAULT__') {
     return initialTree
   }
 

diff --git a/packages/next/src/client/components/router-reducer/fill-lazy-items-till-leaf-with-head.ts b/packages/next/src/client/components/router-reducer/fill-lazy-items-till-leaf-with-head.ts
@@ -22,6 +22,9 @@ export function fillLazyItemsTillLeafWithHead(
       : segmentForParallelRoute
 
     if (existingCache) {
+      if (cacheKey === '__DEFAULT__') {
+        continue
+      }
       const existingParallelRoutesCacheNode =
         existingCache.parallelRoutes.get(key)
       if (existingParallelRoutesCacheNode) {
@@ -46,7 +49,7 @@ export function fillLazyItemsTillLeafWithHead(
         // Traverse deeper to apply the head / fill lazy items till the head.
         fillLazyItemsTillLeafWithHead(
           newCacheNode,
-          wasPrefetched ? existingCacheNode : undefined,
+          existingCacheNode,
           parallelRouteState,
           head,
           wasPrefetched

diff --git a/packages/next/src/client/components/router-reducer/reducers/fast-refresh-reducer.ts b/packages/next/src/client/components/router-reducer/reducers/fast-refresh-reducer.ts
@@ -0,0 +1,115 @@
+import { fetchServerResponse } from '../fetch-server-response'
+import { createRecordFromThenable } from '../create-record-from-thenable'
+import { readRecordValue } from '../read-record-value'
+import { createHrefFromUrl } from '../create-href-from-url'
+import { applyRouterStatePatchToTree } from '../apply-router-state-patch-to-tree'
+import { isNavigatingToNewRootLayout } from '../is-navigating-to-new-root-layout'
+import {
+  ReadonlyReducerState,
+  ReducerState,
+  FastRefreshAction,
+} from '../router-reducer-types'
+import { handleExternalUrl } from './navigate-reducer'
+import { handleMutable } from '../handle-mutable'
+import { applyFlightData } from '../apply-flight-data'
+
+// A version of refresh reducer that keeps the cache around instead of wiping all of it.
+function fastRefreshReducerImpl(
+  state: ReadonlyReducerState,
+  action: FastRefreshAction
+): ReducerState {
+  const { cache, mutable, origin } = action
+  const href = state.canonicalUrl
+
+  const isForCurrentTree =
+    JSON.stringify(mutable.previousTree) === JSON.stringify(state.tree)
+
+  if (isForCurrentTree) {
+    return handleMutable(state, mutable)
+  }
+
+  if (!cache.data) {
+    // TODO-APP: verify that `href` is not an external url.
+    // Fetch data from the root of the tree.
+    cache.data = createRecordFromThenable(
+      fetchServerResponse(new URL(href, origin), [
+        state.tree[0],
+        state.tree[1],
+        state.tree[2],
+        'refetch',
+      ])
+    )
+  }
+  const [flightData, canonicalUrlOverride] = readRecordValue(cache.data!)
+
+  // Handle case when navigating to page in `pages` from `app`
+  if (typeof flightData === 'string') {
+    return handleExternalUrl(
+      state,
+      mutable,
+      flightData,
+      state.pushRef.pendingPush
+    )
+  }
+
+  // Remove cache.data as it has been resolved at this point.
+  cache.data = null
+
+  // TODO-APP: Currently the Flight data can only have one item but in the future it can have multiple paths.
+  const flightDataPath = flightData[0]
+
+  // FlightDataPath with more than two items means unexpected Flight data was returned
+  if (flightDataPath.length !== 3) {
+    // TODO-APP: handle this case better
+    console.log('REFRESH FAILED')
+    return state
+  }
+
+  // Given the path can only have two items the items are only the router state and subTreeData for the root.
+  const [treePatch] = flightDataPath
+  const newTree = applyRouterStatePatchToTree(
+    // TODO-APP: remove ''
+    [''],
+    state.tree,
+    treePatch
+  )
+
+  if (newTree === null) {
+    throw new Error('SEGMENT MISMATCH')
+  }
+
+  if (isNavigatingToNewRootLayout(state.tree, newTree)) {
+    return handleExternalUrl(state, mutable, href, state.pushRef.pendingPush)
+  }
+
+  const canonicalUrlOverrideHref = canonicalUrlOverride
+    ? createHrefFromUrl(canonicalUrlOverride)
+    : undefined
+
+  if (canonicalUrlOverride) {
+    mutable.canonicalUrl = canonicalUrlOverrideHref
+  }
+  const applied = applyFlightData(state, cache, flightDataPath)
+
+  if (applied) {
+    mutable.cache = cache
+  }
+
+  mutable.previousTree = state.tree
+  mutable.patchedTree = newTree
+  mutable.canonicalUrl = href
+
+  return handleMutable(state, mutable)
+}
+
+function fastRefreshReducerNoop(
+  state: ReadonlyReducerState,
+  _action: FastRefreshAction
+): ReducerState {
+  return state
+}
+
+export const fastRefreshReducer =
+  process.env.NODE_ENV === 'production'
+    ? fastRefreshReducerNoop
+    : fastRefreshReducerImpl
diff --git a/packages/next/src/client/components/router-reducer/router-reducer-types.ts b/packages/next/src/client/components/router-reducer/router-reducer-types.ts
@@ -10,6 +10,7 @@ export const ACTION_NAVIGATE = 'navigate'
 export const ACTION_RESTORE = 'restore'
 export const ACTION_SERVER_PATCH = 'server-patch'
 export const ACTION_PREFETCH = 'prefetch'
+export const ACTION_FAST_REFRESH = 'fast-refresh'
 
 export interface Mutable {
   mpaNavigation?: boolean
@@ -35,6 +36,13 @@ export interface RefreshAction {
   origin: Location['origin']
 }
 
+export interface FastRefreshAction {
+  type: typeof ACTION_FAST_REFRESH
+  cache: CacheNode
+  mutable: Mutable
+  origin: Location['origin']
+}
+
 /**
  * Navigate triggers a navigation to the provided url. It supports two types: `push` and `replace`.
  *
@@ -190,4 +198,5 @@ export type ReducerActions = Readonly<
   | RestoreAction
   | ServerPatchAction
   | PrefetchAction
+  | FastRefreshAction
 >
diff --git a/packages/next/src/client/components/router-reducer/router-reducer.ts b/packages/next/src/client/components/router-reducer/router-reducer.ts
@@ -7,12 +7,14 @@ import {
   ReducerActions,
   ReducerState,
   ReadonlyReducerState,
+  ACTION_FAST_REFRESH,
 } from './router-reducer-types'
 import { navigateReducer } from './reducers/navigate-reducer'
 import { serverPatchReducer } from './reducers/server-patch-reducer'
 import { restoreReducer } from './reducers/restore-reducer'
 import { refreshReducer } from './reducers/refresh-reducer'
 import { prefetchReducer } from './reducers/prefetch-reducer'
+import { fastRefreshReducer } from './reducers/fast-refresh-reducer'
 
 /**
  * Reducer that handles the app-router state updates.
@@ -34,6 +36,9 @@ function clientReducer(
     case ACTION_REFRESH: {
       return refreshReducer(state, action)
     }
+    case ACTION_FAST_REFRESH: {
+      return fastRefreshReducer(state, action)
+    }
     case ACTION_PREFETCH: {
       return prefetchReducer(state, action)
     }