@ opentui/ 固态
Solid.js 对 打开TUI。 。 。 .
安装
bun install solid-js@^1.9 @opentui/solid
使用量
- 在 tsconfig.json 中添加 jsx 配置 :
{
"compilerOptions": {
"jsx": "preserve",
"jsxImportSource": "@opentui/solid"
}
}
- 添加预装脚本到 bunfig.toml :
preload = ["@opentui/solid/preload"]
- 向 index.tsx 添加渲染函数 :
import { render } from "@opentui/solid"
render(() => <text>Hello, World!</text>)
import solidPlugin from "@opentui/solid/bun-plugin"
await Bun.build({
entrypoints: ["./index.tsx"],
target: "bun",
outdir: "./build",
plugins: [solidPlugin],
compile: {
target: "bun-darwin-arm64",
outfile: "app-macos",
},
})
目录
核心概念
构成部分
打开TUI 实心暴露出内在JSX元素
- 显示布局( D) :
text, (中文(简体) ),box, (中文(简体) ),scrollbox, (中文(简体) ),ascii_font - 输入 :
input, (中文(简体) ),textarea, (中文(简体) ),select, (中文(简体) ),tab_select - 代码( D) :
code, (中文(简体) ),line_number, (中文(简体) ),diff - 文本修改器 :
span, (中文(简体) ),strong, (中文(简体) ),b, (中文(简体) ),em, (中文(简体) ),i, (中文(简体) ),u, (中文(简体) ),br, (中文(简体) ),a
API 参考
render(node, rendererOrConfig?)
将固体元件树放入 CLI 渲染器。 如果你遗漏 rendererOrConfig, (中文(简体) ), render() 创建带有默认选项的渲染器. render() 返回一个在初始挂载后解决的保证。 破坏出质器会处理固体根.
import { render } from "@opentui/solid"
render(() => <App />)
参数:
node: 函数返回 JSX 元素.rendererOrConfig?数字 :CliRenderer实例或CliRendererConfig。 。 。 .
testRender(node, options?)
创建用于快照和交互测试的测试渲染器.
import { testRender } from "@opentui/solid"
const testSetup = await testRender(() => <App />, { width: 40, height: 10 })
extend(components)
将自定义可转换成JSX内在要素.
import { extend } from "@opentui/solid"
extend({ customBox: CustomBoxRenderable })
固态调用构造器 { id } 只有这个 建造后,Solid将每个JSX道具应用于实例. 类
仅从其构建者选项中读取一个值并不能从JSX中得到这个值.
getComponentCatalogue()
返回当前授权 JSX 标记搜索的组件目录 .
钩子
useRenderer()onResize(callback)onFocus(callback)onBlur(callback)useTerminalDimensions()useKeyboard(handler, options?)usePaste(handler)useSelectionHandler(handler)useTimeline(options?)
Portal
孩子们进入另一个山地节点。 用于叠加和工具提示.
import { Portal } from "@opentui/solid"
;<Portal mount={renderer.root}>
<box border>Overlay</box>
</Portal>
Dynamic
动态渲染任意的内在元素或组件.
import { Dynamic } from "@opentui/solid"
;<Dynamic component={isMultiline() ? "textarea" : "input"} />
构成部分
布局显示( D)
text: 有样式的文本容器box: 设置有边框、垫装和弹性设置的容器scrollbox: 可滚动容器ascii_font: ASCII 艺术文本渲染器
对于 QR 代码, 调用 registerQRCode() 从 @opentui/qrcode/solid登记 qr_code 键.
投入
input: 单行文本输入textarea: 多行文本输入select: 列表选择tab_select: 基于标签的选择
代码diff( D)
code: 语法高亮的代码块line_number: 有 diff/ 诊断帮助的行码显示diff: 统一或分割 diff 查看器
文本修改器
仅在 a 内使用 text 组件 :
span: 内置样式文本strong编号 :b: 粗体文字em编号 :i: 斜体文字u: 下划线文本br: 换行符a: 链接文本与href