refactor: use React.JSX rather than global JSX (#93)

packages/router/src/components/Link.tsx

@@ -17,7 +17,7 @@ interface TuonoLinkProps {
 
 export default function Link(
   componentProps: AnchorHTMLAttributes<HTMLAnchorElement> & TuonoLinkProps,
-): JSX.Element {
+): React.JSX.Element {
   const { preload = true, scroll = true, ...props } = componentProps
   const router = useRouter()
   const route = useRoute(props.href)

packages/router/src/components/Matches.tsx

@@ -9,7 +9,7 @@ interface MatchesProps {
   serverSideProps: any
 }
 
-export function Matches({ serverSideProps }: MatchesProps): JSX.Element {
+export function Matches({ serverSideProps }: MatchesProps): React.JSX.Element {
   const location = useRouterStore((st) => st.location)
 
   const route = useRoute(location.pathname)

packages/router/src/components/NotFound.tsx

@@ -3,7 +3,7 @@ import { RouteMatch } from './RouteMatch'
 import Link from './Link'
 import { useInternalRouter } from '../hooks/useInternalRouter'
 
-export default function NotFound(): JSX.Element {
+export default function NotFound(): React.JSX.Element {
   const router = useInternalRouter()
 
   const custom404Route = router.routesById['/404']

packages/router/src/components/RouteMatch.tsx

@@ -16,7 +16,7 @@ interface MatchProps {
 export const RouteMatch = ({
   route,
   serverSideProps,
-}: MatchProps): JSX.Element => {
+}: MatchProps): React.JSX.Element => {
   const { data, isLoading } = useServerSideProps(route, serverSideProps)
 
   const routes = React.useMemo(() => loadParentComponents(route), [route.id])
@@ -55,13 +55,13 @@ const TraverseRootComponents = React.memo(
     isLoading,
     index = 0,
     children,
-  }: TraverseRootComponentsProps): JSX.Element => {
+  }: TraverseRootComponentsProps): React.JSX.Element => {
     if (routes.length > index) {
       const Parent = React.useMemo(
         () =>
           routes[index]?.component as unknown as (
             props: ParentProps,
-          ) => JSX.Element,
+          ) => React.JSX.Element,
         [],
       )
 

packages/router/src/components/RouterProvider.tsx

@@ -1,9 +1,10 @@
-import { getRouterContext } from './RouterContext'
-import { Matches } from './Matches'
+import React from 'react'
+import type { ReactNode, JSX } from 'react'
 import { useListenBrowserUrlUpdates } from '../hooks/useListenBrowserUrlUpdates'
-import React, { type ReactNode } from 'react'
 import { initRouterStore } from '../hooks/useRouterStore'
 import type { ServerProps } from '../types'
+import { getRouterContext } from './RouterContext'
+import { Matches } from './Matches'
 
 type Router = any
 

packages/router/src/dynamic.tsx

@@ -13,7 +13,7 @@ type ImportFn = () => Promise<{ default: React.ComponentType<any> }>
  * It can be wrapped within a React.Suspense component in order to handle its loading state.
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const dynamic = (importFn: ImportFn): JSX.Element => {
+export const dynamic = (importFn: ImportFn): React.JSX.Element => {
   /**
    *
    * This function is just a placeholder. The real work is done by the bundler.

packages/router/src/router.ts

@@ -1,3 +1,5 @@
+import type { JSX } from 'react'
+
 import { trimPath, trimPathRight } from './utils'
 import type { Route } from './route'