@storybook/tanstack-react 10.5.0-alpha.3 → 10.5.0-alpha.5

package/dist/_browser-chunks/{chunk-73EPJ7AY.js → chunk-WQHJSC2D.js}

@@ -1,3 +1,6 @@
+import {
+  normalizeFileRoutePath
+} from "./chunk-XKNIZ3MM.js";
 import {
   __export
 } from "./chunk-4BE7D4DS.js";
@@ -131,7 +134,7 @@ function createStoryRouter({
   context,
   routerContext
 }) {
-  let routerParameters = context.parameters.tanstack?.router ?? {}, { tree, leaf } = resolveTree(Story, context), routeTree = tree.root, inferredPath = routerParameters?.path || leaf.fullPath || 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) || routeTree.children?.[0]?.fullPath || "/", resolvedPath = interpolatePath({
     path: inferredPath,
     params: routerParameters?.params ?? {}
   }).interpolatedPath, search = routerParameters?.query ? defaultStringifySearch(routerParameters.query) : "";
@@ -172,12 +175,17 @@ function resolveTree(Story, context) {
     let tree = duplicateRouteTree(syntheticRoot2, { overrides: routeOverrides }), leaf = tree.byId.get(routerParameterRoute.id) ?? tree.root;
     return injectStoryComponent(leaf, Story, routeOverrides, leaf.id), { tree, leaf };
   }
-  let plainOptions = routerParameterRoute ?? {}, syntheticRoot = createRootRoute(
+  let plainOptions = routerParameterRoute ?? {}, {
+    path: plainRoutePath,
+    id: plainRouteId,
+    ...plainRouteRest
+  } = plainOptions, syntheticRouteId = plainRoutePath ? void 0 : plainRouteId ?? "storybook-story", syntheticRoot = createRootRoute(
     routeOverrides?.__root__ ?? {}
   ), syntheticChild = createRoute2({
     component: () => React.createElement(Story, null),
-    id: "storybook-story",
-    ...plainOptions,
+    id: syntheticRouteId,
+    path: plainRoutePath,
+    ...plainRouteRest,
     getParentRoute: () => syntheticRoot
   });
   return syntheticRoot.addChildren([syntheticChild]), injectStoryComponent(syntheticChild, Story, routeOverrides, syntheticChild.id), {

package/dist/_browser-chunks/chunk-XKNIZ3MM.js

@@ -0,0 +1,19 @@
+// src/routing/path-utils.ts
+var possiblyNestedRouteGroupPatternRegex = /\([^/]+\)\/?/g;
+function removeGroups(s) {
+  return s.replace(possiblyNestedRouteGroupPatternRegex, "");
+}
+function removeLayoutSegments(routePath = "/") {
+  return routePath.split("/").filter((segment) => !segment.startsWith("_")).join("/");
+}
+var underscoreStartEndRegex = /(^_|_$)/gi, underscoreSlashRegex = /(\/_|_\/)/gi;
+function removeUnderscores(s) {
+  return s?.replace(underscoreStartEndRegex, "").replace(underscoreSlashRegex, "/");
+}
+function normalizeFileRoutePath(path) {
+  return removeGroups(removeUnderscores(removeLayoutSegments(path)) ?? "") || "/";
+}
+
+export {
+  normalizeFileRoutePath
+};

package/dist/export-mocks/react-router.d.ts

@@ -325,7 +325,6 @@ declare const useLoaderDeps: Mock<typeof useLoaderDeps$1>;
 declare const useRouteContext: Mock<typeof useRouteContext$1>;
 declare const useCanGoBack: Mock<typeof useCanGoBack$1>;
 declare const useLinkProps: Mock<typeof useLinkProps$1>;
-declare const Outlet: () => null;
 declare const Navigate: typeof Navigate$1;
 declare const Link: ({ to, children, ...props }: {
     to: string;
@@ -341,4 +340,4 @@ declare const Link: ({ to, children, ...props }: {
  */
 declare function createFileRoute(path: string): (options: any) => _tanstack_react_router.Route<unknown, _tanstack_router_core.AnyRoute, "/", "/" | `/${any}/`, string, "/" | `/${any}/`, undefined, _tanstack_router_core.ResolveParams<"/">, _tanstack_router_core.AnyContext, _tanstack_router_core.AnyContext, _tanstack_router_core.AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>;
 
-export { Link, Navigate, Outlet, createFileRoute, useBlocker, useCanGoBack, useLinkProps, useLoaderData, useLoaderDeps, useLocation, useNavigate, useParams, useRouteContext, useRouter, useRouterState, useSearch };
+export { Link, Navigate, createFileRoute, useBlocker, useCanGoBack, useLinkProps, useLoaderData, useLoaderDeps, useLocation, useNavigate, useParams, useRouteContext, useRouter, useRouterState, useSearch };

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

@@ -1,3 +1,6 @@
+import {
+  normalizeFileRoutePath
+} from "../_browser-chunks/chunk-XKNIZ3MM.js";
 import {
   onNavigate
 } from "../_browser-chunks/chunk-4CKCBIXI.js";
@@ -27,7 +30,7 @@ var useNavigate = fn(_useNavigate).mockName("@tanstack/react-router::useNavigate
   "@tanstack/react-router::useRouterState"
 ), useLoaderData = fn(_useLoaderData).mockName("@tanstack/react-router::useLoaderData"), useLoaderDeps = fn(_useLoaderDeps).mockName("@tanstack/react-router::useLoaderDeps"), useRouteContext = fn(_useRouteContext).mockName(
   "@tanstack/react-router::useRouteContext"
-), useCanGoBack = fn(_useCanGoBack).mockName("@tanstack/react-router::useCanGoBack"), useLinkProps = fn(_useLinkProps).mockName("@tanstack/react-router::useLinkProps"), Outlet = () => null, Navigate = ({ to, href }) => (useEffect(() => {
+), useCanGoBack = fn(_useCanGoBack).mockName("@tanstack/react-router::useCanGoBack"), useLinkProps = fn(_useLinkProps).mockName("@tanstack/react-router::useLinkProps"), Navigate = ({ to, href }) => (useEffect(() => {
   onNavigate({ to: to || href });
 }, [to, href]), null), Link = ({
   to,
@@ -48,21 +51,21 @@ var useNavigate = fn(_useNavigate).mockName("@tanstack/react-router::useNavigate
   );
 };
 function createFileRoute(path) {
+  let normalizedPath = normalizeFileRoutePath(path);
   return (options) => createRoute({
-    path,
+    path: normalizedPath,
     ...options,
     isRoot: !1
   }).update({
     id: path,
-    path,
-    fullPath: path
+    path: normalizedPath,
+    fullPath: normalizedPath
     // any because tanstack router does that
   });
 }
 export {
   Link,
   Navigate,
-  Outlet,
   createFileRoute,
   useBlocker,
   useCanGoBack,

package/dist/index.d.ts

@@ -370,4 +370,4 @@ interface TanStackPreview<T extends AddonTypes, TRoute extends AnyRoute | undefi
     }>;
 }
 
-export { type CreateStoryRouteOptions, type DefaultStoryPath, type FrameworkOptions, type IsRoute, type Meta, type Preview, type RouterParameters, type StoryObj, type StoryRouteFileOptions, type StoryRouteOptions, type StorybookConfig, type TanStackParameters, type TanStackPreviewOptions, type TanStackTypes, definePreview };
+export { type CreateStoryRouteOptions, type DefaultStoryPath, type FrameworkOptions, type IsRoute, type Meta, type Preview, type RouterParameters, type StoryObj, type StoryRouteFileOptions, type StoryRouteOptions, type StorybookConfig, type TanStackParameters, type TanStackPreview, type TanStackPreviewOptions, type TanStackTypes, definePreview };

package/dist/index.js

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

package/dist/node/index.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_0nhffdv299qa from 'node:url';
-import CJS_COMPAT_NODE_PATH_0nhffdv299qa from 'node:path';
-import CJS_COMPAT_NODE_MODULE_0nhffdv299qa from "node:module";
+import CJS_COMPAT_NODE_URL_axsjtcsu0p5 from 'node:url';
+import CJS_COMPAT_NODE_PATH_axsjtcsu0p5 from 'node:path';
+import CJS_COMPAT_NODE_MODULE_axsjtcsu0p5 from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_0nhffdv299qa.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_0nhffdv299qa.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_0nhffdv299qa.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_axsjtcsu0p5.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_axsjtcsu0p5.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_axsjtcsu0p5.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_0nhffdv299qa from 'node:url';
-import CJS_COMPAT_NODE_PATH_0nhffdv299qa from 'node:path';
-import CJS_COMPAT_NODE_MODULE_0nhffdv299qa from "node:module";
+import CJS_COMPAT_NODE_URL_axsjtcsu0p5 from 'node:url';
+import CJS_COMPAT_NODE_PATH_axsjtcsu0p5 from 'node:path';
+import CJS_COMPAT_NODE_MODULE_axsjtcsu0p5 from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_0nhffdv299qa.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_0nhffdv299qa.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_0nhffdv299qa.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_axsjtcsu0p5.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_axsjtcsu0p5.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_axsjtcsu0p5.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration

package/dist/preview.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/tanstack-react",
-  "version": "10.5.0-alpha.3",
+  "version": "10.5.0-alpha.5",
   "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-alpha.3",
-    "@storybook/react": "10.5.0-alpha.3",
-    "@storybook/react-vite": "10.5.0-alpha.3"
+    "@storybook/builder-vite": "10.5.0-alpha.5",
+    "@storybook/react": "10.5.0-alpha.5",
+    "@storybook/react-vite": "10.5.0-alpha.5"
   },
   "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-alpha.3",
+    "storybook": "^10.5.0-alpha.5",
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
   },
   "peerDependenciesMeta": {

package/template/cli/ts/Button.stories.ts

@@ -14,7 +14,7 @@ const meta = {
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  // More on argTypes: https://storybook.js.org/docs/api/arg-types
   argTypes: {
     backgroundColor: { control: 'color' },
   },

package/template/stories/Outlet.stories.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/tanstack-react';
+
+import { Outlet, createRootRoute, createRoute } from '@tanstack/react-router';
+import { expect, within } from 'storybook/test';
+
+// Regression coverage for https://github.com/storybookjs/storybook/issues/35007
+// `@tanstack/react-router`'s `Outlet` used to be mocked as `() => null`, which
+// silently swallowed any leaf content rendered inside a root layout. These
+// stories assert that both the root layout and the leaf content render.
+
+function LeafContent() {
+  return <p data-testid="tanstack-outlet-leaf">leaf rendered inside root outlet</p>;
+}
+
+const RootRoute = createRootRoute({
+  component: () => (
+    <div data-testid="tanstack-outlet-root">
+      <h1>root layout</h1>
+      <Outlet />
+    </div>
+  ),
+});
+
+const LeafRoute = createRoute({
+  getParentRoute: () => RootRoute,
+  path: '/',
+  component: LeafContent,
+});
+
+RootRoute.addChildren([LeafRoute]);
+
+const meta = {
+  component: LeafContent,
+  parameters: { layout: 'fullscreen' },
+} satisfies Meta<typeof LeafContent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Passing the leaf `Route` should render it inside the root layout's `<Outlet />`. */
+export const RendersLeafInsideRootOutlet: Story = {
+  parameters: {
+    tanstack: { router: { route: LeafRoute } },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByTestId('tanstack-outlet-root')).toBeInTheDocument();
+    await expect(
+      canvas.getByRole('heading', { level: 1, name: 'root layout' })
+    ).toBeInTheDocument();
+    await expect(canvas.getByTestId('tanstack-outlet-leaf')).toBeInTheDocument();
+  },
+};
+
+/** Passing the whole route tree plus an explicit `path` resolves through the same outlet. */
+export const RendersLeafViaRouteTreePath: Story = {
+  parameters: {
+    tanstack: {
+      router: { route: RootRoute, path: '/' },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByTestId('tanstack-outlet-root')).toBeInTheDocument();
+    await expect(
+      canvas.getByRole('heading', { level: 1, name: 'root layout' })
+    ).toBeInTheDocument();
+    await expect(canvas.getByTestId('tanstack-outlet-leaf')).toBeInTheDocument();
+  },
+};