feat: add after API call hooks and refactor handler

- Introduced `afterApiCall` and `afterPageRender` hooks for better control over API and page rendering processes.
- Updated the handler to utilize these hooks, enhancing the request lifecycle management.

Author: barelyhuman

adex/runtime/handler.js

@@ -35,17 +35,24 @@ export async function handler(req, res) {
       req.params = routeParams
       const modifiableContext = {
         req: req,
+        res: res,
+      }
+      await emitToHooked(CONSTANTS.beforeApiCall, modifiableContext)
+      const handlerFn =
+        'default' in module ? module.default : (_, res) => res.end()
+      const serverHandler = async (req, res) => {
+        await handlerFn(req, res)
+        await emitToHooked(CONSTANTS.afterApiCall, { req, res })
       }
-      await emitToHooked(CONSTANTS.apiCall, modifiableContext)
       return {
-        serverHandler:
-          'default' in module ? module.default : (_, res) => res.end(),
+        serverHandler,
       }
     }
     return {
-      serverHandler: (_, res) => {
+      serverHandler: async (_, res) => {
         res.statusCode = 404
         res.end('Not found')
+        await emitToHooked(CONSTANTS.afterApiCall, { req, res })
       },
     }
   }
@@ -60,9 +67,17 @@ export async function handler(req, res) {
     // @ts-expect-error
     global.location = new URL(req.url, 'http://localhost')
 
-    const rendered = await renderToStringAsync(h(App, { url: req.url }), {})
+    const modifiableContext = {
+      req: req,
+    }
+    await emitToHooked(CONSTANTS.beforePageRender, modifiableContext)
+
+    const rendered = await renderToStringAsync(
+      h(App, { url: modifiableContext.req.url }),
+      {}
+    )
 
-    const htmlString = HTMLTemplate({
+    let htmlString = HTMLTemplate({
       metas,
       links,
       title,
@@ -73,13 +88,12 @@ export async function handler(req, res) {
       ),
       body: rendered,
     })
-    const modifiableContext = {
-      req: req,
-      html: htmlString,
-    }
-    await emitToHooked(CONSTANTS.pageRender, modifiableContext)
+
+    modifiableContext.html = htmlString
+    await emitToHooked(CONSTANTS.afterPageRender, modifiableContext)
+    htmlString = modifiableContext.html
     return {
-      html: modifiableContext.html,
+      html: htmlString,
       pageRoute: matchedInPages.route,
     }
   }

adex/src/hook.d.ts

@@ -10,8 +10,10 @@ export type APIContext = {
 }
 
 export declare const CONSTANTS: {
-  pageRender: symbol
-  apiCall: symbol
+  beforePageRender: symbol
+  afterPageRender: symbol
+  beforeApiCall: symbol
+  afterApiCall: symbol
 }
 
 export declare function hook(
@@ -20,11 +22,19 @@ export declare function hook(
 ): void
 
 export declare function beforePageRender(
+  fn: (ctx: Omit<Context, 'html'>) => void
+): Promise<void>
+
+export declare function afterPageRender(
   fn: (ctx: Context) => void
 ): Promise<void>
 
 export declare function beforeAPICall(
   fn: (ctx: APIContext) => void
 ): Promise<void>
 
+export declare function afterAPICall(
+  fn: (ctx: APIContext) => void
+): Promise<void>
+
 export declare function emitToHooked(eventName: any, data: any): Promise<void>

adex/src/hook.js

@@ -1,24 +1,60 @@
 const hookListeners = new Map()
 
 export const CONSTANTS = {
-  pageRender: Symbol('page-render'),
-  apiCall: Symbol('api-call'),
+  beforePageRender: Symbol('before-page-render'),
+  afterPageRender: Symbol('after-page-render'),
+  beforeApiCall: Symbol('before-api-call'),
+  afterApiCall: Symbol('after-api-call'),
 }
 
+/**
+ * Register a hook handler for a given event
+ * @param {symbol} eventName
+ * @param {(context: any) => any|Promise<any>} handler
+ */
 export function hook(eventName, handler) {
   const handlers = hookListeners.get(eventName) || []
   handlers.push(handler)
   hookListeners.set(eventName, handlers)
 }
 
-export async function beforePageRender(fn) {
-  hook(CONSTANTS.pageRender, fn)
+/**
+ * Register a hook to run before page render
+ * @param {(context: any) => any|Promise<any>} fn
+ */
+export function beforePageRender(fn) {
+  hook(CONSTANTS.beforePageRender, fn)
 }
 
-export async function beforeAPICall(fn) {
-  hook(CONSTANTS.apiCall, fn)
+/**
+ * Register a hook to run after page render
+ * @param {(context: any) => any|Promise<any>} fn
+ */
+export function afterPageRender(fn) {
+  hook(CONSTANTS.afterPageRender, fn)
 }
 
+/**
+ * Register a hook to run before API call
+ * @param {(context: any) => any|Promise<any>} fn
+ */
+export function beforeAPICall(fn) {
+  hook(CONSTANTS.beforeApiCall, fn)
+}
+
+/**
+ * Register a hook to run after API call
+ * @param {(context: any) => any|Promise<any>} fn
+ */
+export function afterAPICall(fn) {
+  hook(CONSTANTS.afterApiCall, fn)
+}
+
+/**
+ * Emit an event to all registered hooks
+ * @param {symbol} eventName
+ * @param {any} data
+ */
 export async function emitToHooked(eventName, data) {
   const handlers = hookListeners.get(eventName) || []
   for (let handler of handlers) {

playground/src/api/html.js

@@ -1,3 +1,9 @@
+import { afterAPICall } from 'adex/hook'
+
+afterAPICall(ctx => {
+  console.log('called after api')
+})
+
 /**
  * @param {import("adex/http").IncomingMessage} req
  * @param {import("adex/http").ServerResponse} res