Skip to content

Type-safe href #12994

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 6 commits into from
Feb 12, 2025
Merged

Type-safe href #12994

merged 6 commits into from
Feb 12, 2025

Conversation

pcattori
Copy link
Contributor

@pcattori pcattori commented Feb 10, 2025 •
edited
Loading 

import { href } from "react-router"

href("/a")
href("/b/:b", { b: "wow" })
href("/c/:c?") // all params are optional, so you can omit the 2nd arg entirely if you want
href("/c/:c?", { c: "wow" })

You should get:

  • Autocomplete for all possible paths (1st arg)
  • Type checking error if params (2nd arg) are provided for paths without args (e.g. /a)
  • Type checking error if wrong params are provided for a path (e.g. ("/b/:b", { notb: "wrong" }))
  • Autocomplete for params after path has been provided
  • Ability to omit params when all params in path are optional

Experimental releases

  • 0.0.0-experimental-208f173a8
  • 0.0.0-experimental-263c97949
  • 0.0.0-experimental-8e9d8ef63

TODO

  • changesets (feat:href + fix:params)
  • tests
  • normalize full URL path

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Feb 10, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: 0487323

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

This PR includes changesets to release 11 packages
Name Type
@react-router/dev Patch
react-router Patch
@react-router/fs-routes Patch
@react-router/remix-routes-option-adapter Patch
@react-router/architect Patch
@react-router/cloudflare Patch
react-router-dom Patch
@react-router/express Patch
@react-router/node Patch
@react-router/serve Patch
create-react-router 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

@pcattori pcattori changed the base branch from main to dev February 10, 2025 20:57
@pcattori pcattori force-pushed the pedro/type-safe-href branch from 8ed1541 to 004e483 Compare February 10, 2025 20:58
@pcattori pcattori force-pushed the pedro/type-safe-href branch from 208f173 to 9849f77 Compare February 11, 2025 03:26
@pcattori pcattori force-pushed the pedro/type-safe-href branch from b268db6 to fe2ff5d Compare February 11, 2025 20:58
@pcattori pcattori marked this pull request as ready for review February 11, 2025 21:40
@pcattori pcattori force-pushed the pedro/type-safe-href branch from c69ff0e to 263c979 Compare February 11, 2025 21:58
@pcattori
Copy link
Contributor Author

pcattori commented Feb 12, 2025 •
edited
Loading

Looks like Node v22.14 was just released so CI is using that, but it broke some of our unit tests. Seems unrelated to any changes in this PR.

UPDATE: should be fixed with the latest commit in this PR

hilja
hilja reviewed Feb 12, 2025
View reviewed changes
packages/react-router/lib/href.ts
return path
.split("/")
.map((segment) => {
const match = segment.match(/^:([\w-]+)(\?)?/);
Copy link

Choose a reason for hiding this comment

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

Nit, but this regex could be cached outside the loop.

@pcattori
fix react-router --version
0487323 
The `--version` flag reads the local `package.json`
at `../package.json`. While this path is correct when running from
source, it is incorrect after the CLI is built since `package.json`
stays at the root of the package, but the built code gets nested into
`dist/`.

I only noticed this discrepancy because I was converting the unit tests
to integration tests to fix an incompatibility issue with Node v22.14 and
`esbuild-register`.
@pcattori pcattori merged commit 4d88d8a into dev Feb 12, 2025
8 checks passed
@pcattori pcattori deleted the pedro/type-safe-href branch February 12, 2025 18:20
pcattori added a commit that referenced this pull request Feb 12, 2025
@pcattori
Type-safe href (#12994)
3b3fbda 
* wip: type-safe href

* consistent params parsing + type generation

* href tests

* href typegen tests

* href types normalize route full path

* fix `react-router --version`

The `--version` flag reads the local `package.json`
at `../package.json`. While this path is correct when running from
source, it is incorrect after the CLI is built since `package.json`
stays at the root of the package, but the built code gets nested into
`dist/`.

I only noticed this discrepancy because I was converting the unit tests
to integration tests to fix an incompatibility issue with Node v22.14 and
`esbuild-register`.
@pcattori pcattori mentioned this pull request Feb 12, 2025
Closed
@pcattori pcattori linked an issue Feb 12, 2025 that may be closed by this pull request
Type-safe href #12697
Closed
@pcattori pcattori mentioned this pull request Feb 12, 2025
Closed
11 tasks
pcattori added a commit that referenced this pull request Feb 12, 2025
@pcattori
Type-safe href (#12994) (#13012)
1b7b6b8 
* Type-safe href (#12994)

* wip: type-safe href

* consistent params parsing + type generation

* href tests

* href typegen tests

* href types normalize route full path

* fix `react-router --version`

The `--version` flag reads the local `package.json`
at `../package.json`. While this path is correct when running from
source, it is incorrect after the CLI is built since `package.json`
stays at the root of the package, but the built code gets nested into
`dist/`.

I only noticed this discrepancy because I was converting the unit tests
to integration tests to fix an incompatibility issue with Node v22.14 and
`esbuild-register`.

* bump patch to minor for new API: `href`
wilcoxmd added a commit to wilcoxmd/react-router that referenced this pull request Feb 13, 2025
@wilcoxmd
Merge remote-tracking branch 'upstream/dev' into mwilcox/skip-importe…
7f1f4b9 
…d-route-typegen

* upstream/dev:
  bump patch to minor for new API: `href`
  Type-safe href (remix-run#12994)
  docs: prerender/ssr:false (remix-run#13005)
  Skip action-only resource routes with prerender:true (remix-run#13004)
  Update docs for spa/prerendering
  Improvements to ssr:false + prerender scenarios (remix-run#12948)
@github-actions GitHub Actions
Copy link
Contributor

🤖 Hello there,

We just published version 7.2.0-pre.2 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

@github-actions GitHub Actions
Copy link
Contributor

🤖 Hello there,

We just published version 7.2.0-pre.5 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

@ngbrown
Copy link
Contributor

ngbrown commented Feb 20, 2025

@pcattori and @brophdawg11: Wasn't href released in v7.2.0 through #13012? This changeset is still showing as a minor version bump in the dev branch:

https://github.com/remix-run/react-router/blob/dev/.changeset/three-eyes-flow.md

@brophdawg11
Copy link
Contributor

Yeah I noticed that this AM too - I think it's because a few of these changes in 7.2.0 landed in dev and then got cherry-picked to release-next so merging release-next down to dev after the 7.2.0 release didn't delete them like it normally would. I'll remove them manually now - thanks for the heads up!

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Mar 6, 2025

🤖 Hello there,

We just published version 7.3.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@hilja hilja hilja left review comments

Assignees
No one assigned
Labels
CLA Signed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Type-safe href
4 participants
@pcattori @ngbrown @brophdawg11 @hilja