@hyperspan/framework 0.0.2 → 0.1.0

package/src/clientjs/preact.ts

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

package/src/server.ts

@@ -1,90 +1,292 @@
 import { readdir } from 'node:fs/promises';
-import { basename, extname, join, resolve } from 'node:path';
-import { html, renderToStream, renderToString } from './html';
+import { basename, extname, join } from 'node:path';
+import { TmplHtml, html, renderStream, renderAsync, render } from '@hyperspan/html';
 import { isbot } from 'isbot';
-import { HSTemplate } from './html';
-import { HSApp, HSRequestContext, normalizePath } from './app';
+import { buildClientJS, buildClientCSS } from './assets';
+import { Hono } from 'hono';
+import { serveStatic } from 'hono/bun';
+import type { Context, Handler } from 'hono';
+
+import * as v from 'valibot';
+import type {
+  AnySchema,
+  ArraySchema,
+  BigintSchema,
+  BooleanSchema,
+  DateSchema,
+  EnumSchema,
+  GenericIssue,
+  IntersectSchema,
+  LazySchema,
+  LiteralSchema,
+  NullSchema,
+  NullableSchema,
+  NullishSchema,
+  NumberSchema,
+  ObjectSchema,
+  ObjectWithRestSchema,
+  OptionalSchema,
+  PicklistSchema,
+  PipeItem,
+  RecordSchema,
+  SchemaWithPipe,
+  StrictObjectSchema,
+  StrictTupleSchema,
+  StringSchema,
+  TupleSchema,
+  TupleWithRestSchema,
+  UndefinedSchema,
+  UnionSchema,
+  VariantSchema,
+} from 'valibot';
 
 export const IS_PROD = process.env.NODE_ENV === 'production';
-const CWD = import.meta.dir;
-const STATIC_FILE_MATCHER = /[^/\\&\?]+\.([a-zA-Z]+)$/;
+const PWD = import.meta.dir;
+const CWD = process.cwd();
+
+type NonPipeSchemas =
+  | AnySchema
+  | LiteralSchema<any, any>
+  | NullSchema<any>
+  | NumberSchema<any>
+  | BigintSchema<any>
+  | StringSchema<any>
+  | BooleanSchema<any>
+  | NullableSchema<any, any>
+  | StrictObjectSchema<any, any>
+  | ObjectSchema<any, any>
+  | ObjectWithRestSchema<any, any, any>
+  | RecordSchema<any, any, any>
+  | ArraySchema<any, any>
+  | TupleSchema<any, any>
+  | StrictTupleSchema<any, any>
+  | TupleWithRestSchema<readonly any[], any, any>
+  | IntersectSchema<any, any>
+  | UnionSchema<any, any>
+  | VariantSchema<any, any, any>
+  | PicklistSchema<any, any>
+  | EnumSchema<any, any>
+  | LazySchema<any>
+  | DateSchema<any>
+  | NullishSchema<any, any>
+  | OptionalSchema<any, any>
+  | UndefinedSchema<any>;
+
+type PipeSchema = SchemaWithPipe<[NonPipeSchemas, ...PipeItem<any, any, GenericIssue<any>>[]]>;
+// Type inference for valibot taken from:
+// @link https://github.com/gcornut/valibot-json-schema/blob/main/src/toJSONSchema/schemas.ts
+export type TSupportedSchema = NonPipeSchemas | PipeSchema;
 
-// 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?: TSupportedSchema | 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>`;
+
+/**
+ * Route handler helper
+ */
+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;
+  }
+}
+
+/**
+ * Route handler helper
+ */
+export class HSRoute {
+  _kind = 'hsRoute';
+  _handlers: Record<string, Handler> = {};
+  _methods: null | string[] = null;
+  constructor(handler: Handler) {
+    this._handlers.GET = handler;
+  }
+}
 
 /**
- * Did request come from a bot?
+ * Form route handler helper
  */
-function requestIsBot(req: Request) {
-  const ua = req.headers.get('User-Agent');
+export type THSFormRenderer = (data?: any) => THSResponseTypes;
+export class HSFormRoute {
+  _kind = 'hsFormRoute';
+  _handlers: Record<string, Handler> = {};
+  _form: THSFormRenderer;
+  _methods: null | string[] = null;
+  _schema: null | TSupportedSchema = null;
+
+  constructor(renderForm: THSFormRenderer, schema: TSupportedSchema | null = null) {
+    // Haz schema?
+    if (schema) {
+      type TSchema = v.InferInput<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 = (ctx: Context) => renderForm(this.getDefaultData());
+  }
+
+  // Form data
+  getDefaultData() {
+    if (!this._schema) {
+      return {};
+    }
 
-  return ua ? isbot(ua) : false;
+    type TSchema = v.InferInput<typeof this._schema>;
+    const data = v.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);
@@ -94,7 +296,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) {
@@ -118,8 +320,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>
@@ -135,9 +337,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 = {
@@ -153,6 +356,7 @@ 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');
+  console.log(routesDir);
   const files = await readdir(routesDir, { recursive: true });
   const routes: THSRouteMap[] = [];
 
@@ -189,7 +393,7 @@ export async function buildRoutes(config: THSServerConfig): Promise<THSRouteMap[
     }
 
     routes.push({
-      file,
+      file: join('./', routesDir, file),
       route: route || '/',
       params,
     });
@@ -201,15 +405,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);
@@ -220,18 +420,31 @@ export async function createServer(config: THSServerConfig): Promise<HSApp> {
 
   for (let i = 0; i < fileRoutes.length; i++) {
     let route = fileRoutes[i];
-    const fullRouteFile = join('../../', config.appDir, 'routes', route.file);
+    const fullRouteFile = join(CWD, route.file);
     const routePattern = normalizePath(route.route);
 
-    routeMap.push({ route: routePattern, file: config.appDir + '/routes/' + 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 }
+      );
     });
   }
 
@@ -245,80 +458,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(CWD, '../', './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, {
@@ -356,19 +515,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
-}

package/build.ts

@@ -1,29 +0,0 @@
-import dts from 'bun-plugin-dts';
-
-await Promise.all([
-  // Build JS
-  Bun.build({
-    entrypoints: ['./src/index.ts'],
-    outdir: './dist',
-    target: 'browser',
-  }),
-  Bun.build({
-    entrypoints: ['./src/server.ts'],
-    outdir: './dist',
-    target: 'node',
-  }),
-
-  // Build type files for TypeScript
-  Bun.build({
-    entrypoints: ['./src/index.ts'],
-    outdir: './dist',
-    target: 'browser',
-    plugins: [dts()],
-  }),
-  Bun.build({
-    entrypoints: ['./src/server.ts'],
-    outdir: './dist',
-    target: 'node',
-    plugins: [dts()],
-  }),
-]);

package/dist/index.d.ts

@@ -1,50 +0,0 @@
-// Generated by dts-bundle-generator v9.5.1
-
-/**
- * Template object - used so it will be possible to (eventually) pass down context
- */
-export declare class HSTemplate {
-	__hsTemplate: boolean;
-	content: any[];
-	constructor(content: any[]);
-}
-/**
- * HTML template
- */
-export declare function html(strings: TemplateStringsArray, ...values: any[]): HSTemplate;
-export declare namespace html {
-	var raw: (value: string) => HSTemplate;
-}
-/**
- * Render HSTemplate to async generator that streams output to a string
- */
-export declare function renderToStream(template: HSTemplate | string): AsyncGenerator<string>;
-/**
- * Render HSTemplate to string (awaits/buffers entire response)
- */
-export declare function renderToString(template: HSTemplate | string): Promise<string>;
-/**
- * Strip extra spacing between HTML tags (used for tests)
- */
-export declare function compressHTMLString(str: string): string;
-/**
- * LOL JavaScript...
- */
-export declare function _typeOf(obj: any): string;
-/**
- * Client component
- */
-export type THSWCState = Record<string, any>;
-export type THSWCSetStateArg = THSWCState | ((state: THSWCState) => THSWCState);
-export type THSWC = {
-	this: THSWC;
-	state: THSWCState | undefined;
-	id: string;
-	setState: (fn: THSWCSetStateArg) => THSWCState;
-	mergeState: (newState: THSWCState) => THSWCState;
-	render: () => any;
-};
-export type THSWCUser = Pick<THSWC, "render"> & Record<string, any>;
-export declare function clientComponent(id: string, wc: THSWCUser): (attrs?: Record<string, string>, state?: Record<string, any>) => HSTemplate;
-
-export {};