Merge branch 'canary' into feedthejim/dev-server-restart

.vscode/extensions.json

@@ -0,0 +1,24 @@
+{
+  "recommendations": [
+    // Linting / Formatting
+    "rust-lang.rust-analyzer",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "usernamehw.errorlens",
+
+    // Testing
+    "orta.vscode-jest",
+
+    // PR management / Reviewing
+    "github.vscode-pull-request-github",
+
+    // Showing todo comments
+    "gruntfuggly.todo-tree",
+
+    // Collaborating
+    "ms-vsliveshare.vsliveshare",
+
+    // Debugging
+    "ms-vscode.vscode-js-profile-flame"
+  ]
+}

.vscode/settings.json

@@ -1,15 +1,54 @@
 {
+  // Formatting using Prettier by default for all languages
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  // Formatting using Prettier for JavaScript, overrides VSCode default.
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  // Formatting using Rust-Analyzer for Rust.
+  "[rust]": {
+    "editor.defaultFormatter": "rust-lang.rust-analyzer"
+  },
+  // Linting using ESLint.
   "eslint.validate": [
     "javascript",
     "javascriptreact",
-    { "language": "typescript", "autoFix": true },
-    { "language": "typescriptreact", "autoFix": true }
+    "typescript",
+    "typescriptreact"
   ],
-  "debug.javascript.unmapMissingSources": true,
+  // Disable Jest autoRun as otherwise it will start running all tests the first time.
   "jest.autoRun": "off",
+
+  // Debugging.
+  "debug.javascript.unmapMissingSources": true,
+
   "files.exclude": {
     "**/node_modules": false,
     "node_modules": true,
     "*[!test]**/node_modules": true
-  }
+  },
+
+  // Ensure enough terminal history is preserved when running tests.
+  "terminal.integrated.scrollback": 10000,
+
+  // Configure todo-tree to exclude node_modules, dist, and compiled.
+  "todo-tree.filtering.excludeGlobs": [
+    "**/node_modules",
+    "**/dist",
+    "**/compiled"
+  ],
+  // Match TODO-APP in addition to other TODOs.
+  "todo-tree.general.tags": [
+    "BUG",
+    "HACK",
+    "FIXME",
+    "TODO",
+    "XXX",
+    "[ ]",
+    "[x]",
+    "TODO-APP"
+  ],
+
+  // Disable TypeScript surveys.
+  "typescript.surveys.enabled": false
 }

packages/next/client/components/bailout-to-client-rendering.ts

@@ -0,0 +1,19 @@
+import { suspense } from '../../shared/lib/dynamic-no-ssr'
+import { staticGenerationAsyncStorage } from './static-generation-async-storage'
+
+export function bailoutToClientRendering(): boolean | never {
+  const staticGenerationStore =
+    staticGenerationAsyncStorage && 'getStore' in staticGenerationAsyncStorage
+      ? staticGenerationAsyncStorage?.getStore()
+      : staticGenerationAsyncStorage
+
+  if (staticGenerationStore?.forceStatic) {
+    return true
+  }
+
+  if (staticGenerationStore?.isStaticGeneration) {
+    suspense()
+  }
+
+  return false
+}

packages/next/client/components/navigation.ts

@@ -12,7 +12,7 @@ import {
   PathnameContext,
   // LayoutSegmentsContext,
 } from '../../shared/lib/hooks-client-context'
-import { staticGenerationBailout } from './static-generation-bailout'
+import { bailoutToClientRendering } from './bailout-to-client-rendering'
 
 const INTERNAL_URLSEARCHPARAMS_INSTANCE = Symbol(
   'internal for urlsearchparams readonly'
@@ -76,7 +76,8 @@ export function useSearchParams() {
     return new ReadonlyURLSearchParams(searchParams || new URLSearchParams())
   }, [searchParams])
 
-  if (staticGenerationBailout('useSearchParams')) {
+  if (bailoutToClientRendering()) {
+    // TODO-APP: handle dynamic = 'force-static' here and on the client
     return readonlySearchParams
   }
 

packages/next/client/components/react-dev-overlay/hot-reloader-client.tsx

@@ -348,6 +348,13 @@ function processMessage(
         dispatcher.onRefresh()
       })
 
+      if (process.env.__NEXT_TEST_MODE) {
+        if (self.__NEXT_HMR_CB) {
+          self.__NEXT_HMR_CB()
+          self.__NEXT_HMR_CB = null
+        }
+      }
+
       return
     }
     case 'reloadPage': {

packages/next/client/components/react-dev-overlay/internal/ReactDevOverlay.tsx

@@ -75,10 +75,10 @@ class ReactDevOverlay extends React.PureComponent<
               />
             ) : hasBuildError ? (
               <BuildError message={state.buildError!} />
-            ) : hasRuntimeErrors ? (
-              <Errors initialDisplayState="minimized" errors={state.errors} />
             ) : reactError ? (
               <Errors initialDisplayState="fullscreen" errors={[reactError]} />
+            ) : hasRuntimeErrors ? (
+              <Errors initialDisplayState="minimized" errors={state.errors} />
             ) : undefined}
           </ShadowPortal>
         ) : undefined}

packages/next/client/components/static-generation-bailout.ts

@@ -1,7 +1,7 @@
 import { DynamicServerError } from './hooks-server-context'
 import { staticGenerationAsyncStorage } from './static-generation-async-storage'
 
-export function staticGenerationBailout(reason: string) {
+export function staticGenerationBailout(reason: string): boolean | never {
   const staticGenerationStore =
     staticGenerationAsyncStorage && 'getStore' in staticGenerationAsyncStorage
       ? staticGenerationAsyncStorage?.getStore()
@@ -17,4 +17,6 @@ export function staticGenerationBailout(reason: string) {
     }
     throw new DynamicServerError(reason)
   }
+
+  return false
 }

test/development/acceptance-app/ReactRefreshLogBox.test.ts

@@ -1221,4 +1221,52 @@ describe('ReactRefreshLogBox app', () => {
 
     await cleanup()
   })
+
+  test('Server component errors should open up in fullscreen', async () => {
+    const { session, browser, cleanup } = await sandbox(
+      next,
+      new Map([
+        // Start with error
+        [
+          'app/page.js',
+          `
+        export default function Page() {
+          throw new Error('Server component error')
+          return <p id="text">Hello world</p>
+        }
+        `,
+        ],
+      ])
+    )
+    expect(await session.hasRedbox(true)).toBe(true)
+
+    // Remove error
+    await session.patch(
+      'app/page.js',
+      `
+      export default function Page() {
+        return <p id="text">Hello world</p>
+      }
+      `
+    )
+    expect(await browser.waitForElementByCss('#text').text()).toBe(
+      'Hello world'
+    )
+    expect(await session.hasRedbox()).toBe(false)
+
+    // Re-add error
+    await session.patch(
+      'app/page.js',
+      `
+      export default function Page() {
+        throw new Error('Server component error!')
+        return <p id="text">Hello world</p>
+      }
+      `
+    )
+
+    expect(await session.hasRedbox(true)).toBe(true)
+
+    await cleanup()
+  })
 })