hyperspan 1.0.0-alpha.1 → 1.0.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperspan",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.3",
   "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

@@ -1,21 +1,26 @@
-import { Glob } from "bun";
-import { createServer, getRunnableRoute, IS_PROD, parsePath } from '@hyperspan/framework';
+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 { 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,8 +28,8 @@ export default createConfig({
   publicDir: './public',
 });
 `);
-    process.exit(1);
-  });
+      process.exit(1);
+    });
   return configModule;
 }
 
@@ -38,10 +43,10 @@ export async function startServer(startConfig: startConfig = {}): Promise<HS.Ser
 }
 
 export async function addRoutes(server: HS.Server, startConfig: startConfig) {
-  const routesGlob = new Glob("**/*.ts");
+  const routesGlob = new Glob('**/*.ts');
   const routeFiles: string[] = [];
-  const appDir = server._config.appDir || "./app";
-  const routesDir = join(CWD, appDir, "routes");
+  const appDir = server._config.appDir || './app';
+  const routesDir = join(CWD, appDir, 'routes');
   const buildDir = join(CWD, '.build');
   const cssPublicDir = join(CWD, server._config.publicDir, CSS_PUBLIC_PATH);
 
@@ -57,53 +62,57 @@ export async function addRoutes(server: HS.Server, startConfig: startConfig) {
     routeFiles.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 (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: 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 routeModule = await import(filePath);
-      const route = getRunnableRoute(routeModule);
+        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: `app/routes/${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);
+          }
+        }
 
-      // Set route path based on the file path
-      route._config.path = path;
+        const routeModule = await import(filePath);
+        const route = getRunnableRoute(routeModule);
 
-      if (cssFiles.length > 0) {
-        route._config.cssImports = cssFiles;
-        CSS_ROUTE_MAP.set(path, cssFiles);
-      }
+        // Set route path based on the file path
+        route._config.path = path;
 
-      routeMap.push({ route: path, file: filePath.replace(CWD, '') });
+        if (cssFiles.length > 0) {
+          route._config.cssImports = cssFiles;
+          CSS_ROUTE_MAP.set(path, cssFiles);
+        }
 
-      return route;
-    }
+        routeMap.push({ route: path, file: filePath.replace(CWD, '') });
 
-    return null;
-  }).filter(route => route !== null));
+        return route;
+      })
+  )).filter((route) => route !== null);
 
   if (startConfig.development) {
     console.log('[Hyperspan] Loaded routes:');
@@ -111,4 +120,4 @@ export async function addRoutes(server: HS.Server, startConfig: startConfig) {
   }
 
   server._routes.push(...routes);
-}
+}