chore: add eslint-plugin-react (#251)

apps/documentation/src/components/mdx-provider/mdx-title/mdx-title.tsx

@@ -16,6 +16,12 @@ export default function MdxTitle(props: TitleProps): JSX.Element {
   )
 }
 
-export const h =
-  (order: 1 | 2 | 3 | 4 | 5 | 6) =>
-  (props: TitleProps): JSX.Element => <MdxTitle order={order} {...props} />
+export const h = (
+  order: 1 | 2 | 3 | 4 | 5 | 6,
+): React.ElementType<TitleProps> => {
+  function render(props: TitleProps): JSX.Element {
+    return <MdxTitle order={order} {...props} />
+  }
+  render.displayName = 'H'
+  return render
+}

apps/documentation/src/components/sidebar/sidebar.tsx

@@ -50,26 +50,30 @@ function SidebarElements({ close }: SidebarProps): JSX.Element {
     <AppShell.Section component={ScrollArea}>
       {sidebarElements.map((el, i) => {
         if (el.type === 'divider') {
-          return <Divider my="md" mx={10} />
+          return <Divider key={`${el.type}-${i}`} my="md" mx={10} />
         }
+
         if (el.type === 'title') {
           return (
             <Text
+              key={`${el.type}-${i}`}
               size="xs"
               fw={700}
               fz={12}
               pl={12}
               py={5}
-              children={el.label}
-            />
+            >
+              {el.label}
+            </Text>
           )
         }
+
         if (el.children?.length) {
           return (
             <SidebarLink
+              key={`${el.type}-${i}`}
               href={el.href}
               label={el.label}
-              key={i}
               leftSection={el.leftIcon}
             >
               {el.children.map((child, index) => (
@@ -83,12 +87,13 @@ function SidebarElements({ close }: SidebarProps): JSX.Element {
             </SidebarLink>
           )
         }
+
         return (
           <SidebarLink
+            key={`${el.type}-${i}`}
             href={el.href}
             label={el.label}
             onClick={close}
-            key={i}
           />
         )
       })}

eslint.config.js

@@ -2,6 +2,7 @@ import eslint from '@eslint/js'
 import tseslint from 'typescript-eslint'
 // @ts-expect-error no types are available for this plugin
 import eslintPluginImport from 'eslint-plugin-import'
+import eslintPluginReact from 'eslint-plugin-react'
 // @ts-expect-error no types are available for this plugin
 import eslintPluginReactHooks from 'eslint-plugin-react-hooks'
 
@@ -38,6 +39,23 @@ export default tseslint.config(
   // eslint-disable-next-line import/no-named-as-default-member
   tseslint.configs.strictTypeChecked,
 
+  // @ts-expect-error flat is optional but always defined on runtime
+  eslintPluginReact.configs.flat.recommended,
+  // @ts-expect-error flat is optional but always defined on runtime
+  eslintPluginReact.configs.flat['jsx-runtime'],
+
+  {
+    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
+    plugins: {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      'react-hooks': eslintPluginReactHooks,
+    },
+    rules: {
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'error',
+    },
+  },
+
   {
     languageOptions: {
       parserOptions: {
@@ -142,18 +160,6 @@ export default tseslint.config(
     },
   },
 
-  {
-    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
-    plugins: {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      'react-hooks': eslintPluginReactHooks,
-    },
-    rules: {
-      'react-hooks/rules-of-hooks': 'error',
-      'react-hooks/exhaustive-deps': 'error',
-    },
-  },
-
   {
     files: ['apps/documentation/**'],
     settings: {

package.json

@@ -31,6 +31,7 @@
     "eslint": "^9.15.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react": "7.37.2",
     "eslint-plugin-react-hooks": "5.1.0",
     "prettier": "^3.2.4",
     "turbo": "^2.2.3",

packages/router/src/components/Link.tsx

@@ -1,49 +1,61 @@
-import * as React from 'react'
-import type { AnchorHTMLAttributes } from 'react'
+import type * as React from 'react'
 import { useInView } from 'react-intersection-observer'
 
 import { useRouter } from '../hooks/useRouter'
 import useRoute from '../hooks/useRoute'
 
-interface TuonoLinkProps {
+interface TuonoLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   /**
-   * If "true" the route gets loaded when the link enters the viewport. Default "true"
+   * If "true" the route gets loaded when the link enters the viewport.
+   * @default true
    */
   preload?: boolean
+
   /**
-   * If "false" the scroll offset will be kept across page navigation. Default "true"
+   * If "false" the scroll offset will be kept across page navigation.
+   * @default true
    */
   scroll?: boolean
 }
 
 export default function Link(
-  componentProps: AnchorHTMLAttributes<HTMLAnchorElement> & TuonoLinkProps,
+  componentProps: TuonoLinkProps,
 ): React.JSX.Element {
-  const { preload = true, scroll = true, ...props } = componentProps
+  const {
+    preload = true,
+    scroll = true,
+    children,
+    href,
+    onClick,
+    ...rest
+  } = componentProps
+
   const router = useRouter()
-  const route = useRoute(props.href)
+  const route = useRoute(href)
   const { ref } = useInView({
     onChange(inView) {
       if (inView && preload) route?.component.preload()
     },
     triggerOnce: true,
   })
 
-  const handleTransition: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
-    e.preventDefault()
-    props.onClick?.(e)
+  const handleTransition: React.MouseEventHandler<HTMLAnchorElement> = (
+    event,
+  ) => {
+    event.preventDefault()
+    onClick?.(event)
 
-    if (props.href?.startsWith('#')) {
-      window.location.hash = props.href
+    if (href?.startsWith('#')) {
+      window.location.hash = href
       return
     }
 
-    router.push(props.href || '', { scroll })
+    router.push(href || '', { scroll })
   }
 
   return (
-    <a {...props} ref={ref} onClick={handleTransition}>
-      {props.children}
+    <a {...rest} href={href} ref={ref} onClick={handleTransition}>
+      {children}
     </a>
   )
 }

packages/router/src/components/Matches.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 
 import { useRouterStore } from '../hooks/useRouterStore'
 import useRoute from '../hooks/useRoute'

packages/router/src/components/NotFound.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 
 import { useInternalRouter } from '../hooks/useInternalRouter'
 

packages/router/src/components/RouteMatch.spec.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 import { afterEach, describe, expect, test, vi } from 'vitest'
 
 import { cleanup, render, screen } from '@testing-library/react'

packages/router/src/components/RouteMatch.tsx

@@ -72,6 +72,7 @@ const TraverseRootComponents = React.memo(
     return <>{children}</>
   },
 )
+TraverseRootComponents.displayName = 'TraverseRootComponents'
 
 const loadParentComponents = (
   route: Route,

packages/router/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "jsx": "react"
+    "jsx": "react-jsx"
   },
   "include": ["src", "tests", "vite.config.ts"]
 }

packages/tuono/src/ssr/server.tsx

@@ -1,7 +1,6 @@
 import 'fast-text-encoding' // Mandatory for React18
 import type { ReadableStream } from 'node:stream/web'
 
-import * as React from 'react'
 import { renderToStaticMarkup, renderToReadableStream } from 'react-dom/server'
 import type { HelmetServerState } from 'react-helmet-async'
 import { HelmetProvider } from 'react-helmet-async'

packages/tuono/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "jsx": "react"
+    "jsx": "react-jsx"
   },
   "include": ["src", "tests", "vite.config.ts"]
 }