Add deep merge props functionality and tests

This commit introduces the deepMergeProps feature in the Vue3 application, allowing for more comprehensive property merging. A corresponding test has been created to ensure the functionality operates as expected. Additionally, server routing is updated to support deepMergeProps.

packages/vue3/src/app.ts

@@ -135,6 +135,7 @@ export function usePage<SharedProps extends PageProps>(): Page<SharedProps> {
     clearHistory: computed(() => page.value?.clearHistory),
     deferredProps: computed(() => page.value?.deferredProps),
     mergeProps: computed(() => page.value?.mergeProps),
+    deepMergeProps: computed(() => page.value?.deepMergeProps),
     scrollRegions: computed(() => page.value?.scrollRegions),
     rememberedState: computed(() => page.value?.rememberedState),
     encryptHistory: computed(() => page.value?.encryptHistory),

tests/app/server.js

@@ -237,14 +237,25 @@ app.get('/when-visible', (req, res) => {
 })
 
 app.get('/merge-props', (req, res) => {
-  inertia.render(req, res, {
-    component: 'MergeProps',
-    props: {
-      bar: new Array(5).fill(1),
-      foo: new Array(5).fill(1),
-    },
-    ...(req.headers['x-inertia-reset'] ? {} : { mergeProps: ['foo'] }),
-  })
+    inertia.render(req, res, {
+        component: 'MergeProps',
+        props: {
+            bar: new Array(5).fill(1),
+            foo: new Array(5).fill(1),
+        },
+        ...(req.headers['x-inertia-reset'] ? {} : { mergeProps: ['foo'] }),
+    })
+})
+
+app.get('/deep-merge-props', (req, res) => {
+    inertia.render(req, res, {
+        component: 'DeepMergeProps',
+        props: {
+            bar: new Array(5).fill(1),
+            foo: new Array(5).fill(1),
+        },
+        ...(req.headers['x-inertia-reset'] ? {} : { deepMergeProps: ['foo'] }),
+    })
 })
 
 app.get('/deferred-props/page-1', (req, res) => {

tests/deep-merge-props.spec.ts

@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test'
+import { clickAndWaitForResponse } from './support'
+
+test('can deep merge props', async ({ page }) => {
+  await page.goto('/deep-merge-props')
+
+  await expect(page.getByText('bar count is 5')).toBeVisible()
+  await expect(page.getByText('foo count is 5')).toBeVisible()
+
+  await clickAndWaitForResponse(page, 'Reload', null, 'button')
+
+  await expect(page.getByText('bar count is 5')).toBeVisible()
+  await expect(page.getByText('foo count is 10')).toBeVisible()
+
+  await clickAndWaitForResponse(page, 'Reload', null, 'button')
+
+  await expect(page.getByText('bar count is 5')).toBeVisible()
+  await expect(page.getByText('foo count is 15')).toBeVisible()
+
+  await clickAndWaitForResponse(page, 'Get Fresh', null, 'button')
+
+  await expect(page.getByText('bar count is 5')).toBeVisible()
+  await expect(page.getByText('foo count is 5')).toBeVisible()
+
+  await clickAndWaitForResponse(page, 'Reload', null, 'button')
+
+  await expect(page.getByText('bar count is 5')).toBeVisible()
+  await expect(page.getByText('foo count is 10')).toBeVisible()
+})