feat: Add pending component to router #634
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: e709a39 The changes in this PR will be included in the next version bump. This PR includes changesets to release 18 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
WalkthroughIntroduces a default pending component (Loader) to the React router template, updates auth plugin templates to use a GraphQL fragment for reset-password dialog, and adjusts the extractor to provide the fragment variable. Adds a changeset describing a patch for @baseplate-dev/react-generators. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Router
participant RouteLoader
participant UI
User->>Router: Navigate to route
Router->>UI: Render defaultPendingComponent (Loader)
Router->>RouteLoader: Load route data/component
RouteLoader-->>Router: Resolve/Reject
Router->>UI: Render route component or error/not-found
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
![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 (1)
.changeset/big-corners-act.md (1)
5-5: Polish the changeset phrasing (grammar).Consider adding “the” for clarity.
-Add a default pending component to router +Add a default pending component to the router
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
plugins/plugin-auth/src/local-auth/admin/generators/admin-crud-reset-password-action/generated/typed-templates.tsis excluded by!**/generated/**,!**/generated/**
📒 Files selected for processing (4)
.changeset/big-corners-act.md(1 hunks)packages/react-generators/src/generators/core/react-router/templates/src/app/router.tsx(2 hunks)plugins/plugin-auth/src/local-auth/admin/generators/admin-crud-reset-password-action/extractor.json(1 hunks)plugins/plugin-auth/src/local-auth/admin/generators/admin-crud-reset-password-action/templates/routes/-components/password-reset-dialog.gql(1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
**/*
📄 CodeRabbit Inference Engine (.cursor/rules/code-style.mdc)
Use kebab-case for file names
Files:
plugins/plugin-auth/src/local-auth/admin/generators/admin-crud-reset-password-action/templates/routes/-components/password-reset-dialog.gqlplugins/plugin-auth/src/local-auth/admin/generators/admin-crud-reset-password-action/extractor.jsonpackages/react-generators/src/generators/core/react-router/templates/src/app/router.tsx
.changeset/*.md
📄 CodeRabbit Inference Engine (CLAUDE.md)
When adding a new feature or changing an existing feature, add a new Changeset in the
.changeset/directory in the specified markdown format.
Files:
.changeset/big-corners-act.md
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
**/*.{ts,tsx}: Import UI components from the@baseplate-dev/ui-componentspackage as shown in the provided examples.
Use both standalone and React Hook Form controller variants for form components from@baseplate-dev/ui-componentsas appropriate.
If a particular interface or type is not exported, change the file so it is exported.
**/*.{ts,tsx}: TypeScript with strict type checking
Always include return types on top-level functions including React components (React.ReactElement)
Include absolute paths in import statements via tsconfig paths (@src/is the alias forsrc/)
If a particular interface or type is not exported, change the file so it is exported
Files:
packages/react-generators/src/generators/core/react-router/templates/src/app/router.tsx
**/*.tsx
📄 CodeRabbit Inference Engine (CLAUDE.md)
**/*.tsx: When using form components, integrate them with React Hook Form by passing thecontrolprop fromuseForm().
Use layout components such asSidebarLayout,Card, andBreadcrumbfrom@baseplate-dev/ui-componentsto structure pages as shown in the example.
Use interactive dialog components likeDialog,ConfirmDialog, anduseConfirmDialogfrom@baseplate-dev/ui-componentsfor modal interactions.
Files:
packages/react-generators/src/generators/core/react-router/templates/src/app/router.tsx
**/*.{js,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/code-style.mdc)
Node 16 module resolution - include file extensions in imports (
.js)
Files:
packages/react-generators/src/generators/core/react-router/templates/src/app/router.tsx
**/*.{ts,tsx,js}
📄 CodeRabbit Inference Engine (.cursor/rules/code-style.mdc)
**/*.{ts,tsx,js}: Sort imports by group: external libs first, then local imports
Use camelCase for variables/functions, PascalCase for types/classes
Order functions such that functions are placed below the variables/functions they use
We use the prefer using nullish coalescing operator (??) ESLint rule instead of a logical or (||), as it is a safer operator
Use console.info/warn/error instead of console.log
Files:
packages/react-generators/src/generators/core/react-router/templates/src/app/router.tsx
🪛 LanguageTool
.changeset/big-corners-act.md
[grammar] ~5-~5: There might be a mistake here.
Context: ...ch --- Add a default pending component to router
(QB_NEW_EN)
🔇 Additional comments (4)
.changeset/big-corners-act.md (1)
5-5: Confirm changeset coverage for all affected packages.This PR also touches plugin-auth templates. If that package is published independently, it likely needs its own patch changeset to reflect the fragment-related template change. If plugin-auth is not versioned/published, ignore.
Would you like me to add a companion changeset for the plugin-auth package?
plugins/plugin-auth/src/local-auth/admin/generators/admin-crud-reset-password-action/templates/routes/-components/password-reset-dialog.gql (1)
4-4: Ensure the Row fragment is included and contains required fieldsThe template at
plugins/plugin-auth/src/local-auth/admin/generators/admin-crud-reset-password-action/templates/routes/-components/password-reset-dialog.gql
only spreads...TPL_USER_ROW_FRAGMENT(which your generator resolves to${userModelName}Row) but does not define or import that fragment. Without a matching fragment definition in the same document (or via your GraphQL tooling’s import mechanism), this will error at runtime.Please verify and update accordingly:
- Confirm that
TPL_USER_ROW_FRAGMENTalways resolves to a real fragment name (e.g.UserRow).- In the final generated
.gql, ensure you have either:
- An
# importor equivalent at the top pulling in the${userModelName}Rowfragment file, or- The actual
fragment ${userModelName}Row on User { … }block appended.- Make sure the fragment includes at least
id,name, andYou may want to apply the same check in
…/admin-crud-manage-roles-action/templates/routes/-components/role-manager-dialog.gqlplugins/plugin-auth/src/local-auth/admin/generators/admin-crud-reset-password-action/extractor.json (1)
28-28: Good: extractor now supplies the fragment variable.Declaring
"variables": { "TPL_USER_ROW_FRAGMENT": {} }aligns the template with the new fragment spread.Confirm that the template engine expands this variable both in the spread and (if needed) injects or references the fragment definition so the final GraphQL document is valid.
packages/react-generators/src/generators/core/react-router/templates/src/app/router.tsx (1)
34-34: VerifydefaultPendingComponentsupport in your TanStack Router versionSetting
defaultPendingComponent: Loaderhere is a great DX improvement—it ensures a consistent pending UI during route transitions. Please confirm that your installed version of@tanstack/router(or@tanstack/react-router) supports thedefaultPendingComponentoption increateRouter. You can:
- Check the dependency version in your project’s package.json.
- Inspect the
CreateRouterOptionstype innode_modules/@tanstack/router/dist/index.d.ts.- Refer to the official TanStack Router changelog or docs for the introduction of
defaultPendingComponent.Once you’ve verified compatibility, we can approve these changes.
| import { | ||
| Button, | ||
| ErrorDisplay, | ||
| Loader, | ||
| NotFoundCard, | ||
| } from '%reactComponentsImports'; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Importing Loader is correct; verify it’s exposed by the import provider.
Looks good. Ensure %reactComponentsImports maps/exports Loader; otherwise the generated import will fail at build-time.
🏁 Script executed:
#!/bin/bash
# Locate the generated imports provider(s) and verify Loader is present
fd -a 'ts-import-providers.ts' | while read -r f; do
echo "== $f =="
rg -n -C2 '\bLoader\b' "$f" || true
doneLength of output: 434
Loader isn’t exposed by %reactComponentsImports
The extractor at packages/core-generators/src/renderers/typescript/extractor/render-ts-import-providers.ts never registers Loader, so the generated template will fail to import it. Please update the %reactComponentsImports mapping to include Loader, for example:
"%reactComponentsImports": [
"import { Button } from '@your-ui-lib';",
"import { ErrorDisplay } from '@your-ui-lib';",
+ "import { Loader } from '@your-ui-lib';",
"import { NotFoundCard } from '@your-ui-lib';",
],This will ensure the Loader import in packages/react-generators/src/generators/core/react-router/templates/src/app/router.tsx resolves correctly.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { | |
| Button, | |
| ErrorDisplay, | |
| Loader, | |
| NotFoundCard, | |
| } from '%reactComponentsImports'; | |
| "%reactComponentsImports": [ | |
| "import { Button } from '@your-ui-lib';", | |
| "import { ErrorDisplay } from '@your-ui-lib';", | |
| "import { Loader } from '@your-ui-lib';", | |
| "import { NotFoundCard } from '@your-ui-lib';", | |
| ], |
🤖 Prompt for AI Agents
In
packages/react-generators/src/generators/core/react-router/templates/src/app/router.tsx
around lines 6–11, the template imports Loader from the placeholder
%reactComponentsImports but the extractor at
packages/core-generators/src/renderers/typescript/extractor/render-ts-import-providers.ts
never registers Loader; update that mapping to include Loader (add it to the
%reactComponentsImports provider registration/export list so the placeholder
expands to an import for Loader), then regenerate or re-run the generator to
ensure the template import resolves correctly.
Summary by CodeRabbit