Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(system): allow Promise<void> for provider navigate prop #4112

Closed
wants to merge 3 commits into from

Conversation

CanRau
Copy link
Contributor

@CanRau CanRau commented Nov 18, 2024

Redid #4098 to get rid of all those unrelated changes

📝 Description

At least TanStack Router's router.navigate returns Promise<void> so if this PR won't break anything would be nice to support both return types ❤️

⛳️ Current behavior (updates)

Type '(to: any, options: any) => Promise<void>' is not assignable to type '(path: string) => void'.

The to: any, options: any is another topic I think

🚀 New behavior

No type errors

💣 Is this a breaking change (Yes/No):

Shouldn't break anything I think 🤔

Summary by CodeRabbit

Summary by CodeRabbit

  • New Features
    • Enhanced the navigate function to support asynchronous operations by allowing it to return a promise.

This change improves flexibility in navigation handling within the application.

@CanRau CanRau requested a review from jrgarciadev as a code owner November 18, 2024 23:22
Copy link

vercel bot commented Nov 18, 2024

@CanRau is attempting to deploy a commit to the NextUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

Copy link

changeset-bot bot commented Nov 18, 2024

🦋 Changeset detected

Latest commit: d6f9998

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 20 packages
Name Type
@nextui-org/system Patch
@nextui-org/accordion Patch
@nextui-org/autocomplete Patch
@nextui-org/calendar Patch
@nextui-org/date-picker Patch
@nextui-org/drawer Patch
@nextui-org/dropdown Patch
@nextui-org/listbox Patch
@nextui-org/menu Patch
@nextui-org/modal Patch
@nextui-org/navbar Patch
@nextui-org/popover Patch
@nextui-org/select Patch
@nextui-org/slider Patch
@nextui-org/snippet Patch
@nextui-org/tabs Patch
@nextui-org/tooltip Patch
@nextui-org/react Patch
@nextui-org/aria-utils Patch
@nextui-org/framer-utils Patch

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

Copy link
Contributor

coderabbitai bot commented Nov 18, 2024

Walkthrough

The changes in this pull request modify the NextUIProviderProps interface in the packages/core/system/src/provider.tsx file. The navigate property is updated to support a return type of either void or Promise<void>, allowing for asynchronous handling in navigation scenarios. No other significant changes to logic or control flow are introduced, and the overall structure of the NextUIProvider component remains unchanged.

Changes

File Path Change Summary
packages/core/system/src/provider.tsx Updated navigate property type in NextUIProviderProps from (path: string) => void to `(path: string) => void

Possibly related PRs

  • fix(system): missing useHref logic #2943: The changes in this PR also modify the navigate property in the NextUIProviderProps interface, allowing it to accept a Promise<void>, which is directly related to the changes made in the main PR regarding the navigate property type.

Suggested reviewers

  • tianenpang
  • winchesHe

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (1)
packages/core/system/src/provider.tsx (1)

34-34: LGTM! Type change correctly implements Promise support

The updated type signature (path: string) => void | Promise<void> is a well-implemented solution that:

  • Maintains backward compatibility with existing synchronous navigate functions
  • Adds support for async navigation handlers like TanStack Router
  • Implements a non-breaking change through type expansion

This change follows TypeScript best practices by using a union type to support both synchronous and asynchronous patterns, making the component more flexible for different routing solutions.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between c6326d1 and b25279d.

📒 Files selected for processing (1)
  • packages/core/system/src/provider.tsx (1 hunks)

Copy link
Member

@wingkwong wingkwong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please add a changeset

@CanRau
Copy link
Contributor Author

CanRau commented Nov 19, 2024

like so?

Copy link
Member

@wingkwong wingkwong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not pre.json. Please see here. It should just patch on @nextui-org/system

@wingkwong wingkwong changed the title fix: types(core): allow Promise<void> for provider navigate prop fix(system): allow Promise<void> for provider navigate prop Nov 19, 2024
@CanRau
Copy link
Contributor Author

CanRau commented Nov 20, 2024

I see, like this? 😇

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (1)
.changeset/green-donuts-reply.md (1)

4-5: Consider enhancing the changeset description.

While the current description is clear, it would be helpful to mention that this change specifically improves compatibility with TanStack Router's router.navigate method. This context helps other developers understand the motivation behind the change.

Consider updating the description to:

-allow Promise<void> for provider navigate prop
+allow Promise<void> for provider navigate prop to support TanStack Router's router.navigate
📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between b25279d and d6f9998.

📒 Files selected for processing (1)
  • .changeset/green-donuts-reply.md (1 hunks)
🔇 Additional comments (1)
.changeset/green-donuts-reply.md (1)

1-3: LGTM! Patch version is appropriate.

The patch version bump is correct as this change only enhances type definitions without breaking existing functionality.

@wingkwong wingkwong self-assigned this Nov 20, 2024
@wingkwong wingkwong changed the base branch from canary to beta/release-next November 21, 2024 15:28
Copy link
Member

@wingkwong wingkwong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

from react-aria, navigate still returns void. However, the path should be updated to (path: Href, routerOptions: RouterOptions | undefined) tho.

@CanRau
Copy link
Contributor Author

CanRau commented Nov 22, 2024

That's why it's returning void | Promise<void> so it should support both right?

You mean like so?

navigate(path: Href, routerOptions: RouterOptions | undefined) => void | Promise<void>?

@wingkwong
Copy link
Member

wingkwong commented Nov 23, 2024

Actually this navigate will be passing to react-aria's router. Their navigate return type is void. ' and See https://react-spectrum.adobe.com/react-spectrum/routing.html#tanstack-router for the usage.

interface RouterProviderProps {
    navigate: (path: Href, routerOptions: RouterOptions | undefined) => void;
    useHref?: (href: Href) => string;
    children: ReactNode;
}

And the parameters got changed so I agree we should update that part only.

@wingkwong
Copy link
Member

Closing this PR.

  • After revisiting this PR again, the root cause actually is not the return type but the parameters. There is no need to change the return type here since such assignment is allowed. If you are interested, you can see this playground.
  • For the parameter, I've made a PR in fix(system): align navigate function parameters #4163. This should solve the reported typing issue.

@wingkwong wingkwong closed this Nov 28, 2024
@CanRau
Copy link
Contributor Author

CanRau commented Nov 28, 2024

I see, thank you and sorry for the delay was more packed than anticipated 😵‍💫
Glad you figured it out 🙌

@CanRau CanRau deleted the patch-3 branch November 28, 2024 15:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants