@wular/pnext 0.1.4 → 0.1.6

package/src/client/build.ts

@@ -1532,7 +1532,8 @@ function createClientSourcePipeline(config: ResolvedConfig, dev = false, routeId
       contents = rewriteDeferredDynamicImports(
         contents,
         resolved,
-        specifier => resolveImport(rootFromFile(resolved), resolved, specifier),
+        specifier =>
+          resolveImport(rootFromFile(resolved), resolved, specifier, config.workspaceRoot),
         target => {
           const id = clientReferenceId(target.file, target.exportName)
           const ref = { ...target, routeId }
@@ -2089,7 +2090,9 @@ export async function clientCacheKeyParts(
 ): Promise<ClientCacheKeyParts> {
   const staticDigest = staticHash ?? clientCacheStaticHash(route, nextCompat, config)
   const sources = await Promise.all(
-    (await clientSourceFiles(route)).map(file => readClientCacheSource(file)),
+    (await clientSourceFiles(route, config?.workspaceRoot)).map(file =>
+      readClientCacheSource(file),
+    ),
   )
   return { key: clientCacheKeyFrom(staticDigest, sources), staticHash: staticDigest, sources }
 }
@@ -2102,14 +2105,14 @@ export async function clientCacheKey(
   return (await clientCacheKeyParts(route, nextCompat, config)).key
 }
 
-async function clientSourceFiles(route: RouteManifestEntry) {
+async function clientSourceFiles(route: RouteManifestEntry, workspaceRoot?: string) {
   const entryFiles = [
     ...(route.client ? [route.file] : []),
     ...route.clientReferences.map(reference => reference.file),
   ]
   const files = new Set<string>()
 
-  await Promise.all(entryFiles.map(file => collectClientSourceFile(file, files)))
+  await Promise.all(entryFiles.map(file => collectClientSourceFile(file, files, workspaceRoot)))
 
   return [...files].sort()
 }
@@ -2117,7 +2120,7 @@ async function clientSourceFiles(route: RouteManifestEntry) {
 // The walk fans out: every file joins `files` before its own read starts, so
 // concurrent branches still visit each file once. Serially this was the whole
 // cost of a route's client cache key (~1.8 s on a 300-module route).
-async function collectClientSourceFile(file: string, files: Set<string>) {
+async function collectClientSourceFile(file: string, files: Set<string>, workspaceRoot?: string) {
   if (files.has(file) || !existsSync(file)) return
   files.add(file)
   if (isAssetLike(file)) return
@@ -2125,8 +2128,8 @@ async function collectClientSourceFile(file: string, files: Set<string>) {
   const source = rewriteLiteralDynamicCalls(await readText(file), file)
   await Promise.all(
     [...localImports(file, source)].map(specifier => {
-      const resolved = resolveImport(rootFromFile(file), file, specifier)
-      return resolved ? collectClientSourceFile(resolved, files) : Promise.resolve()
+      const resolved = resolveImport(rootFromFile(file), file, specifier, workspaceRoot)
+      return resolved ? collectClientSourceFile(resolved, files, workspaceRoot) : Promise.resolve()
     }),
   )
 }

package/src/client/entry.ts

@@ -104,10 +104,23 @@ function serializeModulePath() {
 // Re-provide the per-island layout-segment snapshot (stamped by the renderer as
 // `data-pnext-layout-segments`) around a hydrated island so compat's
 // useSelectedLayoutSegment(s) recomputes live from the layout depth. Emitted
-// only under next compat (the hooks are compat-only); a no-op wrapper otherwise.
+// only under next compat (the hooks are compat-only); core keeps the children guard.
 function layoutSegmentHelperSource(nextCompat?: boolean) {
-  if (!nextCompat) return ''
-  return `
+  // useId's mask (preact's _mask), seeded by data-pnext-id and kept on the instance (__c) across re-adoption.
+  const seed = `
+function pnextIslandMask(vnode, root) {
+  const mask = root.__pnextMask ??= [root.getAttribute('data-pnext-id'), 0];
+  Object.defineProperty(vnode, '__m', { enumerable: true, get() { return (this.__c || this).__pnextMask ??= mask; } });
+}`
+  if (!nextCompat)
+    return `${seed}
+function pnextIslandVNode(h, Component, props, children, root) {
+  const vnode = children !== undefined ? h(Component, props, children) : h(Component, props);
+  pnextIslandMask(vnode, root);
+  return vnode;
+}
+`
+  return `${seed}
 import { LayoutSegmentContext as __PNextLayoutSegmentContext, RouteParamsContext as __PNextRouteParamsContext } from ${JSON.stringify(islandContextModulePath())};
 function pnextIslandReadJson(root, attr) {
   const raw = root && root.getAttribute ? root.getAttribute(attr) : null;
@@ -118,6 +131,7 @@ function pnextIslandVNode(h, Component, props, children, root) {
   // An explicit undefined children argument clobbers props.children in
   // preact's createElement; plain children travel inside the parsed props.
   let vnode = children !== undefined ? h(Component, props, children) : h(Component, props);
+  pnextIslandMask(vnode, root);
   const segments = pnextIslandReadJson(root, 'data-pnext-layout-segments');
   if (segments) vnode = h(__PNextLayoutSegmentContext.Provider, { value: segments }, vnode);
   const params = pnextIslandReadJson(root, 'data-pnext-params');
@@ -132,11 +146,8 @@ function islandVNodeExpr(
   propsExpr: string,
   childrenExpr: string,
   rootExpr: string,
-  nextCompat?: boolean,
 ) {
-  return nextCompat
-    ? `pnextIslandVNode(h, ${componentExpr}, ${propsExpr}, ${childrenExpr}, ${rootExpr})`
-    : `h(${componentExpr}, ${propsExpr}, ${childrenExpr})`
+  return `pnextIslandVNode(h, ${componentExpr}, ${propsExpr}, ${childrenExpr}, ${rootExpr})`
 }
 
 /**
@@ -1136,11 +1147,10 @@ function observeVisibleIsland(root, island) {
 }
 
 function visibleTarget(root) {
-  // The host's OWN box: hostMeasureSource delegates the patched one to the
-  // parent, and IntersectionObserver never fires for a display:contents target.
-  const rect = Element.prototype.getBoundingClientRect.call(root);
-  if (rect.width || rect.height) return root;
-  return root.parentElement ?? root;
+  // IntersectionObserver never fires for a display:contents target: observe the nearest box.
+  let target = root;
+  while (target.parentElement && getComputedStyle(target).display === 'contents') target = target.parentElement;
+  return target;
 }
 
 ${mountOnceSource()}
@@ -1159,7 +1169,8 @@ async function mountIslandTree(root, island) {
   ]);
 ${facts.suspense !== false ? '  islandBoundary = Suspense;\n' : ''}  const rawProps = root.getAttribute('data-pnext-props') ?? '{}';
   const source = preservedSource(root, render);
-  const vnode = islandVNode(h, Component, await islandProps(rawProps, source, node => domChildren(h, node), h), await staticChildren(h, source, island.id));
+  if (!source) return adoptPreserved(render, root);
+  const vnode = islandVNode(h, Component, await islandProps(rawProps, source, node => domChildren(h, node), h), await staticChildren(h, source, island.id), root);
   const wrapped = ${facts.suspense !== false ? 'h(Suspense, { fallback: null }, pnextClientBoundary(h, vnode))' : 'pnextClientBoundary(h, vnode)'};
   if (source !== root) adoptPreserved(render, root, wrapped);
   else mount(hydrate, render, root, wrapped);
@@ -1172,7 +1183,8 @@ async function mountIslandTree(root, island) {
   const [{ h, hydrate, render }, Component] = await Promise.all([import('preact'), islandComponent(island)]);
   const rawProps = root.getAttribute('data-pnext-props') ?? '{}';
   const source = preservedSource(root, render);
-  const vnode = islandVNode(h, Component, await islandProps(rawProps, source, node => domChildren(h, node), h), await staticChildren(h, source, island.id));
+  if (!source) return adoptPreserved(render, root);
+  const vnode = islandVNode(h, Component, await islandProps(rawProps, source, node => domChildren(h, node), h), await staticChildren(h, source, island.id), root);
   if (source !== root) adoptPreserved(render, root, vnode);
   else mount(hydrate, render, root, vnode);
 }`
@@ -1200,16 +1212,18 @@ function preservedSource(root, render) {
   const incoming = root.__pnextIncoming;
   root.__pnextIncoming = undefined;
   if (!incoming) return root;
-  if (root.__pnextLive === render) return incoming;
+  // A kept layout's island stashed as its own incoming has no new render: keep its tree.
+  if (root.__pnextLive === render) return incoming === root ? null : incoming;
   root.replaceChildren(...incoming.childNodes);
   root.__pnextLive = undefined;
+  root.__pnextMask = [incoming.getAttribute('data-pnext-id'), 0];
   return root;
 }
 
 // Re-render the preserved root in place so component state survives while the
 // routed content under the island updates.
 function adoptPreserved(render, root, vnode) {
-  render(vnode, root);
+  if (vnode) render(vnode, root);
   pnextRender = render;
   pnextMountedRoots.add(root);
 }
@@ -1230,8 +1244,10 @@ function mount(hydrate, render, root, vnode) {
 // Adopted DOM children win (element children); plain children travel inside
 // the serialized props instead, and an explicit undefined third argument would
 // clobber props.children in preact's createElement — so only pass it when set.
-function islandVNode(h, Component, props, adopted) {
-  return adopted !== undefined ? h(Component, props, adopted) : h(Component, props);
+function islandVNode(h, Component, props, adopted, root) {
+  const vnode = adopted !== undefined ? h(Component, props, adopted) : h(Component, props);
+  pnextIslandMask(vnode, root);
+  return vnode;
 }
 
 async function staticChildren(h, root, id) {
@@ -1278,7 +1294,7 @@ async function domNode(h, node) {
     // A nested island must match its previous incarnation by IDENTITY, or the shift remounts
     // it and resets its state - Next never remounts layout components on navigation.
     if (props.key === undefined) props.key = 'pnext-island:' + id;
-    const vnode = islandVNode(h, Component, props, await staticChildren(h, element, island.id));
+    const vnode = islandVNode(h, Component, props, await staticChildren(h, element, island.id), element);
     return ${nextCompat ? 'islandBoundary ? h(islandBoundary, { fallback: null }, pnextClientBoundary(h, vnode)) : pnextClientBoundary(h, vnode)' : 'vnode'};
   }
 
@@ -1531,7 +1547,7 @@ function diagnoseSkippedIslands() {
     // claim pass adopted is no longer in the document. Everything else is a host
     // this route can never hydrate.
     if (island?.options?.load === 'visible') continue;
-    if (root.closest('pnext-hole-capture')) continue;
+    if (root.closest('pnext-hole-capture, [data-pnext-stream]')) continue;
     if (parent && !parent.__pnextLive) continue;
     const reason = island
       ? 'was materialized after its parent island mounted, outside any streamed hole this route can re-adopt'
@@ -1562,6 +1578,8 @@ for (const island of islands) {
   }
 for (const island of islands) {
   for (const root of document.querySelectorAll(\`[data-pnext-client="\${island.id}"]\`)) {
+    // React hydrates a streamed boundary only once revealed; its promotion re-runs this scan.
+    if (root.closest('[data-pnext-stream]')) continue;
     const parent = nestedIslandParent(root);
     if (parent) {
       pending.push(claimNestedIslandRoot(root, parent));
@@ -1625,8 +1643,11 @@ async function mountIslandTree(root, island) {
     // Preserved across a soft navigation: re-render in place with the incoming
     // document's props/children so component state survives while the routed
     // content under the island updates.
-    const vnode = ${islandVNodeExpr('Component', 'await islandProps(rawProps, incoming, domChildren, h)', 'await staticChildren(incoming, island.id)', 'root', nextCompat)};
-    render(${wrapInBoundary('vnode', nextCompat)}, root);
+    // A kept layout's island (its own incoming) keeps its tree.
+    if (incoming !== root) {
+      const vnode = ${islandVNodeExpr('Component', 'await islandProps(rawProps, incoming, domChildren, h)', 'await staticChildren(incoming, island.id)', 'root')};
+      render(${wrapInBoundary('vnode', nextCompat)}, root);
+    }
     pnextMountedRoots.add(root);
     return;
   }
@@ -1635,8 +1656,9 @@ async function mountIslandTree(root, island) {
     // instance can't diff its tree — restore the SSR children and mount fresh.
     root.replaceChildren(...incoming.childNodes);
     root.__pnextLive = undefined;
+    root.__pnextMask = [incoming.getAttribute('data-pnext-id'), 0];
   }
-  const vnode = ${islandVNodeExpr('Component', 'await islandProps(rawProps, root, domChildren, h)', 'await staticChildren(root, island.id)', 'root', nextCompat)};
+  const vnode = ${islandVNodeExpr('Component', 'await islandProps(rawProps, root, domChildren, h)', 'await staticChildren(root, island.id)', 'root')};
   mount(root, ${wrapInBoundary('vnode', nextCompat)});
 }
 
@@ -1713,7 +1735,7 @@ async function domNode(node) {
         : ''
     }
     const Component = await islandComponent(island);
-    return ${wrapInBoundary(islandVNodeExpr('Component', 'await islandProps(rawProps, element, domChildren, h)', 'children', 'element', nextCompat), nextCompat)};
+    return ${wrapInBoundary(islandVNodeExpr('Component', 'await islandProps(rawProps, element, domChildren, h)', 'children', 'element'), nextCompat)};
   }
 
   if (Page && element.id === 'pnext-page') {
@@ -1755,11 +1777,10 @@ ${holeSeamSource()}${
     visibleIslands
       ? `
 function visibleTarget(root) {
-  // The host's OWN box: hostMeasureSource delegates the patched one to the
-  // parent, and IntersectionObserver never fires for a display:contents target.
-  const rect = Element.prototype.getBoundingClientRect.call(root);
-  if (rect.width || rect.height) return root;
-  return root.parentElement ?? root;
+  // IntersectionObserver never fires for a display:contents target: observe the nearest box.
+  let target = root;
+  while (target.parentElement && getComputedStyle(target).display === 'contents') target = target.parentElement;
+  return target;
 }
 `
       : ''

package/src/client/reference-stub.ts

@@ -86,7 +86,7 @@ export async function clientReferenceExportNames(
   // excluded, per ES module star semantics). `export * as ns from` exports
   // only `ns`, which the own-module scan already lists.
   for (const specifier of moduleExportStars(text, file)) {
-    const resolved = resolveImport(config.root, file, specifier)
+    const resolved = resolveImport(config.root, file, specifier, config.workspaceRoot)
     if (!resolved || !isInside(config.workspaceRoot, resolved)) continue
     for (const name of await clientReferenceExportNames(config, resolved, undefined, visited)) {
       if (name !== 'default') names.add(name)

package/src/client/router/hub.ts

@@ -16,28 +16,30 @@ import type { EntryModule } from './types'
 
 export const routerState: {
   observedLocationKey: string
-  activeRouteKey: string | undefined
-  renderedEntryId: string | undefined
+  // The route key (pathname+search) of the currently committed navigation, used
+  // as the departing key on popstate (where `location` already points at the
+  // target). Seeded on router init and updated at each committed navigation.
+  activeRouteKey?: string
+  // The entry id whose document is currently on screen. A traversal to that
+  // same id — an app-level shallow pushState now carries the id forward — needs
+  // no fetch and no swap: the DOM already is this entry's.
+  renderedEntryId?: string
   /** The navigation that last painted a fallback, and when. */
   fallbackPaint?: [sequence: number, at: number]
+  /** Ends the clicked link's pending state; set once the runtime installs. */
+  settleLink?: () => void
 } = {
   // pathname+search of the URL the router last observed. A popstate that leaves both unchanged is a
   // same-document FRAGMENT traversal - Chrome fires popstate, not just hashchange, for those - and
   // treating one as a history traversal would refetch and swap the body, remounting the live tree
   // under the user's feet.
   observedLocationKey: locationKey(),
-  // The route key (pathname+search) of the currently committed navigation, used
-  // as the departing key on popstate (where `location` already points at the
-  // target). Seeded on router init and updated at each committed navigation.
-  activeRouteKey: undefined as string | undefined,
-  // The entry id whose document is currently on screen. A traversal to that
-  // same id — an app-level shallow pushState now carries the id forward — needs
-  // no fetch and no swap: the DOM already is this entry's.
-  renderedEntryId: undefined as string | undefined,
 }
 
 export function locationKey() {
-  return typeof location === 'undefined' ? '' : location.pathname + location.search
+  return process.browser || typeof location !== 'undefined'
+    ? location.pathname + location.search
+    : ''
 }
 
 // Installers that only the navigation runtime ever observes — compat's policy

package/src/client/router/page-slot.ts

@@ -27,6 +27,64 @@ export function elementInPageSlot(element: Element): boolean {
   )
 }
 
+const SEGMENT = 'pnext-layout[data-pnext-segment]'
+
+/** A server layout's identity and the URL prefix it rendered for. */
+export function segmentKey(segment: Element): string {
+  return `${segment.getAttribute('data-pnext-segment')}\u0001${segment.getAttribute('data-pnext-scope')}`
+}
+
+/** The server layout directly below `segment`, outside parallel-route slots. */
+export function childSegment(segment: Element): Element | null {
+  for (const child of segment.querySelectorAll(SEGMENT))
+    if (!segment.contains(child.closest('[data-pnext-slot]'))) return child
+  return null
+}
+
+/**
+ * The live layout below the deepest layout `boundary` shares with `slot` (null when that layout
+ * holds `slot`), and the incoming node that replaces it: the boundary, or the new layout holding
+ * it. Null when either sits in an island.
+ */
+export function divergingLayout(slot: Node, boundary: Element): [Element | null, Element] | null {
+  let paint = boundary
+  let owner = boundary.closest(SEGMENT)
+  let below: Element | null
+  for (;;) {
+    const key = owner && segmentKey(owner)
+    below = null
+    let layout = slot.parentElement?.closest(SEGMENT)
+    for (; layout && segmentKey(layout) !== key; layout = layout.parentElement?.closest(SEGMENT))
+      below = layout
+    if (layout || !owner) break
+    paint = owner
+    owner = owner.parentElement!.closest(SEGMENT)
+  }
+  return !boundary.closest('pnext-client') &&
+    !(below ?? slot).parentElement?.closest('pnext-client')
+    ? [below, paint]
+    : null
+}
+
+function childNodes(segment: Element): ChildNode[] | null {
+  const child = childSegment(segment)
+  if (child) return [child]
+  const range = pageSlotRange(segment)
+  return range && (range[1] ? [range[0], ...range[2], range[1]] : [range[0]])
+}
+
+/** Replace a kept layout's children (its child layout or page slot) with the incoming ones. */
+export function graftSegmentChildren(liveSegment: Element, incomingSegment: Element): boolean {
+  if (!childSegment(liveSegment) && !childSegment(incomingSegment))
+    return graftPageSlot(liveSegment, incomingSegment)
+  const live = childNodes(liveSegment)
+  const incoming = childNodes(incomingSegment)
+  if (!live || !incoming) return false
+  live[0]!.before(...incoming)
+  for (const stale of live) stale.remove()
+  return true
+}
+
 /**
  * Graft a destination page into a preserved layout without changing the destination's mount shape.
  * Client pages need the real `#pnext-page` element; server/island-only pages need the marker range.