chore: merge main (#4283)

Author: schiller-manuel

.gitignore

@@ -74,4 +74,6 @@ vite.config.ts.timestamp_*
 # Handling VSCode settings
 /.vscode/
 !/examples/react/**/.vscode/settings.json
-**/.tanstack-start/build
+**/.tanstack-start/build
+
+**/llms

docs/router/framework/react/api/router/RouteOptionsType.md

@@ -124,15 +124,15 @@ type beforeLoad = (
 ```tsx
 type loader = (
   opts: RouteMatch & {
-    search: TFullSearchSchema
     abortController: AbortController
-    preload: boolean
-    params: TAllParams
+    cause: 'enter' | 'stay'
     context: TAllContext
+    deps: TLoaderDeps
     location: ParsedLocation
+    params: TAllParams
+    preload: boolean
+    parentMatchPromise: Promise<MakeRouteMatchFromRoute<TParentRoute>>
     navigate: NavigateFn<AnyRoute> // @deprecated
-    buildLocation: BuildLocationFn<AnyRoute>
-    cause: 'enter' | 'stay'
   },
 ) => Promise<TLoaderData> | TLoaderData | void
 ```
@@ -142,6 +142,7 @@ type loader = (
 - This async function is called when a route is matched and passed the route's match object. If an error is thrown here, the route will be put into an error state and the error will be thrown during render. If thrown during a navigation, the navigation will be canceled and the error will be passed to the `onError` function. If thrown during a preload event, the error will be logged to the console and the preload will fail.
 - If this function returns a promise, the route will be put into a pending state and cause rendering to suspend until the promise resolves. If this route's pendingMs threshold is reached, the `pendingComponent` will be shown until it resolves. If the promise rejects, the route will be put into an error state and the error will be thrown during render.
 - If this function returns a `TLoaderData` object, that object will be stored on the route match until the route match is no longer active. It can be accessed using the `useLoaderData` hook in any component that is a child of the route match before another `<Outlet />` is rendered.
+- Deps must be returned by your `loaderDeps` function in order to appear.
 
 > 🚧 `opts.navigate` has been deprecated and will be removed in the next major release. Use `throw redirect({ to: '/somewhere' })` instead. Read more about the `redirect` function [here](../redirectFunction.md).
 
@@ -292,7 +293,7 @@ interface RemountDepsOptions<
 - The return value needs to be JSON serializable.
 - By default, a route component will not be remounted if it stays active after a navigation.
 
-Example:  
+Example:
 If you want to configure to remount a route component upon `params` change, use:
 
 ```tsx

docs/router/framework/react/guide/code-splitting.md

@@ -217,7 +217,7 @@ If you are using code-based routing, you can still code-split your routes using
 Create a lazy route using the `createLazyRoute` function.
 
 ```tsx
-// src/posts.tsx
+// src/posts.lazy.tsx
 export const Route = createLazyRoute('/posts')({
   component: MyComponent,
 })

docs/router/framework/react/guide/scroll-restoration.md

@@ -17,6 +17,19 @@ const router = createRouter({
 })
 ```
 
+For complex selectors that cannot be simply resolved using `document.querySelector(selector)`, you can pass functions that return HTML elements to `routerOptions.scrollToTopSelectors`:
+
+```tsx
+const selector = () =>
+  document
+    .querySelector('#shadowRootParent')
+    ?.shadowRoot?.querySelector('#main-scrollable-area')
+
+const router = createRouter({
+  scrollToTopSelectors: [selector],
+})
+```
+
 These selectors are handled **in addition to `window`** which cannot be disabled currently.
 
 ## Scroll Restoration

docs/router/framework/react/installation.md

@@ -33,3 +33,19 @@ TypeScript is _optional_, but **HIGHLY** recommended! If you are using it, pleas
 
 > [!IMPORTANT]
 > We aim to support the last five minor versions of TypeScript. If you are using an older version, you may run into issues. Please upgrade to the latest version of TypeScript to ensure compatibility. We may drop support for older versions of TypeScript, outside of the range mentioned above, without warning in a minor or patch release.
+
+### Vibe Coding Support
+
+All of our documentation for TanStack React Router is integrated into the NPM module and can be easily installed as Vibe coding rules. You can integrate Vibe coding rules into the editor of your choice using [vibe-rules](https://www.npmjs.com/package/vibe-rules).
+
+```bash
+pnpm add -g vibe-rules
+```
+
+Then run `vibe-rules` with the editor of your choice. Here is an example for Cursor:
+
+```bash
+vibe-rules install cursor
+```
+
+But you can also use `windsurf`, `claude-code`, etc. Check the [vibe-rules](https://www.npmjs.com/package/vibe-rules) documentation for more information.

docs/router/framework/react/routing/file-based-routing.md

@@ -47,6 +47,9 @@ See the example below:
 | ┄ ʦ `route-b.tsx`       | `/route-b`                | `<Root><PathlessLayout><RouteB>`  |
 | 📂 `files`              |                           |                                   |
 | ┄ ʦ `$.tsx`             | `/files/$`                | `<Root><Files>`                   |
+| 📂 `account`            |                           |                                   |
+| ┄ ʦ `route.tsx`         | `/account`                | `<Root><Account>`                 |
+| ┄ ʦ `overview.tsx`      | `/account/overview`       | `<Root><Account><Overview>`       |
 
 ## Flat Routes
 
@@ -72,6 +75,8 @@ See the example below:
 | ʦ `_pathlessLayout.route-a.tsx` | `/route-a`                | `<Root><PathlessLayout><RouteA>`  |
 | ʦ `_pathlessLayout.route-b.tsx` | `/route-b`                | `<Root><PathlessLayout><RouteB>`  |
 | ʦ `files.$.tsx`                 | `/files/$`                | `<Root><Files>`                   |
+| ʦ `account.tsx`                 | `/account`                | `<Root><Account>`                 |
+| ʦ `account.overview.tsx`        | `/account/overview`       | `<Root><Account><Overview>`       |
 
 ## Mixed Flat and Directory Routes
 
@@ -92,6 +97,8 @@ See the example below:
 | ʦ `settings.tsx`               | `/settings`               | `<Root><Settings>`                |
 | ʦ `settings.profile.tsx`       | `/settings/profile`       | `<Root><Settings><Profile>`       |
 | ʦ `settings.notifications.tsx` | `/settings/notifications` | `<Root><Settings><Notifications>` |
+| ʦ `account.tsx`                | `/account`                | `<Root><Account>`                 |
+| ʦ `account.overview.tsx`       | `/account/overview`       | `<Root><Account><Overview>`       |
 
 Both flat and directory routes can be mixed together to create a route tree that uses the best of both worlds where it makes sense.
 

docs/start/config.json

@@ -80,6 +80,10 @@
             {
               "label": "Path Aliases",
               "to": "framework/react/path-aliases"
+            },
+            {
+              "label": "Migrate from Next.js",
+              "to": "framework/react/migrate-from-next-js"
             }
           ]
         },