Merge pull request #109 from withastro/main

a900

.changeset/weak-planes-help.md

@@ -0,0 +1,4 @@
+---
+"astro": patch
+---
+Fixes an issue where anchor elements within a custom component could not trigger a view transition.

.github/workflows/check-merge.yml

@@ -45,22 +45,26 @@ jobs:
           files: |
             .changeset/**/*.md
 
-      - name: Check if any changesets contain minor changes
-        id: minor
+      - name: Check if any changesets contain minor or major changes
+        id: check
         if: steps.blocked.outputs.result != 'true'
         run: |
-          echo "Checking for changesets marked as minor"
+          echo "Checking for changesets marked as minor or major"
           echo "found=false" >> $GITHUB_OUTPUT
+
+          regex="[\"']astro[\"']: (minor|major)"
           for file in ${{ steps.changed-files.outputs.all_changed_files }}; do
-            if grep -q "'astro': minor" "$file"; then
-              echo "found=true" >> $GITHUB_OUTPUT
-              echo "$file has a minor release tag"
-            fi
+              if [[ $(cat $file) =~ $regex ]]; then
+                  version="${BASH_REMATCH[1]}"
+                  echo "version=$version" >> $GITHUB_OUTPUT
+                  echo "found=true" >> $GITHUB_OUTPUT
+                  echo "$file has a $version release tag"
+              fi
           done
 
       - name: Add label
         uses: actions/github-script@v6
-        if: steps.minor.outputs.found == 'true'
+        if: steps.check.outputs.found == 'true'
         env:
           issue_number: ${{ github.event.number }}
         with:
@@ -69,12 +73,12 @@ jobs:
               issue_number: process.env.issue_number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              labels: ['semver: minor']
+              labels: ['semver: ${{ steps.check.outputs.version }}']
             });
 
       - name: Change PR Status
         uses: actions/github-script@v6
-        if: steps.minor.outputs.found == 'true'
+        if: steps.check.outputs.found == 'true'
         env:
           issue_number: ${{ github.event.number }}
         with:
@@ -84,5 +88,5 @@ jobs:
               repo: context.repo.repo,
               pull_number: process.env.issue_number,
               event: 'REQUEST_CHANGES',
-              body: 'This PR is blocked because it contains a `minor` changeset. A reviewer will merge this at the next release if approved.'
+              body: 'This PR is blocked because it contains a `${{ steps.check.outputs.version }}` changeset. A reviewer will merge this at the next release if approved.'
             });

packages/astro/components/ViewTransitions.astro

@@ -53,6 +53,9 @@ const { fallback = 'animate' } = Astro.props;
 	if (supportsViewTransitions || getFallback() !== 'none') {
 		document.addEventListener('click', (ev) => {
 			let link = ev.target;
+			if (ev.composed) {
+				link = ev.composedPath()[0];
+			}
 			if (link instanceof Element) {
 				link = link.closest('a, area');
 			}

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

@@ -12,6 +12,11 @@ import Layout from '../components/Layout.astro';
 	<a id="click-redirect-two" href="/redirect-two">go to redirect 2</a>
 	<a id="click-redirect-external" href="/redirect-external">go to a redirect external</a>
 	<a id="click-404" href="/undefined-page">go to undefined page</a>
+	<custom-a id="custom-click-two">
+		<template shadowrootmode="open">
+			<a href="/two">go to 2</a>
+		</template>
+	</custom-a>
 
 	<div id="test">test content</div>
 </Layout>

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

@@ -1206,4 +1206,18 @@ test.describe('View Transitions', () => {
 
 		expect(loads.length, 'There should only be 1 page load').toEqual(1);
 	});
+
+	test('custom elements can trigger a view transition', async ({ page, astro }) => {
+		const loads = [];
+		page.addListener('load', (p) => {
+			loads.push(p.title());
+		});
+		await page.goto(astro.resolveUrl('/one'));
+		await expect(page.locator('#one'), 'should have content').toHaveText('Page 1');
+		// go to page 2
+		await page.click('#custom-click-two');
+		await expect(page.locator('#two'), 'should have content').toHaveText('Page 2');
+
+		expect(loads.length, 'There should only be 1 page load').toEqual(1);
+	});
 });