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

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/export-mocks/react-router.d.ts

@@ -334,7 +334,6 @@ declare const Link: ({
   children?: React.ReactNode;
   [key: string]: unknown;
 }) => React.DetailedReactHTMLElement<{
-  href: string;
   onClick: (e: React.MouseEvent) => void;
 }, HTMLElement>;
 /**

package/dist/export-mocks/react-router.js

@@ -38,15 +38,14 @@ var useNavigate = fn(_useNavigate).mockName("@tanstack/react-router::useNavigate
   children,
   ...props
 }) => {
-  let location = useLocation();
+  let location = useLocation(), { onClick: _navigate, ...linkProps } = _useLinkProps({ to, ...props });
   return React.createElement(
     "a",
     {
-      href: to,
+      ...linkProps,
       onClick: (e) => {
         e.preventDefault(), onNavigate({ to, from: location.href });
-      },
-      ...props
+      }
     },
     children
   );

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_bncj3zf7qim from 'node:url';
+import CJS_COMPAT_NODE_PATH_bncj3zf7qim from 'node:path';
+import CJS_COMPAT_NODE_MODULE_bncj3zf7qim 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_bncj3zf7qim.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_bncj3zf7qim.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_bncj3zf7qim.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_bncj3zf7qim from 'node:url';
+import CJS_COMPAT_NODE_PATH_bncj3zf7qim from 'node:path';
+import CJS_COMPAT_NODE_MODULE_bncj3zf7qim 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_bncj3zf7qim.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_bncj3zf7qim.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_bncj3zf7qim.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -13,23 +13,310 @@ var require = CJS_COMPAT_NODE_MODULE_fr5elf42854.createRequire(import.meta.url);
 // src/preset.ts
 import { fileURLToPath } from "node:url";
 
-// ../../../node_modules/pathe/dist/shared/pathe.ff20891b.mjs
-var _DRIVE_LETTER_START_RE = /^[A-Za-z]:\//;
+// ../../../node_modules/pathe/dist/shared/pathe.M-eThtNZ.mjs
+var _lazyMatch = () => {
+  var __lib__ = (() => {
+    var m = Object.defineProperty, V = Object.getOwnPropertyDescriptor, G = Object.getOwnPropertyNames, T = Object.prototype.hasOwnProperty, q = (r, e) => {
+      for (var n in e) m(r, n, { get: e[n], enumerable: !0 });
+    }, H = (r, e, n, a) => {
+      if (e && typeof e == "object" || typeof e == "function") for (let t3 of G(e)) !T.call(r, t3) && t3 !== n && m(r, t3, { get: () => e[t3], enumerable: !(a = V(e, t3)) || a.enumerable });
+      return r;
+    }, J = (r) => H(m({}, "__esModule", { value: !0 }), r), w = {};
+    q(w, { default: () => re });
+    var A = (r) => Array.isArray(r), d = (r) => typeof r == "function", Q = (r) => r.length === 0, W = (r) => typeof r == "number", K = (r) => typeof r == "object" && r !== null, X = (r) => r instanceof RegExp, b = (r) => typeof r == "string", h = (r) => r === void 0, Y = (r) => {
+      let e = /* @__PURE__ */ new Map();
+      return (n) => {
+        let a = e.get(n);
+        if (a) return a;
+        let t3 = r(n);
+        return e.set(n, t3), t3;
+      };
+    }, rr = (r, e, n = {}) => {
+      let a = { cache: {}, input: r, index: 0, indexMax: 0, options: n, output: [] };
+      if (v(e)(a) && a.index === r.length) return a.output;
+      throw new Error(`Failed to parse at index ${a.indexMax}`);
+    }, i = (r, e) => A(r) ? er(r, e) : b(r) ? ar(r, e) : nr(r, e), er = (r, e) => {
+      let n = {};
+      for (let a of r) {
+        if (a.length !== 1) throw new Error(`Invalid character: "${a}"`);
+        let t3 = a.charCodeAt(0);
+        n[t3] = !0;
+      }
+      return (a) => {
+        let t3 = a.index, o = a.input;
+        for (; a.index < o.length && o.charCodeAt(a.index) in n; ) a.index += 1;
+        let u = a.index;
+        if (u > t3) {
+          if (!h(e) && !a.options.silent) {
+            let s = a.input.slice(t3, u), c = d(e) ? e(s, o, String(t3)) : e;
+            h(c) || a.output.push(c);
+          }
+          a.indexMax = Math.max(a.indexMax, a.index);
+        }
+        return !0;
+      };
+    }, nr = (r, e) => {
+      let n = r.source, a = r.flags.replace(/y|$/, "y"), t3 = new RegExp(n, a);
+      return g((o) => {
+        t3.lastIndex = o.index;
+        let u = t3.exec(o.input);
+        if (u) {
+          if (!h(e) && !o.options.silent) {
+            let s = d(e) ? e(...u, o.input, String(o.index)) : e;
+            h(s) || o.output.push(s);
+          }
+          return o.index += u[0].length, o.indexMax = Math.max(o.indexMax, o.index), !0;
+        } else return !1;
+      });
+    }, ar = (r, e) => (n) => {
+      if (n.input.startsWith(r, n.index)) {
+        if (!h(e) && !n.options.silent) {
+          let t3 = d(e) ? e(r, n.input, String(n.index)) : e;
+          h(t3) || n.output.push(t3);
+        }
+        return n.index += r.length, n.indexMax = Math.max(n.indexMax, n.index), !0;
+      } else return !1;
+    }, C = (r, e, n, a) => {
+      let t3 = v(r);
+      return g(_(M((o) => {
+        let u = 0;
+        for (; u < n; ) {
+          let s = o.index;
+          if (!t3(o) || (u += 1, o.index === s)) break;
+        }
+        return u >= e;
+      })));
+    }, tr = (r, e) => C(r, 0, 1), f = (r, e) => C(r, 0, 1 / 0), x = (r, e) => {
+      let n = r.map(v);
+      return g(_(M((a) => {
+        for (let t3 = 0, o = n.length; t3 < o; t3++) if (!n[t3](a)) return !1;
+        return !0;
+      })));
+    }, l = (r, e) => {
+      let n = r.map(v);
+      return g(_((a) => {
+        for (let t3 = 0, o = n.length; t3 < o; t3++) if (n[t3](a)) return !0;
+        return !1;
+      }));
+    }, M = (r, e = !1) => {
+      let n = v(r);
+      return (a) => {
+        let t3 = a.index, o = a.output.length, u = n(a);
+        return (!u || e) && (a.index = t3, a.output.length !== o && (a.output.length = o)), u;
+      };
+    }, _ = (r, e) => v(r), g = /* @__PURE__ */ (() => {
+      let r = 0;
+      return (e) => {
+        let n = v(e), a = r += 1;
+        return (t3) => {
+          var o;
+          if (t3.options.memoization === !1) return n(t3);
+          let u = t3.index, s = (o = t3.cache)[a] || (o[a] = /* @__PURE__ */ new Map()), c = s.get(u);
+          if (c === !1) return !1;
+          if (W(c)) return t3.index = c, !0;
+          if (c) return t3.index = c.index, c.output?.length && t3.output.push(...c.output), !0;
+          {
+            let Z = t3.output.length;
+            if (n(t3)) {
+              let D = t3.index, U = t3.output.length;
+              if (U > Z) {
+                let ee = t3.output.slice(Z, U);
+                s.set(u, { index: D, output: ee });
+              } else s.set(u, D);
+              return !0;
+            } else return s.set(u, !1), !1;
+          }
+        };
+      };
+    })(), E = (r) => {
+      let e;
+      return (n) => (e || (e = v(r())), e(n));
+    }, v = Y((r) => {
+      if (d(r)) return Q(r) ? E(r) : r;
+      if (b(r) || X(r)) return i(r);
+      if (A(r)) return x(r);
+      if (K(r)) return l(Object.values(r));
+      throw new Error("Invalid rule");
+    }), P = "abcdefghijklmnopqrstuvwxyz", ir = (r) => {
+      let e = "";
+      for (; r > 0; ) {
+        let n = (r - 1) % 26;
+        e = P[n] + e, r = Math.floor((r - 1) / 26);
+      }
+      return e;
+    }, O = (r) => {
+      let e = 0;
+      for (let n = 0, a = r.length; n < a; n++) e = e * 26 + P.indexOf(r[n]) + 1;
+      return e;
+    }, S = (r, e) => {
+      if (e < r) return S(e, r);
+      let n = [];
+      for (; r <= e; ) n.push(r++);
+      return n;
+    }, or = (r, e, n) => S(r, e).map((a) => String(a).padStart(n, "0")), R = (r, e) => S(O(r), O(e)).map(ir), p = (r) => r, z = (r) => ur((e) => rr(e, r, { memoization: !1 }).join("")), ur = (r) => {
+      let e = {};
+      return (n) => e[n] ?? (e[n] = r(n));
+    }, sr = i(/^\*\*\/\*$/, ".*"), cr = i(/^\*\*\/(\*)?([ a-zA-Z0-9._-]+)$/, (r, e, n) => `.*${e ? "" : "(?:^|/)"}${n.replaceAll(".", "\\.")}`), lr = i(/^\*\*\/(\*)?([ a-zA-Z0-9._-]*)\{([ a-zA-Z0-9._-]+(?:,[ a-zA-Z0-9._-]+)*)\}$/, (r, e, n, a) => `.*${e ? "" : "(?:^|/)"}${n.replaceAll(".", "\\.")}(?:${a.replaceAll(",", "|").replaceAll(".", "\\.")})`), y = i(/\\./, p), pr = i(/[$.*+?^(){}[\]\|]/, (r) => `\\${r}`), vr = i(/./, p), hr = i(/^(?:!!)*!(.*)$/, (r, e) => `(?!^${L(e)}$).*?`), dr = i(/^(!!)+/, ""), fr = l([hr, dr]), xr = i(/\/(\*\*\/)+/, "(?:/.+/|/)"), gr = i(/^(\*\*\/)+/, "(?:^|.*/)"), mr = i(/\/(\*\*)$/, "(?:/.*|$)"), _r = i(/\*\*/, ".*"), j = l([xr, gr, mr, _r]), Sr = i(/\*\/(?!\*\*\/)/, "[^/]*/"), yr = i(/\*/, "[^/]*"), N = l([Sr, yr]), k = i("?", "[^/]"), $r = i("[", p), wr = i("]", p), Ar = i(/[!^]/, "^/"), br = i(/[a-z]-[a-z]|[0-9]-[0-9]/i, p), Cr = i(/[$.*+?^(){}[\|]/, (r) => `\\${r}`), Mr = i(/[^\]]/, p), Er = l([y, Cr, br, Mr]), B = x([$r, tr(Ar), f(Er), wr]), Pr = i("{", "(?:"), Or = i("}", ")"), Rr = i(/(\d+)\.\.(\d+)/, (r, e, n) => or(+e, +n, Math.min(e.length, n.length)).join("|")), zr = i(/([a-z]+)\.\.([a-z]+)/, (r, e, n) => R(e, n).join("|")), jr = i(/([A-Z]+)\.\.([A-Z]+)/, (r, e, n) => R(e.toLowerCase(), n.toLowerCase()).join("|").toUpperCase()), Nr = l([Rr, zr, jr]), I = x([Pr, Nr, Or]), kr = i("{", "(?:"), Br = i("}", ")"), Ir = i(",", "|"), Fr = i(/[$.*+?^(){[\]\|]/, (r) => `\\${r}`), Lr = i(/[^}]/, p), Zr = E(() => F), Dr = l([j, N, k, B, I, Zr, y, Fr, Ir, Lr]), F = x([kr, f(Dr), Br]), Ur = f(l([sr, cr, lr, fr, j, N, k, B, I, F, y, pr, vr])), Vr = Ur, Gr = z(Vr), L = Gr, Tr = i(/\\./, p), qr = i(/./, p), Hr = i(/\*\*\*+/, "*"), Jr = i(/([^/{[(!])\*\*/, (r, e) => `${e}*`), Qr = i(/(^|.)\*\*(?=[^*/)\]}])/, (r, e) => `${e}*`), Wr = f(l([Tr, Hr, Jr, Qr, qr])), Kr = Wr, Xr = z(Kr), Yr = Xr, $ = (r, e) => {
+      let n = Array.isArray(r) ? r : [r];
+      if (!n.length) return !1;
+      let a = n.map($.compile), t3 = n.every((s) => /(\/(?:\*\*)?|\[\/\])$/.test(s)), o = e.replace(/[\\\/]+/g, "/").replace(/\/$/, t3 ? "/" : "");
+      return a.some((s) => s.test(o));
+    };
+    $.compile = (r) => new RegExp(`^${L(Yr(r))}$`, "s");
+    var re = $;
+    return J(w);
+  })();
+  return __lib__.default || __lib__;
+}, _match, zeptomatch = (path, pattern) => (_match || (_match = _lazyMatch(), _lazyMatch = null), _match(path, pattern)), _DRIVE_LETTER_START_RE = /^[A-Za-z]:\//;
 function normalizeWindowsPath(input = "") {
   return input && input.replace(/\\/g, "/").replace(_DRIVE_LETTER_START_RE, (r) => r.toUpperCase());
 }
-var _IS_ABSOLUTE_RE = /^[/\\](?![/\\])|^[/\\]{2}(?!\.)|^[A-Za-z]:[/\\]/, _DRIVE_LETTER_RE = /^[A-Za-z]:$/;
+var _UNC_REGEX = /^[/\\]{2}/, _IS_ABSOLUTE_RE = /^[/\\](?![/\\])|^[/\\]{2}(?!\.)|^[A-Za-z]:[/\\]/, _DRIVE_LETTER_RE = /^[A-Za-z]:$/, _ROOT_FOLDER_RE = /^\/([A-Za-z]:)?$/, _EXTNAME_RE = /.(\.[^./]+|\.)$/, _PATH_ROOT_RE = /^[/\\]|^[a-zA-Z]:[/\\]/, sep = "/", normalize = function(path) {
+  if (path.length === 0)
+    return ".";
+  path = normalizeWindowsPath(path);
+  let isUNCPath = path.match(_UNC_REGEX), isPathAbsolute = isAbsolute(path), trailingSeparator = path[path.length - 1] === "/";
+  return path = normalizeString(path, !isPathAbsolute), path.length === 0 ? isPathAbsolute ? "/" : trailingSeparator ? "./" : "." : (trailingSeparator && (path += "/"), _DRIVE_LETTER_RE.test(path) && (path += "/"), isUNCPath ? isPathAbsolute ? `//${path}` : `//./${path}` : isPathAbsolute && !isAbsolute(path) ? `/${path}` : path);
+}, join = function(...segments) {
+  let path = "";
+  for (let seg of segments)
+    if (seg)
+      if (path.length > 0) {
+        let pathTrailing = path[path.length - 1] === "/", segLeading = seg[0] === "/";
+        pathTrailing && segLeading ? path += seg.slice(1) : path += pathTrailing || segLeading ? seg : `/${seg}`;
+      } else
+        path += seg;
+  return normalize(path);
+};
+function cwd() {
+  return typeof process < "u" && typeof process.cwd == "function" ? process.cwd().replace(/\\/g, "/") : "/";
+}
+var resolve = function(...arguments_) {
+  arguments_ = arguments_.map((argument) => normalizeWindowsPath(argument));
+  let resolvedPath = "", resolvedAbsolute = !1;
+  for (let index = arguments_.length - 1; index >= -1 && !resolvedAbsolute; index--) {
+    let path = index >= 0 ? arguments_[index] : cwd();
+    !path || path.length === 0 || (resolvedPath = `${path}/${resolvedPath}`, resolvedAbsolute = isAbsolute(path));
+  }
+  return resolvedPath = normalizeString(resolvedPath, !resolvedAbsolute), resolvedAbsolute && !isAbsolute(resolvedPath) ? `/${resolvedPath}` : resolvedPath.length > 0 ? resolvedPath : ".";
+};
+function normalizeString(path, allowAboveRoot) {
+  let res = "", lastSegmentLength = 0, lastSlash = -1, dots = 0, char = null;
+  for (let index = 0; index <= path.length; ++index) {
+    if (index < path.length)
+      char = path[index];
+    else {
+      if (char === "/")
+        break;
+      char = "/";
+    }
+    if (char === "/") {
+      if (!(lastSlash === index - 1 || dots === 1)) if (dots === 2) {
+        if (res.length < 2 || lastSegmentLength !== 2 || res[res.length - 1] !== "." || res[res.length - 2] !== ".") {
+          if (res.length > 2) {
+            let lastSlashIndex = res.lastIndexOf("/");
+            lastSlashIndex === -1 ? (res = "", lastSegmentLength = 0) : (res = res.slice(0, lastSlashIndex), lastSegmentLength = res.length - 1 - res.lastIndexOf("/")), lastSlash = index, dots = 0;
+            continue;
+          } else if (res.length > 0) {
+            res = "", lastSegmentLength = 0, lastSlash = index, dots = 0;
+            continue;
+          }
+        }
+        allowAboveRoot && (res += res.length > 0 ? "/.." : "..", lastSegmentLength = 2);
+      } else
+        res.length > 0 ? res += `/${path.slice(lastSlash + 1, index)}` : res = path.slice(lastSlash + 1, index), lastSegmentLength = index - lastSlash - 1;
+      lastSlash = index, dots = 0;
+    } else char === "." && dots !== -1 ? ++dots : dots = -1;
+  }
+  return res;
+}
 var isAbsolute = function(p) {
   return _IS_ABSOLUTE_RE.test(p);
-};
-var dirname = function(p) {
+}, toNamespacedPath = function(p) {
+  return normalizeWindowsPath(p);
+}, extname = function(p) {
+  if (p === "..") return "";
+  let match = _EXTNAME_RE.exec(normalizeWindowsPath(p));
+  return match && match[1] || "";
+}, relative = function(from, to) {
+  let _from = resolve(from).replace(_ROOT_FOLDER_RE, "$1").split("/"), _to = resolve(to).replace(_ROOT_FOLDER_RE, "$1").split("/");
+  if (_to[0][1] === ":" && _from[0][1] === ":" && _from[0] !== _to[0])
+    return _to.join("/");
+  let _fromCopy = [..._from];
+  for (let segment of _fromCopy) {
+    if (_to[0] !== segment)
+      break;
+    _from.shift(), _to.shift();
+  }
+  return [..._from.map(() => ".."), ..._to].join("/");
+}, dirname = function(p) {
   let segments = normalizeWindowsPath(p).replace(/\/$/, "").split("/").slice(0, -1);
   return segments.length === 1 && _DRIVE_LETTER_RE.test(segments[0]) && (segments[0] += "/"), segments.join("/") || (isAbsolute(p) ? "/" : ".");
+}, format = function(p) {
+  let ext = p.ext ? p.ext.startsWith(".") ? p.ext : `.${p.ext}` : "", segments = [p.root, p.dir, p.base ?? (p.name ?? "") + ext].filter(
+    Boolean
+  );
+  return normalizeWindowsPath(
+    p.root ? resolve(...segments) : segments.join("/")
+  );
+}, basename = function(p, extension) {
+  let segments = normalizeWindowsPath(p).split("/"), lastSegment = "";
+  for (let i = segments.length - 1; i >= 0; i--) {
+    let val = segments[i];
+    if (val) {
+      lastSegment = val;
+      break;
+    }
+  }
+  return extension && lastSegment.endsWith(extension) ? lastSegment.slice(0, -extension.length) : lastSegment;
+}, parse = function(p) {
+  let root = _PATH_ROOT_RE.exec(p)?.[0]?.replace(/\\/g, "/") || "", base = basename(p), extension = extname(base);
+  return {
+    root,
+    dir: dirname(p),
+    base,
+    ext: extension,
+    name: base.slice(0, base.length - extension.length)
+  };
+}, matchesGlob = (path, pattern) => zeptomatch(pattern, normalize(path)), _path = {
+  __proto__: null,
+  basename,
+  dirname,
+  extname,
+  format,
+  isAbsolute,
+  join,
+  matchesGlob,
+  normalize,
+  normalizeString,
+  parse,
+  relative,
+  resolve,
+  sep,
+  toNamespacedPath
 };
 
+// ../../../node_modules/pathe/dist/index.mjs
+var delimiter = globalThis.process?.platform === "win32" ? ";" : ":", _platforms = { posix: void 0, win32: void 0 }, mix = (del = delimiter) => new Proxy(_path, {
+  get(_, prop) {
+    return prop === "delimiter" ? del : prop === "posix" ? posix : prop === "win32" ? win32 : _platforms[prop] || _path[prop];
+  }
+}), posix = mix(":"), win32 = mix(";");
+
 // src/preset.ts
 import { viteFinal as reactViteFinal } from "@storybook/react-vite/preset";
 
+// src/plugins/incompatible-plugins.ts
+var matchesPluginName = (p, matches) => {
+  if (Array.isArray(p))
+    return p.some((entry) => matchesPluginName(entry, matches));
+  let pluginRecord = p;
+  return typeof p == "object" && p !== null && "name" in pluginRecord && typeof pluginRecord.name == "string" && matches(pluginRecord.name);
+}, isTanStackStartPlugin = (p) => matchesPluginName(p, (name) => name.startsWith("tanstack-start") || name.includes("rsc:")), isCloudflareVitePlugin = (p) => matchesPluginName(
+  p,
+  (name) => name === "vite-plugin-cloudflare" || name.startsWith("vite-plugin-cloudflare:")
+);
+
 // src/plugins/server-code-elimination.ts
 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([
@@ -87,19 +374,19 @@ function serverCodeElimination(state) {
       Program(programPath) {
         let tanstackImports = collectTanstackImports(programPath.node.body), resolves = (name, factory) => resolvesToFactory(tanstackImports, name, factory);
         programPath.traverse({
-          CallExpression(path2) {
-            let node = path2.node;
+          CallExpression(path) {
+            let node = path.node;
             if (ROUTE_FACTORY_RE.test(state.code)) {
               let routeOptionsArg = getRouteFactoryOptionsArg(node, tanstackImports);
               routeOptionsArg && stripServerOption(routeOptionsArg) && (state.modified = !0);
             }
             if (t.isIdentifier(node.callee) && resolves(node.callee.name, "createServerOnlyFn") && SERVER_ONLY_FN_RE.test(state.code)) {
-              path2.replaceWith(sbFnCall()), state.modified = !0;
+              path.replaceWith(sbFnCall()), state.modified = !0;
               return;
             }
             if (t.isIdentifier(node.callee) && resolves(node.callee.name, "createClientOnlyFn") && CLIENT_ONLY_FN_RE.test(state.code)) {
               let innerFn = node.arguments[0];
-              innerFn && t.isExpression(innerFn) && (path2.replaceWith(sbFnCallWithImpl(innerFn)), state.modified = !0);
+              innerFn && t.isExpression(innerFn) && (path.replaceWith(sbFnCallWithImpl(innerFn)), state.modified = !0);
               return;
             }
             let methodName = getMethodName(node);
@@ -111,7 +398,7 @@ function serverCodeElimination(state) {
                 let handlerArg = node.arguments[0];
                 if (handlerArg) {
                   if (t.isIdentifier(handlerArg)) {
-                    let binding = path2.scope.getBinding(handlerArg.name);
+                    let binding = path.scope.getBinding(handlerArg.name);
                     binding && binding.referencePaths.length === 1 && binding.path.remove();
                   }
                   node.arguments[0] = sbFnCall();
@@ -120,18 +407,18 @@ function serverCodeElimination(state) {
                 return;
               }
               if (resolves(root.rootName, "createMiddleware") && MIDDLEWARE_RE.test(state.code)) {
-                (methodName === "server" || methodName === "inputValidator") && t.isMemberExpression(path2.node.callee) && (path2.replaceWith(path2.node.callee.object), state.modified = !0);
+                (methodName === "server" || methodName === "inputValidator") && t.isMemberExpression(path.node.callee) && (path.replaceWith(path.node.callee.object), state.modified = !0);
                 return;
               }
               if (resolves(root.rootName, "createIsomorphicFn") && ISOMORPHIC_FN_RE.test(state.code)) {
                 if (methodName === "client") {
                   let innerFn = node.arguments[0];
-                  innerFn && t.isExpression(innerFn) && (path2.replaceWith(sbFnCallWithImpl(innerFn)), state.modified = !0);
+                  innerFn && t.isExpression(innerFn) && (path.replaceWith(sbFnCallWithImpl(innerFn)), state.modified = !0);
                   return;
                 }
                 if (methodName === "server") {
-                  let parent = path2.parent;
-                  (!t.isMemberExpression(parent) || !t.isCallExpression(path2.parentPath?.parent)) && (path2.replaceWith(sbFnCall()), state.modified = !0);
+                  let parent = path.parent;
+                  (!t.isMemberExpression(parent) || !t.isCallExpression(path.parentPath?.parent)) && (path.replaceWith(sbFnCall()), state.modified = !0);
                 }
                 return;
               }
@@ -223,12 +510,12 @@ function getJsxRootIdentifier(name) {
 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);
+    enter(path) {
+      let { node } = path;
+      !t.isIdentifier(node) || path.isBindingIdentifier() || path.findParent((p) => p.isImportDeclaration()) || referenced.add(node.name);
     },
-    JSXOpeningElement(path2) {
-      let root = getJsxRootIdentifier(path2.node.name);
+    JSXOpeningElement(path) {
+      let root = getJsxRootIdentifier(path.node.name);
       root && referenced.add(root.name);
     }
   }), referenced;
@@ -253,11 +540,11 @@ function removeDeadTopLevelDeclarations(programPath) {
 function removeDeadImportSpecifiers(programPath) {
   let referenced = collectReferencedIdentifiers(programPath), removed = !1;
   return programPath.traverse({
-    ImportDeclaration(path2) {
-      if (path2.node.specifiers.length === 0)
+    ImportDeclaration(path) {
+      if (path.node.specifiers.length === 0)
         return;
-      let specifiers = path2.node.specifiers.filter((spec) => referenced.has(spec.local.name));
-      specifiers.length === 0 ? (path2.remove(), removed = !0) : specifiers.length !== path2.node.specifiers.length && (path2.node.specifiers = specifiers, removed = !0);
+      let specifiers = path.node.specifiers.filter((spec) => referenced.has(spec.local.name));
+      specifiers.length === 0 ? (path.remove(), removed = !0) : specifiers.length !== path.node.specifiers.length && (path.node.specifiers = specifiers, removed = !0);
     }
   }), removed;
 }
@@ -413,17 +700,13 @@ var core = async (config, options) => {
   "@tanstack/react-router > @tanstack/react-store",
   "use-sync-external-store/shim/with-selector"
 ], viteFinal = async (config, options) => {
-  let reactConfig = await reactViteFinal(config, options), isTanStackStartPlugin = (p) => {
-    if (Array.isArray(p))
-      return p.some(isTanStackStartPlugin);
-    let pluginRecord = p;
-    return typeof p == "object" && p !== null && "name" in pluginRecord && typeof pluginRecord.name == "string" && (pluginRecord.name.startsWith("tanstack-start") || pluginRecord.name.includes("rsc:"));
-  }, startMockPath = fileURLToPath(import.meta.resolve("./export-mocks/start.js")), startStorageContextMockPath = fileURLToPath(
+  let reactConfig = await reactViteFinal(config, options), startMockPath = fileURLToPath(import.meta.resolve("./export-mocks/start.js")), startStorageContextMockPath = fileURLToPath(
     import.meta.resolve("./export-mocks/start-storage-context.js")
   ), routerMockPath = fileURLToPath(
     import.meta.resolve("@storybook/tanstack-react/react-router")
   ), plugins = [
-    ...(reactConfig.plugins ?? []).filter((p) => !isTanStackStartPlugin(p)),
+    // Drop user plugins that are incompatible with Storybook — see ./plugins/incompatible-plugins.ts
+    ...(reactConfig.plugins ?? []).filter((p) => !isTanStackStartPlugin(p) && !isCloudflareVitePlugin(p)),
     serverCodeEliminationPlugin({ excludeFiles: [dirname(startMockPath)] }),
     serverOnlyStubPlugin(),
     moduleInterceptionPlugin({ startMockPath, startStorageContextMockPath, routerMockPath })

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