Handle hmr for edge ssr in app dir (vercel#41156)

Include the edge server changes that starting in app dir into server components changes. Most changes are merging condition `isAppPath && this.appDir` into `isAppPath`.

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

packages/next/server/dev/hot-reloader.ts

@@ -612,22 +612,21 @@ export default class HotReloader {
               onEdgeServer: () => {
                 // TODO-APP: verify if child entry should support.
                 if (!isEdgeServerCompilation || !isEntry) return
-                const appDirLoader =
-                  isAppPath && this.appDir
-                    ? getAppEntry({
-                        name: bundlePath,
-                        appPaths: entryData.appPaths,
-                        pagePath: posix.join(
-                          APP_DIR_ALIAS,
-                          relative(
-                            this.appDir!,
-                            entryData.absolutePagePath
-                          ).replace(/\\/g, '/')
-                        ),
-                        appDir: this.appDir!,
-                        pageExtensions: this.config.pageExtensions,
-                      }).import
-                    : undefined
+                const appDirLoader = isAppPath
+                  ? getAppEntry({
+                      name: bundlePath,
+                      appPaths: entryData.appPaths,
+                      pagePath: posix.join(
+                        APP_DIR_ALIAS,
+                        relative(
+                          this.appDir!,
+                          entryData.absolutePagePath
+                        ).replace(/\\/g, '/')
+                      ),
+                      appDir: this.appDir!,
+                      pageExtensions: this.config.pageExtensions,
+                    }).import
+                  : undefined
 
                 entries[entryKey].status = BUILDING
                 entrypoints[bundlePath] = finalizeEntrypoint({
@@ -688,25 +687,24 @@ export default class HotReloader {
                 }
 
                 entrypoints[bundlePath] = finalizeEntrypoint({
-                  compilerType: 'server',
+                  compilerType: COMPILER_NAMES.server,
                   name: bundlePath,
                   isServerComponent,
-                  value:
-                    this.appDir && bundlePath.startsWith('app/')
-                      ? getAppEntry({
-                          name: bundlePath,
-                          appPaths: entryData.appPaths,
-                          pagePath: posix.join(
-                            APP_DIR_ALIAS,
-                            relative(
-                              this.appDir!,
-                              entryData.absolutePagePath
-                            ).replace(/\\/g, '/')
-                          ),
-                          appDir: this.appDir!,
-                          pageExtensions: this.config.pageExtensions,
-                        })
-                      : relativeRequest,
+                  value: isAppPath
+                    ? getAppEntry({
+                        name: bundlePath,
+                        appPaths: entryData.appPaths,
+                        pagePath: posix.join(
+                          APP_DIR_ALIAS,
+                          relative(
+                            this.appDir!,
+                            entryData.absolutePagePath
+                          ).replace(/\\/g, '/')
+                        ),
+                        appDir: this.appDir!,
+                        pageExtensions: this.config.pageExtensions,
+                      })
+                    : relativeRequest,
                   appDir: this.config.experimental.appDir,
                 })
               },
@@ -895,7 +893,12 @@ export default class HotReloader {
         changedServerPages,
         changedClientPages
       )
+      const edgeServerOnlyChanges = difference<string>(
+        changedEdgeServerPages,
+        changedClientPages
+      )
       const serverComponentChanges = serverOnlyChanges
+        .concat(edgeServerOnlyChanges)
         .filter((key) => key.startsWith('app/'))
         .concat(Array.from(changedCSSImportPages))
       const pageChanges = serverOnlyChanges.filter((key) =>

test/e2e/app-dir/app-edge.test.ts

@@ -1,6 +1,6 @@
 import { createNext, FileRef } from 'e2e-utils'
 import { NextInstance } from 'test/lib/next-modes/base'
-import { renderViaHTTP } from 'next-test-utils'
+import { check, renderViaHTTP } from 'next-test-utils'
 import path from 'path'
 
 describe('app-dir edge SSR', () => {
@@ -37,4 +37,26 @@ describe('app-dir edge SSR', () => {
     const pageHtml = await renderViaHTTP(next.url, '/pages-edge')
     expect(pageHtml).toContain('<p>pages-edge-ssr</p>')
   })
+
+  if ((globalThis as any).isNextDev) {
+    it('should handle edge rsc hmr', async () => {
+      const pageFile = 'app/app-edge/page.tsx'
+      const content = await next.readFile(pageFile)
+
+      // Update rendered content
+      const updatedContent = content.replace('app-edge-ssr', 'edge-hmr')
+      await next.patchFile(pageFile, updatedContent)
+      await check(async () => {
+        const html = await renderViaHTTP(next.url, '/app-edge')
+        return html
+      }, /edge-hmr/)
+
+      // Revert
+      await next.patchFile(pageFile, content)
+      await check(async () => {
+        const html = await renderViaHTTP(next.url, '/app-edge')
+        return html
+      }, /app-edge-ssr/)
+    })
+  }
 })

test/e2e/app-dir/app-edge/app/app-edge/layout.tsx

@@ -1,5 +1,7 @@
 'client'
 
+// TODO-APP: support typing for useSelectedLayoutSegment
+// @ts-ignore
 import { useSelectedLayoutSegment } from 'next/dist/client/components/hooks-client'
 
 export default function Layout({ children }: { children: React.ReactNode }) {