Svelte Bash：为 Svelte 5 设计的轻量级终端组件（自动播放、VFS、主题、自定义命令）

Source: Dev.to

为什么我创建了 Svelte Bash

我需要一个用于演示、文档和交互式教程的终端组件——既轻量、可主题化，又能轻松嵌入任何 Svelte 页面。大多数现有方案要么太臃肿，要么不是原生 Svelte 的，于是我从零开始打造了 Svelte Bash，目标如下：

• 采用现代 Svelte 5 特性
• 零依赖
• 小到可以放在着陆页上
• 具备真实的终端行为
• 可轻松扩展自定义命令

关键特性

1. 自动播放模式（脚本化演示）

非常适合着陆页、教程和文档。命令会自动输入并执行。

2. 虚拟文件系统（VFS）

一个带有真实命令（ls、cd、pwd、cat）的迷你虚拟文件系统。像下面这样定义你的结构：

const fileSystem = {
  'readme.md': '# Hello World',
  src: {
    'app.js': 'console.log("Hi")'
  }
};

3. 自定义命令

添加你自己的 CLI 命令——同步或异步均可。

"Hello from Svelte Bash!",
echo: (args) => args.join(' '),
fetchdata: async () => {
  const res = await fetch('https://api.example.com');
  return await res.text();
}

4. 深度主题（暗色、亮色、Dracula、Matrix + 自定义主题）

使用内置预设或自行提供配色：

5. 完全使用 TypeScript 类型化

每个属性、命令和 VFS 条目都包含精确的 TypeScript 定义。

6. 轻量且快速

• 零依赖
• gzipped 后约 4 KB
• 为 Svelte 5 rune 优化
• 没有运行时开销

非常适合生产站点、文档和作品集页面。

安装

npm install svelte-bash

基本用法

import { Terminal } from "svelte-bash";

使用场景

• 开发者作品集
• 着陆页演示
• 交互式文档
• 基于网页的 CLI 工具
• 编程教程
• 入职培训体验

给项目加星

如果 Svelte Bash 对你有帮助，给它一个 GitHub star 将意义重大——这能提升可见度，让更多 Svelte 开发者发现它。

GitHub:
Live demo:

反馈与贡献

欢迎提出建议、功能想法或 bug 报告。Issues 和 PR 一直欢迎。