@hyperspan/framework 1.0.5 → 1.0.7

package/package.json

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

package/src/actions.test.ts

@@ -256,7 +256,7 @@ describe('createAction', () => {
 
     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('Invalid email address');
     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

@@ -84,8 +84,8 @@ export function createAction<T extends z.ZodObject<any, any>>(params: { name: st
      * Form to render
      * This will be wrapped in a <hs-action> web component and submitted via fetch()
      */
-    form(form: HS.ActionFormHandler<T>) {
-      api._form = form;
+    form(_formFn) {
+      api._form = _formFn;
       return api;
     },
     /**
@@ -101,7 +101,7 @@ export function createAction<T extends z.ZodObject<any, any>>(params: { name: st
     /**
      * Get form renderer method
      */
-    render(c: HS.Context, props?: HS.ActionProps<T>) {
+    render(c, props) {
       const formContent = api._form ? api._form(c, props || {}) : null;
       return formContent ? html`<hs-action url="${this._path()}">${formContent}</hs-action>${actionsClientJS.renderScriptTag()}` : null;
     },
@@ -109,6 +109,10 @@ export function createAction<T extends z.ZodObject<any, any>>(params: { name: st
       _errorHandler = handler;
       return api;
     },
+    use(middleware: HS.MiddlewareFunction) {
+      route.use(middleware);
+      return api;
+    },
     middleware(middleware: Array<HS.MiddlewareFunction>) {
       route.middleware(middleware);
       return api;

package/src/client/js.ts

@@ -10,6 +10,7 @@ export const JS_PUBLIC_PATH = '/_hs/js';
 export const JS_ISLAND_PUBLIC_PATH = '/_hs/js/islands';
 export const JS_IMPORT_MAP = new Map<string, string>();
 const CLIENT_JS_CACHE = new Map<string, { esmName: string, exports: string, fnArgs: string, publicPath: string }>();
+const CLIENT_JS_BUILD_PROMISES = new Map<string, Promise<void>>();
 const EXPORT_REGEX = /export\{(.*)\}/g;
 
 /**
@@ -21,41 +22,57 @@ export async function buildClientJS(modulePathResolved: string): Promise<HS.Clie
 
   // Cache: Avoid re-processing the same file
   if (!CLIENT_JS_CACHE.has(assetHash)) {
-    // Build the client JS module
-    const result = await Bun.build({
-      entrypoints: [modulePath],
-      outdir: join(CWD, './public', JS_PUBLIC_PATH), // @TODO: Make this configurable... should be read from config file...
-      naming: IS_PROD ? '[dir]/[name]-[hash].[ext]' : undefined,
-      external: Array.from(JS_IMPORT_MAP.keys()),
-      minify: true,
-      format: 'esm',
-      target: 'browser',
-      env: 'APP_PUBLIC_*',
-    });
+    const existingBuild = CLIENT_JS_BUILD_PROMISES.get(assetHash);
+    // Await the existing build promise if it exists (this can get called in parallel from Bun traversing imports)
+    if (existingBuild) {
+      await existingBuild;
+    } else {
+      const buildPromise = (async () => {
+        // Build the client JS module
+        const result = await Bun.build({
+          entrypoints: [modulePath],
+          outdir: join(CWD, './public', JS_PUBLIC_PATH), // @TODO: Make this configurable... should be read from config file...
+          naming: IS_PROD ? '[dir]/[name]-[hash].[ext]' : undefined,
+          external: Array.from(JS_IMPORT_MAP.keys()),
+          minify: true,
+          format: 'esm',
+          target: 'browser',
+          env: 'APP_PUBLIC_*',
+        });
 
-    // Add output file to import map
-    const esmName = String(result.outputs[0].path.split('/').reverse()[0]).replace('.js', '');
-    const publicPath = `${JS_PUBLIC_PATH}/${esmName}.js`;
-    JS_IMPORT_MAP.set(esmName, publicPath);
+        // Add output file to import map
+        const esmName = String(result.outputs[0].path.split('/').reverse()[0]).replace('.js', '');
+        const publicPath = `${JS_PUBLIC_PATH}/${esmName}.js`;
+        JS_IMPORT_MAP.set(esmName, publicPath);
 
-    // Get the contents of the file to extract the exports
-    const contents = await result.outputs[0].text();
-    const exportLine = EXPORT_REGEX.exec(contents);
+        // Get the contents of the file to extract the exports
+        const contents = await result.outputs[0].text();
+        const exportLine = EXPORT_REGEX.exec(contents);
 
-    let exports = '{}';
-    if (exportLine) {
-      const exportName = exportLine[1];
-      exports =
-        '{' +
-        exportName
-          .split(',')
-          .map((name) => name.trim().split(' as '))
-          .map(([name, alias]) => `${alias === 'default' ? 'default as ' + name : alias}`)
-          .join(', ') +
-        '}';
+        let exports = '{}';
+        if (exportLine) {
+          const exportName = exportLine[1];
+          exports =
+            '{' +
+            exportName
+              .split(',')
+              .map((name) => name.trim().split(' as '))
+              .map(([name, alias]) => `${alias === 'default' ? 'default as ' + name : alias}`)
+              .join(', ') +
+            '}';
+        }
+        const fnArgs = exports.replace(/(\w+)\s*as\s*(\w+)/g, '$1: $2');
+
+        CLIENT_JS_CACHE.set(assetHash, { esmName, exports, fnArgs, publicPath });
+      })();
+
+      CLIENT_JS_BUILD_PROMISES.set(assetHash, buildPromise);
+      try {
+        await buildPromise;
+      } finally {
+        CLIENT_JS_BUILD_PROMISES.delete(assetHash);
+      }
     }
-    const fnArgs = exports.replace(/(\w+)\s*as\s*(\w+)/g, '$1: $2');
-    CLIENT_JS_CACHE.set(assetHash, { esmName, exports, fnArgs, publicPath });
   }
 
   const { esmName, exports, fnArgs, publicPath } = CLIENT_JS_CACHE.get(assetHash)!;

package/src/middleware.ts

@@ -1,5 +1,5 @@
 import { formDataToJSON } from './utils';
-import { z, flattenError } from 'zod/v4';
+import { z, flattenError, prettifyError } from 'zod/v4';
 
 import type { ZodAny, ZodObject, ZodError } from 'zod/v4';
 import type { Hyperspan as HS } from './types';
@@ -26,12 +26,15 @@ function inferValidationType(headers: Headers): TValidationType {
 }
 
 export class ZodValidationError extends Error {
-  constructor(flattened: ReturnType<typeof flattenError>) {
-    super('Input validation error(s)');
+  public fieldErrors;
+  public formErrors: unknown[];
+  constructor(error: ZodError, schema: ZodObject | ZodAny) {
+    const message = prettifyError(error);
+    const flattened = flattenError<z.infer<typeof schema>>(error);
+    super(message);
     this.name = 'ZodValidationError';
-
-    // Copy all properties from flattened error
-    Object.assign(this, flattened);
+    this.fieldErrors = flattened.fieldErrors;
+    this.formErrors = flattened.formErrors;
   }
 }
 
@@ -44,8 +47,8 @@ export function validateQuery(schema: ZodObject | ZodAny): HS.MiddlewareFunction
     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 });
+      const err = new ZodValidationError(validated.error, schema);
+      throw new HTTPResponseException(err, { status: 400 });
     }
 
     return next();
@@ -72,20 +75,14 @@ export function validateBody(schema: ZodObject | ZodAny, type?: TValidationType)
     const validated = schema.safeParse(body);
 
     if (!validated.success) {
-      const err = formatZodError(validated.error);
+      const err = new ZodValidationError(validated.error, schema);
       throw new HTTPResponseException(err, { status: 400 });
-      //return context.res.error(err, { status: 400 });
     }
 
     return next();
   }
 }
 
-export function formatZodError(error: ZodError): ZodValidationError {
-  const zodError = flattenError(error);
-  return new ZodValidationError(zodError);
-}
-
 /**
  * Type guard to check if a handler is a middleware function
  * Middleware functions have 2 parameters (context, next)

package/src/types.ts

@@ -1,4 +1,5 @@
 import { HSHtml } from '@hyperspan/html';
+import { ZodValidationError } from './middleware';
 import * as z from 'zod/v4';
 
 /**
@@ -156,20 +157,29 @@ export namespace Hyperspan {
   /**
    * Action = Form + route handler
    */
-  export type ActionResponse = HSHtml | void | null | Promise<HSHtml | void | null> | Response | Promise<Response>;
-  export type ActionProps<T extends z.ZodTypeAny> = { data?: Partial<z.infer<T>>; error?: z.ZodError | Error };
+  // Form renderer
+  export type ActionFormResponse = HSHtml | void | null | Promise<HSHtml | void | null>;
+  export type ActionFormProps<T extends z.ZodTypeAny> = { data?: Partial<z.infer<T>>; error?: ZodValidationError };
+  export type ActionForm<T extends z.ZodTypeAny> = (
+    c: Context, props: ActionFormProps<T>
+  ) => ActionFormResponse;
+  // Form handler
+  export type ActionFormHandlerResponse = ActionFormResponse | Response | Promise<Response>;
+  export type ActionFormHandlerProps<T extends z.ZodTypeAny> = { data: z.infer<T>; error?: ZodValidationError | Error };
   export type ActionFormHandler<T extends z.ZodTypeAny> = (
-    c: Context, props: ActionProps<T>
-  ) => ActionResponse;
+    c: Context, props: ActionFormHandlerProps<T>
+  ) => ActionFormHandlerResponse;
+  // Action API
   export interface Action<T extends z.ZodTypeAny> {
     _kind: 'hsAction';
     _config: Partial<Hyperspan.RouteConfig>;
     _path(): string;
-    _form: null | ActionFormHandler<T>;
-    form(form: ActionFormHandler<T>): Action<T>;
-    render: (c: Context, props?: ActionProps<T>) => ActionResponse;
+    _form: null | ActionForm<T>;
+    form(form: ActionForm<T>): Action<T>;
+    render: (c: Context, props?: ActionFormProps<T>) => ActionFormResponse;
     post: (handler: ActionFormHandler<T>) => Action<T>;
     errorHandler: (handler: ActionFormHandler<T>) => Action<T>;
+    use: (middleware: Hyperspan.MiddlewareFunction) => Action<T>;
     middleware: (middleware: Array<Hyperspan.MiddlewareFunction>) => Action<T>;
     fetch: (request: Request) => Promise<Response>;
   }