@wular/pnext 0.1.3 → 0.1.5

package/src/client/router/hub.ts

@@ -14,24 +14,32 @@ import type { EntryModule } from './types'
 // region (install, soft nav, popstate), so it lives on one record: a module-level `let` can only be
 // reassigned inside the module that declares it. State only the runtime touches stays in ./runtime.
 
-export const routerState = {
-  // 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(),
+export const routerState: {
+  observedLocationKey: string
   // 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,
+  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: undefined as string | undefined,
+  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(),
 }
 
 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.