@storybook/tanstack-react 10.6.0-alpha.4 → 10.6.0-alpha.5

package/dist/_browser-chunks/{chunk-5B7CRIA6.js → chunk-HRV4LMK3.js}

@@ -9,6 +9,7 @@ import {
 var preview_exports = {};
 __export(preview_exports, {
   applyDecorators: () => applyDecorators,
+  beforeEach: () => beforeEach,
   loaders: () => loaders,
   optimizeDeps: () => optimizeDeps,
   parameters: () => parameters
@@ -16,16 +17,16 @@ __export(preview_exports, {
 import { applyDecorators as reactApplyDecorators } from "@storybook/react/entry-preview-docs";
 
 // src/routing/decorator.tsx
-import React from "react";
 import {
   createMemoryHistory,
   createRootRoute,
   createRoute as createRoute2,
   createRouter,
-  RouterProvider,
+  defaultStringifySearch,
   interpolatePath as interpolatePath2,
-  defaultStringifySearch
+  RouterProvider
 } from "@tanstack/react-router";
+import React from "react";
 
 // src/routing/duplicate-tree.ts
 import {
@@ -55,9 +56,12 @@ function initSourceTree(route, counter) {
     for (let child of children)
       initSourceTree(child, counter);
 }
+function layoutIdFor(id) {
+  return id.length > 1 && id.endsWith("/") ? id.slice(0, -1) : id;
+}
 function cloneChild(oldRoute, parent, overrides, byId) {
   let options = oldRoute.options ?? {}, { id: originalId, getParentRoute: _g, ...rest } = options, override = getOverrideFor(overrides, oldRoute.id), { id: overrideId, ...overrideRest } = override, merged = { ...rest, ...overrideRest }, explicitId = "id" in override ? overrideId : originalId, cloned = createRoute({
-    ...!merged.path && explicitId != null ? { id: explicitId } : {},
+    ...!merged.path && explicitId != null ? { id: layoutIdFor(explicitId) } : {},
     ...merged,
     getParentRoute: () => parent
   });
@@ -155,17 +159,15 @@ var StoryContext = React.createContext({ Story: () => null }), StoryFromContext
   return React.createElement(Story, null);
 }, tanstackRouteDecorator = (Story, context) => React.createElement(TanStackRouterStory, { Story, context });
 function TanStackRouterStory({ Story, context }) {
-  let routerContext = context.parameters.tanstack?.router?.useRouterContext?.({
+  let router = context.tanstackRouter, routerContext = context.parameters.tanstack?.router?.useRouterContext?.({
     storyContext: context
-  }), router = React.useMemo(
-    () => createStoryRouter({ Story: StoryFromContext, context, routerContext }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [context.id]
-  ), providerContext = React.useMemo(
-    () => ({
-      ...context.parameters.tanstack?.router?.context,
-      ...routerContext
-    }),
+  });
+  if (!router)
+    throw new Error(
+      "No story router found on the story context: the `routerBeforeEach` hook of @storybook/tanstack-react did not run before rendering. Note that portable stories are not supported by this framework."
+    );
+  let providerContext = React.useMemo(
+    () => routerContext,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [context.id, routerContext]
   );
@@ -265,6 +267,30 @@ 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) {
@@ -285,7 +311,7 @@ var routeComponentLoader = (context) => {
 };
 
 // src/preview.tsx
-var loaders = [routeComponentLoader], applyDecorators = (storyFn, allDecorators) => (
+var loaders = [routeComponentLoader], beforeEach = [routerBeforeEach], 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, [
@@ -302,6 +328,7 @@ var loaders = [routeComponentLoader], applyDecorators = (storyFn, allDecorators)
 
 export {
   loaders,
+  beforeEach,
   applyDecorators,
   parameters,
   optimizeDeps,

package/dist/{chunk-CT6Edisg.d.ts → chunk-B0pqNVvJ.d.ts}

@@ -86,10 +86,11 @@ interface RouterParameters<TRoute = undefined, Path extends (TRoute extends AnyR
    * ```
    */
   routeOverrides?: RouteTreeOverrides;
-  context?: Record<string, unknown>;
-  /**
-   *
-   */
+  /** Object or factory; the factory runs before initial router load outside React, so loader and beforeLoad can read its values. */
+  context?: Record<string, unknown> | ((options: {
+    storyContext: Parameters<Decorator>[1];
+  }) => Record<string, unknown>);
+  /** React hook render context reaches components, not the initial loader or beforeLoad; use the context factory for loader-visible values. */
   useRouterContext?: ({
     storyContext
   }: {

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-CT6Edisg.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-B0pqNVvJ.js";
 import { ComponentType } from "react";
 import { AddonTypes, InferTypes, PreviewAddon } from "storybook/internal/csf";
 import { Args, ArgsStoryFn, ComponentAnnotations, DecoratorFunction, Parameters, ProjectAnnotations, Renderer, StoryAnnotations } from "storybook/internal/types";

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   preview_exports
-} from "./_browser-chunks/chunk-5B7CRIA6.js";
+} from "./_browser-chunks/chunk-HRV4LMK3.js";
 import "./_browser-chunks/chunk-LTDGLEVR.js";
 import "./_browser-chunks/chunk-4BE7D4DS.js";
 

package/dist/node/index.d.ts

@@ -1,4 +1,4 @@
-import { r as StorybookConfig } from "../chunk-CT6Edisg.js";
+import { r as StorybookConfig } from "../chunk-B0pqNVvJ.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_fr5elf42854 from 'node:url';
-import CJS_COMPAT_NODE_PATH_fr5elf42854 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_fr5elf42854 from "node:module";
+import CJS_COMPAT_NODE_URL_zvu6fwxyfs from 'node:url';
+import CJS_COMPAT_NODE_PATH_zvu6fwxyfs from 'node:path';
+import CJS_COMPAT_NODE_MODULE_zvu6fwxyfs from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_fr5elf42854.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_fr5elf42854.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_fr5elf42854.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_zvu6fwxyfs.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_zvu6fwxyfs.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_zvu6fwxyfs.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_fr5elf42854 from 'node:url';
-import CJS_COMPAT_NODE_PATH_fr5elf42854 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_fr5elf42854 from "node:module";
+import CJS_COMPAT_NODE_URL_zvu6fwxyfs from 'node:url';
+import CJS_COMPAT_NODE_PATH_zvu6fwxyfs from 'node:path';
+import CJS_COMPAT_NODE_MODULE_zvu6fwxyfs from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_fr5elf42854.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_fr5elf42854.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_fr5elf42854.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_zvu6fwxyfs.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_zvu6fwxyfs.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_zvu6fwxyfs.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration

package/dist/preview.d.ts

@@ -1,11 +1,12 @@
-import { i as TanStackParameters } from "./chunk-CT6Edisg.js";
-import { DecoratorFunction, LoaderFunction, Renderer } from "storybook/internal/types";
+import { i as TanStackParameters } from "./chunk-B0pqNVvJ.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 applyDecorators: (storyFn: Parameters<typeof applyDecorators$1>[0], allDecorators: DecoratorFunction[]) => any;
 declare const parameters: TanStackParameters;
 declare const optimizeDeps: string[];
 //#endregion
-export { applyDecorators, loaders, optimizeDeps, parameters };
+export { applyDecorators, beforeEach, loaders, optimizeDeps, parameters };

package/dist/preview.js

@@ -1,13 +1,15 @@
 import {
   applyDecorators,
+  beforeEach,
   loaders,
   optimizeDeps,
   parameters
-} from "./_browser-chunks/chunk-5B7CRIA6.js";
+} from "./_browser-chunks/chunk-HRV4LMK3.js";
 import "./_browser-chunks/chunk-LTDGLEVR.js";
 import "./_browser-chunks/chunk-4BE7D4DS.js";
 export {
   applyDecorators,
+  beforeEach,
   loaders,
   optimizeDeps,
   parameters

package/package.json

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

package/template/stories/LoaderContextInjection.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/tanstack-react';
+
+import { expect, within } from 'storybook/test';
+
+const loaderCalls: unknown[] = [];
+
+function LoaderContextViewer() {
+  return <p data-testid="loader-context">{String(loaderCalls[0] ?? 'missing')}</p>;
+}
+
+const meta = {
+  component: LoaderContextViewer,
+  parameters: {
+    tanstack: {
+      router: {
+        context: () => {
+          loaderCalls.length = 0;
+          return { injected: 'from-factory' };
+        },
+        route: {
+          loader: ({ context }: { context: unknown }) => {
+            loaderCalls.push((context as any)?.injected ?? null);
+          },
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof LoaderContextViewer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Factory router context is visible to the route loader before render. */
+export const FactoryValuesReachLoader: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByTestId('loader-context')).toHaveTextContent('from-factory');
+
+    await expect(loaderCalls.length).toBeGreaterThan(0);
+    await expect(loaderCalls.every((call) => call === 'from-factory')).toBe(true);
+  },
+};

package/template/stories/RouterContextInjection.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/tanstack-react';
+
+import { useRouter } from '@tanstack/react-router';
+import { expect, within } from 'storybook/test';
+
+const InjectedContext = React.createContext('missing-provider');
+
+function RouterContextViewer() {
+  const router = useRouter();
+  const injected = (router.options.context as { injected?: string } | undefined)?.injected;
+  return <p data-testid="injected-router-context">{injected ?? 'missing-context'}</p>;
+}
+
+const meta = {
+  component: RouterContextViewer,
+  decorators: [
+    (Story) => (
+      <InjectedContext.Provider value="from-react-hook">
+        <Story />
+      </InjectedContext.Provider>
+    ),
+  ],
+  parameters: {
+    tanstack: {
+      router: {
+        useRouterContext: () => ({ injected: React.useContext(InjectedContext) }),
+      },
+    },
+  },
+} satisfies Meta<typeof RouterContextViewer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Hook-derived values read from a decorator's React provider must reach the story's router. */
+export const HookValuesReachRouter: Story = {
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByTestId('injected-router-context')).toHaveTextContent(
+      'from-react-hook'
+    );
+  },
+};