Fix SolidJS view transition state persistence (#11998)

* Fix SolidJS view transition state persistence

* Add changeset

---------

Co-authored-by: Martin Trapp <94928215+martrapp@users.noreply.github.com>

.changeset/grumpy-bobcats-rush.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/solid-js': patch
+---
+
+Fix view transition state persistence

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

@@ -1,14 +1,19 @@
 import nodejs from '@astrojs/node';
 import react from '@astrojs/react';
 import svelte from '@astrojs/svelte';
+import solidjs from '@astrojs/solid-js';
 import vue from '@astrojs/vue';
 import { defineConfig } from 'astro/config';
 
 // https://astro.build/config
 export default defineConfig({
 	output: 'hybrid',
 	adapter: nodejs({ mode: 'standalone' }),
-	integrations: [react(),vue(),svelte()],
+	integrations: [react( {
+		exclude: ['**/solid/**'],
+	}),vue(),svelte(),solidjs({
+		include: ['**/solid/**'],
+	})],
 	redirects: {
 		'/redirect-two': '/two',
 		'/redirect-external': 'http://example.com/',

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

@@ -7,10 +7,12 @@
     "@astrojs/react": "workspace:*",
     "@astrojs/svelte": "workspace:*",
     "@astrojs/vue": "workspace:*",
+    "@astrojs/solid-js": "workspace:*",
     "astro": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "svelte": "^4.2.19",
-    "vue": "^3.5.3"
+    "vue": "^3.5.3",
+    "solid-js": "^1.8.0"
   }
 }

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

@@ -0,0 +1,19 @@
+import {createSignal} from "solid-js";
+
+export default function Counter(props) {
+	const [count, setCount] = createSignal(0);
+	const add = () => setCount(count() + 1);
+	const subtract = () => setCount(count() - 1);
+
+	return (
+		<>
+			<div class="counter">
+				<button onClick={subtract} class="decrement">-</button>
+
+				<pre>{props.prefix ?? ''}{count()}{props.postfix ?? ""}</pre>
+				<button onClick={add} class="increment">+</button>
+			</div>
+			<div class="counter-message">{props.children}</div>
+		</>
+	);
+}

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

@@ -0,0 +1,11 @@
+---
+import Layout from '../components/Layout.astro';
+import Counter from '../components/solid/Counter.jsx';
+export const prerender = false;
+
+---
+<Layout>
+	<p id="island-one">Page 1</p>
+	<a id="click-two" href="/island-solid-two">go to 2</a>
+	<Counter prefix="A" client:load transition:persist transition:name="counter" />
+</Layout>

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

@@ -0,0 +1,11 @@
+---
+import Layout from '../components/Layout.astro';
+import Counter from '../components/solid/Counter.jsx';
+export const prerender = false;
+
+---
+<Layout>
+	<p id="island-two">Page 2</p>
+	<a id="click-one" href="/island-solid-one">go to 1</a>
+	<Counter prefix="B" postfix="!" client:load transition:persist transition:name="counter" />
+</Layout>

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

@@ -544,6 +544,31 @@ test.describe('View Transitions', () => {
 		await expect(pageTitle).toHaveText('Island 2');
 	});
 
+	test('Solid Islands can persist using transition:persist', async ({ page, astro }) => {
+		// Go to page 1
+		await page.goto(astro.resolveUrl('/island-solid-one'));
+		let cnt = page.locator('.counter pre');
+		await expect(cnt).toHaveText('A0');
+
+		await page.click('.increment');
+		await expect(cnt).toHaveText('A1');
+
+		// Navigate to page 2
+		await page.click('#click-two');
+		let p = page.locator('#island-two');
+		await expect(p).toBeVisible();
+		cnt = page.locator('.counter pre');
+		// Count should remain, but the prefix should be updated
+		await expect(cnt).toHaveText('B1!');
+
+		await page.click('#click-one');
+		p = page.locator('#island-one');
+		await expect(p).toBeVisible();
+		cnt = page.locator('.counter pre');
+		// Count should remain, but the postfix should be removed again (to test unsetting props)
+		await expect(cnt).toHaveText('A1');
+  });
+
 	test('Vue Islands can persist using transition:persist', async ({ page, astro }) => {
 		// Go to page 1
 		await page.goto(astro.resolveUrl('/island-vue-one'));

packages/integrations/solid/src/client.ts

@@ -1,10 +1,12 @@
 import { Suspense } from 'solid-js';
+import { createStore, reconcile } from 'solid-js/store';
 import { createComponent, hydrate, render } from 'solid-js/web';
 
+const alreadyInitializedElements = new WeakMap<Element, any>();
+
 export default (element: HTMLElement) =>
 	(Component: any, props: any, slotted: any, { client }: { client: string }) => {
 		if (!element.hasAttribute('ssr')) return;
-
 		const isHydrate = client !== 'only';
 		const bootstrap = isHydrate ? hydrate : render;
 
@@ -32,31 +34,44 @@ export default (element: HTMLElement) =>
 
 		const { default: children, ...slots } = _slots;
 		const renderId = element.dataset.solidRenderId;
+		if (alreadyInitializedElements.has(element)) {
+			// update the mounted component
+			alreadyInitializedElements.get(element)!(
+				// reconcile will make sure to apply as little updates as possible, and also remove missing values w/o breaking reactivity
+				reconcile({
+					...props,
+					...slots,
+					children,
+				}),
+			);
+		} else {
+			const [store, setStore] = createStore({
+				...props,
+				...slots,
+				children,
+			});
+			// store the function to update the current mounted component
+			alreadyInitializedElements.set(element, setStore);
 
-		const dispose = bootstrap(
-			() => {
-				const inner = () =>
-					createComponent(Component, {
-						...props,
-						...slots,
-						children,
-					});
+			const dispose = bootstrap(
+				() => {
+					const inner = () => createComponent(Component, store);
 
-				if (isHydrate) {
-					return createComponent(Suspense, {
-						get children() {
-							return inner();
-						},
-					});
-				} else {
-					return inner();
-				}
-			},
-			element,
-			{
-				renderId,
-			},
-		);
-
-		element.addEventListener('astro:unmount', () => dispose(), { once: true });
+					if (isHydrate) {
+						return createComponent(Suspense, {
+							get children() {
+								return inner();
+							},
+						});
+					} else {
+						return inner();
+					}
+				},
+				element,
+				{
+					renderId,
+				},
+			);
+			element.addEventListener('astro:unmount', () => dispose(), { once: true });
+		}
 	};