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.

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

fix: allow activeProps to infer component props #2347

Merged
merged 15 commits into from
Sep 24, 2024
Merged

fix: allow activeProps to infer component props #2347

Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
29e2264
fix: allow activeProps to infer component props
chorobin Sep 15, 2024
f151252
test
schiller-manuel Sep 18, 2024
ba93641
fix: make active props partial
chorobin Sep 18, 2024
276e40b
default props shall not override active/inactive props
schiller-manuel Sep 18, 2024
c1cbbd1
fix test
schiller-manuel Sep 18, 2024
f9e9754
docs: add createLink docs
chorobin Sep 22, 2024
4bf04de
fix: make `search` optional when `to` or `from` not specified
chorobin Sep 22, 2024
261309a
Merge branch 'create-link-types' of https://github.com/TanStack/route…
chorobin Sep 22, 2024
81cd6f8
chore: add type tests fro `createLink`
chorobin Sep 22, 2024
5ea9c57
docs: update docs
chorobin Sep 22, 2024
a85c3ff
Merge remote-tracking branch 'origin/main' into create-link-types
chorobin Sep 22, 2024
626d2b8
docs: update typo
chorobin Sep 22, 2024
1ff5029
docs: add imports
chorobin Sep 22, 2024
ec1aa11
feat: add CreateLinkProps
chorobin Sep 23, 2024
bace58c
chore: fix build
chorobin Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 36 additions & 31 deletions packages/react-router/src/link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -846,50 +846,67 @@ export function useLinkProps<
}
}

type UseLinkReactProps<TComp> = TComp extends keyof JSX.IntrinsicElements
? JSX.IntrinsicElements[TComp]
: React.PropsWithoutRef<
TComp extends React.ComponentType<infer TProps> ? TProps : never
> &
React.RefAttributes<
TComp extends
| React.FC<{ ref: infer TRef }>
| React.Component<{ ref: infer TRef }>
? TRef
: never
>

export type UseLinkPropsOptions<
TRouter extends AnyRouter = RegisteredRouter,
TFrom extends RoutePaths<TRouter['routeTree']> | string = string,
TTo extends string | undefined = '.',
TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,
TMaskTo extends string = '.',
> = ActiveLinkOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &
React.AnchorHTMLAttributes<HTMLAnchorElement>
> = ActiveLinkOptions<'a', TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &
Copy link
Contributor

Choose a reason for hiding this comment

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

about the 'a': please see this comment #2092 (comment)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This works with 'a' properly now ;)

Copy link
Contributor

Choose a reason for hiding this comment

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

cool!
@mirague check this out

UseLinkReactProps<'a'>

export type ActiveLinkOptions<
TComp = 'a',
TRouter extends AnyRouter = RegisteredRouter,
TFrom extends string = string,
TTo extends string | undefined = '.',
TMaskFrom extends string = TFrom,
TMaskTo extends string = '.',
> = LinkOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & ActiveLinkOptionProps
> = LinkOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &
ActiveLinkOptionProps<TComp>

type ActiveLinkAnchorProps = Omit<
React.AnchorHTMLAttributes<HTMLAnchorElement> & {
[key: `data-${string}`]: unknown
},
'children'
>
type ActiveLinkAnchorProps<TComp> = LinkComponentReactProps<TComp> & {
[key: `data-${string}`]: unknown
}

export interface ActiveLinkOptionProps {
export interface ActiveLinkOptionProps<TComp = 'a'> {
/**
* A function that returns additional props for the `active` state of this link.
* These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)
*/
activeProps?: ActiveLinkAnchorProps | (() => ActiveLinkAnchorProps)
activeProps?:
| ActiveLinkAnchorProps<TComp>
| (() => ActiveLinkAnchorProps<TComp>)
/**
* A function that returns additional props for the `inactive` state of this link.
* These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)
*/
inactiveProps?: ActiveLinkAnchorProps | (() => ActiveLinkAnchorProps)
inactiveProps?:
| ActiveLinkAnchorProps<TComp>
| (() => ActiveLinkAnchorProps<TComp>)
}

export type LinkProps<
TComp = 'a',
TRouter extends AnyRouter = RegisteredRouter,
TFrom extends string = string,
TTo extends string | undefined = '.',
TMaskFrom extends string = TFrom,
TMaskTo extends string = '.',
> = ActiveLinkOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &
> = ActiveLinkOptions<TComp, TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &
LinkPropsChildren

export interface LinkPropsChildren {
Expand All @@ -902,32 +919,20 @@ export interface LinkPropsChildren {
}) => React.ReactNode)
}

type LinkComponentReactProps<TComp> = React.PropsWithoutRef<
TComp extends React.FC<infer TProps> | React.Component<infer TProps>
? TProps
: TComp extends keyof React.JSX.IntrinsicElements
? Omit<React.HTMLProps<TComp>, 'children' | 'preload'>
: never
> &
React.RefAttributes<
TComp extends
| React.FC<{ ref: infer TRef }>
| React.Component<{ ref: infer TRef }>
? TRef
: TComp extends keyof React.JSX.IntrinsicElements
? React.ComponentRef<TComp>
: never
>
type LinkComponentReactProps<TComp> = Omit<
UseLinkReactProps<TComp>,
'children' | 'preload'
>

export type LinkComponentProps<
TComp,
TComp = 'a',
TRouter extends AnyRouter = RegisteredRouter,
TFrom extends string = string,
TTo extends string | undefined = '.',
TMaskFrom extends string = TFrom,
TMaskTo extends string = '.',
> = LinkComponentReactProps<TComp> &
LinkProps<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>
LinkProps<TComp, TRouter, TFrom, TTo, TMaskFrom, TMaskTo>

export type LinkComponent<TComp> = <
TRouter extends RegisteredRouter = RegisteredRouter,
Expand Down