make Show strict in astro

Author: jacekradko

integration/templates/astro-node/src/pages/server-islands.astro

@@ -5,7 +5,10 @@ import Layout from '../layouts/Layout.astro';
 
 <Layout title='Page is only accessible by members'>
   <div class='w-full flex justify-center flex-col'>
-    <Show server:defer>
+    <Show
+      server:defer
+      when='signedIn'
+    >
       <p slot='fallback'>Loading</p>
       <Show when={{ role: 'org:admin' }}>
         <h1 class='text-2xl text-center'>I'm an admin</h1>

integration/tests/astro/components.test.ts

@@ -351,7 +351,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     await u.po.signIn.waitForMounted();
     await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
     await u.po.expect.toBeSignedIn();
-    await expect(u.page.getByText('Not a member')).toBeVisible();
+    await expect(u.page.getByText("I'm a member")).toBeVisible();
   });
 
   // --- react/components
@@ -449,7 +449,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     await u.po.signIn.waitForMounted();
     await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin2.email, password: fakeAdmin2.password });
     await u.po.expect.toBeSignedIn();
-    await expect(u.page.getByText('Not a member')).toBeVisible();
+    await expect(u.page.getByText("I'm a member")).toBeVisible();
   });
 
   test('renders components and keep internal routing behavior when view transitions is enabled', async ({
@@ -491,7 +491,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     // This is being investigated upstream with the Astro team. The test is commented out for now
     // to unblock development and will be revisited once the root cause is resolved.
     // await expect(u.page.getByText('Loading')).toBeHidden();
-    await expect(u.page.getByText('Not an admin')).toBeVisible();
+    await expect(u.page.getByText('Loading')).toBeVisible();
 
     // Sign in as admin user
     await u.page.goToRelative('/sign-in');
@@ -509,6 +509,6 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     // This is being investigated upstream with the Astro team. The test is commented out for now
     // to unblock development and will be revisited once the root cause is resolved.
     // await expect(u.page.getByText('Loading')).toBeHidden();
-    await expect(u.page.getByText("I'm an admin")).toBeVisible();
+    await expect(u.page.getByText("I'm an admin")).toBeVisible({ timeout: 15_000 });
   });
 });

integration/tests/astro/hybrid.test.ts

@@ -108,7 +108,7 @@ testAgainstRunningApps({ withPattern: ['astro.static.withCustomRoles'] })(
 
       await u.page.goToRelative('/only-members');
 
-      await expect(u.page.getByText('Not a member')).toBeVisible();
+      await expect(u.page.getByText("I'm a member")).toBeVisible();
     });
   },
 );

packages/astro/src/astro-components/control/Show.astro

@@ -14,7 +14,13 @@ type Props = ShowProps & {
   class?: string;
 };
 
-const { isStatic, ...props } = Astro.props;
+const { isStatic, when, ...rest } = Astro.props;
+
+if (typeof when === 'undefined') {
+  throw new Error('@clerk/astro: <Show /> requires a `when` prop.');
+}
+
+const props = { ...rest, when };
 
 const ShowComponent = isStaticOutput(isStatic) ? ShowCSR : ShowSSR;
 

packages/astro/src/react/controlComponents.tsx

@@ -57,6 +57,10 @@ export type ShowProps = React.PropsWithChildren<
 >;
 
 export const Show = ({ children, fallback, treatPendingAsSignedOut, when }: ShowProps) => {
+  if (typeof when === 'undefined') {
+    throw new Error('@clerk/astro: <Show /> requires a `when` prop.');
+  }
+
   const { has, isLoaded, userId } = useAuth({ treatPendingAsSignedOut });
 
   if (!isLoaded) {