Spaces:
Running
Running
File size: 24,934 Bytes
c592d77 | 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 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 | "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function() {
return AppRouter;
}
});
const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _jsxruntime = require("react/jsx-runtime");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _approutercontextsharedruntime = require("../../shared/lib/app-router-context.shared-runtime");
const _routerreducertypes = require("./router-reducer/router-reducer-types");
const _createhreffromurl = require("./router-reducer/create-href-from-url");
const _hooksclientcontextsharedruntime = require("../../shared/lib/hooks-client-context.shared-runtime");
const _useactionqueue = require("./use-action-queue");
const _committedstate = require("./router-reducer/reducers/committed-state");
const _approuterannouncer = require("./app-router-announcer");
const _redirectboundary = require("./redirect-boundary");
const _findheadincache = require("./router-reducer/reducers/find-head-in-cache");
const _unresolvedthenable = require("./unresolved-thenable");
const _removebasepath = require("../remove-base-path");
const _hasbasepath = require("../has-base-path");
const _computechangedpath = require("./router-reducer/compute-changed-path");
const _navfailurehandler = require("./nav-failure-handler");
const _approuterinstance = require("./app-router-instance");
const _redirect = require("./redirect");
const _redirecterror = require("./redirect-error");
const _links = require("./links");
const _rooterrorboundary = /*#__PURE__*/ _interop_require_default._(require("./errors/root-error-boundary"));
const _globalerror = /*#__PURE__*/ _interop_require_default._(require("./builtin/global-error"));
const _boundarycomponents = require("../../lib/framework/boundary-components");
const _deploymentid = require("../../shared/lib/deployment-id");
const globalMutable = {};
function HistoryUpdater({ appRouterState }) {
(0, _react.useInsertionEffect)(()=>{
if (process.env.__NEXT_APP_NAV_FAIL_HANDLING) {
// clear pending URL as navigation is no longer
// in flight
window.next.__pendingUrl = undefined;
}
const { tree, pushRef, canonicalUrl, renderedSearch } = appRouterState;
const appHistoryState = {
tree,
renderedSearch
};
// TODO: Use Navigation API if available
const historyState = {
...pushRef.preserveCustomHistoryState ? window.history.state : {},
// Identifier is shortened intentionally.
// __NA is used to identify if the history entry can be handled by the app-router.
// __N is used to identify if the history entry can be handled by the old router.
__NA: true,
__PRIVATE_NEXTJS_INTERNALS_TREE: appHistoryState
};
if (pushRef.pendingPush && // Skip pushing an additional history entry if the canonicalUrl is the same as the current url.
// This mirrors the browser behavior for normal navigation.
(0, _createhreffromurl.createHrefFromUrl)(new URL(window.location.href)) !== canonicalUrl) {
// This intentionally mutates React state, pushRef is overwritten to ensure additional push/replace calls do not trigger an additional history entry.
pushRef.pendingPush = false;
window.history.pushState(historyState, '', canonicalUrl);
} else {
window.history.replaceState(historyState, '', canonicalUrl);
}
(0, _committedstate.setLastCommittedTree)(tree);
}, [
appRouterState
]);
(0, _react.useEffect)(()=>{
// The Next-Url and the base tree may affect the result of a prefetch
// task. Re-prefetch all visible links with the updated values. In most
// cases, this will not result in any new network requests, only if
// the prefetch result actually varies on one of these inputs.
(0, _links.pingVisibleLinks)(appRouterState.nextUrl, appRouterState.tree);
}, [
appRouterState.nextUrl,
appRouterState.tree
]);
return null;
}
function copyNextJsInternalHistoryState(data) {
if (data == null) data = {};
const currentState = window.history.state;
const __NA = currentState?.__NA;
if (__NA) {
data.__NA = __NA;
}
const __PRIVATE_NEXTJS_INTERNALS_TREE = currentState?.__PRIVATE_NEXTJS_INTERNALS_TREE;
if (__PRIVATE_NEXTJS_INTERNALS_TREE) {
data.__PRIVATE_NEXTJS_INTERNALS_TREE = __PRIVATE_NEXTJS_INTERNALS_TREE;
}
return data;
}
function Head({ headCacheNode }) {
// If this segment has a `prefetchHead`, it's the statically prefetched data.
// We should use that on initial render instead of `head`. Then we'll switch
// to `head` when the dynamic response streams in.
const head = headCacheNode !== null ? headCacheNode.head : null;
const prefetchHead = headCacheNode !== null ? headCacheNode.prefetchHead : null;
// If no prefetch data is available, then we go straight to rendering `head`.
const resolvedPrefetchRsc = prefetchHead !== null ? prefetchHead : head;
// We use `useDeferredValue` to handle switching between the prefetched and
// final values. The second argument is returned on initial render, then it
// re-renders with the first argument.
return (0, _react.useDeferredValue)(head, resolvedPrefetchRsc);
}
/**
* The global router that wraps the application components.
*/ function Router({ actionQueue, globalError, webSocket, staticIndicatorState }) {
const state = (0, _useactionqueue.useActionQueue)(actionQueue);
const { canonicalUrl } = state;
// Add memoized pathname/query for useSearchParams and usePathname.
const { searchParams, pathname } = (0, _react.useMemo)(()=>{
const url = new URL(canonicalUrl, typeof window === 'undefined' ? 'http://n' : window.location.href);
return {
// This is turned into a readonly class in `useSearchParams`
searchParams: url.searchParams,
pathname: (0, _hasbasepath.hasBasePath)(url.pathname) ? (0, _removebasepath.removeBasePath)(url.pathname) : url.pathname
};
}, [
canonicalUrl
]);
if (process.env.NODE_ENV !== 'production') {
const { cache, tree } = state;
// This hook is in a conditional but that is ok because `process.env.NODE_ENV` never changes
// eslint-disable-next-line react-hooks/rules-of-hooks
(0, _react.useEffect)(()=>{
// Add `window.nd` for debugging purposes.
// This is not meant for use in applications as concurrent rendering will affect the cache/tree/router.
// @ts-ignore this is for debugging
window.nd = {
router: _approuterinstance.publicAppRouterInstance,
cache,
tree
};
}, [
cache,
tree
]);
}
(0, _react.useEffect)(()=>{
const sourcePage = (0, _computechangedpath.extractSourcePageFromFlightRouterState)(state.tree);
if (sourcePage !== undefined) {
window.next.__internal_src_page = sourcePage;
} else {
delete window.next.__internal_src_page;
}
}, [
state.tree
]);
(0, _react.useEffect)(()=>{
// If the app is restored from bfcache, it's possible that
// pushRef.mpaNavigation is true, which would mean that any re-render of this component
// would trigger the mpa navigation logic again from the lines below.
// This will restore the router to the initial state in the event that the app is restored from bfcache.
function handlePageShow(event) {
if (!event.persisted || !window.history.state?.__PRIVATE_NEXTJS_INTERNALS_TREE) {
return;
}
// Clear the pendingMpaPath value so that a subsequent MPA navigation to the same URL can be triggered.
// This is necessary because if the browser restored from bfcache, the pendingMpaPath would still be set to the value
// of the last MPA navigation.
globalMutable.pendingMpaPath = undefined;
(0, _useactionqueue.dispatchAppRouterAction)({
type: _routerreducertypes.ACTION_RESTORE,
url: new URL(window.location.href),
historyState: window.history.state.__PRIVATE_NEXTJS_INTERNALS_TREE
});
}
window.addEventListener('pageshow', handlePageShow);
return ()=>{
window.removeEventListener('pageshow', handlePageShow);
};
}, []);
(0, _react.useEffect)(()=>{
// Ensure that any redirect errors that bubble up outside of the RedirectBoundary
// are caught and handled by the router.
function handleUnhandledRedirect(event) {
const error = 'reason' in event ? event.reason : event.error;
if ((0, _redirecterror.isRedirectError)(error)) {
event.preventDefault();
const url = (0, _redirect.getURLFromRedirectError)(error);
const redirectType = (0, _redirect.getRedirectTypeFromError)(error);
// TODO: This should access the router methods directly, rather than
// go through the public interface.
if (redirectType === 'push') {
_approuterinstance.publicAppRouterInstance.push(url, {});
} else {
_approuterinstance.publicAppRouterInstance.replace(url, {});
}
}
}
window.addEventListener('error', handleUnhandledRedirect);
window.addEventListener('unhandledrejection', handleUnhandledRedirect);
return ()=>{
window.removeEventListener('error', handleUnhandledRedirect);
window.removeEventListener('unhandledrejection', handleUnhandledRedirect);
};
}, []);
// When mpaNavigation flag is set do a hard navigation to the new url.
// Infinitely suspend because we don't actually want to rerender any child
// components with the new URL and any entangled state updates shouldn't
// commit either (eg: useTransition isPending should stay true until the page
// unloads).
//
// This is a side effect in render. Don't try this at home, kids. It's
// probably safe because we know this is a singleton component and it's never
// in <Offscreen>. At least I hope so. (It will run twice in dev strict mode,
// but that's... fine?)
const { pushRef } = state;
if (pushRef.mpaNavigation) {
// if there's a re-render, we don't want to trigger another redirect if one is already in flight to the same URL
if (globalMutable.pendingMpaPath !== canonicalUrl) {
const location = window.location;
if (pushRef.pendingPush) {
location.assign(canonicalUrl);
} else {
location.replace(canonicalUrl);
}
globalMutable.pendingMpaPath = canonicalUrl;
}
// TODO-APP: Should we listen to navigateerror here to catch failed
// navigations somehow? And should we call window.stop() if a SPA navigation
// should interrupt an MPA one?
// NOTE: This is intentionally using `throw` instead of `use` because we're
// inside an externally mutable condition (pushRef.mpaNavigation), which
// violates the rules of hooks.
throw _unresolvedthenable.unresolvedThenable;
}
(0, _react.useEffect)(()=>{
const originalPushState = window.history.pushState.bind(window.history);
const originalReplaceState = window.history.replaceState.bind(window.history);
// Ensure the canonical URL in the Next.js Router is updated when the URL is changed so that `usePathname` and `useSearchParams` hold the pushed values.
const applyUrlFromHistoryPushReplace = (url)=>{
const href = window.location.href;
const appHistoryState = window.history.state?.__PRIVATE_NEXTJS_INTERNALS_TREE;
(0, _react.startTransition)(()=>{
(0, _useactionqueue.dispatchAppRouterAction)({
type: _routerreducertypes.ACTION_RESTORE,
url: new URL(url ?? href, href),
historyState: appHistoryState
});
});
};
/**
* Patch pushState to ensure external changes to the history are reflected in the Next.js Router.
* Ensures Next.js internal history state is copied to the new history entry.
* Ensures usePathname and useSearchParams hold the newly provided url.
*/ window.history.pushState = function pushState(data, _unused, url) {
// TODO: Warn when Navigation API is available (navigation.navigate() should be used)
// Avoid a loop when Next.js internals trigger pushState/replaceState
if (data?.__NA || data?._N) {
return originalPushState(data, _unused, url);
}
data = copyNextJsInternalHistoryState(data);
if (url) {
applyUrlFromHistoryPushReplace(url);
}
return originalPushState(data, _unused, url);
};
/**
* Patch replaceState to ensure external changes to the history are reflected in the Next.js Router.
* Ensures Next.js internal history state is copied to the new history entry.
* Ensures usePathname and useSearchParams hold the newly provided url.
*/ window.history.replaceState = function replaceState(data, _unused, url) {
// TODO: Warn when Navigation API is available (navigation.navigate() should be used)
// Avoid a loop when Next.js internals trigger pushState/replaceState
if (data?.__NA || data?._N) {
return originalReplaceState(data, _unused, url);
}
data = copyNextJsInternalHistoryState(data);
if (url) {
applyUrlFromHistoryPushReplace(url);
}
return originalReplaceState(data, _unused, url);
};
/**
* Handle popstate event, this is used to handle back/forward in the browser.
* By default dispatches ACTION_RESTORE, however if the history entry was not pushed/replaced by app-router it will reload the page.
* That case can happen when the old router injected the history entry.
*/ const onPopState = (event)=>{
if (!event.state) {
// TODO-APP: this case only happens when pushState/replaceState was called outside of Next.js. It should probably reload the page in this case.
return;
}
// This case happens when the history entry was pushed by the `pages` router.
if (!event.state.__NA) {
window.location.reload();
return;
}
// TODO-APP: Ideally the back button should not use startTransition as it should apply the updates synchronously
// Without startTransition works if the cache is there for this path
(0, _react.startTransition)(()=>{
(0, _approuterinstance.dispatchTraverseAction)(window.location.href, event.state.__PRIVATE_NEXTJS_INTERNALS_TREE);
});
};
// Register popstate event to call onPopstate.
window.addEventListener('popstate', onPopState);
return ()=>{
window.history.pushState = originalPushState;
window.history.replaceState = originalReplaceState;
window.removeEventListener('popstate', onPopState);
};
}, []);
const { cache, tree, nextUrl, focusAndScrollRef, previousNextUrl } = state;
const matchingHead = (0, _react.useMemo)(()=>{
return (0, _findheadincache.findHeadInCache)(cache, tree[1]);
}, [
cache,
tree
]);
// Add memoized pathParams for useParams.
const pathParams = (0, _react.useMemo)(()=>{
return (0, _computechangedpath.getSelectedParams)(tree);
}, [
tree
]);
// Create instrumented promises for navigation hooks (dev-only)
// These are specially instrumented promises to show in the Suspense DevTools
// Promises are cached outside of render to survive suspense retries.
let instrumentedNavigationPromises = null;
if (process.env.NODE_ENV !== 'production') {
const { createRootNavigationPromises } = require('./navigation-devtools');
instrumentedNavigationPromises = createRootNavigationPromises(tree, pathname, searchParams, pathParams);
}
const layoutRouterContext = (0, _react.useMemo)(()=>{
return {
parentTree: tree,
parentCacheNode: cache,
parentSegmentPath: null,
parentParams: {},
parentLoadingData: null,
// This is the <Activity> "name" that shows up in the Suspense DevTools.
// It represents the root of the app.
debugNameContext: '/',
// Root node always has `url`
// Provided in AppTreeContext to ensure it can be overwritten in layout-router
url: canonicalUrl,
// Root segment is always active
isActive: true
};
}, [
tree,
cache,
canonicalUrl
]);
const globalLayoutRouterContext = (0, _react.useMemo)(()=>{
return {
tree,
focusAndScrollRef,
nextUrl,
previousNextUrl
};
}, [
tree,
focusAndScrollRef,
nextUrl,
previousNextUrl
]);
let head;
if (matchingHead !== null) {
// The head is wrapped in an extra component so we can use
// `useDeferredValue` to swap between the prefetched and final versions of
// the head. (This is what LayoutRouter does for segment data, too.)
//
// The `key` is used to remount the component whenever the head moves to
// a different segment.
const [headCacheNode, headKey, headKeyWithoutSearchParams] = matchingHead;
head = /*#__PURE__*/ (0, _jsxruntime.jsx)(Head, {
headCacheNode: headCacheNode
}, // Necessary for PPR: omit search params from the key to match prerendered keys
typeof window === 'undefined' ? headKeyWithoutSearchParams : headKey);
} else {
head = null;
}
let content = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_redirectboundary.RedirectBoundary, {
children: [
head,
/*#__PURE__*/ (0, _jsxruntime.jsx)(_boundarycomponents.RootLayoutBoundary, {
children: cache.rsc
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_approuterannouncer.AppRouterAnnouncer, {
tree: tree
})
]
});
if (process.env.__NEXT_DEV_SERVER) {
// In development, we apply few error boundaries and hot-reloader:
// - DevRootHTTPAccessFallbackBoundary: avoid using navigation API like notFound() in root layout
// - HotReloader:
// - hot-reload the app when the code changes
// - render dev overlay
// - catch runtime errors and display global-error when necessary
if (typeof window !== 'undefined') {
const { DevRootHTTPAccessFallbackBoundary } = require('./dev-root-http-access-fallback-boundary');
content = /*#__PURE__*/ (0, _jsxruntime.jsx)(DevRootHTTPAccessFallbackBoundary, {
children: content
});
}
const HotReloader = require('../dev/hot-reloader/app/hot-reloader-app').default;
content = /*#__PURE__*/ (0, _jsxruntime.jsx)(HotReloader, {
globalError: globalError,
webSocket: webSocket,
staticIndicatorState: staticIndicatorState,
children: content
});
} else {
content = /*#__PURE__*/ (0, _jsxruntime.jsx)(_rooterrorboundary.default, {
errorComponent: globalError[0],
errorStyles: globalError[1],
children: content
});
}
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(HistoryUpdater, {
appRouterState: state
}),
process.env.TURBOPACK ? null : /*#__PURE__*/ (0, _jsxruntime.jsx)(RuntimeStylesForWebpack, {}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_hooksclientcontextsharedruntime.NavigationPromisesContext.Provider, {
value: instrumentedNavigationPromises,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_hooksclientcontextsharedruntime.PathParamsContext.Provider, {
value: pathParams,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_hooksclientcontextsharedruntime.PathnameContext.Provider, {
value: pathname,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_hooksclientcontextsharedruntime.SearchParamsContext.Provider, {
value: searchParams,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_approutercontextsharedruntime.GlobalLayoutRouterContext.Provider, {
value: globalLayoutRouterContext,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_approutercontextsharedruntime.AppRouterContext.Provider, {
value: _approuterinstance.publicAppRouterInstance,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_approutercontextsharedruntime.LayoutRouterContext.Provider, {
value: layoutRouterContext,
children: content
})
})
})
})
})
})
})
]
});
}
function AppRouter({ actionQueue, globalErrorState, webSocket, staticIndicatorState }) {
(0, _navfailurehandler.useNavFailureHandler)();
const router = /*#__PURE__*/ (0, _jsxruntime.jsx)(Router, {
actionQueue: actionQueue,
globalError: globalErrorState,
webSocket: webSocket,
staticIndicatorState: staticIndicatorState
});
// At the very top level, use the default GlobalError component as the final fallback.
// When the app router itself fails, which means the framework itself fails, we show the default error.
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_rooterrorboundary.default, {
errorComponent: _globalerror.default,
children: router
});
}
let runtimeStyles;
let runtimeStyleChanged;
if (!process.env.TURBOPACK && typeof window !== 'undefined') {
runtimeStyles = new Set();
runtimeStyleChanged = new Set();
globalThis._N_E_STYLE_LOAD = function(href) {
if (!runtimeStyles || !runtimeStyleChanged) return Promise.resolve();
let len = runtimeStyles.size;
runtimeStyles.add(href);
if (runtimeStyles.size !== len) {
runtimeStyleChanged.forEach((cb)=>cb());
}
// TODO figure out how to get a promise here
// But maybe it's not necessary as react would block rendering until it's loaded
return Promise.resolve();
};
}
function RuntimeStylesForWebpack() {
const [, forceUpdate] = _react.default.useState(0);
const renderedStylesSize = runtimeStyles?.size ?? 0;
(0, _react.useEffect)(()=>{
if (!runtimeStyles || !runtimeStyleChanged) return;
const changed = ()=>forceUpdate((c)=>c + 1);
runtimeStyleChanged.add(changed);
if (renderedStylesSize !== runtimeStyles.size) {
changed();
}
return ()=>{
runtimeStyleChanged.delete(changed);
};
}, [
renderedStylesSize,
forceUpdate
]);
const query = (0, _deploymentid.getAssetTokenQuery)();
return [
...runtimeStyles || []
].map((href, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("link", {
rel: "stylesheet",
href: `${href}${query}`,
// @ts-ignore
precedence: "next"
}, i));
}
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=app-router.js.map |