全新基于 JSX 的 Snaps UI 组件库正式发布

我们推出了一套行业标准、更易于使用的基于 JSX 的 UI 系统，让开发者能够更轻松地创建 Snap UI，并比以往更灵活地自定义其 Snap UI。这套系统取代了此前基于函数的组件系统——后者灵活性有限。借助这个新 UI 库，开发者可以使用自定义 props 构建界面，甚至创建自己的模板组件。

此外，这套新系统还包含支持多种交互场景的 UX 组件，例如定位、按钮变体、下拉菜单等。它为内联样式的定义提供了更好的开发体验，消除了我们在使用 Markdown 时遇到的种种挑战。

旧版 UI 库目前仍受支持，但已被视为废弃版本。我们将在未来某个时间点将其移除。我们强烈建议 Snaps 开发者尽快将其 UI 代码迁移至新的基于 JSX 的系统。

新组件

除了简化自定义 UI 的创建流程，我们还推出了两个全新的交互式 JSX 组件，这两个组件在基于函数的组件中没有对应实现：Dropdown 和 Field。这些组件将帮助你为自定义 UI 带来更强的交互性和更优质的用户体验。

新的 Box 组件取代了 panel 组件，并新增了定位和方向选项，让你能够创建更丰富、更贴合使用场景的 UI。Markdown 已被 Bold、Italic 和 Link 组件所取代，使格式化文本的处理更加便捷。

我们将持续向 JSX API 中添加新组件。

创建自己的组件

JSX API 允许你像在 React 中一样创建自己的组件。你可以从 @metamask/snaps-sdk/jsx 导入现有组件，也可以组合构建自己的自定义组件。以下是一个简单示例：

import {Box, Form, Input, Button} from '@metamask/snaps-sdk/jsx'

export const MyCustomForm = (props) => (
<Box>
  <Form name="form-to-fill">
    <Input name="user-name" placeholder="Your name" />
    <Box direction="horizontal">
      <Button type="submit">Submit</Button>
      {props.isCancellable && <Button type="button" name="cancel">Cancel</Button>}
    </Box>
  </Form>
</Box>
);
复制

升级现有 Snap 项目

以下是将现有 Snap 项目升级至 JSX 所需步骤的概览：

1. 更新 Snap 包的依赖项。

2. 修改 linting 规则，以允许完整使用 JSX 组件。

3. 如果 Snap 的源文件包含 JSX，将其重命名为 index.tsx。

4. 调整 Snap CLI 的配置，使其指向 index.tsx。

5. 编辑 Snap 的 tsconfig.json 文件以启用 JSX。

这些步骤在我们的文档将 Snap 项目升级为使用 JSX 中有详细说明。

快速开始

我们的 template Snap monorepo 已完成配置，可帮助你快速上手。你可以使用以下命令从该 monorepo 创建新的 Snap 项目：

snap/src/index.tsx 文件提供了一个使用 JSX 构建自定义 UI 的示例。你可以从 @metamask/snaps-sdk/jsx 导入组件，并使用它们构建你的 UI。

请参阅我们的基于 JSX 的自定义 UI 文档，了解所有组件及其 props，并探索这个使用 JSX 的 Snap 示例。