@storybook/tanstack-react 10.5.6 → 10.5.8

package/dist/preview.d.ts

@@ -1,114 +1,12 @@
-import { LoaderFunction, Renderer, DecoratorFunction } from 'storybook/internal/types';
-import { applyDecorators as applyDecorators$1 } from '@storybook/react/entry-preview-docs';
-import { Register, AnyRoute, FileRoutesByPath } from '@tanstack/react-router';
-import { RoutesByPath, RouteOptions, ResolveParams, AnyContext } from '@tanstack/router-core';
-import { ComponentType } from 'react';
-import { Decorator } from '@storybook/react';
-
-/** Union of every registered full path (e.g. `'/' | '/admin/users' | '/$libraryId/$version'`). */
-type RegisteredFullPath = keyof Register['router']['routesByPath'];
-type IsAppRouteTree<TRoute> = TRoute extends Register['router']['routeTree'] ? true : false;
-type IsRoute<T> = T extends AnyRoute ? true : T extends FileRoutesByPath[keyof FileRoutesByPath] ? true : false;
-type ExtractAllPathsFromFileRoutes<TRoute extends FileRoutesByPath[keyof FileRoutesByPath]['preLoaderRoute'] | AnyRoute> = TRoute['path'];
-type StoryRoutePath<TRoute = undefined> = TRoute extends FileRoutesByPath[keyof FileRoutesByPath] ? ExtractAllPathsFromFileRoutes<TRoute> : keyof FileRoutesByPath | `/${string}`;
-type StoryRouteSearch<TRoute> = IsAppRouteTree<TRoute> extends true ? Record<string, unknown> : TRoute extends FileRoutesByPath[keyof FileRoutesByPath] ? TRoute['preLoaderRoute'] extends {
-    types: {
-        allSearch: infer A;
-    };
-} ? A : never : Record<string, unknown>;
-type StoryRouteFileOptions<TRoute = undefined> = IsRoute<TRoute> extends true ? TRoute extends {
-    options: infer O;
-} ? Pick<O, Extract<keyof O, 'loader' | 'beforeLoad' | 'validateSearch' | 'loaderDeps' | 'context' | 'params' | 'head' | 'search' | 'parseParams' | 'context'>> : Pick<RouteOptions<unknown>, 'loader' | 'beforeLoad' | 'validateSearch' | 'loaderDeps' | 'context' | 'params' | 'head' | 'search' | 'parseParams' | 'context'> : Pick<RouteOptions<unknown>, 'loader' | 'beforeLoad' | 'validateSearch' | 'loaderDeps' | 'context' | 'params' | 'head' | 'search' | 'parseParams' | 'context'>;
-type CreateStoryRouteOptions<TRoute = undefined> = StoryRouteFileOptions<TRoute> & {
-    path?: StoryRoutePath<TRoute>;
-};
-type StoryRouteOptions<TRoute = undefined> = CreateStoryRouteOptions<TRoute> | (TRoute extends AnyRoute ? TRoute : AnyRoute);
-/**
- * Per-route override options for use inside `RouteTreeOverrides`.
- * Users can override `loader`, `beforeLoad`, etc. for a specific route.
- */
-interface RouteOverrideOptions<TRoute extends FileRoutesByPath[keyof FileRoutesByPath]['preLoaderRoute'] | undefined = undefined> {
-    /** Override the route's component. */
-    component?: TRoute extends FileRoutesByPath[keyof FileRoutesByPath]['preLoaderRoute'] ? TRoute['options']['component'] | ComponentType : ComponentType;
-    /** Override the route's loader function. */
-    loader?: TRoute extends FileRoutesByPath[keyof FileRoutesByPath]['preLoaderRoute'] ? TRoute['options']['loader'] | ((ctx: unknown) => Promise<unknown> | unknown) : (ctx: unknown) => Promise<unknown> | unknown;
-    /** Override the route's beforeLoad function. */
-    beforeLoad?: TRoute extends FileRoutesByPath[keyof FileRoutesByPath]['preLoaderRoute'] ? TRoute['options']['beforeLoad'] | ((ctx: unknown) => Promise<void> | void) : (ctx: unknown) => Promise<void> | void;
-    /** Override the route's search params validation. */
-    validateSearch?: TRoute extends FileRoutesByPath[keyof FileRoutesByPath]['preLoaderRoute'] ? TRoute['options']['validateSearch'] | ((search: unknown) => Promise<void> | void) : (search: unknown) => Promise<void> | void;
-    /** Override the route's loader dependencies. */
-    loaderDeps?: TRoute extends FileRoutesByPath[keyof FileRoutesByPath]['preLoaderRoute'] ? TRoute['options']['loaderDeps'] | string[] : string[];
-    /** Override the route's context function. */
-    context?: TRoute extends FileRoutesByPath[keyof FileRoutesByPath]['preLoaderRoute'] ? TRoute['options']['context'] | ((ctx: unknown) => Promise<unknown> | unknown) : (ctx: unknown) => Promise<unknown> | unknown;
-}
-/**
- * A map of route overrides keyed by route ID.
- * Each entry can override `loader`, `beforeLoad`, etc. for that route.
- *
- * @example
- * ```ts
- * routeOverrides: {
- *   '/_authed': { beforeLoad: () => {} },
- *   '/demo/form/simple/$id': {
- *     loader: async () => ({ name: 'Mock User' }),
- *   },
- * }
- * ```
- */
-type RouteTreeOverrides = Partial<{
-    [routePath in keyof FileRoutesByPath]: RouteOverrideOptions<FileRoutesByPath[routePath]['preLoaderRoute']> | undefined;
-}>;
-interface RouterParameters<TRoute = undefined, Path extends TRoute extends AnyRoute ? keyof RoutesByPath<TRoute> : RegisteredFullPath = TRoute extends AnyRoute ? keyof RoutesByPath<TRoute> : keyof FileRoutesByPath> {
-    route?: StoryRouteOptions<TRoute>;
-    /**
-     * Path to resolve the story route against.
-     * Constrained to known registered paths in route tree mode, but can be any string in app route mode (since the user may be passing a custom `route` that doesn't exist in the registered tree).
-     */
-    path?: Path;
-    /** URL params to interpolate into the path (e.g. `{ id: '42' }` for `/$id`). */
-    params?: ResolveParams<Path>;
-    /** Search/query params to append to the URL (e.g. `{ tab: 'details' }`). */
-    query?: Partial<StoryRouteSearch<TRoute>>;
-    /**
-     * Override options for specific routes in the app route tree (route tree mode only).
-     *
-     * Each key is a route ID (e.g. `'/about'`, `'__root__'`, `'/demo/form/simple/$id'`).
-     * Values can override `loader`, `beforeLoad`, etc. for that route.
-     *
-     * @example
-     * ```ts
-     * routeOverrides: {
-     *   '/_authed': { beforeLoad: () => {} },
-     *   '/demo/form/simple/$id': {
-     *     loader: async () => ({ name: 'Mock User' }),
-     *   },
-     * }
-     * ```
-     */
-    routeOverrides?: RouteTreeOverrides;
-    context?: Record<string, unknown>;
-    /**
-     *
-     */
-    useRouterContext?: ({ storyContext }: {
-        storyContext: Parameters<Decorator>[1];
-    }) => AnyContext;
-}
-
-/** Path constraint mirroring `RouterParameters`'s second generic. */
-type DefaultStoryPath<TRoute> = TRoute extends AnyRoute ? keyof RoutesByPath<TRoute> : RegisteredFullPath;
-interface TanStackPreviewOptions<TRoute = undefined, Path extends DefaultStoryPath<TRoute> = DefaultStoryPath<TRoute>> {
-    /** Router configuration for stories */
-    router?: RouterParameters<TRoute, Path>;
-}
-interface TanStackParameters<TRoute = undefined, Path extends DefaultStoryPath<TRoute> = DefaultStoryPath<TRoute>> {
-    /** TanStack framework configuration (router integration). */
-    tanstack?: TanStackPreviewOptions<TRoute, Path>;
-}
+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[];
-
-export { applyDecorators, loaders, optimizeDeps, parameters };
+//#endregion
+export { applyDecorators, beforeEach, loaders, optimizeDeps, parameters };

package/dist/preview.js

@@ -1,13 +1,15 @@
 import {
   applyDecorators,
+  beforeEach,
   loaders,
   optimizeDeps,
   parameters
-} from "./_browser-chunks/chunk-6UULZFFJ.js";
+} from "./_browser-chunks/chunk-TR4QWDPU.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.5.6",
+  "version": "10.5.8",
   "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.6",
-    "@storybook/react": "10.5.6",
-    "@storybook/react-vite": "10.5.6"
+    "@storybook/builder-vite": "10.5.8",
+    "@storybook/react": "10.5.8",
+    "@storybook/react-vite": "10.5.8"
   },
   "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.6",
+    "storybook": "^10.5.8",
     "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'
+    );
+  },
+};