chore(astro): Remove duplicate logic in interactive components

.changeset/metal-weeks-dress.md

@@ -0,0 +1,5 @@
+---
+"@clerk/astro": patch
+---
+
+Introduce a shared component for interactive components that handles UI mounting

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

@@ -0,0 +1,40 @@
+---
+interface Props {
+  [key: string]: unknown
+  component: 'sign-in' | 'sign-up' | 'organization-list' | 'organization-profile' | 'organization-switcher' | 'user-button' | 'user-profile'
+}
+
+import { customAlphabet, urlAlphabet } from "nanoid";
+
+const safeId = customAlphabet(urlAlphabet, 10)();
+
+const { component, ...props } = Astro.props
+---
+
+<div data-clerk-id={`clerk-${component}-${safeId}`}></div>
+
+<script is:inline define:vars={{ props, component, safeId }}>
+  /**
+   * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
+   * The above is handled by `mountAllClerkAstroJSComponents`.
+   */
+  const setOrCreatePropMap = ({ category, id, props }) => {
+    if (!window.__astro_clerk_component_props) {
+      window.__astro_clerk_component_props = new Map();
+    }
+
+    if (!window.__astro_clerk_component_props.has(category)) {
+      const _ = new Map();
+      _.set(id, props);
+      window.__astro_clerk_component_props.set(category, _);
+    }
+
+    window.__astro_clerk_component_props.get(category)?.set(id, props);
+  };
+
+  setOrCreatePropMap({
+    category: component,
+    id: `clerk-${component}-${safeId}`,
+    props,
+  });
+</script>

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

@@ -2,40 +2,7 @@
 import type { OrganizationListProps } from "@clerk/types";
 type Props = OrganizationListProps
 
-import { customAlphabet, urlAlphabet } from "nanoid";
-
-const safeId = customAlphabet(urlAlphabet, 10)();
-
-const props = {
-  ...Astro.props,
-}
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
 ---
 
-<div id={`clerk-organization-list-${safeId}`}></div>
-
-<script is:inline define:vars={{ props: Astro.props, safeId }}>
-  // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
-  /**
-   * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
-   * The above is handled by `mountAllClerkAstroJSComponents`.
-   */
-  const setOrCreatePropMap = ({ category, id, props }) => {
-    if (!window.__astro_clerk_component_props) {
-      window.__astro_clerk_component_props = new Map();
-    }
-
-    if (!window.__astro_clerk_component_props.has(category)) {
-      const _ = new Map();
-      _.set(id, props);
-      window.__astro_clerk_component_props.set(category, _);
-    }
-
-    window.__astro_clerk_component_props.get(category)?.set(id, props);
-  };
-
-  setOrCreatePropMap({
-    category: "organization-list",
-    id: `clerk-organization-list-${safeId}`,
-    props,
-  });
-</script>
+<InternalUIComponentRenderer {...Astro.props} component="organization-list" />

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

@@ -2,40 +2,7 @@
 import type { OrganizationProfileProps } from "@clerk/types";
 type Props = OrganizationProfileProps
 
-import { customAlphabet, urlAlphabet } from "nanoid";
-
-const safeId = customAlphabet(urlAlphabet, 10)();
-
-const props = {
-  ...Astro.props,
-}
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
 ---
 
-<div id={`clerk-organization-profile-${safeId}`}></div>
-
-<script is:inline define:vars={{ props: Astro.props, safeId }}>
-  // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
-  /**
-   * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
-   * The above is handled by `mountAllClerkAstroJSComponents`.
-   */
-  const setOrCreatePropMap = ({ category, id, props }) => {
-    if (!window.__astro_clerk_component_props) {
-      window.__astro_clerk_component_props = new Map();
-    }
-
-    if (!window.__astro_clerk_component_props.has(category)) {
-      const _ = new Map();
-      _.set(id, props);
-      window.__astro_clerk_component_props.set(category, _);
-    }
-
-    window.__astro_clerk_component_props.get(category)?.set(id, props);
-  };
-
-  setOrCreatePropMap({
-    category: "organization-profile",
-    id: `clerk-organization-profile-${safeId}`,
-    props,
-  });
-</script>
+<InternalUIComponentRenderer {...Astro.props} component="organization-profile" />

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

@@ -2,40 +2,7 @@
 import type { OrganizationSwitcherProps } from "@clerk/types";
 type Props = OrganizationSwitcherProps
 
-import { customAlphabet, urlAlphabet } from "nanoid";
-
-const safeId = customAlphabet(urlAlphabet, 10)();
-
-const props = {
-  ...Astro.props,
-}
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
 ---
 
-<div id={`clerk-organization-switcher-${safeId}`}></div>
-
-<script is:inline define:vars={{ props: Astro.props, safeId }}>
-  // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
-  /**
-   * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
-   * The above is handled by `mountAllClerkAstroJSComponents`.
-   */
-  const setOrCreatePropMap = ({ category, id, props }) => {
-    if (!window.__astro_clerk_component_props) {
-      window.__astro_clerk_component_props = new Map();
-    }
-
-    if (!window.__astro_clerk_component_props.has(category)) {
-      const _ = new Map();
-      _.set(id, props);
-      window.__astro_clerk_component_props.set(category, _);
-    }
-
-    window.__astro_clerk_component_props.get(category)?.set(id, props);
-  };
-
-  setOrCreatePropMap({
-    category: "organization-switcher",
-    id: `clerk-organization-switcher-${safeId}`,
-    props,
-  });
-</script>
+<InternalUIComponentRenderer {...Astro.props} component="organization-switcher" />

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

@@ -1,42 +1,8 @@
 ---
 import type { SignInProps } from "@clerk/types";
-type Props = SignInProps;
+type Props = SignInProps
 
-import { customAlphabet, urlAlphabet } from "nanoid";
-
-const safeId = customAlphabet(urlAlphabet, 10)();
-
-const props = {
-  ...Astro.props
-}
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
 ---
 
-<div id={`clerk-sign-in-${safeId}`}></div>
-
-<script is:inline define:vars={{ props: Astro.props, safeId }}>
-  // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
-  /**
-   * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
-   * The above is handled by `mountAllClerkAstroJSComponents`.
-   */
-  const setOrCreatePropMap = ({ category, id, props }) => {
-    if (!window.__astro_clerk_component_props) {
-      window.__astro_clerk_component_props = new Map();
-    }
-
-    if (!window.__astro_clerk_component_props.has(category)) {
-      const a = new Map();
-      a.set(id, props);
-      window.__astro_clerk_component_props.set(category, a);
-    }
-
-    window.__astro_clerk_component_props.get(category)?.set(id, props);
-  };
-
-
-  setOrCreatePropMap({
-    category: "sign-in",
-    id: `clerk-sign-in-${safeId}`,
-    props,
-  });
-</script>
+<InternalUIComponentRenderer {...Astro.props} component="sign-in" />

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

@@ -1,41 +1,8 @@
 ---
 import type { SignUpProps } from "@clerk/types";
-type Props = SignUpProps;
+type Props = SignUpProps
 
-import { customAlphabet, urlAlphabet } from "nanoid";
-
-const safeId = customAlphabet(urlAlphabet, 10)();
-
-const props = {
-  ...Astro.props
-}
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
 ---
 
-<div id={`clerk-sign-up-${safeId}`}></div>
-
-<script is:inline define:vars={{ props: Astro.props, safeId }}>
-  // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
-  /**
-   * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
-   * The above is handled by `mountAllClerkAstroJSComponents`.
-   */
-  const setOrCreatePropMap = ({ category, id, props }) => {
-    if (!window.__astro_clerk_component_props) {
-      window.__astro_clerk_component_props = new Map();
-    }
-
-    if (!window.__astro_clerk_component_props.has(category)) {
-      const a = new Map();
-      a.set(id, props);
-      window.__astro_clerk_component_props.set(category, a);
-    }
-
-    window.__astro_clerk_component_props.get(category)?.set(id, props);
-  };
-
-  setOrCreatePropMap({
-    category: "sign-up",
-    id: `clerk-sign-up-${safeId}`,
-    props,
-  });
-</script>
+<InternalUIComponentRenderer {...Astro.props} component="sign-up" />

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

@@ -1,37 +1,8 @@
 ---
 import type { UserButtonProps } from "@clerk/types";
-type Props = UserButtonProps;
+type Props = UserButtonProps
 
-import { customAlphabet, urlAlphabet } from "nanoid";
-
-const safeId = customAlphabet(urlAlphabet, 10)();
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
 ---
 
-<div id={`clerk-user-button-${safeId}`}></div>
-
-<script is:inline define:vars={{ props: Astro.props, safeId }}>
-  // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
-  /**
-   * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
-   * The above is handled by `mountAllClerkAstroJSComponents`.
-   */
-  const setOrCreatePropMap = ({ category, id, props }) => {
-    if (!window.__astro_clerk_component_props) {
-      window.__astro_clerk_component_props = new Map();
-    }
-
-    if (!window.__astro_clerk_component_props.has(category)) {
-      const _ = new Map();
-      _.set(id, props);
-      window.__astro_clerk_component_props.set(category, _);
-    }
-
-    window.__astro_clerk_component_props.get(category)?.set(id, props);
-  };
-
-  setOrCreatePropMap({
-    category: "user-button",
-    id: `clerk-user-button-${safeId}`,
-    props,
-  });
-</script>
+<InternalUIComponentRenderer {...Astro.props} component="user-button" />

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

@@ -1,37 +1,8 @@
 ---
 import type { UserProfileProps } from "@clerk/types";
-type Props = UserProfileProps;
+type Props = UserProfileProps
 
-import { customAlphabet, urlAlphabet } from "nanoid";
-
-const safeId = customAlphabet(urlAlphabet, 10)();
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
 ---
 
-<div id={`clerk-user-profile-${safeId}`}></div>
-
-<script is:inline define:vars={{ props: Astro.props, safeId }}>
-  // TODO-CLEANUP: Find a way to remove this duplicate and have a single origin for this script
-  /**
-   * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
-   * The above is handled by `mountAllClerkAstroJSComponents`.
-   */
-  const setOrCreatePropMap = ({ category, id, props }) => {
-    if (!window.__astro_clerk_component_props) {
-      window.__astro_clerk_component_props = new Map();
-    }
-
-    if (!window.__astro_clerk_component_props.has(category)) {
-      const _ = new Map();
-      _.set(id, props);
-      window.__astro_clerk_component_props.set(category, _);
-    }
-
-    window.__astro_clerk_component_props.get(category)?.set(id, props);
-  };
-
-  setOrCreatePropMap({
-    category: "user-profile",
-    id: `clerk-user-profile-${safeId}`,
-    props,
-  });
-</script>
+<InternalUIComponentRenderer {...Astro.props} component="user-profile" />

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

@@ -15,9 +15,10 @@ const mountAllClerkAstroJSComponents = () => {
   } as const;
 
   Object.entries(mountFns).forEach(([category, mountFn]) => {
-    const elementsOfCategory = document.querySelectorAll(`[id^="clerk-${category}"]`);
+    const elementsOfCategory = document.querySelectorAll(`[data-clerk-id^="clerk-${category}"]`);
     elementsOfCategory.forEach(el => {
-      const props = window.__astro_clerk_component_props?.get(category)?.get(el.id);
+      const clerkId = el.getAttribute('data-clerk-id');
+      const props = window.__astro_clerk_component_props?.get(category)?.get(clerkId!);
       if (el) {
         $clerk.get()?.[mountFn](el as HTMLDivElement, props);
       }