术语DOM
与HTML,CSS,和DOM一起构建终端应用程序.
TermDOM使HTML和CSS进入终端. 它画了一个真正的DOM和 更改时重新绘图, 这样您就可以用平面写终端应用程序 JavaScript 或任何前端框架.
npm install @b9g/termdom
import {TermDOM} from "@b9g/termdom";
const term = new TermDOM();
term.attach();
const {document} = term;
document.body.innerHTML = `
<style>
.card { border: 1px solid #5fafff; padding: 0 1ch; width: 36ch; }
.title { color: #5fafff; font-weight: bold; }
progress { width: 25ch; }
progress::slider-fill { background-color: green; }
.pct { color: #888; }
</style>
<div class="card">
<div class="title">Installing</div>
<div>
<progress id="bar" max="100" value="0"></progress>
<span class="pct" id="pct"></span>
</div>
</div>
`;
let n = 0;
setInterval(() => {
n = (n + 1) % 101;
document.querySelector("progress")!.value = n;
document.getElementById("pct")!.textContent = String(n).padStart(3) + "%";
}, 50);
特征
- 样式表: 级联和继承, 绘制为 ANSI 颜色 和属性.
- 版式:在全单元格中,框模型,弹性框,网格,和表.
- 文本: CJK 、 emoji 和合并字符的正确宽度; 希伯来语和阿拉伯语的视觉顺序与造型.
- 管理部数字 :
querySelector(), (中文(简体) ),MutationObserver, (中文(简体) ),ResizeObserver,以及getBoundingClientRect(),在单元格中测量. - 活动:键盘,鼠标,焦点,和粘贴,从stdin解码.
- 表单: 输入、文本区域、选择、复选框、收音机和 滑动器,可带有CSS的样式.
- 滚动页:1
overflow框,按轮子、键或scrollTo()。 。 。 . - Web 组件:自定义元素,阴影 DOM,
<slot>,以及 范围样式. - 选择: 拖曳以选择,
::selection中,并读取行键 文本字段. - 全屏数字 :
requestFullscreen()使用替代屏幕,并 恢复退出时的外壳. - 图像和画布:PNG、JPEG、GIF和BMP,以及2D和单元格网
画布,每个单元格画出两个像素. A 类
csp选项和"fetch"听者控制什么负载.
如何运作
TermDOM 在字符网上运行浏览器渲染管道
细胞。 默认 1px 财务报告和审定财务报表 1ch 两者都是一个单元格。 每个框架,它
重算已改变的样式和布局, 将画入单元格
缓冲器,并将与上一个框架的区别写成 ANSI 逃脱
顺序。 来自 stdin 的输入成为 DOM 事件 .
实例
markdown.ts- 一个呼唤的Markdown取景器.chat.ts——使用流式LLM聊天客户端 (c.at语)。 。 。 .todomvc.ts- 官方TodoMVC,与 只更改了样式表.fuzzy-finder.ts- 一个文件拾取者 打印选择表以显示.weather.ts从Open-Meteo的预测, 与城市搜索.popover.ts- 菜单栏从popover属性.codemirror.ts- 代码Mirror 编辑 a 文件,带有行号和语法加亮.solitaire.ts上面的单身汉, 由键盘或鼠标播放.hello-{react,vue,svelte,crank}.ts- 一个按键 计算器.ssh.ts—— SSH 服务器,提供每个会话 其自己的文档.shell.ts—— 说ls, (中文(简体) ),cat, (中文(简体) ),less, (中文(简体) ),cd,以及pwd。在terdom.org上,它浏览此寄存器.images.ts- 每个下方都有一个图像object-fit。通过一个路径或URL来显示自己的路径.canvas.ts动画 2D 画布和 康威的生命在细胞网画布上.
还有更多 examples/中,大多数还在
浏览器在 termdom.org/实例。 。 。 .
运行时间
节点 邦和德诺 没有本地的附属地,所以
bun build --compile 工作时.
兼容性
职责. md 列表支持的特性, 由每个测试生成.
名称
不要和他们混淆 DOM 任期 以博纳盟誓, 在DOM中设置了终端. TermDOM将DOM放入终端.
许可证
麻省理工学院