Allow prefetch to happen on custom event (#52574)

timacdonald · web-flow · commit 99ae397bb93b · 2024-08-26T07:34:55.000-05:00
diff --git a/src/Illuminate/Foundation/Vite.php b/src/Illuminate/Foundation/Vite.php
@@ -111,6 +111,13 @@ class Vite implements Htmlable
      */
     protected $prefetchConcurrently = 3;
 
+    /**
+     * The name of the event that should trigger prefetching. The event must be dispatched on the `window`.
+     *
+     * @var string
+     */
+    protected $prefetchEvent = 'load';
+
     /**
      * Get the preloaded assets.
      *
@@ -285,10 +292,13 @@ public function usePreloadTagAttributes($attributes)
      * Eagerly prefetch assets.
      *
      * @param  int|null  $concurrency
+     * @param  string  $event
      * @return $this
      */
-    public function prefetch($concurrency = null)
+    public function prefetch($concurrency = null, $event = 'load')
     {
+        $this->prefetchEvent = $event;
+
         return $concurrency === null
             ? $this->usePrefetchStrategy('aggressive')
             : $this->usePrefetchStrategy('waterfall', ['concurrency' => $concurrency]);
@@ -486,7 +496,7 @@ public function __invoke($entrypoints, $buildDirectory = null)
                 'waterfall' => new HtmlString($base.<<<HTML
 
                     <script{$this->nonceAttribute()}>
-                         window.addEventListener('load', () => window.setTimeout(() => {
+                         window.addEventListener('{$this->prefetchEvent}', () => window.setTimeout(() => {
                             const makeLink = (asset) => {
                                 const link = document.createElement('link')
 
@@ -529,7 +539,7 @@ public function __invoke($entrypoints, $buildDirectory = null)
                 'aggressive' => new HtmlString($base.<<<HTML
 
                     <script{$this->nonceAttribute()}>
-                         window.addEventListener('load', () => window.setTimeout(() => {
+                         window.addEventListener('{$this->prefetchEvent}', () => window.setTimeout(() => {
                             const makeLink = (asset) => {
                                 const link = document.createElement('link')
 
diff --git a/tests/Foundation/FoundationViteTest.php b/tests/Foundation/FoundationViteTest.php
@@ -1676,6 +1676,23 @@ public function testSupportCspNonceInPrefetchScript()
         $this->cleanViteManifest($buildDir);
     }
 
+    public function testItCanConfigureThePrefetchTriggerEvent()
+    {
+        $manifest = json_decode(file_get_contents(__DIR__.'/fixtures/prefetching-manifest.json'));
+        $buildDir = Str::random();
+        $this->makeViteManifest($manifest, $buildDir);
+        app()->usePublicPath(__DIR__);
+
+        $html = (string) tap(ViteFacade::withEntryPoints(['resources/js/app.js']))
+            ->useBuildDirectory($buildDir)
+            ->prefetch(event: 'vite:prefetch')
+            ->toHtml();
+        $this->assertStringNotContainsString("window.addEventListener('load', ", $html);
+        $this->assertStringContainsString("window.addEventListener('vite:prefetch', ", $html);
+
+        $this->cleanViteManifest($buildDir);
+    }
+
     protected function cleanViteManifest($path = 'build')
     {
         if (file_exists(public_path("{$path}/manifest.json"))) {
