Merge branch 'main' into fix-svelte-view-transition-state-persistence

.changeset/five-walls-build.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/vue': patch
+---
+
+Fix vue islands keeping their state when using view transition persistence

.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/VueCounter.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="counter">
-		<button @click="subtract()">-</button>
-		<pre>{{ count }}</pre>
-		<button @click="add()">+</button>
+		<button @click="subtract()" class="decrement">-</button>
+		<pre>{{prefix}}{{ count }}</pre>
+		<button @click="add()" class="increment">+</button>
 	</div>
 	<div class="counter-message">
 		<slot />
@@ -12,6 +12,12 @@
 <script lang="ts">
 import { ref } from 'vue';
 export default {
+	props: {
+		prefix: {
+			type: String,
+			default: '',
+		},
+	},
 	setup() {
 		const count = ref(0);
 		const add = () => (count.value = count.value + 1);

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/fixtures/view-transitions/src/pages/island-vue-one.astro

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

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

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

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

@@ -522,7 +522,7 @@ test.describe('View Transitions', () => {
 		expect(secondTime).toBeGreaterThanOrEqual(firstTime);
 	});
 
-	test('Islands can persist using transition:persist', async ({ page, astro }) => {
+	test('React Islands can persist using transition:persist', async ({ page, astro }) => {
 		// Go to page 1
 		await page.goto(astro.resolveUrl('/island-one'));
 		let cnt = page.locator('.counter pre');
@@ -543,8 +543,33 @@ test.describe('View Transitions', () => {
 		const pageTitle = page.locator('.page');
 		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!');
 
-	test('Svelte Islands can persist using transition:persist', async ({ page, astro }) => {
+		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('Svelte Islands can persist using transition:persist', async ({ page, astro }) => {
 		// Go to page 1
 		await page.goto(astro.resolveUrl('/island-svelte-one'));
 		let cnt = page.locator('.counter pre');
@@ -561,6 +586,24 @@ test.describe('View Transitions', () => {
 		// Count should remain, but the prefix should be updated
 		await expect(cnt).toHaveText('B1');
 	});
+
+	test('Vue Islands can persist using transition:persist', async ({ page, astro }) => {
+		// Go to page 1
+		await page.goto(astro.resolveUrl('/island-vue-one'));
+		let cnt = page.locator('.counter pre');
+		await expect(cnt).toHaveText('AA0');
+
+		await page.click('.increment');
+		await expect(cnt).toHaveText('AA1');
+
+		// Navigate to page 2
+		await page.click('#click-two');
+		const 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('BB1');
+	});
 
 	test('transition:persist-props prevents props from changing', async ({ page, astro }) => {
 		// Go to page 1

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 });
+		}
 	};

packages/integrations/vue/client.js

@@ -2,6 +2,9 @@ import { setup } from 'virtual:@astrojs/vue/app';
 import { Suspense, createApp, createSSRApp, h } from 'vue';
 import StaticHtml from './static-html.js';
 
+// keep track of already initialized apps, so we don't hydrate again for view transitions
+let appMap = new WeakMap();
+
 export default (element) =>
 	async (Component, props, slotted, { client }) => {
 		if (!element.hasAttribute('ssr')) return;
@@ -15,21 +18,36 @@ export default (element) =>
 
 		const isHydrate = client !== 'only';
 		const bootstrap = isHydrate ? createSSRApp : createApp;
-		const app = bootstrap({
-			name,
-			render() {
-				let content = h(Component, props, slots);
-				// related to https://github.com/withastro/astro/issues/6549
-				// if the component is async, wrap it in a Suspense component
-				if (isAsync(Component.setup)) {
-					content = h(Suspense, null, content);
-				}
-				return content;
-			},
-		});
-		await setup(app);
-		app.mount(element, isHydrate);
 
+		// keep a reference to the app, props and slots so we can update a running instance later
+		let appInstance = appMap.get(element);
+
+		if (!appInstance) {
+			appInstance = {
+				props,
+				slots,
+			};
+			const app = bootstrap({
+				name,
+				render() {
+					let content = h(Component, appInstance.props, appInstance.slots);
+					appInstance.component = this;
+					// related to https://github.com/withastro/astro/issues/6549
+					// if the component is async, wrap it in a Suspense component
+					if (isAsync(Component.setup)) {
+						content = h(Suspense, null, content);
+					}
+					return content;
+				},
+			});
+			await setup(app);
+			app.mount(element, isHydrate);
+			appMap.set(element, appInstance);
+		} else {
+			appInstance.props = props;
+			appInstance.slots = slots;
+			appInstance.component.$forceUpdate();
+		}
 		element.addEventListener('astro:unmount', () => app.unmount(), { once: true });
 	};