deploy: f33f804

handbook/drive.html

@@ -297,6 +297,8 @@ <h2 id="preload-links-into-the-cache"><a class="anchor" href="#preload-links-int
 </ul>
 <p>It also dovetails nicely with pages that leverage <a href="/reference/frames#eager-loaded-frame">Eager-Loading Frames</a> or <a href="/reference/frames#lazy-loaded-frame">Lazy-Loading Frames</a>. As you can preload the structure of the page and show the user a meaningful loading state while the interesting content loads.
 <br><br></p>
+<p>Note that preloaded <code>&lt;a&gt;</code> elements will dispatch <a href="/reference/events">turbo:before-fetch-request</a> and <a href="/reference/events">turbo:before-fetch-response</a> events. To distinguish a preloading <code>turbo:before-fetch-request</code> initiated event from an event initiated by another mechanism, check whether the request’s <code>X-Sec-Purpose</code> header (read from the <code>event.detail.fetchOptions.headers[&quot;X-Sec-Purpose&quot;]</code> property) is set to <code>&quot;prefetch&quot;</code>:</p>
+<pre class="language-js"><code class="language-js"><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"turbo:before-fetch-request"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br>  <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>fetchOptions<span class="token punctuation">.</span>headers<span class="token punctuation">[</span><span class="token string">"X-Sec-Purpose"</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">"prefetch"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br>    <span class="token comment">// do additional preloading setup…</span><br>  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span><br>    <span class="token comment">// do something else…</span><br>  <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre>
 <p><a class="button" href="/handbook/page_refreshes">Next: Smooth page refreshes with morphing</a></p></section>
 
   <footer class="docs__footer grid__item grid__item--start-4 grid__item--span-8">

index.html

@@ -141,7 +141,7 @@ <h1 class="landing-intro__text grid__item grid__item--start-2 grid__item--span-1
 </div>
 
 <p class="landing-version">
-  <span>Current version: <a href="https://github.com/hotwired/turbo/releases/tag/v8.0.2">8.0.2</a> &mdash; released Feb 09, 2024</span>
+  <span>Current version: <a href="https://github.com/hotwired/turbo/releases/tag/v8.0.3">8.0.3</a> &mdash; released Feb 21, 2024</span>
 </p>
 
 <section class="landing-summary">

reference/events.html

@@ -570,7 +570,7 @@ <h2 id="http-requests"><a class="anchor" href="#http-requests">﹟</a> HTTP Requ
 <li>the <code>&lt;html&gt;</code> element during a page-wide Turbo Visit</li>
 </ul>
 <h3 id="turbo%3Abefore-fetch-request"><a class="anchor" href="#turbo%3Abefore-fetch-request">﹟</a> <code>turbo:before-fetch-request</code></h3>
-<p>Fires before Turbo issues a network request to fetch the page. Access the requested location with <code>event.detail.url</code> and the fetch options object with <code>event.detail.fetchOptions</code>. This event fires on the respective element (<code>&lt;turbo-frame&gt;</code> or <code>&lt;form&gt;</code> element) which triggers it and can be accessed with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/target">event.target</a> property. Request can be canceled and continued with <code>event.detail.resume</code> (see <a href="/handbook/drive#pausing-requests">Pausing Requests</a>).</p>
+<p>Fires before Turbo issues a network request (to fetch a page, submit a form, preload a link, etc.). Access the requested location with <code>event.detail.url</code> and the fetch options object with <code>event.detail.fetchOptions</code>. This event fires on the respective element (<code>&lt;turbo-frame&gt;</code> or <code>&lt;form&gt;</code> element) which triggers it and can be accessed with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/target">event.target</a> property. Request can be canceled and continued with <code>event.detail.resume</code> (see <a href="/handbook/drive#pausing-requests">Pausing Requests</a>).</p>
 <table>
 <thead>
 <tr>