chore(astro): Simplify submodules and drop bundled variant (#3701)

.changeset/four-days-hammer.md

@@ -0,0 +1,15 @@
+---
+"@clerk/astro": patch
+---
+
+Simplify submodules and drop the `bunlded` variant.
+
+Moved 
+- `@clerk/astro/client/react` to `@clerk/astro/react`
+- `@clerk/astro/client/stores` to `@clerk/astro/client`
+Dropped
+- `@clerk/astro/bundled`
+- `@clerk/astro/client/bundled`
+- `@clerk/astro/internal/bundled`
+- `@clerk/astro/integration`
+- `@clerk/astro/integration/bundled`

integration/templates/astro-node/src/components/SignOutReact.tsx

@@ -1,4 +1,4 @@
-import { useAuth } from '@clerk/astro/client/react';
+import { useAuth } from '@clerk/astro/react';
 import React from 'react';
 import { type PropsWithChildren } from 'react';
 

integration/templates/astro-node/src/components/page-with-user.tsx

@@ -1,6 +1,6 @@
 import React, { type PropsWithChildren, useSyncExternalStore } from 'react';
-import { UserProfile } from '@clerk/astro/client/react';
-import { $userStore } from '@clerk/astro/client/stores';
+import { UserProfile } from '@clerk/astro/react';
+import { $userStore } from '@clerk/astro/client';
 
 export function PageWithUser({ children }: PropsWithChildren) {
   const user = useSyncExternalStore($userStore.listen, $userStore.get, $userStore.get);

integration/templates/astro-node/src/layouts/react/Layout.astro

@@ -5,7 +5,7 @@ interface Props {
 
 const { title } = Astro.props;
 
-import { SignedIn, SignedOut, UserButton } from "@clerk/astro/client/react";
+import { SignedIn, SignedOut, UserButton } from "@clerk/astro/react";
 import { LanguagePicker } from "../../components/LanguagePicker";
 ---
 

integration/templates/astro-node/src/lib/astro-components/SignOutButton.astro

@@ -12,7 +12,7 @@ interface Props extends SignOutOptions {
 </script>
 
 <script>
-  import { $clerkStore } from "@clerk/astro/client/stores";
+  import { $clerkStore } from "@clerk/astro/client";
 
   const button = document.querySelector(
     "[data-sign-out-button]",

integration/templates/astro-node/src/pages/react/index.astro

@@ -3,7 +3,7 @@ import Layout from "../../layouts/react/Layout.astro";
 import Card from "../../components/Card.astro";
 import SignOutButton from "../../lib/astro-components/SignOutButton.astro";
 
-import { SignedIn, SignedOut, OrganizationSwitcher } from "@clerk/astro/client/react";
+import { SignedIn, SignedOut, OrganizationSwitcher } from "@clerk/astro/react";
 ---
 
 <Layout title="Welcome to Astro.">

integration/templates/astro-node/src/pages/react/only-admins.astro

@@ -1,5 +1,5 @@
 ---
-import { Protect } from "@clerk/astro/client/react";
+import { Protect } from "@clerk/astro/react";
 import Layout from "../../layouts/react/Layout.astro";
 ---
 

integration/templates/astro-node/src/pages/react/only-members.astro

@@ -1,5 +1,5 @@
 ---
-import { Protect } from "@clerk/astro/client/react";
+import { Protect } from "@clerk/astro/react";
 import Layout from "../../layouts/react/Layout.astro";
 ---
 

integration/templates/astro-node/src/pages/react/sign-in.astro

@@ -1,5 +1,5 @@
 ---
-import { SignIn } from "@clerk/astro/client/react";
+import { SignIn } from "@clerk/astro/react";
 import Layout from "../../layouts/react/Layout.astro";
 ---
 

packages/astro/package.json

@@ -50,46 +50,22 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./client/react": {
-      "types": "./dist/client/react/index.d.ts",
-      "import": "./dist/client/react/index.js"
-    },
-    "./client/stores": {
-      "types": "./dist/client/stores/index.d.ts",
-      "import": "./dist/client/stores/index.js"
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js"
     },
     "./client": {
       "types": "./dist/client/index.d.ts",
       "import": "./dist/client/index.js"
     },
-    "./client/bundled": {
-      "types": "./dist/client/bundled.d.ts",
-      "import": "./dist/client/bundled.js"
-    },
-    "./integration": {
-      "types": "./dist/integration/index.d.ts",
-      "import": "./dist/integration/index.js"
-    },
-    "./integration/bundled": {
-      "types": "./dist/integration/bundled.d.ts",
-      "import": "./dist/integration/bundled.js"
-    },
     "./internal": {
       "types": "./dist/internal/index.d.ts",
       "import": "./dist/internal/index.js"
     },
-    "./internal/bundled": {
-      "types": "./dist/internal/bundled.d.ts",
-      "import": "./dist/internal/bundled.js"
-    },
     "./server": {
       "types": "./dist/server/index.d.ts",
       "import": "./dist/server/index.js"
     },
-    "./bundled": {
-      "types": "./dist/bundled.d.ts",
-      "import": "./dist/bundled.js"
-    },
     "./env": "./env.d.ts",
     "./components/control": "./components/control/index.ts",
     "./components/control/*": "./components/control/*",

packages/astro/react/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "../../dist/react/index.js"
+}

packages/astro/src/client/index.ts

@@ -1,59 +1,2 @@
-import { waitForClerkScript } from '../internal/utils/loadClerkJSScript';
-import { $clerk, $csrState } from '../stores/internal';
-import type { AstroClerkIntegrationParams, AstroClerkUpdateOptions } from '../types';
-import { mountAllClerkAstroJSComponents } from './mount-clerk-astro-js-components';
-import { runOnce } from './run-once';
-
-let initOptions: AstroClerkIntegrationParams | undefined;
-
-/**
- * Prevents firing clerk.load multiple times
- */
-export const createClerkInstance = runOnce(createClerkInstanceInternal);
-
-export async function createClerkInstanceInternal(options?: AstroClerkIntegrationParams) {
-  let clerkJSInstance = window.Clerk;
-  if (!clerkJSInstance) {
-    await waitForClerkScript();
-
-    if (!window.Clerk) {
-      throw new Error('Failed to download latest ClerkJS. Contact [email protected].');
-    }
-    clerkJSInstance = window.Clerk;
-  }
-
-  if (!$clerk.get()) {
-    // @ts-ignore
-    $clerk.set(clerkJSInstance);
-  }
-
-  initOptions = options;
-  // TODO: Update Clerk type from @clerk/types to include this method
-  return (clerkJSInstance as any)
-    .load(options)
-    .then(() => {
-      $csrState.setKey('isLoaded', true);
-
-      mountAllClerkAstroJSComponents();
-
-      clerkJSInstance.addListener(payload => {
-        $csrState.setKey('client', payload.client);
-        $csrState.setKey('user', payload.user);
-        $csrState.setKey('session', payload.session);
-        $csrState.setKey('organization', payload.organization);
-      });
-    })
-    .catch(() => {});
-}
-
-export function updateClerkOptions(options: AstroClerkUpdateOptions) {
-  const clerk = $clerk.get();
-  if (!clerk) {
-    throw new Error('Missing clerk instance');
-  }
-  // TODO: Update Clerk type from @clerk/types to include this method
-  void (clerk as any).__unstable__updateProps({
-    options: { ...initOptions, ...options },
-    appearance: { ...initOptions?.appearance, ...options.appearance },
-  });
-}
+export { updateClerkOptions } from '../internal/create-clerk-instance';
+export * from '../stores/external';

packages/astro/src/globals.d.ts

@@ -3,5 +3,4 @@ export {};
 declare global {
   const PACKAGE_NAME: string;
   const PACKAGE_VERSION: string;
-  const __HOTLOAD__: string;
 }

packages/astro/src/index.ts

@@ -1 +1,3 @@
-export { default } from './integration';
+import { createIntegration } from './integration/create-integration';
+
+export default createIntegration();

packages/astro/src/integration/create-integration.ts

@@ -14,10 +14,8 @@ type HotloadAstroClerkIntegrationParams = AstroClerkIntegrationParams & {
   clerkJSVersion?: string;
 };
 
-function createIntegration<P extends { mode: 'hotload' | 'bundled' }>({ mode }: P) {
-  return (
-    params?: P['mode'] extends 'hotload' ? HotloadAstroClerkIntegrationParams : AstroClerkIntegrationParams,
-  ): AstroIntegration => {
+function createIntegration<Params extends HotloadAstroClerkIntegrationParams>() {
+  return (params?: Params): AstroIntegration => {
     const { proxyUrl, isSatellite, domain, signInUrl, signUpUrl } = params || {};
 
     // These are not provided when the "bundled" integration is used
@@ -50,10 +48,7 @@ function createIntegration<P extends { mode: 'hotload' | 'bundled' }>({ mode }:
             },
           };
 
-          const defaultBundledImportPath = `${packageName}/internal/bundled`;
-
-          const buildImportPath =
-            mode === 'bundled' ? defaultBundledImportPath : defaultBundledImportPath.replace('/bundled', '');
+          const buildImportPath = `${packageName}/internal`;
 
           // Set params as envs do backend code has access to them
           updateConfig({
@@ -72,7 +67,6 @@ function createIntegration<P extends { mode: 'hotload' | 'bundled' }>({ mode }:
                 ...buildEnvVarFromOption(clerkJSUrl, 'PUBLIC_CLERK_JS_URL'),
                 ...buildEnvVarFromOption(clerkJSVariant, 'PUBLIC_CLERK_JS_VARIANT'),
                 ...buildEnvVarFromOption(clerkJSVersion, 'PUBLIC_CLERK_JS_VERSION'),
-                __HOTLOAD__: mode === 'hotload',
               },
 
               ssr: {

packages/astro/src/client/bundled.ts → packages/astro/src/internal/create-clerk-instance.ts

@@ -1,30 +1,35 @@
-import { Clerk } from '@clerk/clerk-js';
-
+import { waitForClerkScript } from '../internal/utils/loadClerkJSScript';
 import { $clerk, $csrState } from '../stores/internal';
-import type { AstroClerkCreateInstanceParams, AstroClerkUpdateOptions } from '../types';
+import type { AstroClerkIntegrationParams, AstroClerkUpdateOptions } from '../types';
 import { mountAllClerkAstroJSComponents } from './mount-clerk-astro-js-components';
 import { runOnce } from './run-once';
-import type { CreateClerkInstanceInternalFn } from './types';
 
-let initOptions: AstroClerkCreateInstanceParams | undefined;
+let initOptions: AstroClerkIntegrationParams | undefined;
 
 /**
  * Prevents firing clerk.load multiple times
  */
-export const createClerkInstance: CreateClerkInstanceInternalFn = runOnce(createClerkInstanceInternal);
+const createClerkInstance = runOnce(createClerkInstanceInternal);
 
-export function createClerkInstanceInternal(options?: AstroClerkCreateInstanceParams) {
-  let clerkJSInstance = window.Clerk as unknown as Clerk;
+async function createClerkInstanceInternal(options?: AstroClerkIntegrationParams) {
+  let clerkJSInstance = window.Clerk;
   if (!clerkJSInstance) {
-    clerkJSInstance = new Clerk(options!.publishableKey);
+    await waitForClerkScript();
+
+    if (!window.Clerk) {
+      throw new Error('Failed to download latest ClerkJS. Contact [email protected].');
+    }
+    clerkJSInstance = window.Clerk;
+  }
+
+  if (!$clerk.get()) {
     // @ts-ignore
     $clerk.set(clerkJSInstance);
-    // @ts-ignore
-    window.Clerk = clerkJSInstance;
   }
 
   initOptions = options;
-  return clerkJSInstance
+  // TODO: Update Clerk type from @clerk/types to include this method
+  return (clerkJSInstance as any)
     .load(options)
     .then(() => {
       $csrState.setKey('isLoaded', true);
@@ -41,14 +46,16 @@ export function createClerkInstanceInternal(options?: AstroClerkCreateInstancePa
     .catch(() => {});
 }
 
-export function updateClerkOptions(options: AstroClerkUpdateOptions) {
+function updateClerkOptions(options: AstroClerkUpdateOptions) {
   const clerk = $clerk.get();
   if (!clerk) {
     throw new Error('Missing clerk instance');
   }
-  //@ts-ignore
-  clerk.__unstable__updateProps({
+  // TODO: Update Clerk type from @clerk/types to include this method
+  void (clerk as any).__unstable__updateProps({
     options: { ...initOptions, ...options },
     appearance: { ...initOptions?.appearance, ...options.appearance },
   });
 }
+
+export { createClerkInstance, updateClerkOptions };

packages/astro/src/internal/create-injection-script-runner.ts

@@ -1,7 +1,7 @@
-import type { CreateClerkInstanceInternalFn } from '../client/types';
 import { $initialState } from '../stores/internal';
 import type { AstroClerkIntegrationParams } from '../types';
 import { mergeEnvVarsWithParams } from './merge-env-vars-with-params';
+import type { CreateClerkInstanceInternalFn } from './types';
 
 /**
  * @internal

packages/astro/src/internal/index.ts

@@ -5,7 +5,7 @@
  * injectScript('before-hydration', `...`)
  */
 
-import { createClerkInstance } from '../client';
+import { createClerkInstance } from './create-clerk-instance';
 import { createInjectionScriptRunner } from './create-injection-script-runner';
 
 const runInjectionScript = createInjectionScriptRunner(createClerkInstance);

packages/astro/src/client/react/SignOutButton.tsx → packages/astro/src/react/SignOutButton.tsx

@@ -17,7 +17,9 @@ export const SignOutButton = withClerk(
 
     const clickHandler = () => clerk?.signOut({ redirectUrl, sessionId });
     const wrappedChildClickHandler: React.MouseEventHandler = async e => {
-      await safeExecute((child as any).props.onClick)(e);
+      if (child && typeof child === 'object' && 'props' in child) {
+        await safeExecute(child.props.onClick)(e);
+      }
       return clickHandler();
     };
 

packages/astro/src/client/react/controlComponents.tsx → packages/astro/src/react/controlComponents.tsx

@@ -1,7 +1,7 @@
 import type { CheckAuthorizationWithCustomPermissions } from '@clerk/types';
 import type { PropsWithChildren } from 'react';
 
-import type { ProtectComponentDefaultProps } from '../../types';
+import type { ProtectComponentDefaultProps } from '../types';
 import { useAuth } from './hooks';
 
 export function SignedOut(props: PropsWithChildren) {

packages/astro/src/client/react/hooks.ts → packages/astro/src/react/hooks.ts

@@ -12,8 +12,8 @@ import { useCallback, useSyncExternalStore } from 'react';
 // @ts-ignore
 import { authAsyncStorage } from '#async-local-storage';
 
-import { $authStore } from '../../stores/external';
-import { $clerk, $csrState } from '../../stores/internal';
+import { $authStore } from '../stores/external';
+import { $clerk, $csrState } from '../stores/internal';
 
 type CheckAuthorizationSignedOut = undefined;
 type CheckAuthorizationWithoutOrgOrUser = (params?: Parameters<CheckAuthorizationWithCustomPermissions>[0]) => false;