Skip to content

Commit 34e8cd0

Browse files
authored
docs(tui): update documentation for Solid.js migration (#33)
Update TUI documentation to reflect the v1.8.0 migration from React to Solid.js: - Change @opentui/react to @opentui/solid - Change React 19.0.0 to Solid.js 1.9.0 - Add note about migration rationale (performance, bundle size) - Update performance optimizations section with Solid.js primitives (createMemo, createSignal, createEffect) - Add windowed list rendering mention - Update Integration section with Solid.js code example - Update graceful exit to reference onCleanup instead of React unmount
1 parent cbd9fcd commit 34e8cd0

File tree

1 file changed

+27
-9
lines changed

1 file changed

+27
-9
lines changed

docs/fumadocs/content/docs/tui.mdx

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,12 @@ skillkit
1818
## Framework
1919

2020
Built on modern technologies:
21-
- **@opentui/react** - Terminal rendering
22-
- **React 19.0.0** - Component architecture
21+
- **@opentui/solid** - Terminal rendering with Solid.js
22+
- **Solid.js 1.9.0** - Reactive component architecture
2323
- **Bun 1.2.0+** - Runtime requirement
2424

25+
The TUI was migrated from React to Solid.js in v1.8.0 for improved performance and smaller bundle size.
26+
2527
## Screens
2628

2729
| Screen | Key | Purpose |
@@ -159,8 +161,10 @@ loadSkills()
159161

160162
### Performance Optimizations
161163

162-
- `useMemo` for filtered lists
163-
- `useCallback` for event handlers
164+
- `createMemo` for filtered lists and computed values
165+
- `createSignal` for reactive state management
166+
- `createEffect` for side effects and subscriptions
167+
- Windowed list rendering for large datasets
164168
- Pagination limits rendered items
165169
- Progressive animation with phases
166170

@@ -174,18 +178,32 @@ loadSkills()
174178

175179
## Integration
176180

177-
The TUI integrates with @skillkit/core:
181+
The TUI integrates with @skillkit/core using Solid.js reactive patterns:
178182

179183
```typescript
180-
findAllSkills(searchDirs) // Returns skill metadata
181-
evaluateSkillDirectory(path) // Quality metrics
182-
getQualityGrade(score) // 0-100 to A-F
184+
import { createSignal, createMemo, createEffect } from 'solid-js';
185+
186+
const [skills, setSkills] = createSignal([]);
187+
188+
createEffect(async () => {
189+
const result = await findAllSkills(searchDirs);
190+
setSkills(result);
191+
});
192+
193+
const filteredSkills = createMemo(() =>
194+
skills().filter(s => s.name.includes(searchTerm()))
195+
);
183196
```
184197

198+
Core functions:
199+
- `findAllSkills(searchDirs)` - Returns skill metadata
200+
- `evaluateSkillDirectory(path)` - Quality metrics
201+
- `getQualityGrade(score)` - 0-100 to A-F
202+
185203
## Graceful Exit
186204

187205
The TUI handles shutdown gracefully:
188-
1. Unmounts React components
206+
1. Runs Solid.js cleanup functions (`onCleanup`)
189207
2. Restores terminal state
190208
3. Cleans up signal handlers
191209
4. Exits process cleanly

0 commit comments

Comments
 (0)