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

2026-07-25 12:52:47 -07:00 · 2024-11-13 08:33:48 +01:00
parent 6331eb64e6
commit 7b8165cee6
40 changed files with 79 additions and 40 deletions
@@ -49,7 +49,7 @@
    "@typescript-eslint/naming-convention": [
      "error",
      {
-		"selector": "typeParameter",
+        "selector": "typeParameter",
        "format": ["PascalCase"],
        "leadingUnderscore": "forbid",
        "trailingUnderscore": "forbid",
@@ -59,6 +59,7 @@
        },
      },
    ],
+    "@typescript-eslint/no-deprecated": "error",
    "@typescript-eslint/no-empty-function": "error",
    "@typescript-eslint/no-empty-interface": "error",
    "@typescript-eslint/no-explicit-any": "off",
@@ -49,7 +49,7 @@
    "@typescript-eslint/naming-convention": [
      "error",
      {
-		"selector": "typeParameter",
+        "selector": "typeParameter",
        "format": ["PascalCase"],
        "leadingUnderscore": "forbid",
        "trailingUnderscore": "forbid",
@@ -59,6 +59,7 @@
        },
      },
    ],
+    "@typescript-eslint/no-deprecated": "error",
    "@typescript-eslint/no-empty-function": "error",
    "@typescript-eslint/no-empty-interface": "error",
    "@typescript-eslint/no-explicit-any": "off",
@@ -1,3 +1,4 @@
+import type { JSX } from 'react'
 import { Breadcrumbs, Button } from '@mantine/core'
 import { Link, Head } from 'tuono'

@@ -1,3 +1,4 @@
+import type { JSX } from 'react'
 import { Button } from '@mantine/core'
 import { IconEdit } from '@tabler/icons-react'
 import { useRouter } from 'tuono'
@@ -1,3 +1,4 @@
+import type { JSX } from 'react'
 import {
  Button,
  Center,
@@ -1,3 +1,4 @@
+import type { JSX } from 'react'
 import { Text, type TextProps } from '@mantine/core'

 export default function MdxBold(props: TextProps): JSX.Element {
@@ -1,3 +1,4 @@
+import type { JSX } from 'react'
 import { Code } from '@mantine/core'
 import type { HTMLAttributes } from 'react'

@@ -1,4 +1,4 @@
-import type { AnchorHTMLAttributes } from 'react'
+import type { JSX, AnchorHTMLAttributes } from 'react'
 import { Button } from '@mantine/core'
 import { Link } from 'tuono'
 import { IconExternalLink } from '@tabler/icons-react'
@@ -1,3 +1,4 @@
+import type { JSX } from 'react'
 import { CodeHighlight } from '@mantine/code-highlight'
 import styles from './mdx-pre.module.css'

@@ -1,3 +1,4 @@
+import type { JSX } from 'react'
 import { MDXProvider } from '@mdx-js/react'

 import MdxLink from './mdx-link'
@@ -1,5 +1,5 @@
+import type { JSX, HTMLAttributes } from 'react'
 import { Blockquote, Space } from '@mantine/core'
-import type { HTMLAttributes } from 'react'

 export default function MdxQuote(
  props: HTMLAttributes<HTMLQuoteElement>,
@@ -1,3 +1,4 @@
+import type { JSX } from 'react'
 import { Title, type TitleProps } from '@mantine/core'

 export default function MdxTitle(props: TitleProps): JSX.Element {
@@ -1,8 +1,10 @@
+import type { JSX } from 'react'
 import { Flex, Button, ActionIcon, Group } from '@mantine/core'
 import { IconBrandGithub, IconBook, IconBrandX } from '@tabler/icons-react'
-import ThemeBtn from '../theme-btn'
 import { Link } from 'tuono'

+import ThemeBtn from '../theme-btn'
+
 export default function Actions(): JSX.Element {
  return (
    <Flex gap={8}>
@@ -1,5 +1,7 @@
+import type { JSX } from 'react'
 import { AppShell, Burger, Button, Flex } from '@mantine/core'
 import { Link, useRouter } from 'tuono'
+
 import Actions from './actions'

 interface NavbarProps {
@@ -1,3 +1,4 @@
+import type { JSX } from 'react'
 import { Box, Button, Text, Title, Flex } from '@mantine/core'
 import { Link } from 'tuono'
 import { IconArrowRight, IconArrowLeft } from '@tabler/icons-react'
@@ -1,5 +1,6 @@
+import type { JSX, ReactNode } from 'react'
+import { useState } from 'react'
 import { NavLink, type NavLinkProps } from '@mantine/core'
-import { useState, type ReactNode } from 'react'
 import { Link, useRouter } from 'tuono'
 import { IconChevronRight } from '@tabler/icons-react'

@@ -1,4 +1,6 @@
+import type { JSX } from 'react'
 import { AppShell } from '@mantine/core'
+
 import SidebarLink from './sidebar-link'

 export default function Sidebar({ close }: { close: () => void }): JSX.Element {
@@ -1,6 +1,7 @@
 /*
 * Component inspired by: https://github.com/mantinedev/mantine/tree/master/apps/mantine.dev/src/components/TableOfContents
 */
+import type { JSX } from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { useRouter, Link } from 'tuono'
 import { IconList } from '@tabler/icons-react'
@@ -1,3 +1,4 @@
+import type { JSX } from 'react'
 import {
  ActionIcon,
  useMantineColorScheme,
@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import type { ReactNode, JSX } from 'react'
 import {
  ColorSchemeScript,
  createTheme,
@@ -1,5 +1,6 @@
-import type { ReactNode } from 'react'
+import type { ReactNode, JSX } from 'react'
 import { AppShell, Container } from '@mantine/core'
+
 import MdxProvider from '../../components/mdx-provider'
 import EditPage from '../../components/edit-page'

@@ -64,6 +64,7 @@ Now the Pokémon are correctly fetched and hydrated on the client side, so we ca

 ```tsx
 // src/routes/index.tsx
+import type { JSX } from 'react'
 import type { TuonoProps } from 'tuono'

 interface Pokemon {
@@ -76,9 +77,9 @@ interface IndexProps {

 export default function IndexPage({
  data,
-}: TuonoProps<IndexProps>): JSX.Element {
+}: TuonoProps<IndexProps>): JSX.Element | null {
  if (!data?.results) {
-    return <></>
+    return null
  }

  return (
@@ -25,6 +25,7 @@ Create the following file `src/components/PokemonLink.tsx` and fill the content

 ```tsx
 // src/components/PokemonLink.tsx
+import type { JSX } from 'react'
 import { Link } from 'tuono'

 interface Pokemon {
@@ -109,8 +110,9 @@ Then import the styles into the `PokemonLink` component as following:

 ```diff
 // src/components/PokemonLink.tsx
-import { Link } from "tuono";
-import type { Pokemon } from "./../types/pokemon";
+import type { JSX } from 'react'
+import { Link } from "tuono"
+import type { Pokemon } from "./../types/pokemon"
 ++ import styles from './PokemonLink.module.css'

 export default function PokemonLink({
@@ -63,6 +63,7 @@ async fn get_pokemon(req: Request, fetch: Client) -> Response {
 Then let’s work on the frontend. Paste into the `[pokemon].tsx` file the following code:

 ```tsx
+import type { JSX } from 'react'
 import { TuonoProps } from 'tuono'
 import PokemonView from '../../components/PokemonView'

@@ -26,6 +26,7 @@ To do so `tuono` also exposes the `<Head />` component useful exactly for handli

 ```diff
 // src/routes/index.tsx
+import type { JSX } from 'react'
 import type { TuonoProps } from "tuono";
 ++ import { Head } from "tuono"

@@ -80,6 +81,7 @@ export default function IndexPage({

 ```diff
 // src/routes/pokemons/[pokemon].tsx
+import type { JSX } from 'react'
 -- import { TuonoProps } from "tuono";
 ++ import { TuonoProps, Head } from "tuono";
 import PokemonView from "../../components/PokemonView";
@@ -1,3 +1,5 @@
+import type { JSX } from 'react'
+
 import Hero from '../components/hero'
 import MetaTags from '../components/meta-tags'

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import type { ReactNode, JSX } from 'react'
 import { MDXProvider } from '@mdx-js/react'

 interface RootRouteProps {
@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import type { ReactNode, JSX } from 'react'

 interface RootRouteProps {
  children: ReactNode
@@ -1,3 +1,4 @@
+import type { JSX } from 'react'
 import type { TuonoProps } from 'tuono'

 interface IndexProps {
@@ -1,4 +1,6 @@
+import type { JSX } from 'react'
 import { Link } from 'tuono'
+
 import styles from './PokemonLink.module.css'

 interface Pokemon {
@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import type { ReactNode, JSX } from 'react'

 interface RootRouteProps {
  children: ReactNode
@@ -1,5 +1,7 @@
 // src/routes/index.tsx
+import type { JSX } from 'react'
 import { Head, type TuonoProps } from 'tuono'
+
 import PokemonLink from '../components/PokemonLink'

 interface Pokemon {
@@ -12,9 +14,9 @@ interface IndexProps {

 export default function IndexPage({
  data,
-}: TuonoProps<IndexProps>): JSX.Element {
+}: TuonoProps<IndexProps>): JSX.Element | null {
  if (!data?.results) {
-    return <></>
+    return null
  }

  return (
@@ -1,22 +1,24 @@
+import type { JSX } from 'react'
 import { Head, type TuonoProps } from 'tuono'
+
 import PokemonView from '../../components/PokemonView'

 interface Pokemon {
-	name: string
-	id: string
-	weight: number
-	height: number
+  name: string
+  id: string
+  weight: number
+  height: number
 }

 export default function PokemonPage({
-	data,
+  data,
 }: TuonoProps<Pokemon>): JSX.Element {
-	return (
-		<>
-			<Head>
-				<title>{`Pokemon: ${data?.name}`}</title>
-			</Head>
-			<PokemonView pokemon={data} />
-		</>
-	)
+  return (
+    <>
+      <Head>
+        <title>{`Pokemon: ${data?.name}`}</title>
+      </Head>
+      <PokemonView pokemon={data} />
+    </>
+  )
 }
@@ -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)
@@ -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)
@@ -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']
@@ -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,
        [],
      )

@@ -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

@@ -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.
@@ -1,3 +1,5 @@
+import type { JSX } from 'react'
+
 import { trimPath, trimPathRight } from './utils'
 import type { Route } from './route'