From 84773f65e7a488f118e4b36ae5755a6eea82d66b Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Thu, 17 Oct 2024 10:20:30 -0700 Subject: [PATCH 01/13] feat(astro): Add support for View Transitions --- .../src/layouts/ViewTransitions.astro | 24 ++++++++ .../src/integration/create-integration.ts | 13 +++- packages/astro/src/internal/index.ts | 1 + packages/astro/src/internal/swap-document.ts | 60 +++++++++++++++++++ packages/astro/tsup.config.ts | 2 +- 5 files changed, 97 insertions(+), 3 deletions(-) create mode 100644 integration/templates/astro-node/src/layouts/ViewTransitions.astro create mode 100644 packages/astro/src/internal/swap-document.ts diff --git a/integration/templates/astro-node/src/layouts/ViewTransitions.astro b/integration/templates/astro-node/src/layouts/ViewTransitions.astro new file mode 100644 index 00000000000..b5c6c9717ba --- /dev/null +++ b/integration/templates/astro-node/src/layouts/ViewTransitions.astro @@ -0,0 +1,24 @@ +--- +interface Props { + title: string; +} + +const { title } = Astro.props; +--- + + + + + + + + + + {title} + + +
+ +
+ + diff --git a/packages/astro/src/integration/create-integration.ts b/packages/astro/src/integration/create-integration.ts index b640dedbbf4..86d8afa2e61 100644 --- a/packages/astro/src/integration/create-integration.ts +++ b/packages/astro/src/integration/create-integration.ts @@ -109,8 +109,17 @@ function createIntegration() 'page', ` ${command === 'dev' ? `console.log("${packageName}","Initialize Clerk: page")` : ''} - import { runInjectionScript } from "${buildImportPath}"; - await runInjectionScript(${JSON.stringify(internalParams)});`, + import { runInjectionScript, swapDocument } from "${buildImportPath}"; + + await runInjectionScript(${JSON.stringify(internalParams)}); + + document.addEventListener('astro:before-swap', (e) => { + e.swap = () => swapDocument(e.newDocument); + }); + + document.addEventListener('astro:page-load', async (e) => { + await runInjectionScript(${JSON.stringify(internalParams)}); + })`, ); }, }, diff --git a/packages/astro/src/internal/index.ts b/packages/astro/src/internal/index.ts index c00256cf3f8..24c1b6670a9 100644 --- a/packages/astro/src/internal/index.ts +++ b/packages/astro/src/internal/index.ts @@ -13,3 +13,4 @@ const runInjectionScript = createInjectionScriptRunner(createClerkInstance); export { runInjectionScript }; export { generateSafeId } from './utils/generateSafeId'; +export { swapDocument } from './swap-document'; diff --git a/packages/astro/src/internal/swap-document.ts b/packages/astro/src/internal/swap-document.ts new file mode 100644 index 00000000000..1aa9f1966d2 --- /dev/null +++ b/packages/astro/src/internal/swap-document.ts @@ -0,0 +1,60 @@ +// eslint-disable-next-line import/no-unresolved +import { swapFunctions } from 'astro:transitions/client'; + +const PERSIST_ATTR = 'data-astro-transition-persist'; + +/** + * @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) { + swapFunctions.deselectScripts(doc); + swapFunctions.swapRootAttributes(doc); + + // Keep the elements created by `@emotion/cache` + const emotionElements = document.querySelectorAll('style[data-emotion]'); + swapHeadElements(doc, Array.from(emotionElements)); + + const restoreFocusFunction = swapFunctions.saveFocus(); + swapFunctions.swapBodyElement(doc.body, document.body); + restoreFocusFunction(); +} + +/** + * This function is a copy of the original `swapHeadElements` function from Astro. + * The difference is that you can pass a list of elements that should not be removed + * in the new document. + * + * See https://github.com/withastro/astro/blob/d6f17044d3873df77cfbc73230cb3194b5a7d82a/packages/astro/src/transitions/swap-functions.ts#L51 + */ +function swapHeadElements(doc: Document, ignoredElements: Element[]) { + for (const el of Array.from(document.head.children)) { + const newEl = persistedHeadElement(el, doc); + + if (newEl) { + newEl.remove(); + } else { + if (!ignoredElements.includes(el)) { + el.remove(); + } + } + } + + document.head.append(...doc.head.children); +} + +function persistedHeadElement(el: Element, newDoc: Document) { + const id = el.getAttribute(PERSIST_ATTR); + const newEl = id && newDoc.head.querySelector(`[${PERSIST_ATTR}="${id}"]`); + if (newEl) { + return newEl; + } + if (el.matches('link[rel=stylesheet]')) { + const href = el.getAttribute('href'); + return newDoc.head.querySelector(`link[rel=stylesheet][href="${href}"]`); + } + return null; +} diff --git a/packages/astro/tsup.config.ts b/packages/astro/tsup.config.ts index 608373d9937..e453f9b1a11 100644 --- a/packages/astro/tsup.config.ts +++ b/packages/astro/tsup.config.ts @@ -24,6 +24,6 @@ export default defineConfig(() => { bundle: true, sourcemap: true, format: ['esm'], - external: ['astro', 'react', 'react-dom', 'node:async_hooks', '#async-local-storage'], + external: ['astro', 'react', 'react-dom', 'node:async_hooks', '#async-local-storage', 'astro:transitions/client'], }; }); From 4311c3c3081d918af89635ab62ca331b01751f27 Mon Sep 17 00:00:00 2001 From: Robert Soriano Date: Thu, 17 Oct 2024 10:21:26 -0700 Subject: [PATCH 02/13] chore: add changeset --- .changeset/late-pigs-study.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/late-pigs-study.md diff --git a/.changeset/late-pigs-study.md b/.changeset/late-pigs-study.md new file mode 100644 index 00000000000..0b521cd1d32 --- /dev/null +++ b/.changeset/late-pigs-study.md @@ -0,0 +1,5 @@ +--- +"@clerk/astro": minor +--- + +Add support for Astro View Transitions From 5727a57a164d8c29419c25996f1894c4b2bbde82 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Thu, 17 Oct 2024 10:35:55 -0700 Subject: [PATCH 03/13] chore: Improve variables and comments --- packages/astro/src/integration/create-integration.ts | 2 ++ packages/astro/src/internal/swap-document.ts | 5 +++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/astro/src/integration/create-integration.ts b/packages/astro/src/integration/create-integration.ts index 86d8afa2e61..c15d4f4ecf3 100644 --- a/packages/astro/src/integration/create-integration.ts +++ b/packages/astro/src/integration/create-integration.ts @@ -113,6 +113,8 @@ function createIntegration() await runInjectionScript(${JSON.stringify(internalParams)}); + // The 2 events below only runs when View Transitions are enabled + document.addEventListener('astro:before-swap', (e) => { e.swap = () => swapDocument(e.newDocument); }); diff --git a/packages/astro/src/internal/swap-document.ts b/packages/astro/src/internal/swap-document.ts index 1aa9f1966d2..0bf08713baa 100644 --- a/packages/astro/src/internal/swap-document.ts +++ b/packages/astro/src/internal/swap-document.ts @@ -2,6 +2,7 @@ import { swapFunctions } from 'astro:transitions/client'; const PERSIST_ATTR = 'data-astro-transition-persist'; +const EMOTION_ATTR = 'data-emotion'; /** * @internal @@ -15,7 +16,7 @@ export function swapDocument(doc: Document) { swapFunctions.swapRootAttributes(doc); // Keep the elements created by `@emotion/cache` - const emotionElements = document.querySelectorAll('style[data-emotion]'); + const emotionElements = document.querySelectorAll(`style[${EMOTION_ATTR}]`); swapHeadElements(doc, Array.from(emotionElements)); const restoreFocusFunction = swapFunctions.saveFocus(); @@ -24,7 +25,7 @@ export function swapDocument(doc: Document) { } /** - * This function is a copy of the original `swapHeadElements` function from Astro. + * This function is a copy of the original `swapHeadElements` function from `astro:transitions/client`. * The difference is that you can pass a list of elements that should not be removed * in the new document. * From 1c5938497afe8f3337cd51ee24f1e4072b49eb51 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Thu, 17 Oct 2024 10:39:34 -0700 Subject: [PATCH 04/13] chore: keep div element created by Clerk in new document --- packages/astro/src/integration/create-integration.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/astro/src/integration/create-integration.ts b/packages/astro/src/integration/create-integration.ts index c15d4f4ecf3..ca407c5abf1 100644 --- a/packages/astro/src/integration/create-integration.ts +++ b/packages/astro/src/integration/create-integration.ts @@ -116,6 +116,13 @@ function createIntegration() // The 2 events below only runs when View Transitions are enabled document.addEventListener('astro:before-swap', (e) => { + const clerkComponents = document.querySelector('#clerk-components'); + // Keep the div element added by Clerk + if (clerkComponents) { + const clonedEl = clerkComponents.cloneNode(true); + e.newDocument.body.appendChild(clonedEl); + } + e.swap = () => swapDocument(e.newDocument); }); From 8765cd4a1b1db4af59a075a979dee526a9f9a7d8 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Thu, 17 Oct 2024 11:08:27 -0700 Subject: [PATCH 05/13] test(astro): Add initial e2e --- ...nsitions.astro => ViewTransitionsLayout.astro} | 14 ++++++++++++++ .../src/pages/transitions/profile.astro | 10 ++++++++++ .../src/pages/transitions/sign-in.astro | 10 ++++++++++ integration/tests/astro/components.test.ts | 15 +++++++++++++++ 4 files changed, 49 insertions(+) rename integration/templates/astro-node/src/layouts/{ViewTransitions.astro => ViewTransitionsLayout.astro} (60%) create mode 100644 integration/templates/astro-node/src/pages/transitions/profile.astro create mode 100644 integration/templates/astro-node/src/pages/transitions/sign-in.astro diff --git a/integration/templates/astro-node/src/layouts/ViewTransitions.astro b/integration/templates/astro-node/src/layouts/ViewTransitionsLayout.astro similarity index 60% rename from integration/templates/astro-node/src/layouts/ViewTransitions.astro rename to integration/templates/astro-node/src/layouts/ViewTransitionsLayout.astro index b5c6c9717ba..88bfc38f3b1 100644 --- a/integration/templates/astro-node/src/layouts/ViewTransitions.astro +++ b/integration/templates/astro-node/src/layouts/ViewTransitionsLayout.astro @@ -1,4 +1,7 @@ --- +import { ViewTransitions } from 'astro:transitions'; +import { SignedIn, SignedOut, UserButton } from "@clerk/astro/components"; + interface Props { title: string; } @@ -15,8 +18,19 @@ const { title } = Astro.props; {title} + +
+ +
diff --git a/integration/templates/astro-node/src/pages/transitions/profile.astro b/integration/templates/astro-node/src/pages/transitions/profile.astro new file mode 100644 index 00000000000..2a729e16dad --- /dev/null +++ b/integration/templates/astro-node/src/pages/transitions/profile.astro @@ -0,0 +1,10 @@ +--- +import { UserProfile } from "@clerk/astro/components"; +import Layout from "../../layouts/ViewTransitionsLayout.astro"; +--- + + +
+ +
+ diff --git a/integration/templates/astro-node/src/pages/transitions/sign-in.astro b/integration/templates/astro-node/src/pages/transitions/sign-in.astro new file mode 100644 index 00000000000..d0836ee5105 --- /dev/null +++ b/integration/templates/astro-node/src/pages/transitions/sign-in.astro @@ -0,0 +1,10 @@ +--- +import { SignIn } from "@clerk/astro/components"; +import Layout from "../../layouts/ViewTransitionsLayout.astro"; +--- + + +
+ +
+ diff --git a/integration/tests/astro/components.test.ts b/integration/tests/astro/components.test.ts index 8f9b3f9dfd3..c2043d3d34b 100644 --- a/integration/tests/astro/components.test.ts +++ b/integration/tests/astro/components.test.ts @@ -451,4 +451,19 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f await u.po.expect.toBeSignedIn(); await expect(u.page.getByText('Not a member')).toBeVisible(); }); + + test('renders components when view transitions is enabled', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.page.goToRelative('/transitions/sign-in'); + await u.po.signIn.waitForMounted(); + + await u.po.signIn.setIdentifier(fakeAdmin.email); + await u.po.signIn.continue(); + await u.page.waitForURL(`${app.serverUrl}/transitions/sign-in#/factor-one`); + + await u.po.signIn.setPassword(fakeAdmin.password); + await u.po.signIn.continue(); + + await u.po.expect.toBeSignedIn(); + }); }); From 1946e5988a94b19c70163bff0ffd634e1d294c1b Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Thu, 17 Oct 2024 12:35:17 -0700 Subject: [PATCH 06/13] test: improve view transition e2e --- .../src/layouts/ViewTransitionsLayout.astro | 11 ----------- .../src/pages/transitions/index.astro | 15 +++++++++++++++ .../src/pages/transitions/profile.astro | 10 ---------- .../src/pages/transitions/sign-in.astro | 2 +- integration/tests/astro/components.test.ts | 18 ++++++++++++++++-- packages/astro/src/internal/swap-document.ts | 4 ++-- 6 files changed, 34 insertions(+), 26 deletions(-) create mode 100644 integration/templates/astro-node/src/pages/transitions/index.astro delete mode 100644 integration/templates/astro-node/src/pages/transitions/profile.astro diff --git a/integration/templates/astro-node/src/layouts/ViewTransitionsLayout.astro b/integration/templates/astro-node/src/layouts/ViewTransitionsLayout.astro index 88bfc38f3b1..a01199898b7 100644 --- a/integration/templates/astro-node/src/layouts/ViewTransitionsLayout.astro +++ b/integration/templates/astro-node/src/layouts/ViewTransitionsLayout.astro @@ -1,6 +1,5 @@ --- import { ViewTransitions } from 'astro:transitions'; -import { SignedIn, SignedOut, UserButton } from "@clerk/astro/components"; interface Props { title: string; @@ -21,16 +20,6 @@ const { title } = Astro.props; -
- -
diff --git a/integration/templates/astro-node/src/pages/transitions/index.astro b/integration/templates/astro-node/src/pages/transitions/index.astro new file mode 100644 index 00000000000..a9465f5eb46 --- /dev/null +++ b/integration/templates/astro-node/src/pages/transitions/index.astro @@ -0,0 +1,15 @@ +--- +import { SignedIn, SignedOut, UserButton } from "@clerk/astro/components"; +import Layout from "../../layouts/ViewTransitionsLayout.astro"; +--- + + +
+ + Sign in + + + + +
+ diff --git a/integration/templates/astro-node/src/pages/transitions/profile.astro b/integration/templates/astro-node/src/pages/transitions/profile.astro deleted file mode 100644 index 2a729e16dad..00000000000 --- a/integration/templates/astro-node/src/pages/transitions/profile.astro +++ /dev/null @@ -1,10 +0,0 @@ ---- -import { UserProfile } from "@clerk/astro/components"; -import Layout from "../../layouts/ViewTransitionsLayout.astro"; ---- - - -
- -
- diff --git a/integration/templates/astro-node/src/pages/transitions/sign-in.astro b/integration/templates/astro-node/src/pages/transitions/sign-in.astro index d0836ee5105..5afdd5a3489 100644 --- a/integration/templates/astro-node/src/pages/transitions/sign-in.astro +++ b/integration/templates/astro-node/src/pages/transitions/sign-in.astro @@ -5,6 +5,6 @@ import Layout from "../../layouts/ViewTransitionsLayout.astro";
- +
diff --git a/integration/tests/astro/components.test.ts b/integration/tests/astro/components.test.ts index c2043d3d34b..16af0b49ec7 100644 --- a/integration/tests/astro/components.test.ts +++ b/integration/tests/astro/components.test.ts @@ -452,9 +452,17 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f await expect(u.page.getByText('Not a member')).toBeVisible(); }); - test('renders components when view transitions is enabled', async ({ page, context }) => { + test('renders components and keep internal routing behavior when view transitions is enabled', async ({ + page, + context, + }) => { const u = createTestUtils({ app, page, context }); - await u.page.goToRelative('/transitions/sign-in'); + await u.page.goToRelative('/transitions'); + await u.page.getByRole('link', { name: /Sign in/i }).click(); + + // Components should be rendered on the new document + // when navigating through links + await u.page.waitForURL(`${app.serverUrl}/transitions/sign-in`); await u.po.signIn.waitForMounted(); await u.po.signIn.setIdentifier(fakeAdmin.email); @@ -465,5 +473,11 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f await u.po.signIn.continue(); await u.po.expect.toBeSignedIn(); + + // Internal Clerk routing should still work + await u.page.waitForURL(`${app.serverUrl}/transitions`); + + // Components should be rendered on hard reload + await u.po.userButton.waitForMounted(); }); }); diff --git a/packages/astro/src/internal/swap-document.ts b/packages/astro/src/internal/swap-document.ts index 0bf08713baa..fb2e93a1abd 100644 --- a/packages/astro/src/internal/swap-document.ts +++ b/packages/astro/src/internal/swap-document.ts @@ -1,5 +1,5 @@ -// eslint-disable-next-line import/no-unresolved -import { swapFunctions } from 'astro:transitions/client'; +// @ts-expect-error: todo +import { swapFunctions } from 'astro/virtual-modules/transitions-swap-functions.js'; const PERSIST_ATTR = 'data-astro-transition-persist'; const EMOTION_ATTR = 'data-emotion'; From 12568f7ab1bba86bfb1d5d7c7500e195ea5c6084 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Thu, 17 Oct 2024 12:53:13 -0700 Subject: [PATCH 07/13] test: fix vite error --- integration/templates/astro-node/astro.config.mjs | 6 ++++++ packages/astro/src/internal/swap-document.ts | 4 ++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/integration/templates/astro-node/astro.config.mjs b/integration/templates/astro-node/astro.config.mjs index 6b08d1babd3..2e0ba9f591a 100644 --- a/integration/templates/astro-node/astro.config.mjs +++ b/integration/templates/astro-node/astro.config.mjs @@ -14,4 +14,10 @@ export default defineConfig({ server: { port: Number(process.env.PORT), }, + vite: { + optimizeDeps: { + // Fix "Outdated Optimize Dep" error in Vite + exclude: ['@clerk/astro/internal'], + }, + }, }); diff --git a/packages/astro/src/internal/swap-document.ts b/packages/astro/src/internal/swap-document.ts index fb2e93a1abd..0bf08713baa 100644 --- a/packages/astro/src/internal/swap-document.ts +++ b/packages/astro/src/internal/swap-document.ts @@ -1,5 +1,5 @@ -// @ts-expect-error: todo -import { swapFunctions } from 'astro/virtual-modules/transitions-swap-functions.js'; +// 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'; From 2324c7395ea6f3b79c57d33dd18cbc1ff41f8946 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Thu, 17 Oct 2024 12:54:40 -0700 Subject: [PATCH 08/13] test: fix vite error --- integration/templates/astro-node/astro.config.mjs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/integration/templates/astro-node/astro.config.mjs b/integration/templates/astro-node/astro.config.mjs index 2e0ba9f591a..a41e4aa86da 100644 --- a/integration/templates/astro-node/astro.config.mjs +++ b/integration/templates/astro-node/astro.config.mjs @@ -16,7 +16,8 @@ export default defineConfig({ }, vite: { optimizeDeps: { - // Fix "Outdated Optimize Dep" error in Vite + // Fix "Outdated Optimize Dep" error in Vite. + // This only happens in our test environment. exclude: ['@clerk/astro/internal'], }, }, From 9160f1370b87765e7d38de9e4a5e7eb995be6f9d Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Thu, 17 Oct 2024 12:56:35 -0700 Subject: [PATCH 09/13] test: add more guide comments --- integration/tests/astro/components.test.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/integration/tests/astro/components.test.ts b/integration/tests/astro/components.test.ts index 16af0b49ec7..ed88f2a29e4 100644 --- a/integration/tests/astro/components.test.ts +++ b/integration/tests/astro/components.test.ts @@ -458,9 +458,10 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f }) => { const u = createTestUtils({ app, page, context }); await u.page.goToRelative('/transitions'); + // Navigate to sign-in page using link to simulate transition await u.page.getByRole('link', { name: /Sign in/i }).click(); - // Components should be rendered on the new document + // Components should be mounted on the new document // when navigating through links await u.page.waitForURL(`${app.serverUrl}/transitions/sign-in`); await u.po.signIn.waitForMounted(); From 695e25f50ad49a34880c3ddf1c17e0ea799d0cb0 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Thu, 17 Oct 2024 13:27:29 -0700 Subject: [PATCH 10/13] test: add vite fix to hybrid test --- integration/templates/astro-hybrid/astro.config.mjs | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/integration/templates/astro-hybrid/astro.config.mjs b/integration/templates/astro-hybrid/astro.config.mjs index 30ff739e8a3..405a8b4db9a 100644 --- a/integration/templates/astro-hybrid/astro.config.mjs +++ b/integration/templates/astro-hybrid/astro.config.mjs @@ -8,4 +8,11 @@ export default defineConfig({ server: { port: Number(process.env.PORT), }, + vite: { + optimizeDeps: { + // Fix "Outdated Optimize Dep" error in Vite. + // This only happens in our test environment. + exclude: ['@clerk/astro/internal'], + }, + }, }); From 696314791275ca3f8243996f7d06040abb470f0b Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Thu, 17 Oct 2024 13:52:49 -0700 Subject: [PATCH 11/13] test: fix vite optimize deps error --- integration/templates/astro-hybrid/astro.config.mjs | 2 +- integration/templates/astro-node/astro.config.mjs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/integration/templates/astro-hybrid/astro.config.mjs b/integration/templates/astro-hybrid/astro.config.mjs index 405a8b4db9a..544c52fb7cf 100644 --- a/integration/templates/astro-hybrid/astro.config.mjs +++ b/integration/templates/astro-hybrid/astro.config.mjs @@ -12,7 +12,7 @@ export default defineConfig({ optimizeDeps: { // Fix "Outdated Optimize Dep" error in Vite. // This only happens in our test environment. - exclude: ['@clerk/astro/internal'], + exclude: ['astro:transitions/client'], }, }, }); diff --git a/integration/templates/astro-node/astro.config.mjs b/integration/templates/astro-node/astro.config.mjs index a41e4aa86da..47290a48250 100644 --- a/integration/templates/astro-node/astro.config.mjs +++ b/integration/templates/astro-node/astro.config.mjs @@ -18,7 +18,7 @@ export default defineConfig({ optimizeDeps: { // Fix "Outdated Optimize Dep" error in Vite. // This only happens in our test environment. - exclude: ['@clerk/astro/internal'], + exclude: ['astro:transitions/client'], }, }, }); From a2afb959eb52b9781c88aee90e54371280b1edf4 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Fri, 18 Oct 2024 08:11:08 -0700 Subject: [PATCH 12/13] chore: improve navigation --- .../src/integration/create-integration.ts | 41 +++++++++++-------- .../src/internal/create-clerk-instance.ts | 2 +- 2 files changed, 24 insertions(+), 19 deletions(-) diff --git a/packages/astro/src/integration/create-integration.ts b/packages/astro/src/integration/create-integration.ts index ca407c5abf1..4505b0d939d 100644 --- a/packages/astro/src/integration/create-integration.ts +++ b/packages/astro/src/integration/create-integration.ts @@ -110,25 +110,30 @@ function createIntegration() ` ${command === 'dev' ? `console.log("${packageName}","Initialize Clerk: page")` : ''} import { runInjectionScript, swapDocument } from "${buildImportPath}"; - - await runInjectionScript(${JSON.stringify(internalParams)}); - - // The 2 events below only runs when View Transitions are enabled - - document.addEventListener('astro:before-swap', (e) => { - const clerkComponents = document.querySelector('#clerk-components'); - // Keep the div element added by Clerk - if (clerkComponents) { - const clonedEl = clerkComponents.cloneNode(true); - e.newDocument.body.appendChild(clonedEl); - } - - e.swap = () => swapDocument(e.newDocument); - }); - - document.addEventListener('astro:page-load', async (e) => { + import { navigate, transitionEnabledOnThisPage } from "astro:transitions/client"; + + if (transitionEnabledOnThisPage()) { + document.addEventListener('astro:before-swap', (e) => { + const clerkComponents = document.querySelector('#clerk-components'); + // Keep the div element added by Clerk + if (clerkComponents) { + const clonedEl = clerkComponents.cloneNode(true); + e.newDocument.body.appendChild(clonedEl); + } + + e.swap = () => swapDocument(e.newDocument); + }); + + document.addEventListener('astro:page-load', async (e) => { + await runInjectionScript({ + ...${JSON.stringify(internalParams)}, + routerPush: navigate, + routerReplace: (url) => navigate(url, { history: 'replace' }), + }); + }) + } else { await runInjectionScript(${JSON.stringify(internalParams)}); - })`, + }`, ); }, }, diff --git a/packages/astro/src/internal/create-clerk-instance.ts b/packages/astro/src/internal/create-clerk-instance.ts index da6e4b11dcd..597519dda58 100644 --- a/packages/astro/src/internal/create-clerk-instance.ts +++ b/packages/astro/src/internal/create-clerk-instance.ts @@ -45,9 +45,9 @@ async function createClerkInstanceInternal(options?: AstroClerkCreateInstancePar } initOptions = { - ...options, routerPush: createNavigationHandler(window.history.pushState.bind(window.history)), routerReplace: createNavigationHandler(window.history.replaceState.bind(window.history)), + ...options, }; return clerkJSInstance From b58e76b3a393f3ac0c83f907258f882af037e608 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Fri, 18 Oct 2024 08:42:51 -0700 Subject: [PATCH 13/13] chore: exclude astro transitions imports from optimized deps --- integration/templates/astro-hybrid/astro.config.mjs | 7 ------- integration/templates/astro-node/astro.config.mjs | 7 ------- packages/astro/src/integration/vite-plugin-astro-config.ts | 2 ++ 3 files changed, 2 insertions(+), 14 deletions(-) diff --git a/integration/templates/astro-hybrid/astro.config.mjs b/integration/templates/astro-hybrid/astro.config.mjs index 544c52fb7cf..30ff739e8a3 100644 --- a/integration/templates/astro-hybrid/astro.config.mjs +++ b/integration/templates/astro-hybrid/astro.config.mjs @@ -8,11 +8,4 @@ export default defineConfig({ server: { port: Number(process.env.PORT), }, - vite: { - optimizeDeps: { - // Fix "Outdated Optimize Dep" error in Vite. - // This only happens in our test environment. - exclude: ['astro:transitions/client'], - }, - }, }); diff --git a/integration/templates/astro-node/astro.config.mjs b/integration/templates/astro-node/astro.config.mjs index 47290a48250..6b08d1babd3 100644 --- a/integration/templates/astro-node/astro.config.mjs +++ b/integration/templates/astro-node/astro.config.mjs @@ -14,11 +14,4 @@ export default defineConfig({ server: { port: Number(process.env.PORT), }, - vite: { - optimizeDeps: { - // Fix "Outdated Optimize Dep" error in Vite. - // This only happens in our test environment. - exclude: ['astro:transitions/client'], - }, - }, }); diff --git a/packages/astro/src/integration/vite-plugin-astro-config.ts b/packages/astro/src/integration/vite-plugin-astro-config.ts index dfc60db1209..f7f511a4d4c 100644 --- a/packages/astro/src/integration/vite-plugin-astro-config.ts +++ b/packages/astro/src/integration/vite-plugin-astro-config.ts @@ -26,6 +26,8 @@ export function vitePluginAstroConfig(astroConfig: AstroConfig): VitePlugin { // This ensures @clerk/astro/client is properly processed and bundled, // resolving runtime import issues in these components. config.optimizeDeps?.include?.push('@clerk/astro/client'); + // Let astro vite plugin handle this. + config.optimizeDeps?.exclude?.push('astro:transitions/client'); }, load(id) { if (id === resolvedVirtualModuleId) {