@storybook/tanstack-react 10.5.0 → 10.5.2

package/dist/_browser-chunks/{chunk-WQHJSC2D.js → chunk-4W5ZAMIP.js}

@@ -1,6 +1,6 @@
 import {
   normalizeFileRoutePath
-} from "./chunk-XKNIZ3MM.js";
+} from "./chunk-LTDGLEVR.js";
 import {
   __export
 } from "./chunk-4BE7D4DS.js";
@@ -28,7 +28,12 @@ import {
 } from "@tanstack/react-router";
 
 // src/routing/duplicate-tree.ts
-import { createRoute, RootRoute, createRootRouteWithContext } from "@tanstack/react-router";
+import {
+  createRoute,
+  RootRoute,
+  createRootRouteWithContext,
+  joinPaths
+} from "@tanstack/react-router";
 var MAX_PARENT_WALK = 50;
 function findRootRoute(route) {
   let current = route;
@@ -50,9 +55,9 @@ function initSourceTree(route, counter) {
       initSourceTree(child, counter);
 }
 function cloneChild(oldRoute, parent, overrides, byId) {
-  let options = oldRoute.options ?? {}, { id: _id, getParentRoute: _g, ...rest } = options, override = getOverrideFor(overrides, oldRoute.id), cloned = createRoute({
-    ...rest,
-    ...override,
+  let options = oldRoute.options ?? {}, { id: originalId, getParentRoute: _g, ...rest } = options, override = getOverrideFor(overrides, oldRoute.id), merged = { ...rest, ...override }, cloned = createRoute({
+    ...!merged.path && originalId != null ? { id: originalId } : {},
+    ...merged,
     getParentRoute: () => parent
   });
   byId.set(oldRoute.id, cloned);
@@ -81,6 +86,16 @@ function duplicateRouteTree(rootRoute, { overrides } = {}) {
   }
   return { root: newRoot, byId };
 }
+function mountPathFor(route) {
+  let segments = [], current = route;
+  for (let i = 0; i < MAX_PARENT_WALK && current; i += 1) {
+    let routePath = current.options?.path;
+    routePath && routePath !== "/" && segments.unshift(routePath);
+    let getParent = current.options?.getParentRoute;
+    current = typeof getParent == "function" ? getParent() : void 0;
+  }
+  return joinPaths(["/", ...segments]);
+}
 function resolveStoryLeaf(tree, { path, boundRouteId }) {
   let { root, byId } = tree;
   if (path) {
@@ -134,7 +149,7 @@ function createStoryRouter({
   context,
   routerContext
 }) {
-  let routerParameters = context.parameters.tanstack?.router ?? {}, { tree, leaf } = resolveTree(Story, context), routeTree = tree.root, inferredPath = routerParameters?.path || leaf.fullPath || (leaf.id ? normalizeFileRoutePath(leaf.id) : void 0) || routeTree.children?.[0]?.fullPath || "/", resolvedPath = interpolatePath({
+  let routerParameters = context.parameters.tanstack?.router ?? {}, { tree, leaf } = resolveTree(Story, context), routeTree = tree.root, inferredPath = routerParameters?.path || leaf.fullPath || (leaf.id ? normalizeFileRoutePath(leaf.id) : void 0) || mountPathFor(leaf), resolvedPath = interpolatePath({
     path: inferredPath,
     params: routerParameters?.params ?? {}
   }).interpolatedPath, search = routerParameters?.query ? defaultStringifySearch(routerParameters.query) : "";
@@ -154,6 +169,24 @@ function createStoryRouter({
     context: routerContext
   });
 }
+function ensureMatchableLeaf(tree, leaf) {
+  if (!(leaf !== tree.root && !leaf.options?.path && leaf.options?.id != null))
+    return leaf;
+  let existingIndexChild = (leaf.children ?? []).find(
+    (child) => child.options?.path === "/"
+  );
+  if (existingIndexChild)
+    return existingIndexChild;
+  let syntheticLeaf = createRoute2({
+    path: "/",
+    component: () => null,
+    getParentRoute: () => leaf
+  });
+  return leaf.addChildren([
+    ...leaf.children ?? [],
+    syntheticLeaf
+  ]), syntheticLeaf;
+}
 function injectStoryComponent(leaf, Story, overrides, leafId) {
   let userOverride = overrides?.[leafId];
   userOverride && "component" in userOverride && userOverride.component !== void 0 || leaf.update({ component: () => React.createElement(Story, null) });
@@ -165,7 +198,9 @@ function resolveTree(Story, context) {
       path: routerParameters.path,
       boundRouteId: resolvedRoute && resolvedRoute !== rootRoute ? resolvedRoute.id : void 0
     });
-    return injectStoryComponent(leaf, Story, routeOverrides, leaf.id), { tree, leaf };
+    injectStoryComponent(leaf, Story, routeOverrides, leaf.id);
+    let renderLeaf = ensureMatchableLeaf(tree, leaf);
+    return { tree, leaf: renderLeaf };
   }
   if (isRoute(routerParameterRoute)) {
     let syntheticRoot2 = createRootRoute(
@@ -173,7 +208,9 @@ function resolveTree(Story, context) {
     );
     routerParameterRoute.update({ getParentRoute: () => syntheticRoot2 }), syntheticRoot2.addChildren([routerParameterRoute]);
     let tree = duplicateRouteTree(syntheticRoot2, { overrides: routeOverrides }), leaf = tree.byId.get(routerParameterRoute.id) ?? tree.root;
-    return injectStoryComponent(leaf, Story, routeOverrides, leaf.id), { tree, leaf };
+    injectStoryComponent(leaf, Story, routeOverrides, leaf.id);
+    let renderLeaf = ensureMatchableLeaf(tree, leaf);
+    return { tree, leaf: renderLeaf };
   }
   let plainOptions = routerParameterRoute ?? {}, {
     path: plainRoutePath,

package/dist/_browser-chunks/{chunk-XKNIZ3MM.js → chunk-LTDGLEVR.js}

@@ -13,7 +13,15 @@ function removeUnderscores(s) {
 function normalizeFileRoutePath(path) {
   return removeGroups(removeUnderscores(removeLayoutSegments(path)) ?? "") || "/";
 }
+function isPathlessSegment(segment) {
+  return segment.startsWith("_") || segment.startsWith("(") && segment.endsWith(")");
+}
+function isPathlessFileRouteId(id) {
+  let segments = id.split("/").filter(Boolean), lastSegment = segments[segments.length - 1];
+  return lastSegment != null && isPathlessSegment(lastSegment);
+}
 
 export {
-  normalizeFileRoutePath
+  normalizeFileRoutePath,
+  isPathlessFileRouteId
 };

package/dist/export-mocks/react-router.js

@@ -1,6 +1,7 @@
 import {
+  isPathlessFileRouteId,
   normalizeFileRoutePath
-} from "../_browser-chunks/chunk-XKNIZ3MM.js";
+} from "../_browser-chunks/chunk-LTDGLEVR.js";
 import {
   onNavigate
 } from "../_browser-chunks/chunk-4CKCBIXI.js";
@@ -51,17 +52,20 @@ var useNavigate = fn(_useNavigate).mockName("@tanstack/react-router::useNavigate
   );
 };
 function createFileRoute(path) {
-  let normalizedPath = normalizeFileRoutePath(path);
-  return (options) => createRoute({
-    path: normalizedPath,
-    ...options,
-    isRoot: !1
-  }).update({
-    id: path,
-    path: normalizedPath,
-    fullPath: normalizedPath
-    // any because tanstack router does that
-  });
+  return (options) => {
+    let pathless = isPathlessFileRouteId(path) && options?.path == null, routePath = options?.path ?? normalizeFileRoutePath(path);
+    return createRoute({
+      ...pathless ? { id: path } : { path: routePath },
+      ...options,
+      isRoot: !1
+    }).update({
+      // routeTree.gen re-updates these later; set them here so route files
+      // imported without the generated tree still carry their identity
+      id: path,
+      ...pathless ? {} : { path: routePath, fullPath: routePath }
+      // any because tanstack router does that
+    });
+  };
 }
 export {
   Link,

package/dist/export-mocks/start.d.ts

@@ -108,6 +108,10 @@ declare const Link: ({ to, children, ...props }: {
 declare const Navigate: ({ to }: {
     to: string;
 }) => null;
+declare const Hydrate: ({ children }: {
+    children?: React.ReactNode;
+    [key: string]: unknown;
+}) => string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null;
 declare const notFound: () => never;
 declare const createStart: () => {};
 declare const clearCookieStore: () => void;
@@ -117,4 +121,4 @@ declare const _default: {
     fetch: () => Promise<Response>;
 };
 
-export { HEADERS, Link, Navigate, StartServer, VIRTUAL_MODULES, attachRouterServerSsrUtils, clearCookieStore, clearResponseHeaders, clearSession, createRequestHandler, createServerFn, createStart, createStartHandler, _default as default, defaultRenderHandler, defaultStreamHandler, defineHandlerCallback, deleteCookie, fetchHandler as fetch, getCookie, getCookies, getRequest, getRequestHeader, getRequestHeaders, getRequestHost, getRequestIP, getRequestProtocol, getRequestUrl, getResponse, getResponseHeader, getResponseHeaders, getResponseStatus, getSession, getValidatedQuery, notFound, removeResponseHeader, requestHandler, sealSession, setCookie, setResponseHeader, setResponseHeaders, setResponseStatus, transformPipeableStreamWithRouter, transformReadableStreamWithRouter, unsealSession, updateSession, useServerFn, useSession };
+export { HEADERS, Hydrate, Link, Navigate, StartServer, VIRTUAL_MODULES, attachRouterServerSsrUtils, clearCookieStore, clearResponseHeaders, clearSession, createRequestHandler, createServerFn, createStart, createStartHandler, _default as default, defaultRenderHandler, defaultStreamHandler, defineHandlerCallback, deleteCookie, fetchHandler as fetch, getCookie, getCookies, getRequest, getRequestHeader, getRequestHeaders, getRequestHost, getRequestIP, getRequestProtocol, getRequestUrl, getResponse, getResponseHeader, getResponseHeaders, getResponseStatus, getSession, getValidatedQuery, notFound, removeResponseHeader, requestHandler, sealSession, setCookie, setResponseHeader, setResponseHeaders, setResponseStatus, transformPipeableStreamWithRouter, transformReadableStreamWithRouter, unsealSession, updateSession, useServerFn, useSession };

package/dist/export-mocks/start.js

@@ -262,7 +262,7 @@ function useServerFn(serverFn) {
 }
 function createMockServerFnBuilder() {
   let builder = () => createMockServerFnBuilder(), _storedOptions;
-  return builder.options = (opts) => (_storedOptions = opts, builder), builder.middleware = () => createMockServerFnBuilder(), builder.inputValidator = () => createMockServerFnBuilder(), builder.handler = (handlerFn) => {
+  return builder.options = (opts) => (_storedOptions = opts, builder), builder.middleware = () => createMockServerFnBuilder(), builder.inputValidator = () => createMockServerFnBuilder(), builder.validator = () => createMockServerFnBuilder(), builder.handler = (handlerFn) => {
     let mock = fn().mockName("@tanstack/start-client-core::createServerFn.handler()");
     return handlerFn && mock.mockImplementation(async (opts) => handlerFn(opts)), mock;
   }, builder._getOptions = () => _storedOptions, builder;
@@ -276,7 +276,7 @@ var createServerFn = (options) => {
   ...props
 }) => React.createElement("a", { href: to, ...props }, children), Navigate = ({ to }) => (React.useEffect(() => {
   onNavigate({ to });
-}, [to]), null), notFound = () => {
+}, [to]), null), Hydrate = ({ children }) => children ?? null, notFound = () => {
   throw new Error("Not found");
 }, createStart = () => ({}), clientCookieStore = /* @__PURE__ */ new Map(), clearCookieStore = () => {
   clientCookieStore.clear();
@@ -284,6 +284,7 @@ var createServerFn = (options) => {
 var start_default = { fetch: fetchHandler };
 export {
   HEADERS,
+  Hydrate,
   Link,
   Navigate,
   StartServer,

package/dist/index.js

@@ -1,7 +1,7 @@
 import {
   preview_exports
-} from "./_browser-chunks/chunk-WQHJSC2D.js";
-import "./_browser-chunks/chunk-XKNIZ3MM.js";
+} from "./_browser-chunks/chunk-4W5ZAMIP.js";
+import "./_browser-chunks/chunk-LTDGLEVR.js";
 import "./_browser-chunks/chunk-4BE7D4DS.js";
 
 // src/index.ts

package/dist/node/index.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_0p8wnllw6x9 from 'node:url';
-import CJS_COMPAT_NODE_PATH_0p8wnllw6x9 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_0p8wnllw6x9 from "node:module";
+import CJS_COMPAT_NODE_URL_zl58m7drvbc from 'node:url';
+import CJS_COMPAT_NODE_PATH_zl58m7drvbc from 'node:path';
+import CJS_COMPAT_NODE_MODULE_zl58m7drvbc from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_0p8wnllw6x9.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_0p8wnllw6x9.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_0p8wnllw6x9.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_zl58m7drvbc.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_zl58m7drvbc.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_zl58m7drvbc.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration

package/dist/preset.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_0p8wnllw6x9 from 'node:url';
-import CJS_COMPAT_NODE_PATH_0p8wnllw6x9 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_0p8wnllw6x9 from "node:module";
+import CJS_COMPAT_NODE_URL_zl58m7drvbc from 'node:url';
+import CJS_COMPAT_NODE_PATH_zl58m7drvbc from 'node:path';
+import CJS_COMPAT_NODE_MODULE_zl58m7drvbc from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_0p8wnllw6x9.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_0p8wnllw6x9.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_0p8wnllw6x9.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_zl58m7drvbc.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_zl58m7drvbc.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_zl58m7drvbc.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -31,7 +31,7 @@ var dirname = function(p) {
 import { viteFinal as reactViteFinal } from "@storybook/react-vite/preset";
 
 // src/plugins/server-code-elimination.ts
-import { transformSync, types as t } from "storybook/internal/babel";
+import { types as t, transformSync } from "storybook/internal/babel";
 var SERVER_FN_RE = /\bcreateServerFn\b/, MIDDLEWARE_RE = /\bcreateMiddleware\b/, ISOMORPHIC_FN_RE = /\bcreateIsomorphicFn\b/, SERVER_ONLY_FN_RE = /\bcreateServerOnlyFn\b/, CLIENT_ONLY_FN_RE = /\bcreateClientOnlyFn\b/, ROUTE_FACTORY_RE = /\b(createFileRoute|createRootRoute|createRootRouteWithContext|createRoute)\b/, ROUTE_FACTORIES = /* @__PURE__ */ new Set([
   "createFileRoute",
   "createRootRoute",
@@ -215,12 +215,21 @@ function stripServerOption(options) {
     return (t.isIdentifier(key) ? key.name : void 0) !== "server";
   }), options.properties.length !== initialLength;
 }
+function getJsxRootIdentifier(name) {
+  for (; t.isJSXMemberExpression(name); )
+    name = name.object;
+  return t.isJSXIdentifier(name) ? name : null;
+}
 function collectReferencedIdentifiers(programPath) {
   let referenced = /* @__PURE__ */ new Set();
   return programPath.traverse({
     enter(path2) {
       let { node } = path2;
       !t.isIdentifier(node) || path2.isBindingIdentifier() || path2.findParent((p) => p.isImportDeclaration()) || referenced.add(node.name);
+    },
+    JSXOpeningElement(path2) {
+      let root = getJsxRootIdentifier(path2.node.name);
+      root && referenced.add(root.name);
     }
   }), referenced;
 }

package/dist/preview.js

@@ -3,8 +3,8 @@ import {
   loaders,
   optimizeDeps,
   parameters
-} from "./_browser-chunks/chunk-WQHJSC2D.js";
-import "./_browser-chunks/chunk-XKNIZ3MM.js";
+} from "./_browser-chunks/chunk-4W5ZAMIP.js";
+import "./_browser-chunks/chunk-LTDGLEVR.js";
 import "./_browser-chunks/chunk-4BE7D4DS.js";
 export {
   applyDecorators,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/tanstack-react",
-  "version": "10.5.0",
+  "version": "10.5.2",
   "description": "Storybook for TanStack (React, Vite): Router and Start ready Storybook framework",
   "keywords": [
     "storybook",
@@ -75,9 +75,9 @@
     "!src/**/*"
   ],
   "dependencies": {
-    "@storybook/builder-vite": "10.5.0",
-    "@storybook/react": "10.5.0",
-    "@storybook/react-vite": "10.5.0"
+    "@storybook/builder-vite": "10.5.2",
+    "@storybook/react": "10.5.2",
+    "@storybook/react-vite": "10.5.2"
   },
   "devDependencies": {
     "@tanstack/react-router": "^1.168.10",
@@ -95,7 +95,7 @@
     "@tanstack/start-client-core": "^1.167.9",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "storybook": "^10.5.0",
+    "storybook": "^10.5.2",
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
   },
   "peerDependenciesMeta": {

package/template/stories/PathlessLayout.stories.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/tanstack-react';
+
+import { Outlet, createRootRoute, createRoute } from '@tanstack/react-router';
+import { expect, fn, within } from 'storybook/test';
+
+// Regression coverage for pathless layout routes (`_authed`-style underscore
+// files and `(group)` directories). The layout must render and its
+// `beforeLoad` must run, while contributing nothing to the URL: the story
+// mounts at `/dashboard`, not `/_authed/dashboard`.
+
+function LeafContent() {
+  return <p data-testid="pathless-leaf">leaf rendered under a pathless layout</p>;
+}
+
+const onBeforeLoad = fn();
+
+const RootRoute = createRootRoute({
+  component: () => (
+    <div data-testid="pathless-root">
+      <h1>root layout</h1>
+      <Outlet />
+    </div>
+  ),
+});
+
+const PathlessLayout = createRoute({
+  id: 'authed',
+  getParentRoute: () => RootRoute,
+  beforeLoad: onBeforeLoad,
+  component: () => (
+    <section data-testid="pathless-layout">
+      <Outlet />
+    </section>
+  ),
+});
+
+const DashboardRoute = createRoute({
+  path: '/dashboard',
+  getParentRoute: () => PathlessLayout,
+  component: LeafContent,
+});
+
+PathlessLayout.addChildren([DashboardRoute]);
+
+// Regression coverage for a pathless layout nested under a pathful ancestor
+// (e.g. `/products/_authed`): the layout's mount URL must be inferred from
+// its pathful ancestor, not just '/'.
+
+const onNestedBeforeLoad = fn();
+
+function ProductsLayout() {
+  return (
+    <div data-testid="products-layout">
+      <Outlet />
+    </div>
+  );
+}
+
+const ProductsRoute = createRoute({
+  path: '/products',
+  getParentRoute: () => RootRoute,
+  component: ProductsLayout,
+});
+
+const NestedPathlessLayout = createRoute({
+  id: 'nested-authed',
+  getParentRoute: () => ProductsRoute,
+  beforeLoad: onNestedBeforeLoad,
+  component: () => (
+    <section data-testid="nested-pathless-layout">
+      <Outlet />
+    </section>
+  ),
+});
+
+const NestedSettingsRoute = createRoute({
+  path: '/settings',
+  getParentRoute: () => NestedPathlessLayout,
+  component: LeafContent,
+});
+
+NestedPathlessLayout.addChildren([NestedSettingsRoute]);
+ProductsRoute.addChildren([NestedPathlessLayout]);
+
+// A single `addChildren` call per parent: it replaces (not appends to) the
+// children array, so `RootRoute`'s two top-level branches must be registered
+// together.
+RootRoute.addChildren([PathlessLayout, ProductsRoute]);
+
+const meta = {
+  component: LeafContent,
+  parameters: { layout: 'fullscreen' },
+} satisfies Meta<typeof LeafContent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** The leaf mounts at the layout-free URL, with every ancestor layout rendered. */
+export const RendersLeafThroughPathlessLayout: Story = {
+  parameters: {
+    tanstack: { router: { route: DashboardRoute, path: '/dashboard' } },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByTestId('pathless-root')).toBeInTheDocument();
+    await expect(canvas.getByTestId('pathless-layout')).toBeInTheDocument();
+    await expect(canvas.getByTestId('pathless-leaf')).toBeInTheDocument();
+    await expect(onBeforeLoad).toHaveBeenCalled();
+  },
+};
+
+/** Binding the layout route itself (no path) mounts the story at the layout's position. */
+export const BoundDirectlyToPathlessLayout: Story = {
+  parameters: {
+    tanstack: { router: { route: PathlessLayout } },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // injectStoryComponent replaces the layout's own `component` with the
+    // story's render (LeafContent), so `pathless-layout` itself is gone —
+    // assert the root layout plus the leaf content that now renders in its place.
+    await expect(canvas.getByTestId('pathless-root')).toBeInTheDocument();
+    await expect(canvas.getByTestId('pathless-leaf')).toBeInTheDocument();
+  },
+};
+
+/**
+ * A pathless layout nested under a pathful ancestor (`/products`). Binding
+ * the story directly to the nested layout must mount it at `/products`
+ * (inferred from the ancestor's path), with the root and the `/products`
+ * ancestor both rendered around the story's own content.
+ */
+export const BoundDirectlyToNestedPathlessLayout: Story = {
+  parameters: {
+    tanstack: { router: { route: NestedPathlessLayout } },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByTestId('pathless-root')).toBeInTheDocument();
+    await expect(canvas.getByTestId('products-layout')).toBeInTheDocument();
+    // injectStoryComponent replaces the nested layout's own `component`, so
+    // `nested-pathless-layout` itself is gone — assert the leaf content that
+    // now renders in its place instead.
+    await expect(canvas.getByTestId('pathless-leaf')).toBeInTheDocument();
+    await expect(onNestedBeforeLoad).toHaveBeenCalled();
+  },
+};