@storybook/tanstack-react 10.6.0-alpha.0 → 10.6.0-alpha.2

package/dist/preset.d.ts

@@ -1,9 +1,10 @@
-import { PresetProperty } from 'storybook/internal/types';
-import { StorybookConfigVite } from '@storybook/builder-vite';
+import { PresetProperty } from "storybook/internal/types";
+import { StorybookConfigVite } from "@storybook/builder-vite";
 
+//#region code/frameworks/tanstack-react/.dts-emit/code/frameworks/tanstack-react/src/preset.d.ts
 declare const core: PresetProperty<'core'>;
 declare const previewAnnotations: PresetProperty<'previewAnnotations'>;
 declare const optimizeViteDeps: string[];
 declare const viteFinal: StorybookConfigVite['viteFinal'];
-
-export { core, optimizeViteDeps, previewAnnotations, viteFinal };
+//#endregion
+export { core, optimizeViteDeps, previewAnnotations, viteFinal };

package/dist/preset.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_7yn66pz4hsj from 'node:url';
-import CJS_COMPAT_NODE_PATH_7yn66pz4hsj from 'node:path';
-import CJS_COMPAT_NODE_MODULE_7yn66pz4hsj from "node:module";
+import CJS_COMPAT_NODE_URL_u7g6u19rsi from 'node:url';
+import CJS_COMPAT_NODE_PATH_u7g6u19rsi from 'node:path';
+import CJS_COMPAT_NODE_MODULE_u7g6u19rsi from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_7yn66pz4hsj.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_7yn66pz4hsj.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_7yn66pz4hsj.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_u7g6u19rsi.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_u7g6u19rsi.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_u7g6u19rsi.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -31,7 +31,7 @@ var dirname = function(p) {
 import { viteFinal as reactViteFinal } from "@storybook/react-vite/preset";
 
 // src/plugins/server-code-elimination.ts
-import { transformSync, types as t } from "storybook/internal/babel";
+import { types as t, transformSync } from "storybook/internal/babel";
 var SERVER_FN_RE = /\bcreateServerFn\b/, MIDDLEWARE_RE = /\bcreateMiddleware\b/, ISOMORPHIC_FN_RE = /\bcreateIsomorphicFn\b/, SERVER_ONLY_FN_RE = /\bcreateServerOnlyFn\b/, CLIENT_ONLY_FN_RE = /\bcreateClientOnlyFn\b/, ROUTE_FACTORY_RE = /\b(createFileRoute|createRootRoute|createRootRouteWithContext|createRoute)\b/, ROUTE_FACTORIES = /* @__PURE__ */ new Set([
   "createFileRoute",
   "createRootRoute",
@@ -215,12 +215,21 @@ function stripServerOption(options) {
     return (t.isIdentifier(key) ? key.name : void 0) !== "server";
   }), options.properties.length !== initialLength;
 }
+function getJsxRootIdentifier(name) {
+  for (; t.isJSXMemberExpression(name); )
+    name = name.object;
+  return t.isJSXIdentifier(name) ? name : null;
+}
 function collectReferencedIdentifiers(programPath) {
   let referenced = /* @__PURE__ */ new Set();
   return programPath.traverse({
     enter(path2) {
       let { node } = path2;
       !t.isIdentifier(node) || path2.isBindingIdentifier() || path2.findParent((p) => p.isImportDeclaration()) || referenced.add(node.name);
+    },
+    JSXOpeningElement(path2) {
+      let root = getJsxRootIdentifier(path2.node.name);
+      root && referenced.add(root.name);
     }
   }), referenced;
 }

package/dist/preview.d.ts

@@ -1,111 +1,11 @@
-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 { 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 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-B2-fTWlC.js";
+import { 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 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, loaders, optimizeDeps, parameters };

package/dist/preview.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/tanstack-react",
-  "version": "10.6.0-alpha.0",
+  "version": "10.6.0-alpha.2",
   "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.0",
-    "@storybook/react": "10.6.0-alpha.0",
-    "@storybook/react-vite": "10.6.0-alpha.0"
+    "@storybook/builder-vite": "10.6.0-alpha.2",
+    "@storybook/react": "10.6.0-alpha.2",
+    "@storybook/react-vite": "10.6.0-alpha.2"
   },
   "devDependencies": {
     "@tanstack/react-router": "^1.168.10",
@@ -85,7 +85,7 @@
     "@tanstack/router-core": "^1.168.9",
     "@tanstack/start-client-core": "^1.167.9",
     "@types/node": "^22.19.1",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.3",
     "vite": "^7.0.4"
   },
   "peerDependencies": {
@@ -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.0",
+    "storybook": "^10.6.0-alpha.2",
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
   },
   "peerDependenciesMeta": {

package/template/stories/PathlessLayout.stories.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/tanstack-react';
+
+import { Outlet, createRootRoute, createRoute } from '@tanstack/react-router';
+import { expect, fn, within } from 'storybook/test';
+
+// Regression coverage for pathless layout routes (`_authed`-style underscore
+// files and `(group)` directories). The layout must render and its
+// `beforeLoad` must run, while contributing nothing to the URL: the story
+// mounts at `/dashboard`, not `/_authed/dashboard`.
+
+function LeafContent() {
+  return <p data-testid="pathless-leaf">leaf rendered under a pathless layout</p>;
+}
+
+const onBeforeLoad = fn();
+
+const RootRoute = createRootRoute({
+  component: () => (
+    <div data-testid="pathless-root">
+      <h1>root layout</h1>
+      <Outlet />
+    </div>
+  ),
+});
+
+const PathlessLayout = createRoute({
+  id: 'authed',
+  getParentRoute: () => RootRoute,
+  beforeLoad: onBeforeLoad,
+  component: () => (
+    <section data-testid="pathless-layout">
+      <Outlet />
+    </section>
+  ),
+});
+
+const DashboardRoute = createRoute({
+  path: '/dashboard',
+  getParentRoute: () => PathlessLayout,
+  component: LeafContent,
+});
+
+PathlessLayout.addChildren([DashboardRoute]);
+
+// Regression coverage for a pathless layout nested under a pathful ancestor
+// (e.g. `/products/_authed`): the layout's mount URL must be inferred from
+// its pathful ancestor, not just '/'.
+
+const onNestedBeforeLoad = fn();
+
+function ProductsLayout() {
+  return (
+    <div data-testid="products-layout">
+      <Outlet />
+    </div>
+  );
+}
+
+const ProductsRoute = createRoute({
+  path: '/products',
+  getParentRoute: () => RootRoute,
+  component: ProductsLayout,
+});
+
+const NestedPathlessLayout = createRoute({
+  id: 'nested-authed',
+  getParentRoute: () => ProductsRoute,
+  beforeLoad: onNestedBeforeLoad,
+  component: () => (
+    <section data-testid="nested-pathless-layout">
+      <Outlet />
+    </section>
+  ),
+});
+
+const NestedSettingsRoute = createRoute({
+  path: '/settings',
+  getParentRoute: () => NestedPathlessLayout,
+  component: LeafContent,
+});
+
+NestedPathlessLayout.addChildren([NestedSettingsRoute]);
+ProductsRoute.addChildren([NestedPathlessLayout]);
+
+// A single `addChildren` call per parent: it replaces (not appends to) the
+// children array, so `RootRoute`'s two top-level branches must be registered
+// together.
+RootRoute.addChildren([PathlessLayout, ProductsRoute]);
+
+const meta = {
+  component: LeafContent,
+  parameters: { layout: 'fullscreen' },
+} satisfies Meta<typeof LeafContent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** The leaf mounts at the layout-free URL, with every ancestor layout rendered. */
+export const RendersLeafThroughPathlessLayout: Story = {
+  parameters: {
+    tanstack: { router: { route: DashboardRoute, path: '/dashboard' } },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByTestId('pathless-root')).toBeInTheDocument();
+    await expect(canvas.getByTestId('pathless-layout')).toBeInTheDocument();
+    await expect(canvas.getByTestId('pathless-leaf')).toBeInTheDocument();
+    await expect(onBeforeLoad).toHaveBeenCalled();
+  },
+};
+
+/** Binding the layout route itself (no path) mounts the story at the layout's position. */
+export const BoundDirectlyToPathlessLayout: Story = {
+  parameters: {
+    tanstack: { router: { route: PathlessLayout } },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // injectStoryComponent replaces the layout's own `component` with the
+    // story's render (LeafContent), so `pathless-layout` itself is gone —
+    // assert the root layout plus the leaf content that now renders in its place.
+    await expect(canvas.getByTestId('pathless-root')).toBeInTheDocument();
+    await expect(canvas.getByTestId('pathless-leaf')).toBeInTheDocument();
+  },
+};
+
+/**
+ * A pathless layout nested under a pathful ancestor (`/products`). Binding
+ * the story directly to the nested layout must mount it at `/products`
+ * (inferred from the ancestor's path), with the root and the `/products`
+ * ancestor both rendered around the story's own content.
+ */
+export const BoundDirectlyToNestedPathlessLayout: Story = {
+  parameters: {
+    tanstack: { router: { route: NestedPathlessLayout } },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByTestId('pathless-root')).toBeInTheDocument();
+    await expect(canvas.getByTestId('products-layout')).toBeInTheDocument();
+    // injectStoryComponent replaces the nested layout's own `component`, so
+    // `nested-pathless-layout` itself is gone — assert the leaf content that
+    // now renders in its place instead.
+    await expect(canvas.getByTestId('pathless-leaf')).toBeInTheDocument();
+    await expect(onNestedBeforeLoad).toHaveBeenCalled();
+  },
+};