hyperspan 1.0.0-alpha.2 → 1.0.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperspan",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.4",
   "description": "Hyperspan CLI - for @hyperspan/framework",
   "type": "module",
   "public": true,
@@ -39,6 +39,7 @@
   "devDependencies": {
     "@types/bun": "^1.3.2",
     "@types/degit": "^2.8.6",
-    "@types/node": "^24.10.0"
+    "@types/node": "^24.10.0",
+    "bun-plugin-tailwind": "^0.1.2"
   }
 }

package/src/server.ts

@@ -2,8 +2,10 @@ import { Glob } from 'bun';
 import { createServer, getRunnableRoute, IS_PROD, isValidRoutePath, parsePath } from '@hyperspan/framework';
 import { CSS_PUBLIC_PATH, CSS_ROUTE_MAP } from '@hyperspan/framework/client/css';
 import { join } from 'node:path';
+import tailwind from "bun-plugin-tailwind"
 
 import type { Hyperspan as HS } from '@hyperspan/framework';
+
 type startConfig = {
   development?: boolean;
 };
@@ -37,20 +39,28 @@ export async function startServer(startConfig: startConfig = {}): Promise<HS.Ser
   const config = await loadConfig();
   const server = await createServer(config);
   console.log('[Hyperspan] Adding routes...');
-  await addRoutes(server, startConfig);
+  await addDirectoryAsRoutes(server, 'routes', startConfig);
+  console.log('[Hyperspan] Adding actions...');
+  await addDirectoryAsRoutes(server, 'actions', startConfig);
   return server;
 }
 
-export async function addRoutes(server: HS.Server, startConfig: startConfig) {
+export async function addDirectoryAsRoutes(
+  server: HS.Server,
+  relativeDirectory: string,
+  startConfig: startConfig = {}
+) {
   const routesGlob = new Glob('**/*.ts');
-  const routeFiles: string[] = [];
+  const files: string[] = [];
   const appDir = server._config.appDir || './app';
-  const routesDir = join(CWD, appDir, 'routes');
+  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);
+  // 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.
@@ -58,63 +68,72 @@ export async function addRoutes(server: HS.Server, startConfig: startConfig) {
       continue;
     }
 
-    routeFiles.push(filePath);
+    files.push(filePath);
   }
 
   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 (!isValidRoutePath(path)) {
-          return null;
+  const routes: Array<HS.Route> = (await Promise.all(
+    files.map(async (filePath) => {
+      const relativeFilePath = filePath.split(relativeAppPath).pop() || '';
+      if (!isValidRoutePath(relativeFilePath)) {
+        return null;
+      }
+      const module = await import(filePath);
+      const route = getRunnableRoute(module);
+      const parsedPath = parsePath(relativeFilePath);
+
+      // 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;
         }
-
-        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);
-          }
+      }
+
+      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);
         }
+      }
 
-        const routeModule = await import(filePath);
-        const route = getRunnableRoute(routeModule);
-
-        // Set route path based on the file path
+      // Set route path based on the file path (if not already set)
+      if (!route._config.path) {
         route._config.path = path;
+      }
 
-        if (cssFiles.length > 0) {
-          route._config.cssImports = cssFiles;
-          CSS_ROUTE_MAP.set(path, cssFiles);
-        }
+      if (cssFiles.length > 0) {
+        route._config.cssImports = cssFiles;
+        CSS_ROUTE_MAP.set(path, cssFiles);
+      }
 
-        routeMap.push({ route: path, file: filePath.replace(CWD, '') });
+      routeMap.push({ route: path, file: filePath.replace(CWD, '') });
 
-        return route;
-      })
-      .filter((route) => route !== null)
-  );
+      return route;
+    })
+  )).filter((route) => route !== null);
 
   if (startConfig.development) {
-    console.log('[Hyperspan] Loaded routes:');
     console.table(routeMap);
   }