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

package/dist/_browser-chunks/{chunk-XY6TESST.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,22 +17,23 @@ __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,
-  interpolatePath,
-  defaultStringifySearch
+  defaultStringifySearch,
+  interpolatePath as interpolatePath2,
+  RouterProvider
 } from "@tanstack/react-router";
+import React from "react";
 
 // src/routing/duplicate-tree.ts
 import {
   createRoute,
   RootRoute,
   createRootRouteWithContext,
+  interpolatePath,
   joinPaths
 } from "@tanstack/react-router";
 var MAX_PARENT_WALK = 50;
@@ -54,13 +56,18 @@ 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), merged = { ...rest, ...override }, cloned = createRoute({
-    ...!merged.path && originalId != null ? { id: originalId } : {},
+  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: layoutIdFor(explicitId) } : {},
     ...merged,
     getParentRoute: () => parent
   });
-  byId.set(oldRoute.id, cloned);
+  merged.path && explicitId != null && cloned.update({ id: explicitId });
+  let lazyFn = oldRoute.lazyFn;
+  lazyFn && cloned.lazy(lazyFn), byId.set(oldRoute.id, cloned);
   let children = oldRoute.children;
   if (children?.length) {
     let clonedChildren = children.map(
@@ -80,8 +87,8 @@ function duplicateRouteTree(rootRoute, { overrides } = {}) {
   } = rootOptions, newRoot = createRootRouteWithContext()({
     ...restRoot,
     ...rootOverride
-  });
-  byId.set("__root__", newRoot);
+  }), rootLazyFn = rootRoute.lazyFn;
+  rootLazyFn && newRoot.lazy(rootLazyFn), byId.set("__root__", newRoot);
   let children = rootRoute.children;
   if (children?.length) {
     let clonedChildren = children.map(
@@ -106,13 +113,27 @@ function originalRouteId(tree, route) {
     if (cloned === route)
       return id;
 }
-function resolveStoryLeaf(tree, { path, boundRouteId }) {
+function resolveStoryLeaf(tree, {
+  path,
+  boundRouteId,
+  params
+}) {
   let { root, byId } = tree;
   if (path) {
-    let bestMatch, bestMatchLength = -1;
+    let bound = boundRouteId ? byId.get(boundRouteId) : void 0;
+    if (bound) {
+      let boundCandidate = mountPathFor(bound), boundInterpolated = params ? interpolatePath({ path: boundCandidate, params }).interpolatedPath : boundCandidate;
+      if (boundCandidate === path || boundInterpolated === path)
+        return bound;
+    }
+    let bestMatch, bestLiteral = !1, bestMatchLength = -1;
     for (let route of byId.values()) {
-      let fullPath = route.fullPath;
-      fullPath && fullPath === path && fullPath.length > bestMatchLength && (bestMatch = route, bestMatchLength = fullPath.length);
+      if (route === root)
+        continue;
+      let candidate = mountPathFor(route), isLiteral = candidate === path, interpolated = params ? interpolatePath({ path: candidate, params }).interpolatedPath : candidate;
+      if (!isLiteral && interpolated !== path)
+        continue;
+      (isLiteral === bestLiteral ? candidate.length > bestMatchLength : isLiteral) && (bestMatch = route, bestLiteral = isLiteral, bestMatchLength = candidate.length);
     }
     if (bestMatch)
       return bestMatch;
@@ -138,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]
   );
@@ -159,7 +178,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) || mountPathFor(leaf), 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 = interpolatePath2({
     path: inferredPath,
     params: routerParameters?.params ?? {}
   }).interpolatedPath, search = routerParameters?.query ? defaultStringifySearch(routerParameters.query) : "";
@@ -206,7 +225,8 @@ function resolveTree(Story, context) {
   if (rootRoute) {
     let tree = duplicateRouteTree(rootRoute, { overrides: routeOverrides }), leaf = resolveStoryLeaf(tree, {
       path: routerParameters.path,
-      boundRouteId: resolvedRoute && resolvedRoute !== rootRoute ? resolvedRoute.id : void 0
+      boundRouteId: resolvedRoute && resolvedRoute !== rootRoute ? resolvedRoute.id : void 0,
+      params: routerParameters.params
     });
     injectStoryComponent(leaf, Story, routeOverrides, originalRouteId(tree, leaf) ?? leaf.id);
     let renderLeaf = ensureMatchableLeaf(tree, leaf);
@@ -247,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) {
@@ -267,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, [
@@ -284,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-XY6TESST.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_0sqooo0adxx9 from 'node:url';
-import CJS_COMPAT_NODE_PATH_0sqooo0adxx9 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_0sqooo0adxx9 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_0sqooo0adxx9.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_0sqooo0adxx9.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_0sqooo0adxx9.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_0sqooo0adxx9 from 'node:url';
-import CJS_COMPAT_NODE_PATH_0sqooo0adxx9 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_0sqooo0adxx9 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_0sqooo0adxx9.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_0sqooo0adxx9.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_0sqooo0adxx9.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
@@ -360,16 +360,17 @@ function moduleInterceptionPlugin({
     enforce: "pre",
     resolveId: {
       order: "pre",
-      handler(id, importer) {
+      async handler(id, importer) {
+        let resolveMock = async (mockPath) => await this.resolve(mockPath, importer, { skipSelf: !0 }) ?? mockPath;
         if ((id === "@tanstack/react-router" || id.startsWith("@tanstack/react-router/")) && importer && !importer.includes("export-mocks"))
-          return routerMockPath;
+          return resolveMock(routerMockPath);
         if (START_SERVER_MODULES.includes(id) || id === "@tanstack/react-start")
-          return startMockPath;
+          return resolveMock(startMockPath);
         if (id === "@tanstack/start-storage-context")
-          return startStorageContextMockPath;
+          return resolveMock(startStorageContextMockPath);
         for (let pattern of INTERCEPTED_PATTERNS)
           if (id.includes(pattern))
-            return startMockPath;
+            return resolveMock(startMockPath);
         return null;
       }
     },

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-XY6TESST.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.3",
+  "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.3",
-    "@storybook/react": "10.6.0-alpha.3",
-    "@storybook/react-vite": "10.6.0-alpha.3"
+    "@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.3",
+    "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'
+    );
+  },
+};