@storybook/tanstack-react 11.0.0-alpha.6 → 11.0.0-alpha.8

package/dist/_browser-chunks/{chunk-O6D7CVOG.js → chunk-TENGSR2C.js}

@@ -12,6 +12,7 @@ __export(preview_exports, {
   applyDecorators: () => applyDecorators,
   beforeEach: () => beforeEach,
   loaders: () => loaders,
+  mount: () => mount,
   optimizeDeps: () => optimizeDeps,
   parameters: () => parameters
 });
@@ -188,9 +189,8 @@ function createStoryRouter({
     defaultNotFoundComponent(props) {
       return React.createElement("div", null, "Route not found: ", props.routeId);
     },
-    defaultErrorComponent({ error }) {
-      return React.createElement("div", null, "Story did something wrong : ", String(error));
-    },
+    // Let render errors reach Storybook so it shows them and story tests fail.
+    disableGlobalCatchBoundary: !0,
     context: routerContext
   });
 }
@@ -263,30 +263,6 @@ 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) {
@@ -306,8 +282,43 @@ var routeComponentLoader = (context) => {
   }
 };
 
+// src/routing/story-router.ts
+import { mount as reactMount } from "@storybook/react/entry-preview";
+var storyRouters = /* @__PURE__ */ new Map(), loadedRouters = /* @__PURE__ */ new WeakSet(), routerBeforeEach = (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
+  });
+  return storyRouters.set(context.id, router), context.tanstackRouter = router, () => {
+    storyRouters.delete(context.id);
+  };
+}, routerMount = (context) => async (...args) => {
+  let router = context.tanstackRouter;
+  if (router && !loadedRouters.has(router)) {
+    if (context.abortSignal?.aborted)
+      return context.canvas;
+    let load = router.load();
+    if (context.abortSignal ? (load.catch(() => {
+    }), await Promise.race([
+      load,
+      new Promise(
+        (resolve) => context.abortSignal.addEventListener("abort", () => resolve(), { once: !0 })
+      )
+    ])) : await load, context.abortSignal?.aborted)
+      return context.canvas;
+    loadedRouters.add(router);
+  }
+  return reactMount(context)(...args);
+};
+
 // src/preview.tsx
-var loaders = [routeComponentLoader], beforeEach = [routerBeforeEach], applyDecorators = (storyFn, allDecorators) => (
+var loaders = [routeComponentLoader], beforeEach = [routerBeforeEach], mount = routerMount, 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, [
@@ -325,6 +336,7 @@ var loaders = [routeComponentLoader], beforeEach = [routerBeforeEach], applyDeco
 export {
   loaders,
   beforeEach,
+  mount,
   applyDecorators,
   parameters,
   optimizeDeps,

package/dist/{chunk-7NHqRJ4O.d.ts → chunk-CCjcehAj.d.ts}

@@ -102,7 +102,8 @@ interface RouterParameters<TRoute = undefined, Path extends (TRoute extends AnyR
 type FrameworkName = CompatibleString<'@storybook/tanstack-react'>;
 type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 type FrameworkOptions = {
-  /** Builder options passed through to @storybook/builder-vite. */builder?: BuilderOptions;
+  /** Builder options passed through to @storybook/builder-vite. */builder?: BuilderOptions; /** Render stories inside `React.StrictMode`. */
+  strictMode?: boolean;
 };
 type StorybookConfigFramework = {
   framework: FrameworkName | {

package/dist/export-mocks/react-router.d.ts

@@ -325,13 +325,16 @@ declare const useRouteContext: Mock<typeof useRouteContext$1>;
 declare const useCanGoBack: Mock<typeof useCanGoBack$1>;
 declare const useLinkProps: Mock<typeof useLinkProps$1>;
 declare const Navigate: typeof Navigate$1;
+type LinkRenderState = {
+  isActive: boolean;
+};
 declare const Link: ({
   to,
   children,
   ...props
 }: {
   to: string;
-  children?: React.ReactNode;
+  children?: React.ReactNode | ((state: LinkRenderState) => React.ReactNode);
   [key: string]: unknown;
 }) => React.DetailedReactHTMLElement<{
   onClick: (e: React.MouseEvent) => void;

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

@@ -38,7 +38,7 @@ var useNavigate = fn(_useNavigate).mockName("@tanstack/react-router::useNavigate
   children,
   ...props
 }) => {
-  let location = useLocation(), { onClick: _navigate, ...linkProps } = _useLinkProps({ to, ...props });
+  let location = useLocation(), { onClick: _navigate, ...linkProps } = _useLinkProps({ to, ...props }), resolvedChildren = typeof children == "function" ? children({ isActive: linkProps["data-status"] === "active" }) : children;
   return React.createElement(
     "a",
     {
@@ -47,7 +47,7 @@ var useNavigate = fn(_useNavigate).mockName("@tanstack/react-router::useNavigate
         e.preventDefault(), onNavigate({ to, from: location.href });
       }
     },
-    children
+    resolvedChildren
   );
 };
 function createFileRoute(path) {

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-7NHqRJ4O.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-CCjcehAj.js";
 import { ComponentType } from "react";
 import { AddonTypes, InferTypes, MetaInput, MetaTypes, PreviewAddonEntry } from "storybook/internal/csf";
 import { Args, ArgsStoryFn, ComponentAnnotations, DecoratorFunction, Parameters, ProjectAnnotations, StoryAnnotations } from "storybook/internal/types";

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   preview_exports
-} from "./_browser-chunks/chunk-O6D7CVOG.js";
+} from "./_browser-chunks/chunk-TENGSR2C.js";
 import "./_browser-chunks/chunk-NGWBYAM4.js";
 import "./_browser-chunks/chunk-4BE7D4DS.js";
 

package/dist/node/index.d.ts

@@ -1,4 +1,4 @@
-import { r as StorybookConfig } from "../chunk-7NHqRJ4O.js";
+import { r as StorybookConfig } from "../chunk-CCjcehAj.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_gyp5bmiktk from 'node:url';
-import CJS_COMPAT_NODE_PATH_gyp5bmiktk from 'node:path';
-import CJS_COMPAT_NODE_MODULE_gyp5bmiktk from "node:module";
+import CJS_COMPAT_NODE_URL_reum8t9ydbr from 'node:url';
+import CJS_COMPAT_NODE_PATH_reum8t9ydbr from 'node:path';
+import CJS_COMPAT_NODE_MODULE_reum8t9ydbr from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_gyp5bmiktk.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_gyp5bmiktk.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_gyp5bmiktk.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_reum8t9ydbr.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_reum8t9ydbr.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_reum8t9ydbr.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_gyp5bmiktk from 'node:url';
-import CJS_COMPAT_NODE_PATH_gyp5bmiktk from 'node:path';
-import CJS_COMPAT_NODE_MODULE_gyp5bmiktk from "node:module";
+import CJS_COMPAT_NODE_URL_reum8t9ydbr from 'node:url';
+import CJS_COMPAT_NODE_PATH_reum8t9ydbr from 'node:path';
+import CJS_COMPAT_NODE_MODULE_reum8t9ydbr from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_gyp5bmiktk.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_gyp5bmiktk.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_gyp5bmiktk.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_reum8t9ydbr.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_reum8t9ydbr.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_reum8t9ydbr.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -20,7 +20,7 @@ var _lazyMatch = () => {
     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 });
+      if (e && typeof e == "object" || typeof e == "function") for (let t of G(e)) !T.call(r, t) && t !== n && m(r, t, { get: () => e[t], enumerable: !(a = V(e, t)) || a.enumerable });
       return r;
     }, J = (r) => H(m({}, "__esModule", { value: !0 }), r), w = {};
     q(w, { default: () => re });
@@ -29,8 +29,8 @@ var _lazyMatch = () => {
       return (n) => {
         let a = e.get(n);
         if (a) return a;
-        let t3 = r(n);
-        return e.set(n, t3), t3;
+        let t = r(n);
+        return e.set(n, t), t;
       };
     }, rr = (r, e, n = {}) => {
       let a = { cache: {}, input: r, index: 0, indexMax: 0, options: n, output: [] };
@@ -40,16 +40,16 @@ var _lazyMatch = () => {
       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;
+        let t = a.charCodeAt(0);
+        n[t] = !0;
       }
       return (a) => {
-        let t3 = a.index, o = a.input;
+        let t = 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 (u > t) {
           if (!h(e) && !a.options.silent) {
-            let s = a.input.slice(t3, u), c = d(e) ? e(s, o, String(t3)) : e;
+            let s = a.input.slice(t, u), c = d(e) ? e(s, o, String(t)) : e;
             h(c) || a.output.push(c);
           }
           a.indexMax = Math.max(a.indexMax, a.index);
@@ -57,10 +57,10 @@ var _lazyMatch = () => {
         return !0;
       };
     }, nr = (r, e) => {
-      let n = r.source, a = r.flags.replace(/y|$/, "y"), t3 = new RegExp(n, a);
+      let n = r.source, a = r.flags.replace(/y|$/, "y"), t = new RegExp(n, a);
       return g((o) => {
-        t3.lastIndex = o.index;
-        let u = t3.exec(o.input);
+        t.lastIndex = o.index;
+        let u = t.exec(o.input);
         if (u) {
           if (!h(e) && !o.options.silent) {
             let s = d(e) ? e(...u, o.input, String(o.index)) : e;
@@ -72,56 +72,56 @@ var _lazyMatch = () => {
     }, 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);
+          let t = d(e) ? e(r, n.input, String(n.index)) : e;
+          h(t) || n.output.push(t);
         }
         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);
+      let t = 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;
+          if (!t(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;
+        for (let t = 0, o = n.length; t < o; t++) if (!n[t](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;
+        for (let t = 0, o = n.length; t < o; t++) if (n[t](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;
+        let t = a.index, o = a.output.length, u = n(a);
+        return (!u || e) && (a.index = t, 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) => {
+        return (t) => {
           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 (t.options.memoization === !1) return n(t);
+          let u = t.index, s = (o = t.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;
+          if (W(c)) return t.index = c, !0;
+          if (c) return t.index = c.index, c.output?.length && t.output.push(...c.output), !0;
           {
-            let Z = t3.output.length;
-            if (n(t3)) {
-              let D = t3.index, U = t3.output.length;
+            let Z = t.output.length;
+            if (n(t)) {
+              let D = t.index, U = t.output.length;
               if (U > Z) {
-                let ee = t3.output.slice(Z, U);
+                let ee = t.output.slice(Z, U);
                 s.set(u, { index: D, output: ee });
               } else s.set(u, D);
               return !0;
@@ -160,7 +160,7 @@ var _lazyMatch = () => {
     }, 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 ? "/" : "");
+      let a = n.map($.compile), t = n.every((s) => /(\/(?:\*\*)?|\[\/\])$/.test(s)), o = e.replace(/[\\\/]+/g, "/").replace(/\/$/, t ? "/" : "");
       return a.some((s) => s.test(o));
     };
     $.compile = (r) => new RegExp(`^${L(Yr(r))}$`, "s");
@@ -367,7 +367,10 @@ function moduleInterceptionPlugin({
 }
 
 // src/plugins/server-code-elimination.ts
-import { types as t, transformSync } from "storybook/internal/babel";
+import {
+  SourceEditor,
+  walk
+} from "storybook/internal/csf-tools";
 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",
@@ -392,114 +395,114 @@ function serverCodeEliminationPlugin(options = {}) {
       async handler(code, id) {
         if (!/\.[mc]?[jt]sx?$/.test(id) || excludeFiles.some((excluded) => id.includes(excluded)) || !ANY_PATTERN_RE.test(code))
           return null;
-        let state = { code, modified: !1, needsFnImport: !1 }, result = transformSync(code, {
-          filename: id,
-          sourceType: "module",
-          parserOpts: {
-            plugins: ["typescript", "jsx"]
-          },
-          plugins: [() => serverCodeElimination(state)],
-          sourceMaps: !0,
-          configFile: !1,
-          babelrc: !1
-        });
-        return !state.modified || !result?.code ? null : {
-          code: result.code,
-          map: result.map
-        };
+        let editor = new SourceEditor(code, id);
+        return eliminateServerCode(editor) ? { code: editor.toString(), map: editor.generateMap({ source: id }).toString() } : null;
       }
     }
   };
 }
-function serverCodeElimination(state) {
-  function sbFnCall() {
-    return state.needsFnImport = !0, buildFnCall();
-  }
-  function sbFnCallWithImpl(impl) {
-    return state.needsFnImport = !0, buildFnCallWithImpl(impl);
-  }
-  return {
-    visitor: {
-      Program(programPath) {
-        let tanstackImports = collectTanstackImports(programPath.node.body), resolves = (name, factory) => resolvesToFactory(tanstackImports, name, factory);
-        programPath.traverse({
-          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)) {
-              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) && (path.replaceWith(sbFnCallWithImpl(innerFn)), state.modified = !0);
-              return;
-            }
-            let methodName = getMethodName(node);
-            if (!methodName)
-              return;
-            let root = findChainRoot(node);
-            if (root) {
-              if (methodName === "handler" && resolves(root.rootName, "createServerFn") && SERVER_FN_RE.test(state.code)) {
-                let handlerArg = node.arguments[0];
-                if (handlerArg) {
-                  if (t.isIdentifier(handlerArg)) {
-                    let binding = path.scope.getBinding(handlerArg.name);
-                    binding && binding.referencePaths.length === 1 && binding.path.remove();
-                  }
-                  node.arguments[0] = sbFnCall();
-                }
-                state.modified = !0;
-                return;
-              }
-              if (resolves(root.rootName, "createMiddleware") && MIDDLEWARE_RE.test(state.code)) {
-                (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) && (path.replaceWith(sbFnCallWithImpl(innerFn)), state.modified = !0);
-                  return;
-                }
-                if (methodName === "server") {
-                  let parent = path.parent;
-                  (!t.isMemberExpression(parent) || !t.isCallExpression(path.parentPath?.parent)) && (path.replaceWith(sbFnCall()), state.modified = !0);
-                }
-                return;
-              }
-            }
-          }
-        }), state.modified && (state.needsFnImport && programPath.node.body.unshift(buildFnImport()), eliminateDeadImports(programPath));
+var FN_IMPORT = 'import { fn as __sb_fn } from "storybook/test";';
+function eliminateServerCode(editor) {
+  let { code, program, edits } = editor, tanstackImports = collectTanstackImports(program), resolves = (name, factory) => resolvesToFactory(tanstackImports, name, factory), removed = [], isGone = (node) => removed.some((span) => span.start <= node.start && node.end <= span.end), replace = (span, text) => {
+    edits.overwrite(span.start, span.end, text), removed.push(span);
+  }, remove = (span) => {
+    span.end > span.start && (edits.remove(span.start, span.end), removed.push(span));
+  }, modified = !1, needsFnImport = !1, fnCall = (span) => {
+    needsFnImport = !0, replace(span, "__sb_fn()");
+  }, fnCallWithImpl = (call, impl) => {
+    needsFnImport = !0, replace({ start: call.start, end: impl.start }, "__sb_fn("), replace({ start: impl.end, end: call.end }, ")");
+  };
+  if (walk(program, (node, parent) => {
+    if (isGone(node))
+      return !1;
+    if (node.type !== "CallExpression")
+      return;
+    if (ROUTE_FACTORY_RE.test(code)) {
+      let routeOptionsArg = getRouteFactoryOptionsArg(node, tanstackImports);
+      if (routeOptionsArg) {
+        let serverOptions = routeOptionsArg.properties.filter(isServerOption);
+        serverOptions.forEach(
+          (option) => remove(listItemRange(routeOptionsArg.properties, option))
+        ), modified ||= serverOptions.length > 0;
       }
     }
-  };
-}
-function buildFnImport() {
-  return t.importDeclaration(
-    [t.importSpecifier(t.identifier("__sb_fn"), t.identifier("fn"))],
-    t.stringLiteral("storybook/test")
-  );
+    if (node.callee.type === "Identifier" && resolves(node.callee.name, "createServerOnlyFn") && SERVER_ONLY_FN_RE.test(code))
+      return fnCall(node), modified = !0, !1;
+    if (node.callee.type === "Identifier" && resolves(node.callee.name, "createClientOnlyFn") && CLIENT_ONLY_FN_RE.test(code)) {
+      let innerFn = node.arguments[0];
+      innerFn && innerFn.type !== "SpreadElement" && (fnCallWithImpl(node, innerFn), modified = !0);
+      return;
+    }
+    let methodName = getMethodName(node);
+    if (!methodName)
+      return;
+    let root = findChainRoot(node);
+    if (root) {
+      if (methodName === "handler" && resolves(root.rootName, "createServerFn") && SERVER_FN_RE.test(code)) {
+        let handlerArg = node.arguments[0];
+        handlerArg && (handlerArg.type === "Identifier" && removeSingleUseDeclaration(editor, editor.scopes.bindingOf(handlerArg), remove), fnCall(handlerArg)), modified = !0;
+        return;
+      }
+      if (resolves(root.rootName, "createMiddleware") && MIDDLEWARE_RE.test(code)) {
+        (methodName === "server" || methodName === "inputValidator") && node.callee.type === "MemberExpression" && (remove({ start: node.callee.object.end, end: node.end }), modified = !0);
+        return;
+      }
+      if (resolves(root.rootName, "createIsomorphicFn") && ISOMORPHIC_FN_RE.test(code)) {
+        if (methodName === "client") {
+          let innerFn = node.arguments[0];
+          innerFn && innerFn.type !== "SpreadElement" && (fnCallWithImpl(node, innerFn), modified = !0);
+          return;
+        }
+        if (methodName === "server") {
+          let grandparent = parent && editor.parentOf(parent);
+          if (parent?.type !== "MemberExpression" || grandparent?.type !== "CallExpression")
+            return fnCall(node), modified = !0, !1;
+        }
+      }
+    }
+  }), !modified)
+    return !1;
+  if (needsFnImport) {
+    let at = program.body.filter(
+      (statement) => statement.type === "ExpressionStatement" && statement.directive
+    ).at(-1)?.end ?? (code.startsWith("#!") ? code.indexOf(`
+`) + 1 : 0);
+    edits.appendLeft(at, `${at > 0 ? `
+` : ""}${FN_IMPORT}
+`);
+  }
+  return eliminateDeadCode(editor, isGone, remove), !0;
 }
-function buildFnCall() {
-  return t.callExpression(t.identifier("__sb_fn"), []);
+function listItemRange(items, item) {
+  let index = items.indexOf(item), next = items[index + 1], previous = items[index - 1];
+  return next ? { start: item.start, end: next.start } : previous ? { start: previous.end, end: item.end } : item;
 }
-function buildFnCallWithImpl(impl) {
-  return t.callExpression(t.identifier("__sb_fn"), [impl]);
+function removeSingleUseDeclaration(editor, binding, remove) {
+  if (!binding || binding.references.length !== 1)
+    return;
+  if (binding.kind === "function" || binding.kind === "class") {
+    remove(binding.node);
+    return;
+  }
+  let declaration = binding.declaration;
+  if (!(!["var", "let", "const"].includes(binding.kind) || binding.node.type !== "VariableDeclarator" || !declaration)) {
+    if (declaration.declarations.length === 1) {
+      editor.parentOf(declaration)?.type !== "ExportNamedDeclaration" && remove(declaration);
+      return;
+    }
+    remove(listItemRange(declaration.declarations, binding.node));
+  }
 }
-function collectTanstackImports(body) {
+function collectTanstackImports(program) {
   let imports = /* @__PURE__ */ new Map();
-  for (let node of body) {
-    if (!t.isImportDeclaration(node))
+  for (let node of program.body) {
+    if (node.type !== "ImportDeclaration")
       continue;
     let src = node.source.value;
     if (!(!src.includes("@tanstack/") && !src.includes("export-mocks") && !src.includes("@storybook/tanstack-react"))) {
       for (let spec of node.specifiers)
-        if (t.isImportSpecifier(spec)) {
-          let importedName = t.isIdentifier(spec.imported) ? spec.imported.name : spec.imported.value;
+        if (spec.type === "ImportSpecifier") {
+          let importedName = spec.imported.type === "Identifier" ? spec.imported.name : String(spec.imported.value);
           imports.set(spec.local.name, importedName);
         }
     }
@@ -513,9 +516,9 @@ function findChainRoot(node) {
   let current = node;
   for (; ; ) {
     let callee = current.callee;
-    if (t.isIdentifier(callee))
+    if (callee.type === "Identifier")
       return { rootCall: current, rootName: callee.name };
-    if (t.isMemberExpression(callee) && t.isCallExpression(callee.object)) {
+    if (callee.type === "MemberExpression" && callee.object.type === "CallExpression") {
       current = callee.object;
       continue;
     }
@@ -523,90 +526,99 @@ function findChainRoot(node) {
   }
 }
 function getMethodName(node) {
-  return t.isMemberExpression(node.callee) && t.isIdentifier(node.callee.property) ? node.callee.property.name : null;
+  return node.callee.type === "MemberExpression" && node.callee.property.type === "Identifier" ? node.callee.property.name : null;
 }
 function getRouteFactoryOptionsArg(node, imports) {
   if (!getRouteFactoryName(node, imports))
     return null;
   let optionsArg = node.arguments[0];
-  return t.isObjectExpression(optionsArg) ? optionsArg : null;
+  return optionsArg?.type === "ObjectExpression" ? optionsArg : null;
 }
 function getRouteFactoryName(node, imports) {
-  if (t.isIdentifier(node.callee)) {
+  if (node.callee.type === "Identifier") {
     let resolved = imports.get(node.callee.name) ?? node.callee.name;
     return ROUTE_FACTORIES.has(resolved) ? resolved : null;
   }
-  if (t.isCallExpression(node.callee) && t.isIdentifier(node.callee.callee)) {
+  if (node.callee.type === "CallExpression" && node.callee.callee.type === "Identifier") {
     let calleeName = node.callee.callee.name, resolved = imports.get(calleeName) ?? calleeName;
     return ROUTE_FACTORIES.has(resolved) ? resolved : null;
   }
   return null;
 }
-function stripServerOption(options) {
-  let initialLength = options.properties.length;
-  return options.properties = options.properties.filter((prop) => {
-    if (!t.isObjectProperty(prop) || prop.computed)
-      return !0;
-    let key = prop.key;
-    return (t.isIdentifier(key) ? key.name : void 0) !== "server";
-  }), options.properties.length !== initialLength;
+function isServerOption(prop) {
+  return prop.type === "Property" && !prop.method && prop.kind === "init" && !prop.computed && prop.key.type === "Identifier" && prop.key.name === "server";
 }
-function getJsxRootIdentifier(name) {
-  for (; t.isJSXMemberExpression(name); )
-    name = name.object;
-  return t.isJSXIdentifier(name) ? name : null;
+function isPure(node, scopes) {
+  if (!node)
+    return !0;
+  switch (node.type) {
+    case "Identifier":
+      return scopes.program.bindings.has(node.name);
+    case "Literal":
+    case "ThisExpression":
+    case "MetaProperty":
+    case "FunctionExpression":
+    case "ArrowFunctionExpression":
+      return !0;
+    case "ClassExpression":
+      return (node.decorators?.length ?? 0) === 0 && isPure(node.superClass, scopes) && node.body.body.every((member) => isPure(member, scopes));
+    case "MethodDefinition":
+      return (!node.computed || isPure(node.key, scopes)) && (node.decorators?.length ?? 0) === 0;
+    case "PropertyDefinition":
+      return (!node.computed || isPure(node.key, scopes)) && (node.decorators?.length ?? 0) === 0 && (!node.static || isPure(node.value, scopes));
+    case "Property":
+      return (!node.computed || isPure(node.key, scopes)) && (node.method || isPure(node.value, scopes));
+    case "BinaryExpression":
+    case "LogicalExpression":
+      return isPure(node.left, scopes) && isPure(node.right, scopes);
+    case "ArrayExpression":
+      return node.elements.every((element) => isPure(element, scopes));
+    case "ObjectExpression":
+      return node.properties.every((property) => isPure(property, scopes));
+    case "UnaryExpression":
+      return isPure(node.argument, scopes);
+    case "TemplateLiteral":
+      return node.expressions.every((expression) => isPure(expression, scopes));
+    default:
+      return !1;
+  }
 }
-function collectReferencedIdentifiers(programPath) {
-  let referenced = /* @__PURE__ */ new Set();
-  return programPath.traverse({
-    enter(path) {
-      let { node } = path;
-      !t.isIdentifier(node) || path.isBindingIdentifier() || path.findParent((p) => p.isImportDeclaration()) || referenced.add(node.name);
-    },
-    JSXOpeningElement(path) {
-      let root = getJsxRootIdentifier(path.node.name);
-      root && referenced.add(root.name);
+function eliminateDeadCode(editor, isGone, remove) {
+  let { program, scopes, edits } = editor, isLive = (identifier) => !!scopes.bindingOf(identifier)?.references.some((reference) => !isGone(reference)), deadSpecifiers = /* @__PURE__ */ new Set(), changed = !0;
+  for (; changed; ) {
+    changed = !1;
+    for (let statement of program.body) {
+      if (isGone(statement))
+        continue;
+      (statement.type === "FunctionDeclaration" ? statement.id && !isLive(statement.id) : statement.type === "VariableDeclaration" && statement.declarations.every(
+        (declarator) => declarator.id.type === "Identifier" && !isLive(declarator.id) && isPure(declarator.init, scopes)
+      )) && (remove(statement), changed = !0);
     }
-  }), referenced;
-}
-function removeDeadTopLevelDeclarations(programPath) {
-  let referenced = collectReferencedIdentifiers(programPath), removed = !1;
-  for (let stmtPath of programPath.get("body"))
-    if (!(stmtPath.isImportDeclaration() || stmtPath.isExportDeclaration())) {
-      if (stmtPath.isFunctionDeclaration()) {
-        let id = stmtPath.node.id;
-        id && !referenced.has(id.name) && (stmtPath.remove(), removed = !0);
+    for (let statement of program.body) {
+      if (statement.type !== "ImportDeclaration" || isGone(statement))
+        continue;
+      let specifiers = statement.specifiers.filter((spec) => !deadSpecifiers.has(spec)), live = specifiers.filter((spec) => isLive(spec.local));
+      if (specifiers.length === 0 || live.length === specifiers.length)
+        continue;
+      if (specifiers.filter((spec) => !live.includes(spec)).forEach((spec) => deadSpecifiers.add(spec)), changed = !0, live.length === 0) {
+        remove(statement);
         continue;
       }
-      stmtPath.isVariableDeclaration() && stmtPath.get("declarations").every((declPath) => {
-        if (!t.isIdentifier(declPath.node.id) || referenced.has(declPath.node.id.name)) return !1;
-        let initPath = declPath.get("init");
-        return !declPath.node.init || initPath.isPure();
-      }) && (stmtPath.remove(), removed = !0);
+      let named = live.filter((spec) => spec.type === "ImportSpecifier"), clause = [
+        ...live.filter((spec) => spec.type !== "ImportSpecifier").map((spec) => editor.source(spec)),
+        ...named.length > 0 ? [`{ ${named.map((spec) => editor.source(spec)).join(", ")} }`] : []
+      ].join(", ");
+      edits.overwrite(
+        statement.start,
+        statement.source.start,
+        `import ${statement.importKind === "type" ? "type " : ""}${clause} from `
+      );
     }
-  return removed;
-}
-function removeDeadImportSpecifiers(programPath) {
-  let referenced = collectReferencedIdentifiers(programPath), removed = !1;
-  return programPath.traverse({
-    ImportDeclaration(path) {
-      if (path.node.specifiers.length === 0)
-        return;
-      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;
-}
-function eliminateDeadImports(programPath) {
-  let changed = !0;
-  for (; changed; ) {
-    let d = removeDeadTopLevelDeclarations(programPath), i = removeDeadImportSpecifiers(programPath);
-    changed = d || i;
   }
 }
 
 // src/plugins/server-only-stub.ts
-import { babelParse as parse2, types as t2 } from "storybook/internal/babel";
+import { parseModule } from "storybook/internal/csf-tools";
 var SERVER_FILE_RE = /\.server\.(?:[mc]?[jt]sx?)$/;
 function serverOnlyStubPlugin(options = {}) {
   let patterns = [SERVER_FILE_RE, ...options.extraPatterns ?? []];
@@ -637,29 +649,27 @@ function serverOnlyStubPlugin(options = {}) {
   };
 }
 function collectExports(code, id) {
-  let named = /* @__PURE__ */ new Set(), hasDefault = !1, ast;
+  let named = /* @__PURE__ */ new Set(), hasDefault = !1, program;
   try {
-    ast = parse2(code);
+    ({ program } = parseModule(code, id));
   } catch {
     return { named, hasDefault };
   }
-  for (let node of ast.program.body) {
-    if (t2.isExportDefaultDeclaration(node)) {
+  for (let node of program.body) {
+    if (node.type === "ExportDefaultDeclaration") {
       hasDefault = !0;
       continue;
     }
-    if (!t2.isExportAllDeclaration(node) && t2.isExportNamedDeclaration(node)) {
-      let decl = node.declaration;
-      if (decl)
-        if (t2.isVariableDeclaration(decl))
-          for (let declarator of decl.declarations)
-            t2.isIdentifier(declarator.id) && named.add(declarator.id.name);
-        else (t2.isFunctionDeclaration(decl) || t2.isClassDeclaration(decl)) && decl.id?.name && named.add(decl.id.name);
-      for (let spec of node.specifiers)
-        if (t2.isExportSpecifier(spec)) {
-          let exportedName = t2.isIdentifier(spec.exported) ? spec.exported.name : spec.exported.value;
-          exportedName !== "default" ? named.add(exportedName) : hasDefault = !0;
-        }
+    if (node.type !== "ExportNamedDeclaration")
+      continue;
+    let decl = node.declaration;
+    if (decl?.type === "VariableDeclaration")
+      for (let declarator of decl.declarations)
+        declarator.id.type === "Identifier" && named.add(declarator.id.name);
+    else (decl?.type === "FunctionDeclaration" || decl?.type === "ClassDeclaration") && decl.id?.name && named.add(decl.id.name);
+    for (let spec of node.specifiers) {
+      let exportedName = spec.exported.type === "Identifier" ? spec.exported.name : String(spec.exported.value);
+      exportedName !== "default" ? named.add(exportedName) : hasDefault = !0;
     }
   }
   return { named, hasDefault };

package/dist/preview.d.ts

@@ -1,12 +1,13 @@
-import { i as TanStackParameters } from "./chunk-7NHqRJ4O.js";
+import { i as TanStackParameters } from "./chunk-CCjcehAj.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 mount: ((context: import("storybook/internal/types").StoryContext<import("@storybook/react").ReactRenderer, import("@storybook/react").Args>) => (ui?: import("react").JSX.Element) => Promise<import("storybook/internal/types").Canvas>) | undefined;
 declare const applyDecorators: (storyFn: Parameters<typeof applyDecorators$1>[0], allDecorators: DecoratorFunction[]) => any;
 declare const parameters: TanStackParameters;
 declare const optimizeDeps: string[];
 //#endregion
-export { applyDecorators, beforeEach, loaders, optimizeDeps, parameters };
+export { applyDecorators, beforeEach, loaders, mount, optimizeDeps, parameters };

package/dist/preview.js

@@ -2,15 +2,17 @@ import {
   applyDecorators,
   beforeEach,
   loaders,
+  mount,
   optimizeDeps,
   parameters
-} from "./_browser-chunks/chunk-O6D7CVOG.js";
+} from "./_browser-chunks/chunk-TENGSR2C.js";
 import "./_browser-chunks/chunk-NGWBYAM4.js";
 import "./_browser-chunks/chunk-4BE7D4DS.js";
 export {
   applyDecorators,
   beforeEach,
   loaders,
+  mount,
   optimizeDeps,
   parameters
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/tanstack-react",
-  "version": "11.0.0-alpha.6",
+  "version": "11.0.0-alpha.8",
   "description": "Storybook for TanStack (React, Vite): Router and Start ready Storybook framework",
   "keywords": [
     "storybook",
@@ -75,9 +75,9 @@
     "!src/**/*"
   ],
   "dependencies": {
-    "@storybook/builder-vite": "11.0.0-alpha.6",
-    "@storybook/react": "11.0.0-alpha.6",
-    "@storybook/react-vite": "11.0.0-alpha.6"
+    "@storybook/builder-vite": "11.0.0-alpha.8",
+    "@storybook/react": "11.0.0-alpha.8",
+    "@storybook/react-vite": "11.0.0-alpha.8"
   },
   "devDependencies": {
     "@tanstack/react-router": "^1.168.10",
@@ -95,7 +95,7 @@
     "@tanstack/start-client-core": "^1.167.9",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "storybook": "^11.0.0-alpha.6",
+    "storybook": "^11.0.0-alpha.8",
     "vite": "^6.3.0 || ^7.0.0 || ^8.0.0"
   },
   "peerDependenciesMeta": {

package/template/stories/BeforeEachOrder.stories.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/tanstack-react';
+
+import { expect, within } from 'storybook/test';
+
+let mockedUser = 'unmocked';
+const beforeLoadCalls: string[] = [];
+
+function BeforeLoadViewer() {
+  return <p data-testid="before-load-user">{beforeLoadCalls.join(',') || 'missing'}</p>;
+}
+
+const meta = {
+  component: BeforeLoadViewer,
+  parameters: {
+    tanstack: {
+      router: {
+        route: {
+          beforeLoad: () => {
+            beforeLoadCalls.push(mockedUser);
+          },
+        },
+      },
+    },
+  },
+  beforeEach: () => {
+    mockedUser = 'from-beforeEach';
+    return () => {
+      mockedUser = 'unmocked';
+      beforeLoadCalls.length = 0;
+    };
+  },
+} satisfies Meta<typeof BeforeLoadViewer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Route `beforeLoad` runs after the story's `beforeEach`, so it sees its mocks. */
+export const BeforeLoadSeesBeforeEach: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByTestId('before-load-user')).toHaveTextContent('from-beforeEach');
+    await expect(beforeLoadCalls.length).toBeGreaterThan(0);
+    await expect(beforeLoadCalls.every((call) => call === 'from-beforeEach')).toBe(true);
+  },
+};
+
+/** Route `beforeLoad` runs when `play` calls `mount`, so it sees mocks set up in `play`. */
+export const BeforeLoadSeesPlayBeforeMount: Story = {
+  play: async ({ mount }) => {
+    mockedUser = 'from-play';
+    const canvas = await mount();
+    await expect(canvas.getByTestId('before-load-user')).toHaveTextContent('from-play');
+    await expect(beforeLoadCalls.length).toBeGreaterThan(0);
+    await expect(beforeLoadCalls.every((call) => call === 'from-play')).toBe(true);
+  },
+};
+
+let routerStatusInBeforeEach = 'unset';
+
+/** The story router exists in the story's `beforeEach`, before its initial load. */
+export const RouterAvailableInBeforeEach: Story = {
+  beforeEach: (context) => {
+    const router = (context as any).tanstackRouter;
+    routerStatusInBeforeEach = router ? router.state.status : 'missing';
+  },
+  play: async () => {
+    await expect(routerStatusInBeforeEach).toBe('idle');
+  },
+};