@hyperspan/framework 0.0.3 → 0.1.1

package/src/clientjs/preact.ts

@@ -0,0 +1 @@
+export * from '@preact/compat';

package/src/index.ts

@@ -1,14 +1 @@
-/**
- * Hyperspan
- * Only export html/client libs by default just incase this gets in a JS bundle
- * Server package must be imported with 'hypserspan/server'
- */
-export {
-  _typeOf,
-  clientComponent,
-  compressHTMLString,
-  html,
-  HSTemplate,
-  renderToStream,
-  renderToString,
-} from './html';
+export * from './server';

package/src/server.ts

@@ -1,91 +1,222 @@
-import { readdir } from 'node:fs/promises';
-import { basename, extname, join, resolve } from 'node:path';
-import { html, renderToStream, renderToString } from './html';
-import { isbot } from 'isbot';
-import { HSTemplate } from './html';
-import { HSApp, HSRequestContext, normalizePath } from './app';
+import {readdir} from 'node:fs/promises';
+import {basename, extname, join} from 'node:path';
+import {TmplHtml, html, renderStream, renderAsync, render} from '@hyperspan/html';
+import {isbot} from 'isbot';
+import {buildClientJS, buildClientCSS} from './assets';
+import {Hono} from 'hono';
+import {serveStatic} from 'hono/bun';
+import * as z from 'zod';
+import type {Context, Handler} from 'hono';
 
 export const IS_PROD = process.env.NODE_ENV === 'production';
-const PWD = import.meta.dir;
 const CWD = process.cwd();
-const STATIC_FILE_MATCHER = /[^/\\&\?]+\.([a-zA-Z]+)$/;
 
-// Cached route components
-const _routeCache: { [key: string]: any } = {};
+/**
+ * Route
+ * Define a route that can handle a direct HTTP request
+ * Route handlers should return a Response or TmplHtml object
+ */
+export function createRoute(handler: Handler): HSRoute {
+  return new HSRoute(handler);
+}
+
+/**
+ * Component
+ * Define a component or partial with an optional loading placeholder
+ * These can be rendered anywhere inside other templates - even if async.
+ */
+export function createComponent(render: () => THSComponentReturn | Promise<THSComponentReturn>) {
+  return new HSComponent(render);
+}
+
+/**
+ * Form + route handler
+ * Automatically handles and parses form data
+ *
+ * INITIAL IDEA OF HOW THIS WILL WORK:
+ * ---
+ * 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
+ */
+export function createForm(
+  renderForm: (data?: any) => THSResponseTypes,
+  schema?: z.ZodSchema | null
+): HSFormRoute {
+  return new HSFormRoute(renderForm, schema);
+}
+
+/**
+ * Types
+ */
+export type THSComponentReturn = TmplHtml | string | number | null;
+export type THSResponseTypes = TmplHtml | Response | string | null;
+export const HS_DEFAULT_LOADING = () => html`<div>Loading...</div>`;
 
 /**
- * Did request come from a bot?
+ * Route handler helper
  */
-function requestIsBot(req: Request) {
-  const ua = req.headers.get('User-Agent');
+export class HSComponent {
+  _kind = 'hsComponent';
+  _handlers: Record<string, Handler> = {};
+  _loading?: () => TmplHtml;
+  render: () => THSComponentReturn | Promise<THSComponentReturn>;
+  constructor(render: () => THSComponentReturn | Promise<THSComponentReturn>) {
+    this.render = render;
+  }
+
+  loading(fn: () => TmplHtml) {
+    this._loading = fn;
+    return this;
+  }
+}
 
-  return ua ? isbot(ua) : false;
+/**
+ * Route handler helper
+ */
+export class HSRoute {
+  _kind = 'hsRoute';
+  _handlers: Record<string, Handler> = {};
+  _methods: null | string[] = null;
+  constructor(handler: Handler) {
+    this._handlers.GET = handler;
+  }
+}
+
+/**
+ * Form route handler helper
+ */
+export type THSFormRenderer = (data?: any) => THSResponseTypes;
+export class HSFormRoute {
+  _kind = 'hsFormRoute';
+  _handlers: Record<string, Handler> = {};
+  _form: THSFormRenderer;
+  _methods: null | string[] = null;
+  _schema: null | z.ZodSchema = null;
+
+  constructor(renderForm: THSFormRenderer, schema: z.ZodSchema | null = null) {
+    // Haz schema?
+    if (schema) {
+      type TSchema = z.infer<typeof schema>;
+      this._form = renderForm as (data: TSchema) => THSResponseTypes;
+      this._schema = schema;
+    } else {
+      this._form = renderForm;
+    }
+
+    // GET request is render form by default
+    this._handlers.GET = () => renderForm(this.getDefaultData());
+  }
+
+  // Form data
+  getDefaultData() {
+    if (!this._schema) {
+      return {};
+    }
+
+    type TSchema = z.infer<typeof this._schema>;
+    const data = z.parse(this._schema, {});
+    return data as TSchema;
+  }
+
+  /**
+   * Get form renderer method
+   */
+  renderForm(data?: any) {
+    return this._form(data || this.getDefaultData());
+  }
+
+  // HTTP handlers
+  get(handler: Handler) {
+    this._handlers.GET = handler;
+    return this;
+  }
+
+  patch(handler: Handler) {
+    this._handlers.PATCH = handler;
+    return this;
+  }
+
+  post(handler: Handler) {
+    this._handlers.POST = handler;
+    return this;
+  }
+
+  put(handler: Handler) {
+    this._handlers.PUT = handler;
+    return this;
+  }
+
+  delete(handler: Handler) {
+    this._handlers.DELETE = handler;
+    return this;
+  }
 }
 
 /**
  * Run route from file
  */
-export async function runFileRoute(routeFile: string, context: HSRequestContext) {
+export async function runFileRoute(RouteModule: any, context: Context): Promise<Response | false> {
   const req = context.req;
   const url = new URL(req.url);
   const qs = url.searchParams;
 
   // @TODO: Move this to config or something...
+  const userIsBot = isbot(context.req.header('User-Agent'));
   const streamOpt = qs.get('__nostream') ? !Boolean(qs.get('__nostream')) : undefined;
-  const streamingEnabled = streamOpt !== undefined ? streamOpt : true;
-
-  // Import route component
-  const RouteModule = _routeCache[routeFile] || (await import(routeFile));
-
-  if (IS_PROD) {
-    // Only cache routes in prod
-    _routeCache[routeFile] = RouteModule;
-  }
+  const streamingEnabled = !userIsBot && (streamOpt !== undefined ? streamOpt : true);
 
   // Route module
   const RouteComponent = RouteModule.default;
   const reqMethod = req.method.toUpperCase();
 
-  // Middleware?
-  const routeMiddleware = RouteModule.middleware || {}; // Example: { auth: apiAuth, logger: logMiddleware, }
-  const middlewareResult: any = {};
-
   try {
-    // Run middleware if present...
-    if (Object.keys(routeMiddleware).length) {
-      for (const mKey in routeMiddleware) {
-        const mRes = await routeMiddleware[mKey](context);
-
-        if (mRes instanceof Response) {
-          return context.resMerge(mRes);
-        }
-
-        middlewareResult[mKey] = mRes;
-      }
-    }
-
     // API Route?
     if (RouteModule[reqMethod] !== undefined) {
-      return await runAPIRoute(RouteModule[reqMethod], context, middlewareResult);
+      return await runAPIRoute(RouteModule[reqMethod], context);
     }
 
-    // Route component
-    const routeContent = await RouteComponent(context, middlewareResult);
+    let routeContent;
 
-    if (routeContent instanceof Response) {
-      return context.resMerge(routeContent);
+    // No default export in this file...
+    if (!RouteComponent) {
+      throw new Error('No route was exported by default in matched route file.');
     }
 
-    if (streamingEnabled && !requestIsBot(req)) {
-      return context.resMerge(new StreamResponse(renderToStream(routeContent)) as Response);
+    // Route component
+    if (typeof RouteComponent._handlers !== 'undefined') {
+      const routeMethodHandler = RouteComponent._handlers[reqMethod];
+
+      if (!routeMethodHandler) {
+        return new Response('Method Not Allowed', {
+          status: 405,
+          headers: {'content-type': 'text/plain'},
+        });
+      }
+
+      routeContent = await routeMethodHandler(context);
     } else {
-      // Render content and template
-      // TODO: Use any context variables from RouteComponent rendering to set values in layout (dynamic title, etc.)...
-      const output = await renderToString(routeContent);
+      routeContent = await RouteComponent(context);
+    }
 
-      // Render it...
-      return context.html(output);
+    if (routeContent instanceof Response) {
+      return routeContent;
     }
+
+    // Render TmplHtml if returned from route handler
+    if (routeContent instanceof TmplHtml) {
+      if (streamingEnabled) {
+        return new StreamResponse(renderStream(routeContent)) as Response;
+      } else {
+        const output = await renderAsync(routeContent);
+        return context.html(output);
+      }
+    }
+
+    return routeContent;
   } catch (e) {
     console.error(e);
     return await showErrorReponse(context, e as Error);
@@ -95,7 +226,7 @@ export async function runFileRoute(routeFile: string, context: HSRequestContext)
 /**
  * Run route and handle response
  */
-async function runAPIRoute(routeFn: any, context: HSRequestContext, middlewareResult?: any) {
+async function runAPIRoute(routeFn: any, context: Context, middlewareResult?: any) {
   try {
     return await routeFn(context, middlewareResult);
   } catch (err) {
@@ -104,13 +235,13 @@ async function runAPIRoute(routeFn: any, context: HSRequestContext, middlewareRe
 
     return context.json(
       {
-        meta: { success: false },
+        meta: {success: false},
         data: {
           message: e.message,
           stack: IS_PROD ? undefined : e.stack?.split('\n'),
         },
       },
-      { status: 500 }
+      {status: 500}
     );
   }
 }
@@ -119,8 +250,8 @@ async function runAPIRoute(routeFn: any, context: HSRequestContext, middlewareRe
  * Basic error handling
  * @TODO: Should check for and load user-customizeable template with special name (app/__error.ts ?)
  */
-async function showErrorReponse(context: HSRequestContext, err: Error) {
-  const output = await renderToString(html`
+async function showErrorReponse(context: Context, err: Error) {
+  const output = render(html`
     <main>
       <h1>Error</h1>
       <pre>${err.message}</pre>
@@ -136,9 +267,10 @@ async function showErrorReponse(context: HSRequestContext, err: Error) {
 export type THSServerConfig = {
   appDir: string;
   staticFileRoot: string;
+  rewrites?: Array<{source: string; destination: string}>;
   // For customizing the routes and adding your own...
-  beforeRoutesAdded?: (app: HSApp) => void;
-  afterRoutesAdded?: (app: HSApp) => void;
+  beforeRoutesAdded?: (app: Hono) => void;
+  afterRoutesAdded?: (app: Hono) => void;
 };
 
 export type THSRouteMap = {
@@ -154,7 +286,8 @@ const ROUTE_SEGMENT = /(\[[a-zA-Z_\.]+\])/g;
 export async function buildRoutes(config: THSServerConfig): Promise<THSRouteMap[]> {
   // Walk all pages and add them as routes
   const routesDir = join(config.appDir, 'routes');
-  const files = await readdir(routesDir, { recursive: true });
+  console.log(routesDir);
+  const files = await readdir(routesDir, {recursive: true});
   const routes: THSRouteMap[] = [];
 
   for (const file of files) {
@@ -176,7 +309,7 @@ export async function buildRoutes(config: THSServerConfig): Promise<THSRouteMap[
 
     if (dynamicPaths) {
       params = [];
-      route = route.replace(ROUTE_SEGMENT, (match: string, p1: string, offset: number) => {
+      route = route.replace(ROUTE_SEGMENT, (match: string) => {
         const paramName = match.replace(/[^a-zA-Z_\.]+/g, '');
 
         if (match.includes('...')) {
@@ -202,15 +335,11 @@ export async function buildRoutes(config: THSServerConfig): Promise<THSRouteMap[
 /**
  * Create and start Bun HTTP server
  */
-export async function createServer(config: THSServerConfig): Promise<HSApp> {
+export async function createServer(config: THSServerConfig): Promise<Hono> {
   // Build client JS and CSS bundles so they are available for templates when streaming starts
   await Promise.all([buildClientJS(), buildClientCSS()]);
 
-  const app = new HSApp();
-
-  app.defaultRoute(() => {
-    return new Response('Not... found?', { status: 404 });
-  });
+  const app = new Hono();
 
   // [Customization] Before routes added...
   config.beforeRoutesAdded && config.beforeRoutesAdded(app);
@@ -224,15 +353,28 @@ export async function createServer(config: THSServerConfig): Promise<HSApp> {
     const fullRouteFile = join(CWD, route.file);
     const routePattern = normalizePath(route.route);
 
-    routeMap.push({ route: routePattern, file: route.file });
+    routeMap.push({route: routePattern, file: route.file});
+
+    // Import route
+    const routeModule = await import(fullRouteFile);
 
     app.all(routePattern, async (context) => {
-      const matchedRoute = await runFileRoute(fullRouteFile, context);
+      const matchedRoute = await runFileRoute(routeModule, context);
       if (matchedRoute) {
         return matchedRoute as Response;
       }
 
-      return app._defaultRoute(context);
+      return context.notFound();
+    });
+  }
+
+  // Help route if no routes found
+  if (routeMap.length === 0) {
+    app.get('/', (context) => {
+      return context.text(
+        'No routes found. Add routes to app/routes. Example: `app/routes/index.ts`',
+        {status: 404}
+      );
     });
   }
 
@@ -246,80 +388,26 @@ export async function createServer(config: THSServerConfig): Promise<HSApp> {
   config.afterRoutesAdded && config.afterRoutesAdded(app);
 
   // Static files and catchall
-  app.all('*', (context) => {
-    const req = context.req;
-
-    // Static files
-    if (STATIC_FILE_MATCHER.test(req.url)) {
-      const filePath = config.staticFileRoot + new URL(req.url).pathname;
-      const file = Bun.file(filePath);
-      let headers = {};
-
-      if (IS_PROD) {
-        headers = {
-          'cache-control': 'public, max-age=31557600',
-        };
-      }
-
-      return new Response(file, { headers });
-    }
-
-    return app._defaultRoute(context);
+  app.use(
+    '*',
+    serveStatic({
+      root: config.staticFileRoot,
+    })
+  );
+
+  app.notFound((context) => {
+    return context.text('Not... found?', {status: 404});
   });
 
   return app;
 }
 
-/**
- * Build client JS for end users (minimal JS for Hyperspan to work)
- */
-export let clientJSFile: string;
-export async function buildClientJS() {
-  const sourceFile = resolve(PWD, '../', './src/clientjs/hyperspan-client.ts');
-  const output = await Bun.build({
-    entrypoints: [sourceFile],
-    outdir: `./public/_hs/js`,
-    naming: IS_PROD ? '[dir]/[name]-[hash].[ext]' : undefined,
-    minify: IS_PROD,
-  });
-
-  clientJSFile = output.outputs[0].path.split('/').reverse()[0];
-  return clientJSFile;
-}
-
-/**
- * Find client CSS file built for end users
- * @TODO: Build this in code here vs. relying on tailwindcss CLI tool from package scripts
- */
-export let clientCSSFile: string;
-export async function buildClientCSS() {
-  if (clientCSSFile) {
-    return clientCSSFile;
-  }
-
-  // Find file already built from tailwindcss CLI
-  const cssDir = './public/_hs/css/';
-  const cssFiles = await readdir(cssDir);
-
-  for (const file of cssFiles) {
-    // Only looking for CSS files
-    if (clientCSSFile || !file.endsWith('.css')) {
-      continue;
-    }
-
-    return (clientCSSFile = file.replace(cssDir, ''));
-  }
-
-  if (!clientCSSFile) {
-    throw new Error(`Unable to build CSS files from ${cssDir}`);
-  }
-}
-
 /**
  * Streaming HTML Response
  */
-export class StreamResponse {
+export class StreamResponse extends Response {
   constructor(iterator: AsyncIterator<unknown>, options = {}) {
+    super();
     const stream = createReadableStreamFromAsyncGenerator(iterator as AsyncGenerator);
 
     return new Response(stream, {
@@ -343,7 +431,7 @@ export function createReadableStreamFromAsyncGenerator(output: AsyncGenerator) {
   return new ReadableStream({
     async start(controller) {
       while (true) {
-        const { done, value } = await output.next();
+        const {done, value} = await output.next();
 
         if (done) {
           controller.close();
@@ -357,19 +445,12 @@ export function createReadableStreamFromAsyncGenerator(output: AsyncGenerator) {
 }
 
 /**
- * Form route
- * Automatically handles and parses form data
- *
- * 1. Renders component as initial form markup
- * 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
+ * Normalize URL path
+ * Removes trailing slash and lowercases path
  */
-export type TFormRouteFn = (context: HSRequestContext) => HSTemplate | Response;
-export function formRoute(handlerFn: TFormRouteFn) {
-  return function _formRouteHandler(context: HSRequestContext) {
-    // @TODO: Parse form data and pass it into form route handler
-  };
+export function normalizePath(urlPath: string): string {
+  return (
+    (urlPath.endsWith('/') ? urlPath.substring(0, urlPath.length - 1) : urlPath).toLowerCase() ||
+    '/'
+  );
 }

package/.prettierrc

@@ -1,7 +0,0 @@
-{
-  "printWidth": 100,
-  "trailingComma": "es5",
-  "tabWidth": 2,
-  "semi": true,
-  "singleQuote": true
-}