@storybook/tanstack-react 11.0.0-alpha.6 → 11.0.0-alpha.7

package/dist/_browser-chunks/{chunk-O6D7CVOG.js → chunk-TENGSR2C.js}

@@ -12,6 +12,7 @@ __export(preview_exports, {
   applyDecorators: () => applyDecorators,
   beforeEach: () => beforeEach,
   loaders: () => loaders,
+  mount: () => mount,
   optimizeDeps: () => optimizeDeps,
   parameters: () => parameters
 });
@@ -188,9 +189,8 @@ function createStoryRouter({
     defaultNotFoundComponent(props) {
       return React.createElement("div", null, "Route not found: ", props.routeId);
     },
-    defaultErrorComponent({ error }) {
-      return React.createElement("div", null, "Story did something wrong : ", String(error));
-    },
+    // Let render errors reach Storybook so it shows them and story tests fail.
+    disableGlobalCatchBoundary: !0,
     context: routerContext
   });
 }
@@ -263,30 +263,6 @@ function resolveTree(Story, context) {
   };
 }
 
-// src/routing/before-each.ts
-var storyRouters = /* @__PURE__ */ new Map(), routerBeforeEach = async (context) => {
-  let cached = storyRouters.get(context.id);
-  if (cached) {
-    context.tanstackRouter = cached;
-    return;
-  }
-  let storyContext = context, parameterContext = (context.parameters.tanstack?.router ?? {}).context, routerContext = typeof parameterContext == "function" ? parameterContext({ storyContext }) : parameterContext, router = createStoryRouter({
-    Story: StoryFromContext,
-    context: storyContext,
-    routerContext
-  }), load = router.load();
-  if (context.abortSignal && !context.abortSignal.aborted ? (load.catch(() => {
-  }), await Promise.race([
-    load,
-    new Promise(
-      (resolve) => context.abortSignal.addEventListener("abort", () => resolve(), { once: !0 })
-    )
-  ])) : await load, !context.abortSignal?.aborted)
-    return storyRouters.set(context.id, router), context.tanstackRouter = router, () => {
-      storyRouters.delete(context.id);
-    };
-};
-
 // src/routing/loader.ts
 import { RootRoute as RootRoute3 } from "@tanstack/react-router";
 function getComponentFromRoute(route) {
@@ -306,8 +282,43 @@ var routeComponentLoader = (context) => {
   }
 };
 
+// src/routing/story-router.ts
+import { mount as reactMount } from "@storybook/react/entry-preview";
+var storyRouters = /* @__PURE__ */ new Map(), loadedRouters = /* @__PURE__ */ new WeakSet(), routerBeforeEach = (context) => {
+  let cached = storyRouters.get(context.id);
+  if (cached) {
+    context.tanstackRouter = cached;
+    return;
+  }
+  let storyContext = context, parameterContext = (context.parameters.tanstack?.router ?? {}).context, routerContext = typeof parameterContext == "function" ? parameterContext({ storyContext }) : parameterContext, router = createStoryRouter({
+    Story: StoryFromContext,
+    context: storyContext,
+    routerContext
+  });
+  return storyRouters.set(context.id, router), context.tanstackRouter = router, () => {
+    storyRouters.delete(context.id);
+  };
+}, routerMount = (context) => async (...args) => {
+  let router = context.tanstackRouter;
+  if (router && !loadedRouters.has(router)) {
+    if (context.abortSignal?.aborted)
+      return context.canvas;
+    let load = router.load();
+    if (context.abortSignal ? (load.catch(() => {
+    }), await Promise.race([
+      load,
+      new Promise(
+        (resolve) => context.abortSignal.addEventListener("abort", () => resolve(), { once: !0 })
+      )
+    ])) : await load, context.abortSignal?.aborted)
+      return context.canvas;
+    loadedRouters.add(router);
+  }
+  return reactMount(context)(...args);
+};
+
 // src/preview.tsx
-var loaders = [routeComponentLoader], beforeEach = [routerBeforeEach], applyDecorators = (storyFn, allDecorators) => (
+var loaders = [routeComponentLoader], beforeEach = [routerBeforeEach], mount = routerMount, applyDecorators = (storyFn, allDecorators) => (
   // reorder decorators so `jsxDecorator` is innermost, and `tanstackRouteDecorator` is just outside it
   // There is an issue if `tanstackRouteDecorator` is innermost. All stories crashes due to a bug with the jsxDecorator.
   reactApplyDecorators(storyFn, [
@@ -325,6 +336,7 @@ var loaders = [routeComponentLoader], beforeEach = [routerBeforeEach], applyDeco
 export {
   loaders,
   beforeEach,
+  mount,
   applyDecorators,
   parameters,
   optimizeDeps,

package/dist/{chunk-7NHqRJ4O.d.ts → chunk-CCjcehAj.d.ts}

@@ -102,7 +102,8 @@ interface RouterParameters<TRoute = undefined, Path extends (TRoute extends AnyR
 type FrameworkName = CompatibleString<'@storybook/tanstack-react'>;
 type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 type FrameworkOptions = {
-  /** Builder options passed through to @storybook/builder-vite. */builder?: BuilderOptions;
+  /** Builder options passed through to @storybook/builder-vite. */builder?: BuilderOptions; /** Render stories inside `React.StrictMode`. */
+  strictMode?: boolean;
 };
 type StorybookConfigFramework = {
   framework: FrameworkName | {

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

@@ -325,13 +325,16 @@ declare const useRouteContext: Mock<typeof useRouteContext$1>;
 declare const useCanGoBack: Mock<typeof useCanGoBack$1>;
 declare const useLinkProps: Mock<typeof useLinkProps$1>;
 declare const Navigate: typeof Navigate$1;
+type LinkRenderState = {
+  isActive: boolean;
+};
 declare const Link: ({
   to,
   children,
   ...props
 }: {
   to: string;
-  children?: React.ReactNode;
+  children?: React.ReactNode | ((state: LinkRenderState) => React.ReactNode);
   [key: string]: unknown;
 }) => React.DetailedReactHTMLElement<{
   onClick: (e: React.MouseEvent) => void;

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

@@ -38,7 +38,7 @@ var useNavigate = fn(_useNavigate).mockName("@tanstack/react-router::useNavigate
   children,
   ...props
 }) => {
-  let location = useLocation(), { onClick: _navigate, ...linkProps } = _useLinkProps({ to, ...props });
+  let location = useLocation(), { onClick: _navigate, ...linkProps } = _useLinkProps({ to, ...props }), resolvedChildren = typeof children == "function" ? children({ isActive: linkProps["data-status"] === "active" }) : children;
   return React.createElement(
     "a",
     {
@@ -47,7 +47,7 @@ var useNavigate = fn(_useNavigate).mockName("@tanstack/react-router::useNavigate
         e.preventDefault(), onNavigate({ to, from: location.href });
       }
     },
-    children
+    resolvedChildren
   );
 };
 function createFileRoute(path) {

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { a as TanStackPreviewOptions, c as IsRoute, d as StoryRouteOptions, i as TanStackParameters, l as RouterParameters, n as FrameworkOptions, o as TanStackTypes, r as StorybookConfig, s as CreateStoryRouteOptions, t as DefaultStoryPath, u as StoryRouteFileOptions } from "./chunk-7NHqRJ4O.js";
+import { a as TanStackPreviewOptions, c as IsRoute, d as StoryRouteOptions, i as TanStackParameters, l as RouterParameters, n as FrameworkOptions, o as TanStackTypes, r as StorybookConfig, s as CreateStoryRouteOptions, t as DefaultStoryPath, u as StoryRouteFileOptions } from "./chunk-CCjcehAj.js";
 import { ComponentType } from "react";
 import { AddonTypes, InferTypes, MetaInput, MetaTypes, PreviewAddonEntry } from "storybook/internal/csf";
 import { Args, ArgsStoryFn, ComponentAnnotations, DecoratorFunction, Parameters, ProjectAnnotations, StoryAnnotations } from "storybook/internal/types";

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   preview_exports
-} from "./_browser-chunks/chunk-O6D7CVOG.js";
+} from "./_browser-chunks/chunk-TENGSR2C.js";
 import "./_browser-chunks/chunk-NGWBYAM4.js";
 import "./_browser-chunks/chunk-4BE7D4DS.js";
 

package/dist/node/index.d.ts

@@ -1,4 +1,4 @@
-import { r as StorybookConfig } from "../chunk-7NHqRJ4O.js";
+import { r as StorybookConfig } from "../chunk-CCjcehAj.js";
 
 //#region code/frameworks/tanstack-react/.dts-emit/code/frameworks/tanstack-react/src/node/index.d.ts
 declare function defineMain(config: StorybookConfig): StorybookConfig;

package/dist/node/index.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_gyp5bmiktk from 'node:url';
-import CJS_COMPAT_NODE_PATH_gyp5bmiktk from 'node:path';
-import CJS_COMPAT_NODE_MODULE_gyp5bmiktk from "node:module";
+import CJS_COMPAT_NODE_URL_0cuxg6ixjttb from 'node:url';
+import CJS_COMPAT_NODE_PATH_0cuxg6ixjttb from 'node:path';
+import CJS_COMPAT_NODE_MODULE_0cuxg6ixjttb from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_gyp5bmiktk.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_gyp5bmiktk.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_gyp5bmiktk.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_0cuxg6ixjttb.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_0cuxg6ixjttb.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_0cuxg6ixjttb.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_gyp5bmiktk from 'node:url';
-import CJS_COMPAT_NODE_PATH_gyp5bmiktk from 'node:path';
-import CJS_COMPAT_NODE_MODULE_gyp5bmiktk from "node:module";
+import CJS_COMPAT_NODE_URL_0cuxg6ixjttb from 'node:url';
+import CJS_COMPAT_NODE_PATH_0cuxg6ixjttb from 'node:path';
+import CJS_COMPAT_NODE_MODULE_0cuxg6ixjttb from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_gyp5bmiktk.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_gyp5bmiktk.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_gyp5bmiktk.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_0cuxg6ixjttb.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_0cuxg6ixjttb.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_0cuxg6ixjttb.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration

package/dist/preview.d.ts

@@ -1,12 +1,13 @@
-import { i as TanStackParameters } from "./chunk-7NHqRJ4O.js";
+import { i as TanStackParameters } from "./chunk-CCjcehAj.js";
 import { BeforeEach, DecoratorFunction, LoaderFunction, Renderer } from "storybook/internal/types";
 import { applyDecorators as applyDecorators$1 } from "@storybook/react/entry-preview-docs";
 
 //#region code/frameworks/tanstack-react/.dts-emit/code/frameworks/tanstack-react/src/preview.d.ts
 declare const loaders: LoaderFunction<Renderer>[];
 declare const beforeEach: BeforeEach<Renderer>[];
+declare const mount: ((context: import("storybook/internal/types").StoryContext<import("@storybook/react").ReactRenderer, import("@storybook/react").Args>) => (ui?: import("react").JSX.Element) => Promise<import("storybook/internal/types").Canvas>) | undefined;
 declare const applyDecorators: (storyFn: Parameters<typeof applyDecorators$1>[0], allDecorators: DecoratorFunction[]) => any;
 declare const parameters: TanStackParameters;
 declare const optimizeDeps: string[];
 //#endregion
-export { applyDecorators, beforeEach, loaders, optimizeDeps, parameters };
+export { applyDecorators, beforeEach, loaders, mount, optimizeDeps, parameters };

package/dist/preview.js

@@ -2,15 +2,17 @@ import {
   applyDecorators,
   beforeEach,
   loaders,
+  mount,
   optimizeDeps,
   parameters
-} from "./_browser-chunks/chunk-O6D7CVOG.js";
+} from "./_browser-chunks/chunk-TENGSR2C.js";
 import "./_browser-chunks/chunk-NGWBYAM4.js";
 import "./_browser-chunks/chunk-4BE7D4DS.js";
 export {
   applyDecorators,
   beforeEach,
   loaders,
+  mount,
   optimizeDeps,
   parameters
 };

package/package.json

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

package/template/stories/BeforeEachOrder.stories.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/tanstack-react';
+
+import { expect, within } from 'storybook/test';
+
+let mockedUser = 'unmocked';
+const beforeLoadCalls: string[] = [];
+
+function BeforeLoadViewer() {
+  return <p data-testid="before-load-user">{beforeLoadCalls.join(',') || 'missing'}</p>;
+}
+
+const meta = {
+  component: BeforeLoadViewer,
+  parameters: {
+    tanstack: {
+      router: {
+        route: {
+          beforeLoad: () => {
+            beforeLoadCalls.push(mockedUser);
+          },
+        },
+      },
+    },
+  },
+  beforeEach: () => {
+    mockedUser = 'from-beforeEach';
+    return () => {
+      mockedUser = 'unmocked';
+      beforeLoadCalls.length = 0;
+    };
+  },
+} satisfies Meta<typeof BeforeLoadViewer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Route `beforeLoad` runs after the story's `beforeEach`, so it sees its mocks. */
+export const BeforeLoadSeesBeforeEach: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByTestId('before-load-user')).toHaveTextContent('from-beforeEach');
+    await expect(beforeLoadCalls.length).toBeGreaterThan(0);
+    await expect(beforeLoadCalls.every((call) => call === 'from-beforeEach')).toBe(true);
+  },
+};
+
+/** Route `beforeLoad` runs when `play` calls `mount`, so it sees mocks set up in `play`. */
+export const BeforeLoadSeesPlayBeforeMount: Story = {
+  play: async ({ mount }) => {
+    mockedUser = 'from-play';
+    const canvas = await mount();
+    await expect(canvas.getByTestId('before-load-user')).toHaveTextContent('from-play');
+    await expect(beforeLoadCalls.length).toBeGreaterThan(0);
+    await expect(beforeLoadCalls.every((call) => call === 'from-play')).toBe(true);
+  },
+};
+
+let routerStatusInBeforeEach = 'unset';
+
+/** The story router exists in the story's `beforeEach`, before its initial load. */
+export const RouterAvailableInBeforeEach: Story = {
+  beforeEach: (context) => {
+    const router = (context as any).tanstackRouter;
+    routerStatusInBeforeEach = router ? router.state.status : 'missing';
+  },
+  play: async () => {
+    await expect(routerStatusInBeforeEach).toBe('idle');
+  },
+};