Cara Membina UI Terminal Cantik (TUI) dalam bentuk JavaScript!

Saya taksub dengan TUI—mungkin anda juga begitu! Jika belum, saya harap anda akan melakukannya, kerana ia bukan sahaja menyeronokkan tetapi sangat berguna!

Kira-kira dua bulan lalu, saya mengalihkan Lipgloss daripada Pergi ke WebAssembly. Itulah artikel pertama dalam siri ini! Rancangan saya seterusnya adalah untuk memindahkan borang, tetapi—pendek cerita—beberapa ciri tidak dapat membuat lompatan ke WASM. Ciri asli dan pengehadan masa jalan menimbulkan sekatan jalan, jadi saya melangkah lebih rendah: DLL dan fail SO (pustaka dikongsi). Dan akhirnya, kami mempunyai borang!

Nota: Untuk menggunakan perpustakaan kongsi dalam JavaScript, anda memerlukan Node.js dengan sokongan modul asli dan nod-gyp untuk pengikatan C.

Cara paling mudah? Pasang semula Node.js dan pilih pilihan modul asli semasa persediaan:

Lebih suka pemasangan manual? Ikuti README ini.

---

Mengapa fail DLL dan SO?

Ia jauh lebih kecil berbanding WASM, dan saya mungkin akan menulis semula segala-galanya untuk memanfaatkannya!

Jika anda sudah bersedia untuk menyelami, sediakan projek JavaScript baharu dan pasangkan pesona:

pnpm add charsm

---

Borang dalam CLI

1. Penyesuaian Tema

Untuk menyesuaikan penampilan borang anda, gunakan tema:

import { huh } from "charsm";
huh.SetTheme("dracula");

Semua komponen yang ditakrifkan selepas itu akan menggunakan tema Dracula. Anda boleh menggantikan tema pada bila-bila masa:

huh.SetTheme("dracula"); 
// Components here use Dracula
huh.SetTheme("Catppuccin");
// Components here use Catppuccin

// Available themes: default, Charm, Base16, Dracula, Catppuccin

---

2. Buat Dialog Pengesahan

Dialog pengesahan ringkas dengan butang Ya (affirmatif) dan Tidak (negatif) yang boleh disesuaikan:

const m = huh.Confirm("Do you want to proceed?", "Yes", "No");

Apabila dijalankan, ia mengembalikan "1" untuk Ya dan "0" untuk penunjuk Tidak. kepada rentetan dalam perpustakaan kongsi mudah dikembalikan:

if (m.run() === "1") {
  console.log("User chose the affirmative option");
} else {
  console.log("User chose the negative option");
}

---

3. Buat Medan Input

Contoh 1: Input Tunggal

Tentukan medan input dengan pengesahan dan ruang letak:

const i = new huh.NewInput(
  {
    Title: "Username",
    Description: "Enter your name",
    Placeholder: "e.g., John Doe",
    validators: "no_numbers,required", 
  },
  0 // Mode: Single Input
);
i.load();
console.log(i.run());

Pengesah ditakrifkan sebagai rentetan yang dipisahkan koma. Contohnya, "no_numbers,required" memastikan input memenuhi semua syarat sebelum meneruskan.

Pengesah termasuk:

• diperlukan
• emel
• tiada_nombor
• alpha_only
• tiada_karakter_istimewa

Mod:

• 0: Input satu baris
• 1: Kawasan teks berbilang baris

Contoh 2: Input Berbilang Talian

pnpm add charsm

---

4. Buat Komponen Pilihan

import { huh } from "charsm";
huh.SetTheme("dracula");

---

5. Tambahkan Spinner

huh.SetTheme("dracula"); 
// Components here use Dracula
huh.SetTheme("Catppuccin");
// Components here use Catppuccin

// Available themes: default, Charm, Base16, Dracula, Catppuccin

---

6. Mencipta Borang

Borang boleh memuatkan berbilang kumpulan, menjadikannya secara berurutan. Berikut ialah contoh:

const m = huh.Confirm("Do you want to proceed?", "Yes", "No");

Nilai daripada borang disimpan dalam sifat nilai setiap komponen:

if (m.run() === "1") {
  console.log("User chose the affirmative option");
} else {
  console.log("User chose the negative option");
}

---

Pengesah boleh menjadi agak buggy di Linux untuk borang (saya mungkin telah melangkau membina fail .so yang dikemas kini—ops!). Jika anda ingin tahu atau ingin menghulurkan bantuan, lihat repo ini untuk mendapatkan kemas kini—atau lebih baik lagi, sumbangkan!

• Charsm: Isu pertama yang baik – Alih keluar kaedah beban dalam input supaya ia dipanggil secara automatik huh.NewInput.

• Huh Kod Lib Dikongsi: Dua isu pertama yang baik – Betulkan dokumentasi README yang salah dan tambah fail binaan untuk sokongan macOS.

Sekarang, mari bercakap kumpulan. Anda boleh membuat berbilang kumpulan dan menyerahkannya kepada satu bentuk seperti ini:

const i = new huh.NewInput(
  {
    Title: "Username",
    Description: "Enter your name",
    Placeholder: "e.g., John Doe",
    validators: "no_numbers,required", 
  },
  0 // Mode: Single Input
);
i.load();
console.log(i.run());

Apabila anda melakukan ini, Huh akan menjadikan kumpulan dalam susunan berperingkat:

Cukup keren, bukan? Jeritan hebat kepada Charm untuk alatan hebat mereka! Ini hanyalah puncak gunung ais. Saya akan terus mengemas kini dan memperhalusi alat ini untuk menjadikannya lebih berguna.

Mahukan contoh lengkap? Lihat Membina Kedai Kopi Terminal.

Untuk sesuatu yang lebih ringan tetapi dalam semangat yang sama seperti DLL, baca artikel saya tentang Memuatkan Proses Pergi dalam Node.js.

Jika anda menyukai kandungan yang mendalam dan tidak mesra blog—fikirkan siri panjang dan permata yang tidak digilap yang direka untuk meningkatkan kemahiran pembangun anda—ikuti saya di Substack, anda juga boleh menemui saya di x .

Artikel dan Siri Akan Datang mengenai Substack:

• Siri P2P: Membina Livescribe, apl penulisan rakan ke rakan sumber terbuka (desktop dan mudah alih) dalam Go.
• Enjin Templat Tersuai: Membuat satu dari awal.
• Pelayan Libuv Tahap Rendah: Meneroka protokol tersuai dan pembinaan pelayan.
• Windows Universal Meet WebView: Penguasaan bergaya.
• Apl RAG: Menyelidiki penjanaan dipertingkatkan semula.
• Modul C/C Node.js Tersuai: Menolak Node.js ke hadnya.

Terima kasih kerana membaca—inilah untuk 2025 yang hebat! ?

Atas ialah kandungan terperinci Cara Membina UI Terminal Cantik (TUI) dalam bentuk JavaScript!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!