Revert "feat: Attempt to bring back virtual modules (#144)"

This reverts commit cc48696.

apps/playground-with-package/src/layouts/Layout.astro

@@ -7,7 +7,7 @@ const { title } = Astro.props;
 
 import { Image } from "astro:assets";
 import logo from "../assets/Clerk-Purple-Logo.png";
-import { SignedIn, SignedOut } from "astro-clerk-auth/components/react";
+import { SignedIn, SignedOut } from "astro-clerk-auth/components/control";
 import { UserButton } from "astro-clerk-auth/components/interactive";
 import { LanguagePicker } from "../components/LanguagePicker";
 import GithubIcon from "../components/GithubIcon.astro";

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>
 

packages/astro-clerk-auth/src/client/react/hooks.ts

@@ -10,7 +10,7 @@ import type {
 import type { Store, StoreValue } from 'nanostores';
 import { useCallback, useSyncExternalStore } from 'react';
 import { $authStore, $clerk, $csrState } from '../../stores/internal';
-import { getClerkAuthInitState } from 'clerk:astro';
+import { authAsyncStorage } from '../../server/async-local-storage';
 
 type CheckAuthorizationSignedOut = undefined;
 type CheckAuthorizationWithoutOrgOrUser = (params?: Parameters<CheckAuthorizationWithCustomPermissions>[0]) => false;
@@ -251,6 +251,16 @@ function useStore<T extends Store, SV extends StoreValue<T>>(store: T): SV {
      * If you omit this argument, rendering the component on the server will throw an error.
      */
 
-    return getClerkAuthInitState() as SV;
+    /**
+     * When this runs on the server we want to grab the content from the async-local-storage.
+     */
+    if (typeof window === 'undefined') {
+      return authAsyncStorage.getStore();
+    }
+
+    /**a
+     * When this runs on the client, during hydration, we want to grab the content the store.
+     */
+    return get();
   });
 }

packages/astro-clerk-auth/src/env.d.ts

@@ -16,11 +16,3 @@ interface ImportMetaEnv {
 interface ImportMeta {
   readonly env: ImportMetaEnv;
 }
-
-declare module 'virtual:astro-clerk/internal/als' {
-  export const authAls: import('node:async_hooks').AsyncLocalStorage<import('astro-clerk-auth/server').GetAuthReturn>;
-}
-
-declare module 'clerk:astro' {
-  export const getClerkAuthInitState: () => import('astro-clerk-auth/server').GetAuthReturn;
-}

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

@@ -1,43 +1,6 @@
 import type { AstroClerkIntegrationParams } from '../types';
 import type { AstroIntegration } from 'astro';
 import { name as packageName, version as packageVersion } from '../../package.json';
-import type { Plugin } from 'vite';
-
-const VI_INTERNAL_ALS_ID = 'virtual:astro-clerk/internal/als';
-const VI_ID = 'clerk:astro';
-
-export default function virtualImport({
-  nameCount,
-  id: virtualModuleId,
-  content,
-  context,
-}: {
-  nameCount: number;
-  id: string;
-  content: string;
-  context: string;
-}): Plugin {
-  const resolvedVirtualModuleId = '\0' + virtualModuleId;
-
-  return {
-    name: `astro-clerk-${nameCount}`, // required, will show up in warnings and errors
-    resolveId(id) {
-      if (id === virtualModuleId) {
-        return resolvedVirtualModuleId;
-      }
-    },
-    load(id, options) {
-      if (id === resolvedVirtualModuleId) {
-        const _context = options?.ssr ? 'server' : 'client';
-
-        if (context === _context) {
-          return content;
-        }
-      }
-      return;
-    },
-  };
-}
 
 const buildEnvVarFromOption = (valueToBeStored: unknown, envName: string) => {
   return valueToBeStored ? { [`import.meta.env.${envName}`]: JSON.stringify(valueToBeStored) } : {};
@@ -96,29 +59,6 @@ function createIntegration<P extends { mode: 'hotload' | 'bundled' }>({ mode }:
                 ...buildEnvVarFromOption(clerkJSVersion, 'PUBLIC_ASTRO_APP_CLERK_JS_VERSION'),
                 __HOTLOAD__: mode === 'hotload',
               },
-              plugins: [
-                virtualImport({
-                  nameCount: 1,
-                  id: VI_INTERNAL_ALS_ID,
-                  content: `import { AsyncLocalStorage } from "node:async_hooks"; export const authAls = new AsyncLocalStorage();`,
-                  context: 'server',
-                }),
-                virtualImport({
-                  nameCount: 2,
-                  id: VI_ID,
-                  content: `import { authAls } from ${JSON.stringify(VI_INTERNAL_ALS_ID)};
-  export const getClerkAuthInitState = () => authAls.getStore();`,
-                  context: 'server',
-                }),
-                virtualImport({
-                  nameCount: 3,
-                  id: VI_ID,
-                  content: `
-                  const auth = JSON.parse(document.getElementById('__CLERK_ASTRO_DATA__')?.textContent || '{}');
-  export const getClerkAuthInitState = () => auth`,
-                  context: 'client',
-                }),
-              ],
 
               // We need this for top-level await
               optimizeDeps: {

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

@@ -2,13 +2,13 @@ import { CreateClerkInstanceInternalFn } from '../client/types';
 import { $initialState } from '../stores/internal';
 import { AstroClerkIntegrationParams } from '../types';
 import { mergeEnvVarsWithParams } from './merge-env-vars-with-params';
-import { getClerkAuthInitState } from 'clerk:astro';
 
 function createInjectionScriptRunner(creator: CreateClerkInstanceInternalFn) {
   async function runner(astroClerkOptions?: AstroClerkIntegrationParams) {
-    // Sync SSR initState to the store
-    // @ts-ignore missing user, organization, session objects but this is expected
-    $initialState.set(getClerkAuthInitState());
+    const ssrDataContainer = document.getElementById('__CLERK_ASTRO_DATA__');
+    if (ssrDataContainer) {
+      $initialState.set(JSON.parse(ssrDataContainer.textContent || '{}'));
+    }
 
     await creator(mergeEnvVarsWithParams(astroClerkOptions));
   }

packages/astro-clerk-auth/src/server/async-local-storage.ts

@@ -0,0 +1,12 @@
+import { type AsyncLocalStorage } from 'node:async_hooks';
+
+async function createAsyncLocalStorage<Store extends {}>(): Promise<AsyncLocalStorage<Store>> {
+  if (typeof window === 'undefined') {
+    const { AsyncLocalStorage } = await import('node:async_hooks');
+    return new AsyncLocalStorage();
+  }
+
+  return {} as AsyncLocalStorage<Store>;
+}
+
+export const authAsyncStorage = await createAsyncLocalStorage();

packages/astro-clerk-auth/src/server/clerk-middleware.ts

@@ -14,7 +14,7 @@ import { APIContext } from 'astro';
 import { createCurrentUser } from './current-user';
 import { isRedirect, setHeader } from './utils';
 import { serverRedirectWithAuth } from './server-redirect-with-auth';
-import { authAls } from 'virtual:astro-clerk/internal/als';
+import { authAsyncStorage } from './async-local-storage';
 import { buildClerkHotloadScript } from './build-clerk-hotload-script';
 
 const CONTROL_FLOW_ERROR = {
@@ -80,7 +80,7 @@ export const clerkMiddleware: ClerkMiddleware = (...args: unknown[]): any => {
      * For React component, in order to avoid hydration errors populate SSR store and do not depend on the component being wrapped ClerkLayout.
      * For now this is only needed for control components like SignedIn/SignedOut
      */
-    return authAls.run(context.locals.auth(), async () => {
+    return authAsyncStorage.run(context.locals.auth(), async () => {
       /**
        * Generate SSR page
        */

packages/astro-clerk-auth/src/server/index.ts

@@ -37,3 +37,9 @@ export { createRouteMatcher } from './route-matcher';
  * This will be used to define types of Astro.Locals inside `env.d.ts`
  */
 export type { GetAuthReturn } from './get-auth';
+
+/**
+ * Export async storage for astro component to use directly
+ */
+import { authAsyncStorage } from '../server/async-local-storage';
+export const __internal_authAsyncStorage = authAsyncStorage;

packages/astro-clerk-auth/tsup.config.ts

@@ -27,6 +27,6 @@ export default defineConfig(() => {
     bundle: true,
     sourcemap: true,
     format: ['esm'],
-    external: ['astro', 'react', 'react-dom', 'clerk:astro', 'virtual:astro-clerk'],
+    external: ['astro', 'react', 'react-dom', 'node:async_hooks'],
   };
 });