@hyperspan/framework 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperspan/framework",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "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

@@ -40,6 +40,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 });