Skip to content

fix(astro): Avoid importing transition functions when View Transitions is disabled #4521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wobsoriano merged 3 commits into from
Nov 8, 2024
Merged

fix(astro): Avoid importing transition functions when View Transitions is disabled #4521

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ed42e2a
fix(astro): Do not import transition based functions when View Transi…
wobsoriano Nov 7, 2024
9bfc5e6
chore(astro): Add notes about transition enabled function
wobsoriano Nov 7, 2024
75852fe
chore(astro): Add changeset
wobsoriano Nov 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/itchy-icons-destroy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@clerk/astro": patch
---

Fix an issue where custom client-side routing breaks when `<ViewTransitions />` is disabled
12 changes: 10 additions & 2 deletions packages/astro/src/integration/create-integration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,9 +110,17 @@ function createIntegration<Params extends HotloadAstroClerkIntegrationParams>()
`
${command === 'dev' ? `console.log("${packageName}","Initialize Clerk: page")` : ''}
import { runInjectionScript, swapDocument } from "${buildImportPath}";
import { navigate, transitionEnabledOnThisPage } from "astro:transitions/client";

// Taken from https://github.com/withastro/astro/blob/e10b03e88c22592fbb42d7245b65c4f486ab736d/packages/astro/src/transitions/router.ts#L39.
// Importing it directly from astro:transitions/client breaks custom client-side routing
// even when View Transitions is disabled.
const transitionEnabledOnThisPage = () => {
return !!document.querySelector('[name="astro-view-transitions-enabled"]');
}

if (transitionEnabledOnThisPage()) {
const { navigate, swapFunctions } = await import('astro:transitions/client');

document.addEventListener('astro:before-swap', (e) => {
const clerkComponents = document.querySelector('#clerk-components');
// Keep the div element added by Clerk
Expand All @@ -121,7 +129,7 @@ function createIntegration<Params extends HotloadAstroClerkIntegrationParams>()
e.newDocument.body.appendChild(clonedEl);
}

e.swap = () => swapDocument(e.newDocument);
e.swap = () => swapDocument(swapFunctions, e.newDocument);
});

document.addEventListener('astro:page-load', async (e) => {
Expand Down
8 changes: 4 additions & 4 deletions packages/astro/src/internal/swap-document.ts
View file
Open in desktop

@wobsoriano wobsoriano Nov 7, 2024

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to avoid importing functions from astro:transitions as there is a code that gets initialized and configures the popstate event which causes full page reload when doing custom client-side routing

Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
// eslint-disable-next-line import/no-unresolved
import { swapFunctions } from 'astro:transitions/client';

const PERSIST_ATTR = 'data-astro-transition-persist';
const EMOTION_ATTR = 'data-emotion';

// eslint-disable-next-line @typescript-eslint/consistent-type-imports
type SwapFunctions = typeof import('astro:transitions/client').swapFunctions;

/**
* @internal
* Custom swap function to make mounting and styling
* of Clerk components work with View Transitions in Astro.
*
* See https://docs.astro.build/en/guides/view-transitions/#building-a-custom-swap-function
*/
export function swapDocument(doc: Document) {
export function swapDocument(swapFunctions: SwapFunctions, doc: Document) {
swapFunctions.deselectScripts(doc);
swapFunctions.swapRootAttributes(doc);

Expand Down