From a5ae84ff2ae7cbb759f21c2b1f1df65ee9b20f78 Mon Sep 17 00:00:00 2001
From: Pedro Borges <oi@pedroborg.es>
Date: Tue, 13 Aug 2024 15:51:29 -0300
Subject: [PATCH 1/4] Update playground with reproducible

---
 .../resources/js/Components/Layout.svelte     | 13 +++++++
 .../resources/js/Components/Layout2.svelte    | 19 +++++++++
 .../svelte/resources/js/Pages/Baz.svelte      | 39 +++++++++++++++++++
 .../svelte/resources/js/Pages/FooBar.svelte   | 39 +++++++++++++++++++
 .../svelte/resources/js/Pages/Home.svelte     |  3 +-
 playgrounds/svelte/routes/web.php             | 12 ++++++
 6 files changed, 124 insertions(+), 1 deletion(-)
 create mode 100644 playgrounds/svelte/resources/js/Components/Layout2.svelte
 create mode 100644 playgrounds/svelte/resources/js/Pages/Baz.svelte
 create mode 100644 playgrounds/svelte/resources/js/Pages/FooBar.svelte

diff --git a/playgrounds/svelte/resources/js/Components/Layout.svelte b/playgrounds/svelte/resources/js/Components/Layout.svelte
index 11ce6b839..d2a67a3a6 100644
--- a/playgrounds/svelte/resources/js/Components/Layout.svelte
+++ b/playgrounds/svelte/resources/js/Components/Layout.svelte
@@ -1,5 +1,18 @@
 <script>
+  import { onMount, onDestroy } from 'svelte'
   import { inertia, page } from '@inertiajs/svelte'
+
+  export let name
+
+  $: console.log(`Navigated to ${name}`, new Date().getTime())
+
+  onMount(() => {
+    console.log(`Mounted <Layout />`)
+  })
+
+  onDestroy(() => {
+    console.log(`Destroyed <Layout />`)
+  })
 </script>
 
 <nav class="flex items-center space-x-6 bg-slate-800 px-10 py-6 text-white">
diff --git a/playgrounds/svelte/resources/js/Components/Layout2.svelte b/playgrounds/svelte/resources/js/Components/Layout2.svelte
new file mode 100644
index 000000000..a53574ed7
--- /dev/null
+++ b/playgrounds/svelte/resources/js/Components/Layout2.svelte
@@ -0,0 +1,19 @@
+<script>
+  import { onMount, onDestroy } from 'svelte'
+
+  let time = new Date().getTime()
+
+  onMount(() => {
+    console.log(`Mounted <Layout2 />`)
+  })
+
+  onDestroy(() => {
+    console.log(`Destroyed <Layout2 />`)
+  })
+</script>
+
+<div class="fixed inset-x-0 bottom-0 p-2 bg-red-600 text-yellow-50 text-center">
+    Layout #2 {time}
+</div>
+
+<slot />
diff --git a/playgrounds/svelte/resources/js/Pages/Baz.svelte b/playgrounds/svelte/resources/js/Pages/Baz.svelte
new file mode 100644
index 000000000..52350b06f
--- /dev/null
+++ b/playgrounds/svelte/resources/js/Pages/Baz.svelte
@@ -0,0 +1,39 @@
+<script context="module">
+  import Layout1 from '../Components/Layout.svelte'
+  import Layout2 from '../Components/Layout2.svelte'
+  export const layout = [Layout1, Layout2]
+</script>
+
+<script>
+  import { onMount, onDestroy } from 'svelte'
+  import { inertia, useForm } from '@inertiajs/svelte'
+
+  export let name
+
+  console.log('"name" prop: ', name, new Date().getTime())
+
+  const form = useForm({
+    'name': name
+  });
+
+  onMount(() => {
+    console.log(`Mounted <Baz name=${name} />`, new Date().getTime())
+  })
+
+  onDestroy(() => {
+    console.log(`Destroyed <Baz name=${name} />`, new Date().getTime())
+  })
+</script>
+
+<h1 class="text-3xl">{name}</h1>
+
+Name: <input type="text" bind:value={$form.name} class="px-1 border border-gray-400 rounded">
+
+<p class="mt-6">
+  <a href="/foo" use:inertia class="text-blue-700 underline">Link to Foo</a><br>
+  <a href="/foo" use:inertia={{ preserveState: true }} class="text-blue-700 underline">Link to Foo (preserve)</a><br>
+  <a href="/bar" use:inertia class="text-blue-700 underline">Link to Bar</a><br>
+  <a href="/bar" use:inertia={{ preserveState: true }} class="text-blue-700 underline">Link to Bar (preserve)</a><br>
+  <a href="/baz" use:inertia class="text-blue-700 underline">Link to Baz</a><br>
+  <a href="/baz" use:inertia={{ preserveState: true }} class="text-blue-700 underline">Link to Baz (preserve)</a><br>
+</p>
diff --git a/playgrounds/svelte/resources/js/Pages/FooBar.svelte b/playgrounds/svelte/resources/js/Pages/FooBar.svelte
new file mode 100644
index 000000000..b011e378a
--- /dev/null
+++ b/playgrounds/svelte/resources/js/Pages/FooBar.svelte
@@ -0,0 +1,39 @@
+<script context="module">
+  import Layout1 from '../Components/Layout.svelte'
+  import Layout2 from '../Components/Layout2.svelte'
+  export const layout = [Layout1, Layout2]
+</script>
+
+<script>
+  import { onMount, onDestroy } from 'svelte'
+  import { inertia, useForm } from '@inertiajs/svelte'
+
+  export let name
+
+  console.log('"name" prop: ', name, new Date().getTime())
+
+  const form = useForm({
+    'name': name
+  });
+
+  onMount(() => {
+    console.log(`Mounted <FooBar name=${name} />`, new Date().getTime())
+  })
+
+  onDestroy(() => {
+    console.log(`Destroyed <FooBar name=${name} />`, new Date().getTime())
+  })
+</script>
+
+<h1 class="text-3xl">{name} <small>({new Date().getTime()})</small></h1>
+
+Name: <input type="text" bind:value={$form.name} class="px-1 border border-gray-400 rounded">
+
+<p class="mt-6">
+  <a href="/foo" use:inertia class="text-blue-700 underline">Link to Foo</a><br>
+  <a href="/foo" use:inertia={{ preserveState: true }} class="text-blue-700 underline">Link to Foo (preserve)</a><br>
+  <a href="/bar" use:inertia class="text-blue-700 underline">Link to Bar</a><br>
+  <a href="/bar" use:inertia={{ preserveState: true }} class="text-blue-700 underline">Link to Bar (preserve)</a><br>
+  <a href="/baz" use:inertia class="text-blue-700 underline">Link to Baz</a><br>
+  <a href="/baz" use:inertia={{ preserveState: true }} class="text-blue-700 underline">Link to Baz (preserve)</a><br>
+</p>
diff --git a/playgrounds/svelte/resources/js/Pages/Home.svelte b/playgrounds/svelte/resources/js/Pages/Home.svelte
index 1292c143e..43c5548e2 100644
--- a/playgrounds/svelte/resources/js/Pages/Home.svelte
+++ b/playgrounds/svelte/resources/js/Pages/Home.svelte
@@ -14,5 +14,6 @@
 <h1 class="text-3xl">Home</h1>
 
 <p class="mt-6">
-  <a href="/article#far-down" use:inertia class="text-blue-700 underline">Link to bottom of article page</a>
+  <a href="/article#far-down" use:inertia class="text-blue-700 underline">Link to bottom of article page</a><br>
+  <a href="/foo" use:inertia class="text-blue-700 underline">Test page component rendering</a>
 </p>
diff --git a/playgrounds/svelte/routes/web.php b/playgrounds/svelte/routes/web.php
index 2424b2ffd..b9fc09f18 100644
--- a/playgrounds/svelte/routes/web.php
+++ b/playgrounds/svelte/routes/web.php
@@ -89,3 +89,15 @@
 Route::post('/logout', function () {
     return redirect('/login');
 });
+
+Route::get('/foo', function () {
+    return inertia('FooBar', [ 'name' => 'Foo' ]);
+});
+
+Route::get('/bar', function () {
+    return inertia('FooBar', [ 'name' => 'Bar' ]);
+});
+
+Route::get('/baz', function () {
+    return inertia('Baz', [ 'name' => 'Baz' ]);
+});

From ab69b8bc6d49b17766a766cdbf21ea8dc7b7ae73 Mon Sep 17 00:00:00 2001
From: Pedro Borges <oi@pedroborg.es>
Date: Tue, 13 Aug 2024 15:52:29 -0300
Subject: [PATCH 2/4] Fix <Render /> to respect "preserveState"

# Conflicts:
#	packages/svelte/src/lib/components/Render.svelte

# Conflicts:
#	packages/svelte/src/lib/components/Render.svelte
---
 packages/svelte/src/lib/components/Render.svelte | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/svelte/src/lib/components/Render.svelte b/packages/svelte/src/lib/components/Render.svelte
index 4fd9cb7e6..8c1e65e10 100644
--- a/packages/svelte/src/lib/components/Render.svelte
+++ b/packages/svelte/src/lib/components/Render.svelte
@@ -23,20 +23,17 @@
   export let component: ComponentType
   export let props: PageProps = {}
   export let children: RenderProps[] = []
-
-  let prevComponent: ComponentType
-  let key: number
-  $: if (prevComponent !== component) {
-    key = Date.now()
-    prevComponent = component
-  }
 </script>
 
 {#if $store.component}
-  {#key key}
+  <!--
+  Add the `key` only to the last (page) component in the tree.
+  This ensures that the page component re-renders when `preserveState` is disabled,
+  while the layout components are persisted across page changes. -->
+  {#key children?.length === 0 ? $store.key : null}
     {#if children.length > 0}
       <svelte:component this={component} {...props}>
-        {#each children as child, index (component && component.length === index ? $store.key : null)}
+        {#each children as child}
           <svelte:self {...child} />
         {/each}
       </svelte:component>

From 177d7ab4fde31e514e304b648847f66ab5bbd45a Mon Sep 17 00:00:00 2001
From: Pedro Borges <oi@pedroborg.es>
Date: Mon, 16 Sep 2024 20:26:50 -0300
Subject: [PATCH 3/4] Revert "Update playground with reproducible"

This reverts commit a5ae84ff2ae7cbb759f21c2b1f1df65ee9b20f78.
---
 .../resources/js/Components/Layout.svelte     | 13 -------
 .../resources/js/Components/Layout2.svelte    | 19 ---------
 .../svelte/resources/js/Pages/Baz.svelte      | 39 -------------------
 .../svelte/resources/js/Pages/FooBar.svelte   | 39 -------------------
 .../svelte/resources/js/Pages/Home.svelte     |  3 +-
 playgrounds/svelte/routes/web.php             | 12 ------
 6 files changed, 1 insertion(+), 124 deletions(-)
 delete mode 100644 playgrounds/svelte/resources/js/Components/Layout2.svelte
 delete mode 100644 playgrounds/svelte/resources/js/Pages/Baz.svelte
 delete mode 100644 playgrounds/svelte/resources/js/Pages/FooBar.svelte

diff --git a/playgrounds/svelte/resources/js/Components/Layout.svelte b/playgrounds/svelte/resources/js/Components/Layout.svelte
index d2a67a3a6..11ce6b839 100644
--- a/playgrounds/svelte/resources/js/Components/Layout.svelte
+++ b/playgrounds/svelte/resources/js/Components/Layout.svelte
@@ -1,18 +1,5 @@
 <script>
-  import { onMount, onDestroy } from 'svelte'
   import { inertia, page } from '@inertiajs/svelte'
-
-  export let name
-
-  $: console.log(`Navigated to ${name}`, new Date().getTime())
-
-  onMount(() => {
-    console.log(`Mounted <Layout />`)
-  })
-
-  onDestroy(() => {
-    console.log(`Destroyed <Layout />`)
-  })
 </script>
 
 <nav class="flex items-center space-x-6 bg-slate-800 px-10 py-6 text-white">
diff --git a/playgrounds/svelte/resources/js/Components/Layout2.svelte b/playgrounds/svelte/resources/js/Components/Layout2.svelte
deleted file mode 100644
index a53574ed7..000000000
--- a/playgrounds/svelte/resources/js/Components/Layout2.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script>
-  import { onMount, onDestroy } from 'svelte'
-
-  let time = new Date().getTime()
-
-  onMount(() => {
-    console.log(`Mounted <Layout2 />`)
-  })
-
-  onDestroy(() => {
-    console.log(`Destroyed <Layout2 />`)
-  })
-</script>
-
-<div class="fixed inset-x-0 bottom-0 p-2 bg-red-600 text-yellow-50 text-center">
-    Layout #2 {time}
-</div>
-
-<slot />
diff --git a/playgrounds/svelte/resources/js/Pages/Baz.svelte b/playgrounds/svelte/resources/js/Pages/Baz.svelte
deleted file mode 100644
index 52350b06f..000000000
--- a/playgrounds/svelte/resources/js/Pages/Baz.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script context="module">
-  import Layout1 from '../Components/Layout.svelte'
-  import Layout2 from '../Components/Layout2.svelte'
-  export const layout = [Layout1, Layout2]
-</script>
-
-<script>
-  import { onMount, onDestroy } from 'svelte'
-  import { inertia, useForm } from '@inertiajs/svelte'
-
-  export let name
-
-  console.log('"name" prop: ', name, new Date().getTime())
-
-  const form = useForm({
-    'name': name
-  });
-
-  onMount(() => {
-    console.log(`Mounted <Baz name=${name} />`, new Date().getTime())
-  })
-
-  onDestroy(() => {
-    console.log(`Destroyed <Baz name=${name} />`, new Date().getTime())
-  })
-</script>
-
-<h1 class="text-3xl">{name}</h1>
-
-Name: <input type="text" bind:value={$form.name} class="px-1 border border-gray-400 rounded">
-
-<p class="mt-6">
-  <a href="/foo" use:inertia class="text-blue-700 underline">Link to Foo</a><br>
-  <a href="/foo" use:inertia={{ preserveState: true }} class="text-blue-700 underline">Link to Foo (preserve)</a><br>
-  <a href="/bar" use:inertia class="text-blue-700 underline">Link to Bar</a><br>
-  <a href="/bar" use:inertia={{ preserveState: true }} class="text-blue-700 underline">Link to Bar (preserve)</a><br>
-  <a href="/baz" use:inertia class="text-blue-700 underline">Link to Baz</a><br>
-  <a href="/baz" use:inertia={{ preserveState: true }} class="text-blue-700 underline">Link to Baz (preserve)</a><br>
-</p>
diff --git a/playgrounds/svelte/resources/js/Pages/FooBar.svelte b/playgrounds/svelte/resources/js/Pages/FooBar.svelte
deleted file mode 100644
index b011e378a..000000000
--- a/playgrounds/svelte/resources/js/Pages/FooBar.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script context="module">
-  import Layout1 from '../Components/Layout.svelte'
-  import Layout2 from '../Components/Layout2.svelte'
-  export const layout = [Layout1, Layout2]
-</script>
-
-<script>
-  import { onMount, onDestroy } from 'svelte'
-  import { inertia, useForm } from '@inertiajs/svelte'
-
-  export let name
-
-  console.log('"name" prop: ', name, new Date().getTime())
-
-  const form = useForm({
-    'name': name
-  });
-
-  onMount(() => {
-    console.log(`Mounted <FooBar name=${name} />`, new Date().getTime())
-  })
-
-  onDestroy(() => {
-    console.log(`Destroyed <FooBar name=${name} />`, new Date().getTime())
-  })
-</script>
-
-<h1 class="text-3xl">{name} <small>({new Date().getTime()})</small></h1>
-
-Name: <input type="text" bind:value={$form.name} class="px-1 border border-gray-400 rounded">
-
-<p class="mt-6">
-  <a href="/foo" use:inertia class="text-blue-700 underline">Link to Foo</a><br>
-  <a href="/foo" use:inertia={{ preserveState: true }} class="text-blue-700 underline">Link to Foo (preserve)</a><br>
-  <a href="/bar" use:inertia class="text-blue-700 underline">Link to Bar</a><br>
-  <a href="/bar" use:inertia={{ preserveState: true }} class="text-blue-700 underline">Link to Bar (preserve)</a><br>
-  <a href="/baz" use:inertia class="text-blue-700 underline">Link to Baz</a><br>
-  <a href="/baz" use:inertia={{ preserveState: true }} class="text-blue-700 underline">Link to Baz (preserve)</a><br>
-</p>
diff --git a/playgrounds/svelte/resources/js/Pages/Home.svelte b/playgrounds/svelte/resources/js/Pages/Home.svelte
index 43c5548e2..1292c143e 100644
--- a/playgrounds/svelte/resources/js/Pages/Home.svelte
+++ b/playgrounds/svelte/resources/js/Pages/Home.svelte
@@ -14,6 +14,5 @@
 <h1 class="text-3xl">Home</h1>
 
 <p class="mt-6">
-  <a href="/article#far-down" use:inertia class="text-blue-700 underline">Link to bottom of article page</a><br>
-  <a href="/foo" use:inertia class="text-blue-700 underline">Test page component rendering</a>
+  <a href="/article#far-down" use:inertia class="text-blue-700 underline">Link to bottom of article page</a>
 </p>
diff --git a/playgrounds/svelte/routes/web.php b/playgrounds/svelte/routes/web.php
index b9fc09f18..2424b2ffd 100644
--- a/playgrounds/svelte/routes/web.php
+++ b/playgrounds/svelte/routes/web.php
@@ -89,15 +89,3 @@
 Route::post('/logout', function () {
     return redirect('/login');
 });
-
-Route::get('/foo', function () {
-    return inertia('FooBar', [ 'name' => 'Foo' ]);
-});
-
-Route::get('/bar', function () {
-    return inertia('FooBar', [ 'name' => 'Bar' ]);
-});
-
-Route::get('/baz', function () {
-    return inertia('Baz', [ 'name' => 'Baz' ]);
-});

From 5589c1973924f89c82b1e4cc9413b894231d78c7 Mon Sep 17 00:00:00 2001
From: Pedro Borges <oi@pedroborg.es>
Date: Mon, 16 Sep 2024 20:32:51 -0300
Subject: [PATCH 4/4] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1d3562620..48aec25f2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ For changes prior to v1.0.0, see the [legacy releases](https://legacy.inertiajs.
 - Fix form helper `transform` return type in React adapter ([#1896](https://github.com/inertiajs/inertia/pull/1896))
 - Use updater function in `setData` in `useForm` hook in React adapter ([#1859](https://github.com/inertiajs/inertia/pull/1859))
 - Skip intercepting non-left button clicks on links ([#1908](https://github.com/inertiajs/inertia/pull/1908), [#1910](https://github.com/inertiajs/inertia/pull/1910))
+- [Svelte] Fix `<Render />` component to respect `preserveState` option ([#1943](https://github.com/inertiajs/inertia/pull/1943))
 - [Svelte] Fix 'received an unexpected slot "default"' warning ([#1941](https://github.com/inertiajs/inertia/pull/1941))
 
 ## [v1.2.0](https://github.com/inertiajs/inertia/compare/v1.1.0...v1.2.0)