全新 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。

請參閱我們的 Custom UI with JSX 文件，以了解所有元件及其 props，並探索這個使用 JSX 的 Snap 範例。