Feat/main upgrade packages

eslint.config.mjs

@@ -0,0 +1,88 @@
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import _import from "eslint-plugin-import";
+import prettier from "eslint-plugin-prettier";
+import { fixupPluginRules } from "@eslint/compat";
+import globals from "globals";
+import tsParser from "@typescript-eslint/parser";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+export default [{
+    ignores: ["**/webpack.config.ts", "**/jest.config.js"],
+}, ...compat.extends(
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+), {
+    plugins: {
+        "@typescript-eslint": typescriptEslint,
+        react,
+        "react-hooks": fixupPluginRules(reactHooks),
+        import: fixupPluginRules(_import),
+        prettier,
+    },
+
+    languageOptions: {
+        globals: {
+            ...globals.browser,
+        },
+
+        parser: tsParser,
+        ecmaVersion: 2020,
+        sourceType: "module",
+
+        parserOptions: {
+            project: ["tsconfig.json", "examples/tsconfig.json", "test/tsconfig.json"],
+
+            ecmaFeatures: {
+                jsx: true,
+            },
+        },
+    },
+
+    settings: {
+        react: {
+            version: "detect",
+        },
+    },
+
+    rules: {
+        "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-non-null-asserted-optional-chain": "off",
+
+        "react/jsx-filename-extension": ["warn", {
+            extensions: [".jsx", ".tsx"],
+        }],
+
+        "react/prop-types": "off",
+        "react-hooks/rules-of-hooks": "error",
+        "react-hooks/exhaustive-deps": "warn",
+        "no-console": "warn",
+
+        quotes: [2, "single", {
+            avoidEscape: true,
+        }],
+
+        "react/jsx-key": "off",
+    },
+}, {
+    files: ["examples/ex/*.tsx"],
+
+    rules: {
+        "no-console": "off",
+    },
+}];

examples/App.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import 'bootstrap/dist/css/bootstrap.min.css';
 import React from 'react';
 import {HashRouter as Router, Route, Link} from 'react-router-dom';

examples/CodeBlock.tsx

@@ -3,7 +3,7 @@ import CodePenButton from './CodePenButton';
 import 'prism-themes/themes/prism-vsc-dark-plus.css';
 
 // This is expensive to render
-const CodeBlock = React.memo(function _CodeBlock(props: {
+const CodeBlock = React.memo(function CodeBlockRaw(props: {
     title: string;
     code: Promise<string>;
     text: Promise<string>;

examples/CodePenButton.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 // @ts-ignore
 import exampleCss from '!!raw-loader!./example.css';
 
-const CodePenButton = React.memo(function _CodePenButton(props: {
+const CodePenButton = React.memo(function CodePenButtonRaw(props: {
     text: Promise<string>;
     title: string;
 }) {