@akfm/vite-plugin-storybook-mock-server-函数

页:1 日本語

允许 Next.js App 路由器服务器动作的 Vite 插件("use server")在"故事书"内部独立运行.

Next.js Server Actions依赖于Next.js自己的捆绑器变换和服务器执行时的运行时间,所以把它们装入Storybook(即以Vite-based)导致构建或运行时间出错. 此插件检测带有以下功能: "use server" 指令并将其替换为 storybook/test是因为 fn()-基于模拟函数,因此使用Server Actions的组件可以在没有真实服务器的情况下在故事书中渲染并测试.

特征

• 检测模块级别和函数级别 "use server" 指令 – 不需要调整现有的动作文件.
• 只将含有指令的函数替换为 fn() 模拟;文件中的其他一切(包括非动作导出)都未被触及.
• 让每个故事通过 parameters.serverFunctions,在故事之间自动重置模拟器.
• 船舶作为单一的Vite插件+一个装饰器——没有额外的"故事本"附加件可以安装.

支持的模式

• 模块级指令数字 : "use server" 在文件的顶端。 文件的每个导出函数都作为服务器动作处理.
• 函数级(内含)指令数字 : "use server" 在单个函数机构的顶端,不需要模块级指令。 这项工作涉及独立的函数声明/表达方式,以及物体或类的字段/方法的属性/表达方式,因此,在其他说明出口之间具有单一的指令性功能(例如: api.create 是服务器动作,而 api.formatLabel 以两种方式正确检测.

// actions/todo.ts (module-level — every export in the file is a Server Action)
"use server";
export async function createTodo(formData: FormData) {
  /* real server-side work */
}

// actions/delete-todo.ts (function-level, no module-level directive — only this
// function is a Server Action)
export async function deleteTodo(id: string) {
  "use server";
  /* real server-side work */
}

// actions/api.ts (function-level, only part of the object is a Server Action)
export const api = {
  create: async (formData: FormData) => {
    "use server";
    /* real server-side work */
  },
  formatLabel: (todo: Todo) => todo.title.toUpperCase(), // regular function, left untouched
};

无论哪种方式,在故事书构建时间,这些功能被模拟函数取而代之,通过 storybook/test是因为 fn()。 。 。 .

安装

npm install -D @akfm/vite-plugin-storybook-mock-server-functions

pnpm add -D @akfm/vite-plugin-storybook-mock-server-functions

yarn add -D @akfm/vite-plugin-storybook-mock-server-functions

要求数 vite 财务报告和审定财务报表 storybook 作为同伴的依赖关系.

设置

1. 注册插件

将插件添加到 .storybook/main.ts是因为 viteFinal。 。 。 .

import { storybookMockServerFunctions } from "@akfm/vite-plugin-storybook-mock-server-functions";

const config = {
  framework: "@storybook/nextjs-vite",
  // ...
  viteFinal: async (viteConfig) => {
    viteConfig.plugins ??= [];
    viteConfig.plugins.push(storybookMockServerFunctions());
    return viteConfig;
  },
};

export default config;

2. 登记装饰者

将装饰器添加到 .storybook/preview.ts在每个故事开始前 都重播所有游戏.

import { withServerFunctionMocks } from "@akfm/vite-plugin-storybook-mock-server-functions/runtime";

const preview = {
  decorators: [withServerFunctionMocks],
};

export default preview;

从故事中注入模拟执行

传出 a Map<mock function, implementation function> 通过 parameters.serverFunctions 在每层的基础上注入任何返回值或行为。 由于Vite的模块图是单通的,故事导入的函数就是所生成的插件的精确的模拟函数,因此可以直接用作Map键.

import { createTodo } from "../actions/todo";
import { api } from "../actions/api";

export const Success: Story = {
  parameters: {
    serverFunctions: new Map([
      [createTodo, async () => ({ ok: true, id: "1" })],
      [api.create, async () => ({ ok: true })],
    ]),
  },
};

若为 parameters.serverFunctions 未设定,每个模拟默认为 async () => undefined。 。 。 .

非服务人员行动职能,如 api.formatLabel 未被转换,可随原实施而导入和使用.

选项

storybookMockServerFunctions({
  include?: FilterPattern; // default: [/\.[jt]sx?$/]
  exclude?: FilterPattern; // default: [/node_modules/]
})

include 编号 : exclude 直接传递到 @rollup/pluginutils是因为 createFilter。 。 。 .

示例

example/ 包含一个校验的故事簿应用程序 @storybook/nextjs-vite。 。 。 .

pnpm install
pnpm build
pnpm --filter example storybook

已知的限制

• 表格的再出口 export { x } from './y' 不支持.
• 职能级别的指令只在以下职能方面得到承认: BlockStatement 正体( 单表达式箭头函数如 () => "use server" 无法在体内持有指令,匹配Next.js自己的约束.
• parameters.serverFunctions 设计绕过一个 Map 直接职能。 如果依赖于故事序列化(例如"故事本"所编的故事特征),请注意功能不能被序列化.
• oxc-parser 依赖于平台特有的本地(napi)二进制。 这通常通过 npm/ pnpm 可选的OS/architecture 解决,但在不支持的运行时环境中可能无法工作.

许可证

麻省理工学院