Merge pull request #214 from skryukov/docs/fixes-from-upstream

bknoles · web-flow · commit aad1e9d462b1 · 2025-04-12T15:54:02.000-05:00
Docs: fixes from upstream
diff --git a/docs/guide/error-handling.md b/docs/guide/error-handling.md
@@ -23,12 +23,12 @@ class ApplicationController < ActionController::Base
 
     status = ActionDispatch::ExceptionWrapper.new(nil, exception).status_code
 
-    render inertia: 'Error', props: { status: }, status:
+    render inertia: 'ErrorPage', props: { status: }, status:
   end
 end
 ```
 
-You may have noticed we're returning an `Error` page component in the example above. You'll need to actually create this component, which will serve as the generic error page for your application. Here's an example error component you can use as a starting point.
+You may have noticed we're returning an `ErrorPage` page component in the example above. You'll need to actually create this component, which will serve as the generic error page for your application. Here's an example error component you can use as a starting point.
 
 :::tabs key:frameworks
 == Vue
diff --git a/docs/guide/manual-visits.md b/docs/guide/manual-visits.md
@@ -710,23 +710,23 @@ The `only` option allows you to request a subset of the props (data) from the se
 ```js
 import { router } from '@inertiajs/vue3'
 
-router.visit('/users', { data: { search: 'John' }, only: ['users'] })
+router.get('/users', { search: 'John' }, { only: ['users'] })
 ```
 
 == React
 
 ```js
 import { router } from '@inertiajs/react'
 
-router.visit('/users', { data: { search: 'John' }, only: ['users'] })
+router.get('/users', { search: 'John' }, { only: ['users'] })
 ```
 
 == Svelte 4|Svelte 5
 
 ```js
 import { router } from '@inertiajs/svelte'
 
-router.visit('/users', { data: { search: 'John' }, only: ['users'] })
+router.get('/users', { search: 'John' }, { only: ['users'] })
 ```
 
 :::
diff --git a/docs/guide/responses.md b/docs/guide/responses.md
@@ -235,4 +235,4 @@ You can find the default templates in the gem's source code:
 
 To enable client-side history navigation, all Inertia server responses are stored in the browser's history state. However, keep in mind that some browsers impose a size limit on how much data can be saved within the history state.
 
-For example, [Firefox](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) has a size limit of 640k characters and throws a `NS_ERROR_ILLEGAL_VALUE` error if you exceed this limit. Typically, this is much more data than you'll ever practically need when building applications.
+For example, [Firefox](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) has a size limit of 16 MiB and throws a `NS_ERROR_ILLEGAL_VALUE` error if you exceed this limit. Typically, this is much more data than you'll ever practically need when building applications.
diff --git a/docs/guide/scroll-management.md b/docs/guide/scroll-management.md
@@ -149,7 +149,7 @@ If your app doesn't use document body scrolling, but instead has scrollable elem
 In these situations, you must tell Inertia which scrollable elements to manage by adding the `scroll-region` attribute to the element.
 
 ```html
-<div class="overflow-y-auto" scroll-region>
+<div class="overflow-y-auto" scroll-region="">
   <!-- Your page content -->
 </div>
 ```
diff --git a/docs/guide/the-protocol.md b/docs/guide/the-protocol.md
@@ -26,7 +26,7 @@ Content-Type: text/html; charset=utf-8
 </head>
 <body>
 
-<div id="app" data-page='{"component":"Event","props":{"event":{"id":80,"title":"Birthday party","start_date":"2019-06-02","description":"Come out and celebrate Jonathan&apos;s 36th birthday party!"}},"url":"/events/80","version":"c32b8e4965f418ad16eaebba1d4e960f"}'></div>
+<div id="app" data-page='{"component":"Event","props":{"errors":{},"event":{"id":80,"title":"Birthday party","start_date":"2019-06-02","description":"Come out and celebrate Jonathan&apos;s 36th birthday party!"}},"url":"/events/80","version":"c32b8e4965f418ad16eaebba1d4e960f"}'></div>
 
 </body>
 </html>
@@ -58,6 +58,7 @@ X-Inertia: true
 {
   "component": "Event",
   "props": {
+    "errors": {},
     "event": {
       "id": 80,
       "title": "Birthday party",
@@ -77,7 +78,7 @@ X-Inertia: true
 Inertia shares data between the server and client via a page object. This object includes the necessary information required to render the page component, update the browser's history state, and track the site's asset version. The page object includes the following four properties:
 
 1. `component`: The name of the JavaScript page component.
-2. `props`: The page props (data).
+2. `props`: The page props. Contains all of the page data along with an `errors` object (defaults to `{}` if there are no errors).
 3. `url`: The page URL.
 4. `version`: The current asset version.
 5. `encryptHistory`: Whether or not to encrypt the current page's history state.
@@ -116,11 +117,13 @@ X-Inertia-Location: http://example.com/events/80
 
 When making Inertia requests, the partial reload option allows you to request a subset of the props (data) from the server on subsequent visits to the same page component. This can be a helpful performance optimization if it's acceptable that some page data becomes stale.
 
-When a partial reload request is made, Inertia includes two additional headers with the request: `X-Inertia-Partial-Data` and `X-Inertia-Partial-Component`.
+When a partial reload request is made, Inertia includes the `X-Inertia-Partial-Component` header and may include `X-Inertia-Partial-Data` and/or `X-Inertia-Partial-Except` headers with the request.
 
 The `X-Inertia-Partial-Data` header is a comma separated list of the desired props (data) keys that should be returned.
 
-The `X-Inertia-Partial-Component` header includes the name of the component that is being partially reloaded. This is necessary, since partial reloads only work for requests made to the same page component. If the final destination is different for some reason (eg. the user was logged out and is now on the login page), then no partial reloading will occur.
+The `X-Inertia-Partial-Except` header is a comma separated list of the props (data) keys that should not be returned. When only the `X-Inertia-Partial-Except` header is included, all props (data) except those listed will be sent. If both `X-Inertia-Partial-Data` and `X-Inertia-Partial-Except` headers are included, the `X-Inertia-Partial-Except` header will take precedence.
+
+The `X-Inertia-Partial-Component` header includes the name of the component that is being partially reloaded. This is necessary, since partial reloads only work for requests made to the same page component. If the final destination is different for some reason (e.g. the user was logged out and is now on the login page), then no partial reloading will occur.
 
 ```http
 REQUEST
@@ -141,7 +144,8 @@ Content-Type: application/json
   "props": {
     "auth": {...},       // NOT included
     "categories": [...], // NOT included
-    "events": [...]      // included
+    "events": [...],     // included
+    "errors": {}         // always included
   },
   "url": "/events/80",
   "version": "c32b8e4965f418ad16eaebba1d4e960f"
diff --git a/docs/guide/validation.md b/docs/guide/validation.md
@@ -107,17 +107,17 @@ export default function Edit() {
 
   return (
     <form onSubmit={handleSubmit}>
-      <label for="first_name">First name:</label>
+      <label htmlFor="first_name">First name:</label>
       <input
         id="first_name"
         value={values.first_name}
         onChange={handleChange}
       />
       {errors.first_name && <div>{errors.first_name}</div>}
-      <label for="last_name">Last name:</label>
+      <label htmlFor="last_name">Last name:</label>
       <input id="last_name" value={values.last_name} onChange={handleChange} />
       {errors.last_name && <div>{errors.last_name}</div>}
-      <label for="email">Email:</label>
+      <label htmlFor="email">Email:</label>
       <input id="email" value={values.email} onChange={handleChange} />
       {errors.email && <div>{errors.email}</div>}
       <button type="submit">Submit</button>

Original file line number	Diff line number	Diff line change
`@@ -235,4 +235,4 @@ You can find the default templates in the gem's source code:`
`235`	`235`
`236`	`236`	`To enable client-side history navigation, all Inertia server responses are stored in the browser's history state. However, keep in mind that some browsers impose a size limit on how much data can be saved within the history state.`
`237`	`237`
`238`		-For example, [Firefox](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) has a size limit of 640k characters and throws a `NS_ERROR_ILLEGAL_VALUE` error if you exceed this limit. Typically, this is much more data than you'll ever practically need when building applications.
	`238`	+For example, [Firefox](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) has a size limit of 16 MiB and throws a `NS_ERROR_ILLEGAL_VALUE` error if you exceed this limit. Typically, this is much more data than you'll ever practically need when building applications.