@hyperspan/framework 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperspan/framework",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Hyperspan Web Framework",
   "main": "src/server.ts",
   "types": "src/server.ts",

package/src/actions.test.ts

@@ -126,7 +126,7 @@ describe('createAction', () => {
     const formData = new FormData();
     formData.append('email', 'not-an-email');
 
-    const postRequest = new Request(`http://localhost:3000${action._route}`, {
+    const postRequest = new Request(`http://localhost:3000${action._path()}`, {
       method: 'POST',
       body: formData,
     });
@@ -143,5 +143,56 @@ describe('createAction', () => {
     // Should NOT contain the success message from post handler
     expect(responseText).not.toContain('Hello,');
   });
+
+  test('uses custom error handler when provided', async () => {
+    const schema = z.object({
+      name: z.string().min(1, 'Name is required'),
+      email: z.email('Invalid email address'),
+    });
+
+    const action = createAction({
+      name: 'test',
+      schema,
+    }).form((c, { data, error }) => {
+      return html`
+          <form>
+            <input type="text" name="name" value="${data?.name || ''}" />
+            ${error ? html`<div class="error">Validation failed</div>` : ''}
+            <input type="email" name="email" value="${data?.email || ''}" />
+            <button type="submit">Submit</button>
+          </form>
+        `;
+    }).post(async (c, { data }) => {
+      return c.res.html(`
+        <p>Hello, ${data?.name}!</p>
+        <p>Your email is ${data?.email}.</p>
+      `);
+    }).errorHandler(async (c, { data, error }) => {
+      return c.res.html(`
+        <p>Caught error in custom error handler: ${error?.message}</p>
+        <p>Data: ${JSON.stringify(data)}</p>
+      `);
+    });
+
+    // Test fetch method with invalid data (missing name, invalid email)
+    const formData = new FormData();
+    formData.append('email', 'not-an-email');
+
+    const postRequest = new Request(`http://localhost:3000${action._path()}`, {
+      method: 'POST',
+      body: formData,
+    });
+
+    const response = await action.fetch(postRequest);
+    expect(response).toBeInstanceOf(Response);
+    expect(response.status).toBe(400);
+
+    const responseText = await response.text();
+    // Should render the custom error handler
+    expect(responseText).toContain('Caught error in custom error handler: Input validation error(s)');
+    expect(responseText).toContain('Data: {"email":"not-an-email"}');
+    // Should NOT contain the success message from post handler
+    expect(responseText).not.toContain('Hello,');
+  });
 });
 

package/src/actions.ts

@@ -1,10 +1,10 @@
 import { html } from '@hyperspan/html';
-import { createRoute, returnHTMLResponse } from './server';
+import { createRoute, HTTPResponseException, returnHTMLResponse } from './server';
 import * as z from 'zod/v4';
 import type { Hyperspan as HS } from './types';
 import { assetHash, formDataToJSON } from './utils';
 import { buildClientJS } from './client/js';
-import { validateBody } from './middleware';
+import { validateBody, ZodValidationError } from './middleware';
 
 const actionsClientJS = await buildClientJS(import.meta.resolve('./client/_hs/hyperspan-actions.client'));
 
@@ -31,47 +31,37 @@ export function createAction<T extends z.ZodObject<any, any>>(params: { name: st
   const route = createRoute({ path, name })
     .get((c: HS.Context) => api.render(c))
     .post(async (c: HS.Context) => {
-      // Parse form data
-      const formData = await c.req.formData();
-      const jsonData = formDataToJSON(formData) as Partial<z.infer<T>>;
-      const schemaData = schema ? schema.safeParse(jsonData) : null;
-      const data = schemaData?.success ? (schemaData.data as Partial<z.infer<T>>) : jsonData;
-      let error: z.ZodError | Error | null = null;
-
-      try {
-        if (schema && schemaData?.error) {
-          throw schemaData.error;
-        }
-
-        if (!_handler) {
-          throw new Error('Action POST handler not set! Every action must have a POST handler.');
-        }
+      if (!_handler) {
+        throw new Error('Action POST handler not set! Every action must have a POST handler.');
+      }
 
-        const response = await _handler(c, { data });
+      const response = await _handler(c, { data: c.vars.body });
 
-        if (response instanceof Response) {
-          // Replace redirects with special header because fetch() automatically follows redirects
-          // and we want to redirect the user to the actual full page instead
-          if ([301, 302, 307, 308].includes(response.status)) {
-            response.headers.set('X-Redirect-Location', response.headers.get('Location') || '/');
-            response.headers.delete('Location');
-          }
+      if (response instanceof Response) {
+        // Replace redirects with special header because fetch() automatically follows redirects
+        // and we want to redirect the user to the actual full page instead
+        if ([301, 302, 307, 308].includes(response.status)) {
+          response.headers.set('X-Redirect-Location', response.headers.get('Location') || '/');
+          response.headers.delete('Location');
         }
-
-        return response;
-      } catch (e) {
-        error = e as Error | z.ZodError;
       }
 
-      if (error && _errorHandler) {
-        const errorHandler = _errorHandler; // Required for TypeScript to infer the correct type after narrowing
-        return await returnHTMLResponse(c, () => errorHandler(c, { data, error }), {
-          status: 400,
-        });
-      }
+      return response;
+    }, { middleware: schema ? [validateBody(schema)] : [] })
+    /**
+     * 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;
+
+      // Set the status to 400 by default
+      c.res.status = 400;
 
-      return await returnHTMLResponse(c, () => api.render(c, { data, error }), { status: 400 });
-    }, { middleware: schema ? [validateBody(schema)] : [] });
+      return await returnHTMLResponse(c, () => {
+        return _errorHandler ? _errorHandler(c, { data, error }) : api.render(c, { data, error });
+      }, { status: 400 });
+    });
 
   // Set the name of the action for the route
   route._config.name = name;

package/src/middleware.ts

@@ -40,14 +40,14 @@ export function validateQuery(schema: ZodObject | ZodAny): HS.MiddlewareFunction
     const query = formDataToJSON(context.req.query);
     const validated = schema.safeParse(query);
 
+    // Store the validated query in the context variables
+    context.vars.query = validated.data as z.infer<typeof schema>;
+
     if (!validated.success) {
       const err = formatZodError(validated.error);
       return context.res.error(err, { status: 400 });
     }
 
-    // Store the validated query in the context variables
-    context.vars.query = validated.data as z.infer<typeof schema>;
-
     return next();
   }
 }
@@ -67,6 +67,8 @@ export function validateBody(schema: ZodObject | ZodAny, type?: TValidationType)
       const urlencoded = await context.req.urlencoded();
       body = formDataToJSON(urlencoded);
     }
+
+    context.vars.body = body as z.infer<typeof schema>;
     const validated = schema.safeParse(body);
 
     if (!validated.success) {
@@ -75,9 +77,6 @@ export function validateBody(schema: ZodObject | ZodAny, type?: TValidationType)
       //return context.res.error(err, { status: 400 });
     }
 
-    // Store the validated body in the context variables
-    context.vars.body = validated.data as z.infer<typeof schema>;
-
     return next();
   }
 }

package/src/server.ts

@@ -61,6 +61,9 @@ export function createContext(req: Request, route?: HS.Route): HS.Context {
     delete params[catchAllParam];
   }
 
+  // Status override for the response. Will use if set. (e.g. c.res.status = 400)
+  let status: number | undefined = undefined;
+
   const merge = (response: Response) => {
     // Convert headers to plain objects and merge (response headers override context headers)
     const mergedHeaders = {
@@ -69,12 +72,12 @@ export function createContext(req: Request, route?: HS.Route): HS.Context {
     };
 
     return new Response(response.body, {
-      status: response.status,
+      status: context.res.status ?? response.status,
       headers: mergedHeaders,
     });
   };
 
-  return {
+  const context: HS.Context = {
     vars: {},
     route: {
       name: route?._config.name || undefined,
@@ -89,15 +92,15 @@ export function createContext(req: Request, route?: HS.Route): HS.Context {
       headers,
       query,
       cookies: new Cookies(req),
-      async text() { return req.text() },
-      async json<T = unknown>() { return await req.json() as T },
-      async formData<T = unknown>() { return await req.formData() as T },
-      async urlencoded() { return new URLSearchParams(await req.text()) },
+      async text() { return req.clone().text() },
+      async json<T = unknown>() { return await req.clone().json() as T },
+      async formData<T = unknown>() { return await req.clone().formData() as T },
+      async urlencoded() { return new URLSearchParams(await req.clone().text()) },
     },
     res: {
       cookies: new Cookies(req, headers),
       headers,
-      raw: new Response(),
+      status,
       html: (html: string, options?: ResponseInit) => merge(new Response(html, { ...options, headers: { 'Content-Type': 'text/html; charset=UTF-8', ...options?.headers } })),
       json: (json: any, options?: ResponseInit) => merge(new Response(JSON.stringify(json), { ...options, headers: { 'Content-Type': 'application/json', ...options?.headers } })),
       text: (text: string, options?: ResponseInit) => merge(new Response(text, { ...options, headers: { 'Content-Type': 'text/plain; charset=UTF-8', ...options?.headers } })),
@@ -107,6 +110,8 @@ export function createContext(req: Request, route?: HS.Route): HS.Context {
       merge,
     },
   };
+
+  return context;
 }
 
 

package/src/types.ts

@@ -68,6 +68,7 @@ export namespace Hyperspan {
   export type HSResponse = {
     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;
@@ -75,7 +76,6 @@ export namespace Hyperspan {
     error: (error: Error, options?: ResponseInit) => Response;
     notFound: (options?: ResponseInit) => Response;
     merge: (response: Response) => Response;
-    raw: Response;
   };
 
   export interface Context {

package/src/client/js.test.ts

@@ -1,200 +0,0 @@
-import { test, expect, describe } from 'bun:test';
-import { functionToString } from './js';
-
-describe('functionToString', () => {
-  describe('named functions', () => {
-    test('converts named function to string', () => {
-      function myFunction() {
-        return 'hello';
-      }
-
-      const result = functionToString(myFunction);
-      expect(result).toContain('function');
-      expect(result).toContain('myFunction');
-      expect(result).toContain("return 'hello'");
-    });
-
-    test('converts named function with parameters', () => {
-      function add(a: number, b: number) {
-        return a + b;
-      }
-
-      const result = functionToString(add);
-      expect(result).toContain('function');
-      expect(result).toContain('add');
-      expect(result).toContain('a');
-      expect(result).toContain('b');
-    });
-
-    test('converts named async function', () => {
-      async function fetchData() {
-        const response = await fetch('/api/data');
-        return response.json();
-      }
-
-      const result = functionToString(fetchData);
-      expect(result).toContain('async function');
-      expect(result).toContain('fetchData');
-      expect(result).toContain('await');
-    });
-  });
-
-  describe('anonymous functions', () => {
-    test('converts anonymous function to string', () => {
-      const fn = function () {
-        return 'anonymous';
-      };
-
-      const result = functionToString(fn);
-      expect(result).toContain('function');
-      expect(result).toContain("return 'anonymous'");
-    });
-
-    test('converts anonymous function with parameters', () => {
-      const fn = function (x: number, y: number) {
-        return x * y;
-      };
-
-      const result = functionToString(fn);
-      expect(result).toContain('function');
-      expect(result).toContain('x');
-      expect(result).toContain('y');
-    });
-
-    test('converts anonymous async function', () => {
-      const fn = async function () {
-        await new Promise(resolve => setTimeout(resolve, 100));
-        return 'done';
-      };
-
-      const result = functionToString(fn);
-      expect(result).toContain('async function');
-      expect(result).toContain('await');
-    });
-  });
-
-  describe('arrow functions', () => {
-    test('converts single-line arrow function without braces', () => {
-      const fn = (x: number) => x * 2;
-
-      const result = functionToString(fn);
-      expect(result).toContain('function(x) { return x * 2; }');
-    });
-
-    test('converts single-line arrow function with single parameter', () => {
-      const fn = (name: string) => `Hello, ${name}!`;
-
-      const result = functionToString(fn);
-      expect(result).toContain('function(name) { return `Hello, ${name}!`; }');
-    });
-
-    test('converts single-line arrow function with multiple parameters', () => {
-      const fn = (a: number, b: number) => a + b;
-
-      const result = functionToString(fn);
-      expect(result).toContain('function(a, b) { return a + b; }');
-    });
-
-    test('converts arrow function with braces', () => {
-      const fn = (x: number) => {
-        const doubled = x * 2;
-        return doubled;
-      };
-
-      const result = functionToString(fn);
-      expect(result).toContain('function');
-      expect(result).toContain('x');
-      expect(result).toContain('doubled');
-    });
-
-    test('converts multi-line arrow function', () => {
-      const fn = (items: string[]) => {
-        const filtered = items.filter(item => item.length > 0);
-        return filtered.map(item => item.toUpperCase());
-      };
-
-      const result = functionToString(fn);
-      expect(result).toContain('function');
-      expect(result).toContain('items');
-      expect(result).toContain('filtered');
-    });
-
-    test('converts async arrow function without braces', () => {
-      const fn = async (id: number) => await fetch(`/api/${id}`);
-
-      const result = functionToString(fn);
-      expect(result).toContain('async function');
-      expect(result).toContain('id');
-      expect(result).toContain('await');
-    });
-
-    test('converts async arrow function with braces', () => {
-      const fn = async (id: number) => {
-        const response = await fetch(`/api/${id}`);
-        return response.json();
-      };
-
-      const result = functionToString(fn);
-      expect(result).toContain('async function');
-      expect(result).toContain('id');
-      expect(result).toContain('await');
-    });
-
-    test('converts arrow function with no parameters', () => {
-      const fn = () => 'no params';
-
-      const result = functionToString(fn);
-      expect(result).toContain('function');
-      expect(result).toContain("return 'no params'");
-    });
-
-    test('converts arrow function with complex expression', () => {
-      const fn = (obj: { x: number; y: number }) => obj.x + obj.y;
-
-      const result = functionToString(fn);
-      expect(result).toContain('function');
-      expect(result).toContain('return');
-      expect(result).toContain('obj.x + obj.y');
-    });
-  });
-
-  describe('edge cases', () => {
-    test('handles function with whitespace', () => {
-      const fn = function () {
-        return 'test';
-      };
-
-      const result = functionToString(fn);
-      expect(result).toContain('function');
-      expect(result).toContain("return 'test'");
-    });
-
-    test('handles arrow function with whitespace', () => {
-      const fn = (x) => x * 2;
-
-      const result = functionToString(fn);
-      expect(result).toContain('function');
-      expect(result).toContain('return');
-    });
-
-    test('handles function with comments', () => {
-      const fn = function () {
-        // This is a comment
-        return 'commented';
-      };
-
-      const result = functionToString(fn);
-      expect(result).toContain('function');
-      expect(result).toContain("return 'commented'");
-    });
-
-    test('handles nested arrow functions', () => {
-      const fn = (arr: number[]) => arr.map(x => x * 2);
-
-      const result = functionToString(fn);
-      expect(result).toContain('function');
-      // The nested arrow function should also be converted
-      expect(result).toContain('x * 2');
-    });
-  });
-});