chore(astro): Small QoL improvement for internal UI component IDs (#5848)

Author: LekoArts

.changeset/eager-bananas-write.md

@@ -0,0 +1,2 @@
+---
+---

packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro

@@ -1,22 +1,13 @@
 ---
+import { generateSafeId } from '@clerk/astro/internal';
+import type { InternalUIComponentId } from '../../types';
+
 interface Props {
   [key: string]: unknown;
   id?: string;
-  component:
-    | 'sign-in'
-    | 'sign-up'
-    | 'organization-list'
-    | 'organization-profile'
-    | 'organization-switcher'
-    | 'user-button'
-    | 'user-profile'
-    | 'google-one-tap'
-    | 'waitlist'
-    | 'pricing-table';
+  component: InternalUIComponentId
 }
 
-import { generateSafeId } from '@clerk/astro/internal';
-
 const { component, id, ...props } = Astro.props;
 
 const safeId = id || generateSafeId();

packages/astro/src/internal/mount-clerk-astro-js-components.ts

@@ -1,4 +1,5 @@
 import { $clerk } from '../stores/internal';
+import type { InternalUIComponentId } from '../types';
 
 /**
  * Loop through any Astro component that has requested to mount a UI component and mount it with its respective props.
@@ -15,7 +16,7 @@ const mountAllClerkAstroJSComponents = () => {
     'google-one-tap': 'openGoogleOneTap',
     waitlist: 'mountWaitlist',
     'pricing-table': 'mountPricingTable',
-  } as const;
+  } as const satisfies Record<InternalUIComponentId, string>;
 
   Object.entries(mountFns).forEach(([category, mountFn]) => {
     const elementsOfCategory = document.querySelectorAll(`[data-clerk-id^="clerk-${category}"]`);

packages/astro/src/types.ts

@@ -83,3 +83,15 @@ export type ButtonProps<Tag> = {
   as: Tag;
   asChild?: boolean;
 };
+
+export type InternalUIComponentId =
+  | 'sign-in'
+  | 'sign-up'
+  | 'organization-list'
+  | 'organization-profile'
+  | 'organization-switcher'
+  | 'user-button'
+  | 'user-profile'
+  | 'google-one-tap'
+  | 'waitlist'
+  | 'pricing-table';