Svelte fix when using deferred props

packages/react/test-app/Pages/DeferredProps/Page1.jsx

@@ -3,13 +3,13 @@ import { Deferred, Link, usePage } from '@inertiajs/react'
 const Foo = () => {
   const { foo } = usePage().props
 
-  return foo
+  return foo.text
 }
 
 const Bar = () => {
   const { bar } = usePage().props
 
-  return bar
+  return bar.text
 }
 
 export default () => {

packages/svelte/src/page.ts

@@ -1,6 +1,16 @@
 import { derived } from 'svelte/store'
 import store from './store'
 
-const page = derived(store, ($store) => $store.page)
+let initialized = false
+const page = derived(store, ($store, set) => {
+  // This ensures that page props and the $page store are updated
+  // in the same render, such as when using deferred props.
+  if (initialized && typeof window !== 'undefined') {
+    window.queueMicrotask(() => set($store.page))
+    return
+  }
+  set($store.page)
+  initialized = true
+})
 
 export default page

packages/svelte/test-app/Pages/DeferredProps/Page1.svelte

@@ -9,14 +9,14 @@
   <svelte:fragment slot="fallback">
     <div>Loading foo...</div>
   </svelte:fragment>
-  {foo}
+  {foo.text}
 </Deferred>
 
 <Deferred data="bar">
   <svelte:fragment slot="fallback">
     <div>Loading bar...</div>
   </svelte:fragment>
-  {bar}
+  {bar.text}
 </Deferred>
 
 <a href="/deferred-props/page-2" use:inertia>Page 2</a>

packages/vue3/test-app/Pages/DeferredProps/Page1.vue

@@ -2,8 +2,8 @@
 import { Deferred, Link } from '@inertiajs/vue3'
 
 defineProps<{
-  foo?: string
-  bar?: string
+  foo?: {text: string }
+  bar?: {text: string }
 }>()
 </script>
 
@@ -12,14 +12,14 @@ defineProps<{
     <template #fallback>
       <div>Loading foo...</div>
     </template>
-    {{ foo }}
+    {{ foo?.text }}
   </Deferred>
 
   <Deferred data="bar">
     <template #fallback>
       <div>Loading bar...</div>
     </template>
-    {{ bar }}
+    {{ bar?.text }}
   </Deferred>
 
   <Link href="/deferred-props/page-2">Page 2</Link>

tests/app/server.js

@@ -262,8 +262,8 @@ app.get('/deferred-props/page-1', (req, res) => {
       inertia.render(req, res, {
         component: 'DeferredProps/Page1',
         props: {
-          foo: req.headers['x-inertia-partial-data']?.includes('foo') ? 'foo value' : undefined,
-          bar: req.headers['x-inertia-partial-data']?.includes('bar') ? 'bar value' : undefined,
+          foo: req.headers['x-inertia-partial-data']?.includes('foo') ? { text: 'foo value' } : undefined,
+          bar: req.headers['x-inertia-partial-data']?.includes('bar') ? { text: 'bar value' } : undefined,
         },
       }),
     500,