@hashrock/ono 0.1.1 → 0.1.2

package/src/cli.js

@@ -1,1014 +1,247 @@
 #!/usr/bin/env node
 
 /**
- * CLI Tool for mini-jsx
+ * Ono CLI - Minimalist SSG framework
  */
+import { resolve } from "node:path";
+import { copyFile, mkdir, readdir, stat } from "node:fs/promises";
+import { existsSync } from "node:fs";
+import { join, relative } from "node:path";
+import { loadUnoConfig } from "./unocss.js";
+import { createDevServer } from "./server.js";
+import { buildFile, buildFiles, generateUnoCSS } from "./builder.js";
+import { watchFile, watchFiles, createWebSocketServer } from "./watcher.js";
 
-import fs from "node:fs/promises";
-import path from "node:path";
-import http from "node:http";
-import net from "node:net";
-import { bundle } from "./bundler.js";
-import { renderToString } from "./renderer.js";
-import { WebSocketServer } from "ws";
-import { generateCSSFromFiles, loadUnoConfig } from "./unocss.js";
+const args = process.argv.slice(2);
+const command = args[0];
 
-/**
- * Find an available port starting from the given port
- * @param {number} startPort - Port to start searching from
- * @param {number} maxAttempts - Maximum number of ports to try
- * @returns {Promise<number>} Available port number
- */
-async function findAvailablePort(startPort, maxAttempts = 10) {
-  for (let i = 0; i < maxAttempts; i++) {
-    const port = startPort + i;
-    try {
-      await new Promise((resolve, reject) => {
-        const server = net.createServer();
-        server.once("error", reject);
-        server.once("listening", () => {
-          server.close();
-          resolve();
-        });
-        server.listen(port);
-      });
-      return port;
-    } catch (err) {
-      if (err.code !== "EADDRINUSE") {
-        throw err;
-      }
-      // Port is in use, try next one
-    }
-  }
-  throw new Error(`Could not find available port in range ${startPort}-${startPort + maxAttempts - 1}`);
-}
+async function copyPublicFiles(outputDir = "dist") {
+  const publicDir = resolve(process.cwd(), "public");
+  const outDir = resolve(process.cwd(), outputDir);
 
-/**
- * Parse command line arguments into options object
- * @param {string[]} args - Command line arguments
- * @returns {object} Parsed options
- */
-function parseArgs(args) {
-  const options = {
-    _: [], // Positional arguments
-  };
-
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i];
-
-    if (arg === "--watch" || arg === "-w") {
-      options.watch = true;
-    } else if (arg === "--port" || arg === "-p") {
-      options.port = parseInt(args[++i]);
-    } else if (arg === "--output" || arg === "-o") {
-      options.output = args[++i];
-    } else if (arg === "--help" || arg === "-h") {
-      options.help = true;
-    } else if (arg === "--version" || arg === "-v") {
-      options.version = true;
-    } else if (!arg.startsWith("-")) {
-      options._.push(arg);
-    }
+  if (!existsSync(publicDir)) {
+    return;
   }
 
-  return options;
-}
-
-/**
- * Discover all JSX files in the pages directory
- * @param {string} pagesDir - Path to pages directory
- * @returns {Promise<string[]>} Array of JSX file paths
- */
-async function discoverPages(pagesDir) {
-  const pages = [];
-
-  async function walk(dir) {
-    const entries = await fs.readdir(dir, { withFileTypes: true });
+  async function copyRecursive(src, dest) {
+    const entries = await readdir(src, { withFileTypes: true });
 
     for (const entry of entries) {
-      const fullPath = path.join(dir, entry.name);
+      const srcPath = join(src, entry.name);
+      const destPath = join(dest, entry.name);
 
       if (entry.isDirectory()) {
-        await walk(fullPath);
-      } else if (entry.isFile() && entry.name.endsWith(".jsx")) {
-        pages.push(fullPath);
+        await mkdir(destPath, { recursive: true });
+        await copyRecursive(srcPath, destPath);
+      } else {
+        await mkdir(dest, { recursive: true });
+        await copyFile(srcPath, destPath);
       }
     }
   }
 
-  try {
-    await walk(pagesDir);
-    return pages;
-  } catch (error) {
-    if (error.code === "ENOENT") {
-      return [];
-    }
-    throw error;
-  }
+  await copyRecursive(publicDir, outDir);
 }
 
-/**
- * Generate UnoCSS file from built HTML files
- * @param {string} outputDir - Output directory containing HTML files
- * @param {boolean} silent - Suppress console output
- * @returns {Promise<boolean>} True if CSS was generated
- */
-async function generateUnoCSSFile(outputDir, silent = false) {
-  const outputDirAbs = path.resolve(process.cwd(), outputDir);
+async function runBuildCommand() {
+  // Check for help flag
+  if (args.includes("--help") || args.includes("-h")) {
+    console.log(`
+Usage: ono build [input] [options]
 
-  // Find all HTML files
-  const htmlFiles = [];
+Build JSX files to static HTML
 
-  async function findHTMLFiles(dir) {
-    const entries = await fs.readdir(dir, { withFileTypes: true });
+Arguments:
+  input                  File or directory to build (default: pages)
 
-    for (const entry of entries) {
-      const fullPath = path.join(dir, entry.name);
+Options:
+  --output <dir>         Output directory (default: dist)
+  --help                 Show this help message
 
-      if (entry.isDirectory()) {
-        await findHTMLFiles(fullPath);
-      } else if (entry.isFile() && entry.name.endsWith(".html")) {
-        htmlFiles.push(fullPath);
-      }
-    }
+Examples:
+  ono build              Build all pages in pages/ directory
+  ono build pages/index.jsx   Build a single file
+  ono build --output build   Build to build/ directory
+`);
+    process.exit(0);
   }
 
-  try {
-    await findHTMLFiles(outputDirAbs);
-
-    if (htmlFiles.length === 0) {
-      return false;
-    }
+  // Filter out options to get the input argument
+  const nonOptionArgs = args.slice(1).filter(arg => !arg.startsWith("--"));
+  const input = nonOptionArgs[0] || "pages";
+  const outputDir = args.includes("--output")
+    ? args[args.indexOf("--output") + 1]
+    : "dist";
 
-    // Load UnoCSS config
-    const unoConfig = await loadUnoConfig(path.resolve(process.cwd(), "uno.config.js"));
+  const unocssConfig = await loadUnoConfig();
 
-    // Generate CSS from all HTML files
-    const css = await generateCSSFromFiles(htmlFiles, unoConfig);
+  // Check if input is a directory or a file
+  const inputPath = resolve(process.cwd(), input);
+  const inputStat = await stat(inputPath);
 
-    if (css) {
-      // Write CSS file
-      const cssPath = path.join(outputDirAbs, "uno.css");
-      await fs.writeFile(cssPath, css);
+  if (inputStat.isDirectory()) {
+    // Build all files in directory
+    await buildFiles(input, { outputDir, unocssConfig });
+  } else {
+    // Build single file
+    await buildFile(input, { outputDir, unocssConfig });
+  }
 
-      if (!silent) {
-        console.log(`\n⚡ Generated UnoCSS: uno.css`);
-      }
+  // Copy public files
+  await copyPublicFiles(outputDir);
 
-      return true;
-    }
+  // Generate UnoCSS
+  await generateUnoCSS({ outputDir, unocssConfig });
 
-    return false;
-  } catch (error) {
-    if (!silent) {
-      console.error(`Warning: UnoCSS generation failed: ${error.message}`);
-    }
-    return false;
-  }
+  console.log("\n✨ Build complete!");
 }
 
-/**
- * Copy public directory to output directory
- * @param {string} publicDir - Path to public directory
- * @param {string} outputDir - Path to output directory
- * @param {boolean} silent - Suppress console output
- * @returns {Promise<number>} Number of files copied
- */
-async function copyPublicFiles(publicDir, outputDir, silent = false) {
-  const publicDirAbs = path.resolve(process.cwd(), publicDir);
-  const outputDirAbs = path.resolve(process.cwd(), outputDir);
 
-  try {
-    // Check if public directory exists
-    await fs.access(publicDirAbs);
-  } catch (error) {
-    // Public directory doesn't exist, skip
-    return 0;
-  }
 
-  let fileCount = 0;
+async function runDevCommand() {
+  const input = args[1] || "pages";
+  const port = args.includes("--port")
+    ? parseInt(args[args.indexOf("--port") + 1])
+    : 3000;
+  const outputDir = args.includes("--output")
+    ? args[args.indexOf("--output") + 1]
+    : "dist";
 
-  async function copyRecursive(src, dest) {
-    const entries = await fs.readdir(src, { withFileTypes: true });
+  const unocssConfig = await loadUnoConfig();
 
-    for (const entry of entries) {
-      const srcPath = path.join(src, entry.name);
-      const destPath = path.join(dest, entry.name);
+  // Initial build
+  const inputPath = resolve(process.cwd(), input);
+  const inputStat = await stat(inputPath);
 
-      if (entry.isDirectory()) {
-        await fs.mkdir(destPath, { recursive: true });
-        await copyRecursive(srcPath, destPath);
-      } else {
-        await fs.copyFile(srcPath, destPath);
-        fileCount++;
-        if (!silent) {
-          const relativePath = path.relative(publicDirAbs, srcPath);
-          console.log(`📄 Copied: public/${relativePath}`);
-        }
-      }
-    }
+  if (inputStat.isDirectory()) {
+    await buildFiles(input, { outputDir, unocssConfig });
+  } else {
+    await buildFile(input, { outputDir, unocssConfig });
   }
 
-  await copyRecursive(publicDirAbs, outputDirAbs);
-  return fileCount;
-}
+  await copyPublicFiles(outputDir);
+  await generateUnoCSS({ outputDir, unocssConfig });
 
-/**
- * Build a JSX file to HTML
- * @param {string} inputFile - Path to input JSX file
- * @param {object} options - Build options
- * @param {boolean} options.liveReload - Inject live reload script
- * @param {boolean} options.silent - Suppress console output
- * @param {number} options.wsPort - WebSocket port for live reload
- * @param {string} options.outputDir - Custom output directory
- * @param {string} options.pagesDir - Pages directory for relative path calculation
- * @returns {Promise<{outputPath: string, html: string}>}
- */
-async function buildFile(inputFile, options = {}) {
-  const { liveReload = false, silent = false, wsPort = 35729, outputDir = "dist", pagesDir = null } = options;
-  const absolutePath = path.resolve(process.cwd(), inputFile);
+  // Create WebSocket server for live reload
+  const { wss, port: wsPort } = createWebSocketServer();
 
-  if (!silent) {
-    console.log(`Building ${inputFile}...`);
-  }
+  // Start dev server
+  const mode = inputStat.isDirectory() ? "pages" : "single";
+  const indexFile = inputStat.isFile()
+    ? relative(
+        outputDir,
+        (await buildFile(input, { outputDir, unocssConfig, silent: true }))
+          .outputPath
+      )
+    : "index.html";
 
-  // Bundle the JSX file
-  const bundledCode = await bundle(absolutePath);
-
-  // Create a temporary module to execute
-  // We need to inject our runtime inline (no external dependencies)
-  const codeWithRuntime = `
-// Inline JSX Runtime - No external dependencies required
-function flattenChildren(children) {
-  const result = [];
-  for (const child of children) {
-    if (child === null || child === undefined || typeof child === 'boolean') {
-      continue;
-    }
-    if (Array.isArray(child)) {
-      result.push(...flattenChildren(child));
+  let serverPort = port;
+  try {
+    const { server, app, port: actualPort } = await createDevServer({
+      outputDir,
+      port,
+      mode,
+      indexFile,
+    });
+    serverPort = actualPort;
+  } catch (error) {
+    if (error.code === "EADDRINUSE") {
+      serverPort = port + 1;
+      console.log(
+        `ℹ️  Port ${port} is busy, using port ${serverPort} instead`
+      );
+      await createDevServer({
+        outputDir,
+        port: serverPort,
+        mode,
+        indexFile,
+      });
     } else {
-      result.push(child);
-    }
-  }
-  return result;
-}
-
-function h(tag, props, ...children) {
-  return {
-    tag,
-    props: props || {},
-    children: flattenChildren(children)
-  };
-}
-
-${bundledCode}
-`;
-
-  // Write to temporary file
-  const tmpFile = path.join(process.cwd(), ".mini-jsx-tmp.js");
-  await fs.writeFile(tmpFile, codeWithRuntime);
-
-  // Import and execute
-  const moduleUrl = `${tmpFile}?t=${Date.now()}`;
-  const module = await import(moduleUrl);
-  const App = module.default;
-
-  if (!App) {
-    throw new Error("No default export found in entry file");
-  }
-
-  // Render to HTML
-  const vnode = typeof App === "function" ? App({}) : App;
-  let html = renderToString(vnode);
-
-  // Inject live reload script if requested
-  if (liveReload) {
-    const liveReloadScript = `
-<script>
-(function() {
-  const ws = new WebSocket('ws://localhost:${wsPort}');
-  ws.onmessage = function(event) {
-    if (event.data === 'reload') {
-      console.log('Reloading...');
-      window.location.reload();
+      throw error;
     }
-  };
-  ws.onclose = function() {
-    console.log('Live reload disconnected. Retrying...');
-    setTimeout(function() { window.location.reload(); }, 1000);
-  };
-})();
-</script>`;
-    html = html.replace("</body>", `${liveReloadScript}\n</body>`);
   }
 
-  // Add DOCTYPE
-  const fullHtml = `<!DOCTYPE html>\n${html}`;
-
-  // Output to specified directory
-  const outDir = path.resolve(process.cwd(), outputDir);
-  await fs.mkdir(outDir, { recursive: true });
-
-  // Output file name - preserve directory structure if pagesDir is specified
-  let outputPath;
-  let relativeOutput;
-
-  if (pagesDir) {
-    // Preserve the directory structure from pages folder
-    const pagesDirAbs = path.resolve(process.cwd(), pagesDir);
-    const relativePath = path.relative(pagesDirAbs, absolutePath);
-    const outputRelative = relativePath.replace(/\.jsx$/, ".html");
-    outputPath = path.join(outDir, outputRelative);
-
-    // Create subdirectories if needed
-    await fs.mkdir(path.dirname(outputPath), { recursive: true });
-
-    relativeOutput = path.relative(process.cwd(), outputPath);
+  // Watch for changes
+  if (inputStat.isDirectory()) {
+    await watchFiles(input, {
+      outputDir,
+      unocssConfig,
+      wss,
+      onRebuild: async () => {
+        await copyPublicFiles(outputDir);
+      },
+    });
   } else {
-    // Single file mode - just use basename
-    const inputBasename = path.basename(inputFile, ".jsx");
-    const outputFilename = `${inputBasename}.html`;
-    outputPath = path.join(outDir, outputFilename);
-    relativeOutput = path.relative(process.cwd(), outputPath);
-  }
-
-  await fs.writeFile(outputPath, fullHtml);
-
-  // Clean up temp file
-  await fs.unlink(tmpFile);
-
-  if (!silent) {
-    console.log(`✓ Built successfully: ${relativeOutput}`);
-  }
-
-  return { outputPath, html: fullHtml };
+    await watchFile(input, {
+      outputDir,
+      unocssConfig,
+      wss,
+      onRebuild: async () => {
+        await copyPublicFiles(outputDir);
+      },
+    });
+  }
+
+  console.log(`\n🚀 Server running at http://localhost:${serverPort}`);
+  console.log(`📝 Serving: ${input}/ → ${outputDir}/`);
 }
 
-async function main() {
-  const args = process.argv.slice(2);
-  const opts = parseArgs(args);
 
-  // Show version
-  if (opts.version) {
-    const pkg = JSON.parse(
-      await fs.readFile(new URL("../package.json", import.meta.url), "utf-8")
-    );
-    console.log(`ono v${pkg.version}`);
-    process.exit(0);
-  }
 
-  // Show help
-  if (args.length === 0 || opts.help) {
-    console.log(`
-Ono - A lightweight JSX library for static site generation
+function showHelp() {
+  console.log(`
+Ono - Minimalist SSG Framework
 
 Usage:
-  ono init [dir]                  Initialize a new Ono project
-  ono build <file|dir> [options]  Build JSX file(s) to HTML
-  ono dev <file|dir> [options]    Start dev server with live reload
+  ono <command> [options]
 
-Arguments:
-  dir                      Project directory (default: current directory)
-  file                     Single JSX file to build/serve
-  pages                    Pages directory (default: pages/)
+Commands:
+  build [input]          Build JSX files to static HTML
+                         input: file or directory (default: pages)
+
+  dev [input]            Build, watch, and serve with live reload
+                         input: file or directory (default: pages)
 
 Options:
-  -w, --watch              Watch for changes and rebuild (build only)
-  -p, --port <port>        Port number (default: 3000) (dev only)
-  -o, --output <dir>       Output directory (default: dist)
-  -h, --help               Show this help message
-  -v, --version            Show version number
+  --output <dir>         Output directory (default: dist)
+  --port <number>        Server port (default: 3000)
+  --help                 Show this help message
 
 Examples:
-  # Initialize new project
-  ono init
-  ono init my-project
-
-  # Single file mode
-  ono build example/index.jsx
-  ono build example/index.jsx --watch
-  ono dev example/index.jsx
-
-  # Pages mode (build all .jsx files in directory)
-  ono build pages
-  ono build pages --watch
-  ono dev pages
-  ono dev          # Same as: ono dev pages
-
-  # Custom options
-  ono build pages -o public
-  ono dev pages -p 8080
-    `);
-    process.exit(0);
-  }
-
-  const command = opts._[0];
-  const inputFile = opts._[1];
-
-  if (command === "init") {
-    const projectDir = inputFile || ".";
-    const projectPath = path.resolve(process.cwd(), projectDir);
-
-    try {
-      // Check if directory exists and is not empty
-      try {
-        const files = await fs.readdir(projectPath);
-        if (files.length > 0 && projectDir !== ".") {
-          console.error(`Error: Directory ${projectDir} is not empty`);
-          process.exit(1);
-        }
-      } catch (error) {
-        if (error.code === "ENOENT") {
-          // Directory doesn't exist, create it
-          await fs.mkdir(projectPath, { recursive: true });
-        } else {
-          throw error;
-        }
-      }
-
-      console.log(`\n🚀 Initializing Ono project in ${projectDir === "." ? "current directory" : projectDir}...\n`);
-
-      // Create directory structure
-      await fs.mkdir(path.join(projectPath, "pages"), { recursive: true });
-      await fs.mkdir(path.join(projectPath, "components"), { recursive: true });
-      await fs.mkdir(path.join(projectPath, "public", "css"), { recursive: true });
-
-      // Create Layout.jsx
-      const layoutContent = `// Layout component with slot support
-export default function Layout(props) {
-  return (
-    <html lang="en">
-      <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>{props.title || "Ono Site"}</title>
-        <link rel="stylesheet" href="/uno.css" />
-        <link rel="stylesheet" href="/css/style.css" />
-      </head>
-      <body class="font-sans max-w-800px mx-auto px-8 py-8 leading-relaxed">
-        <header class="mb-8 pb-4 border-b-2 border-gray-200">
-          <h1 class="text-3xl font-bold">{props.title}</h1>
-          {props.header}
-        </header>
-        <main>
-          {props.children}
-        </main>
-        <footer class="mt-12 pt-4 border-t border-gray-200 text-secondary text-sm">
-          {props.footer || <p>© 2025 Ono</p>}
-        </footer>
-      </body>
-    </html>
-  );
-}
-`;
-      await fs.writeFile(path.join(projectPath, "components", "Layout.jsx"), layoutContent);
-
-      // Create Hello.jsx component
-      const helloContent = `export default function Hello(props) {
-  return (
-    <div class="p-6 bg-blue-50 rounded-lg border-2 border-blue-200">
-      <h2 class="text-2xl font-semibold text-blue-800 mb-2">
-        Hello, {props.name || "World"}!
-      </h2>
-      <p class="text-blue-600">
-        This is a reusable component. Edit components/Hello.jsx to customize it.
-      </p>
-    </div>
-  );
+  ono build              Build all pages in pages/ directory
+  ono build pages/index.jsx   Build a single file
+  ono dev                Start dev server with live reload
+  ono dev --port 8080    Start dev server on port 8080
+`);
 }
-`;
-      await fs.writeFile(path.join(projectPath, "components", "Hello.jsx"), helloContent);
-
-      // Create index.jsx
-      const indexContent = `import Layout from "../components/Layout.jsx";
-import Hello from "../components/Hello.jsx";
-
-export default function Home() {
-  return (
-    <Layout title="Welcome to Ono">
-      <Hello name="Developer" />
-
-      <div class="mt-8 space-y-6">
-        <section>
-          <h2 class="text-2xl font-bold mb-4">Getting Started</h2>
-          <p class="mb-4 text-lg">
-            You've successfully initialized an Ono project! Here's what you can do next:
-          </p>
-          <ul class="list-disc ml-6 space-y-2">
-            <li>Edit <code class="bg-gray-100 px-2 py-1 rounded text-sm">pages/index.jsx</code> to customize this page</li>
-            <li>Create new pages in the <code class="bg-gray-100 px-2 py-1 rounded text-sm">pages/</code> directory</li>
-            <li>Add components to <code class="bg-gray-100 px-2 py-1 rounded text-sm">components/</code></li>
-            <li>Put static assets in <code class="bg-gray-100 px-2 py-1 rounded text-sm">public/</code></li>
-          </ul>
-        </section>
-
-        <section>
-          <h2 class="text-2xl font-bold mb-4">Commands</h2>
-          <div class="space-y-2">
-            <div class="p-4 bg-gray-50 rounded border border-gray-200">
-              <code class="text-green-600 font-semibold">ono dev</code>
-              <p class="text-sm text-secondary mt-1">Start development server with live reload</p>
-            </div>
-            <div class="p-4 bg-gray-50 rounded border border-gray-200">
-              <code class="text-green-600 font-semibold">ono build pages</code>
-              <p class="text-sm text-secondary mt-1">Build your site to the dist/ directory</p>
-            </div>
-          </div>
-        </section>
-
-        <section>
-          <h2 class="text-2xl font-bold mb-4">Features</h2>
-          <div class="grid grid-cols-2 gap-4">
-            <div class="p-4 border border-gray-200 rounded">
-              <h3 class="font-semibold mb-2">🎨 UnoCSS</h3>
-              <p class="text-sm text-secondary">Atomic CSS with Tailwind-compatible utilities</p>
-            </div>
-            <div class="p-4 border border-gray-200 rounded">
-              <h3 class="font-semibold mb-2">⚡ Live Reload</h3>
-              <p class="text-sm text-secondary">Instant updates during development</p>
-            </div>
-            <div class="p-4 border border-gray-200 rounded">
-              <h3 class="font-semibold mb-2">📦 Component Based</h3>
-              <p class="text-sm text-secondary">Reusable JSX components</p>
-            </div>
-            <div class="p-4 border border-gray-200 rounded">
-              <h3 class="font-semibold mb-2">🚀 Static Output</h3>
-              <p class="text-sm text-secondary">Fast, SEO-friendly HTML</p>
-            </div>
-          </div>
-        </section>
-      </div>
-    </Layout>
-  );
-}
-`;
-      await fs.writeFile(path.join(projectPath, "pages", "index.jsx"), indexContent);
 
-      // Create style.css
-      const styleContent = `/* Custom styles for your Ono site */
-/* UnoCSS utilities will be automatically generated in uno.css */
+// Main CLI handler
+(async () => {
+  try {
+    if (!command || command === "--help" || command === "-h") {
+      showHelp();
+      process.exit(0);
+    }
 
-body {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+    switch (command) {
+      case "build":
+        await runBuildCommand();
+        break;
 
-/* Add your custom styles here */
-`;
-      await fs.writeFile(path.join(projectPath, "public", "css", "style.css"), styleContent);
-
-      // Create .gitignore
-      const gitignoreContent = `# Build output
-dist/
-.mini-jsx-tmp.js
-
-# Dependencies
-node_modules/
-
-# Environment variables
-.env
-.env.local
-`;
-      await fs.writeFile(path.join(projectPath, ".gitignore"), gitignoreContent);
-
-      // Create package.json
-      const projectName = projectDir === "." ? path.basename(projectPath) : projectDir;
-      const packageJsonContent = {
-        name: projectName,
-        version: "0.1.0",
-        type: "module",
-        scripts: {
-          dev: "ono dev",
-          build: "ono build pages",
-          "build:watch": "ono build pages --watch"
-        },
-        devDependencies: {}
-      };
-      await fs.writeFile(
-        path.join(projectPath, "package.json"),
-        JSON.stringify(packageJsonContent, null, 2) + "\n"
-      );
+      case "dev":
+        await runDevCommand();
+        break;
 
-      console.log("✅ Created project structure:");
-      console.log("   pages/");
-      console.log("   ├── index.jsx");
-      console.log("   components/");
-      console.log("   ├── Layout.jsx");
-      console.log("   ├── Hello.jsx");
-      console.log("   public/");
-      console.log("   ├── css/");
-      console.log("   │   └── style.css");
-      console.log("   package.json");
-      console.log("   .gitignore");
-      console.log("");
-      console.log("🎉 Project initialized successfully!");
-      console.log("");
-      console.log("Next steps:");
-      if (projectDir !== ".") {
-        console.log(`  cd ${projectDir}`);
-      }
-      console.log("  npm run dev          # Start development server");
-      console.log("  npm run build        # Build for production");
-      console.log("");
-      console.log("Or use ono directly:");
-      console.log("  ono dev         # Start development server");
-      console.log("  ono build pages # Build for production");
-      console.log("");
-    } catch (error) {
-      console.error(`Error: ${error.message}`);
-      if (error.stack) {
-        console.error(error.stack);
-      }
-      process.exit(1);
-    }
-  } else if (command === "build") {
-    const buildOptions = {
-      outputDir: opts.output || "dist",
-    };
-
-    try {
-      // Check if inputFile is a directory (pages mode)
-      const isDirectory = inputFile && (await fs.stat(path.resolve(process.cwd(), inputFile)).catch(() => null))?.isDirectory();
-
-      if (isDirectory || inputFile === "pages" || !inputFile) {
-        // Pages mode - build all pages in directory
-        const pagesDir = inputFile || "pages";
-        const pagesDirAbs = path.resolve(process.cwd(), pagesDir);
-
-        const pages = await discoverPages(pagesDirAbs);
-
-        if (pages.length === 0) {
-          console.error(`Error: No JSX files found in ${pagesDir}/`);
-          process.exit(1);
-        }
-
-        console.log(`Found ${pages.length} page(s) in ${pagesDir}/\n`);
-
-        if (opts.watch) {
-          // Initial build all pages
-          for (const page of pages) {
-            await buildFile(page, { ...buildOptions, pagesDir: pagesDirAbs });
-          }
-
-          // Copy public files
-          const publicCount = await copyPublicFiles("public", buildOptions.outputDir);
-          if (publicCount > 0) {
-            console.log(`\n📦 Copied ${publicCount} file(s) from public/\n`);
-          }
-
-          // Generate UnoCSS
-          await generateUnoCSSFile(buildOptions.outputDir);
-
-          console.log(`👀 Watching for changes in ${pagesDir}/ and public/...`);
-          console.log("Press Ctrl+C to stop\n");
-
-          const { watch } = await import("node:fs");
-
-          // Watch pages directory
-          watch(pagesDirAbs, { recursive: true }, async (_eventType, filename) => {
-            if (filename && filename.endsWith(".jsx")) {
-              const changedFile = path.join(pagesDirAbs, filename);
-              try {
-                await buildFile(changedFile, { ...buildOptions, pagesDir: pagesDirAbs, silent: true });
-                await generateUnoCSSFile(buildOptions.outputDir, true);
-                console.log(`✓ Rebuilt: ${filename}`);
-              } catch (error) {
-                console.error(`✗ Build error: ${error.message}`);
-              }
-            }
-          });
-
-          // Watch public directory
-          const publicDirAbs = path.resolve(process.cwd(), "public");
-          try {
-            await fs.access(publicDirAbs);
-            watch(publicDirAbs, { recursive: true }, async (_eventType, filename) => {
-              if (filename) {
-                try {
-                  await copyPublicFiles("public", buildOptions.outputDir, true);
-                  console.log(`✓ Copied: public/${filename}`);
-                } catch (error) {
-                  console.error(`✗ Copy error: ${error.message}`);
-                }
-              }
-            });
-          } catch {
-            // Public directory doesn't exist, skip watching
-          }
-
-          process.on("SIGINT", () => {
-            console.log("\n\n👋 Shutting down...");
-            process.exit(0);
-          });
-        } else {
-          // Build all pages
-          for (const page of pages) {
-            await buildFile(page, { ...buildOptions, pagesDir: pagesDirAbs });
-          }
-
-          // Copy public files
-          const publicCount = await copyPublicFiles("public", buildOptions.outputDir);
-          if (publicCount > 0) {
-            console.log(`\n📦 Copied ${publicCount} file(s) from public/`);
-          }
-
-          // Generate UnoCSS
-          await generateUnoCSSFile(buildOptions.outputDir);
-        }
-      } else if (inputFile) {
-        // Single file mode
-        if (opts.watch) {
-          // Initial build
-          await buildFile(inputFile, buildOptions);
-
-          // Generate UnoCSS
-          await generateUnoCSSFile(buildOptions.outputDir);
-
-          // Watch for changes
-          const absolutePath = path.resolve(process.cwd(), inputFile);
-          const watchDir = path.dirname(absolutePath);
-
-          console.log(`\n👀 Watching for changes in ${watchDir}...`);
-          console.log("Press Ctrl+C to stop\n");
-
-          const { watch } = await import("node:fs");
-          watch(watchDir, { recursive: true }, async (_eventType, filename) => {
-            if (filename && filename.endsWith(".jsx")) {
-              try {
-                await buildFile(inputFile, { ...buildOptions, silent: true });
-                await generateUnoCSSFile(buildOptions.outputDir, true);
-                console.log(`✓ Rebuilt: ${filename}`);
-              } catch (error) {
-                console.error(`✗ Build error: ${error.message}`);
-              }
-            }
-          });
-
-          process.on("SIGINT", () => {
-            console.log("\n\n👋 Shutting down...");
-            process.exit(0);
-          });
-        } else {
-          // Single build
-          await buildFile(inputFile, buildOptions);
-
-          // Generate UnoCSS
-          await generateUnoCSSFile(buildOptions.outputDir);
-        }
-      } else {
-        console.error("Error: Please specify a file or pages directory to build");
-        console.error("Usage: mini-jsx build <file|pages> [options]");
+      default:
+        console.error(`Unknown command: ${command}`);
+        console.error('Run "ono --help" for usage information');
         process.exit(1);
-      }
-    } catch (error) {
-      console.error(`Error: ${error.message}`);
-      if (error.stack) {
-        console.error(error.stack);
-      }
-      process.exit(1);
     }
-  } else if (command === "dev") {
-    const requestedPort = opts.port || 3000;
-    const outputDir = opts.output || "dist";
-
-    try {
-      // Check if inputFile is a directory (pages mode)
-      const isDirectory = inputFile && (await fs.stat(path.resolve(process.cwd(), inputFile)).catch(() => null))?.isDirectory();
-      const isPages = isDirectory || inputFile === "pages" || !inputFile;
-
-      // Find available ports
-      const wsPort = await findAvailablePort(35729);
-      const httpPort = await findAvailablePort(requestedPort);
-
-      if (wsPort !== 35729) {
-        console.log(`ℹ️  WebSocket port 35729 is busy, using port ${wsPort} instead`);
-      }
-      if (httpPort !== requestedPort) {
-        console.log(`ℹ️  Port ${requestedPort} is busy, using port ${httpPort} instead`);
-      }
-
-      if (isPages) {
-        // Pages mode
-        const pagesDir = inputFile || "pages";
-        const pagesDirAbs = path.resolve(process.cwd(), pagesDir);
-        const pages = await discoverPages(pagesDirAbs);
-
-        if (pages.length === 0) {
-          console.error(`Error: No JSX files found in ${pagesDir}/`);
-          process.exit(1);
-        }
-
-        console.log(`Found ${pages.length} page(s) in ${pagesDir}/\n`);
-
-        // Initial build all pages
-        for (const page of pages) {
-          await buildFile(page, { liveReload: true, wsPort, outputDir, pagesDir: pagesDirAbs });
-        }
-
-        // Copy public files
-        const publicCount = await copyPublicFiles("public", outputDir);
-        if (publicCount > 0) {
-          console.log(`\n📦 Copied ${publicCount} file(s) from public/\n`);
-        }
-
-        // Generate UnoCSS
-        await generateUnoCSSFile(outputDir);
-
-        // Setup WebSocket server
-        const wss = new WebSocketServer({ port: wsPort });
-        const clients = new Set();
-
-        wss.on("connection", (ws) => {
-          clients.add(ws);
-          ws.on("close", () => clients.delete(ws));
-        });
-
-        function notifyClients() {
-          clients.forEach((client) => {
-            if (client.readyState === 1) {
-              client.send("reload");
-            }
-          });
-        }
-
-        // Watch for changes
-        console.log(`👀 Watching for changes in ${pagesDir}/ and public/...`);
-
-        const { watch } = await import("node:fs");
-
-        // Watch pages directory
-        watch(pagesDirAbs, { recursive: true }, async (_eventType, filename) => {
-          if (filename && filename.endsWith(".jsx")) {
-            const changedFile = path.join(pagesDirAbs, filename);
-            try {
-              await buildFile(changedFile, { liveReload: true, silent: true, wsPort, outputDir, pagesDir: pagesDirAbs });
-              await generateUnoCSSFile(outputDir, true);
-              console.log(`✓ Rebuilt: ${filename}`);
-              notifyClients();
-            } catch (error) {
-              console.error(`✗ Build error: ${error.message}`);
-            }
-          }
-        });
-
-        // Watch public directory
-        const publicDirAbs = path.resolve(process.cwd(), "public");
-        try {
-          await fs.access(publicDirAbs);
-          watch(publicDirAbs, { recursive: true }, async (_eventType, filename) => {
-            if (filename) {
-              try {
-                await copyPublicFiles("public", outputDir, true);
-                console.log(`✓ Copied: public/${filename}`);
-                notifyClients();
-              } catch (error) {
-                console.error(`✗ Copy error: ${error.message}`);
-              }
-            }
-          });
-        } catch {
-          // Public directory doesn't exist, skip watching
-        }
-
-        // Create HTTP server
-        const outDir = path.resolve(process.cwd(), outputDir);
-
-        const server = http.createServer(async (req, res) => {
-          let requestPath = req.url === "/" ? "/index.html" : req.url;
-          let filePath = path.join(outDir, requestPath);
-
-          try {
-            const content = await fs.readFile(filePath);
-            const ext = path.extname(filePath);
-            const contentTypes = {
-              ".html": "text/html",
-              ".css": "text/css",
-              ".js": "text/javascript",
-              ".json": "application/json",
-              ".png": "image/png",
-              ".jpg": "image/jpeg",
-              ".gif": "image/gif",
-              ".svg": "image/svg+xml",
-            };
-
-            res.writeHead(200, { "Content-Type": contentTypes[ext] || "text/plain" });
-            res.end(content);
-          } catch (error) {
-            res.writeHead(404);
-            res.end("Not found");
-          }
-        });
-
-        server.listen(httpPort, () => {
-          console.log(`\n🚀 Server running at http://localhost:${httpPort}`);
-          console.log(`📝 Serving: ${pagesDir}/ → ${outputDir}/\n`);
-        });
-      } else {
-        // Single file mode
-        if (!inputFile) {
-          console.error("Error: Please specify a file or pages directory to serve");
-          console.error("Usage: mini-jsx dev <file|pages> [options]");
-          process.exit(1);
-        }
-
-        // Initial build with live reload
-        await buildFile(inputFile, { liveReload: true, wsPort, outputDir });
-
-        // Generate UnoCSS
-        await generateUnoCSSFile(outputDir);
-
-        // Setup WebSocket server for live reload
-        const wss = new WebSocketServer({ port: wsPort });
-        const clients = new Set();
-
-        wss.on("connection", (ws) => {
-          clients.add(ws);
-          ws.on("close", () => clients.delete(ws));
-        });
-
-        function notifyClients() {
-          clients.forEach((client) => {
-            if (client.readyState === 1) {
-              client.send("reload");
-            }
-          });
-        }
-
-        // Watch for changes
-        const absolutePath = path.resolve(process.cwd(), inputFile);
-        const watchDir = path.dirname(absolutePath);
-
-        console.log(`\n👀 Watching for changes in ${watchDir}...`);
-
-        const { watch } = await import("node:fs");
-        watch(watchDir, { recursive: true }, async (_eventType, filename) => {
-          if (filename && filename.endsWith(".jsx")) {
-            try {
-              await buildFile(inputFile, { liveReload: true, silent: true, wsPort, outputDir });
-              await generateUnoCSSFile(outputDir, true);
-              console.log(`✓ Rebuilt: ${filename}`);
-              notifyClients();
-            } catch (error) {
-              console.error(`✗ Build error: ${error.message}`);
-            }
-          }
-        });
-
-        // Create HTTP server
-        const outDir = path.resolve(process.cwd(), outputDir);
-        const inputBasename = path.basename(inputFile, ".jsx");
-        const outputFilename = `${inputBasename}.html`;
-        const relativeOutput = path.relative(process.cwd(), path.join(outDir, outputFilename));
-
-        const server = http.createServer(async (req, res) => {
-          let filePath = path.join(outDir, req.url === "/" ? outputFilename : req.url);
-
-          try {
-            const content = await fs.readFile(filePath);
-            const ext = path.extname(filePath);
-            const contentTypes = {
-              ".html": "text/html",
-              ".css": "text/css",
-              ".js": "text/javascript",
-              ".json": "application/json",
-              ".png": "image/png",
-              ".jpg": "image/jpeg",
-              ".gif": "image/gif",
-              ".svg": "image/svg+xml",
-            };
-
-            res.writeHead(200, { "Content-Type": contentTypes[ext] || "text/plain" });
-            res.end(content);
-          } catch (error) {
-            res.writeHead(404);
-            res.end("Not found");
-          }
-        });
-
-        server.listen(httpPort, () => {
-          console.log(`\n🚀 Server running at http://localhost:${httpPort}`);
-          console.log(`📝 Serving: ${relativeOutput}\n`);
-        });
-      }
-
-      // Keep process running
-      process.on("SIGINT", () => {
-        console.log("\n\n👋 Shutting down...");
-        process.exit(0);
-      });
-    } catch (error) {
-      console.error(`Error: ${error.message}`);
-      if (error.stack) {
-        console.error(error.stack);
-      }
-      process.exit(1);
+  } catch (error) {
+    console.error("Error:", error.message);
+    if (process.env.DEBUG) {
+      console.error(error);
     }
-  } else {
-    console.error(`Unknown command: ${command}`);
-    console.error('Run "mini-jsx --help" for usage information');
     process.exit(1);
   }
-}
-
-main();
+})();