贡献 Storybook 框架

Storybook 框架是一个 node 包，它提供对元框架（Next.js、NuxtJS、SvelteKit）或构建器（Webpack、Vite）和渲染器（React、Angular、Vue 3、Web Components 等）组合的开箱即用支持。

对于元框架，Storybook 框架还负责其他必要的配置，以使 Storybook 的行为类似于元框架生成的应用。例如，@storybook/nextjs 在 Storybook 中重新创建或模拟了 Next.js 应用的许多功能。

供您参考，您可以查看所有官方 Storybook 框架，包括它们的完整源代码和文档。

名称应以 storybook-framework- 开头，然后对应您的框架所支持的内容。例如，一个针对 SvelteKit 的框架将命名为 storybook-framework-svelte-kit，一个针对 Stencil 和 Vite 的框架将命名为 storybook-framework-stencil-vite。当不针对元框架时，命名约定为 storybook-framework-<renderer>-<builder>。

2. 考虑您的框架需要做什么

目标是让 Storybook 开箱即用地尽可能类似于您所针对的元框架或构建器-渲染器组合。

对于元框架，这意味着要尝试重新创建元框架提供的任何构建器或 Babel 配置。您应该以尽可能尊重用户现有项目配置的方式进行。

您的框架支持的库可能有不同的主要版本。考虑您的框架将支持哪些库版本。您需要处理这些不同版本中的更改，或者将您的框架拆分成不同的版本/包来支持每个库版本。为了加快维护速度，请考虑为您的框架支持的各种库版本添加集成测试。

3. 编写文档

在编写任何代码之前，请先编写一个有用的 README，其中包含安装说明和可用功能列表。使用 @storybook/nextjs 的 README 作为模板。先编写文档有助于指导您的其他工作。

4. 编写框架本身

一个框架可以包含以下部分

`package.json` (示例)

由于框架是一个 node 包，它必须包含一个 package.json 文件。这是一个您可以用来开始的模板

package.json 模板

package.json

{
  "name": "<your-framework-name>",
  "version": "1.0.0",
  "description": "Storybook for <meta-framework-name> or <renderer> & <builder>",
  "keywords": [
    "Storybook",
    "<meta-framework-name>",
    "<renderer>",
    "<builder>",
    "<anything>",
    "<else>",
    "<relevant>"
  ],
  "homepage": "<your package's homepage>",
  "bugs": {
    "url": "https://github.com/<your-org>/<your-repo>/issues"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/<your-org>/<your-repo>.git",
    "directory": "<path/to/your/framework>"
  },
  "license": "MIT",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "require": "./dist/index.js",
      "import": "./dist/index.mjs"
    },
    "./preset": {
      "types": "./dist/preset.d.ts",
      "require": "./dist/preset.js",
      "import": "./dist/preset.mjs"
    },
    "./preview.js": {
      "types": "./dist/preview.d.ts",
      "require": "./dist/preview.js",
      "import": "./dist/preview.mjs"
    },
    "./package.json": "./package.json"
  },
  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "types": "dist/index.d.ts",
  "files": ["dist/**/*", "types/**/*", "README.md", "*.js", "*.d.ts"],
  "scripts": {
    "check": "tsc --noEmit",
    "test": "..."
  },
  "dependencies": {
    "storybook": "^9.0.0",
    "@storybook/<builder>": "^9.0.0",
    "@storybook/<renderer>": "^9.0.0"
  },
  "devDependencies": {
    "typescript": "x.x.x",
    "<meta-framework>": "^x.x.x",
    "<builder>": "^x.x.x"
  },
  "peerDependencies": {
    "<meta-framework>": "^x.x.x || ^x.x.x",
    "<renderer>": "^x.x.x || ^x.x.x",
    "<builder>": "^x.x.x"
  },
  "engines": {
    "node": ">=20.0.0"
  },
  "publishConfig": {
    "access": "public"
  }
}

关于其中一些属性的几点说明

exports：根目录、./preset 和 package.json 导出是必需的。如果您的框架有 preview.js，那么它也是必需的。
types：我们强烈建议您用 TypeScript 编写框架并分发类型。
dependencies 和 devDependencies：这些只是示例。您的可能看起来大不相同。
peerDependencies：如果您的框架为目标库的多个版本提供支持，请确保在此处反映出来。

RFC 流程，用于撰写功能请求
代码，用于功能和错误修复
框架，用于开始新的框架
文档，用于文档改进、拼写错误和澄清
示例，用于新代码片段

贡献 Storybook 框架

如何创建一个框架

1. 决定包名

2. 考虑您的框架需要做什么

3. 编写文档

4. 编写框架本身

`package.json` (示例)

`preset.js` (示例)

`preview.js` (示例)

`types.ts` (示例)

5. 测试您的框架

6. 告诉我们！

贡献 Storybook 框架

如何创建一个框架

1. 决定包名

2. 考虑您的框架需要做什么

3. 编写文档

4. 编写框架本身

package.json (示例)

preset.js (示例)

preview.js (示例)

types.ts (示例)

5. 测试您的框架

6. 告诉我们！

`package.json` (示例)

`preset.js` (示例)

`preview.js` (示例)

`types.ts` (示例)