@tyndall/react 0.0.1 → 0.0.3

package/README.md

@@ -7,6 +7,10 @@ React adapter package that implements UIAdapter contracts, routing integration,
 - Provide React-based rendering adapter, factory, and registry
 - Provide client router and navigation components
 - Integrate route payload transitions and head updates
+- Provide `_app` wrapper support and pass `{ Component, pageProps, routeData, routeId }` to App components
+- Expose `RouteDataProvider` and `useRouteData` for consuming route data maps
+- Provide `useBlockRouting` and navigation blocker hooks for client transitions and `beforeunload`
+- Support `router.softReload()` and scroll restoration during client-side transitions
 - Coordinate hydration lifecycle markers and mounted-state guards for payload-driven navigation
 - Guard dev runtime generation changes with controlled dispose/re-initialize flow to avoid mixed React hook dispatcher states during HMR
 - Compose nested layout trees when route metadata supplies `layoutFiles`

package/dist/adapter.d.ts

@@ -1,16 +1,25 @@
+import React from "react";
 import type { HmrIntegration, RouteGraph, UIAdapter, UIAdapterEntryContext, UIAdapterRenderContext, UIAdapterRenderResult } from "@tyndall/core";
 export interface ReactAdapterOptions {
     name?: string;
     createClientEntry?: (ctx: UIAdapterEntryContext) => string;
     createServerEntry?: (ctx: UIAdapterEntryContext) => string;
     renderToHtml?: (ctx: UIAdapterRenderContext) => Promise<UIAdapterRenderResult> | UIAdapterRenderResult;
-    render?: (ctx: UIAdapterRenderContext) => Promise<unknown> | unknown;
+    render?: (ctx: UIAdapterRenderContext) => Promise<React.ReactElement | null> | React.ReactElement | null;
     getHead?: UIAdapter["getHead"];
     hmrIntegration?: HmrIntegration;
     routeGraph?: RouteGraph;
     nestedLayouts?: boolean;
     rootDir?: string;
     routeRoot?: string;
+    appModule?: string;
+    appComponent?: React.ComponentType<AppComponentProps>;
+}
+export interface AppComponentProps {
+    Component: React.ComponentType<Record<string, unknown>>;
+    pageProps: Record<string, unknown>;
+    routeData: Record<string, unknown>;
+    routeId: string;
 }
 export declare const createReactAdapter: (options?: ReactAdapterOptions) => UIAdapter;
 //# sourceMappingURL=adapter.d.ts.map

package/dist/adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"adapter.d.ts","sourceRoot":"","sources":["../src/adapter.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,cAAc,EACd,UAAU,EACV,SAAS,EACT,qBAAqB,EACrB,sBAAsB,EACtB,qBAAqB,EACtB,MAAM,eAAe,CAAC;AAIvB,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,qBAAqB,KAAK,MAAM,CAAC;IAC3D,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,qBAAqB,KAAK,MAAM,CAAC;IAC3D,YAAY,CAAC,EAAE,CACb,GAAG,EAAE,sBAAsB,KACxB,OAAO,CAAC,qBAAqB,CAAC,GAAG,qBAAqB,CAAC;IAC5D,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,sBAAsB,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;IACrE,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAizBD,eAAO,MAAM,kBAAkB,GAAI,UAAS,mBAAwB,KAAG,SAQrE,CAAC"}
+{"version":3,"file":"adapter.d.ts","sourceRoot":"","sources":["../src/adapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EACV,cAAc,EACd,UAAU,EACV,SAAS,EACT,qBAAqB,EACrB,sBAAsB,EACtB,qBAAqB,EACtB,MAAM,eAAe,CAAC;AAKvB,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,qBAAqB,KAAK,MAAM,CAAC;IAC3D,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,qBAAqB,KAAK,MAAM,CAAC;IAC3D,YAAY,CAAC,EAAE,CACb,GAAG,EAAE,sBAAsB,KACxB,OAAO,CAAC,qBAAqB,CAAC,GAAG,qBAAqB,CAAC;IAC5D,MAAM,CAAC,EAAE,CACP,GAAG,EAAE,sBAAsB,KACxB,OAAO,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IACpE,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;CACvD;AAMD,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACxD,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,OAAO,EAAE,MAAM,CAAC;CACjB;AAiiCD,eAAO,MAAM,kBAAkB,GAAI,UAAS,mBAAwB,KAAG,SAQrE,CAAC"}

package/dist/adapter.js

@@ -3,8 +3,13 @@ import { createRequire } from "node:module";
 import { join, relative, sep } from "node:path";
 import { mergeHeadDescriptors, serializeProps } from "@tyndall/core";
 import { collectHeadFromTree } from "./head.js";
+import { RouteDataProvider } from "./route-data.js";
 const REACT_ELEMENT = Symbol.for("react.element");
 const REACT_TRANSITIONAL_ELEMENT = Symbol.for("react.transitional.element");
+const REACT_FRAGMENT = Symbol.for("react.fragment");
+const REACT_PROVIDER = Symbol.for("react.provider");
+const REACT_MEMO = Symbol.for("react.memo");
+const REACT_FORWARD_REF = Symbol.for("react.forward_ref");
 const HEAD_ELEMENT = Symbol.for("hyper.head");
 const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 const isElementLike = (value) => isRecord(value) &&
@@ -54,6 +59,30 @@ const renderElementToString = (node) => {
     if (isHeadMarker(node)) {
         return "";
     }
+    if (node.type === REACT_FRAGMENT) {
+        return renderElementToString(node.props.children);
+    }
+    if (isRecord(node.type) && node.type.$$typeof === REACT_PROVIDER) {
+        return renderElementToString(node.props.children);
+    }
+    if (isRecord(node.type) && node.type.$$typeof === REACT_MEMO) {
+        const innerType = node.type.type;
+        if (typeof innerType === "function") {
+            return renderElementToString(innerType(node.props));
+        }
+        if (typeof innerType === "string") {
+            return renderElementToString({ ...node, type: innerType });
+        }
+        return "";
+    }
+    if (isRecord(node.type) && node.type.$$typeof === REACT_FORWARD_REF) {
+        const render = node.type
+            .render;
+        if (typeof render === "function") {
+            return renderElementToString(render(node.props, null));
+        }
+        return "";
+    }
     if (typeof node.type === "function") {
         return renderElementToString(node.type(node.props));
     }
@@ -75,12 +104,7 @@ const resolveReactDomServer = async () => {
 const renderWithFallback = async (element) => {
     const reactDomServer = await resolveReactDomServer();
     if (reactDomServer?.renderToString) {
-        try {
-            return reactDomServer.renderToString(element);
-        }
-        catch {
-            // Fall back when custom markers (e.g., <Head>) are not React-renderable.
-        }
+        return reactDomServer.renderToString(element);
     }
     // Fallback renderer keeps local tests/dev flows working without react-dom.
     return renderElementToString(element);
@@ -91,6 +115,11 @@ const resolvePageImport = (ctx) => {
     const specifier = typeof pageModule === "string" ? pageModule : "./page";
     return JSON.stringify(specifier);
 };
+const resolveAppImport = (ctx) => {
+    const options = ctx.uiOptions ?? ctx.adapterOptions;
+    const appModule = options?.appModule;
+    return typeof appModule === "string" && appModule.length > 0 ? appModule : null;
+};
 const resolveHydrationMode = (ctx) => {
     const options = ctx.uiOptions ?? ctx.adapterOptions;
     return options?.hydration === "islands" ? "islands" : "full";
@@ -103,6 +132,13 @@ const resolveClientRenderMode = (ctx) => {
     const options = ctx.uiOptions ?? ctx.adapterOptions;
     return options?.clientRenderMode === "module" ? "module" : "payload";
 };
+const resolveScrollRestoration = (ctx) => {
+    const options = ctx.uiOptions ?? ctx.adapterOptions;
+    if (options && "scrollRestoration" in options) {
+        return options.scrollRestoration !== false;
+    }
+    return true;
+};
 const resolveClientRouteModules = (ctx) => {
     const options = ctx.uiOptions ?? ctx.adapterOptions;
     const raw = options?.clientRouteModules;
@@ -137,8 +173,8 @@ const resolveLayoutFilesForRoute = (routeGraph, routeId) => {
     const route = findRouteRecord(routeGraph, routeId);
     return route?.layoutFiles ?? [];
 };
-const resolveLayoutModulePath = (layoutFile, rootDir, routeRoot) => {
-    if (!rootDir || !routeRoot) {
+const resolveLayoutModulePath = (layoutFile, rootDir, routeRoot, preferRouteRoot) => {
+    if (!preferRouteRoot || !rootDir || !routeRoot) {
         return layoutFile;
     }
     const relativePath = relative(rootDir, layoutFile);
@@ -168,8 +204,18 @@ const resolveLayoutSpecifiersForRoute = (ctx, routeId) => {
     if (layoutFiles.length === 0) {
         return [];
     }
+    const preferRouteRoot = typeof ctx.routeId === "string" && ctx.routeId === routeId;
     return layoutFiles.map((layoutFile) => {
-        const modulePath = resolveLayoutModulePath(layoutFile, ctx.rootDir, ctx.routeRoot);
+        const modulePath = resolveLayoutModulePath(layoutFile, ctx.rootDir, ctx.routeRoot, preferRouteRoot);
+        return toImportSpecifier(ctx.entryDir ?? "", modulePath);
+    });
+};
+const resolveLayoutSpecifiersForEntry = (ctx, layoutFiles) => {
+    if (!ctx.entryDir || !layoutFiles || layoutFiles.length === 0) {
+        return [];
+    }
+    return layoutFiles.map((layoutFile) => {
+        const modulePath = resolveLayoutModulePath(layoutFile, ctx.rootDir, ctx.routeRoot, true);
         return toImportSpecifier(ctx.entryDir ?? "", modulePath);
     });
 };
@@ -195,6 +241,7 @@ const buildClientRouteLayoutLoaderSource = (layoutModules) => {
     };
 };
 const layoutComponentCache = new Map();
+const appComponentCache = new Map();
 const extractLayoutComponent = (loaded) => {
     if (loaded && typeof loaded === "object" && "default" in loaded) {
         const candidate = loaded.default;
@@ -207,8 +254,28 @@ const extractLayoutComponent = (loaded) => {
     }
     return null;
 };
+const extractAppComponent = (loaded) => {
+    if (loaded && typeof loaded === "object") {
+        if ("default" in loaded) {
+            const candidate = loaded.default;
+            if (typeof candidate === "function") {
+                return candidate;
+            }
+        }
+        if ("App" in loaded) {
+            const candidate = loaded.App;
+            if (typeof candidate === "function") {
+                return candidate;
+            }
+        }
+    }
+    if (typeof loaded === "function") {
+        return loaded;
+    }
+    return null;
+};
 const loadLayoutComponent = async (layoutFile, options) => {
-    const modulePath = resolveLayoutModulePath(layoutFile, options.rootDir, options.routeRoot);
+    const modulePath = resolveLayoutModulePath(layoutFile, options.rootDir, options.routeRoot, true);
     const cacheKey = `${options.routeRoot ?? ""}::${modulePath}`;
     if (layoutComponentCache.has(cacheKey)) {
         return layoutComponentCache.get(cacheKey);
@@ -233,6 +300,40 @@ const loadLayoutComponent = async (layoutFile, options) => {
         }
     }
 };
+const loadAppComponent = async (modulePath) => {
+    if (appComponentCache.has(modulePath)) {
+        return appComponentCache.get(modulePath);
+    }
+    try {
+        const moduleUrl = toFileUrl(modulePath);
+        const loaded = await import(moduleUrl);
+        const component = extractAppComponent(loaded);
+        appComponentCache.set(modulePath, component);
+        return component;
+    }
+    catch {
+        try {
+            const require = createRequire(import.meta.url);
+            const loaded = require(modulePath);
+            const component = extractAppComponent(loaded);
+            appComponentCache.set(modulePath, component);
+            return component;
+        }
+        catch {
+            return null;
+        }
+    }
+};
+const resolveAppComponentForRender = async (options) => {
+    if (typeof options.appComponent === "function") {
+        return options.appComponent;
+    }
+    if (!options.appModule) {
+        return null;
+    }
+    const loaded = await loadAppComponent(options.appModule);
+    return typeof loaded === "function" ? loaded : null;
+};
 const resolveLayoutComponentsForRender = async (routeId, options) => {
     if (!resolveNestedLayoutsEnabled(options)) {
         return [];
@@ -271,9 +372,11 @@ const buildClientRouteModuleLoaderSource = (modules) => {
 };
 const defaultClientEntry = (ctx) => {
     const pageImport = resolvePageImport(ctx);
+    const appImport = resolveAppImport(ctx);
     const hydrationMode = JSON.stringify(resolveHydrationMode(ctx));
     const navigationMode = JSON.stringify(resolveNavigationMode(ctx));
     const clientRenderMode = JSON.stringify(resolveClientRenderMode(ctx));
+    const scrollRestoration = JSON.stringify(resolveScrollRestoration(ctx));
     const routeGraph = JSON.stringify(ctx.routeGraph ?? { routes: [] });
     const entryRouteId = JSON.stringify(typeof ctx.routeId === "string" ? ctx.routeId : "");
     const routeModules = resolveClientRouteModules(ctx);
@@ -288,25 +391,49 @@ const defaultClientEntry = (ctx) => {
         : {};
     const routeLayoutLoaders = buildClientRouteLayoutLoaderSource(routeLayoutModules);
     const entryLayoutSpecifiers = nestedLayoutsEnabled && typeof ctx.routeId === "string"
-        ? resolveLayoutSpecifiersForRoute(ctx, ctx.routeId)
+        ? ctx.entryLayoutFiles && ctx.entryLayoutFiles.length > 0
+            ? resolveLayoutSpecifiersForEntry(ctx, ctx.entryLayoutFiles)
+            : resolveLayoutSpecifiersForRoute(ctx, ctx.routeId)
         : [];
     const entryLayoutImports = entryLayoutSpecifiers.map((specifier, index) => `import EntryLayout${index} from ${JSON.stringify(specifier)};`);
     const entryLayoutRefs = entryLayoutSpecifiers.map((_specifier, index) => `EntryLayout${index}`);
     const entryLayoutArray = entryLayoutRefs.length > 0 ? `[${entryLayoutRefs.join(", ")}]` : "[]";
+    const appImportSource = appImport ? `import * as AppModule from ${JSON.stringify(appImport)};` : "";
+    const appResolverSource = appImport
+        ? [
+            "const resolveAppComponent = (module) => {",
+            "  if (!module || typeof module !== \"object\") {",
+            "    return null;",
+            "  }",
+            "  if (typeof module.default === \"function\") {",
+            "    return module.default;",
+            "  }",
+            "  if (typeof module.App === \"function\") {",
+            "    return module.App;",
+            "  }",
+            "  return null;",
+            "};",
+            "const AppComponent = resolveAppComponent(AppModule);",
+        ]
+        : ["const AppComponent = null;"];
     return [
         "import React from \"react\";",
         "import { createRoot, hydrateRoot } from \"react-dom/client\";",
         "import {",
         "  RouterProvider,",
+        "  RouteDataProvider,",
         "  createClientRouteModuleResolver,",
         "  createRouter,",
         "  installRouterIslands,",
         "} from \"@tyndall/react\";",
         `import Page from ${pageImport};`,
+        ...(appImportSource ? [appImportSource] : []),
         ...entryLayoutImports,
         ...routeModuleLoaders.declarations,
         ...routeLayoutLoaders.declarations,
+        ...appResolverSource,
         "const ROUTE_PAYLOAD_EVENT = \"hyper:route-payload-applied\";",
+        "const ROUTE_DATA_EVENT = \"hyper:route-data-applied\";",
         "const HYDRATED_EVENT = \"hyper:hydrated\";",
         "const container = document.getElementById(\"app\");",
         "const readPropsPayload = () => {",
@@ -320,7 +447,20 @@ const defaultClientEntry = (ctx) => {
         "    return {};",
         "  }",
         "};",
+        "const readRouteDataPayload = () => {",
+        "  const dataEl = document.getElementById(\"__HYPER_ROUTE_DATA__\");",
+        "  if (!dataEl?.textContent) {",
+        "    return {};",
+        "  }",
+        "  try {",
+        "    return JSON.parse(dataEl.textContent);",
+        "  } catch {",
+        "    return {};",
+        "  }",
+        "};",
         "let props = readPropsPayload();",
+        "let routeData = readRouteDataPayload();",
+        "window.__HYPER_ROUTE_DATA__ = routeData;",
         `const entryRouteId = ${entryRouteId};`,
         "const runtimeModuleUrl = (() => {",
         "  try {",
@@ -346,6 +486,7 @@ const defaultClientEntry = (ctx) => {
         `const routeGraph = ${routeGraph};`,
         `const navigationMode = ${navigationMode};`,
         `const clientRenderMode = ${clientRenderMode};`,
+        `const scrollRestoration = ${scrollRestoration};`,
         `let routeModuleLoaders = ${routeModuleLoaders.objectLiteral};`,
         "window.__HYPER_CLIENT_ROUTE_MODULES__ = routeModuleLoaders;",
         `let routeLayoutLoaders = ${routeLayoutLoaders.objectLiteral};`,
@@ -360,6 +501,7 @@ const defaultClientEntry = (ctx) => {
         "      routeGraph,",
         "      navigationMode,",
         "      clientRenderMode,",
+        "      scrollRestoration,",
         "      resolveClientRouteModule: routeModuleResolver,",
         "    });",
         "if (!runtimeAlreadyInitialized) {",
@@ -387,6 +529,7 @@ const defaultClientEntry = (ctx) => {
         "}",
         "let activeLayouts = routeEntryLayouts[entryRouteId] ?? [];",
         "let activeProps = props;",
+        "let activeRouteData = routeData;",
         "let root = null;",
         "const runtimeDisposers = [];",
         "const registerRuntimeDisposer = (dispose) => {",
@@ -427,9 +570,22 @@ const defaultClientEntry = (ctx) => {
         "  if (!container || hydration === \"islands\") {",
         "    return;",
         "  }",
+        "  const routeId = typeof window.__HYPER_ROUTE_ID__ === \"string\"",
+        "    ? window.__HYPER_ROUTE_ID__",
+        "    : container.getAttribute(\"data-hyper-route\") || entryRouteId;",
+        "  const RoutedPage = (pageProps) => applyLayouts(activePage, pageProps, activeLayouts);",
+        "  const appTree = AppComponent",
+        "    ? React.createElement(AppComponent, {",
+        "        Component: RoutedPage,",
+        "        pageProps: activeProps,",
+        "        routeData: activeRouteData,",
+        "        routeId,",
+        "      })",
+        "    : React.createElement(RoutedPage, activeProps);",
         "  const element = React.createElement(",
-        "    RouterProvider,",
-        "    { router, children: applyLayouts(activePage, activeProps, activeLayouts) }",
+        "    RouteDataProvider,",
+        "    { value: activeRouteData },",
+        "    React.createElement(RouterProvider, { router, children: appTree })",
         "  );",
         "  if (root && typeof root.render === \"function\") {",
         "    window.__HYPER_CLIENT_APP_MOUNTED__ = true;",
@@ -509,6 +665,7 @@ const defaultClientEntry = (ctx) => {
         "  activePage = nextPage;",
         "  activeLayouts = nextLayouts;",
         "  activeProps = readPropsPayload();",
+        "  activeRouteData = readRouteDataPayload();",
         "  renderActivePage(false);",
         "};",
         "const applyRuntimeUpdate = (next) => {",
@@ -628,6 +785,10 @@ const defaultClientEntry = (ctx) => {
         "      : window.__HYPER_ROUTE_ID__;",
         "    void rerenderRoute(routeId);",
         "  };",
+        "  const onRouteDataApplied = () => {",
+        "    activeRouteData = readRouteDataPayload();",
+        "    renderActivePage(false);",
+        "  };",
         "  const onPopState = () => {",
         "    deferRouteSync(syncRouteFromDom);",
         "  };",
@@ -643,6 +804,7 @@ const defaultClientEntry = (ctx) => {
         "  patchHistoryForRouteSync();",
         "  renderActivePage(true);",
         "  addRuntimeListener(window, ROUTE_PAYLOAD_EVENT, onRoutePayloadApplied);",
+        "  addRuntimeListener(window, ROUTE_DATA_EVENT, onRouteDataApplied);",
         "  addRuntimeListener(window, \"popstate\", onPopState);",
         "} else if (runtimeAlreadyInitialized) {",
         "  const rerenderRuntime = window.__HYPER_CLIENT_RUNTIME_RERENDER__;",
@@ -657,6 +819,7 @@ const defaultClientEntry = (ctx) => {
 };
 const defaultServerEntry = (ctx) => {
     const pageImport = resolvePageImport(ctx);
+    const appImport = resolveAppImport(ctx);
     const hydrationMode = JSON.stringify(resolveHydrationMode(ctx));
     const adapterOptions = (ctx.uiOptions ?? ctx.adapterOptions);
     const nestedLayoutsEnabled = resolveNestedLayoutsEnabled(adapterOptions);
@@ -666,48 +829,94 @@ const defaultServerEntry = (ctx) => {
     const layoutImports = layoutSpecifiers.map((specifier, index) => `import Layout${index} from ${JSON.stringify(specifier)};`);
     const layoutRefs = layoutSpecifiers.map((_specifier, index) => `Layout${index}`);
     const layoutArray = layoutRefs.length > 0 ? `[${layoutRefs.join(", ")}]` : "[]";
+    const appImportSource = appImport ? `import * as AppModule from ${JSON.stringify(appImport)};` : "";
+    const appResolverSource = appImport
+        ? [
+            "const resolveAppComponent = (module) => {",
+            "  if (!module || typeof module !== \"object\") {",
+            "    return null;",
+            "  }",
+            "  if (typeof module.default === \"function\") {",
+            "    return module.default;",
+            "  }",
+            "  if (typeof module.App === \"function\") {",
+            "    return module.App;",
+            "  }",
+            "  return null;",
+            "};",
+            "const AppComponent = resolveAppComponent(AppModule);",
+        ]
+        : ["const AppComponent = null;"];
     return [
         "import React from \"react\";",
         "import { renderToString, renderToPipeableStream } from \"react-dom/server\";",
         "import { PassThrough } from \"stream\";",
-        "import { collectHeadFromTree } from \"@tyndall/react\";",
+        "import { collectHeadFromTree, RouteDataProvider } from \"@tyndall/react\";",
         `import Page from ${pageImport};`,
+        ...(appImportSource ? [appImportSource] : []),
         ...layoutImports,
+        ...appResolverSource,
         `export const hydration = ${hydrationMode};`,
         "export const renderToHtml = async (ctx) => {",
-        "  let element = React.createElement(Page, ctx.props);",
         `  const layouts = ${layoutArray};`,
-        "  if (Array.isArray(layouts) && layouts.length > 0) {",
-        "    for (let i = layouts.length - 1; i >= 0; i -= 1) {",
-        "      const Layout = layouts[i];",
-        "      if (typeof Layout === \"function\") {",
-        "        element = React.createElement(Layout, { ...ctx.props, children: element });",
+        "  const createRoutedTree = (pageProps) => {",
+        "    let element = React.createElement(Page, pageProps);",
+        "    if (Array.isArray(layouts) && layouts.length > 0) {",
+        "      for (let i = layouts.length - 1; i >= 0; i -= 1) {",
+        "        const Layout = layouts[i];",
+        "        if (typeof Layout === \"function\") {",
+        "          element = React.createElement(Layout, { ...pageProps, children: element });",
+        "        }",
         "      }",
         "    }",
-        "  }",
-        "  const html = renderToString(element);",
-        "  const head = collectHeadFromTree(element);",
+        "    return element;",
+        "  };",
+        "  const routedElement = createRoutedTree(ctx.props);",
+        "  const appTree = AppComponent",
+        "    ? React.createElement(AppComponent, {",
+        "        Component: createRoutedTree,",
+        "        pageProps: ctx.props,",
+        "        routeData: ctx.routeData ?? {},",
+        "        routeId: ctx.routeId,",
+        "      })",
+        "    : routedElement;",
+        "  const tree = React.createElement(RouteDataProvider, { value: ctx.routeData ?? {} }, appTree);",
+        "  const html = renderToString(tree);",
+        "  const head = collectHeadFromTree(tree);",
         "  return { html, head };",
         "};",
         "export const renderToStream = async (ctx) => {",
         "  if (typeof renderToPipeableStream !== \"function\") {",
         "    return null;",
         "  }",
-        "  let element = React.createElement(Page, ctx.props);",
         `  const layouts = ${layoutArray};`,
-        "  if (Array.isArray(layouts) && layouts.length > 0) {",
-        "    for (let i = layouts.length - 1; i >= 0; i -= 1) {",
-        "      const Layout = layouts[i];",
-        "      if (typeof Layout === \"function\") {",
-        "        element = React.createElement(Layout, { ...ctx.props, children: element });",
+        "  const createRoutedTree = (pageProps) => {",
+        "    let element = React.createElement(Page, pageProps);",
+        "    if (Array.isArray(layouts) && layouts.length > 0) {",
+        "      for (let i = layouts.length - 1; i >= 0; i -= 1) {",
+        "        const Layout = layouts[i];",
+        "        if (typeof Layout === \"function\") {",
+        "          element = React.createElement(Layout, { ...pageProps, children: element });",
+        "        }",
         "      }",
         "    }",
-        "  }",
-        "  const head = collectHeadFromTree(element);",
+        "    return element;",
+        "  };",
+        "  const routedElement = createRoutedTree(ctx.props);",
+        "  const appTree = AppComponent",
+        "    ? React.createElement(AppComponent, {",
+        "        Component: createRoutedTree,",
+        "        pageProps: ctx.props,",
+        "        routeData: ctx.routeData ?? {},",
+        "        routeId: ctx.routeId,",
+        "      })",
+        "    : routedElement;",
+        "  const tree = React.createElement(RouteDataProvider, { value: ctx.routeData ?? {} }, appTree);",
+        "  const head = collectHeadFromTree(tree);",
         "  return await new Promise((resolve, reject) => {",
         "    let didError = false;",
         "    const stream = new PassThrough();",
-        "    const { pipe, abort } = renderToPipeableStream(element, {",
+        "    const { pipe, abort } = renderToPipeableStream(tree, {",
         "      onShellReady() {",
         "        pipe(stream);",
         "        resolve({ stream, head, abort });",
@@ -733,8 +942,19 @@ const defaultRenderToHtml = async (ctx, options) => {
     const element = await options.render(ctx);
     const layouts = await resolveLayoutComponentsForRender(ctx.routeId, options);
     const composed = layouts.length > 0 ? applyLayoutsToElement(element, ctx.props, layouts) : element;
-    const html = await renderWithFallback(composed);
-    const collected = collectHeadFromTree(composed);
+    const appComponent = await resolveAppComponentForRender(options);
+    const RoutedPage = () => composed;
+    const appTree = appComponent
+        ? React.createElement(appComponent, {
+            Component: RoutedPage,
+            pageProps: ctx.props,
+            routeData: ctx.routeData ?? {},
+            routeId: ctx.routeId,
+        })
+        : composed;
+    const tree = React.createElement(RouteDataProvider, { value: ctx.routeData ?? {} }, appTree);
+    const html = await renderWithFallback(tree);
+    const collected = collectHeadFromTree(tree);
     const provided = options.getHead?.(ctx);
     const head = mergeHeadDescriptors(provided ?? {}, collected);
     return { html, head };

package/dist/hooks.d.ts

@@ -0,0 +1,2 @@
+export declare const useBlockRouting: (enabled: boolean, message?: string) => void;
+//# sourceMappingURL=hooks.d.ts.map

package/dist/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,GAAI,SAAS,OAAO,EAAE,UAAU,MAAM,KAAG,IA8BpE,CAAC"}

package/dist/hooks.js

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from "react";
+import { getRouter } from "./router.js";
+export const useBlockRouting = (enabled, message) => {
+    const messageRef = useRef(message);
+    messageRef.current = message;
+    useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        const router = getRouter();
+        const blocker = () => messageRef.current ?? "";
+        const unblock = router.block(blocker);
+        const handleBeforeUnload = (event) => {
+            const text = messageRef.current ?? "";
+            if (!text) {
+                return;
+            }
+            event.preventDefault();
+            event.returnValue = text;
+        };
+        if (typeof window !== "undefined") {
+            window.addEventListener("beforeunload", handleBeforeUnload);
+        }
+        return () => {
+            unblock();
+            if (typeof window !== "undefined") {
+                window.removeEventListener("beforeunload", handleBeforeUnload);
+            }
+        };
+    }, [enabled]);
+};

package/dist/index.d.ts

@@ -1,10 +1,13 @@
 export { createReactAdapter } from "./adapter.js";
-export type { ReactAdapterOptions } from "./adapter.js";
+export type { AppComponentProps, ReactAdapterOptions } from "./adapter.js";
 export { createReactUiAdapterFactory, createReactAdapterRegistry } from "./registry.js";
 export { Link, Head, RouterProvider } from "./components.js";
 export type { LinkProps, HeadProps, RouterProviderProps, ElementLike } from "./components.js";
+export { RouteDataProvider, useRouteData } from "./route-data.js";
+export type { RouteDataMap } from "./route-data.js";
 export { createRouter, getRouter, useRouter } from "./router.js";
-export type { ClientRenderMode, ClientRouteModule, ClientRouteModuleContext, ClientRouteModuleLoader, ClientRouteModuleLoaderMap, ClientRouteModuleResolver, ClientRouteModuleResolverContext, ClientRouteRenderResult, DynamicManifestEnvelope, DynamicManifestRenderer, DynamicManifestResolver, HydrationMode, NavigationMode, RenderPolicy, RoutePayload, RoutePayloadApplier, RoutePayloadResolver, Router, RouterOptions, RouterQuery, } from "./router.js";
+export { useBlockRouting } from "./hooks.js";
+export type { ClientRenderMode, ClientRouteModule, ClientRouteModuleContext, ClientRouteModuleLoader, ClientRouteModuleLoaderMap, ClientRouteModuleResolver, ClientRouteModuleResolverContext, ClientRouteRenderResult, DynamicManifestEnvelope, DynamicManifestRenderer, DynamicManifestResolver, HydrationMode, NavigationMode, NavigationBlockContext, NavigationBlocker, RenderPolicy, RoutePayload, RouteRedirectPayload, RoutePayloadApplier, RoutePayloadResolver, Router, RouterOptions, RouterQuery, } from "./router.js";
 export { createClientRouteModuleResolver } from "./router.js";
 export { installRouterIslands } from "./islands.js";
 export { collectHeadFromTree } from "./head.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,2BAA2B,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAExF,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC7D,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9F,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACjE,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,wBAAwB,EACxB,uBAAuB,EACvB,0BAA0B,EAC1B,yBAAyB,EACzB,gCAAgC,EAChC,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,aAAa,EACb,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,oBAAoB,EACpB,MAAM,EACN,aAAa,EACb,WAAW,GACZ,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EACL,0BAA0B,EAC1B,6BAA6B,GAC9B,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EACV,oBAAoB,EACpB,yBAAyB,EACzB,2BAA2B,EAC3B,8BAA8B,GAC/B,MAAM,uBAAuB,CAAC;AAE/B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClD,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAC3E,OAAO,EAAE,2BAA2B,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAExF,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC7D,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9F,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAClE,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,wBAAwB,EACxB,uBAAuB,EACvB,0BAA0B,EAC1B,yBAAyB,EACzB,gCAAgC,EAChC,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,EACpB,MAAM,EACN,aAAa,EACb,WAAW,GACZ,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EACL,0BAA0B,EAC1B,6BAA6B,GAC9B,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EACV,oBAAoB,EACpB,yBAAyB,EACzB,2BAA2B,EAC3B,8BAA8B,GAC/B,MAAM,uBAAuB,CAAC;AAE/B,cAAc,YAAY,CAAC"}

package/dist/index.js

@@ -1,7 +1,9 @@
 export { createReactAdapter } from "./adapter.js";
 export { createReactUiAdapterFactory, createReactAdapterRegistry } from "./registry.js";
 export { Link, Head, RouterProvider } from "./components.js";
+export { RouteDataProvider, useRouteData } from "./route-data.js";
 export { createRouter, getRouter, useRouter } from "./router.js";
+export { useBlockRouting } from "./hooks.js";
 export { createClientRouteModuleResolver } from "./router.js";
 export { installRouterIslands } from "./islands.js";
 export { collectHeadFromTree } from "./head.js";

package/dist/registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAkB,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAWzF,eAAO,MAAM,2BAA2B,QAAO,gBAiB9C,CAAC;AAEF,eAAO,MAAM,0BAA0B,QAAO,iBAE5C,CAAC"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA8B,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAiBrG,eAAO,MAAM,2BAA2B,QAAO,gBAwB9C,CAAC;AAEF,eAAO,MAAM,0BAA0B,QAAO,iBAE5C,CAAC"}

package/dist/registry.js

@@ -1,3 +1,4 @@
+import { createElement } from "react";
 import { createReactAdapter } from "./adapter.js";
 const isFunction = (value) => typeof value === "function";
 export const createReactUiAdapterFactory = () => (options) => {
@@ -9,8 +10,14 @@ export const createReactUiAdapterFactory = () => (options) => {
         ? normalized.routeHead
         : undefined;
     return createReactAdapter({
-        render: routeRender ? ({ props }) => routeRender(props) : undefined,
+        render: routeRender ? ({ props }) => createElement(routeRender, props) : undefined,
         getHead: routeHead ? ({ props }) => routeHead(props) : undefined,
+        routeGraph: normalized.routeGraph,
+        rootDir: normalized.rootDir,
+        routeRoot: normalized.routeRoot,
+        nestedLayouts: normalized.nestedLayouts,
+        appModule: typeof normalized.appModule === "string" ? normalized.appModule : undefined,
+        appComponent: typeof normalized.appComponent === "function" ? normalized.appComponent : undefined,
     });
 };
 export const createReactAdapterRegistry = () => ({

package/dist/route-data.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export type RouteDataMap = Record<string, unknown>;
+export declare const RouteDataProvider: React.Provider<RouteDataMap>;
+export declare const useRouteData: () => RouteDataMap;
+//# sourceMappingURL=route-data.d.ts.map

package/dist/route-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"route-data.d.ts","sourceRoot":"","sources":["../src/route-data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAInD,eAAO,MAAM,iBAAiB,8BAA4B,CAAC;AAE3D,eAAO,MAAM,YAAY,QAAO,YAAkD,CAAC"}