Update the guide's content #41
Conversation
WalkthroughAdds MDX line highlighting via Shiki, introduces highlight-aware tutorial links and OpenAPI panel controls, tightens collection mutation error handling by rethrowing errors, replaces the optimistic-actions deep-dive with a query-driven-sync article, and updates tutorial content and styles for highlighting. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant User
participant Tutorial as TutorialLink / UI
participant Prefs as userPreferences
participant Router as useNavigate
participant ApiPanel as ApiRequestsPanel
Note over Tutorial,Prefs: User clicks OpenAPIRequestsPanelLink
User->>Tutorial: click OpenAPIRequestsPanelLink
Tutorial->>Prefs: set networkPanel = "open"
Tutorial->>Router: navigate(replace, highlight=networkPanel_panel)
Router->>ApiPanel: route/render with highlight param
ApiPanel->>ApiPanel: HighlightWrapper applies highlight (visual)
Note right of ApiPanel: Clear button and requests count remain functional
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (3)src/**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{tsx,ts}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (2)📚 Learning: 2025-12-24T15:25:07.106ZApplied to files:
📚 Learning: 2025-12-28T23:34:13.416ZApplied to files:
🧬 Code graph analysis (1)src/components/tutorial/TutorialWindow.tsx (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
🔇 Additional comments (1)
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 |
🚀 Preview DeploymentStatus: ✅ Ready! Preview URL: Open Preview Commit: Built and deployed successfully |
![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
🧹 Nitpick comments (3)
src/data/deep-dives/query-driven-sync.mdx (1)
54-54: Optional: Consider replacing "Right now" with "Currently" for a more formal tone.The phrase "Right now, we have only one query" could be rephrased as "Currently, we have only one query" for slightly more formal documentation style.
src/components/tutorial/index.tsx (1)
155-180: Consider adding error handling to the collection mutation.The
OpenAPIRequestsPanelLinkcomponent updatesuserPreferencesCollectionwithout error handling. Given that the PR objectives mention "tightens error handling in collection mutations through re-throwing," this mutation might also benefit from error handling to prevent potential unhandled promise rejections.🔎 Suggested enhancement with error handling
const openThePanel = useCallback(() => { if (typeof window !== "undefined") { - userPreferencesCollection.update(USER_PLACEHOLDER.id, (draft) => { - draft.networkPanel = "open"; - }); + userPreferencesCollection.update(USER_PLACEHOLDER.id, (draft) => { + draft.networkPanel = "open"; + }).catch((error) => { + console.error("Failed to open network panel:", error); + }); } }, []);src/data/tutorial/how-do-collections-work.mdx (1)
1-80: LGTM! Content refinements improve clarity.The text updates improve consistency and readability throughout the tutorial. The terminology has been standardized (e.g., "remote data source" instead of "remote source"), and the explanations are clearer.
Note: Static analysis flagged two minor style suggestions if you'd like to polish further:
- Line 14: Consider rewording "very simple" (commonly over-used intensifier)
- Line 50: In American English, "etc." requires a period (should be "etc.")
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (18)
.prettierignorepackage.jsonsrc/collections/projects.tssrc/collections/todoItems.tssrc/components/ApiPanelToggle.tsxsrc/components/ApiRequestsPanel.tsxsrc/components/tutorial/TutorialWindow.tsxsrc/components/tutorial/index.tsxsrc/data/deep-dives/query-driven-sync.mdxsrc/data/tutorial.tssrc/data/tutorial/collections-intro.mdxsrc/data/tutorial/how-do-collections-work.mdxsrc/data/tutorial/optimistic-actions.mdxsrc/data/tutorial/optimistic-updates.mdxsrc/data/tutorial/what-is-next.mdxsrc/styles.csssrc/utils/highlight-collection-related-info.tsxvite.config.ts
💤 Files with no reviewable changes (1)
- src/data/tutorial/optimistic-actions.mdx
🧰 Additional context used
📓 Path-based instructions (5)
src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Always ensure no formatting/linting issues exist in code - use
pnpm check --fixto automatically fix issues
Files:
src/components/ApiRequestsPanel.tsxsrc/collections/projects.tssrc/components/tutorial/TutorialWindow.tsxsrc/components/ApiPanelToggle.tsxsrc/data/tutorial.tssrc/utils/highlight-collection-related-info.tsxsrc/components/tutorial/index.tsxsrc/collections/todoItems.ts
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer functions over arrow functions for React components
Files:
src/components/ApiRequestsPanel.tsxsrc/collections/projects.tssrc/components/tutorial/TutorialWindow.tsxsrc/components/ApiPanelToggle.tsxsrc/data/tutorial.tsvite.config.tssrc/utils/highlight-collection-related-info.tsxsrc/components/tutorial/index.tsxsrc/collections/todoItems.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer
typeoverinterfacefor type definitions
Files:
src/components/ApiRequestsPanel.tsxsrc/collections/projects.tssrc/components/tutorial/TutorialWindow.tsxsrc/components/ApiPanelToggle.tsxsrc/data/tutorial.tsvite.config.tssrc/utils/highlight-collection-related-info.tsxsrc/components/tutorial/index.tsxsrc/collections/todoItems.ts
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
**/package.json: Always usepnpm installinstead ofnpm installfor installing dependencies
Always usepnpm add <package>instead ofnpm install <package>for adding packages
Always usepnpm add -D <package>instead ofnpm install --save-dev <package>for adding dev dependencies
Always usepnpm remove <package>instead ofnpm uninstall <package>for removing packages
Always usepnpm run <script>instead ofnpm run <script>for running scripts
Always usepnpm dlx <command>instead ofnpx <command>
Always usepnpm create <template>instead ofnpm create <template>
Files:
package.json
package.json
📄 CodeRabbit inference engine (AGENTS.md)
package.json: Usepnpm devfor starting the development server
Usepnpm buildfor production build
Usepnpm run testfor running tests
Usepnpm lintfor linting
Usepnpm typecheckfor type checking
Usepnpm formatfor code formatting
Usepnpm db.generateto generate database migrations
Usepnpm db.local.migrateto apply local migrations
Usepnpm db.prod.migrateto apply production migrations
Files:
package.json
🧠 Learnings (3)
📚 Learning: 2025-12-24T15:25:07.106Z
Learnt from: fulopkovacs
Repo: fulopkovacs/trytanstackdb.com PR: 22
File: src/components/TodoBoards.tsx:63-81
Timestamp: 2025-12-24T15:25:07.106Z
Learning: In Tailwind CSS v4, prefer canonical classes using bg-linear-to-* (e.g., bg-linear-to-b, bg-linear-to-t, bg-linear-to-r) over the older bg-gradient-to-* syntax. This aligns with Tailwind LSP's suggestCanonicalClasses rule. Apply across TSX files (e.g., src/components/*.tsx); replace occurrences of bg-gradient-to-* with the corresponding bg-linear-to-* equivalents and verify gradients visually.
Applied to files:
src/components/ApiRequestsPanel.tsxsrc/components/tutorial/TutorialWindow.tsxsrc/components/ApiPanelToggle.tsxsrc/utils/highlight-collection-related-info.tsxsrc/components/tutorial/index.tsx
📚 Learning: 2025-12-28T23:34:13.416Z
Learnt from: fulopkovacs
Repo: fulopkovacs/trytanstackdb.com PR: 32
File: src/components/HomeIntro.tsx:16-25
Timestamp: 2025-12-28T23:34:13.416Z
Learning: In Motion (motion/react), when configuring variant transitions, use delayChildren: stagger(x) to create per-child delays (e.g., delayChildren: stagger(0.2)). This is different from the older API that used a separate staggerChildren property. Apply this guidance to TSX files that declare motion variants (e.g., in src/components/**/*.tsx) and verify that stagger is imported from framer-motion. Ensure transitions reflect the intended stagger timing and that no conflicting delay values override the staggered effect.
Applied to files:
src/components/ApiRequestsPanel.tsxsrc/components/tutorial/TutorialWindow.tsxsrc/components/ApiPanelToggle.tsxsrc/utils/highlight-collection-related-info.tsxsrc/components/tutorial/index.tsx
📚 Learning: 2025-12-29T13:20:08.388Z
Learnt from: CR
Repo: fulopkovacs/trytanstackdb.com PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-29T13:20:08.388Z
Learning: Applies to src/route/__root.tsx : The root route is located at `src/route/__root.tsx` in this TanStack Start project
Applied to files:
src/data/tutorial/collections-intro.mdx
🧬 Code graph analysis (5)
src/components/ApiRequestsPanel.tsx (3)
src/utils/highlight-collection-related-info.tsx (1)
HighlightWrapper(6-45)src/components/ui/badge.tsx (1)
Badge(48-48)src/components/ui/button.tsx (1)
Button(63-63)
src/collections/projects.ts (1)
src/local-api/api.projects.ts (1)
updatedData(28-90)
src/components/tutorial/TutorialWindow.tsx (1)
src/components/tutorial/TutorialTableOfContents.tsx (1)
TutorialTableOfContents(30-75)
src/components/ApiPanelToggle.tsx (4)
src/utils/highlight-collection-related-info.tsx (1)
HighlightWrapper(6-45)src/components/ui/tooltip.tsx (6)
Tooltip(59-59)TooltipTrigger(59-59)TooltipContent(59-59)TooltipProvider(6-17)TooltipTrigger(29-33)Tooltip(19-27)src/collections/UserPreferences.ts (1)
userPreferencesCollection(12-19)src/utils/USER_PLACEHOLDER_CONSTANT.ts (1)
USER_PLACEHOLDER(7-12)
src/components/tutorial/index.tsx (2)
src/collections/UserPreferences.ts (1)
userPreferencesCollection(12-19)src/utils/USER_PLACEHOLDER_CONSTANT.ts (1)
USER_PLACEHOLDER(7-12)
🪛 LanguageTool
src/data/deep-dives/query-driven-sync.mdx
[style] ~54-~54: For conciseness, consider replacing this expression with an adverb.
Context: ...at are required for the queries we run. Right now, we have only one query for the `todoIt...
(AT_THE_MOMENT)
src/data/tutorial/how-do-collections-work.mdx
[style] ~14-~14: As an alternative to the over-used intensifier ‘very’, consider replacing this phrase.
Context: ...tion">ElectricSQL. Our todo app is very simple: there's only one user who can edit the...
(EN_WEAK_ADJECTIVE)
[style] ~50-~50: In American English, abbreviations like “etc.” require a period.
Context: ...ns (onUpdate, onInsert, onDelete, etc). The projectsCollection's queryFn...
(ETC_PERIOD)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Deploy Preview
🔇 Additional comments (20)
src/components/tutorial/TutorialWindow.tsx (1)
489-489: LGTM!The
navigatehook is correctly imported and used for URL cleanup when an article is loaded from search parameters.package.json (1)
43-43: LGTM!The dependency addition is correctly aligned with the existing
@shikijs/rehypeversion (both at ^3.20.0) and is properly utilized invite.config.tsfor MDX code highlighting functionality.vite.config.ts (2)
4-4: LGTM!The import statement is correctly structured and the dependency is properly declared in
package.json.
41-41: LGTM!The transformer is correctly added to the rehype plugin configuration, enabling meta-highlight support for MDX code blocks. The function invocation syntax is proper.
.prettierignore (1)
2-2: LGTM!The ignore pattern is consistent with the existing tutorial MDX pattern and appropriately excludes deep-dive documentation files from Prettier formatting.
src/collections/projects.ts (1)
37-38: LGTM! Improved error handling.Re-throwing the error after logging ensures the optimistic update is immediately rolled back on failure. This is a good practice for maintaining data consistency and aligns with the same pattern applied in
src/collections/todoItems.ts.src/collections/todoItems.ts (3)
68-68: LGTM!Minor grammatical improvement to the comment for better clarity.
83-94: LGTM! Improved error handling in onInsert.Re-throwing the error after displaying the toast and logging ensures the optimistic insert is properly rolled back on failure. This is consistent with the error handling pattern applied throughout the collections.
137-148: LGTM! Improved error handling in onUpdate.Two good improvements here:
- Renaming the catch parameter from
_toerroris more descriptive- Re-throwing the error ensures the optimistic update is properly rolled back on failure
This is consistent with the error handling pattern applied in both
onInsertand across other collections.src/data/deep-dives/query-driven-sync.mdx (1)
1-179: LGTM! Well-structured documentation with clear examples.This new deep-dive article is comprehensive and well-written. It clearly explains the transition from eager to on-demand sync mode, provides practical code examples, and helpfully warns about common pitfalls.
The code examples are technically sound and the progression from problem to solution is easy to follow.
src/utils/highlight-collection-related-info.tsx (1)
36-36: LGTM! Appropriate z-index for highlighting overlay.Adding
z-50ensures the highlighted wrapper appears above other content, which is correct for this highlighting functionality.src/components/ApiPanelToggle.tsx (1)
4-4: LGTM! Clean integration of highlight functionality.The HighlightWrapper integration is straightforward and maintains the existing component logic while adding tutorial highlighting capabilities.
Also applies to: 24-45
src/styles.css (1)
54-83: LGTM! Well-implemented Shiki line highlighting with proper theme support.The CSS implementation is clean and follows modern practices:
- Grid layout ensures proper line rendering
- Empty line handling prevents layout collapse
- Dark mode support is properly implemented
- Color opacity variations provide good visual distinction
- The use of
!importantis justified here to override inline Shiki stylessrc/data/tutorial.ts (1)
1-1: LGTM! Clean replacement of deep-dive article.The import and article entry have been correctly updated to reference the new "Query-driven sync" deep-dive, replacing the previous Optimistic Actions article.
Also applies to: 52-53
src/data/tutorial/what-is-next.mdx (1)
1-43: LGTM! Well-structured tutorial content.The MDX content updates are clear and well-organized. The new imports (
OpenAPIRequestsPanelLink,LinkToArticle) are used correctly throughout the file, and the restructured sections improve the tutorial flow.src/components/ApiRequestsPanel.tsx (1)
200-253: LGTM! Clean integration of HighlightWrapper.The HighlightWrapper integration is implemented correctly and aligns with the pattern shown in
src/utils/highlight-collection-related-info.tsx. The header restructuring improves the layout while preserving all existing functionality (request count display, clear action, and request list rendering).src/data/tutorial/collections-intro.mdx (1)
1-68: LGTM! Tutorial content improvements.The textual updates improve clarity and accuracy. The
OpenAPIRequestsPanelLinkcomponent is used correctly at Line 54, and the terminology has been properly standardized throughout (e.g.,projectsCollection).src/components/tutorial/index.tsx (1)
98-128: LGTM! Clean implementation of HighlightLink.The
HighlightLinkcomponent follows the established patterns in this file and correctly validates the highlight parameter usinghighlightParamSchema.src/data/tutorial/optimistic-updates.mdx (2)
38-38: LGTM! Excellent documentation improvements.The textual changes enhance clarity and professionalism:
- "remote database" instead of "remote db" (line 38)
- Proper capitalization in bullet points (lines 44-45, 47-48)
- Removed implementation detail "toast" from user-facing text (line 48)
- Clearer, more concise rule statement (line 51)
- Correct semicolon usage for compound sentence (line 54)
Also applies to: 44-45, 47-48, 51-51, 54-54
6-6: OpenAPIRequestsPanelLink component is properly exported and correctly used.The component is exported from
src/components/tutorial/index.tsxat line 155 and adds helpful navigation to guide users to the API Requests panel where they can observe the sync behavior.
Summary by CodeRabbit
New Features
Documentation
Bug Fixes
Chores
✏️ Tip: You can customize this high-level summary in your review settings.