diff --git a/packages/tuono-router/src/components/Link.spec.tsx b/packages/tuono-router/src/components/Link.spec.tsx index 19ac00b8..f9ae4cb4 100644 --- a/packages/tuono-router/src/components/Link.spec.tsx +++ b/packages/tuono-router/src/components/Link.spec.tsx @@ -1,7 +1,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest' import { render, fireEvent, screen } from '@testing-library/react' -import Link from './Link' +import { Link } from './Link' const pushMock = vi.fn() const replaceMock = vi.fn() diff --git a/packages/tuono-router/src/components/Link.tsx b/packages/tuono-router/src/components/Link.tsx index 34b87691..719e2899 100644 --- a/packages/tuono-router/src/components/Link.tsx +++ b/packages/tuono-router/src/components/Link.tsx @@ -1,4 +1,4 @@ -import type * as React from 'react' +import type { JSX, MouseEvent } from 'react' import { useInView } from 'react-intersection-observer' import { useRouter } from '../hooks/useRouter' @@ -25,7 +25,7 @@ interface TuonoLinkProps extends React.AnchorHTMLAttributes { } function isEventModifierKeyActiveAndTargetDifferentFromSelf( - event: React.MouseEvent, + event: MouseEvent, ): boolean { const target = event.currentTarget.getAttribute('target') return ( @@ -37,9 +37,7 @@ function isEventModifierKeyActiveAndTargetDifferentFromSelf( ) } -export default function Link( - componentProps: TuonoLinkProps, -): React.JSX.Element { +export function Link(componentProps: TuonoLinkProps): JSX.Element { const { preload = true, scroll = true, diff --git a/packages/tuono-router/src/components/Matches.tsx b/packages/tuono-router/src/components/Matches.tsx index 7bd5f7e7..aeac8833 100644 --- a/packages/tuono-router/src/components/Matches.tsx +++ b/packages/tuono-router/src/components/Matches.tsx @@ -1,9 +1,9 @@ -import type * as React from 'react' +import type { JSX } from 'react' import { useRoute } from '../hooks/useRoute' import { RouteMatch } from './RouteMatch' -import NotFound from './NotFound' +import { NotFound } from './NotFound' import { useRouterContext } from './RouterContext' interface MatchesProps { @@ -11,9 +11,7 @@ interface MatchesProps { serverInitialData: TServerPayloadData } -export function Matches({ - serverInitialData, -}: MatchesProps): React.JSX.Element { +export function Matches({ serverInitialData }: MatchesProps): JSX.Element { const { location } = useRouterContext() const route = useRoute(location.pathname) diff --git a/packages/tuono-router/src/components/NotFound.tsx b/packages/tuono-router/src/components/NotFound.tsx index 9064bcba..2c3a68fa 100644 --- a/packages/tuono-router/src/components/NotFound.tsx +++ b/packages/tuono-router/src/components/NotFound.tsx @@ -1,11 +1,11 @@ -import type * as React from 'react' +import type { JSX } from 'react' import { useRouterContext } from '../components/RouterContext' import { RouteMatch } from './RouteMatch' -import Link from './Link' +import { Link } from './Link' -export default function NotFound(): React.JSX.Element { +export function NotFound(): JSX.Element { const { router } = useRouterContext() const custom404Route = router.routesById['/404'] diff --git a/packages/tuono-router/src/components/RouteMatch.tsx b/packages/tuono-router/src/components/RouteMatch.tsx index ac9ad7bd..854cfcb3 100644 --- a/packages/tuono-router/src/components/RouteMatch.tsx +++ b/packages/tuono-router/src/components/RouteMatch.tsx @@ -1,4 +1,5 @@ -import * as React from 'react' +import type { JSX } from 'react' +import { memo, Suspense, useMemo } from 'react' import type { Route } from '../route' import { useServerPayloadData } from '../hooks/useServerPayloadData' @@ -16,18 +17,18 @@ interface RouteMatchProps { */ export const RouteMatch = ({ route, - serverInitialData: serverInitialData, -}: RouteMatchProps): React.JSX.Element => { + serverInitialData, +}: RouteMatchProps): JSX.Element => { const { data, isLoading } = useServerPayloadData(route, serverInitialData) // eslint-disable-next-line react-hooks/exhaustive-deps - const routes = React.useMemo(() => loadParentComponents(route), [route.id]) + const routes = useMemo(() => loadParentComponents(route), [route.id]) return ( - + - + ) } @@ -40,13 +41,13 @@ interface TraverseRootComponentsProps { index?: number } -/* - * This component traverses and renders - * all the components that wraps the selected route (__layout). - * The parents components need to be memoized in order to avoid - * re-rendering bugs when changing route. +/** + * This component traverses and renders all components + * that wrap the selected route (__layout). + * Parent components must be memoized + * to prevent re-rendering issues when the route changes. */ -const TraverseRootComponents = React.memo( +const TraverseRootComponents = memo( ({ routes, data, diff --git a/packages/tuono-router/src/hooks/useRouter.ts b/packages/tuono-router/src/hooks/useRouter.ts index bd34af92..e35d573e 100644 --- a/packages/tuono-router/src/hooks/useRouter.ts +++ b/packages/tuono-router/src/hooks/useRouter.ts @@ -1,4 +1,4 @@ -import React from 'react' +import { useCallback } from 'react' import { useRouterContext } from '../components/RouterContext' @@ -38,7 +38,7 @@ interface UseRouterResult { export const useRouter = (): UseRouterResult => { const { location, updateLocation } = useRouterContext() - const navigate = React.useCallback( + const navigate = useCallback( (type: NavigationType, path: string, opts?: NavigationOptions): void => { const { scroll = true } = opts || {} const url = new URL(path, window.location.origin) @@ -60,14 +60,14 @@ export const useRouter = (): UseRouterResult => { [updateLocation], ) - const push = React.useCallback( + const push = useCallback( (path: string, opts?: NavigationOptions): void => { navigate('pushState', path, opts) }, [navigate], ) - const replace = React.useCallback( + const replace = useCallback( (path: string, opts?: NavigationOptions): void => { navigate('replaceState', path, opts) }, diff --git a/packages/tuono-router/src/index.ts b/packages/tuono-router/src/index.ts index 08fca9d0..4cc4c8b1 100644 --- a/packages/tuono-router/src/index.ts +++ b/packages/tuono-router/src/index.ts @@ -1,5 +1,5 @@ export { RouterProvider } from './components/RouterProvider' -export { default as Link } from './components/Link' +export { Link } from './components/Link' export { createRouter } from './router' export type { RouterInstanceType } from './router' export { createRoute, createRootRoute } from './route'