wasmbuilder.app
1.0.0
Proyek ini adalah alat GUI sederhana untuk membangun komponen WebAssembly dari komponen WebAssembly lainnya.
Untuk membangun proyek ini, alat -alat berikut harus diinstal secara lokal:
Untuk menginstal dependensi proyek, jalankan perintah berikut:
$ make setup Ini juga akan menginstal alat baris perintah cargo component (jika belum diinstal).
Untuk menjalankan aplikasi secara lokal, jalankan perintah berikut:
$ make run Secara default, aplikasi berjalan pada port 3000. Buka browser web dan navigasikan ke http://localhost:3000 untuk melihat aplikasi.
Aplikasi ini adalah aplikasi bereaksi satu halaman yang dibundel dengan parsel.
Ini menggunakan komponen WebAssembly (diimplementasikan dalam Rust), yang bertanggung jawab untuk parsing file komponen WebAssembly dan mempertahankan status grafik komposisi.
Aplikasi React mempertahankan keadaan antarmuka pengguna dan memastikan bahwa status grafik internal disimpan selaras dengan representasi visual grafik.
Antarmuka pengguna aplikasi dikembangkan oleh seseorang yang bukan perancang (atau bahkan memiliki keterampilan pengembangan front-end yang belum sempurna). Ini tidak cantik, tetapi berfungsi ™. Permintaan tarik untuk meningkatkan antarmuka sangat disambut!
Saat ini cara termudah untuk membangun komponen WebAssembly individu adalah dengan menggunakan komponen karat dan kargo.
Di masa depan, lebih banyak bahasa pemrograman akan didukung dan karena komponen WebAssembly sendiri adalah bahasa-agnostik, mereka akan dapat digunakan oleh aplikasi ini.
Awalnya aplikasi tidak akan memiliki komponen WebAssembly di pustaka komponen.
Klik tombol Add Component untuk menambahkan komponen baru ke perpustakaan dan pilih file WebAssembly Component ( .wasm ) yang diinginkan.
Atau, file representasi tekstual komponen WebAssembly ( .wat ) dapat ditambahkan ke perpustakaan.
Untuk melihat detail tentang komponen, klik komponen di perpustakaan.
Untuk instantiate komponen, seret komponen dari perpustakaan ke permukaan desain.
Ini akan membuat instance komponen yang dapat dihubungkan ke instance lain dalam grafik.
Setiap contoh komponen memiliki satu set impor dan ekspor. Ekspor dan impor dapat dihubungkan dengan menyeret koneksi antara lingkaran dan kotak yang mewakili mereka.
Contoh contoh:
Dalam contoh ini, contoh komponen middleware mengimpor instance bernama backend dan mengekspor lima jenis dan fungsi bernama execute .
Lingkaran I di sudut kanan atas mewakili instance itu sendiri dan dapat digunakan untuk terhubung dengan impor pada instance lain yang mengambil impor instance yang cocok.
Akhirnya, kotak centang di sudut kiri atas dapat digunakan untuk mengekspor instance (lihat di bawah).
Untuk menghubungkan dua contoh, seret koneksi dari lingkaran ekspor pada satu contoh ke kuadrat impor yang cocok pada instance lain.
Nama -nama tidak perlu dicocokkan, tetapi jenis item harus kompatibel satu sama lain.
Menghubungkan instance membentuk hubungan ketergantungan antara kedua instance: instance ekspor dijamin akan dipakai sebelum instance impor.
Contoh Koneksi:
Dalam contoh ini, instance komponen service terhubung ke impor backend dari instance komponen middleware .
Ketika komponen dibuat untuk grafik ini, instance service akan dipakai sebelum instance middleware , yang akan menerima instance service untuk argumen instantiasi backend .
Saat ini satu contoh dalam grafik dapat ditetapkan sebagai contoh untuk diekspor.
Semua ekspor pada instance yang ditunjuk itu akan secara langsung diekspor dari komponen yang dihasilkan.
Untuk menunjuk contoh untuk diekspor, klik kotak centang di sudut kiri atas instance.
Jika tidak ada contoh yang diperiksa, komponen yang dihasilkan tidak akan memiliki ekspor.
Untuk mengunduh komponen yang mewakili keadaan saat ini dari grafik, klik tombol Download Component .
Berikan nama komponen dan klik tombol Download ; File Komponen .wasm baru akan diunduh oleh browser Anda.
Jika kotak centang define component dependencies tetap dicentang, komponen apa pun yang dirujuk dalam grafik akan tertanam dalam komponen yang dihasilkan; Hapus centang kotak centang untuk mengimpor komponen sebagai gantinya (Catatan: Wasmtime tidak mendukung komponen pengimpian saat ini).
Secara default, komponen yang dihasilkan juga akan ditambahkan ke pustaka komponen aplikasi dan dapat diseret dari pustaka ke permukaan desain untuk membuat instance baru.
