npm - hyperspan - Versions diffs - 0.0.2 → 0.1.0 - Mend

hyperspan 0.0.2 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md +19 -0
package/examples/app/routes/__custom/index.ts +14 -0
package/examples/app/routes/index.ts +12 -0
package/examples/app/routes/posts/[postId].ts +26 -0
package/examples/app/routes/test.ts +12 -0
package/package.json +11 -9
package/src/index.ts +56 -1
package/src/server.ts +114 -0
package/dist/index.js +0 -12991

package/README.md ADDED Viewed

@@ -0,0 +1,19 @@
+# Hyperspan CLI
+Use the Hyperspan CLI to create a new Hyperspan project or run certain commands on an existing Hyperspan project.
+## Create Hyperspan App
+To create a new Hyperspan application in the `myapp` directory:
+```
+bunx hyperspan create myapp
+```
+## Static Site Generator Build
+To create a static build of your Hyperspan app (for blogs or content pages), run from your app root directory:
+```
+bunx hyperspan build:ssg
+```

package/examples/app/routes/__custom/index.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { createRoute } from "@hyperspan/framework";
+import { html } from "@hyperspan/html";
+// This should NOT be a route, because it is in a directory that starts with a double underscore (__custom)
+export default createRoute().get(async (c) => {
+  return html`
+    <html>
+      <body>
+        <h1>Inaccessible Route</h1>
+        <p>This route is not accessible because it is in a directory that starts with a double underscore (<code>__custom</code>).</p>
+      </body>
+    </html>
+  `;
+});

package/examples/app/routes/index.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { createRoute } from '@hyperspan/framework';
+import { html } from '@hyperspan/html';
+export default createRoute().get(() => {
+  return html`
+    <html>
+      <body>
+        <h1>Hello World</h1>
+      </body>
+    </html>
+  `;
+});

package/examples/app/routes/posts/[postId].ts ADDED Viewed

@@ -0,0 +1,26 @@
+import { createRoute } from '@hyperspan/framework';
+import { html } from '@hyperspan/html';
+import { z } from 'zod/v4';
+import { validateBody } from '@hyperspan/framework/middleware/zod';
+export default createRoute().get(async (c) => {
+  return html`
+    <html>
+      <body>
+        <h1>Post Page</h1>
+        <p>Post ID: ${c.route.params.postId}</p>
+      </body>
+    </html>
+  `;
+}).post(async (c) => {
+  return html`
+    <html>
+      <body>
+        <h1>Post Page</h1>
+        <p>Post ID: ${c.route.params.postId}</p>
+      </body>
+    </html>
+  `;
+}, {
+  middleware: [validateBody(z.object({ title: z.string(), content: z.string() }))]
+})

package/examples/app/routes/test.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { createRoute } from '@hyperspan/framework';
+import { html } from '@hyperspan/html';
+export default createRoute().get(async (c) => {
+  return html`
+    <html>
+      <body>
+        <h1>Test Page</h1>
+      </body>
+    </html>
+  `;
+});

package/package.json CHANGED Viewed

@@ -1,22 +1,22 @@
 {
   "name": "hyperspan",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Hyperspan CLI - for @hyperspan/framework",
   "type": "module",
   "public": true,
   "publishConfig": {
     "access": "public"
   },
-  "main": "dist/index.js",
+  "main": "src/index.ts",
   "types": "src/index.ts",
   "exports": {
     ".": {
       "types": "./src/index.ts",
-      "default": "./dist/index.js"
+      "default": "./src/index.ts"
     }
   },
   "bin": {
-    "hyperspan": "dist/index.js"
+    "hyperspan": "src/index.ts"
   },
   "author": "Vance Lucas <vance@vancelucas.com>",
   "license": "BSD-3-Clause",
@@ -29,13 +29,15 @@
     "url": "https://github.com/vlucas/hyperspan/issues"
   },
   "scripts": {
-    "test": "bun test",
-    "build": "bun build src/index.ts --outdir dist --target node",
-    "prepack": "npm run build"
+    "test": "bun test"
   },
   "dependencies": {
-    "@types/degit": "^2.8.6",
-    "commander": "^14.0.0",
+    "commander": "^14.0.2",
     "degit": "^2.8.4"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.3.2",
+    "@types/degit": "^2.8.6",
+    "@types/node": "^24.10.0"
   }
 }

package/src/index.ts CHANGED Viewed

@@ -1,8 +1,13 @@
+#!/usr/bin/env bun
 import { Command } from 'commander';
 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';
 const program = new Command();
@@ -34,8 +39,58 @@ program
   });
 /**
- * Build the project for SSG
+ * Start the server
  */
+program
+  .command('start')
+  .option('--dir <path>', 'directory of your hyperspan project', './')
+  .description('Start the server')
+  .action(async (options) => {
+    // Ensure we are in a hyperspan project
+    const serverFile = `${options.dir}/app/routes`;
+    if (!fs.existsSync(serverFile)) {
+      console.error(
+        'Error: Could not find app/routes - Are you in a Hyperspan project directory?'
+      );
+      process.exit(1);
+    }
+    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();
+      },
+    });
+    console.log(`[Hyperspan] Server started on http://localhost:${httpServer.port} (Press Ctrl+C to stop)`);
+    console.log('========================================\n');
+  });
 program
   .command('build:ssg')
   .option('--dir <path>', 'directory of your hyperspan project', './')

package/src/server.ts ADDED Viewed

@@ -0,0 +1,114 @@
+import { Glob } from "bun";
+import { createServer, getRunnableRoute, IS_PROD, parsePath } from '@hyperspan/framework';
+import { CSS_PUBLIC_PATH, CSS_ROUTE_MAP } from '@hyperspan/framework/client/css';
+import { join } from "node:path";
+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:
+import { createConfig } from '@hyperspan/framework';
+export default createConfig({
+  appDir: './app',
+  publicDir: './public',
+});
+`);
+    process.exit(1);
+  });
+  return configModule;
+}
+export async function startServer(startConfig: startConfig = {}): Promise<HS.Server> {
+  console.log('[Hyperspan] Loading config...');
+  const config = await loadConfig();
+  const server = await createServer(config);
+  console.log('[Hyperspan] Adding routes...');
+  await addRoutes(server, startConfig);
+  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");
+  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);
+    // 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);
+  }
+  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 routeModule = await import(filePath);
+      const route = getRunnableRoute(routeModule);
+      // Set route path based on the file path
+      route._config.path = path;
+      if (cssFiles.length > 0) {
+        route._config.cssImports = cssFiles;
+        CSS_ROUTE_MAP.set(path, cssFiles);
+      }
+      routeMap.push({ route: path, file: filePath.replace(CWD, '') });
+      return route;
+    }
+    return null;
+  }).filter(route => route !== null));
+  if (startConfig.development) {
+    console.log('[Hyperspan] Loaded routes:');
+    console.table(routeMap);
+  }
+  server._routes.push(...routes);
+}