refactor(router): make async request store a regular export

Co-Authored-By: Jerry_wu <[email protected]>

Author: wmertens

packages/qwik-router/global.d.ts

@@ -8,10 +8,7 @@ declare module '*?compiled-string' {
 
 type RequestEventInternal =
   import('./middleware/request-handler/request-event').RequestEventInternal;
-type AsyncStore = import('node:async_hooks').AsyncLocalStorage<RequestEventInternal>;
 type SerializationStrategy = import('@qwik.dev/core/internal').SerializationStrategy;
-
-declare var qcAsyncRequestStore: AsyncStore | undefined;
 declare var _qwikActionsMap: Map<string, ActionInternal> | undefined;
 
 type ExperimentalFeatures = import('@qwik.dev/core/optimizer').ExperimentalFeatures;

packages/qwik-router/src/middleware/request-handler/async-request-store.ts

@@ -1,4 +1,4 @@
-export { requestHandler } from './request-handler';
+export { requestHandler, _asyncRequestStore } from './request-handler';
 
 export { getErrorHtml } from './error-handler';
 export { getNotFound } from './not-found-paths';

packages/qwik-router/src/middleware/request-handler/index.ts

@@ -5,6 +5,7 @@
 ```ts
 
 import type { Action } from '@qwik.dev/router';
+import type { AsyncLocalStorage } from 'node:async_hooks';
 import type { EnvGetter as EnvGetter_2 } from '@qwik.dev/router/middleware/request-handler';
 import type { FailReturn } from '@qwik.dev/router';
 import type { Loader as Loader_2 } from '@qwik.dev/router';
@@ -24,6 +25,11 @@ import type { ValueOrPromise } from '@qwik.dev/core';
 export class AbortMessage {
 }
 
+// Warning: (ae-forgotten-export) The symbol "RequestEventInternal" needs to be exported by the entry point index.d.ts
+//
+// @internal (undocumented)
+export let _asyncRequestStore: AsyncLocalStorage<RequestEventInternal> | undefined;
+
 // Warning: (ae-forgotten-export) The symbol "CacheControlOptions" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -240,8 +246,6 @@ export interface ServerRequestEvent<T = unknown> {
 // @public (undocumented)
 export type ServerRequestMode = 'dev' | 'static' | 'server';
 
-// Warning: (ae-forgotten-export) The symbol "RequestEventInternal" needs to be exported by the entry point index.d.ts
-//
 // @public (undocumented)
 export type ServerResponseHandler<T = any> = (status: number, headers: Headers, cookies: Cookie, resolve: (response: T) => void, requestEv: RequestEventInternal) => WritableStream<Uint8Array>;
 

packages/qwik-router/src/middleware/request-handler/middleware.request-handler.api.md

@@ -1,10 +1,33 @@
+import { isServer } from '@qwik.dev/core/build';
 import type { Render } from '@qwik.dev/core/server';
+import type { AsyncLocalStorage } from 'node:async_hooks';
 import { loadRoute } from '../../runtime/src/routing';
 import type { QwikRouterConfig, RebuildRouteInfoInternal } from '../../runtime/src/types';
+import type { RequestEventInternal } from './request-event';
 import { renderQwikMiddleware, resolveRequestHandlers } from './resolve-request-handlers';
 import type { ServerRenderOptions, ServerRequestEvent } from './types';
 import { getRouteMatchPathname, runQwikRouter, type QwikRouterRun } from './user-response';
 
+/** @internal */
+export let _asyncRequestStore: AsyncLocalStorage<RequestEventInternal> | undefined;
+if (isServer) {
+  // TODO when we drop cjs support, await this
+  import('node:async_hooks')
+    .then((module) => {
+      _asyncRequestStore = new module.AsyncLocalStorage();
+    })
+    .catch((err) => {
+      console.warn(
+        '\n=====================\n' +
+          '  Qwik Router Warning:\n' +
+          '    AsyncLocalStorage is not available, continuing without it.\n' +
+          '    This impacts concurrent async server calls, where they lose access to the ServerRequestEv object.\n' +
+          '=====================\n\n',
+        err
+      );
+    });
+}
+
 /**
  * We need to delay importing the config until the first request, because vite also imports from
  * this file and @qwik-router-config doesn't exist from the vite config before the build.

packages/qwik-router/src/middleware/request-handler/request-handler.ts

@@ -16,6 +16,7 @@ import {
   RedirectMessage,
   RewriteMessage,
   ServerError,
+  _asyncRequestStore,
 } from '@qwik.dev/router/middleware/request-handler';
 
 export interface QwikRouterRun<T> {
@@ -36,20 +37,6 @@ export interface QwikRouterRun<T> {
   completion: Promise<RedirectMessage | Error | undefined>;
 }
 
-let asyncStore: AsyncStore | undefined;
-import('node:async_hooks')
-  .then((module) => {
-    const AsyncLocalStorage = module.AsyncLocalStorage;
-    asyncStore = new AsyncLocalStorage<RequestEventInternal>();
-    globalThis.qcAsyncRequestStore = asyncStore;
-  })
-  .catch((err) => {
-    console.warn(
-      'AsyncLocalStorage not available, continuing without it. This might impact concurrent server calls.',
-      err
-    );
-  });
-
 export function runQwikRouter<T>(
   serverRequestEv: ServerRequestEvent<T>,
   loadedRoute: LoadedRoute | null,
@@ -70,8 +57,8 @@ export function runQwikRouter<T>(
   return {
     response: responsePromise,
     requestEv,
-    completion: asyncStore
-      ? asyncStore.run(requestEv, runNext, requestEv, rebuildRouteInfo, resolve!)
+    completion: _asyncRequestStore
+      ? _asyncRequestStore.run(requestEv, runNext, requestEv, rebuildRouteInfo, resolve!)
       : runNext(requestEv, rebuildRouteInfo, resolve!),
   };
 }

packages/qwik-router/src/middleware/request-handler/user-response.ts

@@ -14,12 +14,11 @@ import {
   _deserialize,
   _getContextElement,
   _getContextEvent,
-  _serialize,
-  _UNINITIALIZED,
   _resolveContextWithoutSequentialScope,
+  _serialize,
   type SerializationStrategy,
 } from '@qwik.dev/core/internal';
-
+import { _asyncRequestStore } from '@qwik.dev/router/middleware/request-handler';
 import * as v from 'valibot';
 import { z } from 'zod';
 import type { RequestEventLoader } from '../../middleware/request-handler/types';
@@ -30,6 +29,8 @@ import {
   QFN_KEY,
 } from './constants';
 import { RouteStateContext } from './contexts';
+import { deepFreeze } from './deepFreeze';
+import type { FormSubmitCompletedDetail } from './form-component';
 import type {
   ActionConstructor,
   ActionConstructorQRL,
@@ -63,9 +64,6 @@ import type {
 } from './types';
 import { useAction, useLocation, useQwikRouterEnv } from './use-functions';
 
-import type { FormSubmitCompletedDetail } from './form-component';
-import { deepFreeze } from './deepFreeze';
-
 /** @internal */
 export const routeActionQrl = ((
   actionQrl: QRL<(form: JSONObject, event: RequestEventAction) => unknown>,
@@ -411,107 +409,102 @@ export const serverQrl = <T extends ServerFunction>(
   const origin = options?.origin || '';
   const fetchOptions = options?.fetchOptions || {};
 
-  function rpc() {
-    return $(async function (this: RequestEventBase, ...args: Parameters<T>) {
-      // move to ServerConfig
-      const abortSignal =
-        args.length > 0 && args[0] instanceof AbortSignal
-          ? (args.shift() as AbortSignal)
-          : undefined;
-
-      if (isServer) {
-        // Running during SSR, we can call the function directly
-        let requestEvent = globalThis.qcAsyncRequestStore?.getStore() as RequestEvent | undefined;
+  return $(async function (this: RequestEventBase | undefined, ...args: Parameters<T>) {
+    // move to ServerConfig
+    const abortSignal =
+      args.length > 0 && args[0] instanceof AbortSignal ? (args.shift() as AbortSignal) : undefined;
+
+    if (isServer) {
+      // Running during SSR, we can call the function directly
+      let requestEvent = _asyncRequestStore?.getStore() as RequestEvent | undefined;
+
+      if (!requestEvent) {
+        const contexts = [useQwikRouterEnv()?.ev, this, _getContextEvent()] as RequestEvent[];
+        requestEvent = contexts.find(
+          (v) =>
+            v &&
+            Object.prototype.hasOwnProperty.call(v, 'sharedMap') &&
+            Object.prototype.hasOwnProperty.call(v, 'cookie')
+        );
+      }
 
-        if (!requestEvent) {
-          const contexts = [useQwikRouterEnv()?.ev, this, _getContextEvent()] as RequestEvent[];
-          requestEvent = contexts.find(
-            (v) =>
-              v &&
-              Object.prototype.hasOwnProperty.call(v, 'sharedMap') &&
-              Object.prototype.hasOwnProperty.call(v, 'cookie')
-          );
+      return qrl.apply(requestEvent, isDev ? deepFreeze(args) : args);
+    } else {
+      // Running on the client, we need to call the function via HTTP
+      const ctxElm = _getContextElement();
+      const filteredArgs = args.map((arg: unknown) => {
+        if (arg instanceof SubmitEvent && arg.target instanceof HTMLFormElement) {
+          return new FormData(arg.target);
+        } else if (arg instanceof Event) {
+          return null;
+        } else if (arg instanceof Node) {
+          return null;
         }
-
-        return qrl.apply(requestEvent, isDev ? deepFreeze(args) : args);
+        return arg;
+      });
+      const qrlHash = qrl.getHash();
+      // Handled by `pureServerFunction` middleware
+      let query = '';
+      const config = {
+        ...fetchOptions,
+        method,
+        headers: {
+          ...headers,
+          'Content-Type': 'application/qwik-json',
+          Accept: 'application/json, application/qwik-json, text/qwik-json-stream, text/plain',
+          // Required so we don't call accidentally
+          'X-QRL': qrlHash,
+        },
+        signal: abortSignal,
+      };
+      const body = await _serialize([qrl, ...filteredArgs]);
+      if (method === 'GET') {
+        query += `&${QDATA_KEY}=${encodeURIComponent(body)}`;
       } else {
-        // Running on the client, we need to call the function via HTTP
-        const ctxElm = _getContextElement();
-        const filteredArgs = args.map((arg: unknown) => {
-          if (arg instanceof SubmitEvent && arg.target instanceof HTMLFormElement) {
-            return new FormData(arg.target);
-          } else if (arg instanceof Event) {
-            return null;
-          } else if (arg instanceof Node) {
-            return null;
-          }
-          return arg;
-        });
-        const qrlHash = qrl.getHash();
-        // Handled by `pureServerFunction` middleware
-        let query = '';
-        const config = {
-          ...fetchOptions,
-          method,
-          headers: {
-            ...headers,
-            'Content-Type': 'application/qwik-json',
-            Accept: 'application/json, application/qwik-json, text/qwik-json-stream, text/plain',
-            // Required so we don't call accidentally
-            'X-QRL': qrlHash,
-          },
-          signal: abortSignal,
-        };
-        const body = await _serialize([qrl, ...filteredArgs]);
-        if (method === 'GET') {
-          query += `&${QDATA_KEY}=${encodeURIComponent(body)}`;
-        } else {
-          // PatrickJS: sorry Ryan Florence I prefer const still
-          config.body = body;
-        }
-        const res = await fetch(`${origin}?${QFN_KEY}=${qrlHash}${query}`, config);
-
-        const contentType = res.headers.get('Content-Type');
-        if (res.ok && contentType === 'text/qwik-json-stream' && res.body) {
-          return (async function* () {
-            try {
-              for await (const result of deserializeStream(
-                res.body!,
-                ctxElm ?? document.documentElement,
-                abortSignal
-              )) {
-                yield result;
-              }
-            } finally {
-              if (!abortSignal?.aborted) {
-                await res.body!.cancel();
-              }
+        // PatrickJS: sorry Ryan Florence I prefer const still
+        config.body = body;
+      }
+      const res = await fetch(`${origin}?${QFN_KEY}=${qrlHash}${query}`, config);
+
+      const contentType = res.headers.get('Content-Type');
+      if (res.ok && contentType === 'text/qwik-json-stream' && res.body) {
+        return (async function* () {
+          try {
+            for await (const result of deserializeStream(
+              res.body!,
+              ctxElm ?? document.documentElement,
+              abortSignal
+            )) {
+              yield result;
+            }
+          } finally {
+            if (!abortSignal?.aborted) {
+              await res.body!.cancel();
             }
-          })();
-        } else if (contentType === 'application/qwik-json') {
-          const str = await res.text();
-          const [obj] = _deserialize(str, ctxElm ?? document.documentElement);
-          if (res.status >= 400) {
-            throw obj;
-          }
-          return obj;
-        } else if (contentType === 'application/json') {
-          const obj = await res.json();
-          if (res.status >= 400) {
-            throw obj;
-          }
-          return obj;
-        } else if (contentType === 'text/plain' || contentType === 'text/html') {
-          const str = await res.text();
-          if (res.status >= 400) {
-            throw str;
           }
-          return str;
+        })();
+      } else if (contentType === 'application/qwik-json') {
+        const str = await res.text();
+        const [obj] = _deserialize(str, ctxElm ?? document.documentElement);
+        if (res.status >= 400) {
+          throw obj;
+        }
+        return obj;
+      } else if (contentType === 'application/json') {
+        const obj = await res.json();
+        if (res.status >= 400) {
+          throw obj;
         }
+        return obj;
+      } else if (contentType === 'text/plain' || contentType === 'text/html') {
+        const str = await res.text();
+        if (res.status >= 400) {
+          throw str;
+        }
+        return str;
       }
-    }) as ServerQRL<T>;
-  }
-  return rpc();
+    }
+  }) as ServerQRL<T>;
 };
 
 /** @public */