6 files changed, 38 insertions, 40 deletions
diff --git a/packages/integrations/preact/src/client.ts b/packages/integrations/preact/src/client.ts
index f90614398..ad24e886b 100644
--- a/packages/integrations/preact/src/client.ts
+++ b/packages/integrations/preact/src/client.ts
@@ -1,6 +1,6 @@
-import { h, render, type JSX } from 'preact';
-import StaticHtml from './static-html.js';
 import type { SignalLike } from './types';
+import { h, render, hydrate } from 'preact';
+import StaticHtml from './static-html.js';
 
 const sharedSignalMap = new Map<string, SignalLike>();
 
@@ -8,7 +8,8 @@ export default (element: HTMLElement) =>
 	async (
 		Component: any,
 		props: Record<string, any>,
-		{ default: children, ...slotted }: Record<string, any>
+		{ default: children, ...slotted }: Record<string, any>,
+		{ client }: Record<string, string>
 	) => {
 		if (!element.hasAttribute('ssr')) return;
 		for (const [key, value] of Object.entries(slotted)) {
@@ -27,23 +28,13 @@ export default (element: HTMLElement) =>
 			}
 		}
 
-		// eslint-disable-next-line @typescript-eslint/no-shadow
-		function Wrapper({ children }: { children: JSX.Element }) {
-			let attrs = Object.fromEntries(
-				Array.from(element.attributes).map((attr) => [attr.name, attr.value])
-			);
-			return h(element.localName, attrs, children);
-		}
-
-		let parent = element.parentNode as Element;
+		const bootstrap = client !== 'only' ? hydrate : render;
 
-		render(
-			h(
-				Wrapper,
-				null,
-				h(Component, props, children != null ? h(StaticHtml, { value: children }) : children)
-			),
-			parent,
-			element
+		bootstrap(
+			h(Component, props, children != null ? h(StaticHtml, { value: children }) : children),
+			element,
 		);
+		
+		// Preact has no "unmount" option, but you can use `render(null, element)`
+		element.addEventListener('astro:unmount', () => render(null, element), { once: true })
 	};
diff --git a/packages/integrations/react/client-v17.js b/packages/integrations/react/client-v17.js
index 443109603..70bddc353 100644
--- a/packages/integrations/react/client-v17.js
+++ b/packages/integrations/react/client-v17.js
@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import { render, hydrate } from 'react-dom';
+import { render, hydrate, unmountComponentAtNode } from 'react-dom';
 import StaticHtml from './static-html.js';
 
 export default (element) =>
@@ -12,8 +12,9 @@ export default (element) =>
 			props,
 			children != null ? createElement(StaticHtml, { value: children }) : children
 		);
-		if (client === 'only') {
-			return render(componentEl, element);
-		}
-		return hydrate(componentEl, element);
+
+		const isHydrate = client !== 'only';
+		const bootstrap = isHydrate ? hydrate : render;
+		bootstrap(componentEl, element);
+		element.addEventListener('astro:unmount', () => unmountComponentAtNode(element), { once: true });
 	};
diff --git a/packages/integrations/react/client.js b/packages/integrations/react/client.js
index d8948e7bb..dbd32c0c5 100644
--- a/packages/integrations/react/client.js
+++ b/packages/integrations/react/client.js
@@ -31,10 +31,14 @@ export default (element) =>
 		}
 		if (client === 'only') {
 			return startTransition(() => {
-				createRoot(element).render(componentEl);
+				const root = createRoot(element);
+				root.render(componentEl);
+				element.addEventListener('astro:unmount', () => root.unmount(), { once: true });
 			});
 		}
-		return startTransition(() => {
-			hydrateRoot(element, componentEl, renderOptions);
+		startTransition(() => {
+			const root = hydrateRoot(element, componentEl, renderOptions);
+			root.render(componentEl);
+			element.addEventListener('astro:unmount', () => root.unmount(), { once: true });
 		});
 	};
diff --git a/packages/integrations/solid/src/client.ts b/packages/integrations/solid/src/client.ts
index 730db0f51..66b3767ea 100644
--- a/packages/integrations/solid/src/client.ts
+++ b/packages/integrations/solid/src/client.ts
@@ -9,7 +9,7 @@ export default (element: HTMLElement) =>
 		}
 		if (!element.hasAttribute('ssr')) return;
 
-		const fn = client === 'only' ? render : hydrate;
+		const boostrap = client === 'only' ? render : hydrate;
 
 		let _slots: Record<string, any> = {};
 		if (Object.keys(slotted).length > 0) {
@@ -30,7 +30,7 @@ export default (element: HTMLElement) =>
 		const { default: children, ...slots } = _slots;
 		const renderId = element.dataset.solidRenderId;
 
-		fn(
+		const dispose = boostrap(
 			() =>
 				createComponent(Component, {
 					...props,
@@ -42,4 +42,6 @@ export default (element: HTMLElement) =>
 				renderId,
 			}
 		);
+
+		element.addEventListener('astro:unmount', () => dispose(), { once: true })
 	};
diff --git a/packages/integrations/svelte/client.js b/packages/integrations/svelte/client.js
index 0d07ff2ba..99612a580 100644
--- a/packages/integrations/svelte/client.js
+++ b/packages/integrations/svelte/client.js
@@ -14,7 +14,7 @@ export default (target) => {
 		try {
 			if (import.meta.env.DEV) useConsoleFilter();
 
-			new Component({
+			const component = new Component({
 				target,
 				props: {
 					...props,
@@ -24,6 +24,8 @@ export default (target) => {
 				hydrate: client !== 'only',
 				$$inline: true,
 			});
+			
+			element.addEventListener('astro:unmount', () => component.$destroy(), { once: true })
 		} catch (e) {
 		} finally {
 			if (import.meta.env.DEV) finishUsingConsoleFilter();
diff --git a/packages/integrations/vue/client.js b/packages/integrations/vue/client.js
index ca61116b2..8b2a5eede 100644
--- a/packages/integrations/vue/client.js
+++ b/packages/integrations/vue/client.js
@@ -21,15 +21,13 @@ export default (element) =>
 			content = h(Suspense, null, content);
 		}
 
-		if (client === 'only') {
-			const app = createApp({ name, render: () => content });
-			await setup(app);
-			app.mount(element, false);
-		} else {
-			const app = createSSRApp({ name, render: () => content });
-			await setup(app);
-			app.mount(element, true);
-		}
+		const isHydrate = client !== 'only';
+		const boostrap = isHydrate ? createSSRApp : createApp;
+		const app = boostrap({ name, render: () => content });
+		await setup(app);
+		app.mount(element, isHydrate);
+
+		element.addEventListener('astro:unmount', () => app.unmount(), { once: true });
 	};
 
 function isAsync(fn) {