feat: implement q-action

Author: Varixo

packages/qwik-router/global.d.ts

@@ -1,8 +1,6 @@
 /* eslint-disable no-var */
 // Globals used by qwik-router, for internal use only
 
-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;
 

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

@@ -0,0 +1,105 @@
+import type {
+  ActionInternal,
+  JSONObject,
+  RequestEvent,
+  RequestHandler,
+} from '../../runtime/src/types';
+import { runValidators } from './loader-endpoints';
+import {
+  getRequestActions,
+  getRequestMode,
+  RequestEvQwikSerializer,
+  type RequestEventInternal,
+} from './request-event';
+import { measure, verifySerializable } from './resolve-request-handlers';
+import type { QwikSerializer } from './types';
+import { IsQAction, QActionId } from './user-response';
+import { _UNINITIALIZED, type ValueOrPromise } from '@qwik.dev/core/internal';
+
+export function actionHandler(routeActions: ActionInternal[]): RequestHandler {
+  return async (requestEvent: RequestEvent) => {
+    const requestEv = requestEvent as RequestEventInternal;
+
+    const isQAction = requestEv.sharedMap.has(IsQAction);
+    if (!isQAction) {
+      return;
+    }
+
+    if (requestEv.headersSent || requestEv.exited) {
+      return;
+    }
+    const actionId = requestEv.sharedMap.get(QActionId);
+
+    // Execute just this action
+    const actions = getRequestActions(requestEv);
+    const isDev = getRequestMode(requestEv) === 'dev';
+    const qwikSerializer = requestEv[RequestEvQwikSerializer];
+    const method = requestEv.method;
+
+    if (isDev && method === 'GET') {
+      console.warn(
+        'Seems like you are submitting a Qwik Action via GET request. Qwik Actions should be submitted via POST request.\nMake sure your <form> has method="POST" attribute, like this: <form method="POST">'
+      );
+    }
+    if (method === 'POST') {
+      let action: ActionInternal | undefined;
+      for (const routeAction of routeActions) {
+        if (routeAction.__id === actionId) {
+          action = routeAction;
+          break;
+        }
+        // TODO: do we need to initialize the rest with _UNINITIALIZED?
+      }
+      if (!action) {
+        const serverActionsMap = globalThis._qwikActionsMap as
+          | Map<string, ActionInternal>
+          | undefined;
+        action = serverActionsMap?.get(actionId);
+      }
+
+      if (!action) {
+        requestEv.json(404, { error: 'Action not found' });
+        return;
+      }
+
+      await executeAction(action, actions, requestEv, isDev, qwikSerializer);
+
+      if (requestEv.request.headers.get('accept')?.includes('application/json')) {
+        // only return the action data if the client accepts json, otherwise return the html page
+        const data = await qwikSerializer._serialize([actions[actionId]]);
+        requestEv.headers.set('Content-Type', 'application/json; charset=utf-8');
+        requestEv.send(200, data);
+        return;
+      }
+    }
+  };
+}
+
+async function executeAction(
+  action: ActionInternal,
+  actions: Record<string, ValueOrPromise<unknown> | undefined>,
+  requestEv: RequestEventInternal,
+  isDev: boolean,
+  qwikSerializer: QwikSerializer
+) {
+  const selectedActionId = action.__id;
+  requestEv.sharedMap.set(QActionId, selectedActionId);
+  const data = await requestEv.parseBody();
+  if (!data || typeof data !== 'object') {
+    throw new Error(`Expected request data for the action id ${selectedActionId} to be an object`);
+  }
+  const result = await runValidators(requestEv, action.__validators, data, isDev);
+  if (!result.success) {
+    actions[selectedActionId] = requestEv.fail(result.status ?? 500, result.error);
+  } else {
+    const actionResolved = isDev
+      ? await measure(requestEv, action.__qrl.getHash(), () =>
+          action.__qrl.call(requestEv, result.data as JSONObject, requestEv)
+        )
+      : await action.__qrl.call(requestEv, result.data as JSONObject, requestEv);
+    if (isDev) {
+      verifySerializable(qwikSerializer, actionResolved, action.__qrl);
+    }
+    actions[selectedActionId] = actionResolved;
+  }
+}

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

@@ -58,7 +58,7 @@ export function loaderDataHandler(routeLoaders: LoaderInternal[]): RequestHandle
   };
 }
 
-export function singleLoaderHandler(routeLoaders: LoaderInternal[]): RequestHandler {
+export function loaderHandler(routeLoaders: LoaderInternal[]): RequestHandler {
   return async (requestEvent: RequestEvent) => {
     const requestEv = requestEvent as RequestEventInternal;
 

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

@@ -2,14 +2,13 @@
 
 import type { RequestEvent } from '@qwik.dev/router';
 import { _serialize } from 'packages/qwik/core-internal';
-import { RequestEvIsRewrite, RequestEvSharedActionId } from './request-event';
+import { RequestEvIsRewrite } from './request-event';
 import { getPathname } from './resolve-request-handlers';
 import { IsQData } from './user-response';
 
 export interface QData {
   status: number;
   href: string;
-  action?: string;
   redirect?: string;
   isRewrite?: boolean;
 }
@@ -32,7 +31,6 @@ export async function qDataHandler(requestEv: RequestEvent) {
   const qData: QData = {
     status,
     href: getPathname(requestEv.url),
-    action: requestEv.sharedMap.get(RequestEvSharedActionId),
     redirect: redirectLocation ?? undefined,
     isRewrite: requestEv.sharedMap.get(RequestEvIsRewrite),
   };

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

@@ -1,6 +1,6 @@
 import type { ValueOrPromise } from '@qwik.dev/core';
 import { _deserialize, _UNINITIALIZED, type SerializationStrategy } from '@qwik.dev/core/internal';
-import { QDATA_KEY } from '../../runtime/src/constants';
+import { QACTION_KEY, QDATA_KEY } from '../../runtime/src/constants';
 import {
   LoadedRouteProp,
   type ActionInternal,
@@ -16,9 +16,10 @@ import { Cookie } from './cookie';
 import {
   AbortMessage,
   RedirectMessage,
-  ServerError,
   RewriteMessage,
+  ServerError,
 } from '@qwik.dev/router/middleware/request-handler';
+import { executeLoader } from './loader-endpoints';
 import { encoder } from './resolve-request-handlers';
 import type {
   CacheControl,
@@ -32,26 +33,27 @@ import type {
   ServerRequestMode,
 } from './types';
 import {
+  IsQAction,
   IsQData,
   IsQLoader,
   IsQLoaderData,
+  LOADER_REGEX,
   OriginalQDataName,
   Q_LOADER_DATA_REGEX,
+  QActionId,
   QDATA_JSON,
   QDATA_JSON_LEN,
   QLoaderId,
-  SINGLE_LOADER_REGEX,
 } from './user-response';
-import { executeLoader } from './loader-endpoints';
 
 const RequestEvLoaders = Symbol('RequestEvLoaders');
+const RequestEvActions = Symbol('RequestEvActions');
 const RequestEvMode = Symbol('RequestEvMode');
 const RequestEvRoute = Symbol('RequestEvRoute');
 export const RequestEvLoaderSerializationStrategyMap = Symbol(
   'RequestEvLoaderSerializationStrategyMap'
 );
 export const RequestRouteName = '@routeName';
-export const RequestEvSharedActionId = '@actionId';
 export const RequestEvSharedActionFormData = '@actionFormData';
 export const RequestEvSharedNonce = '@nonce';
 export const RequestEvIsRewrite = '@rewrite';
@@ -91,6 +93,12 @@ export function createRequestEvent(
     trimEnd(requestRecognized.trimLength);
   }
 
+  const actionMatch = url.searchParams.get(QACTION_KEY);
+  if (actionMatch) {
+    sharedMap.set(IsQAction, true);
+    sharedMap.set(QActionId, actionMatch);
+  }
+
   let routeModuleIndex = -1;
   let writableStream: WritableStream<Uint8Array> | null = null;
   let requestData: Promise<JSONValue | undefined> | undefined = undefined;
@@ -174,8 +182,10 @@ export function createRequestEvent(
   };
 
   const loaders: Record<string, ValueOrPromise<unknown> | undefined> = {};
+  const actions: Record<string, ValueOrPromise<unknown> | undefined> = {};
   const requestEv: RequestEventInternal = {
     [RequestEvLoaders]: loaders,
+    [RequestEvActions]: actions,
     [RequestEvLoaderSerializationStrategyMap]: new Map(),
     [RequestEvMode]: serverRequestEv.mode,
     get [RequestEvRoute]() {
@@ -359,6 +369,7 @@ export function createRequestEvent(
 
 export interface RequestEventInternal extends RequestEvent, RequestEventLoader {
   [RequestEvLoaders]: Record<string, ValueOrPromise<unknown> | undefined>;
+  [RequestEvActions]: Record<string, ValueOrPromise<unknown> | undefined>;
   [RequestEvLoaderSerializationStrategyMap]: Map<string, SerializationStrategy>;
   [RequestEvMode]: ServerRequestMode;
   [RequestEvRoute]: LoadedRoute | null;
@@ -388,6 +399,10 @@ export function getRequestLoaders(requestEv: RequestEventCommon) {
   return (requestEv as RequestEventInternal)[RequestEvLoaders];
 }
 
+export function getRequestActions(requestEv: RequestEventCommon) {
+  return (requestEv as RequestEventInternal)[RequestEvActions];
+}
+
 export function getRequestLoaderSerializationStrategyMap(requestEv: RequestEventCommon) {
   return (requestEv as RequestEventInternal)[RequestEvLoaderSerializationStrategyMap];
 }
@@ -488,7 +503,7 @@ export function recognizeRequest(pathname: string) {
     };
   }
 
-  const loaderMatch = pathname.match(SINGLE_LOADER_REGEX);
+  const loaderMatch = pathname.match(LOADER_REGEX);
   if (loaderMatch) {
     return {
       type: IsQLoader,