From 5d0bd314c1794d2208265baf4e891724272a7b0f Mon Sep 17 00:00:00 2001 From: Andrew Clark Date: Wed, 11 Dec 2024 17:32:30 -0500 Subject: [PATCH] Remove unused Activity-related code We probably will experiment with Activity soon but since it's not currently being used, this removes the unused code from LayoutRouter. --- .../src/client/components/layout-router.tsx | 125 ++++++++---------- .../app-dir/dynamic-error-trace/index.test.ts | 11 +- 2 files changed, 57 insertions(+), 79 deletions(-) diff --git a/packages/next/src/client/components/layout-router.tsx b/packages/next/src/client/components/layout-router.tsx index a8ee010ccd27e..d2ecca2be5ccf 100644 --- a/packages/next/src/client/components/layout-router.tsx +++ b/packages/next/src/client/components/layout-router.tsx @@ -8,7 +8,6 @@ import type { import type { FlightRouterState, FlightSegmentPath, - Segment, } from '../../server/app-render/types' import type { ErrorComponent } from './error-boundary' import type { FocusAndScrollRef } from './router-reducer/router-reducer-types' @@ -34,7 +33,6 @@ import { matchSegment } from './match-segments' import { handleSmoothScroll } from '../../shared/lib/router/utils/handle-smooth-scroll' import { RedirectBoundary } from './redirect-boundary' import { HTTPAccessFallbackBoundary } from './http-access-fallback/error-boundary' -import { getSegmentValue } from './router-reducer/reducers/get-segment-value' import { createRouterCacheKey } from './router-reducer/create-router-cache-key' import { hasInterceptionRouteInCurrentTree } from './router-reducer/reducers/has-interception-route-in-current-tree' @@ -321,8 +319,6 @@ function InnerLayoutRouter({ childNodes, segmentPath, tree, - // TODO-APP: implement `` when available. - // isActive, cacheKey, }: { parallelRouterKey: string @@ -330,7 +326,6 @@ function InnerLayoutRouter({ childNodes: ChildSegmentMap segmentPath: FlightSegmentPath tree: FlightRouterState - isActive: boolean cacheKey: ReturnType }) { const context = useContext(GlobalLayoutRouterContext) @@ -548,71 +543,63 @@ export default function OuterLayoutRouter({ // The reason arrays are used in the data format is that these are transferred from the server to the browser so it's optimized to save bytes. const treeSegment = tree[1][parallelRouterKey][0] - // If segment is an array it's a dynamic route and we want to read the dynamic route value as the segment to get from the cache. - const currentChildSegmentValue = getSegmentValue(treeSegment) - - /** - * Decides which segments to keep rendering, all segments that are not active will be wrapped in ``. - */ - // TODO-APP: Add handling of `` when it's available. - const preservedSegments: Segment[] = [treeSegment] - + // The "state" key of a segment is the one passed to React — it represents the + // identity of the UI tree. Whenever the state key changes, the tree is + // recreated and the state is reset. In the App Router model, search params do + // not cause state to be lost, so two segments with the same segment path but + // different search params should have the same state key. + // + // The "cache" key of a segment, however, *does* include the search params, if + // it's possible that the segment accessed the search params on the server. + // (This only applies to page segments; layout segments cannot access search + // params on the server.) + const cacheKey = createRouterCacheKey(treeSegment) + const stateKey = createRouterCacheKey(treeSegment, true) // no search params + + /* + - Error boundary + - Only renders error boundary if error component is provided. + - Rendered for each segment to ensure they have their own error state. + - Loading boundary + - Only renders suspense boundary if loading components is provided. + - Rendered for each segment to ensure they have their own loading state. + - Passed to the router during rendering to ensure it can be immediately rendered when suspending on a Flight fetch. + */ return ( - <> - {preservedSegments.map((preservedSegment) => { - const preservedSegmentValue = getSegmentValue(preservedSegment) - const cacheKey = createRouterCacheKey(preservedSegment) - - return ( - /* - - Error boundary - - Only renders error boundary if error component is provided. - - Rendered for each segment to ensure they have their own error state. - - Loading boundary - - Only renders suspense boundary if loading components is provided. - - Rendered for each segment to ensure they have their own loading state. - - Passed to the router during rendering to ensure it can be immediately rendered when suspending on a Flight fetch. - */ - - - - - - - - - - - - } + + - {templateStyles} - {templateScripts} - {template} - - ) - })} - + + + + + + + + + + } + > + {templateStyles} + {templateScripts} + {template} + ) } diff --git a/test/development/app-dir/dynamic-error-trace/index.test.ts b/test/development/app-dir/dynamic-error-trace/index.test.ts index 87908d110daa4..68f37d62dadfc 100644 --- a/test/development/app-dir/dynamic-error-trace/index.test.ts +++ b/test/development/app-dir/dynamic-error-trace/index.test.ts @@ -2,8 +2,6 @@ import { nextTestSetup } from 'e2e-utils' import { assertHasRedbox, getRedboxSource } from 'next-test-utils' import { outdent } from 'outdent' -const isReactExperimental = process.env.__NEXT_EXPERIMENTAL_PPR === 'true' - function normalizeStackTrace(trace) { return trace.replace(/ \(.*\)/g, '') } @@ -37,14 +35,7 @@ describe('app dir - dynamic error trace', () => { // TODO: Show useful stack const normalizedStack = normalizeStackTrace(stackFramesContent) - if (isReactExperimental) { - expect(normalizedStack).toMatchInlineSnapshot(` - "Array.map - " - `) - } else { - expect(normalizedStack).toMatchInlineSnapshot(`""`) - } + expect(normalizedStack).toMatchInlineSnapshot(`""`) const codeframe = await getRedboxSource(browser) expect(codeframe).toEqual(