File size: 3,667 Bytes
b91e262 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | import type { Dispatch } from 'react'
import React, { use, useMemo } from 'react'
import { isThenable } from '../../shared/lib/is-thenable'
import type { AppRouterActionQueue } from './app-router-instance'
import type {
AppRouterState,
ReducerActions,
ReducerState,
} from './router-reducer/router-reducer-types'
// The app router state lives outside of React, so we can import the dispatch
// method directly wherever we need it, rather than passing it around via props
// or context.
let dispatch: Dispatch<ReducerActions> | null = null
export function dispatchAppRouterAction(action: ReducerActions) {
if (dispatch === null) {
throw new Error(
'Internal Next.js error: Router action dispatched before initialization.'
)
}
dispatch(action)
}
const __DEV__ = process.env.NODE_ENV !== 'production'
const promisesWithDebugInfo: WeakMap<
Promise<AppRouterState>,
Promise<AppRouterState> & { _debugInfo?: Array<unknown> }
> = __DEV__ ? new WeakMap() : (null as any)
export function useActionQueue(
actionQueue: AppRouterActionQueue
): AppRouterState {
const [state, setState] = React.useState<ReducerState>(actionQueue.state)
// Because of a known issue that requires to decode Flight streams inside the
// render phase, we have to be a bit clever and assign the dispatch method to
// a module-level variable upon initialization. The useState hook in this
// module only exists to synchronize state that lives outside of React.
// Ideally, what we'd do instead is pass the state as a prop to root.render;
// this is conceptually how we're modeling the app router state, despite the
// weird implementation details.
if (process.env.NODE_ENV !== 'production') {
const { useAppDevRenderingIndicator } =
require('../../next-devtools/userspace/use-app-dev-rendering-indicator') as typeof import('../../next-devtools/userspace/use-app-dev-rendering-indicator')
// eslint-disable-next-line react-hooks/rules-of-hooks
const appDevRenderingIndicator = useAppDevRenderingIndicator()
dispatch = (action: ReducerActions) => {
appDevRenderingIndicator(() => {
actionQueue.dispatch(action, setState)
})
}
} else {
dispatch = (action: ReducerActions) =>
actionQueue.dispatch(action, setState)
}
// When navigating to a non-prefetched route, then App Router state will be
// blocked until the server responds. We need to transfer the `_debugInfo`
// from the underlying Flight response onto the top-level promise that is
// passed to React (via `use`) so that the latency is accurately represented
// in the React DevTools.
const stateWithDebugInfo = useMemo(() => {
if (!__DEV__) {
return state
}
if (isThenable(state)) {
// useMemo can't be used to cache a Promise since the memoized value is thrown
// away when we suspend. So we use a WeakMap to cache the Promise with debug info.
let promiseWithDebugInfo = promisesWithDebugInfo.get(state)
if (promiseWithDebugInfo === undefined) {
const debugInfo: Array<unknown> = []
promiseWithDebugInfo = Promise.resolve(state).then((asyncState) => {
if (asyncState.debugInfo !== null) {
debugInfo.push(...asyncState.debugInfo)
}
return asyncState
}) as Promise<AppRouterState> & { _debugInfo?: Array<unknown> }
promiseWithDebugInfo._debugInfo = debugInfo
promisesWithDebugInfo.set(state, promiseWithDebugInfo)
}
return promiseWithDebugInfo
}
return state
}, [state])
return isThenable(stateWithDebugInfo)
? use(stateWithDebugInfo)
: stateWithDebugInfo
}
|