Bump template and adjust docs on typegen (#12237)

* Bump template to v5 and update typegen

* Update type safety docs

Author: brookslybrand

docs/explanation/type-safety.md

@@ -4,6 +4,10 @@ title: Type safety
 
 # Type safety
 
+<docs-info>
+If you haven't done so already, check out our guide for <a href="../framework/how-to/setting-up-type-safety">setting up type safety</a> in a new project.
+</docs-info>
+
 React Router generates types for each route in your app that you can use to get type safety for each route module export.
 
 For example, let's say you have a `products/:id` route configured:
@@ -37,8 +41,6 @@ export default function Component({
 }
 ```
 
-If you haven't done so already, check out our guide for [setting up type safety][setting-up-type-safety] in a new project.
-
 ## `typegen` command
 
 You can manually generate types with the `typegen` command:

docs/framework/how-to/setting-up-type-safety.md

@@ -2,10 +2,12 @@
 title: Setting up type safety
 ---
 
-To know more about how type safety works in React Router, check out our [dedicated explanation](../../explanation/type-safety).
-
 # Setting up type safety
 
+<docs-info>
+To learn more about how type safety works in React Router, check out our <a href="../../explanation/type-safety">dedicated explanation</a>.
+</docs-info>
+
 React Router generates types into a `.react-router/` directory at the root of your app.
 This directory is fully managed by React Router and is derived from your route config (`app/routes.ts` by default), so it should be gitignore'd.
 
@@ -93,3 +95,27 @@ For monorepos, you can create this file in the repo root and use the [`cwd` opti
 </docs-info>
 
 Now, VSCode will automatically run the `typegen:watch` script in a dedicated terminal anytime you open your project.
+
+## Automatic typegen in your `dev` script (optional)
+
+You can also adjust your `dev` script to automatically run type generation when you start your development server.
+
+👉 **Install `npm-run-all` (or a similar tool to run multiple scripts in parallel)**
+
+```shellscript nonumber
+npm i -D npm-run-all
+```
+
+👉 **Add `dev:typegen` to your `dev` script**
+
+```json
+{
+  "scripts": {
+    "dev": "run-p dev:*",
+    "dev:react-router": "react-router dev",
+    "dev:typegen": "react-router typegen --watch"
+  }
+}
+```
+
+Now when you run `npm run dev`, it will automatically run type generation in watch mode.

templates/basic/.vscode/settings.json

@@ -0,0 +1,23 @@
+{
+  "version": "2.0.0",
+  // This task is used to autogenerate type for React Router route modules
+  // Feel free to remove it and use run `npm run typegen:watch` manually
+  "tasks": [
+    {
+      "label": "React Router: Typegen",
+      "type": "shell",
+      "command": "npm run typegen:watch",
+      "problemMatcher": [],
+      "isBackground": true,
+      "presentation": {
+        "echo": true,
+        "reveal": "always",
+        "focus": false,
+        "panel": "dedicated"
+      },
+      "runOptions": {
+        "runOn": "folderOpen"
+      }
+    }
+  ]
+}

templates/basic/.vscode/tasks.json

@@ -6,18 +6,19 @@
     "dev": "react-router dev",
     "build": "react-router build",
     "start": "react-router-serve ./build/server/index.js",
-    "typecheck": "react-router typegen && tsc"
+    "typecheck": "react-router typegen && tsc",
+    "typegen:watch": "react-router typegen --watch"
   },
   "dependencies": {
-    "@react-router/node": "7.0.0-pre.4",
-    "@react-router/serve": "7.0.0-pre.4",
+    "@react-router/node": "7.0.0-pre.5",
+    "@react-router/serve": "7.0.0-pre.5",
     "isbot": "^5.1.17",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router": "7.0.0-pre.4"
+    "react-router": "7.0.0-pre.5"
   },
   "devDependencies": {
-    "@react-router/dev": "7.0.0-pre.4",
+    "@react-router/dev": "7.0.0-pre.5",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.20",

templates/basic/package.json

@@ -27,7 +27,6 @@
       "~/*": ["./app/*"]
     },
     "noEmit": true,
-    "rootDirs": [".", "./.react-router/types"],
-    "plugins": [{ "name": "@react-router/dev" }]
+    "rootDirs": [".", "./.react-router/types"]
   }
 }