Storybook Qwik 框架
这是一个允许将 Storybook 与 Qwik 结合使用的框架。
限制
- 这仅在新创建的 Qwik 应用和组件库上测试过。
- 组件更改时，故事会完全重新加载（无热模块替换）
- 目前还没有自动化工具可以方便地在 Qwik 项目中搭建 Storybook 脚手架。
- 故事在开发模式下运行 - 不会发生 SSR 或序列化
设置
在现有的 Qwik 项目中，运行 npx storybook@next init（需要 Storybook 7）
有关开始使用 Storybook 的最佳文档，请参阅Storybook 文档。
用法
一个基本的故事看起来像这样
import Header, { HeaderProps } from "./header";
import { StoryObj } from "storybook-framework-qwik";
export default {
title: "Header",
component: Header, // component value may be a `component$`, or a "Lite component" (function component)
} as Meta<HeaderProps>;
export const Default: StoryObj<HeaderProps> = {};
您可以为每个 Meta 或每个故事包含一个自定义渲染器。但是，渲染器不能使用 Qwik 特性（例如 useStore）。如果您在故事中需要 Qwik 特性，请为组件创建一个包装器。当组件期望其 props 是响应式状态（例如 useStore 或 useSignal）时，这很有用。
import {
ReactiveComponent,
ReactiveComponentProps,
} from "./reactive-component";
import { Meta, StoryObj } from "storybook-framework-qwik";
import { component$, useStore } from "@builder.io/qwik";
const ReactiveComponentWrapper = component$<ReactiveComponentProps>((args) => {
const state = useStore(args.state);
return <ReactiveComponent state={state} />;
});
export default {
title: "Reactive Component",
component: ReactiveComponent,
render: (args) => <ReactiveComponentWrapper state={args.state} />,
args: { state: { number: 1 } },
} as Meta<ReactiveComponentProps>;
export const Default: StoryObj<ReactiveComponentProps> = {};
装饰器 (Decorators)
要创建故事装饰器，请创建一个返回 JSX 的函数，其中包含作为参数传递给装饰器的 StoryFn
import { JSXNode } from "@builder.io/qwik";
import { MyComponent } from "./my-component";
import { Decorator } from "storybook-framework-qwik";
export const myDecorator: Decorator = (Story) =>
// Cast is needed because something is out of sync with the JSXNode generated in tsx files and the type expected by Decorator
(<MyComponent>{Story()}</MyComponent>) as JSXNode;
Qwik City
如果在组件中使用 QwikCity 特性，您可能需要导入 qwikCityDecorator，它将故事包装在 MockQwikCityProvider 中。可以通过在 .storybook/preview.ts 的装饰器数组中导出装饰器来将其添加到所有故事中。
import { qwikCityDecorator } from "storybook-framework-qwik/qwik-city-decorator";
export const decorators = [qwikCityDecorator];
您还可以将装饰器添加到单个故事或故事文件中。
因为此框架仅作为 ESM 模块发布，所以您可能需要在 package.json 中添加 "type": "module"（或者在您的 .storybook 文件夹内创建一个 package.json，以便此设置仅应用于 Storybook）。
故障排除
如果您正在使用 MDX 文件并遇到类似以下错误
Failed to resolve import "react/jsx-dev-runtime"
您可能需要安装 react 作为开发依赖项。
演示
这里有一个使用此包最新版本的简单 Storybook 示例。
