Svelte Bash: Svelte 5용 경량 터미널 컴포넌트 (Autoplay, VFS, Themes, Custom Commands)

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. 깊은 테마링 (Dark, Light, Dracula, Matrix + 사용자 정의 테마)

내장 프리셋을 사용하거나 직접 색상을 지정하세요:

5. TypeScript 완전 지원

모든 prop, 명령, VFS 항목에 정확한 TypeScript 정의가 포함됩니다.

6. 가볍고 빠름

• 의존성 제로
• gzipped 약 4 KB
• Svelte 5 런을 위해 최적화
• 런타임 오버헤드 없음

프로덕션 사이트, 문서, 포트폴리오 섹션에 이상적입니다.

설치

npm install svelte-bash

기본 사용법

import { Terminal } from "svelte-bash";

활용 사례

• 개발자 포트폴리오
• 랜딩 페이지 데모
• 인터랙티브 문서
• 웹 기반 CLI 도구
• 코딩 튜토리얼
• 온보딩 경험

프로젝트에 별표 달기

Svelte Bash가 도움이 되었다면 GitHub 별표를 눌러 주세요. 프로젝트 가시성을 높이고 더 많은 Svelte 개발자가 발견하도록 도와줍니다.

GitHub:
Live demo:

피드백 및 기여

여러분의 제안, 기능 아이디어, 버그 리포트를 언제든 환영합니다. 이슈와 PR을 통해 자유롭게 참여해 주세요.