chore(astro): Remove deprecated as prop from unstyled components (#7839)

Author: wobsoriano

.changeset/metal-buckets-occur.md

@@ -0,0 +1,21 @@
+---
+'@clerk/astro': major
+---
+
+Remove deprecated `as` prop from unstyled button components (`SignInButton`, `SignUpButton`, `SignOutButton`, `CheckoutButton`, `PlanDetailsButton`, `SubscriptionDetailsButton`). Use the `asChild` prop with a custom element in the default slot instead.
+
+**Before:**
+
+```astro
+<SignInButton as="a" href="/sign-in">
+  Sign in
+</SignInButton>
+```
+
+**After:**
+
+```astro
+<SignInButton asChild>
+  <a href="/sign-in">Sign in</a>
+</SignInButton>
+```

packages/astro/src/astro-components/unstyled/CheckoutButton.astro

@@ -1,22 +1,16 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types';
 import type { __experimental_CheckoutButtonProps } from '@clerk/shared/types';
 import type { ButtonProps } from '../../types';
-import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+import { addUnstyledAttributeToFirstTag } from './utils';
 
-type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> &
+type Props = ButtonProps &
   Omit<__experimental_CheckoutButtonProps, 'onSubscriptionComplete'> & { clickIdentifier?: string };
 
 import { generateSafeId } from '@clerk/astro/internal';
 
 const safeId = generateSafeId();
 
-if ('as' in Astro.props) {
-  logAsPropUsageDeprecation();
-}
-
 const {
-  as: Tag = 'button',
   asChild,
   planId,
   planPeriod,
@@ -48,12 +42,12 @@ if (asChild) {
   asChild ? (
     <Fragment set:html={htmlElement} />
   ) : (
-    <Tag
+    <button
       {...props}
       data-clerk-unstyled-id={safeId}
     >
       <slot>Checkout</slot>
-    </Tag>
+    </button>
   )
 }
 

packages/astro/src/astro-components/unstyled/PlanDetailsButton.astro

@@ -1,20 +1,15 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types';
 import type { __experimental_PlanDetailsButtonProps } from '@clerk/shared/types';
 import type { ButtonProps } from '../../types';
-import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+import { addUnstyledAttributeToFirstTag } from './utils';
 
-type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> & __experimental_PlanDetailsButtonProps;
+type Props = ButtonProps & __experimental_PlanDetailsButtonProps;
 
 import { generateSafeId } from '@clerk/astro/internal';
 
 const safeId = generateSafeId();
 
-if ('as' in Astro.props) {
-  logAsPropUsageDeprecation();
-}
-
-const { as: Tag = 'button', asChild, plan, planId, initialPlanPeriod, planDetailsProps, ...props } = Astro.props;
+const { asChild, plan, planId, initialPlanPeriod, planDetailsProps, ...props } = Astro.props;
 
 const planDetailsOptions = {
   plan,
@@ -35,12 +30,12 @@ if (asChild) {
   asChild ? (
     <Fragment set:html={htmlElement} />
   ) : (
-    <Tag
+    <button
       {...props}
       data-clerk-unstyled-id={safeId}
     >
       <slot>Plan details</slot>
-    </Tag>
+    </button>
   )
 }
 

packages/astro/src/astro-components/unstyled/SignInButton.astro

@@ -1,21 +1,15 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types';
 import type { SignInButtonProps } from '@clerk/shared/types';
 import type { ButtonProps } from '../../types';
-import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+import { addUnstyledAttributeToFirstTag } from './utils';
 
-type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> & SignInButtonProps;
+type Props = ButtonProps & SignInButtonProps;
 
 import { generateSafeId } from '@clerk/astro/internal';
 
 const safeId = generateSafeId();
 
-if ('as' in Astro.props) {
-  logAsPropUsageDeprecation();
-}
-
 const {
-  as: Tag = 'button',
   asChild,
   forceRedirectUrl,
   fallbackRedirectUrl,
@@ -44,12 +38,12 @@ if (asChild) {
   asChild ? (
     <Fragment set:html={htmlElement} />
   ) : (
-    <Tag
+    <button
       {...props}
       data-clerk-unstyled-id={safeId}
     >
       <slot>Sign in</slot>
-    </Tag>
+    </button>
   )
 }
 

packages/astro/src/astro-components/unstyled/SignOutButton.astro

@@ -1,20 +1,15 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types';
-import type { SignOutOptions, Without } from '@clerk/shared/types';
+import type { SignOutOptions } from '@clerk/shared/types';
 import type { ButtonProps } from '../../types';
-import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+import { addUnstyledAttributeToFirstTag } from './utils';
 
-type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignOutOptions & ButtonProps<Tag>>;
+type Props = SignOutOptions & ButtonProps;
 
 import { generateSafeId } from '@clerk/astro/internal';
 
 const safeId = generateSafeId();
 
-if ('as' in Astro.props) {
-  logAsPropUsageDeprecation();
-}
-
-const { as: Tag = 'button', asChild, redirectUrl = '/', sessionId, ...elementProps } = Astro.props;
+const { asChild, redirectUrl = '/', sessionId, ...elementProps } = Astro.props;
 
 let htmlElement = '';
 
@@ -28,12 +23,12 @@ if (asChild) {
   asChild ? (
     <Fragment set:html={htmlElement} />
   ) : (
-    <Tag
+    <button
       {...elementProps}
       data-clerk-unstyled-id={safeId}
     >
       <slot>Sign out</slot>
-    </Tag>
+    </button>
   )
 }
 

packages/astro/src/astro-components/unstyled/SignUpButton.astro

@@ -1,21 +1,15 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types';
 import type { SignUpButtonProps } from '@clerk/shared/types';
 import type { ButtonProps } from '../../types';
-import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+import { addUnstyledAttributeToFirstTag } from './utils';
 
-type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> & SignUpButtonProps;
+type Props = ButtonProps & SignUpButtonProps;
 
 import { generateSafeId } from '@clerk/astro/internal';
 
 const safeId = generateSafeId();
 
-if ('as' in Astro.props) {
-  logAsPropUsageDeprecation();
-}
-
 const {
-  as: Tag = 'button',
   asChild,
   fallbackRedirectUrl,
   forceRedirectUrl,
@@ -46,12 +40,12 @@ if (asChild) {
   asChild ? (
     <Fragment set:html={htmlElement} />
   ) : (
-    <Tag
+    <button
       {...props}
       data-clerk-unstyled-id={safeId}
     >
       <slot>Sign up</slot>
-    </Tag>
+    </button>
   )
 }
 

packages/astro/src/astro-components/unstyled/SubscriptionDetailsButton.astro

@@ -1,22 +1,16 @@
 ---
 import type { __experimental_SubscriptionDetailsButtonProps } from '@clerk/shared/types';
-
-import type { HTMLTag, Polymorphic } from 'astro/types';
 import type { ButtonProps } from '../../types';
-import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+import { addUnstyledAttributeToFirstTag } from './utils';
 
-type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> &
+type Props = ButtonProps &
   Omit<__experimental_SubscriptionDetailsButtonProps, 'onSubscriptionCancel'> & { clickIdentifier?: string };
 
 import { generateSafeId } from '@clerk/astro/internal';
 
 const safeId = generateSafeId();
 
-if ('as' in Astro.props) {
-  logAsPropUsageDeprecation();
-}
-
-const { as: Tag = 'button', asChild, for: _for, clickIdentifier, subscriptionDetailsProps, ...props } = Astro.props;
+const { asChild, for: _for, clickIdentifier, subscriptionDetailsProps, ...props } = Astro.props;
 
 const subscriptionDetailsOptions = {
   for: _for,
@@ -36,12 +30,12 @@ if (asChild) {
   asChild ? (
     <Fragment set:html={htmlElement} />
   ) : (
-    <Tag
+    <button
       {...props}
       data-clerk-unstyled-id={safeId}
     >
       <slot>Subscription details</slot>
-    </Tag>
+    </button>
   )
 }
 

packages/astro/src/astro-components/unstyled/utils.ts

@@ -5,17 +5,3 @@
 export function addUnstyledAttributeToFirstTag(html: string, attributeValue: string): string {
   return html.replace(/(<[^>]+)>/, `$1 data-clerk-unstyled-id="${attributeValue}">`);
 }
-
-/**
- * Logs a deprecation warning when the 'as' prop is used.
- */
-export function logAsPropUsageDeprecation() {
-  if (import.meta.env.PROD) {
-    return;
-  }
-
-  console.warn(
-    `[@clerk/astro] The 'as' prop is deprecated and will be removed in a future version. ` +
-      `Use the default slot with the 'asChild' prop instead. `,
-  );
-}

packages/astro/src/types.ts

@@ -83,16 +83,7 @@ export type {
 // Backward compatibility alias
 export type ProtectProps = ProtectParams;
 
-export type ButtonProps<Tag> = {
-  /**
-   * @deprecated The `'as'` prop will be removed in a future version.
-   * Use the default slot with the `'asChild'` prop instead.
-   * @example
-   * <SignInButton asChild>
-   *   <button>Sign in</button>
-   * </SignInButton>
-   */
-  as: Tag;
+export type ButtonProps = {
   asChild?: boolean;
 };