chore(apps/documentation): migrate to eslint 9 (#188)

apps/documentation/.eslintrc

@@ -1,106 +0,0 @@
-{
-  "root": true,
-  "reportUnusedDisableDirectives": true,
-  "ignorePatterns": ["**/build", "**/dist"],
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "import"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/stylistic",
-    "plugin:import/recommended",
-    "plugin:import/typescript",
-    "prettier",
-  ],
-  "env": {
-    "browser": true,
-    "es2020": true,
-  },
-  "parserOptions": {
-    "tsconfigRootDir": ".",
-    "project": true,
-    "sourceType": "module",
-    "ecmaVersion": 2020,
-  },
-  "settings": {
-    "import/parsers": {
-      "@typescript-eslint/parser": [".ts", ".tsx"],
-    },
-    "import/resolver": {
-      "typescript": true,
-    },
-    "react": {
-      "version": "detect",
-    },
-  },
-  "rules": {
-    "@typescript-eslint/array-type": "error",
-    "@typescript-eslint/no-wrapper-object-types": "error",
-    "@typescript-eslint/no-empty-object-type": "error",
-    "@typescript-eslint/no-unsafe-function-type": "error",
-    "@typescript-eslint/ban-ts-comment": "error",
-    "@typescript-eslint/consistent-type-definitions": "error",
-    "@typescript-eslint/consistent-type-imports": [
-      "error",
-      { "prefer": "type-imports" },
-    ],
-    "@typescript-eslint/explicit-module-boundary-types": "error",
-    "@typescript-eslint/method-signature-style": ["error", "property"],
-    "@typescript-eslint/naming-convention": [
-      "error",
-      {
-        "selector": "typeParameter",
-        "format": ["PascalCase"],
-        "leadingUnderscore": "forbid",
-        "trailingUnderscore": "forbid",
-        "custom": {
-          "regex": "^(T|T[A-Z][A-Za-z]+)$",
-          "match": true,
-        },
-      },
-    ],
-    "@typescript-eslint/no-deprecated": "error",
-    "@typescript-eslint/no-empty-function": "error",
-    "@typescript-eslint/no-empty-interface": "error",
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/no-non-null-assertion": "error",
-    "@typescript-eslint/no-unnecessary-condition": "error",
-    "@typescript-eslint/no-unnecessary-type-assertion": "error",
-    "@typescript-eslint/no-unused-vars": "error",
-    "@typescript-eslint/explicit-function-return-type": "error",
-    "@typescript-eslint/no-inferrable-types": [
-      "error",
-      { "ignoreParameters": true },
-    ],
-    "import/default": "error",
-    "import/export": "error",
-    "import/namespace": "error",
-    "import/newline-after-import": "error",
-    "import/no-cycle": "error",
-    "import/no-duplicates": "off",
-    "import/no-named-as-default-member": "error",
-    "import/no-unused-modules": "error",
-    "import/order": [
-      "off",
-      {
-        "groups": [
-          "builtin",
-          "external",
-          "internal",
-          "parent",
-          "sibling",
-          "index",
-          "object",
-          "type",
-        ],
-      },
-    ],
-    "no-case-declarations": "error",
-    "no-empty": "error",
-    "no-prototype-builtins": "error",
-    "no-redeclare": "error",
-    "no-shadow": "error",
-    "no-undef": "off",
-    "sort-imports": "off",
-  },
-}

apps/documentation/package.json

@@ -3,8 +3,9 @@
   "description": "The react/rust fullstack framework documentation",
   "version": "0.0.1",
   "private": true,
+  "type": "module",
   "scripts": {
-    "lint": "eslint --ext .ts,.tsx ./src -c .eslintrc",
+    "lint": "eslint .",
     "format": "prettier -u --write --ignore-unknown './src/**/*'",
     "format:check": "prettier --check --ignore-unknown './src/**/*'",
     "types": "tsc --noEmit"

apps/documentation/postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     'postcss-preset-mantine': {},
     'postcss-simple-vars': {

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

@@ -1,6 +1,5 @@
-import type { JSX } from 'react'
+import type { JSX, HTMLAttributes } from 'react'
 import { Code } from '@mantine/core'
-import type { HTMLAttributes } from 'react'
 
 export default function MdxCode(
   props: HTMLAttributes<HTMLPreElement>,

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

@@ -1,10 +1,17 @@
 import type { JSX } from 'react'
 import { CodeHighlight } from '@mantine/code-highlight'
+
 import styles from './mdx-pre.module.css'
 
 interface PreProps {
-  children: any
+  children: {
+    props: {
+      children: string
+      className?: string
+    }
+  }
 }
+
 export default function MdxPre({ children }: PreProps): JSX.Element {
   return (
     <CodeHighlight

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

@@ -1,8 +1,7 @@
-import type { JSX } from 'react'
+import type { JSX, ReactNode } from 'react'
 import { MDXProvider } from '@mdx-js/react'
 
 import MdxLink from './mdx-link'
-import type { ReactNode } from 'react'
 import MdxPre from './mdx-pre'
 import MdxQuote from './mdx-quote'
 import MdxCode from './mdx-code'

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

@@ -8,6 +8,7 @@ export default function MdxTitle(props: TitleProps): JSX.Element {
       data-order={props.order}
       mt={20}
       {...props}
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
       id={String(props.children ?? '')
         .toLowerCase()
         .replaceAll(' ', '-')}

apps/documentation/src/components/table-of-content/table-of-content.tsx

@@ -6,6 +6,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useRouter, Link } from 'tuono'
 import { IconList } from '@tabler/icons-react'
 import { Box, rem, ScrollArea, Text } from '@mantine/core'
+
 import { getHeadings, type Heading } from './get-headings'
 import classes from './table-of-content.module.css'
 

apps/documentation/src/modules.d.ts

@@ -1,2 +1,5 @@
 // declaration.d.ts
-declare module '*.css'
+declare module '*.css' {
+  const CSSModule: Record<string, string>
+  export default CSSModule
+}

apps/documentation/src/routes/__root.tsx

@@ -7,13 +7,13 @@ import {
 } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
 import { Head, useRouter } from 'tuono'
+
 import Navbar from '@/components/navbar'
+import Sidebar from '@/components/sidebar'
 
 import '@mantine/core/styles.css'
 import '@mantine/code-highlight/styles.css'
 
-import Sidebar from '@/components/sidebar'
-
 interface RootRouteProps {
   children: ReactNode
 }

apps/documentation/tsconfig.json

@@ -1,28 +1,37 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2021", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
+    // Typechecking
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
+
+    // Modules
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
     "paths": {
       "@/*": ["./src/*"]
-    }
     },
-  "include": ["src"],
+
+    // Emit
+    "noEmit": true,
+
+    // JavaScript Support
+    "allowJs": true,
+
+    // Interop Constraints
+    "isolatedModules": true,
+
+    // Language and Environment
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+
+    // Completeness
+    "skipLibCheck": true
+  },
+  "include": ["src", "tuono.config.ts", "postcss.config.js"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

eslint.config.js

@@ -9,6 +9,7 @@ export default tseslint.config(
       // #region shared
       '**/build',
       '**/dist',
+      '**/.tuono',
       '**/vite.config.ts.timestamp**',
       // #endregion shared
 
@@ -128,4 +129,12 @@ export default tseslint.config(
       'sort-imports': 'off',
     },
   },
+  {
+    files: ['apps/documentation/**'],
+    settings: {
+      'import/resolver': {
+        typescript: 'apps/documentation/tsconfig.json',
+      },
+    },
+  },
 )