docs(tui): update documentation for Solid.js migration#33
Conversation
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
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughDocumentation file updated to reflect framework migration from React 19.0.0 to Solid.js 1.9.0, including revised code examples, performance optimization patterns, and lifecycle management approaches. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@docs/fumadocs/content/docs/tui.mdx`:
- Around line 181-195: The snippet uses undefined variables and an async
callback in createEffect; define signals for searchDirs and searchTerm (e.g.,
const [searchDirs, setSearchDirs] = createSignal([...]) and const [searchTerm,
setSearchTerm] = createSignal('')) and change the createEffect callback to be
synchronous by invoking an async IIFE inside it (or replace the pattern with
createResource) so the effect returns a proper cleanup function; update
references to skills(), findAllSkills(searchDirs()), and createMemo(() =>
skills().filter(s => s.name.includes(searchTerm()))) to use the newly defined
signals (symbols: createSignal, createEffect, createMemo, findAllSkills, skills,
filteredSkills, searchDirs, searchTerm).
| The TUI integrates with @skillkit/core using Solid.js reactive patterns: | ||
|
|
||
| ```typescript | ||
| findAllSkills(searchDirs) // Returns skill metadata | ||
| evaluateSkillDirectory(path) // Quality metrics | ||
| getQualityGrade(score) // 0-100 to A-F | ||
| import { createSignal, createMemo, createEffect } from 'solid-js'; | ||
|
|
||
| const [skills, setSkills] = createSignal([]); | ||
|
|
||
| createEffect(async () => { | ||
| const result = await findAllSkills(searchDirs); | ||
| setSkills(result); | ||
| }); | ||
|
|
||
| const filteredSkills = createMemo(() => | ||
| skills().filter(s => s.name.includes(searchTerm())) | ||
| ); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, check if the file exists and examine the context around the lines in question
fd "tui.mdx" --type fRepository: rohitg00/skillkit
Length of output: 95
🌐 Web query:
Solid.js createEffect async operations best practices
💡 Result:
Best practices for async work with createEffect in Solid
-
Prefer
createResource/createAsyncfor data fetching (instead ofcreateEffect)
Solid’s recommended approach for async fetching iscreateResource(andcreateAsyncin Solid Router / SolidStart), which gives you built-in loading/error state, integrates with Suspense, and avoids common race-condition footguns. [1] [2] [3] -
Don’t make the effect function itself
async
createEffectexpects a synchronous function; if you mark itasync, it returns a Promise (not a cleanup function), so Solid can’t use it for teardown. Instead, start async work inside the effect. [1] -
Cancel/ignore stale requests on re-run using
onCleanup(orAbortController)
Effects re-run whenever tracked dependencies change. UseonCleanupto cancel in-flight work or mark it stale so older promises can’t commit results after a newer run. [4] [1]createEffect(() => { const id = userId(); const ac = new AbortController(); (async () => { const r = await fetch(`/api/users/${id}`, { signal: ac.signal }); // setUser(await r.json()); })(); onCleanup(() => ac.abort()); });
-
Keep effects for “side effects”, not for deriving state
Solid’s docs caution that effects are primarily for side effects that read reactive state; avoid using them as your default place to set signals derived from other signals (use memos/resources where appropriate). [1] [3] -
Be deliberate about what the effect tracks
Everything you read insidecreateEffectbecomes a dependency and can trigger re-runs. Keep reads minimal to avoid accidental refetch loops or extra async churn. [1]
🏁 Script executed:
# Read the file around lines 181-195 to see the full context
cat -n docs/fumadocs/content/docs/tui.mdx | sed -n '170,210p'Repository: rohitg00/skillkit
Length of output: 1286
Make the integration snippet self-contained and use synchronous createEffect.
searchDirs and searchTerm are undefined in the snippet. Additionally, createEffect expects a synchronous callback; the current async function returns a Promise instead of a cleanup function, preventing proper teardown. Wrap the async call in an IIFE (shown below) or use createResource for a more idiomatic data-fetching approach in Solid.
Proposed doc-friendly tweak
import { createSignal, createMemo, createEffect } from 'solid-js';
const [skills, setSkills] = createSignal([]);
+const [searchTerm, setSearchTerm] = createSignal('');
+// Wire setSearchTerm to your input handler
+const searchDirs = /* e.g., getSearchDirs(agentType) */;
-createEffect(async () => {
- const result = await findAllSkills(searchDirs);
- setSkills(result);
-});
+createEffect(() => {
+ void (async () => {
+ const result = await findAllSkills(searchDirs);
+ setSkills(result);
+ })();
+});
const filteredSkills = createMemo(() =>
skills().filter(s => s.name.includes(searchTerm()))
);🤖 Prompt for AI Agents
In `@docs/fumadocs/content/docs/tui.mdx` around lines 181 - 195, The snippet uses
undefined variables and an async callback in createEffect; define signals for
searchDirs and searchTerm (e.g., const [searchDirs, setSearchDirs] =
createSignal([...]) and const [searchTerm, setSearchTerm] = createSignal(''))
and change the createEffect callback to be synchronous by invoking an async IIFE
inside it (or replace the pattern with createResource) so the effect returns a
proper cleanup function; update references to skills(),
findAllSkills(searchDirs()), and createMemo(() => skills().filter(s =>
s.name.includes(searchTerm()))) to use the newly defined signals (symbols:
createSignal, createEffect, createMemo, findAllSkills, skills, filteredSkills,
searchDirs, searchTerm).
1 participant
Summary
Changes
docs/fumadocs/content/docs/tui.mdx:Test plan
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.