@wular/pnext 0.0.19 → 0.0.20

package/src/client/router/runtime.ts

@@ -45,6 +45,7 @@ import type {
   SoftNavigateOptions,
 } from './types'
 import type { LinkClickTarget } from './hub'
+import { elementInPageSlot, graftPageSlot, loadingShellTarget } from './page-slot'
 // ---------------------------------------------------------------------------
 // DOCUMENTS
 // ---------------------------------------------------------------------------
@@ -507,10 +508,13 @@ function pruneStylesheets(doc: Document) {
   }
 }
 
+// Built stylesheets answer to `/assets/` (core) and `/_next/static/` (next-compat, Next's own path).
+const BUILT_SHEET = /^\/(?:assets|_next\/static)\//
+
 function pnextStylesheet(href: string) {
   try {
     const url = new URL(href, location.href)
-    return url.origin === location.origin && url.pathname.startsWith('/assets/')
+    return url.origin === location.origin && BUILT_SHEET.test(url.pathname)
   } catch {
     return false
   }
@@ -695,7 +699,7 @@ function preservedSegmentIslands(segments: Element[]): LiveIslandRoot[] {
     for (const root of segment.querySelectorAll('pnext-client[data-pnext-client]')) {
       const live = root as LiveIslandRoot
       if (!isTopLevelIslandRoot(root)) continue
-      if (root.closest('#pnext-page')) continue
+      if (elementInPageSlot(root)) continue
       if (!live.__pnextLive) continue
       live.__pnextIncoming ??= live.cloneNode(true) as Element
       roots.push(live)
@@ -704,72 +708,17 @@ function preservedSegmentIslands(segments: Element[]): LiveIslandRoot[] {
   return roots
 }
 
-/**
- * Resolve a live segment's page slot as a "replace its content" function. A page
- * that mounts nothing never materializes the wrapper div (the renderer's `keep`
- * marker mode, which preserves Next's structural DOM), so the graft splices
- * between the `pnext-page:` comment anchors instead. Null when neither form is
- * present, so there is nothing to graft.
- */
-function livePageSlot(segment: Element): ((nodes: Node[]) => void) | null {
-  const element = segment.querySelector('#pnext-page')
-  if (element)
-    return nodes => element.replaceChildren(...reusePageNodes([...element.childNodes], nodes))
-  const walker = document.createTreeWalker(segment, NodeFilter.SHOW_COMMENT)
-  let start: Comment | null = null
-  while (walker.nextNode()) {
-    const comment = walker.currentNode as Comment
-    if (comment.data.startsWith('pnext-page:')) {
-      start = comment
-      break
-    }
-  }
-  const parent = start?.parentNode
-  if (!start || !parent) return null
-  return nodes => {
-    const liveNodes: ChildNode[] = []
-    let node = start.nextSibling
-    while (node && !(node.nodeType === Node.COMMENT_NODE && node.nodeValue === '/pnext-page')) {
-      liveNodes.push(node)
-      node = node.nextSibling
-    }
-    const next = reusePageNodes(liveNodes, nodes)
-    for (const stale of liveNodes) stale.remove()
-    for (const incoming of next) parent.insertBefore(incoming, node)
-  }
-}
-
-// Next re-renders a page in place, so unchanged DOM keeps its node identity.
-// An incoming child byte-identical to a live one IS that element: hand back the
-// live node instead of the imported copy. Islands keep their own graft path.
-function reusePageNodes(live: readonly ChildNode[], incoming: readonly Node[]): Node[] {
-  const candidates = live.filter(
-    (node): node is Element =>
-      node instanceof Element &&
-      !(node instanceof HTMLScriptElement) &&
-      !node.matches('pnext-client, #pnext-page') &&
-      node.querySelector(`pnext-client, #pnext-page, [${PRESERVE_ATTRIBUTE}]`) == null,
-  )
-  if (candidates.length === 0) return [...incoming]
-  return incoming.map(node => {
-    if (!(node instanceof Element)) return node
-    const index = candidates.findIndex(candidate => candidate.outerHTML === node.outerHTML)
-    return index === -1 ? node : candidates.splice(index, 1)[0]!
-  })
-}
-
 function graftPreservedServerSegments(fragment: DocumentFragment, preserved: Element[]) {
   for (const placeholder of [...fragment.querySelectorAll(`[${SEGMENT_PRESERVE_ATTRIBUTE}]`)]) {
     const live = preserved[Number(placeholder.getAttribute(SEGMENT_PRESERVE_ATTRIBUTE))]
     placeholder.removeAttribute(SEGMENT_PRESERVE_ATTRIBUTE)
     if (!live) continue
-    const livePage = livePageSlot(live)
-    const incomingPage = placeholder.querySelector('#pnext-page')
-    if (!livePage || !incomingPage) continue
-    // MOVE (not clone) the incoming page nodes: they already belong to this
+    // MOVE (not clone) the incoming page slot: it already belongs to this
     // document, and cloning would turn an island root the island graft just
-    // spliced in back into an inert copy, dropping its live preact tree.
-    livePage([...incomingPage.childNodes])
+    // spliced in back into an inert copy, dropping its live preact tree. Moving
+    // the slot itself also preserves whether this destination needs a mount
+    // element or Next-flat comment anchors.
+    if (!graftPageSlot(live, placeholder)) continue
     placeholder.replaceWith(live)
   }
 }
@@ -879,7 +828,7 @@ function matchPreservedIslands(
     if (!isTopLevelIslandRoot(root)) continue
     if (!(root as LiveIslandRoot).__pnextLive) continue
     if (remountTemplates && isTemplateIsland(root)) continue
-    if (remountPageIslands && root.closest('#pnext-page')) continue
+    if (remountPageIslands && elementInPageSlot(root)) continue
     const id = root.getAttribute('data-pnext-client') ?? ''
     const queue = liveById.get(id)
     if (queue) queue.push(root)
@@ -890,13 +839,13 @@ function matchPreservedIslands(
   for (const placeholder of doc.body.querySelectorAll('pnext-client[data-pnext-client]')) {
     if (!isTopLevelIslandRoot(placeholder)) continue
     if (remountTemplates && isTemplateIsland(placeholder)) continue
-    if (remountPageIslands && placeholder.closest('#pnext-page')) continue
+    if (remountPageIslands && elementInPageSlot(placeholder)) continue
     // Inside a preserved server segment the LAYOUT-level islands travel with the
     // live segment DOM that graftPreservedServerSegments splices in, so the island
     // graft (which runs first) must not move them out of it. Page-slot islands
     // still preserve: their placeholders move into the live page slot.
     const preservedSegment = placeholder.closest(`[${SEGMENT_PRESERVE_ATTRIBUTE}]`)
-    if (preservedSegment && !placeholder.closest('#pnext-page')) continue
+    if (preservedSegment && !elementInPageSlot(placeholder)) continue
     const live = liveById.get(placeholder.getAttribute('data-pnext-client') ?? '')?.shift()
     if (!live) continue
     // An island carrying its own params scope (a parallel-route slot stamps its
@@ -974,9 +923,9 @@ function swapBody(
   preserved: LiveIslandRoot[] = [],
   segments: Element[] = [],
   preservedPage: PreservedClientPage | null = null,
+  reusable = reusableBodyChildren(),
 ) {
   const fragment = document.createDocumentFragment()
-  const reusable = reusableBodyChildren()
   // The incoming document's entry src, remembered on <html> below so a snapshot
   // of the swapped (script-less) live DOM can still name its entry.
   let entrySrc: string | null = null
@@ -1043,7 +992,7 @@ function restoreSwapFocus(focused: Element | null): void {
 // document) and nothing the island/segment/page grafts need to target.
 function isReusableBodyChild(node: Node): node is Element {
   if (!(node instanceof Element)) return false
-  if (node instanceof HTMLScriptElement) return false
+  if (node.tagName === 'SCRIPT') return false
   if (node.matches('pnext-client, pnext-layout, #pnext-page')) return false
   return (
     node.querySelector(
@@ -1053,22 +1002,12 @@ function isReusableBodyChild(node: Node): node is Element {
 }
 
 function reusableBodyChildren(): Element[] {
-  const candidates: Element[] = []
   // Once the entry has mounted, a client page dissolves `#pnext-page` into comment
   // anchors, so its elements sit directly in <body>. They belong to the departing
   // render and must not be mistaken for root-layout DOM - skip the anchored range.
-  let insidePageSlot = false
-  for (const node of document.body.childNodes) {
-    if (node.nodeType === Node.COMMENT_NODE) {
-      const data = node.nodeValue ?? ''
-      if (data.startsWith('pnext-page:')) insidePageSlot = true
-      else if (data === '/pnext-page') insidePageSlot = false
-      continue
-    }
-    if (insidePageSlot || !isReusableBodyChild(node)) continue
-    candidates.push(node)
-  }
-  return candidates
+  return [...document.body.children].filter(
+    node => !elementInPageSlot(node) && isReusableBodyChild(node),
+  )
 }
 
 // Match an incoming body child to a still-available live one and hand back the
@@ -2661,7 +2600,10 @@ export function prefetchRoute(
   const cacheKey = prefetchCacheKey(key, full)
   // Prefetching the page we are already on is a no-op (Next's router produces
   // an empty delta for the current tree) — and it must not spend a request.
-  if (key === location.pathname + location.search && !options.currentUrl) {
+  if (
+    (key === location.pathname + location.search || key === routerState.activeRouteKey) &&
+    !options.currentUrl
+  ) {
     return Promise.resolve(null)
   }
   // A default prefetch carries only static segment data; search params are dynamic data
@@ -3746,8 +3688,7 @@ function showLoadingShell(
   const suspense = marker ?? inline?.anchor
   if (!suspense && !allowWithoutBoundary) return false
   if (!loadingBoundaryChanges(marker, target)) return false
-  const container = loadingShellTarget()
-  if (!container) return false
+  const { container, markerRange } = loadingShellTarget()
   // A painted loading shell IS a committed navigation (pushOptimisticUrl moves the address
   // bar the instant this returns true), so the window route state must reflect the
   // DESTINATION before any island reads useParams - otherwise usePathname and useParams
@@ -3759,6 +3700,7 @@ function showLoadingShell(
   // loading boundary. Keep that prefix when painting the fallback: replacing the target
   // with only the suspense children loses the eagerly prefetched layout.
   const incomingTarget =
+    (markerRange ? doc.getElementById('pnext-page') : null) ??
     (container.id ? doc.getElementById(container.id) : null) ??
     doc.querySelector('[data-pnext-root]') ??
     (container === document.body ? doc.body : null)
@@ -3787,7 +3729,10 @@ function showLoadingShell(
   const liveOwner = liveIslandOwner(container)
   const incomingOwner = liveOwner && incomingIslandFor(doc, liveOwner)
   if (liveOwner && incomingOwner) liveOwner.__pnextIncoming = incomingOwner
-  else container.replaceChildren(fragment)
+  else if (markerRange) {
+    for (const node of markerRange[2]) node.remove()
+    markerRange[0].after(fragment)
+  } else container.replaceChildren(fragment)
   // Any painted shell can carry islands (a loading fallback that calls
   // useOffline(), say), and an unmounted island keeps its SSR value forever.
   // mountRoute is idempotent, so mounting on every paint is safe.
@@ -3985,13 +3930,6 @@ function loadingBoundaryChanges(marker: Element | null, target: URL): boolean {
   return divergence <= depth
 }
 
-function loadingShellTarget(): HTMLElement | null {
-  const page = document.getElementById('pnext-page')
-  if (page instanceof HTMLElement) return page
-  const root = document.querySelector('[data-pnext-root]')
-  return root instanceof HTMLElement ? root : document.body
-}
-
 // Choosing the document a navigation commits: cache hit, in-flight prefetch,
 // segment reuse or a fresh fetch — and recording what the answer taught us.
 
@@ -4040,6 +3978,10 @@ async function pageForNavigation(
   const paintStaticStage = (html: string) => {
     if (staticStagePainted) return
     staticStagePainted = true
+    // A cached stage with parallel slots has dynamic continuations beside the page. Those cannot
+    // be reconstructed from a page-only frame, so this navigation needs the whole target document.
+    if (html.includes('data-pnext-slot=') || slotStateSensitive(departureNavState, html))
+      pageFrame.eligible = false
     onStaticStage?.(html)
   }
   const cached = prefetchEntriesForNavigation(key).find(
@@ -4118,14 +4060,14 @@ async function pageForNavigation(
   // whole-document fetch below unchanged.
   const framed = pageFrame.eligible
     ? await fetchPageFrameNavigation(url, {
-        navState: options.navState,
+        navState: options.navState ?? departureNavState,
         sameUrl: pageFrame.sameUrl,
       }).catch(() => null)
     : null
   const page =
     framed ??
     (await fetchPage(url.href, {
-      navState: options.navState,
+      navState: options.navState ?? departureNavState,
       onShell,
     }).catch(() => null))
   // Visited-page seeding: the navigation response is as fresh as any prefetch —
@@ -4515,10 +4457,14 @@ export async function softNavigate(href: string, options: SoftNavigateOptions =
   // into the live body. Capturing later would save the target's fallback as
   // the previous history entry and restore a permanently stuck "Loading...".
   if (!options.pop) saveScrollPosition()
+  if (departingBfcacheId) saveFormState(departingBfcacheId)
   // Snapshot the departing page's live island roots NOW, before a loading shell
   // can paint over (and detach) them below — they are stashed for back/forward
   // restore once the incoming document tells us which are preserved vs left.
   const departingLiveRoots = collectTopLevelLiveRoots()
+  // Snapshot plain root-layout DOM before a cached/streamed shell can detach it. The final swap
+  // reconciles onto these nodes so server layouts keep the same identity Next's root reconciler does.
+  const departingReusableBody = reusableBodyChildren()
   // Painting a prefetched loading shell IS a committed navigation, so push the requested URL
   // here and let usePathname() and the address bar reflect the destination while the fetch is
   // still in flight; the final commit replaces this entry with the resolved one (or, on a
@@ -4593,10 +4539,17 @@ export async function softNavigate(href: string, options: SoftNavigateOptions =
   // Loading-shell reuse: when the navigation must fetch, paint the CACHED shell for the
   // target pathname synchronously - search-param independent, so `?a` reuses the shell a `?b`
   // prefetch streamed - instead of waiting for the response's shell chunk.
+  // A sibling runtime prefetch may have supplied a reusable PAGE frame while this URL's
+  // param-dependent LAYOUT frame is missing. The route shell is not vary-aware, so do not
+  // paint a sibling's layout while the destination layout is still on the wire.
   if (
     onShell &&
     !refreshLike &&
     !segmentHit &&
+    !segmentCachePolicy?.needsLayoutFrameOnly?.({
+      pathname: url.pathname,
+      search: url.search,
+    }) &&
     !hasFreshDocument(url) &&
     !peekSegmentBody(url.pathname)
   ) {
@@ -4625,7 +4578,7 @@ export async function softNavigate(href: string, options: SoftNavigateOptions =
     eligible:
       !options.pop &&
       (!refreshLike || options.pageRefresh === true) &&
-      !slotStateSensitive(departureNavState),
+      !slotStateSensitive(departureNavState, segmentHit?.html),
     // The DEPARTING URL, not the live one: an optimistic shell paint above may
     // already have pushed the destination into the address bar.
     sameUrl: url.pathname === previousPathname && url.search === previousSearch,
@@ -4682,7 +4635,7 @@ export async function softNavigate(href: string, options: SoftNavigateOptions =
     !options.cachedPage &&
     skippedSegmentsUngraftable(
       doc,
-      options.freshSegments === true || (refreshLike && !options.pageRefresh),
+      options.freshSegments || cachedStagePainted || (refreshLike && !options.pageRefresh),
     )
   ) {
     const fullPage = await fetchPage(url.href, {
@@ -4772,7 +4725,10 @@ export async function softNavigate(href: string, options: SoftNavigateOptions =
   // a preserved segment, and so this pass agrees with the identical dry run in
   // skippedSegmentsUngraftable above.
   const preservedSegments =
-    options.freshSegments || (refreshLike && !options.pageRefresh) || navSlotsChanged(doc)
+    options.freshSegments ||
+    cachedStagePainted ||
+    (refreshLike && !options.pageRefresh) ||
+    navSlotsChanged(doc)
       ? (clearSegmentPreserveTags(doc), [])
       : matchPreservedServerSegments(doc)
   const preservedIslands = matchPreservedIslands(doc, remountTemplates, remountPageIslands)
@@ -4782,11 +4738,6 @@ export async function softNavigate(href: string, options: SoftNavigateOptions =
     remountPageIslands,
   )
   const targetRouteKey = bfRouteKey(targetUrl.pathname, targetUrl.search)
-  // Browser-back form restoration: snapshot the departing entry's form-control state so a
-  // later popstate can restore what a fresh mount cannot (typed values are DOM state, lost on
-  // remount). Snapshotted for EVERY navigation, not just the ones that mint a new id: a
-  // navigation that KEEPS the bfcacheId must come out the other side with the same values.
-  if (departingBfcacheId) saveFormState(departingBfcacheId)
   // Live islands the incoming tree keeps in place (preserved layout/segment
   // islands): the departing page's OTHER roots are the ones to stash.
   const keptLiveIslands = new Set<Element>([
@@ -4824,7 +4775,13 @@ export async function softNavigate(href: string, options: SoftNavigateOptions =
   // across a navigation. pnext's swap DETACHES preserved subtrees to graft them into the new
   // body, and detaching blurs - remember the focused node so it can be refocused.
   const focusedBeforeSwap = document.activeElement
-  swapBody(doc, [...preservedIslands, ...restoredIslands], preservedSegments, preservedPage)
+  swapBody(
+    doc,
+    [...preservedIslands, ...restoredIslands],
+    preservedSegments,
+    preservedPage,
+    departingReusableBody,
+  )
   stylesheetReconciler?.(doc)
   // The swapped document carries the render's parallel-route state; pin it
   // (plus the document itself) to this history entry so back/forward restores
@@ -4840,9 +4797,16 @@ export async function softNavigate(href: string, options: SoftNavigateOptions =
   await entryModule?.mountRoute?.()
   if (sequence !== navigationSequence) return
   restoreSwapFocus(focusedBeforeSwap)
+  if (!options.pop && departingBfcacheId && previousPathname !== targetUrl.pathname) {
+    restoreSharedLayoutFormState(departingBfcacheId, previousPathname, targetUrl.pathname)
+  }
   // History traversal restores the popped entry's form state over the freshly
   // mounted tree (browser back/forward form restoration semantics).
-  if (options.pop) restoreFormState(historyBfcacheId())
+  if (options.pop) {
+    const targetBfcacheId = historyBfcacheId()
+    restoreFormState(targetBfcacheId)
+    if (targetBfcacheId) restoreFormStateWhenMounted(targetBfcacheId, sequence)
+  }
   // Same-entry-identity navigation (a search-param nav on the same pathname, a refresh):
   // `key={bfcacheId}` subtrees do NOT remount, so typed values must survive. The commit can
   // still rebuild the page DOM under them (a PPR route streams its page slot in AFTER the
@@ -4928,6 +4892,21 @@ function saveFormState(bfcacheId: string) {
   }
 }
 
+function restoreControl(
+  control: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement,
+  saved: FormControlState,
+  onlyEmpty: boolean,
+) {
+  if (control.localName !== saved.tag) return
+  if (
+    control.localName === 'input' &&
+    (control.getAttribute('type')?.toLowerCase() ?? '') !== saved.type
+  )
+    return
+  if (onlyEmpty && control.value !== '') return
+  if (control.value !== saved.value) control.value = saved.value
+}
+
 function restoreFormState(bfcacheId: string | undefined, onlyEmpty = false) {
   if (!bfcacheId) return
   const state = entryFormStateCache.get(bfcacheId)
@@ -4935,18 +4914,34 @@ function restoreFormState(bfcacheId: string | undefined, onlyEmpty = false) {
   const controls = formControls()
   if (controls.length !== state.length) return
   for (const [index, control] of controls.entries()) {
-    const saved = state[index]!
-    if (control.localName !== saved.tag) continue
-    if (
-      control.localName === 'input' &&
-      (control.getAttribute('type')?.toLowerCase() ?? '') !== saved.type
-    )
-      continue
     // `onlyEmpty`: a freshly mounted control is empty, so filling it restores
     // what the remount lost — while anything already carrying a value (the app
     // set it, or the user typed after the commit) is left alone.
-    if (onlyEmpty && control.value !== '') continue
-    if (control.value !== saved.value) control.value = saved.value
+    restoreControl(control, state[index]!, onlyEmpty)
+  }
+}
+
+/** Restore uncontrolled controls owned by a layout whose URL scope did not change. */
+function restoreSharedLayoutFormState(
+  bfcacheId: string,
+  departingPathname: string,
+  targetPathname: string,
+) {
+  const state = entryFormStateCache.get(bfcacheId)
+  if (!state) return
+  const controls = formControls()
+  if (controls.length !== state.length) return
+  const departing = departingPathname.split('/').filter(Boolean)
+  const target = targetPathname.split('/').filter(Boolean)
+  for (const [index, control] of controls.entries()) {
+    if (elementInPageSlot(control)) continue
+    const raw = control
+      .closest('pnext-client[data-pnext-layout-segments]')
+      ?.getAttribute('data-pnext-layout-segments')
+    if (!raw) continue
+    const depth = (JSON.parse(raw) as { depth?: number }).depth
+    if (!depth || departing.slice(0, depth).join('/') !== target.slice(0, depth).join('/')) continue
+    restoreControl(control, state[index]!, false)
   }
 }
 

package/src/compat/bundler/cjs-exports.ts

@@ -13,7 +13,7 @@ import { rewriteFacts } from '../../resolve/scan-facts'
 import { spliceSource } from '../../runtime/module-transform'
 import { clientReferenceId } from '../../client/reference'
 import { hasUseClientDirective } from '../../client/reference-stub'
-import { isIdentifier, uniqueIdentifier } from '../../utils/code'
+import { esbuildEntryExportNames, isIdentifier, uniqueIdentifier } from '../../utils/code'
 import { fileMemo, fileMemoAsync } from './source-cache'
 
 const encoder = new TextEncoder()
@@ -148,9 +148,17 @@ export function commonJsClientReferencePlugin(): Plugin {
   }
 }
 
+// Minified ESM keeps every statement on one line, which `isCommonJsModuleSource`'s line-anchored test
+// misses (`…;export{H as RWebShare};`). Such an entry taken for CommonJS gets the facade above, whose
+// `__esModule ? .default` unwrap of esbuild's `__toCommonJS` namespace yields undefined and publishes
+// no named exports at all. Checked HERE rather than in the shared predicate: that one also decides
+// transform bail-outs and vendor entry shape, where the looser test changes unrelated behaviour.
+const MINIFIED_ESM_SYNTAX = /[;}](?:import(?:\s|[{'"*])|export(?:\s|[{*]))/
+
 const isCommonJsJavaScriptFile = fileMemo((file: string) => {
   try {
-    return isCommonJsModuleSource(readFileSync(file, 'utf8'), file)
+    const source = readFileSync(file, 'utf8')
+    return isCommonJsModuleSource(source, file) && !MINIFIED_ESM_SYNTAX.test(source)
   } catch {
     return true
   }
@@ -366,15 +374,29 @@ function recoverCommonJsNamedExports(code: string) {
   )
 }
 
-function commonJsNamespaceBinding(code: string, defaultName: string) {
+function commonJsNamespaceBinding(
+  code: string,
+  defaultName: string,
+  depth = 0,
+): string | undefined {
   const assignment = new RegExp(
     `(?:^|\\n)(?:var|const|let)\\s+${escapeRegExp(defaultName)}\\s*=\\s*([A-Za-z_$][\\w$]*)\\.default\\s*;`,
   ).exec(code)
   if (assignment?.[1]) return assignment[1]
 
-  return new RegExp(
+  const unwrap = new RegExp(
     `(?:^|\\n)(?:var|const|let)\\s+${escapeRegExp(defaultName)}\\s*=\\s*([A-Za-z_$][\\w$]*)\\s*!=\\s*null\\s*&&[\\s\\S]*?\\?\\s*\\1\\.default\\s*:\\s*\\1\\s*;`,
   ).exec(code)?.[1]
+  if (unwrap) return unwrap
+
+  // esbuild aliases the interop facade's namespace before exporting it as default. An `__esModule`
+  // entry with no `default` unwraps to undefined, so following the alias is what keeps the names
+  // being read off the raw `module.exports` rather than off nothing.
+  if (depth >= 4) return undefined
+  const alias = new RegExp(
+    `(?:^|\\n)(?:var|const|let)\\s+${escapeRegExp(defaultName)}\\s*=\\s*([A-Za-z_$][\\w$]*)\\s*;`,
+  ).exec(code)?.[1]
+  return alias ? commonJsNamespaceBinding(code, alias, depth + 1) : undefined
 }
 
 function hasNonDefaultExport(code: string) {
@@ -572,19 +594,3 @@ export const namedFacadeExportNames = fileMemo((file: string): string[] =>
     name => name !== 'default' && name !== '__esModule' && !reservedWords.has(name),
   ),
 )
-
-// Recover named exports from esbuild's `__export(entry, {...}); module.exports = __toCommonJS(entry)` shape.
-function esbuildEntryExportNames(code: string) {
-  const toCommonJs = [
-    ...code.matchAll(/module\.exports\s*=\s*__toCommonJS\w*\(\s*([A-Za-z_$][\w$]*)\s*\)/g),
-  ]
-  const entryVar = toCommonJs.at(-1)?.[1]
-  if (!entryVar) return []
-  const exportCall = new RegExp(
-    `__export\\w*\\(\\s*${entryVar}\\s*,\\s*\\{([\\s\\S]*?)\\}\\s*\\)`,
-  ).exec(code)
-  if (!exportCall?.[1]) return []
-  return [...exportCall[1].matchAll(/(?:^|,)\s*([A-Za-z_$][\w$]*)\s*:/g)]
-    .map(match => match[1])
-    .filter((name): name is string => Boolean(name && isIdentifier(name)))
-}

package/src/compat/client/css-order.ts

@@ -32,5 +32,5 @@ function absoluteHref(link: HTMLLinkElement) {
 
 function nextStylesheet(href: string) {
   const url = new URL(href, location.href)
-  return url.origin === location.origin && url.pathname.startsWith('/assets/')
+  return url.origin === location.origin && url.pathname.startsWith('/_next/static/')
 }

package/src/compat/client/navigation-scroll.ts

@@ -16,29 +16,13 @@ export function nextScrollPlan(
   return targetInViewport ? 'preserve' : 'top-then-target'
 }
 
-export function firstScrollCandidate<T>(
-  candidates: Iterable<T>,
-  shouldSkip: (candidate: T) => boolean,
-): T | undefined {
-  for (const candidate of candidates) if (!shouldSkip(candidate)) return candidate
-  return undefined
-}
-
-export function deepestSingleChild<T>(node: T | undefined, onlyChild: (node: T) => T | undefined) {
-  while (node) {
-    const child = onlyChild(node)
-    if (!child) return node
-    node = child
-  }
-  return undefined
-}
-
 export function topOnlyScrollPosition(scrollX: number): [number, number] {
   return [scrollX, 0]
 }
 
 export const applyNextNavigationScroll: NavigationScrollAction = (url, options) => {
-  const target = scrollFocusTarget()
+  const segmentElements = changedSegmentElements()
+  const target = scrollFocusTarget(segmentElements)
   const plan = nextScrollPlan(
     url,
     options,
@@ -56,7 +40,7 @@ export const applyNextNavigationScroll: NavigationScrollAction = (url, options)
   // zero-rect sibling there and runs out - the navigation scrolls nowhere and focuses nothing. pnext
   // renders those elements in place, so recognize the leading hoisted element and reproduce the same
   // no-op. Placed after `restore` so history traversal still restores its saved position.
-  if (segmentLeadsWithHoistedElement()) return
+  if (segmentLeadsWithHoistedElement(segmentElements)) return
   if (plan === 'hash') {
     scrollToHash(url.hash)
     return
@@ -90,25 +74,13 @@ function targetTopInViewport(element: HTMLElement, viewportHeight: number) {
   return top >= 0 && top <= viewportHeight
 }
 
-function scrollFocusTarget(): HTMLElement | null {
-  const segment = changedSegmentRoot()
-  if (!segment) return null
+function scrollFocusTarget(nodes: HTMLElement[]): HTMLElement | null {
   // Next resolves the target with findDOMNode() on the changed segment: the
   // FIRST host element the segment rendered, never a descendant of it. The page
   // container IS that segment, so its first element child is the target as-is.
   // The fallback roots below wrap the segment in pnext's own chrome, so there
   // the single-child chain is walked down to the content that segment rendered.
-  const first =
-    segment.id === PAGE_CONTAINER_ID
-      ? (segment.firstElementChild ?? undefined)
-      : deepestSingleChild(segment.firstElementChild ?? undefined, node =>
-          node.nextElementSibling === null ? (node.firstElementChild ?? undefined) : undefined,
-        )
-  const nodes: HTMLElement[] = []
-  for (let node = first; node; node = node.nextElementSibling ?? undefined) {
-    if (node instanceof HTMLElement) nodes.push(node)
-  }
-  return firstScrollCandidate(nodes, shouldSkipScrollElement) ?? null
+  return nodes.find(node => !shouldSkipScrollElement(node)) ?? null
 }
 
 /** The renderer's page-slot wrapper — the segment a navigation replaced. */
@@ -121,17 +93,41 @@ const HOISTED_TAGS = new Set(['style', 'link', 'title', 'meta', 'base'])
  * Whether the changed segment's first rendered element is one React would have hoisted into <head> -
  * the state in which Next's scroll walk never reaches the page content (see the call site).
  */
-function segmentLeadsWithHoistedElement(): boolean {
-  const segment = changedSegmentRoot()
-  const first = segment?.firstElementChild
-  return first !== null && first !== undefined && HOISTED_TAGS.has(first.localName)
+function segmentLeadsWithHoistedElement(elements: HTMLElement[]): boolean {
+  return elements[0] !== undefined && HOISTED_TAGS.has(elements[0].localName)
 }
 
-function changedSegmentRoot(): HTMLElement | null {
+function changedSegmentElements(): HTMLElement[] {
   const page = document.getElementById(PAGE_CONTAINER_ID)
-  if (page instanceof HTMLElement) return page
+  if (page instanceof HTMLElement) return Array.from(page.children).filter(isHtmlElement)
+
+  const walker = document.createTreeWalker(document.body, 128 /* NodeFilter.SHOW_COMMENT */)
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    if (!node.nodeValue?.startsWith('pnext-page:')) continue
+    const elements: HTMLElement[] = []
+    for (let sibling = node.nextSibling; sibling; sibling = sibling.nextSibling) {
+      if (sibling.nodeType === 8 /* Node.COMMENT_NODE */ && sibling.nodeValue === '/pnext-page')
+        return elements
+      if (sibling instanceof HTMLElement) elements.push(sibling)
+    }
+    break
+  }
+
   const root = document.querySelector('[data-pnext-root]')
-  return root instanceof HTMLElement ? root : document.body
+  const segment = root instanceof HTMLElement ? root : document.body
+  let first = segment.firstElementChild instanceof HTMLElement ? segment.firstElementChild : null
+  while (first?.nextElementSibling === null && first.firstElementChild instanceof HTMLElement)
+    first = first.firstElementChild
+  const elements: HTMLElement[] = []
+  for (let node = first; node;) {
+    elements.push(node)
+    node = node.nextElementSibling instanceof HTMLElement ? node.nextElementSibling : null
+  }
+  return elements
+}
+
+function isHtmlElement(element: Element): element is HTMLElement {
+  return element instanceof HTMLElement
 }
 
 function scrollToHash(hash: string) {

package/src/compat/css/modules.ts

@@ -4,6 +4,7 @@ import path from 'node:path'
 import type { Plugin } from 'esbuild'
 import type { ResolvedConfig } from '../../config'
 import { resolveImport } from '../../resolve/imports'
+import { hoistCssImports } from '../../css/build'
 import { maybeLightningcssTransform } from './lightningcss'
 import { escapeRegex } from '../../utils/code'
 
@@ -43,9 +44,12 @@ export function nextCssModuleChunkPlugin(config: ResolvedConfig): Plugin {
     setup(build) {
       build.onLoad({ filter: /\.css$/ }, ({ path: file }) => {
         const source = nextCssSource(file, config.root)
+        // This onLoad claims every `.css`, so core's directive-order plugin
+        // (registered after it) never sees a compat app's stylesheet — hoist here.
+        const raw = hoistCssImports(readFileSync(source, 'utf8'))
         const contents = file.endsWith('.module.css')
-          ? transformCssModule(readFileSync(source, 'utf8'), source, config.root)
-          : rewriteTransparentBodyChildren(readFileSync(source, 'utf8'))
+          ? transformCssModule(raw, source, config.root)
+          : rewriteTransparentBodyChildren(raw)
         return {
           // No-op unless next.config enables experimental.useLightningcss.
           contents: maybeLightningcssTransform(contents, source, config.root),