From ed42e2a87bf6e797884dedaec363aaaa97e9a239 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Thu, 7 Nov 2024 15:12:32 -0800 Subject: [PATCH 1/3] fix(astro): Do not import transition based functions when View Transitions is not enabled --- packages/astro/src/integration/create-integration.ts | 9 +++++++-- packages/astro/src/internal/swap-document.ts | 8 ++++---- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/astro/src/integration/create-integration.ts b/packages/astro/src/integration/create-integration.ts index 4505b0d939d..4db2636e351 100644 --- a/packages/astro/src/integration/create-integration.ts +++ b/packages/astro/src/integration/create-integration.ts @@ -110,9 +110,14 @@ function createIntegration() ` ${command === 'dev' ? `console.log("${packageName}","Initialize Clerk: page")` : ''} import { runInjectionScript, swapDocument } from "${buildImportPath}"; - import { navigate, transitionEnabledOnThisPage } from "astro:transitions/client"; + + 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 @@ -121,7 +126,7 @@ function createIntegration() e.newDocument.body.appendChild(clonedEl); } - e.swap = () => swapDocument(e.newDocument); + e.swap = () => swapDocument(swapFunctions, e.newDocument); }); document.addEventListener('astro:page-load', async (e) => { diff --git a/packages/astro/src/internal/swap-document.ts b/packages/astro/src/internal/swap-document.ts index 0bf08713baa..d6cccafa6a0 100644 --- a/packages/astro/src/internal/swap-document.ts +++ b/packages/astro/src/internal/swap-document.ts @@ -1,9 +1,9 @@ -// 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 @@ -11,7 +11,7 @@ const EMOTION_ATTR = 'data-emotion'; * * 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); From 9bfc5e636e87fba6a79eb633a094274ac0ec3ea5 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Thu, 7 Nov 2024 15:22:27 -0800 Subject: [PATCH 2/3] chore(astro): Add notes about transition enabled function --- packages/astro/src/integration/create-integration.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/astro/src/integration/create-integration.ts b/packages/astro/src/integration/create-integration.ts index 4db2636e351..3880d132c9e 100644 --- a/packages/astro/src/integration/create-integration.ts +++ b/packages/astro/src/integration/create-integration.ts @@ -111,6 +111,9 @@ function createIntegration() ${command === 'dev' ? `console.log("${packageName}","Initialize Clerk: page")` : ''} import { runInjectionScript, swapDocument } from "${buildImportPath}"; + // 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"]'); } From 75852fe66563456ed78913d9aa8d6a1b29bb1ceb Mon Sep 17 00:00:00 2001 From: Robert Soriano Date: Thu, 7 Nov 2024 15:24:16 -0800 Subject: [PATCH 3/3] chore(astro): Add changeset --- .changeset/itchy-icons-destroy.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/itchy-icons-destroy.md diff --git a/.changeset/itchy-icons-destroy.md b/.changeset/itchy-icons-destroy.md new file mode 100644 index 00000000000..02ca92ba057 --- /dev/null +++ b/.changeset/itchy-icons-destroy.md @@ -0,0 +1,5 @@ +--- +"@clerk/astro": patch +--- + +Fix an issue where custom client-side routing breaks when `` is disabled