UNPKG

next

Version:

The React Framework

491 lines (490 loc) • 25.6 kB
import { ReflectAdapter } from '../web/spec-extension/adapters/reflect'; import { abortAndThrowOnSynchronousRequestDataAccess, throwToInterruptStaticGeneration, postponeWithTracking, trackDynamicDataInDynamicRender, annotateDynamicAccess, trackSynchronousRequestDataAccessInDev } from '../app-render/dynamic-rendering'; import { workUnitAsyncStorage } from '../app-render/work-unit-async-storage.external'; import { InvariantError } from '../../shared/lib/invariant-error'; import { makeHangingPromise } from '../dynamic-rendering-utils'; import { createDedupedByCallsiteServerErrorLoggerDev } from '../create-deduped-by-callsite-server-error-logger'; import { describeStringPropertyAccess, describeHasCheckingStringProperty, wellKnownProperties } from '../../shared/lib/utils/reflect-utils'; import { throwWithStaticGenerationBailoutErrorWithDynamicError, throwForSearchParamsAccessInUseCache } from './utils'; import { scheduleImmediate } from '../../lib/scheduler'; export function createSearchParamsFromClient(underlyingSearchParams, workStore) { const workUnitStore = workUnitAsyncStorage.getStore(); if (workUnitStore) { switch(workUnitStore.type){ case 'prerender': case 'prerender-ppr': case 'prerender-legacy': return createPrerenderSearchParams(workStore, workUnitStore); default: } } return createRenderSearchParams(underlyingSearchParams, workStore); } // generateMetadata always runs in RSC context so it is equivalent to a Server Page Component export const createServerSearchParamsForMetadata = createServerSearchParamsForServerPage; export function createServerSearchParamsForServerPage(underlyingSearchParams, workStore) { const workUnitStore = workUnitAsyncStorage.getStore(); if (workUnitStore) { switch(workUnitStore.type){ case 'prerender': case 'prerender-ppr': case 'prerender-legacy': return createPrerenderSearchParams(workStore, workUnitStore); default: } } return createRenderSearchParams(underlyingSearchParams, workStore); } export function createPrerenderSearchParamsForClientPage(workStore) { if (workStore.forceStatic) { // When using forceStatic we override all other logic and always just return an empty // dictionary object. return Promise.resolve({}); } const prerenderStore = workUnitAsyncStorage.getStore(); if (prerenderStore && prerenderStore.type === 'prerender') { // dynamicIO Prerender // We're prerendering in a mode that aborts (dynamicIO) and should stall // the promise to ensure the RSC side is considered dynamic return makeHangingPromise(prerenderStore.renderSignal, '`searchParams`'); } // We're prerendering in a mode that does not aborts. We resolve the promise without // any tracking because we're just transporting a value from server to client where the tracking // will be applied. return Promise.resolve({}); } function createPrerenderSearchParams(workStore, prerenderStore) { if (workStore.forceStatic) { // When using forceStatic we override all other logic and always just return an empty // dictionary object. return Promise.resolve({}); } if (prerenderStore.type === 'prerender') { // We are in a dynamicIO (PPR or otherwise) prerender return makeAbortingExoticSearchParams(workStore.route, prerenderStore); } // The remaining cases are prerender-ppr and prerender-legacy // We are in a legacy static generation and need to interrupt the prerender // when search params are accessed. return makeErroringExoticSearchParams(workStore, prerenderStore); } function createRenderSearchParams(underlyingSearchParams, workStore) { if (workStore.forceStatic) { // When using forceStatic we override all other logic and always just return an empty // dictionary object. return Promise.resolve({}); } else { if (process.env.NODE_ENV === 'development' && !workStore.isPrefetchRequest) { return makeDynamicallyTrackedExoticSearchParamsWithDevWarnings(underlyingSearchParams, workStore); } else { return makeUntrackedExoticSearchParams(underlyingSearchParams, workStore); } } } const CachedSearchParams = new WeakMap(); const CachedSearchParamsForUseCache = new WeakMap(); function makeAbortingExoticSearchParams(route, prerenderStore) { const cachedSearchParams = CachedSearchParams.get(prerenderStore); if (cachedSearchParams) { return cachedSearchParams; } const promise = makeHangingPromise(prerenderStore.renderSignal, '`searchParams`'); const proxiedPromise = new Proxy(promise, { get (target, prop, receiver) { if (Object.hasOwn(promise, prop)) { // The promise has this property directly. we must return it. // We know it isn't a dynamic access because it can only be something // that was previously written to the promise and thus not an underlying searchParam value return ReflectAdapter.get(target, prop, receiver); } switch(prop){ case 'then': { const expression = '`await searchParams`, `searchParams.then`, or similar'; annotateDynamicAccess(expression, prerenderStore); return ReflectAdapter.get(target, prop, receiver); } case 'status': { const expression = '`use(searchParams)`, `searchParams.status`, or similar'; annotateDynamicAccess(expression, prerenderStore); return ReflectAdapter.get(target, prop, receiver); } default: { if (typeof prop === 'string' && !wellKnownProperties.has(prop)) { const expression = describeStringPropertyAccess('searchParams', prop); const error = createSearchAccessError(route, expression); abortAndThrowOnSynchronousRequestDataAccess(route, expression, error, prerenderStore); } return ReflectAdapter.get(target, prop, receiver); } } }, has (target, prop) { // We don't expect key checking to be used except for testing the existence of // searchParams so we make all has tests trigger dynamic. this means that `promise.then` // can resolve to the then function on the Promise prototype but 'then' in promise will assume // you are testing whether the searchParams has a 'then' property. if (typeof prop === 'string') { const expression = describeHasCheckingStringProperty('searchParams', prop); const error = createSearchAccessError(route, expression); abortAndThrowOnSynchronousRequestDataAccess(route, expression, error, prerenderStore); } return ReflectAdapter.has(target, prop); }, ownKeys () { const expression = '`{...searchParams}`, `Object.keys(searchParams)`, or similar'; const error = createSearchAccessError(route, expression); abortAndThrowOnSynchronousRequestDataAccess(route, expression, error, prerenderStore); } }); CachedSearchParams.set(prerenderStore, proxiedPromise); return proxiedPromise; } function makeErroringExoticSearchParams(workStore, prerenderStore) { const cachedSearchParams = CachedSearchParams.get(workStore); if (cachedSearchParams) { return cachedSearchParams; } const underlyingSearchParams = {}; // For search params we don't construct a ReactPromise because we want to interrupt // rendering on any property access that was not set from outside and so we only want // to have properties like value and status if React sets them. const promise = Promise.resolve(underlyingSearchParams); const proxiedPromise = new Proxy(promise, { get (target, prop, receiver) { if (Object.hasOwn(promise, prop)) { // The promise has this property directly. we must return it. // We know it isn't a dynamic access because it can only be something // that was previously written to the promise and thus not an underlying searchParam value return ReflectAdapter.get(target, prop, receiver); } switch(prop){ case 'then': { const expression = '`await searchParams`, `searchParams.then`, or similar'; if (workStore.dynamicShouldError) { throwWithStaticGenerationBailoutErrorWithDynamicError(workStore.route, expression); } else if (prerenderStore.type === 'prerender-ppr') { // PPR Prerender (no dynamicIO) postponeWithTracking(workStore.route, expression, prerenderStore.dynamicTracking); } else { // Legacy Prerender throwToInterruptStaticGeneration(expression, workStore, prerenderStore); } return; } case 'status': { const expression = '`use(searchParams)`, `searchParams.status`, or similar'; if (workStore.dynamicShouldError) { throwWithStaticGenerationBailoutErrorWithDynamicError(workStore.route, expression); } else if (prerenderStore.type === 'prerender-ppr') { // PPR Prerender (no dynamicIO) postponeWithTracking(workStore.route, expression, prerenderStore.dynamicTracking); } else { // Legacy Prerender throwToInterruptStaticGeneration(expression, workStore, prerenderStore); } return; } default: { if (typeof prop === 'string' && !wellKnownProperties.has(prop)) { const expression = describeStringPropertyAccess('searchParams', prop); if (workStore.dynamicShouldError) { throwWithStaticGenerationBailoutErrorWithDynamicError(workStore.route, expression); } else if (prerenderStore.type === 'prerender-ppr') { // PPR Prerender (no dynamicIO) postponeWithTracking(workStore.route, expression, prerenderStore.dynamicTracking); } else { // Legacy Prerender throwToInterruptStaticGeneration(expression, workStore, prerenderStore); } } return ReflectAdapter.get(target, prop, receiver); } } }, has (target, prop) { // We don't expect key checking to be used except for testing the existence of // searchParams so we make all has tests trigger dynamic. this means that `promise.then` // can resolve to the then function on the Promise prototype but 'then' in promise will assume // you are testing whether the searchParams has a 'then' property. if (typeof prop === 'string') { const expression = describeHasCheckingStringProperty('searchParams', prop); if (workStore.dynamicShouldError) { throwWithStaticGenerationBailoutErrorWithDynamicError(workStore.route, expression); } else if (prerenderStore.type === 'prerender-ppr') { // PPR Prerender (no dynamicIO) postponeWithTracking(workStore.route, expression, prerenderStore.dynamicTracking); } else { // Legacy Prerender throwToInterruptStaticGeneration(expression, workStore, prerenderStore); } return false; } return ReflectAdapter.has(target, prop); }, ownKeys () { const expression = '`{...searchParams}`, `Object.keys(searchParams)`, or similar'; if (workStore.dynamicShouldError) { throwWithStaticGenerationBailoutErrorWithDynamicError(workStore.route, expression); } else if (prerenderStore.type === 'prerender-ppr') { // PPR Prerender (no dynamicIO) postponeWithTracking(workStore.route, expression, prerenderStore.dynamicTracking); } else { // Legacy Prerender throwToInterruptStaticGeneration(expression, workStore, prerenderStore); } } }); CachedSearchParams.set(workStore, proxiedPromise); return proxiedPromise; } /** * This is a variation of `makeErroringExoticSearchParams` that always throws an * error on access, because accessing searchParams inside of `"use cache"` is * not allowed. */ export function makeErroringExoticSearchParamsForUseCache(workStore) { const cachedSearchParams = CachedSearchParamsForUseCache.get(workStore); if (cachedSearchParams) { return cachedSearchParams; } const promise = Promise.resolve({}); const proxiedPromise = new Proxy(promise, { get (target, prop, receiver) { if (Object.hasOwn(promise, prop)) { // The promise has this property directly. we must return it. We know it // isn't a dynamic access because it can only be something that was // previously written to the promise and thus not an underlying // searchParam value return ReflectAdapter.get(target, prop, receiver); } if (typeof prop === 'string' && (prop === 'then' || !wellKnownProperties.has(prop))) { throwForSearchParamsAccessInUseCache(workStore.route); } return ReflectAdapter.get(target, prop, receiver); }, has (target, prop) { // We don't expect key checking to be used except for testing the existence of // searchParams so we make all has tests throw an error. this means that `promise.then` // can resolve to the then function on the Promise prototype but 'then' in promise will assume // you are testing whether the searchParams has a 'then' property. if (typeof prop === 'string' && (prop === 'then' || !wellKnownProperties.has(prop))) { throwForSearchParamsAccessInUseCache(workStore.route); } return ReflectAdapter.has(target, prop); }, ownKeys () { throwForSearchParamsAccessInUseCache(workStore.route); } }); CachedSearchParamsForUseCache.set(workStore, proxiedPromise); return proxiedPromise; } function makeUntrackedExoticSearchParams(underlyingSearchParams, store) { const cachedSearchParams = CachedSearchParams.get(underlyingSearchParams); if (cachedSearchParams) { return cachedSearchParams; } // We don't use makeResolvedReactPromise here because searchParams // supports copying with spread and we don't want to unnecessarily // instrument the promise with spreadable properties of ReactPromise. const promise = Promise.resolve(underlyingSearchParams); CachedSearchParams.set(underlyingSearchParams, promise); Object.keys(underlyingSearchParams).forEach((prop)=>{ if (!wellKnownProperties.has(prop)) { Object.defineProperty(promise, prop, { get () { const workUnitStore = workUnitAsyncStorage.getStore(); trackDynamicDataInDynamicRender(store, workUnitStore); return underlyingSearchParams[prop]; }, set (value) { Object.defineProperty(promise, prop, { value, writable: true, enumerable: true }); }, enumerable: true, configurable: true }); } }); return promise; } function makeDynamicallyTrackedExoticSearchParamsWithDevWarnings(underlyingSearchParams, store) { const cachedSearchParams = CachedSearchParams.get(underlyingSearchParams); if (cachedSearchParams) { return cachedSearchParams; } const proxiedProperties = new Set(); const unproxiedProperties = []; // We have an unfortunate sequence of events that requires this initialization logic. We want to instrument the underlying // searchParams object to detect if you are accessing values in dev. This is used for warnings and for things like the static prerender // indicator. However when we pass this proxy to our Promise.resolve() below the VM checks if the resolved value is a promise by looking // at the `.then` property. To our dynamic tracking logic this is indistinguishable from a `then` searchParam and so we would normally trigger // dynamic tracking. However we know that this .then is not real dynamic access, it's just how thenables resolve in sequence. So we introduce // this initialization concept so we omit the dynamic check until after we've constructed our resolved promise. let promiseInitialized = false; const proxiedUnderlying = new Proxy(underlyingSearchParams, { get (target, prop, receiver) { if (typeof prop === 'string' && promiseInitialized) { if (store.dynamicShouldError) { const expression = describeStringPropertyAccess('searchParams', prop); throwWithStaticGenerationBailoutErrorWithDynamicError(store.route, expression); } const workUnitStore = workUnitAsyncStorage.getStore(); trackDynamicDataInDynamicRender(store, workUnitStore); } return ReflectAdapter.get(target, prop, receiver); }, has (target, prop) { if (typeof prop === 'string') { if (store.dynamicShouldError) { const expression = describeHasCheckingStringProperty('searchParams', prop); throwWithStaticGenerationBailoutErrorWithDynamicError(store.route, expression); } } return Reflect.has(target, prop); }, ownKeys (target) { if (store.dynamicShouldError) { const expression = '`{...searchParams}`, `Object.keys(searchParams)`, or similar'; throwWithStaticGenerationBailoutErrorWithDynamicError(store.route, expression); } return Reflect.ownKeys(target); } }); // We don't use makeResolvedReactPromise here because searchParams // supports copying with spread and we don't want to unnecessarily // instrument the promise with spreadable properties of ReactPromise. const promise = new Promise((resolve)=>scheduleImmediate(()=>resolve(underlyingSearchParams))); promise.then(()=>{ promiseInitialized = true; }); Object.keys(underlyingSearchParams).forEach((prop)=>{ if (wellKnownProperties.has(prop)) { // These properties cannot be shadowed because they need to be the // true underlying value for Promises to work correctly at runtime unproxiedProperties.push(prop); } else { proxiedProperties.add(prop); Object.defineProperty(promise, prop, { get () { return proxiedUnderlying[prop]; }, set (newValue) { Object.defineProperty(promise, prop, { value: newValue, writable: true, enumerable: true }); }, enumerable: true, configurable: true }); } }); const proxiedPromise = new Proxy(promise, { get (target, prop, receiver) { if (prop === 'then' && store.dynamicShouldError) { const expression = '`searchParams.then`'; throwWithStaticGenerationBailoutErrorWithDynamicError(store.route, expression); } if (typeof prop === 'string') { if (!wellKnownProperties.has(prop) && (proxiedProperties.has(prop) || // We are accessing a property that doesn't exist on the promise nor // the underlying searchParams. Reflect.has(target, prop) === false)) { const expression = describeStringPropertyAccess('searchParams', prop); syncIODev(store.route, expression); } } return ReflectAdapter.get(target, prop, receiver); }, set (target, prop, value, receiver) { if (typeof prop === 'string') { proxiedProperties.delete(prop); } return Reflect.set(target, prop, value, receiver); }, has (target, prop) { if (typeof prop === 'string') { if (!wellKnownProperties.has(prop) && (proxiedProperties.has(prop) || // We are accessing a property that doesn't exist on the promise nor // the underlying searchParams. Reflect.has(target, prop) === false)) { const expression = describeHasCheckingStringProperty('searchParams', prop); syncIODev(store.route, expression); } } return Reflect.has(target, prop); }, ownKeys (target) { const expression = '`Object.keys(searchParams)` or similar'; syncIODev(store.route, expression, unproxiedProperties); return Reflect.ownKeys(target); } }); CachedSearchParams.set(underlyingSearchParams, proxiedPromise); return proxiedPromise; } function syncIODev(route, expression, missingProperties) { // In all cases we warn normally if (missingProperties && missingProperties.length > 0) { warnForIncompleteEnumeration(route, expression, missingProperties); } else { warnForSyncAccess(route, expression); } const workUnitStore = workUnitAsyncStorage.getStore(); if (workUnitStore && workUnitStore.type === 'request' && workUnitStore.prerenderPhase === true) { // When we're rendering dynamically in dev we need to advance out of the // Prerender environment when we read Request data synchronously const requestStore = workUnitStore; trackSynchronousRequestDataAccessInDev(requestStore); } } const warnForSyncAccess = createDedupedByCallsiteServerErrorLoggerDev(createSearchAccessError); const warnForIncompleteEnumeration = createDedupedByCallsiteServerErrorLoggerDev(createIncompleteEnumerationError); function createSearchAccessError(route, expression) { const prefix = route ? `Route "${route}" ` : 'This route '; return Object.defineProperty(new Error(`${prefix}used ${expression}. ` + `\`searchParams\` should be awaited before using its properties. ` + `Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis`), "__NEXT_ERROR_CODE", { value: "E249", enumerable: false, configurable: true }); } function createIncompleteEnumerationError(route, expression, missingProperties) { const prefix = route ? `Route "${route}" ` : 'This route '; return Object.defineProperty(new Error(`${prefix}used ${expression}. ` + `\`searchParams\` should be awaited before using its properties. ` + `The following properties were not available through enumeration ` + `because they conflict with builtin or well-known property names: ` + `${describeListOfPropertyNames(missingProperties)}. ` + `Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis`), "__NEXT_ERROR_CODE", { value: "E2", enumerable: false, configurable: true }); } function describeListOfPropertyNames(properties) { switch(properties.length){ case 0: throw Object.defineProperty(new InvariantError('Expected describeListOfPropertyNames to be called with a non-empty list of strings.'), "__NEXT_ERROR_CODE", { value: "E531", enumerable: false, configurable: true }); case 1: return `\`${properties[0]}\``; case 2: return `\`${properties[0]}\` and \`${properties[1]}\``; default: { let description = ''; for(let i = 0; i < properties.length - 1; i++){ description += `\`${properties[i]}\`, `; } description += `, and \`${properties[properties.length - 1]}\``; return description; } } } //# sourceMappingURL=search-params.js.map