Allow islands to be re-rendered with new props on page transition

.changeset/lovely-nails-cough.md

@@ -0,0 +1,18 @@
+---
+"@astrojs/react": minor
+"astro": minor
+---
+
+Update props on persisted islands upon navigation
+
+Islands which have the `transition:persist` property to keep state in `<ViewTransitions />` will now have their props updated upon navigation. For example, if you have a component:
+
+```astro
+<ProductListing transition:persist products={products} />
+```
+
+This component might have some internal state, such as which filters are applied. Upon navigation, this component persists, but the underlying `products` might change, for example if you are visiting a category of products, or you are performing a search.
+
+Previously the props will not change on navigation, and your island would have to handle updating them externally, such as with API calls.
+
+With this change the props are now updated, while still preserving state.

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

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

packages/astro/e2e/fixtures/view-transitions/src/pages/island-one.astro

@@ -5,5 +5,5 @@ import Island from '../components/Island.jsx';
 <Layout>
 	<p id="island-one">Page 1</p>
 	<a id="click-two" href="/island-two">go to 2</a>
-	<Island count={5} client:load transition:persist transition:name="counter" />
+	<Island count={5} page="Island 1" client:load transition:persist transition:name="counter" />
 </Layout>

packages/astro/e2e/fixtures/view-transitions/src/pages/island-two.astro

@@ -5,5 +5,5 @@ import Island from '../components/Island.jsx';
 <Layout>
 	<p id="island-two">Page 2</p>
 	<a id="click-one" href="/island-one">go to 1</a>
-	<Island count={2} client:load transition:persist transition:name="counter" />
+	<Island count={2} page="Island 2" client:load transition:persist transition:name="counter" />
 </Layout>

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

@@ -543,6 +543,10 @@ test.describe('View Transitions', () => {
 		cnt = page.locator('.counter pre');
 		// Count should remain
 		await expect(cnt).toHaveText('6');
+
+		// Props should have changed
+		const pageTitle = page.locator('.page');
+		await expect(pageTitle).toHaveText('Island 2');
 	});
 
 	test('Scripts are only executed once', async ({ page, astro }) => {

packages/astro/src/transitions/router.ts

@@ -388,6 +388,11 @@ async function updateDOM(
 				// The element exists in the new page, replace it with the element
 				// from the old page so that state is preserved.
 				newEl.replaceWith(el);
+				// For islands, copy over the props to allow them to re-render
+				if(newEl.localName === 'astro-island') {
+					el.setAttribute('ssr', '');
+					el.setAttribute('props', newEl.getAttribute('props')!);
+				}
 			}
 		}
 		restoreFocus(savedFocus);

packages/integrations/react/client.js

@@ -53,6 +53,17 @@ function getChildren(childString, experimentalReactChildren) {
 	}
 }
 
+// Keep a map of roots so we can reuse them on re-renders
+let rootMap = new WeakMap();
+const getOrCreateRoot = (element, creator) => {
+	let root = rootMap.get(element);
+	if(!root) {
+		root = creator();
+		rootMap.set(element, root);
+	}
+	return root;
+};
+
 export default (element) =>
 	(Component, props, { default: children, ...slotted }, { client }) => {
 		if (!element.hasAttribute('ssr')) return;
@@ -75,14 +86,20 @@ export default (element) =>
 		}
 		if (client === 'only') {
 			return startTransition(() => {
-				const root = createRoot(element);
+				const root = getOrCreateRoot(element, () => {
+					const root = createRoot(element);
+					element.addEventListener('astro:unmount', () => root.unmount(), { once: true });
+					return root;
+				});
 				root.render(componentEl);
-				element.addEventListener('astro:unmount', () => root.unmount(), { once: true });
 			});
 		}
 		startTransition(() => {
-			const root = hydrateRoot(element, componentEl, renderOptions);
+			const root = getOrCreateRoot(element, () => {
+				const root = hydrateRoot(element, componentEl, renderOptions);
+				element.addEventListener('astro:unmount', () => root.unmount(), { once: true });
+				return root;
+			});
 			root.render(componentEl);
-			element.addEventListener('astro:unmount', () => root.unmount(), { once: true });
 		});
 	};