chore(refactor): Router: Splitting things up into smaller files (#9988)

__fixtures__/test-project/web/src/layouts/BlogLayout/BlogLayout.tsx

@@ -2,7 +2,7 @@ type BlogLayoutProps = {
   children?: React.ReactNode
 }
 
-import { Link, routes } from '@redwoodjs/router'
+import { Link, NavLink, routes } from '@redwoodjs/router'
 
 import { useAuth } from 'src/auth'
 
@@ -23,48 +23,53 @@ const BlogLayout = ({ children }: BlogLayoutProps) => {
         <nav>
           <ul className="relative flex items-center font-light">
             <li>
-              <Link
+              <NavLink
                 className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
+                activeClassName="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded underline underline-offset-4"
                 to={routes.about()}
               >
                 About
-              </Link>
+              </NavLink>
             </li>
             <li>
-              <Link
+              <NavLink
                 className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
+                activeClassName="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded underline underline-offset-4"
                 to={routes.contactUs()}
               >
                 Contact Us
-              </Link>
+              </NavLink>
             </li>
             <li>
-              <Link
+              <NavLink
                 className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
+                activeClassName="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded underline underline-offset-4"
                 to={routes.posts()}
               >
                 Admin
-              </Link>
+              </NavLink>
             </li>
             {isAuthenticated && (
               <li>
-                <Link
+                <NavLink
                   className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
+                  activeClassName="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded underline underline-offset-4"
                   onClick={logOut}
                   to={''}
                 >
                   Log Out
-                </Link>
+                </NavLink>
               </li>
             )}
             {!isAuthenticated && (
               <li>
-                <Link
+                <NavLink
                   className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
+                  activeClassName="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded underline underline-offset-4"
                   to={routes.login()}
                 >
                   Log In
-                </Link>
+                </NavLink>
               </li>
             )}
           </ul>

packages/router/src/ActivePageContext.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react'
 
+import { createNamedContext } from './createNamedContext'
 import type { LocationContextType } from './location'
-import { createNamedContext } from './util'
 
 export type LoadingState = 'PRE_SHOW' | 'SHOW_LOADING' | 'DONE'
 export type LoadingStateRecord = Record<

packages/router/src/AuthenticatedRoute.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react'
 
-import { Redirect } from './links'
+import { Redirect } from './redirect'
 import { routes } from './router'
 import { useRouterState } from './router-context'
 import type { GeneratedRoutesMap } from './util'

packages/router/src/PageLoadingContext.tsx

@@ -1,6 +1,6 @@
 import { useContext, useState } from 'react'
 
-import { createNamedContext } from './util'
+import { createNamedContext } from './createNamedContext'
 
 export interface PageLoadingContextInterface {
   loading: boolean

packages/router/src/__tests__/links.test.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 
 import { render } from '@testing-library/react'
 
-import { NavLink } from '../links'
 import { LocationProvider } from '../location'
+import { NavLink } from '../navLink'
 
 function createDummyLocation(pathname: string, search = '') {
   return {

packages/router/src/__tests__/useMatch.test.tsx

@@ -4,7 +4,7 @@ import '@testing-library/jest-dom'
 
 import { render, renderHook as tlrRenderHook } from '@testing-library/react'
 
-import { Link } from '../links'
+import { Link } from '../link'
 import { LocationProvider } from '../location'
 import { useMatch } from '../useMatch'
 import { flattenSearchParams } from '../util'

packages/router/src/createNamedContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+/** Create a React Context with the given name. */
+export function createNamedContext<T>(name: string, defaultValue?: T) {
+  const Ctx = createContext<T | undefined>(defaultValue)
+  Ctx.displayName = name
+  return Ctx
+}

packages/router/src/index.ts

@@ -3,8 +3,10 @@
 // latter of which has closely inspired some of this code).
 
 export { navigate, back } from './history'
-export { Link, NavLink, Redirect } from './links'
+export { NavLink } from './navLink'
+export { Link } from './link'
 export { useLocation, LocationProvider } from './location'
+export { Redirect } from './redirect'
 export {
   usePageLoadingContext,
   PageLoadingContextProvider,

packages/router/src/link.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+// This needs to be a client component because it uses onClick, and the onClick
+// event handler can't be serialized when passed as an RSC Flight response
+
+import { forwardRef } from 'react'
+
+import { navigate } from './history'
+
+export interface LinkProps {
+  to: string
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>
+}
+
+export const Link = forwardRef<
+  HTMLAnchorElement,
+  LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
+>(({ to, onClick, ...rest }, ref) => (
+  <a
+    href={to}
+    ref={ref}
+    {...rest}
+    onClick={(event) => {
+      if (
+        event.button !== 0 ||
+        event.altKey ||
+        event.ctrlKey ||
+        event.metaKey ||
+        event.shiftKey
+      ) {
+        return
+      }
+
+      event.preventDefault()
+
+      if (onClick) {
+        const result = onClick(event)
+        if (typeof result !== 'boolean' || result) {
+          navigate(to)
+        }
+      } else {
+        navigate(to)
+      }
+    }}
+  />
+))

packages/router/src/location.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
+import { createNamedContext } from './createNamedContext'
 import { gHistory } from './history'
 import type { TrailingSlashesTypes } from './util'
-import { createNamedContext } from './util'
 
 export interface LocationContextType {
   pathname: string

packages/router/src/navLink.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { forwardRef } from 'react'
+
+import { Link, type LinkProps } from './link'
+import { useMatch } from './useMatch'
+import type { FlattenSearchParams } from './util'
+import { flattenSearchParams } from './util'
+
+interface NavLinkProps extends LinkProps {
+  activeClassName: string
+  activeMatchParams?: FlattenSearchParams
+  matchSubPaths?: boolean
+}
+
+export const NavLink = forwardRef<
+  HTMLAnchorElement,
+  NavLinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
+>(
+  (
+    {
+      to,
+      activeClassName,
+      activeMatchParams,
+      matchSubPaths,
+      className,
+      onClick,
+      ...rest
+    },
+    ref
+  ) => {
+    // Separate pathname and search parameters, USVString expected
+    const [pathname, queryString] = to.split('?')
+    const searchParams = activeMatchParams || flattenSearchParams(queryString)
+    const matchInfo = useMatch(pathname, {
+      searchParams,
+      matchSubPaths,
+    })
+    const theClassName = [className, matchInfo.match && activeClassName]
+      .filter(Boolean)
+      .join(' ')
+
+    return (
+      <Link
+        ref={ref}
+        to={to}
+        onClick={onClick}
+        className={theClassName}
+        {...rest}
+      />
+    )
+  }
+)

packages/router/src/params.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 
-import { createNamedContext } from './util'
+import { createNamedContext } from './createNamedContext'
 
 export interface ParamsContextProps {
   params: Record<string, string>