@hashrock/ono 0.1.2 → 0.2.0

package/src/server.js

@@ -1,99 +1,113 @@
 /**
- * Dev server using h3
+ * Dev server - static files plus SSE live reload, no dependencies.
+ *
+ * The server injects a small EventSource script into served HTML and
+ * exposes a reload() function that broadcasts to connected browsers.
  */
-import { createApp, createRouter, eventHandler, setResponseStatus, setResponseHeader, createError } from "h3";
-import { toNodeHandler } from "h3/node";
 import { createServer } from "node:http";
-import { resolve, join, extname } from "node:path";
+import { resolve, join, extname, normalize } from "node:path";
 import { readFile } from "node:fs/promises";
+import { DIRS, PORTS, MIME_TYPES } from "./constants.js";
+
+const RELOAD_PATH = "/__ono_reload";
+const RELOAD_SCRIPT = `<script>new EventSource("${RELOAD_PATH}").onmessage = () => location.reload();</script>`;
+
+/** @param {string} html */
+function injectReloadScript(html) {
+  if (/<\/body>/i.test(html)) {
+    return html.replace(/<\/body>/i, `${RELOAD_SCRIPT}</body>`);
+  }
+  return html + RELOAD_SCRIPT;
+}
 
 /**
  * Create a development server
- * @param {object} options - Server options
- * @param {string} options.outputDir - Output directory to serve
- * @param {number} options.port - HTTP port
- * @param {string} options.mode - Server mode: 'pages' or 'single'
- * @param {string} options.indexFile - Index file for single mode
- * @returns {Promise<object>} Server instance
+ * @param {Object} options - Server options
+ * @param {string} [options.outputDir] - Output directory to serve
+ * @param {number} [options.port] - HTTP port
+ * @param {string} [options.mode] - Server mode: 'pages' or 'single'
+ * @param {string} [options.indexFile] - Index file for single mode
+ * @returns {Promise<{server: import('http').Server, port: number, reload: () => void}>}
  */
 export async function createDevServer(options) {
-  const { outputDir = "dist", port = 3000, mode = "pages", indexFile = "index.html" } = options;
+  const { outputDir = DIRS.OUTPUT, port = PORTS.SERVER, mode = "pages", indexFile = "index.html" } = options;
 
   const outDir = resolve(process.cwd(), outputDir);
+  const clients = new Set();
 
-  const app = createApp();
+  const server = createServer(async (req, res) => {
+    const url = (req.url || "/").split("?")[0];
 
-  // Serve static files from output directory
-  app.use(
-    "/**",
-    eventHandler(async (event) => {
-      try {
-        const url = event.path || "/";
-        let filePath;
+    // SSE endpoint for live reload
+    if (url === RELOAD_PATH) {
+      res.writeHead(200, {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache",
+        Connection: "keep-alive",
+      });
+      res.write(": connected\n\n");
+      clients.add(res);
+      req.on("close", () => clients.delete(res));
+      return;
+    }
 
-        if (mode === "single") {
-          // Single file mode: serve specific file for root
-          if (url === "/" || url === "") {
-            filePath = join(outDir, indexFile);
-          } else {
-            filePath = join(outDir, url);
-          }
-        } else {
-          // Pages mode: default routing
-          if (url === "/" || url === "") {
-            filePath = join(outDir, "index.html");
-          } else {
-            filePath = join(outDir, url);
-          }
-        }
+    const rootFile = mode === "single" ? indexFile : "index.html";
+    const relPath = url === "/" ? rootFile : url.endsWith("/") ? join(url, "index.html") : url;
+    const filePath = normalize(join(outDir, relPath));
 
-        const content = await readFile(filePath);
-        const ext = extname(filePath);
+    if (!filePath.startsWith(outDir)) {
+      res.writeHead(403, { "Content-Type": "text/plain; charset=utf-8" });
+      res.end("Forbidden");
+      return;
+    }
 
-        const contentTypes = {
-          ".html": "text/html; charset=utf-8",
-          ".css": "text/css; charset=utf-8",
-          ".js": "text/javascript; charset=utf-8",
-          ".json": "application/json; charset=utf-8",
-          ".png": "image/png",
-          ".jpg": "image/jpeg",
-          ".jpeg": "image/jpeg",
-          ".gif": "image/gif",
-          ".svg": "image/svg+xml",
-          ".ico": "image/x-icon",
-          ".woff": "font/woff",
-          ".woff2": "font/woff2",
-          ".ttf": "font/ttf",
-          ".eot": "application/vnd.ms-fontobject",
-          ".webp": "image/webp",
-        };
+    try {
+      const content = await readFile(filePath);
+      const contentType =
+        MIME_TYPES[/** @type {keyof typeof MIME_TYPES} */ (extname(filePath))] ||
+        "application/octet-stream";
+      res.writeHead(200, { "Content-Type": contentType });
 
-        setResponseHeader(event, "Content-Type", contentTypes[ext] || "application/octet-stream");
-        return content;
-      } catch (error) {
+      if (filePath.endsWith(".html")) {
+        res.end(injectReloadScript(content.toString()));
+      } else {
+        res.end(content);
+      }
+    } catch (error) {
+      if (error.code === "ENOENT") {
+        res.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
+        res.end(`Not Found: ${url}`);
+      } else {
         console.error("Server error:", error);
-        if (error.code === "ENOENT") {
-          throw createError({
-            statusCode: 404,
-            statusMessage: "Not Found",
-            message: `File not found: ${error.path}`,
-          });
-        } else {
-          throw createError({
-            statusCode: 500,
-            statusMessage: "Internal Server Error",
-            message: error.message,
-          });
-        }
+        res.writeHead(500, { "Content-Type": "text/plain; charset=utf-8" });
+        res.end(`Server Error: ${error.message}`);
       }
-    })
-  );
+    }
+  });
 
-  const server = createServer(toNodeHandler(app));
+  /** Tell all connected browsers to reload */
+  const reload = () => {
+    for (const client of clients) {
+      client.write("data: reload\n\n");
+    }
+  };
 
-  return new Promise((resolve) => {
+  return new Promise((resolvePromise, rejectPromise) => {
+    /** @param {any} err */
+    const onError = (err) => {
+      if (err.code === "EADDRINUSE") {
+        const nextPort = port + 1;
+        console.log(`ℹ️  Port ${port} is busy, using port ${nextPort} instead`);
+        server.removeListener("error", onError);
+        createDevServer({ ...options, port: nextPort }).then(resolvePromise, rejectPromise);
+        return;
+      }
+      rejectPromise(err);
+    };
+    server.once("error", onError);
     server.listen(port, () => {
-      resolve({ server, app, port });
+      server.removeListener("error", onError);
+      resolvePromise({ server, port, reload });
     });
   });
 }

package/src/transformer.js

@@ -15,6 +15,7 @@ export function transformJSX(source, filename = 'input.jsx') {
   const compilerOptions = {
     jsx: ts.JsxEmit.React,
     jsxFactory: 'h',
+    jsxFragmentFactory: 'Fragment',
     module: ts.ModuleKind.ESNext,
     target: ts.ScriptTarget.ESNext,
     esModuleInterop: true,
@@ -28,21 +29,3 @@ export function transformJSX(source, filename = 'input.jsx') {
 
   return result.outputText;
 }
-
-/**
- * Transform JSX file and add necessary imports if not present
- * @param {string} source - JSX source code
- * @param {string} [filename='input.jsx'] - Optional filename
- * @returns {string} Transformed JavaScript with imports
- */
-export function transformJSXWithImports(source, filename = 'input.jsx') {
-  let transformedCode = transformJSX(source, filename);
-
-  // Check if the code uses 'h' function (JSX was transformed)
-  if (transformedCode.includes('h(') && !source.includes('import') && !source.includes('from')) {
-    // Add import statement for h function
-    transformedCode = `import { h } from './jsx-runtime.js';\n${transformedCode}`;
-  }
-
-  return transformedCode;
-}

package/src/unocss.js

@@ -1,60 +1,56 @@
 /**
- * UnoCSS Integration for Mini JSX
+ * UnoCSS Integration for Ono
  */
 
-import { createGenerator, presetUno } from "unocss";
+import { createGenerator } from "@unocss/core";
+import { presetUno } from "@unocss/preset-uno";
 import fs from "node:fs/promises";
+import { existsSync } from "node:fs";
 import path from "node:path";
-import { fileURLToPath } from "node:url";
+import { pathToFileURL } from "node:url";
+import { createRequire } from "node:module";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+const require = createRequire(import.meta.url);
 
 /**
  * Get the Tailwind reset CSS
  * @returns {Promise<string>} Reset CSS content
  */
 async function getResetCSS() {
-  const resetPath = path.resolve(__dirname, "../node_modules/@unocss/reset/tailwind.css");
   try {
-    return await fs.readFile(resetPath, "utf-8");
+    return await fs.readFile(require.resolve("@unocss/reset/tailwind.css"), "utf-8");
   } catch {
-    // Fallback: try to find it relative to the package
-    try {
-      const fallbackPath = new URL("../node_modules/@unocss/reset/tailwind.css", import.meta.url);
-      return await fs.readFile(fileURLToPath(fallbackPath), "utf-8");
-    } catch {
-      return "";
-    }
+    return "";
   }
 }
 
 /**
  * Create UnoCSS generator with default config
  * @param {object} userConfig - User configuration
- * @returns {Promise<object>} UnoCSS generator instance
+ * @returns {Promise<any>} UnoCSS generator instance
  */
 export async function createUnoGenerator(userConfig = {}) {
   return await createGenerator({
-    presets: [presetUno()],
+    presets: [/** @type {any} */ (presetUno())],
     ...userConfig,
   });
 }
 
 /**
- * Load UnoCSS config from file
- * @param {string} configPath - Path to config file
+ * Load UnoCSS config from file (defaults to uno.config.js in the project root).
+ * Returns an empty config when the file doesn't exist; errors inside an
+ * existing config file are NOT swallowed.
+ * @param {string} [configPath] - Path to config file
  * @returns {Promise<object>} Configuration object
  */
 export async function loadUnoConfig(configPath) {
-  try {
-    const configUrl = `file://${path.resolve(configPath)}?t=${Date.now()}`;
-    const module = await import(configUrl);
-    return module.default || module;
-  } catch (error) {
-    // Config file doesn't exist, return empty config
+  const resolved = path.resolve(process.cwd(), configPath || "uno.config.js");
+  if (!existsSync(resolved)) {
     return {};
   }
+  const configUrl = `${pathToFileURL(resolved).href}?t=${Date.now()}`;
+  const module = await import(configUrl);
+  return module.default || module;
 }
 
 /**

package/src/utils.js

@@ -0,0 +1,55 @@
+/**
+ * Shared utilities for Ono SSG
+ */
+import { readdir } from "node:fs/promises";
+import { join } from "node:path";
+
+/**
+ * Check if a filename has a JSX extension (.jsx or .tsx)
+ * @param {string} filename - The filename to check
+ * @returns {boolean} True if the file has a JSX extension
+ */
+export function isJSXFile(filename) {
+  return filename.endsWith(".jsx") || filename.endsWith(".tsx");
+}
+
+/**
+ * Check if a filename has an HTML extension
+ * @param {string} filename - The filename to check
+ * @returns {boolean} True if the file has an HTML extension
+ */
+export function isHTMLFile(filename) {
+  return filename.endsWith(".html");
+}
+
+/**
+ * Get all files matching a predicate recursively from a directory
+ * @param {string} dir - Directory to search
+ * @param {(filename: string) => boolean} predicate - Function to test filenames
+ * @returns {Promise<string[]>} Array of file paths
+ */
+export async function getFilesRecursively(dir, predicate) {
+  const files = [];
+
+  try {
+    const entries = await readdir(dir, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const fullPath = join(dir, entry.name);
+
+      if (entry.isDirectory()) {
+        const subFiles = await getFilesRecursively(fullPath, predicate);
+        files.push(...subFiles);
+      } else if (entry.isFile() && predicate(entry.name)) {
+        files.push(fullPath);
+      }
+    }
+  } catch (error) {
+    // Directory might not exist
+    if (error.code !== "ENOENT") {
+      throw error;
+    }
+  }
+
+  return files;
+}

package/src/watcher.js

@@ -2,166 +2,139 @@
  * File watcher utilities for Ono SSG
  */
 import { watch } from "node:fs";
-import { resolve, join, relative, extname } from "node:path";
-import { readdir } from "node:fs/promises";
-import { WebSocketServer } from "ws";
-import { buildFile, buildFiles, buildDynamicRoute, generateUnoCSS, isDynamicRoute, getDynamicRoutePaths } from "./builder.js";
+import { resolve, join, relative } from "node:path";
+import { buildFile, buildFiles, generateUnoCSS } from "./builder.js";
+import { generateBarrel } from "./barrels.js";
+import { isJSXFile } from "./utils.js";
+import { TIMING, DIRS } from "./constants.js";
 
 /**
- * Create a WebSocket server for live reload
+ * Create a debounced async runner that logs errors instead of throwing.
+ * @param {(...args: any[]) => Promise<void> | void} fn
+ * @param {number} [ms]
  */
-export function createWebSocketServer(port = 35729) {
-  let wss;
-  let actualPort = port;
-
-  try {
-    wss = new WebSocketServer({ port });
-  } catch (error) {
-    if (error.code === "EADDRINUSE") {
-      actualPort = port + 1;
-      console.log(`ℹ️  WebSocket port ${port} is busy, using port ${actualPort} instead`);
-      wss = new WebSocketServer({ port: actualPort });
-    } else {
-      throw error;
-    }
-  }
-
-  return { wss, port: actualPort };
+function debounce(fn, ms = TIMING.DEBOUNCE_MS) {
+  /** @type {ReturnType<typeof setTimeout> | undefined} */
+  let timeout;
+  /** @param {...any} args */
+  return (...args) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(async () => {
+      try {
+        await fn(...args);
+      } catch (error) {
+        console.error("❌ Build error:", error.message);
+      }
+    }, ms);
+  };
 }
 
 /**
- * Broadcast reload message to all connected clients
+ * Trigger onRebuild callback and browser reload.
+ * @param {{ onRebuild?: Function, reload?: Function }} opts
  */
-export function broadcastReload(wss) {
-  wss.clients.forEach((client) => {
-    if (client.readyState === 1) {
-      client.send("reload");
-    }
-  });
+async function afterRebuild({ onRebuild, reload }) {
+  if (onRebuild) await onRebuild();
+  if (reload) reload();
 }
 
 /**
  * Watch for file changes and rebuild
+ * @param {string} inputPattern - Input directory to watch
+ * @param {Object} options - Watch options
+ * @param {string} [options.outputDir] - Output directory
+ * @param {Function} [options.onRebuild] - Callback after rebuild
+ * @param {Function} [options.reload] - Live-reload broadcast from the dev server
+ * @returns {Promise<{watcher: any, publicWatcher?: any, barrelsWatcher?: any}>}
  */
 export async function watchFiles(inputPattern, options = {}) {
-  const { outputDir = "dist", unocssConfig, onRebuild, wss } = options;
+  const { outputDir = DIRS.OUTPUT, onRebuild, reload } = options;
 
   const pagesDir = resolve(process.cwd(), inputPattern);
-  const publicDir = resolve(process.cwd(), "public");
+  const buildOpts = { outputDir, inputRoot: pagesDir, silent: false };
+  const publicDir = resolve(process.cwd(), DIRS.PUBLIC);
+  const barrelsDir = resolve(process.cwd(), DIRS.BARRELS);
 
   console.log(`👀 Watching for changes in ${inputPattern}/ and public/...`);
 
-  // Debounce rebuilds
-  let rebuildTimeout;
-  const debouncedRebuild = async (file) => {
-    clearTimeout(rebuildTimeout);
-    rebuildTimeout = setTimeout(async () => {
-      try {
-        console.log(`\n📝 File changed: ${relative(process.cwd(), file)}`);
-        console.log("🔄 Rebuilding...\n");
-
-        if (isDynamicRoute(file)) {
-          const relativePath = relative(process.cwd(), file);
-          const pathsData = await getDynamicRoutePaths(file);
-          const count = Array.isArray(pathsData) ? pathsData.length : pathsData.paths?.length || 0;
-          console.log(`Building dynamic route ${relativePath} (${count} pages)...`);
-          await buildDynamicRoute(file, { outputDir, silent: true });
-        } else {
-          await buildFile(file, { outputDir, unocssConfig, silent: false });
-        }
-
-        await generateUnoCSS({ outputDir, unocssConfig, silent: false });
-
-        if (onRebuild) {
-          await onRebuild();
-        }
-
-        if (wss) {
-          broadcastReload(wss);
-        }
-      } catch (error) {
-        console.error("❌ Build error:", error.message);
-      }
-    }, 100);
-  };
+  const rebuildPage = debounce(async (file) => {
+    console.log(`\n📝 File changed: ${relative(process.cwd(), file)}`);
+    console.log("🔄 Rebuilding...\n");
+    await buildFile(file, buildOpts);
+    await generateUnoCSS({ outputDir });
+    await afterRebuild({ onRebuild, reload });
+  });
 
-  // Watch pages directory
-  const watcher = watch(pagesDir, { recursive: true }, async (eventType, filename) => {
-    if (filename && filename.endsWith(".jsx")) {
-      const filePath = join(pagesDir, filename);
-      await debouncedRebuild(filePath);
+  const rebuildAll = debounce(async (reason) => {
+    console.log(`\n📝 ${reason}`);
+    console.log("🔄 Rebuilding...\n");
+    await buildFiles(inputPattern, buildOpts);
+    await generateUnoCSS({ outputDir });
+    await afterRebuild({ onRebuild, reload });
+  });
+
+  const watcher = watch(pagesDir, { recursive: true }, (_eventType, filename) => {
+    if (filename && isJSXFile(filename)) {
+      rebuildPage(join(pagesDir, filename));
     }
   });
 
-  // Watch public directory if it exists
+  let publicWatcher;
   try {
-    const publicWatcher = watch(publicDir, { recursive: true }, async (eventType, filename) => {
-      if (filename) {
-        console.log(`\n📝 Public file changed: ${filename}`);
-        console.log("🔄 Rebuilding...\n");
-
-        // Rebuild all files to update references
-        await buildFiles(inputPattern, { outputDir, unocssConfig, silent: false });
-        await generateUnoCSS({ outputDir, unocssConfig, silent: false });
-
-        if (onRebuild) {
-          await onRebuild();
-        }
-
-        if (wss) {
-          broadcastReload(wss);
-        }
-      }
+    publicWatcher = watch(publicDir, { recursive: true }, (_eventType, filename) => {
+      if (filename) rebuildAll(`Public file changed: ${filename}`);
     });
-
-    return { watcher, publicWatcher };
-  } catch (error) {
+  } catch {
     // Public directory might not exist
-    return { watcher };
   }
+
+  const regenerateBarrel = debounce(async (barrelDir, filename) => {
+    console.log(`\n📝 Barrel file changed: ${filename}`);
+    console.log("🔄 Regenerating barrel...\n");
+    await generateBarrel(barrelDir);
+    await buildFiles(inputPattern, buildOpts);
+    await generateUnoCSS({ outputDir });
+    await afterRebuild({ onRebuild, reload });
+  });
+
+  let barrelsWatcher;
+  try {
+    barrelsWatcher = watch(barrelsDir, { recursive: true }, (_eventType, filename) => {
+      if (filename && isJSXFile(filename)) {
+        const barrelName = filename.split("/")[0];
+        regenerateBarrel(join(barrelsDir, barrelName), filename);
+      }
+    });
+  } catch {
+    // Barrels directory might not exist
+  }
+
+  return { watcher, publicWatcher, barrelsWatcher };
 }
 
 /**
  * Watch a single file for changes
+ * @param {string} inputFile - Input file to watch
+ * @param {Object} options - Watch options
+ * @param {string} [options.outputDir] - Output directory
+ * @param {Function} [options.onRebuild] - Callback after rebuild
+ * @param {Function} [options.reload] - Live-reload broadcast from the dev server
+ * @returns {Promise<{watcher: any}>}
  */
 export async function watchFile(inputFile, options = {}) {
-  const { outputDir = "dist", unocssConfig, onRebuild, wss } = options;
-
+  const { outputDir = DIRS.OUTPUT, onRebuild, reload } = options;
+  const buildOpts = { outputDir, silent: false };
   const resolvedInput = resolve(process.cwd(), inputFile);
 
   console.log(`👀 Watching for changes in ${inputFile}...`);
 
-  // Debounce rebuilds
-  let rebuildTimeout;
-  const debouncedRebuild = async () => {
-    clearTimeout(rebuildTimeout);
-    rebuildTimeout = setTimeout(async () => {
-      try {
-        console.log(`\n📝 File changed: ${inputFile}`);
-        console.log("🔄 Rebuilding...\n");
-
-        if (isDynamicRoute(inputFile)) {
-          await buildDynamicRoute(resolvedInput, { outputDir, silent: false });
-        } else {
-          await buildFile(resolvedInput, { outputDir, unocssConfig, silent: false });
-        }
-
-        await generateUnoCSS({ outputDir, unocssConfig, silent: false });
-
-        if (onRebuild) {
-          await onRebuild();
-        }
-
-        if (wss) {
-          broadcastReload(wss);
-        }
-      } catch (error) {
-        console.error("❌ Build error:", error.message);
-      }
-    }, 100);
-  };
-
-  const watcher = watch(resolvedInput, debouncedRebuild);
+  const rebuild = debounce(async () => {
+    console.log(`\n📝 File changed: ${inputFile}`);
+    console.log("🔄 Rebuilding...\n");
+    await buildFile(resolvedInput, buildOpts);
+    await generateUnoCSS({ outputDir });
+    await afterRebuild({ onRebuild, reload });
+  });
 
-  return { watcher };
+  return { watcher: watch(resolvedInput, rebuild) };
 }