Yeni JSX Tabanlı Snaps UI Bileşen Kütüphanesiyle Tanışın

Geliştiricilerin Snap kullanıcı arayüzlerini daha kolay oluşturmasına ve önceden mümkün olandan çok daha fazla özelleştirmesine olanak tanıyan, sektör standardında, kullanımı daha kolay bir JSX tabanlı kullanıcı arayüzü sistemi sunduk. Bu sistem, çok az esneklik sunan önceki fonksiyon tabanlı bileşen sisteminin yerini almaktadır. Bu yeni kullanıcı arayüzü kütüphanesiyle geliştiriciler, özel prop'larla arayüzler oluşturabilir ve hatta kendi şablon bileşenlerini tasarlayabilir.

Bunun yanı sıra bu yeni sistem, konumlandırma, buton varyantları, açılır menüler ve daha fazlası gibi çeşitli etkileşimli kullanım senaryolarını mümkün kılan UX bileşenlerini de içermektedir. Sistem, Markdown kullanırken karşılaştığımız zorlukları ortadan kaldırarak satır içi stil tanımlamada daha iyi bir geliştirici deneyimi sunmaktadır.

Önceki kullanıcı arayüzü kütüphanesi hâlâ desteklenmekle birlikte kullanımdan kaldırılmış (deprecated) olarak kabul edilmektedir. İleride bir noktada kaldırılacaktır. Snaps geliştiricilerini, kullanıcı arayüzü kodlarını en kısa sürede yeni JSX tabanlı sisteme taşımaya davet ediyoruz.

Yeni bileşenler

Özel kullanıcı arayüzlerinin oluşturulmasını basitleştirmenin yanı sıra, fonksiyon tabanlı karşılığı bulunmayan iki yeni etkileşimli JSX bileşeni yayımladık: Dropdown ve Field. Bu bileşenler, Özel kullanıcı arayüzlerinize daha fazla etkileşim ve daha iyi kullanıcı deneyimleri katmanıza olanak tanıyacak.

Yeni Box bileşeni, panel bileşeninin yerini alarak konumlandırma ve yön seçenekleri eklemektedir. Bu sayede kullanım senaryolarınıza daha uygun, daha zengin kullanıcı arayüzleri oluşturabilirsiniz. Markdown'ın yerini Bold, Italic ve Link bileşenleri almıştır. Bu bileşenler, biçimlendirilmiş metinlerle çalışmayı kolaylaştırmaktadır.

JSX API'sine yeni bileşenler eklemeye devam edeceğiz.

Kendi bileşenlerinizi oluşturun

JSX API, tıpkı React'te olduğu gibi kendi bileşenlerinizi oluşturmanıza imkân tanır. @metamask/snaps-sdk/jsx paketinden mevcut bileşenleri içe aktarabilir ya da kendi özel bileşenlerinizi oluşturabilirsiniz. İşte basit bir örnek:

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>
);
Kopyala

Mevcut bir Snap projesini yükseltin

Mevcut bir Snap projesini JSX'e yükseltmek için gereken adımlara genel bir bakış:

1. Snap paketinin bağımlılıklarını güncelleyin.

2. JSX bileşenlerinin tam kullanımına izin vermek için linting kurallarını düzenleyin.

3. Snap'in kaynak dosyasını, JSX içeriyorsa index.tsx olarak yeniden adlandırın.

4. Snap CLI'nin yapılandırmasını index.tsx'e işaret edecek şekilde ayarlayın.

5. JSX'i etkinleştirmek için Snap'in tsconfig.json dosyasını düzenleyin.

Bu adımlar, mevcut bir Snap projesini JSX kullanacak şekilde yükseltme belgelerimizde ayrıntılı olarak açıklanmaktadır.

Başlayın

Şablon Snap monorepo'muz başlamanız için hazır şekilde yapılandırılmıştır. Aşağıdaki komutu kullanarak monorepo'dan yeni bir Snap projesi oluşturabilirsiniz:

snap/src/index.tsx dosyası, JSX ile Özel kullanıcı arayüzü kullanımına dair bir örnek sunmaktadır. @metamask/snaps-sdk/jsx paketinden bileşenleri içe aktararak kullanıcı arayüzünüzü oluşturabilirsiniz.

Tüm bileşenler ve prop'ları hakkında bilgi edinmek ve bu JSX içeren örnek Snap'i incelemek için JSX ile Özel kullanıcı arayüzü belgelerimize başvurun.