typing tweak

Author: jacekradko

packages/astro/src/react/controlComponents.tsx

@@ -4,7 +4,7 @@ import type { PropsWithChildren } from 'react';
 import React, { useEffect, useState } from 'react';
 
 import { $csrState } from '../stores/internal';
-import type { ProtectProps as _ProtectProps } from '../types';
+import type { ProtectParams } from '@clerk/shared/types';
 import { useAuth } from './hooks';
 import type { WithClerkProp } from './utils';
 import { withClerk } from './utils';
@@ -70,7 +70,7 @@ export const ClerkLoading = ({ children }: React.PropsWithChildren): JSX.Element
 };
 
 export type ProtectProps = React.PropsWithChildren<
-  _ProtectProps & { fallback?: React.ReactNode } & PendingSessionOptions
+  ProtectParams & { fallback?: React.ReactNode } & PendingSessionOptions
 >;
 
 /**

packages/chrome-extension/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -15,12 +15,12 @@ exports[`public exports > should not include a breaking change 1`] = `
   "OrganizationProfile",
   "OrganizationSwitcher",
   "PricingTable",
-  "Protect",
   "RedirectToCreateOrganization",
   "RedirectToOrganizationProfile",
   "RedirectToSignIn",
   "RedirectToSignUp",
   "RedirectToUserProfile",
+  "Show",
   "SignIn",
   "SignInButton",
   "SignInWithMetamaskButton",

packages/chrome-extension/src/react/re-exports.ts

@@ -10,12 +10,12 @@ export {
   OrganizationProfile,
   OrganizationSwitcher,
   PricingTable,
-  Protect,
   RedirectToCreateOrganization,
   RedirectToOrganizationProfile,
   RedirectToSignIn,
   RedirectToSignUp,
   RedirectToUserProfile,
+  Show,
   SignIn,
   SignInButton,
   SignInWithMetamaskButton,

packages/nextjs/src/app-router/server/controlComponents.tsx

@@ -1,10 +1,10 @@
-import type { PendingSessionOptions, ProtectProps as _ProtectProps } from '@clerk/shared/types';
+import type { PendingSessionOptions, ProtectParams } from '@clerk/shared/types';
 import React from 'react';
 
 import { auth } from './auth';
 
-type ProtectProps = React.PropsWithChildren<
-  _ProtectProps & {
+export type AppRouterProtectProps = React.PropsWithChildren<
+  ProtectParams & {
     fallback?: React.ReactNode;
   } & PendingSessionOptions
 >;
@@ -37,7 +37,7 @@ export async function SignedOut(
  * <Protect fallback={<p>Unauthorized</p>} />
  * ```
  */
-export async function Protect(props: ProtectProps): Promise<React.JSX.Element | null> {
+export async function Protect(props: AppRouterProtectProps): Promise<React.JSX.Element | null> {
   const { children, fallback, ...restAuthorizedParams } = props;
   const { has, userId } = await auth({ treatPendingAsSignedOut: props.treatPendingAsSignedOut });
 

packages/react/src/components/controlComponents.tsx

@@ -1,10 +1,5 @@
 import { deprecated } from '@clerk/shared/deprecated';
-import type {
-  HandleOAuthCallbackParams,
-  PendingSessionOptions,
-  ShowProps as _ShowProps,
-  ShowWhenCondition,
-} from '@clerk/shared/types';
+import type { HandleOAuthCallbackParams, PendingSessionOptions, ShowWhenCondition } from '@clerk/shared/types';
 import React from 'react';
 
 import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';
@@ -75,7 +70,8 @@ export const ClerkDegraded = ({ children }: React.PropsWithChildren<unknown>) =>
 };
 
 export type ShowProps = React.PropsWithChildren<
-  _ShowProps & {
+  {
+    when: ShowWhenCondition;
     fallback?: React.ReactNode;
   } & PendingSessionOptions
 >;

packages/shared/src/types/protect.ts

@@ -3,9 +3,9 @@ import type { CheckAuthorizationWithCustomPermissions } from './session';
 import type { Autocomplete } from './utils';
 
 /**
- * Props for the `<Protect />` component, which restricts access to its children based on authentication and authorization.
+ * Authorization parameters used by `<Protect />` and `auth.protect()`.
  *
- * Use `ProtectProps` to specify the required role, permission, feature, or plan for access.
+ * Use `ProtectParams` to specify the required role, permission, feature, or plan for access.
  *
  * @example
  * ```tsx
@@ -22,10 +22,10 @@ import type { Autocomplete } from './utils';
  * <Protect feature="a_feature_key" />
  *
  * // Require a specific plan
- * <Protect plan=a_plan_key" />
+ * <Protect plan="a_plan_key" />
  * ```
  */
-export type ProtectProps =
+export type ProtectParams =
   | {
       condition?: never;
       role: OrganizationCustomRoleKey;
@@ -69,6 +69,11 @@ export type ProtectProps =
       plan?: never;
     };
 
+/**
+ * @deprecated Use {@link ProtectParams} instead.
+ */
+export type ProtectProps = ProtectParams;
+
 /**
  * Authorization condition for the `when` prop in `<Show />`.
  * Can be an object specifying role, permission, feature, or plan,

packages/vue/src/components/controlComponents.ts

@@ -2,7 +2,7 @@ import { deprecated } from '@clerk/shared/deprecated';
 import type {
   HandleOAuthCallbackParams,
   PendingSessionOptions,
-  ProtectProps as _ProtectProps,
+  ProtectParams,
   RedirectOptions,
 } from '@clerk/shared/types';
 import { defineComponent } from 'vue';
@@ -112,7 +112,7 @@ export const AuthenticateWithRedirectCallback = defineComponent((props: HandleOA
   return () => null;
 });
 
-export type ProtectProps = _ProtectProps & PendingSessionOptions;
+export type ProtectProps = ProtectParams & PendingSessionOptions;
 
 export const Protect = defineComponent((props: ProtectProps, { slots }) => {
   const { isLoaded, has, userId } = useAuth({ treatPendingAsSignedOut: props.treatPendingAsSignedOut });