@timber-js/app 0.2.0-alpha.19 → 0.2.0-alpha.191

package/src/client/browser-entry/router-init.ts

@@ -0,0 +1,342 @@
+/**
+ * Router Initialization — creates the timber router with all dependencies.
+ *
+ * Wires up RouterDeps (fetch, history, scroll, RSC decoding, render
+ * callbacks) and optionally sets up Navigation API integration.
+ *
+ * See design/19-client-navigation.md §"Navigation API Integration"
+ */
+
+import { createElement } from 'react';
+import { createFromFetch } from '../../rsc-runtime/browser.js';
+import { PayloadRoot } from '../params-context.js';
+import { readPublishedParams, type ParamsSource } from '../../shared/payload-root.js';
+import { createRouter, setGlobalRouter } from '#client-internal';
+import type { RouterDeps, RouterInstance } from '#client-internal';
+import type { NavigationState } from '#client-internal';
+import { TimberNuqsAdapter } from '../nuqs-adapter.js';
+import {
+  NavigationProvider,
+  getNavigationState,
+  setNavigationState,
+} from '../navigation-context.js';
+import { transitionRender, navigateTransition } from '../navigation-root.js';
+import { SegmentUpdateContext, EMPTY_SEGMENT_UPDATES } from '../segment-update-context.js';
+import {
+  hasNavigationApi,
+  setupNavigationApi,
+  type NavigationApiController,
+} from '../navigation-api.js';
+import { getScrollY, scrollToHashTarget } from './scroll.js';
+
+export interface RouterInitOptions {
+  initialElement?: unknown;
+  /** The params the hydration payload published, beside `initialElement`. */
+  initialParams?: ParamsSource;
+  clientSegmentCache?: boolean;
+}
+
+export interface RouterInitResult {
+  router: RouterInstance;
+  navApiController: NavigationApiController | null;
+}
+
+/**
+ * Create and register the global timber router.
+ *
+ * Must be called before hydrateRoot so `useRouter()` works during
+ * the initial render (methods lazily resolve the router at invocation,
+ * not render time, but initRouter must still run first).
+ */
+export function createTimberRouter(options?: RouterInitOptions): RouterInitResult {
+  // Feature-detect Navigation API. When available, the navigate event
+  // replaces popstate for back/forward and catches external navigations.
+  // See design/19-client-navigation.md §"Navigation API Integration"
+  const useNavApi = hasNavigationApi();
+
+  // Track the current unwrapped RSC payload. On partial navigation, the
+  // router re-wraps this same element with new NavigationProvider context
+  // so mounted SegmentOutlets are preserved (they pick up changes via
+  // SegmentUpdateContext, not from new children props).
+  // Initialized from the hydration element so partial nav works on the
+  // very first client navigation (before any wrapPayload call).
+  let currentPayload: unknown = options?.initialElement ?? null;
+
+  // The params `currentPayload` is displayed with. Tracked beside it because
+  // the two render paths that do NOT receive a payload — a shallow search
+  // update and any re-wrap of the current tree — must republish the same
+  // record rather than dropping it. They are written together, in one place
+  // (`renderTree`), so they cannot come apart.
+  let currentParams: ParamsSource = options?.initialParams ?? readPublishedParams(undefined);
+
+  /**
+   * Build the client's wrapper chain around a tree. **The only place it is
+   * built.**
+   *
+   * Every render path goes through here — hydration builds the same chain in
+   * `hydrate.ts` against this shape, and a navigation, a shallow search
+   * update, a popstate replay and a revalidation all call this. That matters
+   * beyond tidiness: an element type present on one render and absent on the
+   * next changes the type at that position, so React unmounts and remounts
+   * everything below it, destroying the layout state partial navigation
+   * exists to preserve (caught by tests/e2e/segment-merge-navigation.test.ts
+   * when the params wrapper was conditional).
+   *
+   * `PayloadRoot` is *above* `currentPayload`, which on a partial navigation
+   * is the retained tree. That position is the whole design: it is the only
+   * provider a reader in a skipped layout can resolve to (TIM-1297).
+   *
+   * Pure — building the element does not make it the displayed one. Every
+   * caller pairs this with `publishTree` at the point the tree is actually
+   * handed to React, because a navigation builds its element before it is
+   * known to have won and a superseded one must leave `currentPayload`
+   * describing the route still on screen (TIM-1301).
+   */
+  function renderTree(
+    tree: unknown,
+    navState: NavigationState,
+    params: ParamsSource,
+    segmentUpdates?: Map<string, React.ReactNode>
+  ): React.ReactElement {
+    const withParams = createElement(PayloadRoot, { source: params }, tree as React.ReactNode);
+    const withNav = createElement(NavigationProvider, { value: navState }, withParams);
+    const withUpdates = createElement(
+      SegmentUpdateContext.Provider,
+      { value: segmentUpdates ?? EMPTY_SEGMENT_UPDATES },
+      withNav
+    );
+    return createElement(TimberNuqsAdapter, null, withUpdates);
+  }
+
+  /**
+   * Record the tree the client is now displaying, and the params published
+   * over it. Written together — the two paths that re-wrap without a fresh
+   * payload (a shallow search update, a partial navigation) read them back as
+   * a pair and would otherwise restore one route's tree with another's params.
+   */
+  function publishTree(tree: unknown, params: ParamsSource): void {
+    currentPayload = tree;
+    currentParams = params;
+  }
+
+  // ─── History API Patch ──────────────────────────────────────────
+  // Patch pushState/replaceState to detect external URL changes (nuqs
+  // shallow updates, replaceUrl, third-party libraries). When the router
+  // itself calls pushState/replaceState, it sets a flag so the patch
+  // skips the sync — the router already updates NavigationContext.
+  //
+  // On Navigation API browsers, the navigate event catches most URL
+  // changes. The patch is defense-in-depth and the primary mechanism
+  // for History API-only browsers (older Safari/Firefox).
+  const ROUTER_HISTORY_FLAG = Symbol.for('__timber_router_history_update');
+  const gFlags = globalThis as Record<symbol, boolean>;
+
+  const originalPushState = window.history.pushState.bind(window.history);
+  const originalReplaceState = window.history.replaceState.bind(window.history);
+
+  /**
+   * Sync NavigationContext.search after a shallow URL update. Called by
+   * the Navigation API shallow handler and the History API patch.
+   *
+   * @param search — the new search string. The Navigation API path passes
+   *   this from event.destination.url (window.location hasn't committed
+   *   yet when the navigate listener fires). The History API patch omits
+   *   it, reading window.location.search (already committed by the time
+   *   the patched pushState/replaceState returns).
+   *
+   * Bails when search is unchanged (scroll saves, no-ops, dual-fire).
+   * Re-wraps currentPayload with updated NavigationProvider and commits
+   * via transitionRender (startTransition — non-blocking).
+   */
+  function syncShallowSearch(search?: string): void {
+    const currentSearch = search ?? window.location.search;
+    const navState = getNavigationState();
+    if (currentSearch === navState.search) return;
+    if (!currentPayload) return;
+
+    // A shallow search update does not re-render the tree from the server, so
+    // the params are unchanged — but they are the client's to publish now, and
+    // this path rebuilds the whole chain. Republishing `currentParams` is what
+    // keeps a `?q=` change from silently clearing the route's params
+    // (TIM-1285's failure mode, on a path that used to be exempt from it
+    // because the record lived inside the payload).
+    const newNavState: NavigationState = {
+      pathname: navState.pathname,
+      search: currentSearch,
+    };
+    setNavigationState(newNavState);
+
+    publishTree(currentPayload, currentParams);
+    transitionRender(renderTree(currentPayload, newNavState, currentParams));
+  }
+
+  window.history.pushState = function (
+    data: unknown,
+    unused: string,
+    url?: string | URL | null
+  ): void {
+    originalPushState(data, unused, url);
+    if (!gFlags[ROUTER_HISTORY_FLAG]) {
+      syncShallowSearch();
+    }
+  };
+
+  window.history.replaceState = function (
+    data: unknown,
+    unused: string,
+    url?: string | URL | null
+  ): void {
+    originalReplaceState(data, unused, url);
+    if (!gFlags[ROUTER_HISTORY_FLAG]) {
+      syncShallowSearch();
+    }
+  };
+
+  const deps: RouterDeps = {
+    clientSegmentCache: options?.clientSegmentCache ?? false,
+    fetch: (url, init) => window.fetch(url, init),
+    pushState: (data, unused, url) => {
+      gFlags[ROUTER_HISTORY_FLAG] = true;
+      window.history.pushState(data, unused, url);
+      gFlags[ROUTER_HISTORY_FLAG] = false;
+    },
+    replaceState: (data, unused, url) => {
+      gFlags[ROUTER_HISTORY_FLAG] = true;
+      window.history.replaceState(data, unused, url);
+      gFlags[ROUTER_HISTORY_FLAG] = false;
+    },
+    navigationApiActive: useNavApi,
+    scrollTo: (x, y) => {
+      // Scroll the document viewport.
+      window.scrollTo(x, y);
+      document.documentElement.scrollTop = y;
+      document.body.scrollTop = y;
+      // Scroll any element explicitly marked as a scroll container.
+      // With segment tree merging, shared layouts (sidebars, nav bars)
+      // are reconciled in place via cloneElement — React preserves their
+      // DOM and scroll state naturally. We no longer auto-detect overflow
+      // containers, which previously found the wrong element (e.g.,
+      // scrolling a sidebar instead of the main content area).
+      // Use `data-timber-scroll-restoration` to opt in specific containers.
+      for (const el of document.querySelectorAll('[data-timber-scroll-restoration]')) {
+        (el as HTMLElement).scrollTop = y;
+      }
+    },
+    getCurrentUrl: () => window.location.pathname + window.location.search,
+    getScrollY,
+    scrollToHash: scrollToHashTarget,
+
+    decodeRsc: (fetchPromise: Promise<Response>) => {
+      return createFromFetch(fetchPromise);
+    },
+
+    // Render decoded RSC tree via NavigationRoot's state-based mechanism.
+    // Used for non-navigation renders (popstate cached replay, applyRevalidation).
+    // Wraps with NavigationProvider + TimberNuqsAdapter.
+    //
+    // For navigation renders (navigate, refresh, popstate-with-fetch),
+    // navigateTransition is used instead — it hands the destination tree to
+    // React in a transition so the departing page stays visible.
+    //
+    // navState is passed explicitly by the router — no temporal coupling
+    // with getNavigationState().
+    renderRoot: (element: unknown, navState: NavigationState, params: ParamsSource) => {
+      // These paths render what is already decided (a replay, a
+      // revalidation), so publishing here is the commit.
+      publishTree(element, params);
+      transitionRender(renderTree(element, navState, params));
+    },
+
+    // Hand a navigation's tree to React in a transition (navigation-root.tsx).
+    // The fetch runs outside any transition scope; only the state update that
+    // hands the tree over is wrapped, and in a synchronous `startTransition`.
+    // Do NOT make this callback's caller an async React action — see the
+    // entanglement note in `navigateTransition` (TIM-1306, TIM-1307).
+    //
+    // The perform callback receives a wrapPayload function that wraps the
+    // decoded RSC payload with NavigationProvider + NuqsAdapter. navState
+    // is passed explicitly by the router — no getNavigationState() needed.
+    navigateTransition: (url: string, perform) => {
+      return navigateTransition(url, async () => {
+        // What wrapPayload built, held until the transition wins. The client's
+        // record of the displayed tree is navigation state like any other, so
+        // it rides the same commit as the segment cache rather than being
+        // written as a side effect of building the element (TIM-1301).
+        let displayed: { tree: unknown; params: ParamsSource } | null = null;
+        const { element, decodePromise, commit } = await perform(
+          (
+            rawPayload: unknown,
+            navState: NavigationState,
+            params: ParamsSource,
+            segmentUpdates?: Map<string, unknown>
+          ) => {
+            displayed = { tree: rawPayload, params };
+            return renderTree(
+              rawPayload,
+              navState,
+              params,
+              segmentUpdates as Map<string, React.ReactNode> | undefined
+            );
+          }
+        );
+        return {
+          element: element as React.ReactNode,
+          decodePromise,
+          commit: () => {
+            if (displayed) publishTree(displayed.tree, displayed.params);
+            commit();
+          },
+        };
+      });
+    },
+
+    _getCurrentPayload: () => currentPayload,
+
+    // Schedule a callback after the next paint so scroll operations
+    // happen after React commits the new content to the DOM.
+    // Double-rAF ensures the browser has painted the new frame.
+    afterPaint: (callback: () => void) => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(callback);
+      });
+    },
+  };
+
+  const router = createRouter(deps);
+  setGlobalRouter(router);
+
+  // Set up Navigation API integration after router is created.
+  // The navigate event listener delegates to router.navigate and
+  // router.handlePopState for external navigations and traversals.
+  let navApiController: NavigationApiController | null = null;
+  if (useNavApi) {
+    navApiController = setupNavigationApi({
+      onExternalNavigate: async (url, { replace, signal, scroll, departingUrl }) => {
+        await router.navigate(url, {
+          replace,
+          scroll,
+          _signal: signal,
+          _skipHistory: true,
+          _departingUrl: departingUrl,
+        });
+      },
+      onTraverse: async (url, scrollY, signal) => {
+        // Back/forward — delegate to the router's popstate handler.
+        await router.handlePopState(url, scrollY, signal);
+      },
+      onShallowNavigate: (destinationUrl: string) => {
+        const search = new URL(destinationUrl).search;
+        syncShallowSearch(search);
+      },
+    });
+
+    // Wire the router-navigating flag into RouterDeps.
+    // This must be done after setupNavigationApi returns the controller.
+    deps.setRouterNavigating = (v) => navApiController!.setRouterNavigating(v);
+    deps.saveNavigationEntryScroll = (y) => navApiController!.saveScrollPosition(y);
+    deps.completeRouterNavigation = () => navApiController!.completeRouterNavigation();
+    deps.navigationNavigate = (url, replace) => navApiController!.navigate(url, replace);
+  }
+
+  return { router, navApiController };
+}

package/src/client/browser-entry/rsc-stream.ts

@@ -0,0 +1,166 @@
+/**
+ * RSC Stream Bootstrap — decodes the server-inlined RSC payload.
+ *
+ * The RSC payload is embedded in the HTML as progressive inline script
+ * tags that call `self.__timber_f.push([type, data])` as RSC chunks arrive.
+ * Typed tuples: [0] = bootstrap signal, [1, string] = Flight data chunk.
+ *
+ * This module sets up a ReadableStream fed by those push() calls so
+ * `createFromReadableStream` can decode the Flight protocol progressively.
+ *
+ * See design/18-build-system.md §"Entry Files"
+ */
+
+import { createFromReadableStream } from '../../rsc-runtime/browser.js';
+import { isPageUnloading } from '../unload-guard.js';
+import { splitPayloadRoot, type PublishedParams } from '../../shared/payload-root.js';
+
+type FlightSegment = [isBootstrap: 0] | [isData: 1, data: string];
+
+export interface RscStreamResult {
+  /** The decoded RSC element (thenable/lazy — resolved by React during render) */
+  element: unknown;
+  /**
+   * The params the same payload published beside that tree. A promise: the
+   * inlined Flight stream is still arriving when this runs, and hydration must
+   * not wait for it. `PayloadRoot` suspends on it at the position React was
+   * going to suspend on `element` anyway (TIM-1297).
+   */
+  params: Promise<PublishedParams>;
+}
+
+/**
+ * Create the RSC payload stream from server-inlined `__timber_f` chunks.
+ *
+ * Returns null if no RSC payload was inlined (e.g., JS-only client).
+ * When a payload exists, returns the decoded element for hydration.
+ */
+export function createRscPayloadStream(): RscStreamResult | null {
+  // __timber_f is initialized in <head> via flightInitScript() (see
+  // flight-scripts.ts). If it doesn't exist, skip Flight decoding
+  // entirely and fall through to the createRoot branch.
+  // Do NOT defensively create it here: that would cause
+  // createFromReadableStream to be called on an empty stream, producing
+  // a "Connection closed" error on hydration. See TIM-552.
+  const timberChunks = (self as unknown as Record<string, FlightSegment[] | undefined>).__timber_f;
+  if (!timberChunks) return null;
+
+  const encoder = new TextEncoder();
+
+  // Buffer to hold string data until the stream writer is ready.
+  // Scripts that execute before hydration starts push data here.
+  let dataBuffer: string[] | undefined = [];
+  let streamWriter: ReadableStreamDefaultController<Uint8Array> | null = null;
+  let streamFlushed = false;
+
+  /** Process a typed tuple from __timber_f. */
+  function handleSegment(seg: FlightSegment): void {
+    if (seg[0] === 0) {
+      // Bootstrap signal — initialize buffer (already done above)
+      if (!dataBuffer) dataBuffer = [];
+    } else if (seg[0] === 1) {
+      // Flight data chunk
+      if (streamWriter) {
+        streamWriter.enqueue(encoder.encode(seg[1]));
+      } else if (dataBuffer) {
+        dataBuffer.push(seg[1]);
+      }
+    }
+  }
+
+  // Process any chunks that arrived before this script executed.
+  for (const seg of timberChunks) {
+    handleSegment(seg);
+  }
+  // Clear the array to release memory.
+  timberChunks.length = 0;
+
+  // Patch push() so subsequent script tags feed data in real time.
+  (timberChunks as unknown as { push: (seg: FlightSegment) => void }).push = handleSegment;
+
+  const rscPayload = new ReadableStream<Uint8Array>({
+    start(controller) {
+      streamWriter = controller;
+      // Flush buffered data into the stream.
+      if (dataBuffer) {
+        for (const data of dataBuffer) {
+          controller.enqueue(encoder.encode(data));
+        }
+        dataBuffer = undefined;
+      }
+      // If DOM already loaded (non-streaming or fast page), close now.
+      if (streamFlushed) {
+        controller.close();
+      }
+    },
+  });
+
+  // Close the stream when the document finishes loading.
+  // DOMContentLoaded fires after the HTML parser has processed all
+  // inline scripts (including streamed Suspense replacements and
+  // RSC data), so all push() calls have completed by this point.
+  //
+  // If the page is unloading (user refreshed or navigated away),
+  // do NOT close the stream. When the connection drops mid-stream,
+  // DOMContentLoaded fires because the parser finishes. Closing an
+  // incomplete RSC stream causes React's Flight client to throw
+  // "Connection closed." — a jarring error on a page being replaced.
+  // Leaving the stream open is harmless: the page is being torn down.
+  function onDOMContentLoaded(): void {
+    if (isPageUnloading()) return;
+
+    // In dev mode, do NOT close the stream. React's RSC renderer
+    // includes debug owner/stack references ($1, $14, etc.) in the
+    // Flight payload that point to rows delivered through the debug
+    // channel, not the main Flight stream. The browser Flight client
+    // tracks these as pending chunks. Closing the stream with
+    // unresolved chunks triggers reportGlobalError("Connection closed")
+    // which kills the entire React tree.
+    //
+    // Leaving the stream open is harmless: React has already received
+    // all data rows and can hydrate fully. The pending debug chunks
+    // just remain unresolved (they're only used for React DevTools
+    // component stacks, not rendering).
+    //
+    // In production, debug rows are not emitted, so closing is safe.
+    if (process.env.NODE_ENV === 'development') {
+      // Mark as flushed so no more data is buffered, but don't close.
+      streamFlushed = true;
+      dataBuffer = undefined;
+      return;
+    }
+
+    if (streamWriter && !streamFlushed) {
+      streamWriter.close();
+      streamFlushed = true;
+      dataBuffer = undefined;
+    }
+    streamFlushed = true;
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', onDOMContentLoaded, false);
+  } else {
+    // DOM already parsed. All inline RSC <script> tags have already
+    // executed and pushed their data into the buffer. The buffer was
+    // flushed into the stream during start() above.
+    //
+    // Close via queueMicrotask rather than setTimeout. setTimeout
+    // defers to the next macrotask, which can race with React's
+    // Flight client read loop — if React finishes reading all queued
+    // chunks and issues a reader.read() that pends, the stream is
+    // NOT closed yet (setTimeout hasn't fired), so React sees an
+    // open stream and waits. Then setTimeout fires and closes it.
+    // This works in theory but some React Flight builds interpret
+    // a mid-read close as "Connection closed" rather than clean EOF.
+    // queueMicrotask fires at the end of the current microtask
+    // checkpoint — after start() and createFromReadableStream
+    // initialization but before any macrotask, giving React a
+    // consistent close signal. See TIM-524.
+    queueMicrotask(onDOMContentLoaded);
+  }
+
+  const { tree, params } = splitPayloadRoot(createFromReadableStream(rscPayload));
+  // The stream is a thenable, so the split is asynchronous on both halves.
+  return { element: tree, params: params as Promise<PublishedParams> };
+}

package/src/client/browser-entry/scroll.ts

@@ -0,0 +1,50 @@
+/**
+ * Scroll position helpers for the browser entry.
+ *
+ * Reads scroll position from the document viewport or explicitly marked
+ * `data-timber-scroll-restoration` containers.
+ *
+ * See design/19-client-navigation.md §"Overflow Scroll Containers".
+ */
+
+/**
+ * Read the current scroll position.
+ *
+ * Checks window scroll first, then explicit `data-timber-scroll-restoration`
+ * containers. With segment tree merging, shared layouts are reconciled in
+ * place via `cloneElement` — React preserves their DOM and scroll state
+ * naturally. We don't need to auto-detect overflow containers; only
+ * explicitly marked containers are tracked.
+ */
+/**
+ * Scroll the element matching a URL #fragment into view.
+ *
+ * Mirrors browser anchor behavior: looks up the decoded fragment by id,
+ * then by anchor name. Returns true when a matching element was found and
+ * scrolled; false otherwise (the router falls back to scroll-to-top, same
+ * as a full page load with an unknown fragment). See TIM-1035.
+ */
+export function scrollToHashTarget(hash: string): boolean {
+  const fragment = hash.startsWith('#') ? hash.slice(1) : hash;
+  if (!fragment) return false;
+  let id: string;
+  try {
+    id = decodeURIComponent(fragment);
+  } catch {
+    return false;
+  }
+  const target = document.getElementById(id) ?? document.getElementsByName(id)[0];
+  if (!target) return false;
+  target.scrollIntoView();
+  return true;
+}
+
+export function getScrollY(): number {
+  if (window.scrollY || document.documentElement.scrollTop || document.body.scrollTop) {
+    return window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
+  }
+  for (const el of document.querySelectorAll('[data-timber-scroll-restoration]')) {
+    if ((el as HTMLElement).scrollTop > 0) return (el as HTMLElement).scrollTop;
+  }
+  return 0;
+}