Refactor hot-reloader client for app

packages/next/client/app-index.tsx

@@ -8,7 +8,8 @@ import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-we
 
 import measureWebVitals from './performance-relayer'
 import { HeadManagerContext } from '../shared/lib/head-manager-context'
-import HotReload from './components/react-dev-overlay/hot-reloader'
+import HotReload from './components/react-dev-overlay/hot-reloader-client'
+import { GlobalLayoutRouterContext } from '../shared/lib/app-router-context'
 
 /// <reference types="react-dom/experimental" />
 
@@ -186,15 +187,24 @@ export function hydrate() {
       const reactRoot = (ReactDOMClient as any).createRoot(reactRootElement)
 
       reactRoot.render(
-        <HotReload
-          assetPrefix={rootLayoutMissingTagsError.assetPrefix}
-          initialState={{
-            rootLayoutMissingTagsError: {
-              missingTags: rootLayoutMissingTagsError.missingTags,
+        <GlobalLayoutRouterContext.Provider
+          value={{
+            tree: rootLayoutMissingTagsError.tree,
+            changeByServerResponse: () => {},
+            focusAndScrollRef: {
+              apply: false,
             },
           }}
-          initialTree={rootLayoutMissingTagsError.tree}
-        />
+        >
+          <HotReload
+            assetPrefix={rootLayoutMissingTagsError.assetPrefix}
+            // initialState={{
+            //   rootLayoutMissingTagsError: {
+            //     missingTags: rootLayoutMissingTagsError.missingTags,
+            //   },
+            // }}
+          />
+        </GlobalLayoutRouterContext.Provider>
       )
 
       return

packages/next/client/components/app-router.tsx

@@ -37,12 +37,12 @@ function urlToUrlWithoutFlightMarker(url: string): URL {
 }
 
 const HotReloader:
-  | typeof import('./react-dev-overlay/hot-reloader').default
+  | typeof import('./react-dev-overlay/hot-reloader-client').default
   | null =
   process.env.NODE_ENV === 'production'
     ? null
-    : (require('./react-dev-overlay/hot-reloader')
-        .default as typeof import('./react-dev-overlay/hot-reloader').default)
+    : (require('./react-dev-overlay/hot-reloader-client')
+        .default as typeof import('./react-dev-overlay/hot-reloader-client').default)
 
 /**
  * Fetch the flight data for the provided url. Takes in the current router state to decide what to render server-side.