Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix applyFocusAndScroll with server patch #45782

Merged
merged 3 commits into from
Feb 10, 2023
Merged

Fix applyFocusAndScroll with server patch #45782

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
41b6564
Fix applyFocusAndScroll with server patch
timneutkens Feb 10, 2023
46eb019
Merge branch 'canary' into fix/server-patch-applyscroll
jankaifer Feb 10, 2023
6cfb42a
Merge branch 'canary' into fix/server-patch-applyscroll
kodiakhq[bot] Feb 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
271 changes: 256 additions & 15 deletions packages/next/src/client/components/router-reducer/reducers/server-patch-reducer.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,69 @@
import React from 'react'
import { FlightData, FlightRouterState } from '../../../../server/app-render'
import type { fetchServerResponse as fetchServerResponseType } from '../fetch-server-response'
import type {
FlightData,
FlightRouterState,
} from '../../../../server/app-render'
jest.mock('../fetch-server-response', () => {
const flightData: FlightData = [
[
'children',
'linking',
'children',
'about',
[
'about',
{
children: ['', {}],
},
],
<h1>About Page!</h1>,
<>
<title>About page!</title>
</>,
],
]
return {
fetchServerResponse: (
url: URL
): ReturnType<typeof fetchServerResponseType> => {
if (url.pathname === '/linking/about') {
return Promise.resolve([flightData, undefined])
}

throw new Error('unknown url in mock')
},
}
})
import {
CacheNode,
CacheStates,
} from '../../../../shared/lib/app-router-context'
import { createInitialRouterState } from '../create-initial-router-state'
import { ServerPatchAction, ACTION_SERVER_PATCH } from '../router-reducer-types'
import {
ServerPatchAction,
ACTION_SERVER_PATCH,
NavigateAction,
ACTION_NAVIGATE,
} from '../router-reducer-types'
import { navigateReducer } from './navigate-reducer'
import { serverPatchReducer } from './server-patch-reducer'

const flightData: FlightData = [
const flightDataForPatch: FlightData = [
[
'children',
'linking',
'children',
'about',
'somewhere-else',
[
'about',
'somewhere-else',
{
children: ['', {}],
},
],
<h1>About Page!</h1>,
<h1>Somewhere Page!</h1>,
<>
<title>About page!</title>
<title>Somewhere page!</title>
</>,
],
]
Expand Down Expand Up @@ -107,7 +148,7 @@ describe('serverPatchReducer', () => {
})
const action: ServerPatchAction = {
type: ACTION_SERVER_PATCH,
flightData,
flightData: flightDataForPatch,
previousTree: [
'',
{
Expand Down Expand Up @@ -177,11 +218,11 @@ describe('serverPatchReducer', () => {
},
],
[
'about',
'somewhere-else',
{
status: CacheStates.READY,
data: null,
subTreeData: <h1>About Page!</h1>,
subTreeData: <h1>Somewhere Page!</h1>,
parallelRoutes: new Map([
[
'children',
Expand All @@ -193,7 +234,7 @@ describe('serverPatchReducer', () => {
data: null,
head: (
<>
<title>About page!</title>
<title>Somewhere page!</title>
</>
),
parallelRoutes: new Map(),
Expand Down Expand Up @@ -222,7 +263,7 @@ describe('serverPatchReducer', () => {
children: [
'linking',
{
children: ['about', { children: ['', {}] }],
children: ['somewhere-else', { children: ['', {}] }],
},
],
},
Expand Down Expand Up @@ -296,14 +337,14 @@ describe('serverPatchReducer', () => {

const action: ServerPatchAction = {
type: ACTION_SERVER_PATCH,
flightData,
flightData: flightDataForPatch,
previousTree: [
'',
{
children: [
'linking',
{
children: ['about', { children: ['', {}] }],
children: ['somewhere-else', { children: ['', {}] }],
},
],
},
Expand Down Expand Up @@ -337,6 +378,177 @@ describe('serverPatchReducer', () => {
apply: false,
},
canonicalUrl: '/linking/about',
cache: {
status: CacheStates.READY,
data: null,
subTreeData: (
<html>
<head></head>
<body>Root layout</body>
</html>
),
parallelRoutes: new Map([
[
'children',
new Map([
[
'linking',
{
status: CacheStates.READY,
parallelRoutes: new Map([
[
'children',
new Map([
[
'',
{
status: CacheStates.READY,
data: null,
subTreeData: <>Linking page</>,
parallelRoutes: new Map(),
},
],
]),
],
]),
data: null,
subTreeData: <>Linking layout level</>,
},
],
]),
],
]),
},
tree: [
'',
{
children: [
'linking',
{
children: ['about', { children: ['', {}] }],
},
],
},
undefined,
undefined,
true,
],
}

expect(newState).toMatchObject(expectedState)
})

it('should apply server patch without affecting focusAndScrollRef', async () => {
const initialTree = getInitialRouterStateTree()
const initialCanonicalUrl = '/linking'
const children = (
<html>
<head></head>
<body>Root layout</body>
</html>
)
const initialParallelRoutes: CacheNode['parallelRoutes'] = new Map([
[
'children',
new Map([
[
'linking',
{
status: CacheStates.READY,
parallelRoutes: new Map([
[
'children',
new Map([
[
'',
{
status: CacheStates.READY,
data: null,
subTreeData: <>Linking page</>,
parallelRoutes: new Map(),
},
],
]),
],
]),
data: null,
subTreeData: <>Linking layout level</>,
},
],
]),
],
])

const navigateAction: NavigateAction = {
type: ACTION_NAVIGATE,
url: new URL('/linking/about', 'https://localhost'),
isExternalUrl: false,
locationSearch: '',
navigateType: 'push',
forceOptimisticNavigation: false,
cache: {
status: CacheStates.LAZY_INITIALIZED,
data: null,
subTreeData: null,
parallelRoutes: new Map(),
},
mutable: {},
}

const state = createInitialRouterState({
initialTree,
initialCanonicalUrl,
children,
initialParallelRoutes,
isServer: false,
location: new URL(initialCanonicalUrl, 'https://localhost') as any,
})

const stateAfterNavigate = await runPromiseThrowChain(() =>
navigateReducer(state, navigateAction)
)

const action: ServerPatchAction = {
type: ACTION_SERVER_PATCH,
flightData: flightDataForPatch,
previousTree: [
'',
{
children: [
'linking',
{
children: ['about', { children: ['', {}] }],
},
],
},
undefined,
undefined,
true,
],
overrideCanonicalUrl: undefined,
cache: {
status: CacheStates.LAZY_INITIALIZED,
data: null,
subTreeData: null,
parallelRoutes: new Map(),
},
mutable: {},
}

const newState = await runPromiseThrowChain(() =>
serverPatchReducer(stateAfterNavigate, action)
)

const expectedState: ReturnType<typeof serverPatchReducer> = {
prefetchCache: new Map(),
pushRef: {
mpaNavigation: false,
pendingPush: true,
},
focusAndScrollRef: {
apply: true,
},
canonicalUrl: '/linking/about',
cache: {
status: CacheStates.READY,
data: null,
Expand Down Expand Up @@ -396,6 +608,35 @@ describe('serverPatchReducer', () => {
]),
},
],
[
'somewhere-else',
{
status: CacheStates.READY,
data: null,
subTreeData: <h1>Somewhere Page!</h1>,
parallelRoutes: new Map([
[
'children',
new Map([
[
'',
{
status: CacheStates.LAZY_INITIALIZED,
data: null,
head: (
<>
<title>Somewhere page!</title>
</>
),
parallelRoutes: new Map(),
subTreeData: null,
},
],
]),
],
]),
},
],
]),
],
]),
Expand All @@ -413,7 +654,7 @@ describe('serverPatchReducer', () => {
children: [
'linking',
{
children: ['about', { children: ['', {}] }],
children: ['somewhere-else', { children: ['', {}] }],
},
],
},
Expand Down
1 change: 0 additions & 1 deletion packages/next/src/client/components/router-reducer/reducers/server-patch-reducer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,6 @@ export function serverPatchReducer(
mutable.previousTree = state.tree
mutable.patchedTree = newTree
mutable.cache = cache
mutable.applyFocusAndScroll = false

return handleMutable(state, mutable)
}