Clone page props before writing it to the browser's history (#2662)

* wip

* wip

* Update history.ts

* Update history.ts

* Update history.ts

Author: pascalbaljet

packages/core/src/history.ts

@@ -1,4 +1,4 @@
-import { isEqual } from 'lodash-es'
+import { cloneDeep, isEqual } from 'lodash-es'
 import { decryptHistory, encryptHistory, historySessionStorageKeys } from './encryption'
 import { page as currentPage } from './page'
 import Queue from './queue'
@@ -64,9 +64,25 @@ class History {
     })
   }
 
+  protected clonePageProps(page: Page): Page {
+    try {
+      structuredClone(page.props)
+      return page
+    } catch {
+      // Props contain non-serializable data (e.g., Proxies, functions).
+      // Clone them to ensure they can be safely stored in browser history.
+      return {
+        ...page,
+        props: cloneDeep(page.props),
+      }
+    }
+  }
+
   protected getPageData(page: Page): Promise<Page | ArrayBuffer> {
+    const pageWithClonedProps = this.clonePageProps(page)
+
     return new Promise((resolve) => {
-      return page.encryptHistory ? encryptHistory(page).then(resolve) : resolve(page)
+      return page.encryptHistory ? encryptHistory(pageWithClonedProps).then(resolve) : resolve(pageWithClonedProps)
     })
   }
 

packages/vue3/test-app/Pages/Visits/Proxy.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { Deferred, Link, router } from '@inertiajs/vue3'
+import { toRef } from 'vue'
+
+const props = defineProps<{
+  foo: number
+  sites?: Array<{
+    id: number
+    latestDeployment: {
+      id: number
+      statuses: string[]
+    }
+  }>
+}>()
+
+const sites = toRef(props, 'sites')
+
+const updateFirstSite = () => {
+  if (sites.value && sites.value.length > 0) {
+    const incomingPartialData = { statuses: [`frontend-${Math.floor(Math.random() * 1_000_000)}`] }
+    sites.value[0].latestDeployment = { ...sites.value[0].latestDeployment, ...incomingPartialData }
+  }
+}
+
+function submit() {
+  router.post(
+    '/visits/proxy',
+    {},
+    {
+      preserveScroll: true,
+      preserveState: true,
+      only: ['foo'],
+    },
+  )
+}
+</script>
+
+<template>
+  <p id="foo">Foo: {{ props.foo }}</p>
+
+  <Deferred data="sites">
+    <template #fallback>Loading...</template>
+
+    <div v-for="site in sites" :key="site.id">
+      <p>Site ID: {{ site.id }}</p>
+      <p>Latest Deployment ID: {{ site.latestDeployment.id }}</p>
+      <p :id="`status-${site.id}`">Statuses: {{ site.latestDeployment.statuses.join(', ') }}</p>
+    </div>
+  </Deferred>
+
+  <button @click="updateFirstSite">Update First Site Ref</button>
+  <button @click="submit">Reload</button>
+  <Link href="/">Go Home</Link>
+</template>

tests/app/server.js

@@ -166,6 +166,31 @@ app.get('/client-side-visit/props', (req, res) =>
   }),
 )
 
+app.get('/visits/proxy', (req, res) => {
+  const timeout = req.headers['x-inertia-partial-data'] ? 250 : 0
+  const statuses = ['pending', 'running', 'success', 'failed', 'canceled']
+
+  const sites = [1, 2, 3, 4, 5].map(function (id) {
+    const site = { id }
+
+    site.latestDeployment = { id: id * 10, statuses: [statuses[id % statuses.length]] }
+
+    return site
+  })
+
+  setTimeout(
+    () =>
+      inertia.render(req, res, {
+        component: 'Visits/Proxy',
+        props: req.headers['x-inertia-partial-data'] === 'sites' ? { sites } : { foo: new Date().toISOString() },
+        deferredProps: req.headers['x-inertia-partial-data'] ? {} : { default: ['sites'] },
+      }),
+    timeout,
+  )
+})
+
+app.post('/visits/proxy', (req, res) => res.redirect(303, '/visits/proxy'))
+
 app.get('/visits/partial-reloads', (req, res) =>
   inertia.render(req, res, {
     component: 'Visits/PartialReloads',

tests/manual-visits.spec.ts

@@ -1015,3 +1015,53 @@ test('can do a subsequent visit after the previous visit has thrown an error in
   await expect(dump.method).toBe('get')
   await expect(dump.form).toEqual({})
 })
+
+test('vue proxies synced back to the core adapter are not stored in history state', async ({ page }) => {
+  test.skip(process.env.PACKAGE !== 'vue3', 'Vue 3 specific test')
+
+  pageLoads.watch(page)
+  await page.goto('/visits/proxy')
+  await expect(page.getByText('Site ID: 1')).toBeVisible()
+
+  const fooText = await page.locator('#foo').innerText()
+  const statusText = await page.locator('#status-1').innerText()
+  await expect(statusText).toBe('Statuses: running')
+
+  await page.getByRole('button', { name: 'Update First Site Ref' }).click()
+
+  const newStatusText = await page.locator('#status-1').innerText()
+  await expect(newStatusText).not.toBe(statusText)
+  await expect(newStatusText.startsWith('Statuses: frontend-')).toBeTruthy()
+
+  await page.getByRole('button', { name: 'Reload' }).click()
+  await expect(page.locator('#foo')).not.toHaveText(fooText)
+  await expect(await page.locator('#status-1').innerText()).toBe(newStatusText)
+
+  const newFooText = await page.locator('#foo').innerText()
+
+  // Navigate away...
+  await page.getByRole('link', { name: 'Go Home' }).click()
+  await expect(page).toHaveURL('/')
+
+  // Go back...
+  await page.goBack()
+  await expect(page).toHaveURL('/visits/proxy')
+
+  // Ensure state is preserved...
+  await expect(page.locator('#foo')).toHaveText(newFooText)
+  await expect(await page.locator('#status-1').innerText()).toBe(newStatusText)
+
+  // Update ref again...
+  await page.getByRole('button', { name: 'Update First Site Ref' }).click()
+
+  const updatedStatusText = await page.locator('#status-1').innerText()
+  await expect(updatedStatusText).not.toBe(newStatusText)
+  await expect(updatedStatusText.startsWith('Statuses: frontend-')).toBeTruthy()
+
+  // Reload again...
+  await page.getByRole('button', { name: 'Reload' }).click()
+  await expect(page.locator('#foo')).not.toHaveText(newFooText)
+
+  // Ensure updated status is still there
+  await expect(await page.locator('#status-1').innerText()).toBe(updatedStatusText)
+})