From d5fd4c1b657d92e4a5940c99469f93a6c5099ce1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Fri, 4 Oct 2024 07:00:40 -0400 Subject: [PATCH] Move reactLoadableManifest/assetPrefix to workStore (#70768) --- .../components/request-async-storage.external.ts | 5 ----- .../components/work-async-storage.external.ts | 6 ++++++ .../next/src/server/after/after-context.test.ts | 2 -- packages/next/src/server/after/after-context.ts | 2 -- .../src/server/async-storage/with-request-store.ts | 12 +----------- .../src/server/async-storage/with-work-store.ts | 14 +++++++++----- .../src/shared/lib/lazy-dynamic/preload-chunks.tsx | 14 +++++++++----- 7 files changed, 25 insertions(+), 30 deletions(-) diff --git a/packages/next/src/client/components/request-async-storage.external.ts b/packages/next/src/client/components/request-async-storage.external.ts index c84d87eb142bd..81b61ed621429 100644 --- a/packages/next/src/client/components/request-async-storage.external.ts +++ b/packages/next/src/client/components/request-async-storage.external.ts @@ -6,7 +6,6 @@ import type { ReadonlyRequestCookies } from '../../server/web/spec-extension/ada // Share the instance module in the next-shared layer import { requestAsyncStorage } from './request-async-storage-instance' with { 'turbopack-transition': 'next-shared' } -import type { DeepReadonly } from '../../shared/lib/deep-readonly' import type { AfterContext } from '../../server/after/after-context' import type { ServerComponentsHmrCache } from '../../server/response-cache' @@ -34,10 +33,6 @@ export interface RequestStore { readonly cookies: ReadonlyRequestCookies readonly mutableCookies: ResponseCookies readonly draftMode: DraftModeProvider - readonly reactLoadableManifest: DeepReadonly< - Record - > - readonly assetPrefix: string readonly afterContext: AfterContext | undefined readonly isHmrRefresh?: boolean readonly serverComponentsHmrCache?: ServerComponentsHmrCache diff --git a/packages/next/src/client/components/work-async-storage.external.ts b/packages/next/src/client/components/work-async-storage.external.ts index c35b683abd5f7..1cef37bf04f7f 100644 --- a/packages/next/src/client/components/work-async-storage.external.ts +++ b/packages/next/src/client/components/work-async-storage.external.ts @@ -4,6 +4,7 @@ import type { DynamicServerError } from './hooks-server-context' import type { FetchMetrics } from '../../server/base-http' import type { Revalidate } from '../../server/lib/revalidate' import type { FallbackRouteParams } from '../../server/request/fallback-params' +import type { DeepReadonly } from '../../shared/lib/deep-readonly' // Share the instance module in the next-shared layer import { workAsyncStorage } from './work-async-storage-instance' with { 'turbopack-transition': 'next-shared' } @@ -62,6 +63,11 @@ export interface WorkStore { requestEndedState?: { ended?: boolean } buildId: string + + readonly reactLoadableManifest?: DeepReadonly< + Record + > + readonly assetPrefix?: string } export type WorkAsyncStorage = AsyncLocalStorage diff --git a/packages/next/src/server/after/after-context.test.ts b/packages/next/src/server/after/after-context.test.ts index c2d93e992440f..df4508f9307e2 100644 --- a/packages/next/src/server/after/after-context.test.ts +++ b/packages/next/src/server/after/after-context.test.ts @@ -498,8 +498,6 @@ const createMockRequestStore = (afterContext: AfterContext): RequestStore => { const partialStore: Partial = { url: { pathname: '/', search: '' }, afterContext: afterContext, - assetPrefix: '', - reactLoadableManifest: {}, draftMode: undefined, isHmrRefresh: false, serverComponentsHmrCache: undefined, diff --git a/packages/next/src/server/after/after-context.ts b/packages/next/src/server/after/after-context.ts index 300423aa3344a..d2816b03c5053 100644 --- a/packages/next/src/server/after/after-context.ts +++ b/packages/next/src/server/after/after-context.ts @@ -141,8 +141,6 @@ function wrapRequestStoreForAfterCallbacks( }, // TODO(after): calling a `cookies.set()` in an after() that's in an action doesn't currently error. mutableCookies: new ResponseCookies(new Headers()), - assetPrefix: requestStore.assetPrefix, - reactLoadableManifest: requestStore.reactLoadableManifest, afterContext: requestStore.afterContext, isHmrRefresh: requestStore.isHmrRefresh, serverComponentsHmrCache: requestStore.serverComponentsHmrCache, diff --git a/packages/next/src/server/async-storage/with-request-store.ts b/packages/next/src/server/async-storage/with-request-store.ts index e8f52205e4310..0dd70bad2eba1 100644 --- a/packages/next/src/server/async-storage/with-request-store.ts +++ b/packages/next/src/server/async-storage/with-request-store.ts @@ -42,15 +42,7 @@ function getMutableCookies( } export type WrapperRenderOpts = RequestLifecycleOpts & - Partial< - Pick< - RenderOpts, - | 'ComponentMod' - | 'onUpdateCookies' - | 'assetPrefix' - | 'reactLoadableManifest' - > - > & { + Partial> & { experimental: Pick previewProps?: __ApiPreviewProps } @@ -196,8 +188,6 @@ export const withRequestStore: WithStore = < return cache.draftMode }, - reactLoadableManifest: renderOpts?.reactLoadableManifest || {}, - assetPrefix: renderOpts?.assetPrefix || '', afterContext: createAfterContext(renderOpts), isHmrRefresh, serverComponentsHmrCache: diff --git a/packages/next/src/server/async-storage/with-work-store.ts b/packages/next/src/server/async-storage/with-work-store.ts index 80376a7b77b1a..bdf44074a8dde 100644 --- a/packages/next/src/server/async-storage/with-work-store.ts +++ b/packages/next/src/server/async-storage/with-work-store.ts @@ -2,7 +2,7 @@ import type { WithStore } from './with-store' import type { WorkStore } from '../../client/components/work-async-storage.external' import type { AsyncLocalStorage } from 'async_hooks' import type { IncrementalCache } from '../lib/incremental-cache' -import type { RenderOptsPartial } from '../app-render/types' +import type { RenderOpts } from '../app-render/types' import type { FetchMetric } from '../base-http' import type { RequestLifecycleOpts } from '../base-server' import type { FallbackRouteParams } from '../request/fallback-params' @@ -30,7 +30,7 @@ export type WorkStoreContext = { isServerAction?: boolean pendingWaitUntil?: Promise experimental: Pick< - RenderOptsPartial['experimental'], + RenderOpts['experimental'], 'isRoutePPREnabled' | 'after' | 'dynamicIO' > @@ -49,9 +49,10 @@ export type WorkStoreContext = { // TODO: remove this when we resolve accessing the store outside the execution context store?: WorkStore } & Pick< - // Pull some properties from RenderOptsPartial so that the docs are also + // Pull some properties from RenderOpts so that the docs are also // mirrored. - RenderOptsPartial, + RenderOpts, + | 'assetPrefix' | 'supportsDynamicResponse' | 'isRevalidate' | 'nextExport' @@ -59,7 +60,8 @@ export type WorkStoreContext = { | 'isDebugDynamicAccesses' | 'buildId' > & - Partial + Partial & + Partial> } export const withWorkStore: WithStore = ( @@ -114,6 +116,8 @@ export const withWorkStore: WithStore = ( requestEndedState, isPrefetchRequest, buildId: renderOpts.buildId, + reactLoadableManifest: renderOpts?.reactLoadableManifest || {}, + assetPrefix: renderOpts?.assetPrefix || '', } // TODO: remove this when we resolve accessing the store outside the execution context diff --git a/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx b/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx index 32eea7fb1c65e..5c6dd47e21359 100644 --- a/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx +++ b/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx @@ -2,7 +2,7 @@ import { preload } from 'react-dom' -import { getExpectedRequestStore } from '../../../client/components/request-async-storage.external' +import { workAsyncStorage } from '../../../client/components/work-async-storage.external' import { encodeURIPath } from '../encode-uri-path' export function PreloadChunks({ @@ -15,13 +15,17 @@ export function PreloadChunks({ return null } - const requestStore = getExpectedRequestStore('next/dynamic preload') + const workStore = workAsyncStorage.getStore() + if (workStore === undefined) { + return null + } + const allFiles = [] // Search the current dynamic call unique key id in react loadable manifest, // and find the corresponding CSS files to preload - if (requestStore.reactLoadableManifest && moduleIds) { - const manifest = requestStore.reactLoadableManifest + if (workStore.reactLoadableManifest && moduleIds) { + const manifest = workStore.reactLoadableManifest for (const key of moduleIds) { if (!manifest[key]) continue const chunks = manifest[key].files @@ -36,7 +40,7 @@ export function PreloadChunks({ return ( <> {allFiles.map((chunk) => { - const href = `${requestStore.assetPrefix}/_next/${encodeURIPath(chunk)}` + const href = `${workStore.assetPrefix}/_next/${encodeURIPath(chunk)}` const isCss = chunk.endsWith('.css') // If it's stylesheet we use `precedence` o help hoist with React Float. // For stylesheets we actually need to render the CSS because nothing else is going to do it so it needs to be part of the component tree.