Fix transition attributes on islands (#8776)

* Fix transition attributes on islands

* Incorporate comments from review

.changeset/wise-lions-lay.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix transition attributes on islands

packages/astro/src/runtime/server/hydration.ts

@@ -12,30 +12,35 @@ export interface HydrationMetadata {
 	directive: string;
 	value: string;
 	componentUrl: string;
-	componentExport: { value: string };
+	componentExport: { value: string; };
 }
 
+type Props = Record<string | number | symbol, any>;
+
 interface ExtractedProps {
 	isPage: boolean;
 	hydration: HydrationMetadata | null;
-	props: Record<string | number | symbol, any>;
+	props: Props;
+	propsWithoutTransitionAttributes: Props;
 }
 
 const transitionDirectivesToCopyOnIsland = Object.freeze([
 	'data-astro-transition-scope',
 	'data-astro-transition-persist',
 ]);
 
+
 // Used to extract the directives, aka `client:load` information about a component.
 // Finds these special props and removes them from what gets passed into the component.
 export function extractDirectives(
-	inputProps: Record<string | number | symbol, any>,
+	inputProps: Props,
 	clientDirectives: SSRResult['clientDirectives']
 ): ExtractedProps {
 	let extracted: ExtractedProps = {
 		isPage: false,
 		hydration: null,
 		props: {},
+		propsWithoutTransitionAttributes: {},
 	};
 	for (const [key, value] of Object.entries(inputProps)) {
 		if (key.startsWith('server:')) {
@@ -96,10 +101,14 @@ export function extractDirectives(
 			}
 		} else {
 			extracted.props[key] = value;
+			if (!transitionDirectivesToCopyOnIsland.includes(key)) {
+				extracted.propsWithoutTransitionAttributes[key] = value;
+			}
 		}
 	}
 	for (const sym of Object.getOwnPropertySymbols(inputProps)) {
 		extracted.props[sym] = inputProps[sym];
+		extracted.propsWithoutTransitionAttributes[sym] = inputProps[sym];
 	}
 
 	return extracted;

packages/astro/src/runtime/server/render/component.ts

@@ -92,7 +92,7 @@ async function renderFrameworkComponent(
 		displayName,
 	};
 
-	const { hydration, isPage, props } = extractDirectives(_props, clientDirectives);
+	const { hydration, isPage, props, propsWithoutTransitionAttributes } = extractDirectives(_props, clientDirectives);
 	let html = '';
 	let attrs: Record<string, string> | undefined = undefined;
 
@@ -217,7 +217,7 @@ async function renderFrameworkComponent(
 				({ html, attrs } = await renderer.ssr.renderToStaticMarkup.call(
 					{ result },
 					Component,
-					props,
+					propsWithoutTransitionAttributes,
 					children,
 					metadata
 				));
@@ -242,7 +242,7 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr
 			({ html, attrs } = await renderer.ssr.renderToStaticMarkup.call(
 				{ result },
 				Component,
-				props,
+				propsWithoutTransitionAttributes,
 				children,
 				metadata
 			));

packages/astro/test/fixtures/view-transitions/astro.config.mjs

@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import react from '@astrojs/react';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [react()],
+});

packages/astro/test/fixtures/view-transitions/package.json

@@ -3,6 +3,9 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "astro": "workspace:*"
+    "astro": "workspace:*",
+    "@astrojs/react": "workspace:*",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   }
 }

packages/astro/test/fixtures/view-transitions/src/components/Island.css

@@ -0,0 +1,11 @@
+.counter {
+	display: grid;
+	font-size: 2em;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	margin-top: 2em;
+	place-items: center;
+}
+
+.counter-message {
+	text-align: center;
+}

packages/astro/test/fixtures/view-transitions/src/components/Island.jsx

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import './Island.css';
+
+export default function Counter({ children, count: initialCount, id }) {
+	const [count, setCount] = useState(initialCount);
+	const add = () => setCount((i) => i + 1);
+	const subtract = () => setCount((i) => i - 1);
+
+	return (
+		<>
+			<div id={id} className="counter">
+				<button className="decrement" onClick={subtract}>-</button>
+				<pre>{count}</pre>
+				<button className="increment" onClick={add}>+</button>
+			</div>
+			<div className="counter-message">{children}</div>
+		</>
+	);
+}

packages/astro/test/fixtures/view-transitions/src/pages/hasIsland.astro

@@ -0,0 +1,10 @@
+---
+import Island from '../components/Island.jsx';
+---
+<html>
+	<head>
+	</head>
+	<body>
+		<Island id="1" count="{1}" children="Greetings!" transition:persist="here" client:load/>
+	</body>
+</html>

packages/astro/test/view-transitions.test.js

@@ -22,4 +22,14 @@ describe('View Transitions styles', () => {
 
 		expect($('head style')).to.have.a.lengthOf(3);
 	});
+
+	it('should not duplicate transition attributes on island contents', async () => {
+		let res = await fixture.fetch('/hasIsland');
+		let html = await res.text();
+		let $ = cheerio.load(html);
+		expect($('astro-island[data-astro-transition-persist]')).to.have.a.lengthOf(1);
+		expect(
+			$('astro-island[data-astro-transition-persist] > [data-astro-transition-persist]')
+		).to.have.a.lengthOf(0);
+	});
 });