From 488d66ac0e4a33ae238523218ba21999931ea4d3 Mon Sep 17 00:00:00 2001
From: Joe Tannenbaum <joe.tannenbaum@laravel.com>
Date: Fri, 11 Oct 2024 15:07:30 -0400
Subject: [PATCH] load deferred props on every page swap

---
 packages/core/src/eventHandler.ts             |  5 ++--
 packages/core/src/page.ts                     |  3 +++
 packages/core/src/router.ts                   |  2 +-
 packages/core/src/types.ts                    |  2 ++
 .../test-app/Pages/DeferredProps/Page1.vue    |  1 +
 tests/deferred-props.spec.ts                  | 26 +++++++++++++++++++
 6 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/eventHandler.ts b/packages/core/src/eventHandler.ts
index 780a63e41..1eea3b978 100644
--- a/packages/core/src/eventHandler.ts
+++ b/packages/core/src/eventHandler.ts
@@ -3,10 +3,9 @@ import { fireNavigateEvent } from './events'
 import { history } from './history'
 import { page as currentPage } from './page'
 import { Scroll } from './scroll'
-import { GlobalEvent, GlobalEventNames, GlobalEventResult } from './types'
+import { GlobalEvent, GlobalEventNames, GlobalEventResult, InternalEvent } from './types'
 import { hrefToUrl } from './url'
 
-type InternalEvent = 'missingHistoryItem'
 class EventHandler {
   protected internalListeners: {
     event: InternalEvent
@@ -54,7 +53,7 @@ class EventHandler {
     this.fireInternalEvent('missingHistoryItem')
   }
 
-  protected fireInternalEvent(event: InternalEvent): void {
+  public fireInternalEvent(event: InternalEvent): void {
     this.internalListeners.filter((listener) => listener.event === event).forEach((listener) => listener.listener())
   }
 
diff --git a/packages/core/src/page.ts b/packages/core/src/page.ts
index bce73f3d5..aa110aa3b 100644
--- a/packages/core/src/page.ts
+++ b/packages/core/src/page.ts
@@ -1,3 +1,4 @@
+import { eventHandler } from './eventHandler'
 import { fireNavigateEvent } from './events'
 import { history } from './history'
 import { Scroll } from './scroll'
@@ -82,6 +83,8 @@ class CurrentPage {
           Scroll.reset(page)
         }
 
+        eventHandler.fireInternalEvent('loadDeferredProps')
+
         if (!replace) {
           fireNavigateEvent(page)
         }
diff --git a/packages/core/src/router.ts b/packages/core/src/router.ts
index 75aa2b118..991a32820 100644
--- a/packages/core/src/router.ts
+++ b/packages/core/src/router.ts
@@ -59,7 +59,7 @@ export class Router {
       }
     })
 
-    eventHandler.onGlobalEvent('navigate', () => {
+    eventHandler.on('loadDeferredProps', () => {
       this.loadDeferredProps()
     })
   }
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 07ceac63e..8bec60465 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -196,6 +196,8 @@ export type GlobalEventCallback<TEventName extends GlobalEventNames> = (
   ...params: GlobalEventParameters<TEventName>
 ) => GlobalEventResult<TEventName>
 
+export type InternalEvent = 'missingHistoryItem' | 'loadDeferredProps'
+
 export type VisitCallbacks = {
   onCancelToken: { ({ cancel }: { cancel: VoidFunction }): void }
   onBefore: GlobalEventCallback<'before'>
diff --git a/packages/vue3/test-app/Pages/DeferredProps/Page1.vue b/packages/vue3/test-app/Pages/DeferredProps/Page1.vue
index b9934b870..78b4b0dcb 100644
--- a/packages/vue3/test-app/Pages/DeferredProps/Page1.vue
+++ b/packages/vue3/test-app/Pages/DeferredProps/Page1.vue
@@ -22,5 +22,6 @@ defineProps<{
     {{ bar }}
   </Deferred>
 
+  <Link href="/deferred-props/page-1">Page 1</Link>
   <Link href="/deferred-props/page-2">Page 2</Link>
 </template>
diff --git a/tests/deferred-props.spec.ts b/tests/deferred-props.spec.ts
index f8691e982..2b41f2f79 100644
--- a/tests/deferred-props.spec.ts
+++ b/tests/deferred-props.spec.ts
@@ -62,3 +62,29 @@ test('we are not caching deferred props after reload', async ({ page }) => {
   await expect(page.getByText('foo value')).toBeVisible()
   await expect(page.getByText('bar value')).toBeVisible()
 })
+
+test('props will re-defer if a link is clicked to go to the same page again', async ({ page }) => {
+  await page.goto('/deferred-props/page-1')
+
+  await expect(page.getByText('Loading foo...')).toBeVisible()
+  await expect(page.getByText('Loading bar...')).toBeVisible()
+
+  await page.waitForResponse(page.url())
+
+  await expect(page.getByText('Loading foo...')).not.toBeVisible()
+  await expect(page.getByText('Loading bar...')).not.toBeVisible()
+  await expect(page.getByText('foo value')).toBeVisible()
+  await expect(page.getByText('bar value')).toBeVisible()
+
+  await clickAndWaitForResponse(page, 'Page 1', '/deferred-props/page-1')
+
+  await expect(page.getByText('Loading foo...')).toBeVisible()
+  await expect(page.getByText('Loading bar...')).toBeVisible()
+
+  await page.waitForResponse(page.url())
+
+  await expect(page.getByText('Loading foo...')).not.toBeVisible()
+  await expect(page.getByText('Loading bar...')).not.toBeVisible()
+  await expect(page.getByText('foo value')).toBeVisible()
+  await expect(page.getByText('bar value')).toBeVisible()
+})