SuperAPI AI 工具集

storybook-tanstack-start

通用与其它

查看项目

更新于 10-15 23:34

技能介绍

用途:让 Storybook 能在浏览器中运行 TanStack Start 应用。TanStack Start 的服务端代码(createServerFn、SSR 入口、Nitro/Worker 入口)在 Storybook 打包时会报错,该插件拦截这些导入并替换为安全桩。

主要能力:通过 resolveId 拦截 @tanstack/react-start 及其子路径、@tanstack/start-server-core、服务端/worker 入口(server-entry、worker-entry、virtual:cloudflare)、用户代码中的 routeTree.gen,以及 additionalServerModules 指定的模块;提供 createServerFn(可链式构建)、createStart、cookie 辅助、router 与组件桩;默认剥离 TanStack/Nitro Vite 插件,可用 stripTanStackPlugins: false 关闭。

使用方式:安装 pnpm add -D storybook-addon-tanstack-start(已含 storybook-addon-tanstack-router 依赖)。在 .storybook/main.ts 的 viteFinal 中合并 tanstackStartPlugin();在 .storybook/preview.ts 导出 preview 的 decorators;用 tanstackRouterParameters 按 story 配置 location(path、params、search)与 loader 数据。应用自有服务端模块(如 auth、billing)可通过 additionalServerModules 重定向到 mock 文件,并在 resolve.alias 中映射。

限制:若已自定义 withRouter() 装饰器,不要再使用全局装饰器,否则会出现嵌套 RouterProvider;剥离 TanStack 插件为默认行为,需保留时显式关闭。其余细节资料未提供。