diff --git a/.changeset/lazy-frogs-breathe.md b/.changeset/lazy-frogs-breathe.md new file mode 100644 index 00000000000..cbb91ccc0bc --- /dev/null +++ b/.changeset/lazy-frogs-breathe.md @@ -0,0 +1,15 @@ +--- +"@clerk/astro": patch +--- + +Export `` Astro component + +Usage: + +```astro +--- +import { CreateOrganization } from '@clerk/astro/components' +--- + + +``` diff --git a/packages/astro/src/astro-components/index.ts b/packages/astro/src/astro-components/index.ts index 1fc085e0f70..180b6cac519 100644 --- a/packages/astro/src/astro-components/index.ts +++ b/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'; diff --git a/packages/astro/src/astro-components/interactive/CreateOrganization.astro b/packages/astro/src/astro-components/interactive/CreateOrganization.astro new file mode 100644 index 00000000000..733d1fcdf32 --- /dev/null +++ b/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' +--- + + diff --git a/packages/astro/src/internal/mount-clerk-astro-js-components.ts b/packages/astro/src/internal/mount-clerk-astro-js-components.ts index 97d08ced201..d42df884bea 100644 --- a/packages/astro/src/internal/mount-clerk-astro-js-components.ts +++ b/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; + } as const satisfies Record; 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); } diff --git a/packages/astro/src/types.ts b/packages/astro/src/types.ts index 8f22d477c63..dbf45386983 100644 --- a/packages/astro/src/types.ts +++ b/packages/astro/src/types.ts @@ -87,6 +87,7 @@ export type ButtonProps = { export type InternalUIComponentId = | 'sign-in' | 'sign-up' + | 'create-organization' | 'organization-list' | 'organization-profile' | 'organization-switcher'