Modernize React TypeScript template

.gitignore

@@ -15,6 +15,7 @@ dist-ssr
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
+!.vscode/settings.json
 .idea
 .DS_Store
 *.suo

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+set -eu
+
+lint-staged

.husky/pre-push

@@ -0,0 +1,6 @@
+#!/bin/sh
+set -eu
+
+pnpm run lint
+pnpm run stylelint
+pnpm run format

.npmrc

@@ -0,0 +1,3 @@
+save-exact=true
+save-prefix=""
+legacy-peer-deps=true

.nvmrc

@@ -0,0 +1 @@
+24.14.0

.prettierignore

@@ -0,0 +1,7 @@
+package.json
+package-lock.json
+pnpm-lock.yaml
+pnpm-workspace.yaml
+yarn-lock.json
+phaser.js
+*.css.d.ts

.prettierrc

@@ -0,0 +1 @@
+{}

.stylelintignore

@@ -0,0 +1,2 @@
+dist
+dist-ssr

.stylelintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard"
+}

eslint.config.ts

@@ -0,0 +1,114 @@
+import js from "@eslint/js";
+import { defineConfig } from "eslint/config";
+import importPlugin from "eslint-plugin-import";
+import pluginReact from "eslint-plugin-react";
+import reactCompiler from "eslint-plugin-react-compiler";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import simpleImportSort from "eslint-plugin-simple-import-sort";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+
+export default defineConfig([
+  tseslint.configs.strictTypeChecked,
+  tseslint.configs.stylisticTypeChecked,
+  {
+    ...pluginReact.configs.flat.recommended,
+    settings: { react: { version: "19" } },
+  },
+  pluginReact.configs.flat["jsx-runtime"],
+  reactCompiler.configs.recommended,
+  reactHooks.configs.flat["recommended-latest"],
+  reactRefresh.configs.recommended,
+  {
+    ignores: ["dist"],
+  },
+  {
+    files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+    plugins: {
+      js,
+      import: importPlugin,
+      "simple-import-sort": simpleImportSort,
+    },
+    extends: ["js/recommended"],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.es2020,
+        Phaser: "readonly",
+      },
+      parserOptions: {
+        projectService: true,
+      },
+    },
+    rules: {
+      "no-undef": "off", // Defer to TypeScript
+      "no-unused-vars": "off", // Defer to @typescript-eslint/no-unused-vars
+
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          args: "all",
+          argsIgnorePattern: "^_",
+          caughtErrors: "all",
+          caughtErrorsIgnorePattern: "^_",
+          destructuredArrayIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          ignoreRestSiblings: true,
+        },
+      ],
+      "@typescript-eslint/restrict-template-expressions": [
+        "error",
+        {
+          allowNumber: true,
+        },
+      ],
+
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+
+      "simple-import-sort/imports": [
+        "error",
+        {
+          groups: [
+            // Type imports.
+            ["\\w\\u0000$"],
+            // Side effect imports.
+            ["^\\u0000"],
+            // Node.js builtins prefixed with `node:`.
+            ["^node:"],
+            // Packages.
+            // Things that start with a letter (or digit or underscore), or `@` followed by a letter.
+            ["^@?\\w"],
+            // Absolute imports and other imports such as Vue-style `@/foo`.
+            // Anything not matched in another group.
+            ["^"],
+            // Things that start with `#` followed by a letter.
+            ["^#\\w"],
+            // Relative imports.
+            // Anything that starts with a dot.
+            ["^\\."],
+          ],
+        },
+      ],
+      "simple-import-sort/exports": "error",
+      "import/first": "error",
+      "import/newline-after-import": "error",
+      "import/no-duplicates": "error",
+    },
+  },
+  {
+    files: ["**/scripts/*.{js,mjs,cjs,ts,mts,cts}"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.es2024,
+      },
+      parserOptions: {
+        projectService: true,
+      },
+    },
+  },
+]);

index.html

@@ -1,16 +1,19 @@
 <!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/favicon.png" />
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="/style.css">
+    <meta name="robots" content="noindex" />
     <title>Phaser React Template</title>
-</head>
+    <link rel="stylesheet" href="/style.css" />
+    <meta name="description" content="" />
 
-<body>
+    <link rel="icon" type="image/png" href="/favicon.png" sizes="16x16" />
+    <link rel="shortcut icon" href="/favicon.png" />
+  </head>
+
+  <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
-
-</body>
+  </body>
 </html>