如何以 JavaScript 形式构建漂亮的终端 UI (TUI)！

我对 TUI 着迷——也许你也是！如果还没有，我希望您会的，因为它们不仅有趣，而且非常有用！

大约两个月前，我将 Lipgloss 从 Go 移植到了 WebAssembly。这是本系列的第一篇文章！我的下一个计划是移植表单，但是长话短说，某些功能无法跳转到 WASM。本机功能和运行时限制带来了障碍，因此我更进一步：DLL 和 SO 文件（共享库）。最后，我们有表格！

注意： 要在 JavaScript 中使用共享库，您需要具有本机模块支持的 Node.js 和用于 C 绑定的 node-gyp。

最简单的方法？重新安装 Node.js 并在安装过程中选择本机模块选项：

更喜欢手动安装？请遵循此自述文件。

---

为什么是 DLL 和 SO 文件？

与 WASM 相比，它们要小得多，我可能最终会重写所有内容来利用它！

如果您准备好投入使用，请设置一个新的 JavaScript 项目并安装 charsm：

pnpm add charsm

---

CLI 中的表单

1. 主题定制

要自定义表单的外观，请使用主题：

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

之后定义的所有组件都将使用 Dracula 主题。您可以随时覆盖主题：

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

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

---

2. 创建确认对话框

一个简单的确认对话框，带有可定制的“是”（肯定）和“否”（否定）按钮：

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

运行时，它返回“1”表示是，“0”表示否。指向共享库中字符串的指针很容易返回：

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

---

3. 创建输入字段

示例 1：单输入

使用验证和占位符定义输入字段：

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

验证器定义为逗号分隔的字符串。例如，“no_numbers,required”确保输入满足所有条件，然后再继续。

验证者包括：

• 必需的
• 电子邮件
• 没有数字
• 仅阿尔法
• no_special_chars

模式：

• 0：单行输入
• 1：多行文本区域

示例 2：多行输入

pnpm add charsm

---

4. 创建选择组件

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

---

5. 添加旋转器

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

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

---

6. 创建表单

表单可以容纳多个组，并按顺序渲染它们。这是一个例子：

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

表单中的值存储在每个组件的 value 属性中：

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

---

Linux 上的表单验证器可能有点问题（我可能跳过了构建更新的 .so 文件 - 哎呀！）。如果您好奇或想伸出援助之手，请查看这些存储库以获取更新 - 或者更好的是，贡献！

• 魅力：第一期好 – 删除输入中的 load 方法，以便在 huh.NewInput 中自动调用它。

• 嗯共享库代码：两个好的第一个问题 – 修复不正确的自述文件并添加 macOS 支持的构建文件。

现在，让我们小组讨论一下。您可以创建多个组并将它们传递到一个表单，如下所示：

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

当你这样做时，Huh 将以交错的顺序渲染组：

很酷，对吧？强烈感谢 Charm 的神奇工具！这只是冰山一角。我将不断更新和完善这个工具，使其更加有用。

想要一个完整的例子吗？看看建立一个航站楼咖啡店。

想要一些更轻量但与 DLL 相同的精神，请阅读我关于在 Node.js 中加载 Go 进程的文章。

如果您喜欢深入的、不适合博客的内容——想想旨在提升您的开发技能的长篇系列和未经打磨的宝石——在 Substack 上关注我，您也可以在 x 上找到我。

即将发布的关于 Substack 的文章和系列：

• P2P 系列： 构建 Livescribe，一个 Go 语言的开源点对点写作应用程序（桌面和移动设备）。
• 自定义模板引擎：从头开始制作一个。
• 低级 Libuv 服务器： 探索自定义协议和服务器构建。
• Windows Universal 遇见 WebView： 时尚统治。
• RAG 应用程序： 深入研究检索增强生成。
• 自定义 Node.js C/C 模块： 将 Node.js 推向极限。

感谢您的阅读——祝 2025 年美好！ ？

以上是如何以 JavaScript 形式构建漂亮的终端 UI (TUI)！的详细内容。更多信息请关注PHP中文网其他相关文章！