TermDOM - HTML, CSS와 DOM으로 터미널 UI 만들기

2 days ago 13

웹 개발에 익숙한 HTML, CSS와 DOM API로 터미널 UI와 대화형 CLI를 만드는 JavaScript/TypeScript 라이브러리
별도의 터미널 위젯 API를 배우는 대신, HTML 요소를 만들고 DOM을 수정하는 방식으로 화면을 구성
노드가 바뀌면 스타일과 배치를 다시 계산하고, 이전 화면과 달라진 부분만 출력해 화면을 갱신
CSS의 우선순위와 상속 규칙을 적용하고, 색상과 글자 꾸밈을 ANSI 터미널 표현으로 변환
Flexbox/Grid/Table과 여백, 테두리를 지원하며, 픽셀 대신 문자 칸 단위로 배치
키보드/마우스/붙여넣기를 DOM 이벤트로 전달하고, 입력란과 체크박스, 선택 메뉴, Tab 포커스 이동도 지원
한중일 문자와 이모지의 표시 너비를 처리하며, 아랍어와 히브리어의 표시 순서와 글자 형태도 지원
React/Vue/Svelte/Crank 연동 예제를 제공하며, TodoMVC는 컴포넌트 로직을 바꾸지 않고 스타일시트만 교체해 실행
Markdown 뷰어, 채팅 클라이언트, 파일 선택기와 게임 예제가 있으며, 대부분 웹 플레이그라운드에서도 실행 가능
Node.js/Bun/Deno에서 동작하며 네이티브 구성 요소 없이 사용 가능
npm install @b9g/termdom으로 설치
MIT 라이선스