load deferred props on every page swap (#2024)

Author: joetannenbaum

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())
   }
 

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)
         }

packages/core/src/router.ts

@@ -59,7 +59,7 @@ export class Router {
       }
     })
 
-    eventHandler.onGlobalEvent('navigate', () => {
+    eventHandler.on('loadDeferredProps', () => {
       this.loadDeferredProps()
     })
   }

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'>

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>

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()
+})