hyperspan 1.0.0-alpha.1 → 1.0.0-alpha.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperspan",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.11",
   "description": "Hyperspan CLI - for @hyperspan/framework",
   "type": "module",
   "public": true,
@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@hyperspan/framework": "^1.0.0-alpha",
+    "bun-plugin-tailwind": "^0.1.2",
     "commander": "^14.0.2",
     "degit": "^2.8.4"
   },

package/src/index.ts

@@ -5,9 +5,8 @@ import degit from 'degit';
 import fs from 'node:fs';
 import { execSync } from 'node:child_process';
 import packageJson from '../package.json';
-import { startServer } from './server';
-import { createContext } from '@hyperspan/framework';
-import { join } from 'node:path';
+import { createHyperspanServer } from './server';
+import { startBunServer } from './runtimes/bun';
 
 const program = new Command();
 
@@ -43,9 +42,19 @@ program
  */
 program
   .command('start')
+  .alias('dev')
   .option('--dir <path>', 'directory of your hyperspan project', './')
   .description('Start the server')
-  .action(async (options) => {
+  .action(async function (options) {
+
+    const IS_DEV_MODE = process.argv.includes('dev');
+
+    // Developer mode (extra logging, etc.)
+    if (IS_DEV_MODE) {
+      console.log('[Hyperspan] Developer mode enabled 🛠️');
+      process.env.NODE_ENV = 'development';
+    }
+
     // Ensure we are in a hyperspan project
     const serverFile = `${options.dir}/app/routes`;
 
@@ -59,36 +68,13 @@ program
     console.log('\n========================================');
     console.log('[Hyperspan] Starting...');
 
-    const server = await startServer({ development: process.env.NODE_ENV !== 'production' });
-
-    const routes: Record<string, (request: Request) => Promise<Response>> = {};
-    for (const route of server._routes) {
-      routes[route._path()] = (request: Request) => route.fetch(request);
-    }
-
-    const httpServer = Bun.serve({
-      routes,
-      fetch: async (request: Request) => {
-        // Serve static files from the public directory
-        const url = new URL(request.url);
-        if (url.pathname.startsWith('/_hs/')) {
-          return new Response(Bun.file(join('./', server._config.publicDir, url.pathname)));
-        }
-
-        // Other static file from the public directory
-        const file = Bun.file(join('./', server._config.publicDir, url.pathname))
-        const fileExists = await file.exists()
-        if (fileExists) {
-          return new Response(file);
-        }
-
-        // Not found
-        return createContext(request).res.notFound();
-      },
-    });
+    const server = await createHyperspanServer({ development: IS_DEV_MODE });
+    const httpServer = startBunServer(server);
 
     console.log(`[Hyperspan] Server started on http://localhost:${httpServer.port} (Press Ctrl+C to stop)`);
     console.log('========================================\n');
+
+    return httpServer;
   });
 
 program
@@ -108,7 +94,7 @@ program
 
     const server = await import(serverFile);
 
-    console.log(server);
+    // @TODO: Build the project for SSG...
   });
 
 program.parse();

package/src/runtimes/bun.ts

@@ -0,0 +1,57 @@
+import { createContext } from "@hyperspan/framework";
+import { join } from 'node:path';
+
+import type { Hyperspan as HS } from '@hyperspan/framework';
+
+/**
+ * Use Bun server. We don't have to do any path parsing here because Bun has its own path parsing logic with param passing in req.params.
+ * Using Bun HTTP server directly is the fastest way to serve the app, and is highly recommended for production.
+ */
+export function startBunServer(server: HS.Server) {
+  const routes: Record<string, ((request: Request) => Promise<Response>) | Response> = {};
+
+  // Add routemap for Bun server
+  for (const route of server._routes) {
+    const path = route._path();
+
+    // Add main route
+    routes[path] = (request: Request) => {
+      return route.fetch(request);
+    }
+
+    // Add trailing slash route to redirect to the main route if the main route doesn't have a trailing slash
+    if (!path.endsWith('/')) {
+      routes[path + '/'] = Response.redirect(path);
+    }
+
+    // Wildcard routes need a base route *without* the slash to redirect to the route *with* the slash
+    // Bun seems to not allow wildcard routes without a slash before the wildcard segment, so they always have a trailing slash
+    if (path.endsWith('/*')) {
+      const pathWithoutWildcard = path.replace('/*', '');
+      routes[pathWithoutWildcard] = Response.redirect(pathWithoutWildcard + '/');
+    }
+  }
+
+  const httpServer = Bun.serve({
+    routes,
+    fetch: async (request: Request) => {
+      // Serve static files from the public directory
+      const url = new URL(request.url);
+      if (url.pathname.startsWith('/_hs/')) {
+        return new Response(Bun.file(join('./', server._config.publicDir, url.pathname)));
+      }
+
+      // Other static file from the public directory
+      const file = Bun.file(join('./', server._config.publicDir, url.pathname))
+      const fileExists = await file.exists()
+      if (fileExists) {
+        return new Response(file);
+      }
+
+      // Not found
+      return createContext(request).res.notFound();
+    },
+  });
+
+  return httpServer;
+}

package/src/server.ts

@@ -1,21 +1,28 @@
-import { Glob } from "bun";
-import { createServer, getRunnableRoute, IS_PROD, parsePath } from '@hyperspan/framework';
+import { Glob } from 'bun';
+import { createServer, getRunnableRoute, IS_PROD } from '@hyperspan/framework';
 import { CSS_PUBLIC_PATH, CSS_ROUTE_MAP } from '@hyperspan/framework/client/css';
-import { join } from "node:path";
+import { isValidRoutePath, parsePath } from '@hyperspan/framework/utils';
+import { join } from 'node:path';
+import tailwind from "bun-plugin-tailwind"
 
 import type { Hyperspan as HS } from '@hyperspan/framework';
+
 type startConfig = {
   development?: boolean;
-}
+};
 
 const CWD = process.cwd();
 
 export async function loadConfig(): Promise<HS.Config> {
-  const configFile = join(CWD, "hyperspan.config.ts");
-  const configModule = await import(configFile).then((module) => module.default).catch((error) => {
-    console.error(`[Hyperspan] Unable to load config file: ${error}`);
-    console.error(`[Hyperspan] Please create a hyperspan.config.ts file in the root of your project.`);
-    console.log(`[Hyperspan] Example:
+  const configFile = join(CWD, 'hyperspan.config.ts');
+  const configModule = await import(configFile)
+    .then((module) => module.default)
+    .catch((error) => {
+      console.error(`[Hyperspan] Unable to load config file: ${error}`);
+      console.error(
+        `[Hyperspan] Please create a hyperspan.config.ts file in the root of your project.`
+      );
+      console.log(`[Hyperspan] Example:
 import { createConfig } from '@hyperspan/framework';
 
 export default createConfig({
@@ -23,92 +30,154 @@ export default createConfig({
   publicDir: './public',
 });
 `);
-    process.exit(1);
-  });
+      process.exit(1);
+    });
   return configModule;
 }
 
-export async function startServer(startConfig: startConfig = {}): Promise<HS.Server> {
+/**
+ * Create a Hyperspan server instance with all routes and actions added
+ */
+export async function createHyperspanServer(startConfig: startConfig = {}): Promise<HS.Server> {
   console.log('[Hyperspan] Loading config...');
   const config = await loadConfig();
   const server = await createServer(config);
+
+  if (config.beforeRoutesAdded) {
+    config.beforeRoutesAdded(server);
+  }
+
   console.log('[Hyperspan] Adding routes...');
-  await addRoutes(server, startConfig);
+  await addDirectoryAsRoutes(server, 'routes', startConfig);
+
+  console.log('[Hyperspan] Adding actions...');
+  await addDirectoryAsRoutes(server, 'actions', startConfig);
+
+  if (config.afterRoutesAdded) {
+    config.afterRoutesAdded(server);
+  }
+
   return server;
 }
 
-export async function addRoutes(server: HS.Server, startConfig: startConfig) {
-  const routesGlob = new Glob("**/*.ts");
-  const routeFiles: string[] = [];
-  const appDir = server._config.appDir || "./app";
-  const routesDir = join(CWD, appDir, "routes");
+export async function addDirectoryAsRoutes(
+  server: HS.Server,
+  relativeDirectory: string,
+  startConfig: startConfig = {}
+) {
+  const routesGlob = new Glob('**/*.ts');
+  const files: string[] = [];
+  const appDir = server._config.appDir || './app';
+  const relativeAppPath = join(appDir, relativeDirectory);
+  const directoryPath = join(CWD, appDir, relativeDirectory);
   const buildDir = join(CWD, '.build');
   const cssPublicDir = join(CWD, server._config.publicDir, CSS_PUBLIC_PATH);
 
-  for await (const file of routesGlob.scan(routesDir)) {
-    const filePath = join(routesDir, file);
+  try {
+    // Scan directory for TypeScript files
+    for await (const file of routesGlob.scan(directoryPath)) {
+      const filePath = join(directoryPath, file);
 
-    // Hidden directories and files start with a double underscore.
-    // These do not get added to the routes. Nothing nested under them gets added to the routes either.
-    if (filePath.includes('/__')) {
-      continue;
-    }
+      // Hidden directories and files start with a double underscore.
+      // These do not get added to the routes. Nothing nested under them gets added to the routes either.
+      if (filePath.includes('/__')) {
+        continue;
+      }
 
-    routeFiles.push(filePath);
+      files.push(filePath);
+    }
+  } catch (error) {
+    console.error(`[Hyperspan] Directory not found: ${directoryPath}`);
   }
 
-  const routeMap: { route: string, file: string }[] = [];
-  const routes: HS.Route[] = await Promise.all(routeFiles.map(async (filePath) => {
-    const relativePath = filePath.split('app/routes/').pop();
-    const { path } = parsePath(relativePath ?? '/');
-
-    if (path) {
-      let cssFiles: string[] = [];
-
-      // Build the route just for the CSS files
-      // Wasteful perhaps to compile the JS also and then just discard it, but it's an easy way to do CSS compilation by route
-      const buildResult = await Bun.build({
-        entrypoints: [filePath],
-        outdir: buildDir,
-        naming: `app/routes/${path.endsWith('/') ? path + 'index' : path}-[hash].[ext]`,
-        minify: IS_PROD,
-        format: 'esm',
-        target: 'node',
-        env: 'APP_PUBLIC_*',
-      });
-
-      // Move CSS files to the public directory
-      for (const output of buildResult.outputs) {
-        if (output.path.endsWith('.css')) {
-          const cssFileName = output.path.split('/').pop()!;
-          await Bun.write(join(cssPublicDir, cssFileName), Bun.file(output.path));
-          cssFiles.push(cssFileName);
+  const routeMap: { route: string; file: string }[] = [];
+  const routes: Array<HS.Route> = (await Promise.all(
+    files.map(async (filePath) => {
+      try {
+        const relativeFilePath = filePath.split(relativeAppPath).pop() || '';
+        if (!isValidRoutePath(relativeFilePath)) {
+          return null;
         }
-      }
+        const module = await import(filePath);
 
-      const routeModule = await import(filePath);
-      const route = getRunnableRoute(routeModule);
+        const route = getRunnableRoute(module);
 
-      // Set route path based on the file path
-      route._config.path = path;
+        const parsedPath = parsePath(relativeFilePath);
 
-      if (cssFiles.length > 0) {
-        route._config.cssImports = cssFiles;
-        CSS_ROUTE_MAP.set(path, cssFiles);
-      }
+        // If route has a _path() method that returns a meaningful path, use it
+        // Otherwise, parse path from file path
+        let path = parsedPath.path;
+        if (typeof route._path === 'function') {
+          const routePath = route._path();
+          // If _path() returns a meaningful path (not just '/'), use it
+          if (routePath && routePath !== '/') {
+            path = routePath;
+          }
+        }
 
-      routeMap.push({ route: path, file: filePath.replace(CWD, '') });
+        let cssFiles: string[] = [];
+
+        // Build the route just for the CSS files (expensive, but easiest way to do CSS compilation by route)
+        // @TODO: Optimize this at some later date... This is O(n) for each route and doesn't scale well for large projects.
+        // @TODO: This will also currently re-compile the same CSS file(s) that are included in multiple routes, which is dumb.
+        const buildResult = await Bun.build({
+          plugins: [tailwind],
+          entrypoints: [filePath],
+          outdir: buildDir,
+          naming: `${relativeAppPath}/${path.endsWith('/') ? path + 'index' : path}-[hash].[ext]`,
+          minify: IS_PROD,
+          format: 'esm',
+          target: 'node',
+        });
+
+        // Move CSS files to the public directory
+        for (const output of buildResult.outputs) {
+          if (output.path.endsWith('.css')) {
+            const cssFileName = output.path.split('/').pop()!;
+            await Bun.write(join(cssPublicDir, cssFileName), Bun.file(output.path));
+            cssFiles.push(cssFileName);
+          }
+        }
 
-      return route;
-    }
+        // Set route path based on the file path (if not already set)
+        if (!route._config.path) {
+          route._config.path = path;
+
+          // Initialize params object if it doesn't exist
+          if (parsedPath.params.length > 0) {
+            const params = route._config.params ?? {};
+            parsedPath.params.forEach(param => {
+              params[param] = undefined;
+            });
+            route._config.params = params;
+          }
+        }
+
+        if (cssFiles.length > 0) {
+          route._config.cssImports = cssFiles;
+          CSS_ROUTE_MAP.set(path, cssFiles);
+        }
 
-    return null;
-  }).filter(route => route !== null));
+        routeMap.push({ route: path, file: filePath.replace(CWD, '') });
+
+        return route;
+
+      } catch (error) {
+        console.error(`[Hyperspan] Error loading route: ${filePath}`);
+        console.error(error);
+        process.exit(1);
+      }
+    })
+  )).filter((route) => route !== null);
+
+  if (routeMap.length === 0) {
+    console.log(`[Hyperspan] No routes found in ${relativeDirectory}`);
+    return;
+  }
 
   if (startConfig.development) {
-    console.log('[Hyperspan] Loaded routes:');
     console.table(routeMap);
   }
 
   server._routes.push(...routes);
-}
+}