refactor(auth): 🔗 replace LinkComponent with Link from @tanstack/react-router

Author: aXenDeveloper

packages/create-vitnode-app/copy-of-vitnode-app/root/src/routes/_main/index.tsx

@@ -1,14 +1,15 @@
 import type { LucideIcon } from "lucide-react";
 
-import { createFileRoute } from "@tanstack/react-router";
+import type { RegisteredRouter } from "@tanstack/react-router";
+
+import { createFileRoute, Link } from "@tanstack/react-router";
 import { LogoVitNode } from "@vitnode/core/components/logo-vitnode";
 import { buttonVariants } from "@vitnode/core/components/ui/button";
 import {
   VITNODE_DOCS_URL,
   VITNODE_WEBSITE_URL,
 } from "@vitnode/core/lib/docs-links";
 import { useSessionQuery } from "@vitnode/core/tanstack/auth";
-import { RouterLink } from "@vitnode/core/tanstack/layout";
 import { pageHead } from "@vitnode/core/tanstack/metadata";
 import { cn } from "cn";
 import {
@@ -95,28 +96,28 @@ function HomeRoute() {
 
         <div className="flex flex-col gap-3 sm:flex-row">
           {user ? null : (
-            <RouterLink
+            <Link
               className={cn(buttonVariants({ size: "lg" }), "px-5")}
-              href={REGISTER_HREF}
+              to={REGISTER_HREF}
             >
               <UserRoundPlus />
               Create an account
-            </RouterLink>
+            </Link>
           )}
 
-          <RouterLink
+          <Link
             className={cn(
               buttonVariants({
                 size: "lg",
                 variant: user ? "default" : "outline",
               }),
               "px-5",
             )}
-            href={ADMIN_HREF}
+            to={ADMIN_HREF}
           >
             <ShieldCheck />
             Open AdminCP
-          </RouterLink>
+          </Link>
         </div>
       </section>
 
@@ -188,8 +189,8 @@ function NextStepCard({
   }
 
   return (
-    <RouterLink className={className} href={href}>
+    <Link<RegisteredRouter, string, string> className={className} href={href}>
       {content}
-    </RouterLink>
+    </Link>
   );
 }

packages/vitnode/src/components/ui/header-content.tsx

@@ -1,3 +1,4 @@
+import { Link } from "@tanstack/react-router";
 import { cn } from "cn";
 import { ArrowLeftIcon } from "lucide-react";
 
@@ -18,34 +19,18 @@ export interface HeaderContentBack {
   label: React.ReactNode;
 }
 
-export interface HeaderContentBackLinkProps extends Omit<
-  React.ComponentProps<"a">,
-  "href"
-> {
-  href: string;
-}
-
-export type HeaderContentBackLinkComponent = (
-  props: HeaderContentBackLinkProps,
-) => React.ReactNode;
-
-type HeaderContentBackProps =
-  | { back: HeaderContentBack; BackLink: HeaderContentBackLinkComponent }
-  | { back?: never; BackLink?: never };
-
 interface HeaderContentBaseProps {
+  back?: HeaderContentBack;
   children?: React.ReactNode;
   className?: string;
   desc?: React.ReactNode;
   ref?: React.RefCallback<HTMLDivElement>;
 }
 
-export type HeaderContentProps = HeaderContentBackProps &
-  HeaderContentBaseProps &
+export type HeaderContentProps = HeaderContentBaseProps &
   (HeaderContentH1Props | HeaderContentH2Props);
 
 export const HeaderContent = ({
-  BackLink,
   back,
   children,
   className,
@@ -77,10 +62,10 @@ export const HeaderContent = ({
 
       {!!back || !!children ? (
         <div className="flex w-full flex-col flex-wrap items-center justify-center gap-2 sm:w-auto sm:flex-row [&>*]:w-full [&>*]:sm:w-auto">
-          {back && BackLink ? (
+          {back ? (
             <Button
               nativeButton={false}
-              render={<BackLink href={back.href} />}
+              render={<Link to={back.href} />}
               variant="outline"
             >
               <ArrowLeftIcon />

packages/vitnode/src/tanstack/admin/breadcrumb.tsx

@@ -1,14 +1,11 @@
 import { useMatches, useRouter } from "@tanstack/react-router";
 
-import type { AuthLinkComponent } from "@/views/auth/auth-link";
-
 import { BreadcrumbAdminContent } from "@/views/admin/layouts/breadcrumb/breadcrumb-admin-content";
 import { BreadcrumbTrailContent } from "@/views/breadcrumb/breadcrumb-trail-content";
 
 import type { RouteBreadcrumbGroup } from "../breadcrumb/model";
 
 import { breadcrumbGroup, breadcrumbTrail } from "../breadcrumb/model";
-import { RouterLink } from "../layout/router-link";
 import { useRouteNavigationPending } from "../pending/navigation-pending";
 import { BreadcrumbPendingSkeleton } from "../pending/shapes";
 import { useAdminNav } from "./nav";
@@ -28,22 +25,18 @@ export const useAdminBreadcrumb = (): React.ReactNode => {
 
 export const AdminBreadcrumb = ({
   labels,
-  LinkComponent = RouterLink,
   overrideLastLabel,
   segments,
 }: {
   /** Explicit labels by href, for a crumb the navigation cannot name. */
   labels?: Record<string, string>;
-  LinkComponent?: AuthLinkComponent;
   /** The last crumb's label, when the page knows it and the navigation cannot. */
   overrideLastLabel?: string;
   /** The path below `/admin`, e.g. `["core", "users"]`. */
   segments: string[];
 }) => (
   <BreadcrumbAdminContent
     labels={labels}
-    LinkComponent={LinkComponent}
-
     nav={useAdminNav()}
     overrideLastLabel={overrideLastLabel}
     segments={segments}

packages/vitnode/src/tanstack/admin/content/breadcrumb.tsx

@@ -1,22 +1,17 @@
 import { useTranslations } from "use-intl";
 
-import type { AuthLinkComponent } from "@/views/auth/auth-link";
-
 import type { ContentBreadcrumbModel } from "./breadcrumb-model";
 import type { ContentAdminRouteData } from "./route";
 
 import { RouteMessages } from "../../i18n/route-messages";
 import { AdminBreadcrumb } from "../breadcrumb";
 import { contentBreadcrumbModel } from "./breadcrumb-model";
 
-export interface ContentAdminBreadcrumbProps extends Partial<
+export type ContentAdminBreadcrumbProps = Partial<
   Pick<ContentAdminRouteData, "action" | "adminPath" | "labels" | "namespaces">
-> {
-  LinkComponent?: AuthLinkComponent;
-}
+>;
 
 export const ContentAdminBreadcrumbContent = ({
-  LinkComponent,
   namespaces,
   ...route
 }: ContentAdminBreadcrumbProps) => {
@@ -30,30 +25,26 @@ export const ContentAdminBreadcrumbContent = ({
     <RouteMessages namespaces={namespaces ?? []}>
       {model.kind === "list" ? (
         <AdminBreadcrumb
-          LinkComponent={LinkComponent}
           overrideLastLabel={model.title}
           segments={model.segments}
         />
       ) : (
-        <ContentFormCrumb LinkComponent={LinkComponent} model={model} />
+        <ContentFormCrumb model={model} />
       )}
     </RouteMessages>
   );
 };
 
 const ContentFormCrumb = ({
-  LinkComponent,
   model,
 }: {
-  LinkComponent?: AuthLinkComponent;
   model: Extract<ContentBreadcrumbModel, { kind: "form" }>;
 }) => {
   const t = useTranslations("core.content");
 
   return (
     <AdminBreadcrumb
       labels={{ [model.listHref]: model.title }}
-      LinkComponent={LinkComponent}
       overrideLastLabel={t(
         model.action === "create" ? "create.title" : "edit.title",
         { name: model.singular },

packages/vitnode/src/tanstack/admin/content/create-action.tsx

@@ -1,25 +1,21 @@
+import { Link } from "@tanstack/react-router";
 import { PlusIcon } from "lucide-react";
 import { useTranslations } from "use-intl";
 
 import type { RegisteredFrontendContentType } from "@/content/index";
-import type { AuthLinkComponent } from "@/views/auth/auth-link";
 
 import { Button } from "@/components/ui/button";
 import { CONTENT_PERMISSIONS, contentCreateHref } from "@/content/index";
 
-import { RouterLink } from "../../layout/router-link";
 import { useAdminPermission } from "../permissions";
 import { ContentFormDialogSlot } from "./slot-render";
 import { contentAdminSlots } from "./slots";
 
 export const ContentCreateAction = ({
   entry,
-  LinkComponent = RouterLink,
   singular,
 }: {
   entry: RegisteredFrontendContentType;
-  /** How a path becomes a navigation. See {@link RouterLink} for the default. */
-  LinkComponent?: AuthLinkComponent;
   singular: string;
 }) => {
   const { definition, pluginId } = entry;
@@ -39,7 +35,7 @@ export const ContentCreateAction = ({
     return (
       <Button
         nativeButton={false}
-        render={<LinkComponent href={contentCreateHref(definition)} />}
+        render={<Link to={contentCreateHref(definition)} />}
       >
         <PlusIcon />
         {label}

packages/vitnode/src/tanstack/admin/content/editorial/host.tsx

@@ -3,21 +3,16 @@ import { useRouter } from "@tanstack/react-router";
 import React from "react";
 
 import type { ContentFormNavigation } from "@/views/admin/views/content/form/navigation";
-import type { AuthLinkComponent } from "@/views/auth/auth-link";
 
 import { ContentEditorialTransportProvider } from "@/views/admin/views/content/actions/editorial-transport";
 import { ContentFormNavigationProvider } from "@/views/admin/views/content/form/navigation";
 
-import { RouterLink } from "../../../layout/router-link";
 import { contentEditorialTransport } from "./transport";
 
 export const ContentEditorialHost = ({
   children,
-  LinkComponent = RouterLink,
 }: {
   children: React.ReactNode;
-  /** How a path becomes a navigation. See {@link RouterLink} for the default. */
-  LinkComponent?: AuthLinkComponent;
 }) => {
   const queryClient = useQueryClient();
   const router = useRouter();
@@ -29,15 +24,14 @@ export const ContentEditorialHost = ({
 
   const navigation = React.useMemo<ContentFormNavigation>(
     () => ({
-      LinkComponent,
       navigate: href => {
         void router.navigate({ href });
       },
       refresh: () => {
         void router.invalidate();
       },
     }),
-    [LinkComponent, router],
+    [router],
   );
 
   return (

packages/vitnode/src/tanstack/admin/content/form/host.tsx

@@ -3,21 +3,16 @@ import { useRouter } from "@tanstack/react-router";
 import React from "react";
 
 import type { ContentFormNavigation } from "@/views/admin/views/content/form/navigation";
-import type { AuthLinkComponent } from "@/views/auth/auth-link";
 
 import { ContentFormNavigationProvider } from "@/views/admin/views/content/form/navigation";
 import { ContentFormTransportProvider } from "@/views/admin/views/content/form/transport";
 
-import { RouterLink } from "../../../layout/router-link";
 import { contentFormTransport } from "./transport";
 
 export const ContentFormHost = ({
   children,
-  LinkComponent = RouterLink,
 }: {
   children: React.ReactNode;
-  /** How a path becomes a navigation. See {@link RouterLink} for the default. */
-  LinkComponent?: AuthLinkComponent;
 }) => {
   const queryClient = useQueryClient();
   const router = useRouter();
@@ -29,15 +24,14 @@ export const ContentFormHost = ({
 
   const navigation = React.useMemo<ContentFormNavigation>(
     () => ({
-      LinkComponent,
       navigate: href => {
         void router.navigate({ href });
       },
       refresh: () => {
         void router.invalidate();
       },
     }),
-    [LinkComponent, router],
+    [router],
   );
 
   return (

packages/vitnode/src/tanstack/admin/content/form/screen.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
 import type { ContentFrontendRegistry } from "@/content/index";
-import type { AuthLinkComponent } from "@/views/auth/auth-link";
 
 import type { ContentAdminRouteData } from "../route";
 import type { ContentFormScreenData } from "./route";
@@ -17,14 +16,11 @@ const ContentFormPageBody = React.lazy(async () =>
 
 export interface ContentFormScreenProps
   extends ContentAdminRouteData, ContentFormScreenData {
-  /** How a path becomes a navigation. Defaults to the router's own link. */
-  LinkComponent?: AuthLinkComponent;
   /** This installation's content types, with their override components. */
   registry: ContentFrontendRegistry;
 }
 
 export const ContentFormScreen = ({
-  LinkComponent,
   registry,
   ...route
 }: ContentFormScreenProps) => {
@@ -33,7 +29,7 @@ export const ContentFormScreen = ({
   if (route.action === "list" || !entry) return null;
 
   return (
-    <ContentFormHost LinkComponent={LinkComponent}>
+    <ContentFormHost>
       {/*
        * The boundary the lazy body suspends against.
        *