feat: route loaders serialization

package.json

@@ -188,6 +188,7 @@
     "build.cli": "tsx --require ./scripts/runBefore.ts scripts/index.ts --cli --dev",
     "build.cli.prod": "tsx --require ./scripts/runBefore.ts scripts/index.ts --cli",
     "build.core": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --qwik --insights --qwikrouter --api --platform-binding",
+    "build.router": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --qwikrouter --api",
     "build.eslint": "tsx --require ./scripts/runBefore.ts scripts/index.ts --eslint",
     "build.full": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --tsc-docs --qwik --insights --supabaseauthhelpers --api --eslint --qwikrouter --qwikworker --qwikreact --cli --platform-binding --wasm",
     "build.local": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --tsc-docs --qwik --insights --supabaseauthhelpers --api --eslint --qwikrouter --qwikworker --qwikreact --cli --platform-binding-wasm-copy",

packages/qwik-router/src/buildtime/vite/dev-server.ts

@@ -33,6 +33,7 @@ import { getExtension, normalizePath } from '../../utils/fs';
 import { updateBuildContext } from '../build';
 import type { BuildContext, BuildRoute } from '../types';
 import { formatError } from './format-error';
+import { RequestEvShareServerTiming } from '../../middleware/request-handler/request-event';
 
 export function ssrDevMiddleware(ctx: BuildContext, server: ViteDevServer) {
   const matchRouteRequest = (pathname: string) => {
@@ -188,7 +189,7 @@ export function ssrDevMiddleware(ctx: BuildContext, server: ViteDevServer) {
               res.setHeader('Set-Cookie', cookieHeaders);
             }
 
-            const serverTiming = requestEv.sharedMap.get('@serverTiming') as
+            const serverTiming = requestEv.sharedMap.get(RequestEvShareServerTiming) as
               | [string, number][]
               | undefined;
             if (serverTiming) {

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

@@ -1,12 +1,13 @@
 import type { ValueOrPromise } from '@qwik.dev/core';
 import type { QwikManifest, ResolvedManifest } from '@qwik.dev/core/optimizer';
 import { QDATA_KEY } from '../../runtime/src/constants';
-import type {
-  ActionInternal,
-  FailReturn,
-  JSONValue,
-  LoadedRoute,
-  LoaderInternal,
+import {
+  LoadedRouteProp,
+  type ActionInternal,
+  type FailReturn,
+  type JSONValue,
+  type LoadedRoute,
+  type LoaderInternal,
 } from '../../runtime/src/types';
 import { isPromise } from '../../runtime/src/utils';
 import { createCacheControl } from './cache-control';
@@ -37,6 +38,8 @@ export const RequestRouteName = '@routeName';
 export const RequestEvSharedActionId = '@actionId';
 export const RequestEvSharedActionFormData = '@actionFormData';
 export const RequestEvSharedNonce = '@nonce';
+export const RequestEvShareServerTiming = '@serverTiming';
+export const RequestEvShareQData = 'qData';
 
 export function createRequestEvent(
   serverRequestEv: ServerRequestEvent,
@@ -147,7 +150,7 @@ export function createRequestEvent(
     env,
     method: request.method,
     signal: request.signal,
-    params: loadedRoute?.[1] ?? {},
+    params: loadedRoute?.[LoadedRouteProp.Params] ?? {},
     pathname: url.pathname,
     platform,
     query: url.searchParams,
@@ -271,9 +274,14 @@ export function createRequestEvent(
     getWritableStream: () => {
       if (writableStream === null) {
         if (serverRequestEv.mode === 'dev') {
-          const serverTiming = sharedMap.get('@serverTiming') as [string, number][] | undefined;
+          const serverTiming = sharedMap.get(RequestEvShareServerTiming) as
+            | [string, number][]
+            | undefined;
           if (serverTiming) {
-            headers.set('Server-Timing', serverTiming.map((a) => `${a[0]};dur=${a[1]}`).join(','));
+            headers.set(
+              'Server-Timing',
+              serverTiming.map(([name, duration]) => `${name};dur=${duration}`).join(',')
+            );
           }
         }
         writableStream = serverRequestEv.getWritableStream(

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

@@ -1,16 +1,18 @@
-import type { QRL } from '@qwik.dev/core';
+import { type QRL } from '@qwik.dev/core';
+import { SerializerSymbol, _UNINITIALIZED } from '@qwik.dev/core/internal';
 import type { Render, RenderToStringResult } from '@qwik.dev/core/server';
-import { QACTION_KEY, QFN_KEY } from '../../runtime/src/constants';
-import type {
-  ActionInternal,
-  ClientPageData,
-  DataValidator,
-  JSONObject,
-  LoadedRoute,
-  LoaderInternal,
-  PageModule,
-  RouteModule,
-  ValidatorReturn,
+import { QACTION_KEY, QFN_KEY, QLOADER_KEY } from '../../runtime/src/constants';
+import {
+  type ActionInternal,
+  type ClientPageData,
+  type DataValidator,
+  type JSONObject,
+  type LoadedRoute,
+  LoadedRouteProp,
+  type LoaderInternal,
+  type PageModule,
+  type RouteModule,
+  type ValidatorReturn,
 } from '../../runtime/src/types';
 import { HttpStatus } from './http-status-codes';
 import { RedirectMessage } from './redirect-handler';
@@ -22,6 +24,8 @@ import {
   getRequestMode,
   getRequestTrailingSlash,
   type RequestEventInternal,
+  RequestEvShareServerTiming,
+  RequestEvShareQData,
 } from './request-event';
 import { getQwikRouterServerData } from './response-page';
 import type { QwikSerializer, RequestEvent, RequestEventBase, RequestHandler } from './types';
@@ -38,7 +42,7 @@ export const resolveRequestHandlers = (
   const routeActions: ActionInternal[] = [];
 
   const requestHandlers: RequestHandler[] = [];
-  const isPageRoute = !!(route && isLastModulePageRoute(route[2]));
+  const isPageRoute = !!(route && isLastModulePageRoute(route[LoadedRouteProp.Mods]));
   if (serverPlugins) {
     _resolveRequestHandlers(
       routeLoaders,
@@ -51,7 +55,7 @@ export const resolveRequestHandlers = (
   }
 
   if (route) {
-    const routeName = route[0];
+    const routeName = route[LoadedRouteProp.RouteName];
     if (
       checkOrigin &&
       (method === 'POST' || method === 'PUT' || method === 'PATCH' || method === 'DELETE')
@@ -67,7 +71,7 @@ export const resolveRequestHandlers = (
       requestHandlers.push(fixTrailingSlash);
       requestHandlers.push(renderQData);
     }
-    const routeModules = route[2];
+    const routeModules = route[LoadedRouteProp.Mods];
     requestHandlers.push(handleRedirect);
     _resolveRequestHandlers(
       routeLoaders,
@@ -82,7 +86,8 @@ export const resolveRequestHandlers = (
         // Set the current route name
         ev.sharedMap.set(RequestRouteName, routeName);
       });
-      requestHandlers.push(actionsMiddleware(routeActions, routeLoaders) as any);
+      requestHandlers.push(actionsMiddleware(routeActions));
+      requestHandlers.push(loadersMiddleware(routeLoaders));
       requestHandlers.push(renderHandler);
     }
   }
@@ -160,8 +165,9 @@ export const checkBrand = (obj: any, brand: string) => {
   return obj && typeof obj === 'function' && obj.__brand === brand;
 };
 
-export function actionsMiddleware(routeActions: ActionInternal[], routeLoaders: LoaderInternal[]) {
-  return async (requestEv: RequestEventInternal) => {
+export function actionsMiddleware(routeActions: ActionInternal[]): RequestHandler {
+  return async (requestEvent: RequestEvent) => {
+    const requestEv = requestEvent as RequestEventInternal;
     if (requestEv.headersSent) {
       requestEv.exit();
       return;
@@ -211,51 +217,91 @@ export function actionsMiddleware(routeActions: ActionInternal[], routeLoaders:
         }
       }
     }
+  };
+}
 
+export function loadersMiddleware(routeLoaders: LoaderInternal[]): RequestHandler {
+  return async (requestEvent: RequestEvent) => {
+    const requestEv = requestEvent as RequestEventInternal;
+    if (requestEv.headersSent) {
+      requestEv.exit();
+      return;
+    }
+    const loaders = getRequestLoaders(requestEv);
+    const isDev = getRequestMode(requestEv) === 'dev';
+    const qwikSerializer = requestEv[RequestEvQwikSerializer];
     if (routeLoaders.length > 0) {
-      const resolvedLoadersPromises = routeLoaders.map((loader) => {
-        const loaderId = loader.__id;
-        loaders[loaderId] = runValidators(
-          requestEv,
-          loader.__validators,
-          undefined, // data
-          isDev
-        )
-          .then((res) => {
-            if (res.success) {
-              if (isDev) {
-                return measure<Promise<unknown>>(
-                  requestEv,
-                  loader.__qrl.getSymbol().split('_', 1)[0],
-                  () => loader.__qrl.call(requestEv, requestEv)
-                );
-              } else {
-                return loader.__qrl.call(requestEv, requestEv);
-              }
-            } else {
-              return requestEv.fail(res.status ?? 500, res.error);
-            }
-          })
-          .then((resolvedLoader) => {
-            if (typeof resolvedLoader === 'function') {
-              loaders[loaderId] = resolvedLoader();
-            } else {
-              if (isDev) {
-                verifySerializable(qwikSerializer, resolvedLoader, loader.__qrl);
-              }
-              loaders[loaderId] = resolvedLoader;
-            }
-            return resolvedLoader;
-          });
-
-        return loaders[loaderId];
-      });
+      let currentLoaders: LoaderInternal[] = [];
+      if (requestEv.query.has(QLOADER_KEY)) {
+        const selectedLoaderIds = requestEv.query.getAll(QLOADER_KEY);
+        const skippedLoaders: LoaderInternal[] = [];
+        for (const loader of routeLoaders) {
+          if (selectedLoaderIds.includes(loader.__id)) {
+            currentLoaders.push(loader);
+          } else {
+            skippedLoaders.push(loader);
+          }
+        }
 
+        // mark skipped loaders as null
+        for (const skippedLoader of skippedLoaders) {
+          loaders[skippedLoader.__id] = null;
+        }
+      } else {
+        currentLoaders = routeLoaders;
+      }
+      const resolvedLoadersPromises = currentLoaders.map((loader) =>
+        getRouteLoaderPromise(loader, loaders, requestEv, isDev, qwikSerializer)
+      );
       await Promise.all(resolvedLoadersPromises);
     }
   };
 }
 
+async function getRouteLoaderPromise(
+  loader: LoaderInternal,
+  loaders: Record<string, unknown>,
+  requestEv: RequestEventInternal,
+  isDev: boolean,
+  qwikSerializer: QwikSerializer
+) {
+  const loaderId = loader.__id;
+  loaders[loaderId] = runValidators(
+    requestEv,
+    loader.__validators,
+    undefined, // data
+    isDev
+  )
+    .then((res) => {
+      if (res.success) {
+        if (isDev) {
+          return measure<Promise<unknown>>(
+            requestEv,
+            loader.__qrl.getSymbol().split('_', 1)[0],
+            () => loader.__qrl.call(requestEv, requestEv)
+          );
+        } else {
+          return loader.__qrl.call(requestEv, requestEv);
+        }
+      } else {
+        return requestEv.fail(res.status ?? 500, res.error);
+      }
+    })
+    .then((resolvedLoader) => {
+      if (typeof resolvedLoader === 'function') {
+        loaders[loaderId] = resolvedLoader();
+      } else {
+        if (isDev) {
+          verifySerializable(qwikSerializer, resolvedLoader, loader.__qrl);
+        }
+        loaders[loaderId] = resolvedLoader;
+      }
+      return resolvedLoader;
+    });
+
+  return loaders[loaderId];
+}
+
 async function runValidators(
   requestEv: RequestEvent,
   validators: DataValidator[] | undefined,
@@ -399,7 +445,7 @@ export function getPathname(url: URL, trailingSlash: boolean | undefined) {
     }
   }
   // strip internal search params
-  const search = url.search.slice(1).replaceAll(/&?q(action|data|func)=[^&]+/g, '');
+  const search = url.search.slice(1).replaceAll(/&?q(action|data|func|loader)=[^&]+/g, '');
   return `${url.pathname}${search ? `?${search}` : ''}${url.hash}`;
 }
 
@@ -471,7 +517,7 @@ export function renderQwikMiddleware(render: Render) {
         // write the already completed html to the stream
         await stream.write((result as any as RenderToStringResult).html);
       }
-      requestEv.sharedMap.set('qData', qData);
+      requestEv.sharedMap.set(RequestEvShareQData, qData);
     } finally {
       await stream.ready;
       await stream.close();
@@ -533,8 +579,20 @@ export async function renderQData(requestEv: RequestEvent) {
   requestEv.request.headers.forEach((value, key) => (requestHeaders[key] = value));
   requestEv.headers.set('Content-Type', 'application/json; charset=utf-8');
 
+  const allLoaders = getRequestLoaders(requestEv);
+  const loaders: Record<string, unknown> = {};
+  for (const loaderId in allLoaders) {
+    const loader = allLoaders[loaderId];
+    if (typeof loader === 'object' && loader !== null && SerializerSymbol in loader) {
+      delete (loader as any)[SerializerSymbol];
+    }
+    if (loader !== _UNINITIALIZED) {
+      loaders[loaderId] = loader;
+    }
+  }
+
   const qData: ClientPageData = {
-    loaders: getRequestLoaders(requestEv),
+    loaders,
     action: requestEv.sharedMap.get(RequestEvSharedActionId),
     status: status !== 200 ? status : 200,
     href: getPathname(requestEv.url, trailingSlash),
@@ -545,7 +603,7 @@ export async function renderQData(requestEv: RequestEvent) {
   // write just the page json data to the response body
   const data = await qwikSerializer._serialize([qData]);
   writer.write(encoder.encode(data));
-  requestEv.sharedMap.set('qData', qData);
+  requestEv.sharedMap.set(RequestEvShareQData, qData);
 
   writer.close();
 }
@@ -576,9 +634,9 @@ export async function measure<T>(
     return await fn();
   } finally {
     const duration = now() - start;
-    let measurements = requestEv.sharedMap.get('@serverTiming');
+    let measurements = requestEv.sharedMap.get(RequestEvShareServerTiming);
     if (!measurements) {
-      requestEv.sharedMap.set('@serverTiming', (measurements = []));
+      requestEv.sharedMap.set(RequestEvShareServerTiming, (measurements = []));
     }
     measurements.push([name, duration]);
   }

packages/qwik-router/src/middleware/request-handler/resolve-request-handlers.unit.ts

@@ -28,6 +28,9 @@ describe('resolve-request-handler', () => {
       expect(getPathname(new URL('http://server/path?foo=1&qfunc=f&bar=2'), false)).toBe(
         '/path?foo=1&bar=2'
       );
+      expect(getPathname(new URL('http://server/path?foo=1&qloader=f&bar=2'), false)).toBe(
+        '/path?foo=1&bar=2'
+      );
     });
   });