npm - @hyperspan/framework - Versions diffs - 0.3.3 → 0.3.4 - Mend

@hyperspan/framework 0.3.3 → 0.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/server.js +75 -34
package/package.json +1 -1
package/src/actions.test.ts +4 -2
package/src/actions.ts +89 -28
package/src/clientjs/hyperspan-client.ts +36 -18
package/src/server.ts +121 -47

package/dist/server.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import {
+  assetHash,
   buildClientCSS,
   buildClientJS
 } from "./assets.js";
@@ -1857,34 +1858,13 @@ function createRoute(handler) {
         ..._middleware,
         async (context) => {
           const method = context.req.method.toUpperCase();
-          try {
+          return returnHTMLResponse(context, () => {
             const handler2 = _handlers[method];
             if (!handler2) {
               throw new HTTPException(405, { message: "Method not allowed" });
             }
-            const routeContent = await handler2(context);
-            if (routeContent instanceof Response) {
-              return routeContent;
-            }
-            const userIsBot = isbot(context.req.header("User-Agent"));
-            const streamOpt = context.req.query("__nostream");
-            const streamingEnabled = !userIsBot && (streamOpt !== undefined ? streamOpt : true);
-            if (isHSHtml(routeContent)) {
-              if (streamingEnabled && routeContent.asyncContent?.length > 0) {
-                return new StreamResponse(renderStream(routeContent));
-              } else {
-                const output = await renderAsync(routeContent);
-                return context.html(output);
-              }
-            }
-            if (routeContent instanceof Response) {
-              return routeContent;
-            }
-            return context.text(String(routeContent));
-          } catch (e) {
-            !IS_PROD && console.error(e);
-            return await showErrorReponse(context, e);
-          }
+            return handler2(context);
+          });
         }
       ];
     }
@@ -1963,6 +1943,29 @@ function createAPIRoute(handler) {
   };
   return api;
 }
+async function returnHTMLResponse(context, handlerFn, responseOptions) {
+  try {
+    const routeContent = await handlerFn();
+    if (routeContent instanceof Response) {
+      return routeContent;
+    }
+    const userIsBot = isbot(context.req.header("User-Agent"));
+    const streamOpt = context.req.query("__nostream");
+    const streamingEnabled = !userIsBot && (streamOpt !== undefined ? streamOpt : true);
+    if (isHSHtml(routeContent)) {
+      if (streamingEnabled && routeContent.asyncContent?.length > 0) {
+        return new StreamResponse(renderStream(routeContent), responseOptions);
+      } else {
+        const output = await renderAsync(routeContent);
+        return context.html(output, responseOptions);
+      }
+    }
+    return context.html(String(routeContent), responseOptions);
+  } catch (e) {
+    !IS_PROD && console.error(e);
+    return await showErrorReponse(context, e, responseOptions);
+  }
+}
 function getRunnableRoute(route) {
   if (isRunnableRoute(route)) {
     return route;
@@ -1984,7 +1987,7 @@ function isRunnableRoute(route) {
   const runnableKind = ["hsRoute", "hsAPIRoute", "hsAction"].includes(obj?._kind);
   return runnableKind && "_getRouteHandlers" in obj;
 }
-async function showErrorReponse(context, err) {
+async function showErrorReponse(context, err, responseOptions) {
   let status = 500;
   const message = err.message || "Internal Server Error";
   if (err instanceof HTTPException) {
@@ -1993,6 +1996,16 @@ async function showErrorReponse(context, err) {
   const stack = !IS_PROD && err.stack ? err.stack.split(`
 `).slice(1).join(`
 `) : "";
+  if (context.req.header("X-Request-Type") === "partial") {
+    const output2 = render(html`
+      <section style="padding: 20px;">
+        <p style="margin-bottom: 10px;"><strong>Error</strong></p>
+        <strong>${message}</strong>
+        ${stack ? html`<pre>${stack}</pre>` : ""}
+      </section>
+    `);
+    return context.html(output2, Object.assign({ status }, responseOptions));
+  }
   const output = render(html`
     <!DOCTYPE html>
     <html lang="en">
@@ -2010,7 +2023,7 @@ async function showErrorReponse(context, err) {
       </body>
     </html>
   `);
-  return context.html(output, { status });
+  return context.html(output, Object.assign({ status }, responseOptions));
 }
 var ROUTE_SEGMENT = /(\[[a-zA-Z_\.]+\])/g;
 async function buildRoutes(config) {
@@ -2042,11 +2055,35 @@ async function buildRoutes(config) {
     }
     routes.push({
       file: join("./", routesDir, file),
-      route: route || "/",
+      route: normalizePath(route || "/"),
       params
     });
   }
-  return routes;
+  return await Promise.all(routes.map(async (route) => {
+    route.module = (await import(join(CWD, route.file))).default;
+    return route;
+  }));
+}
+async function buildActions(config) {
+  const routesDir = join(config.appDir, "actions");
+  const files = await readdir(routesDir, { recursive: true });
+  const routes = [];
+  for (const file of files) {
+    if (!file.includes(".") || basename(file).startsWith(".")) {
+      continue;
+    }
+    let route = assetHash("/" + file.replace(extname(file), ""));
+    routes.push({
+      file: join("./", routesDir, file),
+      route: `/__actions/${route}`,
+      params: []
+    });
+  }
+  return await Promise.all(routes.map(async (route) => {
+    route.module = (await import(join(CWD, route.file))).default;
+    route.route = route.module._route;
+    return route;
+  }));
 }
 function createRouteFromModule(RouteModule) {
   const route = getRunnableRoute(RouteModule);
@@ -2056,15 +2093,17 @@ async function createServer(config) {
   await Promise.all([buildClientJS(), buildClientCSS()]);
   const app = new Hono2;
   config.beforeRoutesAdded && config.beforeRoutesAdded(app);
-  const fileRoutes = await buildRoutes(config);
+  const [routes, actions] = await Promise.all([buildRoutes(config), buildActions(config)]);
+  const fileRoutes = routes.concat(actions);
   const routeMap = [];
   for (let i = 0;i < fileRoutes.length; i++) {
     let route = fileRoutes[i];
-    const fullRouteFile = join(CWD, route.file);
-    const routePattern = normalizePath(route.route);
-    routeMap.push({ route: routePattern, file: route.file });
-    const routeHandlers = createRouteFromModule(await import(fullRouteFile));
-    app.all(routePattern, ...routeHandlers);
+    routeMap.push({ route: route.route, file: route.file });
+    if (!route.module) {
+      throw new Error(`Route module not loaded! File: ${route.file}`);
+    }
+    const routeHandlers = createRouteFromModule(route.module);
+    app.all(route.route, ...routeHandlers);
   }
   if (routeMap.length === 0) {
     app.get("/", (context) => {
@@ -2123,6 +2162,7 @@ function normalizePath(urlPath) {
   return (urlPath.endsWith("/") ? urlPath.substring(0, urlPath.length - 1) : urlPath).toLowerCase() || "/";
 }
 export {
+  returnHTMLResponse,
   normalizePath,
   isRunnableRoute,
   getRunnableRoute,
@@ -2133,6 +2173,7 @@ export {
   createConfig,
   createAPIRoute,
   buildRoutes,
+  buildActions,
   StreamResponse,
   IS_PROD
 };

package/package.json CHANGED Viewed

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

package/src/actions.test.ts CHANGED Viewed

@@ -45,6 +45,7 @@ describe('createAction', () => {
       // Mock context to run action
       const mockContext = {
         req: {
+          method: 'POST',
           formData: async () => {
             const formData = new FormData();
             formData.append('name', 'John');
@@ -53,7 +54,7 @@ describe('createAction', () => {
         },
       } as Context;
-      const response = await action.run('POST', mockContext);
+      const response = await action.run(mockContext);
       const formResponse = render(response as HSHtml);
       expect(formResponse).toContain('Thanks for submitting the form, John!');
@@ -77,6 +78,7 @@ describe('createAction', () => {
       // Mock context to run action
       const mockContext = {
         req: {
+          method: 'POST',
           formData: async () => {
             const formData = new FormData();
             formData.append('name', ''); // No name = error
@@ -85,7 +87,7 @@ describe('createAction', () => {
         },
       } as Context;
-      const response = await action.run('POST', mockContext);
+      const response = await action.run(mockContext);
       const formResponse = render(response as HSHtml);
       expect(formResponse).toContain('There was an error!');

package/src/actions.ts CHANGED Viewed

@@ -2,51 +2,80 @@ import { html, HSHtml } from '@hyperspan/html';
 import * as z from 'zod/v4';
 import { HTTPException } from 'hono/http-exception';
-import type { THSResponseTypes } from './server';
-import type { Context } from 'hono';
+import { IS_PROD, returnHTMLResponse, type THSResponseTypes } from './server';
+import type { Context, MiddlewareHandler } from 'hono';
+import type { HandlerResponse, Next, TypedResponse } from 'hono/types';
+import { assetHash } from './assets';
 /**
  * Actions = Form + route handler
  * Automatically handles and parses form data
  *
- * INITIAL IDEA OF HOW THIS WILL WORK:
+ * HOW THIS WORKS:
  * ---
- * 1. Renders component as initial form markup for GET request
- * 2. Bind form onSubmit function to custom client JS handling
- * 3. Submits form with JavaScript fetch()
- * 4. Replaces form content with content from server
- * 5. All validation and save logic is on the server
- * 6. Handles any Exception thrown on server as error displayed in client
+ * 1. Renders in any template as initial form markup with action.render()
+ * 2. Binds form onSubmit function to custom client JS handling via <hs-action> web component
+ * 3. Submits form with JavaScript fetch() + FormData as normal POST form submission
+ * 4. All validation and save logic is run on the server
+ * 5. Replaces form content in place with HTML response content from server via the Idiomorph library
+ * 6. Handles any Exception thrown on server as error displayed back to user on the page
  */
+type TActionResponse = THSResponseTypes | HandlerResponse<any> | TypedResponse<any, any, any>;
 export interface HSAction<T extends z.ZodTypeAny> {
   _kind: string;
-  form(renderForm: ({ data }: { data?: z.infer<T> }) => HSHtml): HSAction<T>;
-  post(handler: (c: Context, { data }: { data?: z.infer<T> }) => THSResponseTypes): HSAction<T>;
+  _route: string;
+  _form: Parameters<HSAction<T>['form']>[0];
+  form(
+    renderForm: ({ data, error }: { data?: z.infer<T>; error?: z.ZodError | Error }) => HSHtml
+  ): HSAction<T>;
+  post(
+    handler: (
+      c: Context<any, any, {}>,
+      { data }: { data?: z.infer<T> }
+    ) => TActionResponse | Promise<TActionResponse>
+  ): HSAction<T>;
   error(
     handler: (
-      c: Context,
+      c: Context<any, any, {}>,
       { data, error }: { data?: z.infer<T>; error?: z.ZodError | Error }
-    ) => THSResponseTypes
+    ) => TActionResponse
   ): HSAction<T>;
-  render(props?: { data?: z.infer<T>; error?: z.ZodError | Error }): THSResponseTypes;
-  run(method: 'GET' | 'POST', c: Context): Promise<THSResponseTypes>;
+  render(props?: { data?: z.infer<T>; error?: z.ZodError | Error }): TActionResponse;
+  run(c: Context<any, any, {}>): TActionResponse | Promise<TActionResponse>;
+  middleware: (
+    middleware: Array<
+      | MiddlewareHandler
+      | ((context: Context<any, string, {}>) => TActionResponse | Promise<TActionResponse>)
+    >
+  ) => HSAction<T>;
+  _getRouteHandlers: () => Array<
+    | MiddlewareHandler
+    | ((context: Context, next: Next) => TActionResponse | Promise<TActionResponse>)
+    | ((context: Context) => TActionResponse | Promise<TActionResponse>)
+  >;
 }
 export function unstable__createAction<T extends z.ZodTypeAny>(
   schema: T | null = null,
-  form: Parameters<HSAction<T>['form']>[0] | null = null
+  form: Parameters<HSAction<T>['form']>[0]
 ) {
   let _handler: Parameters<HSAction<T>['post']>[0] | null = null,
-    _form: Parameters<HSAction<T>['form']>[0] | null = form,
-    _errorHandler: Parameters<HSAction<T>['error']>[0] | null = null;
+    _form: Parameters<HSAction<T>['form']>[0] = form,
+    _errorHandler: Parameters<HSAction<T>['error']>[0] | null = null,
+    _middleware: Array<
+      | MiddlewareHandler
+      | ((context: Context, next: Next) => TActionResponse | Promise<TActionResponse>)
+      | ((context: Context) => TActionResponse | Promise<TActionResponse>)
+    > = [];
   const api: HSAction<T> = {
     _kind: 'hsAction',
+    _route: `/__actions/${assetHash(_form.toString())}`,
+    _form,
     form(renderForm) {
       _form = renderForm;
       return api;
     },
     /**
      * Process form data
      *
@@ -57,18 +86,44 @@ export function unstable__createAction<T extends z.ZodTypeAny>(
       _handler = handler;
       return api;
     },
+    /**
+     * Cusotm error handler if you want to display something other than the default
+     */
     error(handler) {
       _errorHandler = handler;
       return api;
     },
+    /**
+     * Add middleware specific to this route
+     */
+    middleware(middleware) {
+      _middleware = middleware;
+      return api;
+    },
     /**
      * Get form renderer method
      */
     render(formState?: { data?: z.infer<T>; error?: z.ZodError | Error }) {
       const form = _form ? _form(formState || {}) : null;
-      return form ? html`<hs-action>${form}</hs-action>` : null;
+      return form ? html`<hs-action url="${this._route}">${form}</hs-action>` : null;
+    },
+    _getRouteHandlers() {
+      return [
+        ..._middleware,
+        async (c: Context) => {
+          const response = await returnHTMLResponse(c, () => api.run(c));
+          // 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;
+        },
+      ];
     },
     /**
@@ -77,9 +132,11 @@ export function unstable__createAction<T extends z.ZodTypeAny>(
      * Returns result from form processing if successful
      * Re-renders form with data and error information otherwise
      */
-    async run(method: 'GET' | 'POST', c: Context) {
+    async run(c) {
+      const method = c.req.method;
       if (method === 'GET') {
-        return api.render();
+        return await api.render();
       }
       if (method !== 'POST') {
@@ -89,7 +146,7 @@ export function unstable__createAction<T extends z.ZodTypeAny>(
       const formData = await c.req.formData();
       const jsonData = unstable__formDataToJSON(formData);
       const schemaData = schema ? schema.safeParse(jsonData) : null;
-      const data = schemaData?.success ? (schemaData.data as z.infer<T>) : undefined;
+      const data = schemaData?.success ? (schemaData.data as z.infer<T>) : jsonData;
       let error: z.ZodError | Error | null = null;
       try {
@@ -101,16 +158,20 @@ export function unstable__createAction<T extends z.ZodTypeAny>(
           throw new Error('Action POST handler not set! Every action must have a POST handler.');
         }
-        return _handler(c, { data });
+        return await _handler(c, { data });
       } catch (e) {
         error = e as Error | z.ZodError;
+        !IS_PROD && console.error(error);
       }
       if (error && _errorHandler) {
-        return _errorHandler(c, { data, error });
+        // @ts-ignore
+        return await returnHTMLResponse(c, () => _errorHandler(c, { data, error }), {
+          status: 400,
+        });
       }
-      return api.render({ data, error });
+      return await returnHTMLResponse(c, () => api.render({ data, error }), { status: 400 });
     },
   };

package/src/clientjs/hyperspan-client.ts CHANGED Viewed

@@ -72,15 +72,22 @@ class HSAction extends HTMLElement {
     super();
   }
-  // Element is mounted in the DOM
   connectedCallback() {
-    const form = this.querySelector('form');
-    if (form) {
-      form.addEventListener('submit', (e) => {
-        formSubmitToRoute(e, form as HTMLFormElement);
-      });
-    }
+    // Have to run this code AFTER it is added to the DOM...
+    setTimeout(() => {
+      const form = this.querySelector('form');
+      if (form) {
+        form.setAttribute('action', this.getAttribute('url') || '');
+        const submitHandler = (e: Event) => {
+          formSubmitToRoute(e, form as HTMLFormElement, {
+            afterResponse: () => this.connectedCallback(),
+          });
+          form.removeEventListener('submit', submitHandler);
+        };
+        form.addEventListener('submit', submitHandler);
+      }
+    });
   }
 }
 window.customElements.define('hs-action', HSAction);
@@ -88,24 +95,32 @@ window.customElements.define('hs-action', HSAction);
 /**
  * Submit form data to route and replace contents with response
  */
-function formSubmitToRoute(e: Event, form: HTMLFormElement) {
+type TFormSubmitOptons = { afterResponse: () => any };
+function formSubmitToRoute(e: Event, form: HTMLFormElement, opts: TFormSubmitOptons) {
   e.preventDefault();
   const formUrl = form.getAttribute('action') || '';
   const formData = new FormData(form);
   const method = form.getAttribute('method')?.toUpperCase() || 'POST';
+  const headers = {
+    Accept: 'text/html',
+    'X-Request-Type': 'partial',
+  };
   let response: Response;
-  fetch(formUrl, { body: formData, method })
-    .then((res: Response) => {
-      // @TODO: Handle redirects with some custom server thing?
-      // This... actually won't work, because fetch automatically follows all redirects (a 3xx response will never be returned to the client)
-      const isRedirect = [301, 302].includes(res.status);
+  const hsActionTag = form.closest('hs-action');
+  const submitBtn = form.querySelector('button[type=submit],input[type=submit]');
+  if (submitBtn) {
+    submitBtn.setAttribute('disabled', 'disabled');
+  }
-      // Is response a redirect? If so, let's follow it in the client!
-      if (isRedirect) {
-        const newUrl = res.headers.get('Location');
+  fetch(formUrl, { body: formData, method, headers })
+    .then((res: Response) => {
+      // Look for special header that indicates a redirect.
+      // fetch() automatically follows 3xx redirects, so we need to handle this manually to redirect the user to the full page
+      if (res.headers.has('X-Redirect-Location')) {
+        const newUrl = res.headers.get('X-Redirect-Location');
         if (newUrl) {
           window.location.assign(newUrl);
         }
@@ -121,7 +136,10 @@ function formSubmitToRoute(e: Event, form: HTMLFormElement) {
         return;
       }
-      Idiomorph.morph(form, content);
+      const target = content.includes('<html') ? window.document.body : hsActionTag || form;
+      Idiomorph.morph(target, content);
+      opts.afterResponse && opts.afterResponse();
     });
 }

package/src/server.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { readdir } from 'node:fs/promises';
 import { basename, extname, join } from 'node:path';
 import { HSHtml, html, isHSHtml, renderStream, renderAsync, render } from '@hyperspan/html';
 import { isbot } from 'isbot';
-import { buildClientJS, buildClientCSS } from './assets';
+import { buildClientJS, buildClientCSS, assetHash } from './assets';
 import { Hono, type Context } from 'hono';
 import { serveStatic } from 'hono/bun';
 import { HTTPException } from 'hono/http-exception';
@@ -83,46 +83,14 @@ export function createRoute(handler?: THSRouteHandler): THSRoute {
         async (context: Context) => {
           const method = context.req.method.toUpperCase();
-          try {
+          return returnHTMLResponse(context, () => {
             const handler = _handlers[method];
             if (!handler) {
               throw new HTTPException(405, { message: 'Method not allowed' });
             }
-            const routeContent = await handler(context);
-            // Return Response if returned from route handler
-            if (routeContent instanceof Response) {
-              return routeContent;
-            }
-            // @TODO: Move this to config or something...
-            const userIsBot = isbot(context.req.header('User-Agent'));
-            const streamOpt = context.req.query('__nostream');
-            const streamingEnabled = !userIsBot && (streamOpt !== undefined ? streamOpt : true);
-            // Render HSHtml if returned from route handler
-            if (isHSHtml(routeContent)) {
-              // Stream only if enabled and there is async content to stream
-              if (streamingEnabled && (routeContent as HSHtml).asyncContent?.length > 0) {
-                return new StreamResponse(renderStream(routeContent as HSHtml)) as Response;
-              } else {
-                const output = await renderAsync(routeContent as HSHtml);
-                return context.html(output);
-              }
-            }
-            // Return custom Response if returned from route handler
-            if (routeContent instanceof Response) {
-              return routeContent;
-            }
-            // Return unknown content - not specifically handled above
-            return context.text(String(routeContent));
-          } catch (e) {
-            !IS_PROD && console.error(e);
-            return await showErrorReponse(context, e as Error);
-          }
+            return handler(context);
+          });
         },
       ];
     },
@@ -224,6 +192,49 @@ export function createAPIRoute(handler?: THSAPIRouteHandler): THSAPIRoute {
   return api;
 }
+/**
+ * Return HTML response from userland route handler
+ */
+export async function returnHTMLResponse(
+  context: Context,
+  handlerFn: () => unknown,
+  responseOptions?: { status?: ContentfulStatusCode; headers?: Headers | Record<string, string> }
+): Promise<Response> {
+  try {
+    const routeContent = await handlerFn();
+    // Return Response if returned from route handler
+    if (routeContent instanceof Response) {
+      return routeContent;
+    }
+    // @TODO: Move this to config or something...
+    const userIsBot = isbot(context.req.header('User-Agent'));
+    const streamOpt = context.req.query('__nostream');
+    const streamingEnabled = !userIsBot && (streamOpt !== undefined ? streamOpt : true);
+    // Render HSHtml if returned from route handler
+    if (isHSHtml(routeContent)) {
+      // Stream only if enabled and there is async content to stream
+      if (streamingEnabled && (routeContent as HSHtml).asyncContent?.length > 0) {
+        return new StreamResponse(
+          renderStream(routeContent as HSHtml),
+          responseOptions
+        ) as Response;
+      } else {
+        const output = await renderAsync(routeContent as HSHtml);
+        return context.html(output, responseOptions);
+      }
+    }
+    // Return unknown content as string - not specifically handled above
+    return context.html(String(routeContent), responseOptions);
+  } catch (e) {
+    !IS_PROD && console.error(e);
+    return await showErrorReponse(context, e as Error, responseOptions);
+  }
+}
 /**
  * Get a Hyperspan runnable route from a module import
  * @throws Error if no runnable route found
@@ -271,7 +282,11 @@ export function isRunnableRoute(route: unknown): boolean {
  * Basic error handling
  * @TODO: Should check for and load user-customizeable template with special name (app/__error.ts ?)
  */
-async function showErrorReponse(context: Context, err: Error) {
+async function showErrorReponse(
+  context: Context,
+  err: Error,
+  responseOptions?: { status?: ContentfulStatusCode; headers?: Headers | Record<string, string> }
+) {
   let status: ContentfulStatusCode = 500;
   const message = err.message || 'Internal Server Error';
@@ -282,6 +297,18 @@ async function showErrorReponse(context: Context, err: Error) {
   const stack = !IS_PROD && err.stack ? err.stack.split('\n').slice(1).join('\n') : '';
+  // Partial request (no layout - usually from actions)
+  if (context.req.header('X-Request-Type') === 'partial') {
+    const output = render(html`
+      <section style="padding: 20px;">
+        <p style="margin-bottom: 10px;"><strong>Error</strong></p>
+        <strong>${message}</strong>
+        ${stack ? html`<pre>${stack}</pre>` : ''}
+      </section>
+    `);
+    return context.html(output, Object.assign({ status }, responseOptions));
+  }
   const output = render(html`
     <!DOCTYPE html>
     <html lang="en">
@@ -300,7 +327,7 @@ async function showErrorReponse(context: Context, err: Error) {
     </html>
   `);
-  return context.html(output, { status });
+  return context.html(output, Object.assign({ status }, responseOptions));
 }
 export type THSServerConfig = {
@@ -317,6 +344,7 @@ export type THSRouteMap = {
   file: string;
   route: string;
   params: string[];
+  module?: any;
 };
 /**
@@ -363,12 +391,54 @@ export async function buildRoutes(config: THSServerConfig): Promise<THSRouteMap[
     routes.push({
       file: join('./', routesDir, file),
-      route: route || '/',
+      route: normalizePath(route || '/'),
       params,
     });
   }
-  return routes;
+  // Import all routes at once
+  return await Promise.all(
+    routes.map(async (route) => {
+      route.module = (await import(join(CWD, route.file))).default;
+      return route;
+    })
+  );
+}
+/**
+ * Build Hyperspan Actions
+ */
+export async function buildActions(config: THSServerConfig): Promise<THSRouteMap[]> {
+  // Walk all pages and add them as routes
+  const routesDir = join(config.appDir, 'actions');
+  const files = await readdir(routesDir, { recursive: true });
+  const routes: THSRouteMap[] = [];
+  for (const file of files) {
+    // No directories
+    if (!file.includes('.') || basename(file).startsWith('.')) {
+      continue;
+    }
+    let route = assetHash('/' + file.replace(extname(file), ''));
+    routes.push({
+      file: join('./', routesDir, file),
+      route: `/__actions/${route}`,
+      params: [],
+    });
+  }
+  // Import all routes at once
+  return await Promise.all(
+    routes.map(async (route) => {
+      route.module = (await import(join(CWD, route.file))).default;
+      route.route = route.module._route;
+      return route;
+    })
+  );
 }
 /**
@@ -393,20 +463,24 @@ export async function createServer(config: THSServerConfig): Promise<Hono> {
   // [Customization] Before routes added...
   config.beforeRoutesAdded && config.beforeRoutesAdded(app);
+  const [routes, actions] = await Promise.all([buildRoutes(config), buildActions(config)]);
   // Scan routes folder and add all file routes to the router
-  const fileRoutes = await buildRoutes(config);
+  const fileRoutes = routes.concat(actions);
   const routeMap = [];
   for (let i = 0; i < fileRoutes.length; i++) {
     let route = fileRoutes[i];
-    const fullRouteFile = join(CWD, route.file);
-    const routePattern = normalizePath(route.route);
-    routeMap.push({ route: routePattern, file: route.file });
+    routeMap.push({ route: route.route, file: route.file });
+    // Ensure route module was imported and exists (it should...)
+    if (!route.module) {
+      throw new Error(`Route module not loaded! File: ${route.file}`);
+    }
-    // Import route
-    const routeHandlers = createRouteFromModule(await import(fullRouteFile));
-    app.all(routePattern, ...routeHandlers);
+    const routeHandlers = createRouteFromModule(route.module);
+    app.all(route.route, ...routeHandlers);
   }
   // Help route if no routes found