feat(theme/Link): support awaited navigation - #3592
Conversation
Deploying rspress-v2 with
|
| Latest commit: |
1e41da1
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://11901d20.rspress-v2.pages.dev |
| Branch Preview URL: | https://feat-awaited-navigation.rspress-v2.pages.dev |
Rsdoctor Bundle Diff AnalysisFound 5 projects in monorepo, 4 projects with changes. 📊 Quick Summary
📋 Detailed Reports (Click to expand)📁 website_htmlPath:
📦 Download Diff Report: website_html Bundle Diff 📁 website_jsPath:
📦 Download Diff Report: website_js Bundle Diff 📁 auto_nav_sidebar_htmlPath:
📦 Download Diff Report: auto_nav_sidebar_html Bundle Diff 📁 auto_nav_sidebar_jsPath:
📦 Download Diff Report: auto_nav_sidebar_js Bundle Diff Generated by Rsdoctor GitHub Action |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 1e41da1d4e
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| } else { | ||
| preloadChunkThenNavigate(); | ||
| } | ||
| await preloadChunkThenNavigate(); |
There was a problem hiding this comment.
When route.useTransitions is enabled and Link receives useTransition().startTransition, awaiting preloadChunkThenNavigate() directly moves the potentially slow initPageData phase outside that transition. Consequently, the documented isPending state remains false until preloading finishes, so loading feedback disappears during most of a slow navigation; this reverses the async-transition handling intentionally added in commit 2587f69. Preserve the outer transition around the asynchronous preload while separately settling the promise returned by useLinkNavigate.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Pull request overview
This PR extends the core theme navigation utilities by adding an awaited navigation hook intended for integrations that need to know when an internal route transition has committed, while also enhancing existing link navigation to preserve query/hash for relative URLs and support cancellation.
Changes:
- Export a new
useAwaitedLinkNavigatehook from@rspress/core/themefor commit-aware, serialized navigation. - Update
useLinkNavigateto preservesearch/hashon relative URLs and accept an optionalAbortSignalfor cancellation. - Add a unit test for
getAwaitedTargetand publish the change via a changeset.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| packages/core/src/theme/index.ts | Re-exports the new awaited navigation hook alongside useLinkNavigate. |
| packages/core/src/theme/components/Link/useLinkNavigate.ts | Adds awaited/serialized navigation logic and AbortSignal support; fixes relative href handling to preserve query/hash. |
| packages/core/src/theme/components/Link/useLinkNavigate.test.ts | Adds tests for canonical awaited target resolution. |
| .changeset/calm-navigation-await.md | Declares a minor release for the new awaited navigation hook. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const navigateAndWait = useCallback( | ||
| async (href: string, target: string) => { | ||
| if (currentTargetRef.current === target) { | ||
| await navigate(href); | ||
| return; | ||
| } |
| return useCallback( | ||
| (target: string) => { | ||
| const queued = queueRef.current | ||
| .catch(() => undefined) | ||
| .then(() => { | ||
| if (!activeRef.current) { | ||
| throw new Error('Navigation was interrupted'); | ||
| } | ||
| return navigateAndWait( | ||
| target, | ||
| getAwaitedTarget(target, currentTargetRef.current), | ||
| ); | ||
| }); | ||
| queueRef.current = queued; | ||
| return queued; | ||
| }, | ||
| [navigateAndWait], | ||
| ); |
| /** | ||
| * Navigate through the Rspress router and resolve after the target location | ||
| * commits. Calls are serialized and failed or timed-out attempts do not | ||
| * block later calls. | ||
| */ | ||
| export function useAwaitedLinkNavigate( | ||
| committedTarget?: string, | ||
| ): (href: string) => Promise<void> { |
Summary
Add
useAwaitedLinkNavigatefor integrations that need to know when an internal route has committed. Navigation calls are serialized, preserve query and hash values, support cancellation, and recover after preload failures or timeouts.Context
Extracted from #3520 as an independently reviewable Core prerequisite. The other prerequisites split from that PR are #3590 and #3591.
Related Issue
N/A
Checklist