chore(astro): Move safe id generation to a shared function (#3698)

clerk · Jul 12, 2024 · 0937bf6 · 0937bf6
1 parent 64cc9b5
commit 0937bf6
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 8 deletions.
diff --git a/.changeset/lovely-parents-swim.md b/.changeset/lovely-parents-swim.md
@@ -0,0 +1,5 @@
+---
+"@clerk/astro": patch
+---
+
+Add a reusable ID generation function
diff --git a/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro b/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro
@@ -4,9 +4,9 @@ interface Props {
   component: 'sign-in' | 'sign-up' | 'organization-list' | 'organization-profile' | 'organization-switcher' | 'user-button' | 'user-profile' | 'google-one-tap'
 }
 
-import { customAlphabet, urlAlphabet } from "nanoid";
+import { generateSafeId } from '@clerk/astro/internal';
 
-const safeId = customAlphabet(urlAlphabet, 10)();
+const safeId = generateSafeId();
 
 const { component, ...props } = Astro.props
 ---

diff --git a/packages/astro/src/astro-components/unstyled/SignInButton.astro b/packages/astro/src/astro-components/unstyled/SignInButton.astro
@@ -3,9 +3,9 @@ import type { HTMLTag, Polymorphic } from 'astro/types'
 import type { SignInProps } from "@clerk/types";
 type Props<Tag extends HTMLTag = HTMLTag> = Polymorphic<SignInProps & { as: Tag; mode?: 'redirect' | 'modal' }>
 
-import { customAlphabet, urlAlphabet } from "nanoid";
+import { generateSafeId } from '@clerk/astro/internal';
 
-const safeId = customAlphabet(urlAlphabet, 10)();
+const safeId = generateSafeId();
 
 const {
   as: Tag = 'button',

diff --git a/packages/astro/src/astro-components/unstyled/SignOutButton.astro b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
@@ -3,9 +3,9 @@ import type { HTMLTag, Polymorphic } from 'astro/types'
 import type { SignOutOptions } from '@clerk/types';
 type Props<Tag extends HTMLTag = HTMLTag> = Polymorphic<{ as: Tag; } & SignOutOptions>
 
-import { customAlphabet, urlAlphabet } from "nanoid";
+import { generateSafeId } from '@clerk/astro/internal';
 
-const safeId = customAlphabet(urlAlphabet, 10)();
+const safeId = generateSafeId();
 
 const {
   as: Tag = 'button',

diff --git a/packages/astro/src/astro-components/unstyled/SignUpButton.astro b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
@@ -3,9 +3,9 @@ import type { HTMLTag, Polymorphic } from 'astro/types'
 import type { SignUpProps } from "@clerk/types";
 type Props<Tag extends HTMLTag = HTMLTag> = Polymorphic<SignUpProps & { as: Tag; mode?: 'redirect' | 'modal' }>
 
-import { customAlphabet, urlAlphabet } from "nanoid";
+import { generateSafeId } from '@clerk/astro/internal';
 
-const safeId = customAlphabet(urlAlphabet, 10)();
+const safeId = generateSafeId();
 
 const {
   as: Tag = 'button',

diff --git a/packages/astro/src/internal/index.ts b/packages/astro/src/internal/index.ts
@@ -11,3 +11,5 @@ import { createInjectionScriptRunner } from './create-injection-script-runner';
 const runInjectionScript = createInjectionScriptRunner(createClerkInstance);
 
 export { runInjectionScript };
+
+export { generateSafeId } from './utils/generateSafeId';
diff --git a/packages/astro/src/internal/utils/generateSafeId.ts b/packages/astro/src/internal/utils/generateSafeId.ts
@@ -0,0 +1,10 @@
+import { customAlphabet, urlAlphabet } from 'nanoid';
+
+/**
+ * Generates a safe, URL-friendly unique identifier.
+ *
+ * @example
+ * const id = generateSafeId();
+ * console.log(id); // Outputs something like: "f3x2P9Xn1K"
+ */
+export const generateSafeId = (defaultSize = 10) => customAlphabet(urlAlphabet, defaultSize)();
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,3 +11,5 @@ import { createInjectionScriptRunner } from './create-injection-script-runner';
		const runInjectionScript = createInjectionScriptRunner(createClerkInstance);

		export { runInjectionScript };

		export { generateSafeId } from './utils/generateSafeId';