Allow the Image component to get transitions (#7836)

* Images and view transitions

* Upgrade compiler

* Adding a changeset

Author: matthewp

.changeset/healthy-glasses-smash.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Upgrade compiler to bring in Image view transition support

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

@@ -4,5 +4,6 @@ import { defineConfig } from 'astro/config';
 export default defineConfig({
 	experimental: {
 		viewTransitions: true,
+		assets: true,
 	},
 });

packages/astro/e2e/fixtures/view-transitions/src/assets/penguin.jpg

@@ -0,0 +1,5 @@
+---
+import { Image } from 'astro:assets';
+import penguinSrc from '../assets/penguin.jpg';
+---
+<Image src={penguinSrc} alt="a cute penguin" height="400" transition:name="penguin" />

packages/astro/e2e/fixtures/view-transitions/src/components/Penguin.astro

@@ -0,0 +1,9 @@
+---
+import Layout from '../components/Layout.astro';
+import Penguin from '../components/Penguin.astro';
+---
+<Layout>
+	<Penguin />
+	<p id="image-one">Page 1</p>
+	<a id="click-two" href="/image-two">go to 2</a>
+</Layout>

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

@@ -0,0 +1,8 @@
+---
+import Layout from '../components/Layout.astro';
+import Penguin from '../components/Penguin.astro';
+---
+<Layout>
+	<p id="image-two">Page 2</p>
+	<Penguin />
+</Layout>

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

@@ -182,4 +182,11 @@ test.describe('View Transitions', () => {
 		await page.click('#click-one');
 		await expect(p, 'should have content').toHaveText('Page 1');
 	});
+  
+  test('<Image /> component forwards transitions to the <img>', async ({ page, astro }) => {
+		// Go to page 1
+		await page.goto(astro.resolveUrl('/image-one'));
+		const img = page.locator('img[data-astro-transition-scope]');
+		await expect(img).toBeVisible('The image tag should have the transition scope attribute.');
+	}); 
 });

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

@@ -115,7 +115,7 @@
     "test:e2e:match": "playwright test -g"
   },
   "dependencies": {
-    "@astrojs/compiler": "^1.6.0",
+    "@astrojs/compiler": "^1.6.3",
     "@astrojs/internal-helpers": "^0.1.1",
     "@astrojs/language-server": "^1.0.0",
     "@astrojs/markdown-remark": "^2.2.1",