From 5c7c7e463dbffc9a573e3fec80a4daaf4621cd83 Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Wed, 15 Feb 2023 22:28:59 +0800
Subject: [PATCH] Fix unmount Svelte slots (#6250)

---
 .changeset/curvy-snakes-turn.md                      |  5 +++++
 .../src/components/ToggleSlots.svelte                | 12 ++++++++++++
 .../astro/e2e/fixtures/svelte-component/src/env.d.ts |  1 +
 .../fixtures/svelte-component/src/pages/index.astro  | 10 ++++++++++
 packages/astro/e2e/svelte-component.test.js          | 12 ++++++++++++
 packages/integrations/svelte/client.js               | 10 +++++++++-
 6 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/curvy-snakes-turn.md
 create mode 100644 packages/astro/e2e/fixtures/svelte-component/src/components/ToggleSlots.svelte
 create mode 100644 packages/astro/e2e/fixtures/svelte-component/src/env.d.ts

diff --git a/.changeset/curvy-snakes-turn.md b/.changeset/curvy-snakes-turn.md
new file mode 100644
index 0000000000..07349e478c
--- /dev/null
+++ b/.changeset/curvy-snakes-turn.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/svelte': patch
+---
+
+Fix unmounting slots passed to Svelte components
diff --git a/packages/astro/e2e/fixtures/svelte-component/src/components/ToggleSlots.svelte b/packages/astro/e2e/fixtures/svelte-component/src/components/ToggleSlots.svelte
new file mode 100644
index 0000000000..3a8595ff59
--- /dev/null
+++ b/packages/astro/e2e/fixtures/svelte-component/src/components/ToggleSlots.svelte
@@ -0,0 +1,12 @@
+<script>
+  let isNavOpen = false;
+  const toggleNav = () => (isNavOpen = !isNavOpen);
+</script>
+
+<button id="toggle" on:click={toggleNav}>
+  {#if isNavOpen}
+      <slot name="open" />
+  {:else}
+      <slot name="close" />
+  {/if}
+</button>
diff --git a/packages/astro/e2e/fixtures/svelte-component/src/env.d.ts b/packages/astro/e2e/fixtures/svelte-component/src/env.d.ts
new file mode 100644
index 0000000000..8c34fb45e7
--- /dev/null
+++ b/packages/astro/e2e/fixtures/svelte-component/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="astro/client" />
\ No newline at end of file
diff --git a/packages/astro/e2e/fixtures/svelte-component/src/pages/index.astro b/packages/astro/e2e/fixtures/svelte-component/src/pages/index.astro
index 9bd8f23bf8..472b863f68 100644
--- a/packages/astro/e2e/fixtures/svelte-component/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/svelte-component/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 import Counter from '../components/Counter.svelte';
 import SvelteComponent from '../components/SvelteComponent.svelte';
+import ToggleSlots from '../components/ToggleSlots.svelte';
 
 const someProps = {
 	count: 0,
@@ -33,5 +34,14 @@ const someProps = {
 		</Counter>
 
 		<SvelteComponent id="client-only" client:only="svelte" />
+
+		<ToggleSlots client:load>
+			<div slot="open">
+				open
+			</div>
+			<div slot="close">
+				close
+			</div>
+		</ToggleSlots>
 	</body>
 </html>
diff --git a/packages/astro/e2e/svelte-component.test.js b/packages/astro/e2e/svelte-component.test.js
index d267aeafea..30ed2eeb4d 100644
--- a/packages/astro/e2e/svelte-component.test.js
+++ b/packages/astro/e2e/svelte-component.test.js
@@ -1,3 +1,4 @@
+import { expect } from '@playwright/test';
 import { prepareTestFactory } from './shared-component-tests.js';
 
 const { test, createTests } = prepareTestFactory({ root: './fixtures/svelte-component/' });
@@ -23,3 +24,14 @@ test.describe('Svelte components in MDX files', () => {
 		pageSourceFilePath: './src/pages/mdx.mdx',
 	});
 });
+
+test.describe('Svelte components lifecycle', () => {
+	test('slot should unmount properly', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const toggle = page.locator('#toggle');
+		expect((await toggle.textContent()).trim()).toBe('close');
+		await toggle.click()
+		expect((await toggle.textContent()).trim()).toBe('open');
+	});
+});
diff --git a/packages/integrations/svelte/client.js b/packages/integrations/svelte/client.js
index 4065003749..658ddb02f3 100644
--- a/packages/integrations/svelte/client.js
+++ b/packages/integrations/svelte/client.js
@@ -23,10 +23,12 @@ export default (target) => {
 };
 
 function createSlotDefinition(key, children) {
+	let parent;
 	return [
 		() => ({
 			// mount
 			m(target) {
+				parent = target;
 				target.insertAdjacentHTML(
 					'beforeend',
 					`<astro-slot${key === 'default' ? '' : ` name="${key}"`}>${children}</astro-slot>`
@@ -37,7 +39,13 @@ function createSlotDefinition(key, children) {
 			// hydrate
 			l: noop,
 			// destroy
-			d: noop,
+			d() {
+				if (!parent) return;
+				const slot = parent.querySelector(
+					`astro-slot${key === 'default' ? ':not([name])' : `[name="${key}"]`}`
+				);
+				if (slot) slot.remove();
+			},
 		}),
 		noop,
 		noop,