load deferred props on every page swap

inertiajs · Oct 11, 2024 · 488d66a · 488d66a
1 parent 88a765b
commit 488d66a
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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()
+})
-Original file line number
+Diff line change
@@ Expand Up / @@ -59,7 +59,7 @@ export class Router { @@
           }
         })
-        eventHandler.onGlobalEvent('navigate', () => {
+        eventHandler.on('loadDeferredProps', () => {
           this.loadDeferredProps()
         })
       }
@@ Expand Down @@