fix(astro): Introduce protect-fallback slot to avoid server islands conflict

[wobsoriano]

Description

We have a naming conflict between our Astro SDK<Protect > component and the Astro server islands fallback content slot.

The fallback slot from our <Protect > component is intended to render content when a user is unauthorized while the fallback slot for server islands is used to show a loading content for example.

To resolve this, we've introduced a new protect-fallback slot while maintaining backwards compatibility with the original fallback slot.

Example:

<Protect server:defer role="admin">
  <p slot="fallback">Loading...</p>
  <p slot="protect-fallback">Not an admin</p>
  <p>You're an admin</p>
</Protect>

Resolves ECO-419

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 20, 2025 8:45pm

[changeset-bot]

🦋 Changeset detected

Latest commit: afd5b79

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clerk/astro	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[wobsoriano]

!snapshot

[clerk-cookie]

Hey @wobsoriano - the snapshot version command generated the following package versions:

Package	Version
@clerk/agent-toolkit	0.0.4-snapshot.v20250220200839
@clerk/astro	2.3.0-snapshot.v20250220200839
@clerk/backend	1.24.3-snapshot.v20250220200839
@clerk/chrome-extension	2.2.11-snapshot.v20250220200839
@clerk/clerk-js	5.54.0-snapshot.v20250220200839
@clerk/elements	0.23.0-snapshot.v20250220200839
@clerk/clerk-expo	2.8.0-snapshot.v20250220200839
@clerk/expo-passkeys	0.1.22-snapshot.v20250220200839
@clerk/express	1.3.50-snapshot.v20250220200839
@clerk/fastify	2.1.23-snapshot.v20250220200839
@clerk/localizations	3.10.8-snapshot.v20250220200839
@clerk/nextjs	6.12.1-snapshot.v20250220200839
@clerk/nuxt	1.2.1-snapshot.v20250220200839
@clerk/clerk-react	5.24.0-snapshot.v20250220200839
@clerk/react-router	1.1.1-snapshot.v20250220200839
@clerk/remix	4.5.1-snapshot.v20250220200839
@clerk/shared	2.23.0-snapshot.v20250220200839
@clerk/tanstack-start	0.10.1-snapshot.v20250220200839
@clerk/testing	1.4.24-snapshot.v20250220200839
@clerk/themes	2.2.20-snapshot.v20250220200839
@clerk/types	4.47.0-snapshot.v20250220200839
@clerk/ui	0.3.25-snapshot.v20250220200839
@clerk/vue	1.3.0-snapshot.v20250220200839

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/[email protected] --save-exact

@clerk/astro

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/expo-passkeys

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/nuxt

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/react-router

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/themes

npm i @clerk/[email protected] --save-exact

@clerk/types

npm i @clerk/[email protected] --save-exact

@clerk/ui

npm i @clerk/[email protected] --save-exact

@clerk/vue

npm i @clerk/[email protected] --save-exact