@hyperspan/framework 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperspan/framework",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Hyperspan Web Framework",
   "main": "src/server.ts",
   "types": "src/server.ts",
@@ -67,12 +67,14 @@
   },
   "devDependencies": {
     "@types/bun": "^1.3.1",
+    "@types/debug": "^4.1.12",
     "@types/node": "^24.10.0",
     "prettier": "^3.5.2",
     "typescript": "^5.9.3"
   },
   "dependencies": {
     "@hyperspan/html": "^1.0.0",
+    "debug": "^4.4.3",
     "isbot": "^5.1.32",
     "zod": "^4.1.12"
   }

package/src/actions.test.ts

@@ -2,7 +2,6 @@ import { test, expect, describe } from 'bun:test';
 import { createAction } from './actions';
 import { html, render, type HSHtml } from '@hyperspan/html';
 import { createContext } from './server';
-import type { Hyperspan as HS } from './types';
 import * as z from 'zod/v4';
 
 describe('createAction', () => {
@@ -40,6 +39,74 @@ describe('createAction', () => {
     expect(htmlString).toContain('name="name"');
   });
 
+  test('creates an action with a simple form and no schema that returns HTML on POST', async () => {
+    const action = createAction({
+      name: 'test',
+    }).form((c) => {
+      return html`
+          <form>
+            <input type="text" name="name" />
+            <button type="submit">Submit</button>
+          </form>
+        `;
+    }).post(async (c, { data }) => {
+      return c.res.html(`
+          <p>Hello, ${data?.name}!</p>
+        `);
+    });
+
+    // Build form data
+    const formData = new FormData();
+    formData.append('name', 'John Doe');
+
+    // Test render method
+    const request = new Request(`http://localhost:3000${action._path()}`, {
+      method: 'POST',
+      body: formData,
+    });
+    const response = await action.fetch(request);
+    expect(response).toBeInstanceOf(Response);
+    expect(response.status).toBe(200);
+    const responseText = await response.text();
+    expect(responseText).toContain('<p>Hello, John Doe!</p>');
+  });
+
+  test('errors thrown on POST handler provided by user are caught and rendered', async () => {
+    const action = createAction({
+      name: 'test',
+    }).form((c, { error }) => {
+      if (error) {
+        return html`
+          <p>Error: ${error.message}</p>
+        `;
+      }
+
+      return html`
+          <form>
+            <input type="text" name="name" />
+            <button type="submit">Submit</button>
+          </form>
+        `;
+    }).post(async (c, { data }) => {
+      throw new Error('Test error');
+    });
+
+    // Build form data
+    const formData = new FormData();
+    formData.append('name', 'John Doe');
+
+    // Test render method
+    const request = new Request(`http://localhost:3000${action._path()}`, {
+      method: 'POST',
+      body: formData,
+    });
+    const response = await action.fetch(request);
+    expect(response).toBeInstanceOf(Response);
+    expect(response.status).toBe(500);
+    const responseText = await response.text();
+    expect(responseText).toContain('<p>Error: Test error</p>');
+  });
+
   test('creates an action with a Zod schema matching form inputs', async () => {
     const schema = z.object({
       name: z.string().min(1, 'Name is required'),

package/src/actions.ts

@@ -5,7 +5,9 @@ import type { Hyperspan as HS } from './types';
 import { assetHash, formDataToJSON } from './utils';
 import { buildClientJS } from './client/js';
 import { validateBody, ZodValidationError } from './middleware';
+import { debug } from 'debug';
 
+const log = debug('hyperspan:actions');
 const actionsClientJS = await buildClientJS(import.meta.resolve('./client/_hs/hyperspan-actions.client'));
 
 /**
@@ -35,7 +37,10 @@ export function createAction<T extends z.ZodObject<any, any>>(params: { name: st
         throw new Error('Action POST handler not set! Every action must have a POST handler.');
       }
 
-      const response = await _handler(c, { data: c.vars.body });
+      const data = c.vars.body as z.infer<T> || formDataToJSON(await c.req.formData()) || {};
+      log('POST handler', { data });
+      const response = await _handler(c, { data });
+      log('POST handler response', { response });
 
       if (response instanceof Response) {
         // Replace redirects with special header because fetch() automatically follows redirects
@@ -52,11 +57,13 @@ export function createAction<T extends z.ZodObject<any, any>>(params: { name: st
      * Custom error handler for the action since validateBody() throws a HTTPResponseException
      */
     .errorHandler(async (c: HS.Context, err: HTTPResponseException) => {
-      const data = c.vars.body as Partial<z.infer<T>>;
-      const error = err._error as ZodValidationError;
+      const data = c.vars.body as z.infer<T> || formDataToJSON(await c.req.formData()) || {};
+      const error = err._error as ZodValidationError || err;
 
-      // Set the status to 400 by default
-      c.res.status = 400;
+      // Set the status to 400 if it's a ZodValidationError, otherwise 500 (Error thrown by user POST handler)
+      c.res.status = err._error ? 400 : 500;
+
+      log('errorHandler', { data, error });
 
       return await returnHTMLResponse(c, () => {
         return _errorHandler ? _errorHandler(c, { data, error }) : api.render(c, { data, error });

package/src/server.test.ts

@@ -144,7 +144,7 @@ test('createContext() can get and set cookies', () => {
   }
 });
 
-test('createContext() merge() function preserves custom headers when using response methods', () => {
+test('createContext() merge() function preserves custom headers when using response methods', async () => {
   // Create a request
   const request = new Request('http://localhost:3000/');
 
@@ -157,7 +157,7 @@ test('createContext() merge() function preserves custom headers when using respo
   context.res.headers.set('Authorization', 'Bearer token123');
 
   // Use html() method which should merge headers
-  const response = context.res.html('<h1>Test</h1>');
+  const response = await context.res.html('<h1>Test</h1>');
 
   // Verify the response has both the custom headers and the Content-Type header
   expect(response.headers.get('X-Custom-Header')).toBe('custom-value');
@@ -169,7 +169,7 @@ test('createContext() merge() function preserves custom headers when using respo
   expect(response.status).toBe(200);
 });
 
-test('createContext() merge() function preserves custom headers with json() method', () => {
+test('createContext() merge() function preserves custom headers with json() method', async () => {
   const request = new Request('http://localhost:3000/');
   const context = createContext(request);
 
@@ -178,7 +178,7 @@ test('createContext() merge() function preserves custom headers with json() meth
   context.res.headers.set('X-Request-ID', 'req-123');
 
   // Use json() method
-  const response = context.res.json({ message: 'Hello' });
+  const response = await context.res.json({ message: 'Hello' });
 
   // Verify headers are merged
   expect(response.headers.get('X-API-Version')).toBe('v1');
@@ -186,7 +186,7 @@ test('createContext() merge() function preserves custom headers with json() meth
   expect(response.headers.get('Content-Type')).toBe('application/json');
 });
 
-test('createContext() merge() function allows response headers to override context headers', () => {
+test('createContext() merge() function allows response headers to override context headers', async () => {
   const request = new Request('http://localhost:3000/');
   const context = createContext(request);
 
@@ -194,7 +194,7 @@ test('createContext() merge() function allows response headers to override conte
   context.res.headers.set('X-Header', 'context-value');
 
   // Use html() with options that include the same header (should override)
-  const response = context.res.html('<h1>Test</h1>', {
+  const response = await context.res.html('<h1>Test</h1>', {
     headers: {
       'X-Header': 'response-value',
     },

package/src/server.ts

@@ -64,14 +64,14 @@ export function createContext(req: Request, route?: HS.Route): HS.Context {
   // Status override for the response. Will use if set. (e.g. c.res.status = 400)
   let status: number | undefined = undefined;
 
-  const merge = (response: Response) => {
+  const merge = async (response: Response) => {
     // Convert headers to plain objects and merge (response headers override context headers)
     const mergedHeaders = {
       ...Object.fromEntries(headers.entries()),
       ...Object.fromEntries(response.headers.entries()),
     };
 
-    return new Response(response.body, {
+    return new Response(await response.text(), {
       status: context.res.status ?? response.status,
       headers: mergedHeaders,
     });

package/src/types.ts

@@ -69,13 +69,13 @@ export namespace Hyperspan {
     cookies: Hyperspan.Cookies;
     headers: Headers; // Headers to merge with final outgoing response
     status: number | undefined;
-    html: (html: string, options?: ResponseInit) => Response
-    json: (json: any, options?: ResponseInit) => Response;
-    text: (text: string, options?: ResponseInit) => Response;
-    redirect: (url: string, options?: ResponseInit) => Response;
-    error: (error: Error, options?: ResponseInit) => Response;
-    notFound: (options?: ResponseInit) => Response;
-    merge: (response: Response) => Response;
+    html: (html: string, options?: ResponseInit) => Promise<Response>;
+    json: (json: any, options?: ResponseInit) => Promise<Response>;
+    text: (text: string, options?: ResponseInit) => Promise<Response>;
+    redirect: (url: string, options?: ResponseInit) => Promise<Response>;
+    error: (error: Error, options?: ResponseInit) => Promise<Response>;
+    notFound: (options?: ResponseInit) => Promise<Response>;
+    merge: (response: Response) => Promise<Response>;
   };
 
   export interface Context {