From 363f80011b543d63b8cb6ee5a65046ad6c5ef900 Mon Sep 17 00:00:00 2001
From: Martin Trapp <94928215+martrapp@users.noreply.github.com>
Date: Mon, 2 Oct 2023 16:37:57 +0200
Subject: [PATCH] Fix view transitions with client:only components

---
 .changeset/gentle-hats-dress.md            |  5 +++++
 packages/astro/src/core/compile/compile.ts |  6 ++++++
 packages/astro/src/transitions/router.ts   | 16 ----------------
 3 files changed, 11 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/gentle-hats-dress.md

diff --git a/.changeset/gentle-hats-dress.md b/.changeset/gentle-hats-dress.md
new file mode 100644
index 000000000..80f28fea4
--- /dev/null
+++ b/.changeset/gentle-hats-dress.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix view transitions with client:only components
diff --git a/packages/astro/src/core/compile/compile.ts b/packages/astro/src/core/compile/compile.ts
index 5e1cad1be..0e169962e 100644
--- a/packages/astro/src/core/compile/compile.ts
+++ b/packages/astro/src/core/compile/compile.ts
@@ -69,6 +69,12 @@ export async function compile({
 		});
 	}
 
+	if (viteConfig.mode === 'development') {
+		transformResult.clientOnlyComponents.forEach((component) => {
+			transformResult.code += `\nimport '${component.specifier}';\n`;
+		});
+	}
+
 	handleCompileResultErrors(transformResult, cssTransformErrors);
 
 	return {
diff --git a/packages/astro/src/transitions/router.ts b/packages/astro/src/transitions/router.ts
index 1049f92d1..84f896948 100644
--- a/packages/astro/src/transitions/router.ts
+++ b/packages/astro/src/transitions/router.ts
@@ -198,22 +198,6 @@ async function updateDOM(
 			const href = el.getAttribute('href');
 			return newDocument.head.querySelector(`link[rel=stylesheet][href="${href}"]`);
 		}
-		// What follows is a fix for an issue (#8472) with missing client:only styles after transition.
-		// That problem exists only in dev mode where styles are injected into the page by Vite.
-		// Returning a noop element ensures that the styles are not removed from the old document.
-		// Guarding the code below with the dev mode check
-		// allows tree shaking to remove this code in production.
-		if (import.meta.env.DEV) {
-			if (el.tagName === 'STYLE' && el.dataset.viteDevId) {
-				const devId = el.dataset.viteDevId;
-				// If this same style tag exists, remove it from the new page
-				return (
-					newDocument.querySelector(`style[data-vite-dev-id="${devId}"]`) ||
-					// Otherwise, keep it anyways. This is client:only styles.
-					noopEl
-				);
-			}
-		}
 		return null;
 	};