Comment créer de superbes interfaces utilisateur de terminal (TUI) dans des formulaires JavaScript !

Je suis obsédé par les TUI, peut-être que vous l'êtes aussi ! Si ce n’est pas encore le cas, j’espère que vous le serez, car ils ne sont pas seulement amusants mais incroyablement utiles !

Il y a environ deux mois, j'ai porté Lipgloss de Go vers WebAssembly. C'était le premier article de cette série ! Mon prochain plan était de porter des formulaires, mais pour faire court, certaines fonctionnalités n'ont pas pu passer à WASM. Les fonctionnalités natives et les limitations d'exécution ont créé des obstacles, alors je suis allé un peu plus bas : DLL et fichiers SO (bibliothèques partagées). Et enfin, nous avons des formulaires !

Remarque : Pour utiliser des bibliothèques partagées en JavaScript, vous aurez besoin de Node.js avec prise en charge native des modules et de node-gyp pour les liaisons C.

La manière la plus simple ? Réinstallez Node.js et sélectionnez l'option des modules natifs lors de l'installation :

Vous préférez une installation manuelle ? Suivez ce README.

---

Pourquoi les DLL et les fichiers SO ?

Ils sont beaucoup plus petits que WASM, et je pourrais finir par tout réécrire pour en profiter !

Si vous êtes prêt à vous lancer, configurez un nouveau projet JavaScript et installez charsm :

pnpm add charsm

---

Formulaires dans la CLI

1. Personnalisation du thème

Pour personnaliser l'apparence de vos formulaires, utilisez des thèmes :

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

Tous les composants définis par la suite utiliseront le thème Dracula. Vous pouvez remplacer le thème à tout moment :

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

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

---

2. Créer une boîte de dialogue de confirmation

Une boîte de dialogue de confirmation simple avec des boutons personnalisables Oui (affirmatif) et Non (négatif) :

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

Lors de son exécution, il renvoie "1" pour Oui et "0" pour Non. Les pointeurs vers les chaînes dans les bibliothèques partagées sont faciles à renvoyer :

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

---

3. Créer un champ de saisie

Exemple 1 : entrée unique

Définir les champs de saisie avec validation et espaces réservés :

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

Les validateurs sont définis comme une chaîne séparée par des virgules. Par exemple, "no_numbers,required" garantit que l'entrée remplit toutes les conditions avant de continuer.

Les validateurs incluent :

• requis
• e-mail
• no_numbers
• alpha_seulement
• no_special_chars

Modes :

• 0 : Entrée sur une seule ligne
• 1 : Zone de texte multiligne

Exemple 2 : entrée multiligne

pnpm add charsm

---

4. Créer un composant de sélection

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

---

5. Ajouter une toupie

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

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

---

6. Créer des formulaires

Les formulaires peuvent contenir plusieurs groupes, les rendant séquentiellement. Voici un exemple :

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

Les valeurs du formulaire sont stockées dans la propriété value de chaque composant :

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

---

Les validateurs peuvent être un peu bogués sous Linux pour les formulaires (j'ai peut-être sauté la création de fichiers .so mis à jour — oups !). Si vous êtes curieux ou souhaitez donner un coup de main, consultez ces dépôts pour les mises à jour – ou mieux encore, contribuez !

• Charsm : Bon premier numéro – Supprimez la méthode de chargement dans les entrées afin qu'elle soit automatiquement appelée dans huh.NewInput.

• Huh Shared Lib Code : Deux premiers bons problèmes – Corrigez la documentation README incorrecte et ajoutez un fichier de build pour la prise en charge de macOS.

Maintenant, parlons de groupes. Vous pouvez créer plusieurs groupes et les transmettre à un seul formulaire comme celui-ci :

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

Lorsque vous faites cela, Huh affichera les groupes dans un ordre échelonné :

Plutôt cool, non ? Un grand merci à Charm pour ses outils incroyables ! Ce n'est que la pointe de l'iceberg. Je continuerai à mettre à jour et à affiner cet outil pour le rendre encore plus utile.

Vous voulez un exemple complet ? Découvrez Construire un café terminal.

Pour quelque chose de plus léger mais dans le même esprit que les DLL, lisez mon article sur le chargement d'un processus Go dans Node.js.

Si vous aimez le contenu approfondi et non adapté aux blogs (pensez aux longues séries et aux joyaux bruts conçus pour améliorer vos compétences de développement), suivez-moi sur Substack, vous pouvez également me trouver sur x .

Articles et séries à venir sur Substack :

• Série P2P : Création de Livescribe, une application d'écriture peer-to-peer open source (ordinateur de bureau et mobile) dans Go.
• Moteur de modèles personnalisés : Créez-en un à partir de zéro.
• Serveur Libuv de bas niveau : Exploration des protocoles personnalisés et de la création de serveurs.
• Windows Universal rencontre WebView : Domination élégante.
• Applications RAG : Plongée dans la génération augmentée par récupération.
• Modules C/C Node.js personnalisés : Pousser Node.js dans ses retranchements.

Merci d’avoir lu : en route pour une année 2025 fantastique ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!