加入直播:美国东部时间周四上午 11 点,Storybook 9 发布及 AMA 问答

markuplint-proto

非官方 markuplint Storybook 插件原型

在 Github 上查看

Storybook 插件 hoge

hoge

开发脚本

  • yarn start 在监听模式下运行 babel 并启动 Storybook
  • yarn build 构建并打包您的插件代码

从 TypeScript 切换到 JavaScript

不想使用 TypeScript?我们提供了一个便捷的 eject 命令:yarn eject-ts

这将把所有代码转换为 JS。这是一个破坏性过程,因此建议您在编写任何代码之前运行此命令。

包含什么?

Demo

插件代码位于 src 目录中。它演示了所有核心插件相关概念。三种 UI 范例

  • src/Tool.js
  • src/Panel.js
  • src/Tab.js

它们与插件本身一起,在 src/preset/manager.js 中注册。

管理状态和与 Story 交互

  • src/withGlobals.jssrc/Tool.js 演示了如何使用 useGlobals 管理全局状态并修改 Story 的内容。
  • src/withRoundTrip.jssrc/Panel.js 演示了使用通道进行双向通信。
  • src/Tab.js 演示了如何使用 useParameter 访问当前 Story 的参数。

您的插件可能使用这些模式中的一种或多种。可以随意删除未使用的代码。相应地更新 src/preset/manager.jssrc/preset/preview.js

最后,在 src/constants.js 中配置您的插件名称。

元数据

Storybook 插件列在目录中,并通过 npm 分发。该目录通过查询 npm 注册表中 package.json 中的 Storybook 特定元数据来填充。本项目已配置了示例数据。在插件元数据文档中了解更多可用选项。

发布管理

设置

本项目配置使用 auto 进行发布管理。它会生成变更日志并将其推送到 GitHub 和 npm。因此,您需要配置对两者的访问权限

  • NPM_TOKEN 创建一个具有读和发布权限的 token。
  • GH_TOKEN 创建一个具有 repo 范围的 token。

然后打开您的 package.json 并编辑以下字段

  • name
  • author
  • repository

本地

要在本地使用 auto,请在项目根目录创建 .env 文件并将您的 token 添加到其中

GH_TOKEN=<value you just got from GitHub>
NPM_TOKEN=<value you just got from npm>

最后,在 GitHub 上创建标签。将来更改包时将使用这些标签。

npx auto create-labels

如果您在 GitHub 上查看,您现在会看到 auto 希望您使用的一组标签。使用这些标签来标记未来的 pull request。

GitHub Actions

此模板已配置了 GitHub actions,以便在有人推送到您的仓库时发布您的插件。

前往 Settings > Secrets,点击 New repository secret,然后添加您的 NPM_TOKEN

创建发布

要在本地创建发布,您可以运行以下命令,否则 GitHub action 将为您创建发布。

yarn release

这将

  • 构建并打包插件代码
  • 增加版本号
  • 将发布推送到 GitHub 和 npm
  • 将变更日志推送到 GitHub
作者
  • nagashimam
    nagashimam
支持
    Angular
    Ember
    HTML
    Preact
    React
    React Native
    Svelte
    Vue
    Web Components
标签