@opentui/solid 0.1.71 → 0.1.73
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +135 -2
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @opentui/solid
|
|
2
2
|
|
|
3
|
-
Solid.js support for [OpenTUI](https://github.com/
|
|
3
|
+
Solid.js support for [OpenTUI](https://github.com/anomalyco/opentui).
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -37,7 +37,7 @@ render(() => <text>Hello, World!</text>)
|
|
|
37
37
|
|
|
38
38
|
4. Run with `bun index.tsx`.
|
|
39
39
|
|
|
40
|
-
5. To build use [Bun.build](https://bun.com/docs/bundler) ([source](https://github.com/
|
|
40
|
+
5. To build use [Bun.build](https://bun.com/docs/bundler) ([source](https://github.com/anomalyco/opentui/issues/122)):
|
|
41
41
|
|
|
42
42
|
```ts
|
|
43
43
|
import solidPlugin from "@opentui/solid/bun-plugin"
|
|
@@ -53,3 +53,136 @@ await Bun.build({
|
|
|
53
53
|
},
|
|
54
54
|
})
|
|
55
55
|
```
|
|
56
|
+
|
|
57
|
+
## Table of Contents
|
|
58
|
+
|
|
59
|
+
- [Core Concepts](#core-concepts)
|
|
60
|
+
- [Components](#components)
|
|
61
|
+
- [API Reference](#api-reference)
|
|
62
|
+
- [render(node, rendererOrConfig?)](#rendernode-rendererorconfig)
|
|
63
|
+
- [testRender(node, options?)](#testrendernode-options)
|
|
64
|
+
- [extend(components)](#extendcomponents)
|
|
65
|
+
- [getComponentCatalogue()](#getcomponentcatalogue)
|
|
66
|
+
- [Hooks](#hooks)
|
|
67
|
+
- [Portal](#portal)
|
|
68
|
+
- [Dynamic](#dynamic)
|
|
69
|
+
- [Components](#components-1)
|
|
70
|
+
- [Layout & Display](#layout--display)
|
|
71
|
+
- [Input](#input)
|
|
72
|
+
- [Code & Diff](#code--diff)
|
|
73
|
+
- [Text Modifiers](#text-modifiers)
|
|
74
|
+
|
|
75
|
+
## Core Concepts
|
|
76
|
+
|
|
77
|
+
### Components
|
|
78
|
+
|
|
79
|
+
OpenTUI Solid exposes intrinsic JSX elements that map to OpenTUI renderables:
|
|
80
|
+
|
|
81
|
+
- **Layout & Display:** `text`, `box`, `scrollbox`, `ascii_font`
|
|
82
|
+
- **Input:** `input`, `textarea`, `select`, `tab_select`
|
|
83
|
+
- **Code & Diff:** `code`, `line_number`, `diff`
|
|
84
|
+
- **Text Modifiers:** `span`, `strong`, `b`, `em`, `i`, `u`, `br`, `a`
|
|
85
|
+
|
|
86
|
+
## API Reference
|
|
87
|
+
|
|
88
|
+
### `render(node, rendererOrConfig?)`
|
|
89
|
+
|
|
90
|
+
Render a Solid component tree into a CLI renderer. If `rendererOrConfig` is omitted, a renderer is created with default options.
|
|
91
|
+
|
|
92
|
+
```tsx
|
|
93
|
+
import { render } from "@opentui/solid"
|
|
94
|
+
|
|
95
|
+
render(() => <App />)
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
**Parameters:**
|
|
99
|
+
|
|
100
|
+
- `node`: Function returning a JSX element.
|
|
101
|
+
- `rendererOrConfig?`: `CliRenderer` instance or `CliRendererConfig`.
|
|
102
|
+
|
|
103
|
+
### `testRender(node, options?)`
|
|
104
|
+
|
|
105
|
+
Create a test renderer for snapshots and interaction tests.
|
|
106
|
+
|
|
107
|
+
```tsx
|
|
108
|
+
import { testRender } from "@opentui/solid"
|
|
109
|
+
|
|
110
|
+
const testSetup = await testRender(() => <App />, { width: 40, height: 10 })
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### `extend(components)`
|
|
114
|
+
|
|
115
|
+
Register custom renderables as JSX intrinsic elements.
|
|
116
|
+
|
|
117
|
+
```tsx
|
|
118
|
+
import { extend } from "@opentui/solid"
|
|
119
|
+
|
|
120
|
+
extend({ customBox: CustomBoxRenderable })
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### `getComponentCatalogue()`
|
|
124
|
+
|
|
125
|
+
Returns the current component catalogue that powers JSX tag lookup.
|
|
126
|
+
|
|
127
|
+
### Hooks
|
|
128
|
+
|
|
129
|
+
- `useRenderer()`
|
|
130
|
+
- `onResize(callback)`
|
|
131
|
+
- `useTerminalDimensions()`
|
|
132
|
+
- `useKeyboard(handler, options?)`
|
|
133
|
+
- `usePaste(handler)`
|
|
134
|
+
- `useSelectionHandler(handler)`
|
|
135
|
+
- `useTimeline(options?)`
|
|
136
|
+
|
|
137
|
+
### `Portal`
|
|
138
|
+
|
|
139
|
+
Render children into a different mount node, useful for overlays and tooltips.
|
|
140
|
+
|
|
141
|
+
```tsx
|
|
142
|
+
import { Portal } from "@opentui/solid"
|
|
143
|
+
;<Portal mount={renderer.root}>
|
|
144
|
+
<box border>Overlay</box>
|
|
145
|
+
</Portal>
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
### `Dynamic`
|
|
149
|
+
|
|
150
|
+
Render arbitrary intrinsic elements or components dynamically.
|
|
151
|
+
|
|
152
|
+
```tsx
|
|
153
|
+
import { Dynamic } from "@opentui/solid"
|
|
154
|
+
;<Dynamic component={isMultiline() ? "textarea" : "input"} />
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
## Components
|
|
158
|
+
|
|
159
|
+
### Layout & Display
|
|
160
|
+
|
|
161
|
+
- `text`: styled text container
|
|
162
|
+
- `box`: layout container with borders, padding, and flex settings
|
|
163
|
+
- `scrollbox`: scrollable container
|
|
164
|
+
- `ascii_font`: ASCII art text renderer
|
|
165
|
+
|
|
166
|
+
### Input
|
|
167
|
+
|
|
168
|
+
- `input`: single-line text input
|
|
169
|
+
- `textarea`: multi-line text input
|
|
170
|
+
- `select`: list selection
|
|
171
|
+
- `tab_select`: tab-based selection
|
|
172
|
+
|
|
173
|
+
### Code & Diff
|
|
174
|
+
|
|
175
|
+
- `code`: syntax-highlighted code blocks
|
|
176
|
+
- `line_number`: line-numbered code display with diff/diagnostic helpers
|
|
177
|
+
- `diff`: unified or split diff viewer
|
|
178
|
+
|
|
179
|
+
### Text Modifiers
|
|
180
|
+
|
|
181
|
+
These must appear inside a `text` component:
|
|
182
|
+
|
|
183
|
+
- `span`: inline styled text
|
|
184
|
+
- `strong`/`b`: bold text
|
|
185
|
+
- `em`/`i`: italic text
|
|
186
|
+
- `u`: underline text
|
|
187
|
+
- `br`: line break
|
|
188
|
+
- `a`: link text with `href`
|
package/package.json
CHANGED
|
@@ -4,12 +4,12 @@
|
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"type": "module",
|
|
7
|
-
"version": "0.1.
|
|
7
|
+
"version": "0.1.73",
|
|
8
8
|
"description": "SolidJS renderer for OpenTUI",
|
|
9
9
|
"license": "MIT",
|
|
10
10
|
"repository": {
|
|
11
11
|
"type": "git",
|
|
12
|
-
"url": "https://github.com/
|
|
12
|
+
"url": "https://github.com/anomalyco/opentui",
|
|
13
13
|
"directory": "packages/solid"
|
|
14
14
|
},
|
|
15
15
|
"exports": {
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@babel/core": "7.28.0",
|
|
33
33
|
"@babel/preset-typescript": "7.27.1",
|
|
34
|
-
"@opentui/core": "0.1.
|
|
34
|
+
"@opentui/core": "0.1.73",
|
|
35
35
|
"babel-plugin-module-resolver": "5.0.2",
|
|
36
36
|
"babel-preset-solid": "1.9.9",
|
|
37
37
|
"s-js": "^0.4.9"
|