feat(db-browser): add SQLite database browser example#692
feat(db-browser): add SQLite database browser example#692RosheshChaware wants to merge 3 commits into
Conversation
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughAdds a new TermUI example: a fullscreen SQLite database browser (DbBrowserApp) with schema tree, table viewer, keyboard navigation, startup/bootstrap entrypoint, configuration files, and a Vitest suite exercising navigation and exit behavior. ChangesDatabase Browser Example App
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
🎉 Thanks for your first PR to TermUI, @RosheshChaware.
Before your PR merges:
- ⭐ Star the repo. Required. The
star-checkjob blocks your merge otherwise. - ✅ All checks green:
build,test,typecheck. - 🏷 PR title follows
type: short description. Example:fix: handle empty list. - 🔗 Link your closing issue in the description.
GSSoC 2026 points come from labels after merge:
gssoc:approved. +50 base points.level:beginner/intermediate/advanced/critical. +20 / +35 / +55 / +80.quality:clean/exceptional. x 1.2 / x 1.5.type:*. Stackable bonus.
Your reviewer responds within 48 hours. Ping @Karanjot786 on Discord for urgent help.
🚀 Welcome to the cohort.
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
examples/db-browser/src/index.tsx (1)
9-11: ⚡ Quick winMake table loading deterministic with explicit ordering.
The initial selected table depends on query order; without
ORDER BY, startup behavior can vary across schema evolution and make tests brittle.Suggested fix
- const tables = db.query<{ name: string }, []>( - "SELECT name FROM sqlite_master WHERE type='table' AND name NOT LIKE 'sqlite_%'" - ).all(); + const tables = db.query<{ name: string }, []>( + "SELECT name FROM sqlite_master WHERE type='table' AND name NOT LIKE 'sqlite_%' ORDER BY name" + ).all();🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@examples/db-browser/src/index.tsx` around lines 9 - 11, The table list query is non-deterministic because it lacks ordering; update the SQL used in the tables constant (the db.query(...) call that builds tables) to include an explicit ORDER BY (e.g., ORDER BY name ASC) so the initial selected table is stable across runs and schema changes; modify the query string inside the tables assignment (the db.query call) to add the ORDER BY clause.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@examples/db-browser/src/index.tsx`:
- Around line 151-154: The code uses unsafe casts like (firstTableNode.data as {
type: string }) and (selected.data as { type: string; name?: string; table?:
string }); replace these with a proper discriminated union for node data (e.g.,
type NodeData = TableNodeData | OtherNodeData with a literal "type" field) and
add a type guard function (e.g., isTableNode(data): data is TableNodeData) that
checks data.type === 'table' before accessing .name/.table, then use
isTableNode(firstTableNode.data) and isTableNode(selected.data) to narrow types;
alternatively, if you intentionally know the shape at those call sites, add a
short inline comment justifying the cast (e.g., // safe: node.type === 'table'
ensured upstream) and keep the existing assertions.
- Around line 15-16: The SQL uses direct interpolation of table names (e.g.,
`PRAGMA table_info("${table.name}")` and `SELECT * FROM "${tableName}"`) which
fails for embedded double-quotes and is an injection risk; create a small helper
(e.g., quoteSqlIdentifier(name: string)) that escapes double quotes by replacing
" with "" and wraps the result in double quotes, then replace all places where
table.name or tableName are interpolated (the occurrences around the `PRAGMA
table_info(...)` call and the `SELECT * FROM ...` usages) to call this helper so
identifiers are safely quoted and reused everywhere.
In `@examples/db-browser/vitest.config.ts`:
- Line 3: The config currently uses a default export; change it to a named
export to follow TS rules: replace the `export default defineConfig(...)` with a
named export (for example `export const vitestConfig = defineConfig(...)`) and
update any consumers that import the config (change default imports to named
imports of `vitestConfig` or whatever name you choose). Ensure the symbol
`defineConfig` remains used and the new exported identifier is consistent across
imports.
---
Nitpick comments:
In `@examples/db-browser/src/index.tsx`:
- Around line 9-11: The table list query is non-deterministic because it lacks
ordering; update the SQL used in the tables constant (the db.query(...) call
that builds tables) to include an explicit ORDER BY (e.g., ORDER BY name ASC) so
the initial selected table is stable across runs and schema changes; modify the
query string inside the tables assignment (the db.query call) to add the ORDER
BY clause.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 5dbe0581-f269-4c14-91f6-53c437ca24b2
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (5)
examples/db-browser/package.jsonexamples/db-browser/src/index.test.tsxexamples/db-browser/src/index.tsxexamples/db-browser/tsconfig.jsonexamples/db-browser/vitest.config.ts
| @@ -0,0 +1,13 @@ | |||
| import { defineConfig } from 'vitest/config'; | |||
|
|
|||
| export default defineConfig({ | |||
There was a problem hiding this comment.
Replace default export with named export in config file.
Line 3 uses export default, which violates the repository TypeScript export rule. Use a named export instead (e.g., export const vitestConfig = defineConfig(...)), and update the consumer if needed.
As per coding guidelines: "**/*.{ts,tsx}: Use named exports only. Never export default."
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@examples/db-browser/vitest.config.ts` at line 3, The config currently uses a
default export; change it to a named export to follow TS rules: replace the
`export default defineConfig(...)` with a named export (for example `export
const vitestConfig = defineConfig(...)`) and update any consumers that import
the config (change default imports to named imports of `vitestConfig` or
whatever name you choose). Ensure the symbol `defineConfig` remains used and the
new exported identifier is consistent across imports.
Review: Unsafe type casts in db-browser exampleIn Replace them with a type guard: type TableNodeData = { type: 'table'; name: string };
type ColumnNodeData = { type: 'column'; name: string; table: string };
type NodeData = TableNodeData | ColumnNodeData;
function isTableNode(data: unknown): data is TableNodeData {
return typeof data === 'object' && data !== null && (data as any).type === 'table';
}Then use |
Description
Added a new SQLite Database Browser example under
examples/db-browser.The example seeds an in-memory SQLite database using
bun:sqlite, displays tables and columns in a Tree view, and shows table rows in a Table wrapped inside a ScrollView. Selecting a table updates the row view and row count dynamically.Related Issue
Closes #ISSUE_NUMBER
Which package(s)?
Type of Change
type:feature)Checklist
bun vitest runbun run buildbun run typecheckCONTRIBUTING.md.type: short description.anytypes without an inline comment explaining why.GSSoC 2026 Participation
https://gssoc.girlscript.org/profile/YOUR_PROFILE_IDScreenshots / Recordings (UI changes)
Attached screenshot showing:
Notes for the Reviewer
examples/db-browser.bun:sqlitewith an in-memory seeded database.q/Ctrl+C.packages/.Summary by CodeRabbit
New Features
Tests
Chores