chore(astro): Export <CreateOrganization /> Astro component (#5876)

Author: wobsoriano

.changeset/lazy-frogs-breathe.md

@@ -0,0 +1,15 @@
+---
+"@clerk/astro": patch
+---
+
+Export `<CreateOrganization />` Astro component
+
+Usage:
+
+```astro
+---
+import { CreateOrganization } from '@clerk/astro/components'
+---
+
+<CreateOrganization />
+```

packages/astro/src/astro-components/index.ts

@@ -23,6 +23,7 @@ export { UserProfile } from './interactive/UserProfile';
 export { OrganizationProfile } from './interactive/OrganizationProfile';
 export { OrganizationSwitcher } from './interactive/OrganizationSwitcher';
 export { default as OrganizationList } from './interactive/OrganizationList.astro';
+export { default as CreateOrganization } from './interactive/CreateOrganization.astro';
 export { default as GoogleOneTap } from './interactive/GoogleOneTap.astro';
 export { default as Waitlist } from './interactive/Waitlist.astro';
 export { default as PricingTable } from './interactive/PricingTable.astro';

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

@@ -0,0 +1,8 @@
+---
+import type { CreateOrganizationProps } from "@clerk/types";
+type Props = CreateOrganizationProps
+
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
+---
+
+<InternalUIComponentRenderer {...Astro.props} component="create-organization" />

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

@@ -1,3 +1,5 @@
+import type { Clerk } from '@clerk/types';
+
 import { $clerk } from '../stores/internal';
 import type { InternalUIComponentId } from '../types';
 
@@ -6,6 +8,7 @@ import type { InternalUIComponentId } from '../types';
  */
 const mountAllClerkAstroJSComponents = () => {
   const mountFns = {
+    'create-organization': 'mountCreateOrganization',
     'organization-list': 'mountOrganizationList',
     'organization-profile': 'mountOrganizationProfile',
     'organization-switcher': 'mountOrganizationSwitcher',
@@ -16,14 +19,13 @@ const mountAllClerkAstroJSComponents = () => {
     'google-one-tap': 'openGoogleOneTap',
     waitlist: 'mountWaitlist',
     'pricing-table': 'mountPricingTable',
-  } as const satisfies Record<InternalUIComponentId, string>;
+  } as const satisfies Record<InternalUIComponentId, keyof Clerk>;
 
   Object.entries(mountFns).forEach(([category, mountFn]) => {
     const elementsOfCategory = document.querySelectorAll(`[data-clerk-id^="clerk-${category}"]`);
     elementsOfCategory.forEach(el => {
-      const clerkId = el.getAttribute('data-clerk-id');
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const props = window.__astro_clerk_component_props?.get(category)?.get(clerkId!);
+      const clerkId = el.getAttribute('data-clerk-id') as string;
+      const props = window.__astro_clerk_component_props?.get(category)?.get(clerkId);
       if (el) {
         $clerk.get()?.[mountFn](el as HTMLDivElement, props);
       }

packages/astro/src/types.ts

@@ -87,6 +87,7 @@ export type ButtonProps<Tag> = {
 export type InternalUIComponentId =
   | 'sign-in'
   | 'sign-up'
+  | 'create-organization'
   | 'organization-list'
   | 'organization-profile'
   | 'organization-switcher'