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

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

@@ -23,7 +23,7 @@ import {
   createRoute as createRoute2,
   createRouter,
   RouterProvider,
-  interpolatePath,
+  interpolatePath as interpolatePath2,
   defaultStringifySearch
 } from "@tanstack/react-router";
 
@@ -32,6 +32,7 @@ import {
   createRoute,
   RootRoute,
   createRootRouteWithContext,
+  interpolatePath,
   joinPaths
 } from "@tanstack/react-router";
 var MAX_PARENT_WALK = 50;
@@ -55,12 +56,14 @@ function initSourceTree(route, counter) {
       initSourceTree(child, counter);
 }
 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: 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 +83,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(
@@ -101,13 +104,32 @@ function mountPathFor(route) {
   }
   return joinPaths(["/", ...segments]);
 }
-function resolveStoryLeaf(tree, { path, boundRouteId }) {
+function originalRouteId(tree, route) {
+  for (let [id, cloned] of tree.byId)
+    if (cloned === route)
+      return id;
+}
+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;
@@ -154,7 +176,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) : "";
@@ -201,9 +223,10 @@ 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, leaf.id);
+    injectStoryComponent(leaf, Story, routeOverrides, originalRouteId(tree, leaf) ?? leaf.id);
     let renderLeaf = ensureMatchableLeaf(tree, leaf);
     return { tree, leaf: renderLeaf };
   }
@@ -213,7 +236,7 @@ function resolveTree(Story, context) {
     );
     routerParameterRoute.update({ getParentRoute: () => syntheticRoot2 }), syntheticRoot2.addChildren([routerParameterRoute]);
     let tree = duplicateRouteTree(syntheticRoot2, { overrides: routeOverrides }), leaf = tree.byId.get(routerParameterRoute.id) ?? tree.root;
-    injectStoryComponent(leaf, Story, routeOverrides, leaf.id);
+    injectStoryComponent(leaf, Story, routeOverrides, routerParameterRoute.id);
     let renderLeaf = ensureMatchableLeaf(tree, leaf);
     return { tree, leaf: renderLeaf };
   }
@@ -223,14 +246,20 @@ function resolveTree(Story, context) {
     ...plainRouteRest
   } = plainOptions, syntheticRouteId = plainRoutePath ? void 0 : plainRouteId ?? "storybook-story", syntheticRoot = createRootRoute(
     routeOverrides?.__root__ ?? {}
-  ), syntheticChild = createRoute2({
+  ), leafOverrideKey = syntheticRouteId ?? plainRoutePath, leafOverride = leafOverrideKey ? routeOverrides?.[leafOverrideKey] ?? {} : {}, syntheticChild = createRoute2({
     component: () => React.createElement(Story, null),
     id: syntheticRouteId,
     path: plainRoutePath,
     ...plainRouteRest,
+    ...leafOverride,
     getParentRoute: () => syntheticRoot
   });
-  return syntheticRoot.addChildren([syntheticChild]), injectStoryComponent(syntheticChild, Story, routeOverrides, syntheticChild.id), {
+  return syntheticRoot.addChildren([syntheticChild]), injectStoryComponent(
+    syntheticChild,
+    Story,
+    routeOverrides,
+    syntheticRouteId ?? plainRoutePath ?? syntheticChild.id
+  ), {
     tree: { root: syntheticRoot, byId: /* @__PURE__ */ new Map([[syntheticChild.id, syntheticChild]]) },
     leaf: syntheticChild
   };

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

@@ -1,3 +1,4 @@
+import { ComponentType } from "react";
 import { CompatibleString } from "storybook/internal/types";
 import { AnyRoute, FileRoutesByPath, Register } from "@tanstack/react-router";
 import { Decorator } from "@storybook/react";
@@ -29,6 +30,8 @@ type StoryRouteOptions<TRoute = undefined> = CreateStoryRouteOptions<TRoute> | (
  * 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. */

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-B2-fTWlC.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-CT6Edisg.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-FF4C4TUQ.js";
+} from "./_browser-chunks/chunk-5B7CRIA6.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-B2-fTWlC.js";
+import { r as StorybookConfig } from "../chunk-CT6Edisg.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_u7g6u19rsi from 'node:url';
-import CJS_COMPAT_NODE_PATH_u7g6u19rsi from 'node:path';
-import CJS_COMPAT_NODE_MODULE_u7g6u19rsi from "node:module";
+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";
 
-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);
+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);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration

package/dist/preset.js

@@ -1,10 +1,10 @@
-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";
+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";
 
-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);
+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);
 
 // ------------------------------------------------------------
 // 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,4 +1,4 @@
-import { i as TanStackParameters } from "./chunk-B2-fTWlC.js";
+import { i as TanStackParameters } from "./chunk-CT6Edisg.js";
 import { DecoratorFunction, LoaderFunction, Renderer } from "storybook/internal/types";
 import { applyDecorators as applyDecorators$1 } from "@storybook/react/entry-preview-docs";
 

package/dist/preview.js

@@ -3,7 +3,7 @@ import {
   loaders,
   optimizeDeps,
   parameters
-} from "./_browser-chunks/chunk-FF4C4TUQ.js";
+} from "./_browser-chunks/chunk-5B7CRIA6.js";
 import "./_browser-chunks/chunk-LTDGLEVR.js";
 import "./_browser-chunks/chunk-4BE7D4DS.js";
 export {

package/package.json

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