So erstellen Sie schöne Terminal-UIs (TUIs) in JavaScript-Formularen!

Ich bin besessen von TUIs – vielleicht bist du es auch! Wenn noch nicht, hoffe ich, dass Sie es tun werden, denn sie machen nicht nur Spaß, sondern sind auch unglaublich nützlich!

Vor etwa zwei Monaten habe ich Lipgloss von Go nach WebAssembly portiert. Das war der erste Artikel dieser Serie! Mein nächster Plan bestand darin, Formulare zu portieren, aber – um es kurz zu machen – einige Funktionen schafften es nicht, auf WASM umzusteigen. Native Funktionen und Laufzeiteinschränkungen führten zu Hindernissen, also ging ich einen Schritt tiefer: DLLs und SO-Dateien (gemeinsam genutzte Bibliotheken). Und endlich haben wir Formulare!

Hinweis: Um gemeinsam genutzte Bibliotheken in JavaScript zu verwenden, benötigen Sie Node.js mit nativer Modulunterstützung und Node-Gyp für die C-Bindungen.

Der einfachste Weg? Installieren Sie Node.js neu und wählen Sie während des Setups die Option „native Module“ aus:

Bevorzugen Sie die manuelle Installation? Folgen Sie dieser README-Datei.

---

Warum DLLs und SO-Dateien?

Sie sind im Vergleich zu WASM viel kleiner, und ich muss möglicherweise alles neu schreiben, um das auszunutzen!

Wenn Sie bereit sind einzutauchen, richten Sie ein neues JavaScript-Projekt ein und installieren Sie charsm:

pnpm add charsm

---

Formulare in der CLI

1. Theme-Anpassung

Um das Erscheinungsbild Ihrer Formulare anzupassen, verwenden Sie Themen:

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

Alle anschließend definierten Komponenten verwenden das Dracula-Design. Sie können das Thema jederzeit überschreiben:

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

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

---

2. Erstellen Sie einen Bestätigungsdialog

Ein einfacher Bestätigungsdialog mit anpassbaren Schaltflächen „Ja“ (bejahend) und „Nein“ (negativ):

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

Beim Ausführen wird „1“ für „Ja“ und „0“ für „Nein“ zurückgegeben. Zeiger auf Zeichenfolgen in gemeinsam genutzten Bibliotheken können einfach zurückgegeben werden:

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

---

3. Ein Eingabefeld erstellen

Beispiel 1: Einzeleingabe

Eingabefelder mit Validierung und Platzhaltern definieren:

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

Validatoren werden als durch Kommas getrennte Zeichenfolge definiert. Beispielsweise stellt „no_numbers,required“ sicher, dass die Eingabe alle Bedingungen erfüllt, bevor fortgefahren wird.

Zu den Validatoren gehören:

• erforderlich
• E-Mail
• no_numbers
• alpha_only
• no_special_chars

Modi:

• 0: Einzeilige Eingabe
• 1: Mehrzeiliger Textbereich

Beispiel 2: Mehrzeilige Eingabe

pnpm add charsm

---

4. Erstellen Sie eine Auswahlkomponente

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

---

5. Fügen Sie einen Spinner hinzu

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

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

---

6. Formulare erstellen

Formulare können mehrere Gruppen enthalten und diese nacheinander rendern. Hier ist ein Beispiel:

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

Werte aus dem Formular werden in der Werteigenschaft jeder Komponente gespeichert:

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

---

Validatoren können unter Linux für Formulare etwas fehlerhaft sein (vielleicht habe ich die Erstellung aktualisierter .so-Dateien übersprungen – ups!). Wenn Sie neugierig sind oder mithelfen möchten, schauen Sie sich diese Repos an, um Updates zu erhalten – oder, noch besser, tragen Sie dazu bei!

• Charsm: Gute erste Ausgabe – Entfernen Sie die Lademethode in Eingaben, damit sie automatisch in huh.NewInput aufgerufen wird.

• Huh Shared Lib Code: Zwei gute erste Probleme – Korrigieren Sie die falsche README-Dokumentation und fügen Sie eine Build-Datei für die macOS-Unterstützung hinzu.

Jetzt reden wir über Gruppen. Sie können mehrere Gruppen erstellen und sie wie folgt an ein einziges Formular übergeben:

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

Wenn Sie dies tun, rendert Huh die Gruppen in einer gestaffelten Reihenfolge:

Ziemlich cool, oder? Ein großes Lob an Charm für die tollen Werkzeuge! Dies ist nur die Spitze des Eisbergs. Ich werde dieses Tool ständig aktualisieren und verfeinern, um es noch nützlicher zu machen.

Möchten Sie ein vollständiges Beispiel? Schauen Sie sich „Building a Terminal Coffee Shop“ an.

Für etwas Leichteres, aber im gleichen Sinne wie DLLs, lesen Sie meinen Artikel zum Laden eines Go-Prozesses in Node.js.

Wenn Sie auf tiefgründige, nicht blogfreundliche Inhalte stehen – denken Sie an lange Serien und ungeschliffene Juwelen, die Ihre Entwicklerfähigkeiten verbessern sollen – folgen Sie mir auf Substack, Sie können mich auch auf x finden.

Kommende Artikel und Serien zu Substack:

• P2P-Serie: Entwicklung von Livescribe, einer Open-Source-Peer-to-Peer-Schreib-App (Desktop und Mobilgerät) in Go.
• Benutzerdefinierte Template-Engine: Erstellen Sie eine von Grund auf neu.
• Low-Level-Libuv-Server: Erkundung benutzerdefinierter Protokolle und Servererstellung.
• Windows Universal trifft WebView: Stilvolle Dominanz.
• RAG Apps: Eintauchen in die abrufgestützte Generierung.
• Benutzerdefinierte Node.js C/C-Module: Node.js an seine Grenzen bringen.

Vielen Dank fürs Lesen – auf ein fantastisches Jahr 2025! ?

Das obige ist der detaillierte Inhalt vonSo erstellen Sie schöne Terminal-UIs (TUIs) in JavaScript-Formularen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!