Skip to content

Commit 1c61ebb

Browse files
authored
chore: configure package for npm publishing as @coder/ghostty-web (#17)
* Configure package for npm publishing as @coder/ghostty-web - Update package.json with @coder/ghostty-web name and npm metadata - Add proper exports field for ES module, UMD, and TypeScript declarations - Configure vite-plugin-dts for automatic TypeScript declaration generation - Update vite.config.js to build ghostty-web.js/umd.cjs outputs - Create .npmignore to exclude dev files from npm package - Add INSTALL.md with complete installation and usage guide - Update README.md with npm installation instructions - Add build scripts for clean builds with WASM copying Package is now ready for publishing to npm registry. Files included: dist/, ghostty-vt.wasm, README.md, INSTALL.md Build outputs: ghostty-web.js (ES), ghostty-web.umd.cjs (UMD), index.d.ts (types)
1 parent 3dd6d79 commit 1c61ebb

File tree

6 files changed

+482
-25
lines changed

6 files changed

+482
-25
lines changed

.npmignore

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Exclude development files from npm package
2+
demo/
3+
docs/
4+
scripts/
5+
lib/**/*.test.ts
6+
.git*
7+
*.log
8+
node_modules/
9+
bun.lock
10+
roadmap.md
11+
AGENTS.md
12+
run-demo.sh
13+
vite.config.js
14+
tsconfig.json

INSTALL.md

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
# Installation & Usage
2+
3+
## Installation
4+
5+
```bash
6+
npm install @coder/ghostty-web
7+
# or
8+
bun add @coder/ghostty-web
9+
# or
10+
yarn add @coder/ghostty-web
11+
```
12+
13+
## Basic Usage
14+
15+
```typescript
16+
import { Terminal } from '@coder/ghostty-web';
17+
18+
const term = new Terminal({
19+
cols: 80,
20+
rows: 24,
21+
cursorBlink: true,
22+
theme: {
23+
background: '#1e1e1e',
24+
foreground: '#d4d4d4',
25+
},
26+
});
27+
28+
// Mount to DOM
29+
await term.open(document.getElementById('terminal'));
30+
31+
// Write output
32+
term.write('Hello, World!\r\n');
33+
term.write('\x1b[1;32mGreen text\x1b[0m\r\n');
34+
35+
// Handle user input
36+
term.onData((data) => {
37+
console.log('User typed:', data);
38+
// Send to backend, echo, etc.
39+
});
40+
```
41+
42+
## With FitAddon (Responsive Sizing)
43+
44+
```typescript
45+
import { Terminal, FitAddon } from '@coder/ghostty-web';
46+
47+
const term = new Terminal();
48+
const fitAddon = new FitAddon();
49+
term.loadAddon(fitAddon);
50+
51+
await term.open(document.getElementById('terminal'));
52+
fitAddon.fit(); // Resize to container
53+
54+
// Resize on window resize
55+
window.addEventListener('resize', () => fitAddon.fit());
56+
```
57+
58+
## WebSocket Integration
59+
60+
```typescript
61+
import { Terminal } from '@coder/ghostty-web';
62+
63+
const term = new Terminal();
64+
await term.open(document.getElementById('terminal'));
65+
66+
const ws = new WebSocket('ws://localhost:3001/ws');
67+
68+
// Send user input to backend
69+
term.onData((data) => {
70+
ws.send(JSON.stringify({ type: 'input', data }));
71+
});
72+
73+
// Display backend output
74+
ws.onmessage = (event) => {
75+
const msg = JSON.parse(event.data);
76+
term.write(msg.data);
77+
};
78+
```
79+
80+
## WASM File Handling
81+
82+
The library requires the `ghostty-vt.wasm` file at runtime. Most bundlers handle this automatically.
83+
84+
### Vite (Recommended)
85+
86+
Vite handles WASM automatically. No extra config needed:
87+
88+
```javascript
89+
// vite.config.js
90+
export default {
91+
// WASM works out of the box
92+
};
93+
```
94+
95+
### Webpack
96+
97+
Configure WASM as an asset:
98+
99+
```javascript
100+
// webpack.config.js
101+
module.exports = {
102+
module: {
103+
rules: [
104+
{
105+
test: /\.wasm$/,
106+
type: 'asset/resource',
107+
},
108+
],
109+
},
110+
};
111+
```
112+
113+
### Manual Import (Advanced)
114+
115+
```typescript
116+
import wasmUrl from '@coder/ghostty-web/ghostty-vt.wasm?url';
117+
import { Ghostty } from '@coder/ghostty-web';
118+
119+
const ghostty = await Ghostty.load(wasmUrl);
120+
```
121+
122+
## TypeScript Support
123+
124+
Full TypeScript definitions are included:
125+
126+
```typescript
127+
import { Terminal, ITerminalOptions, ITheme } from '@coder/ghostty-web';
128+
129+
const options: ITerminalOptions = {
130+
cols: 80,
131+
rows: 24,
132+
cursorBlink: true,
133+
};
134+
135+
const theme: ITheme = {
136+
background: '#1e1e1e',
137+
foreground: '#d4d4d4',
138+
cursor: '#ffffff',
139+
};
140+
```
141+
142+
## API Documentation
143+
144+
See [API.md](https://github.com/coder/ghostty-web/blob/main/packaging/docs/API.md) for complete API reference.
145+
146+
## Migration from xterm.js
147+
148+
This library follows xterm.js conventions:
149+
150+
```typescript
151+
// Before (xterm.js)
152+
import { Terminal } from 'xterm';
153+
import { FitAddon } from 'xterm-addon-fit';
154+
155+
// After (@coder/ghostty-web)
156+
import { Terminal, FitAddon } from '@coder/ghostty-web';
157+
```
158+
159+
Most xterm.js code works with minimal changes. See [API.md](https://github.com/coder/ghostty-web/blob/main/packaging/docs/API.md) for differences.

README.md

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,41 @@
1-
# Ghostty WASM Terminal
1+
# Ghostty Web
22

3-
A terminal emulator that integrates [Ghostty's](https://github.com/ghostty-org/ghostty) VT100 parser via WebAssembly.
3+
A web-based terminal emulator that integrates [Ghostty's](https://github.com/ghostty-org/ghostty) VT100 parser via WebAssembly.
44

5-
## What This Is
5+
## Installation
66

7-
This repository provides a **foundation for building web-based terminals** using Ghostty's production-tested VT100 parser compiled to WebAssembly.
7+
```bash
8+
npm install @coder/ghostty-web
9+
```
810

9-
**What's implemented:**
11+
## Quick Start
1012

11-
- ✅ Full terminal emulator with screen buffer, VT parser, canvas renderer
12-
- ✅ TypeScript wrapper for libghostty-vt WASM API
13-
- ✅ SGR parser (ANSI colors, 256-color, RGB true color)
14-
- ✅ Key encoder (keyboard events → escape sequences)
15-
- ✅ FitAddon for responsive terminal sizing
16-
- ✅ Interactive demos (file browser, color showcase)
17-
- ✅ xterm.js-compatible API
13+
```typescript
14+
import { Terminal } from '@coder/ghostty-web';
1815

19-
**MVP Complete!** See demos below.
16+
const term = new Terminal({ cols: 80, rows: 24 });
17+
await term.open(document.getElementById('terminal'));
18+
term.write('Hello, World!\r\n');
19+
```
2020

21-
## Quick Start
21+
See [INSTALL.md](./INSTALL.md) for complete usage guide.
22+
23+
## Features
24+
25+
- ✅ Full xterm.js-compatible API
26+
- ✅ Production-tested VT100 parser (via Ghostty)
27+
- ✅ ANSI colors (16, 256, RGB true color)
28+
- ✅ Canvas rendering at 60 FPS
29+
- ✅ Scrollback buffer
30+
- ✅ Text selection & clipboard
31+
- ✅ FitAddon for responsive sizing
32+
- ✅ TypeScript declarations included
33+
34+
## Development & Demos
2235

23-
### Run the Terminal
36+
### Shell Terminal Demo
2437

25-
**Shell Terminal** (requires server)
38+
**Requires server**
2639

2740
```bash
2841
# Terminal 1: Start PTY shell server

0 commit comments

Comments
 (0)