From 211f86bcdb7031e05a9d4c41b2614e1715e8e943 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 20 Jun 2024 12:53:34 +0300
Subject: [PATCH] chore: Deprecate `ClerkLayout` Astro component (#175)

---
 .changeset/red-parrots-beam.md                |  5 +++++
 .../src/pages/index.astro                     | 20 +++++++++----------
 packages/astro-clerk-auth/README.md           | 19 ------------------
 .../src/astro-components/control/index.ts     | 11 ++++++++--
 4 files changed, 24 insertions(+), 31 deletions(-)
 create mode 100644 .changeset/red-parrots-beam.md

diff --git a/.changeset/red-parrots-beam.md b/.changeset/red-parrots-beam.md
new file mode 100644
index 0000000..90165f7
--- /dev/null
+++ b/.changeset/red-parrots-beam.md
@@ -0,0 +1,5 @@
+---
+"astro-clerk-auth": minor
+---
+
+Deprecate `ClerkLayout` Astro component. It's usage it is no longer needed as this is now handled my `clerkMiiddleware`.
diff --git a/apps/playground-with-package/src/pages/index.astro b/apps/playground-with-package/src/pages/index.astro
index c4d66df..364174f 100644
--- a/apps/playground-with-package/src/pages/index.astro
+++ b/apps/playground-with-package/src/pages/index.astro
@@ -10,16 +10,16 @@ import Install from "../components/Install.astro";
 
 <Layout title="Welcome to Astro.">
   <h1>Welcome to <span class="text-gradient">Astro</span></h1>
-    <SignedIn>
-      <OrganizationSwitcher
-        appearance={{
-          elements: {
-            organizationPreview__organizationSwitcherTrigger: "text-white",
-            organizationSwitcherTriggerIcon: "text-white",
-          },
-        }}
-        afterSelectOrganizationUrl="/organization"
-      />
+  <SignedIn>
+    <OrganizationSwitcher
+      appearance={{
+        elements: {
+          organizationPreview__organizationSwitcherTrigger: "text-white",
+          organizationSwitcherTriggerIcon: "text-white",
+        },
+      }}
+      afterSelectOrganizationUrl="/organization"
+    />
     <SignOutButton />
   </SignedIn>
 
diff --git a/packages/astro-clerk-auth/README.md b/packages/astro-clerk-auth/README.md
index 80f764e..00c85b8 100644
--- a/packages/astro-clerk-auth/README.md
+++ b/packages/astro-clerk-auth/README.md
@@ -131,25 +131,6 @@ export const onRequest = clerkMiddleware((auth, context, next) => {
 });
 ```
 
-## Wrap each page with `ClerkLayout` (Only required for SSR with React)
-In order to properly support SSR, you need to wrap each page in your app with the `ClerkLayout` Astro component.
-
-Example Page  `my-page.astro`
-```astro
----
-import Layout from "../layouts/Layout.astro";
-import { OrganizationList } from "astro-clerk-auth/components/interactive";
-import { ClerkLayout } from "astro-clerk-auth/components/control";
----
-
-<ClerkLayout>
-  <Layout title="Welcome to Astro.">
-    ...
-  </Layout>
-</ClerkLayout>
-
-```
-
 ## Use Clerk UI Components
 Supported components
 - [SignIn](https://clerk.com/docs/components/authentication/sign-in)
diff --git a/packages/astro-clerk-auth/src/astro-components/control/index.ts b/packages/astro-clerk-auth/src/astro-components/control/index.ts
index 172318f..3711149 100644
--- a/packages/astro-clerk-auth/src/astro-components/control/index.ts
+++ b/packages/astro-clerk-auth/src/astro-components/control/index.ts
@@ -1,11 +1,18 @@
 // The `ts-ignore` comments here are necessary because we're importing this file inside the `astro:components`
 // virtual module's types, which means that `tsc` will try to resolve these imports. Don't mind the editor errors.
+
 // @ts-ignore
-export { default as ClerkLayout } from './ClerkLayout.astro';
+import { default as ClerkLayoutDeprecated } from './ClerkLayout.astro';
+
+/**
+ * @deprecated It's usage is no longer necessary, it can be safely removed.
+ */
+const ClerkLayout = ClerkLayoutDeprecated;
+
+export { ClerkLayout };
 // @ts-ignore
 export { default as SignedIn } from './SignedIn.astro';
 // @ts-ignore
 export { default as SignedOut } from './SignedOut.astro';
 // @ts-ignore
 export { default as Protect } from './Protect.astro';
-