@hashrock/ono 0.1.2 → 0.2.0

package/src/builder.js

@@ -1,63 +1,103 @@
 /**
  * Build utilities for Ono SSG
+ *
+ * Pages are bundled with the browser-compatible mini bundler
+ * (bundler.js + parser.js), written to a single temp file, and imported.
+ * Package (bare) imports are hoisted to the top of the bundle where
+ * Node's own resolution handles them.
  */
-import { readFile, writeFile, mkdir, readdir, stat } from "node:fs/promises";
-import { resolve, join, dirname, basename, relative, extname } from "node:path";
-import { transformJSX } from "./transformer.js";
+import { readFile, writeFile, mkdir, rm } from "node:fs/promises";
+import { resolve, join, dirname, basename, relative } from "node:path";
+import { pathToFileURL } from "node:url";
 import { renderToString } from "./renderer.js";
-import { generateCSSFromFiles } from "./unocss.js";
+import { generateCSSFromFiles, loadUnoConfig } from "./unocss.js";
+import { transformJSX } from "./transformer.js";
+import { bundle } from "./bundler.js";
+import { getFilesRecursively, isJSXFile, isHTMLFile } from "./utils.js";
+import { DIRS } from "./constants.js";
+
+/** Import statement for the real JSX runtime, injected into compiled pages */
+const JSX_RUNTIME_IMPORT = `import { h, Fragment } from ${JSON.stringify(
+  new URL("./jsx-runtime.js", import.meta.url).href,
+)};\n`;
+
+/** Directory (inside the project) that holds per-build temp files */
+const TEMP_DIR = ".ono";
+
+let buildCounter = 0;
 
 /**
- * Check if a route is dynamic (contains [param])
+ * Bundle an entry file into a single ES module source string
+ * @param {string} entryFile - Absolute path to the entry file
+ * @returns {Promise<string>} Bundled module source
  */
-export function isDynamicRoute(filePath) {
-  return /\[([^\]]+)\]/.test(filePath);
+export async function compileBundle(entryFile) {
+  const { code, entryExports, externalBindings } = await bundle({
+    entry: entryFile,
+    resolve: (specifier, fromId) => resolve(dirname(fromId), specifier),
+    load: async (id) => {
+      let source;
+      try {
+        source = await readFile(id, "utf-8");
+      } catch (error) {
+        throw new Error(`Cannot read file: ${id}\n${error.message}`);
+      }
+      return transformJSX(source, id);
+    },
+  });
+
+  // Provide h/Fragment unless a page pulls in the runtime itself
+  const header =
+    externalBindings.has("h") || externalBindings.has("Fragment") ? "" : JSX_RUNTIME_IMPORT;
+
+  // Re-export the entry's exports so the bundle behaves like the entry module
+  const footer = entryExports
+    .map((name) =>
+      name === "default"
+        ? "export default __ono_entry.default;"
+        : `export const ${name} = __ono_entry[${JSON.stringify(name)}];`,
+    )
+    .join("\n");
+
+  return `${header}${code}\n${footer}\n`;
 }
 
-// Inline JSX runtime for bundled output
-const INLINE_JSX_RUNTIME = `
-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));
-    } else {
-      result.push(child);
-    }
+/**
+ * Bundle a JSX entry file (with its local imports) and import it.
+ * A unique temp file per build doubles as ESM cache-busting for rebuilds.
+ * @param {string} entryFile - Path to the entry file
+ * @returns {Promise<any>} The imported module namespace
+ */
+export async function importJSXModule(entryFile) {
+  const resolvedEntry = resolve(process.cwd(), entryFile);
+  const code = await compileBundle(resolvedEntry);
+
+  const tempFile = join(process.cwd(), TEMP_DIR, `build-${process.pid}-${buildCounter++}.js`);
+  await mkdir(dirname(tempFile), { recursive: true });
+  await writeFile(tempFile, code);
+  try {
+    return await import(pathToFileURL(tempFile).href);
+  } finally {
+    await rm(tempFile, { force: true });
   }
-  return result;
 }
-function h(tag, props, ...children) {
-  return { tag, props: props || {}, children: flattenChildren(children) };
-}
-`;
 
 /**
  * Build a single JSX file
+ * @param {string} inputFile - Path to the JSX file
+ * @param {Object} options - Build options
+ * @param {string} [options.outputDir] - Output directory
+ * @param {string} [options.inputRoot] - Root directory the page paths are relative to
+ * @param {boolean} [options.silent] - Suppress console output
+ * @returns {Promise<{outputPath: string, html: string}>}
  */
 export async function buildFile(inputFile, options = {}) {
-  const { outputDir = "dist", unocssConfig, silent = false } = options;
+  const { outputDir = DIRS.OUTPUT, inputRoot, silent = false } = options;
 
   const outDir = resolve(process.cwd(), outputDir);
   const resolvedInput = resolve(process.cwd(), inputFile);
 
-  // Read and transform JSX
-  const jsx = await readFile(resolvedInput, "utf-8");
-  const transformed = await transformJSX(jsx, resolvedInput);
-
-  // Remove import statements for local components (they need to be bundled separately)
-  // For now, just add the h function inline
-  const codeWithRuntime = INLINE_JSX_RUNTIME + transformed;
-
-  // Write transformed JS temporarily
-  const tempFile = join(outDir, `_temp_${Date.now()}.js`);
-  await mkdir(dirname(tempFile), { recursive: true });
-  await writeFile(tempFile, codeWithRuntime);
-
-  // Import and render
-  const moduleUrl = new URL(`file://${tempFile}?t=${Date.now()}`);
-  const module = await import(moduleUrl.href);
+  const module = await importJSXModule(resolvedInput);
 
   const App = module.default;
   if (!App) {
@@ -71,10 +111,11 @@ export async function buildFile(inputFile, options = {}) {
 
   const html = renderToString(vnode);
 
-  // Determine output path
-  const baseName = basename(inputFile, ".jsx");
-  const outputFileName = baseName === "index" ? "index.html" : `${baseName}.html`;
-  const outputPath = join(outDir, outputFileName);
+  // Determine output path, preserving directory structure relative to inputRoot
+  const relPath = inputRoot
+    ? relative(resolve(process.cwd(), inputRoot), resolvedInput)
+    : basename(resolvedInput);
+  const outputPath = join(outDir, relPath.replace(/\.(jsx|tsx)$/, ".html"));
 
   await mkdir(dirname(outputPath), { recursive: true });
   await writeFile(outputPath, html);
@@ -83,198 +124,61 @@ export async function buildFile(inputFile, options = {}) {
     console.log(`✓ Built successfully: ${relative(process.cwd(), outputPath)}`);
   }
 
-  // Clean up temp file
-  await import("node:fs/promises").then((fs) => fs.unlink(tempFile).catch(() => {}));
-
   return { outputPath, html };
 }
 
-/**
- * Build a dynamic route (e.g., [slug].jsx)
- */
-export async function buildDynamicRoute(inputFile, options = {}) {
-  const { outputDir = "dist", silent = false } = options;
-
-  const outDir = resolve(process.cwd(), outputDir);
-  const resolvedInput = resolve(process.cwd(), inputFile);
-
-  // Read and transform JSX
-  const jsx = await readFile(resolvedInput, "utf-8");
-  const transformed = await transformJSX(jsx, resolvedInput);
-
-  // Add inline JSX runtime
-  const codeWithRuntime = INLINE_JSX_RUNTIME + transformed;
-
-  // Write transformed JS temporarily
-  const tempFile = join(outDir, `_temp_${Date.now()}.js`);
-  await mkdir(dirname(tempFile), { recursive: true });
-  await writeFile(tempFile, codeWithRuntime);
-
-  // Import module
-  const moduleUrl = new URL(`file://${tempFile}?t=${Date.now()}`);
-  const module = await import(moduleUrl.href);
-
-  if (!module.getStaticPaths) {
-    throw new Error(
-      `Dynamic route ${inputFile} must export a getStaticPaths function`
-    );
-  }
-
-  const pathsData = await module.getStaticPaths();
-  const paths = Array.isArray(pathsData) ? pathsData : pathsData.paths || [];
-
-  const App = module.default;
-  if (!App) {
-    throw new Error(`No default export found in ${inputFile}`);
-  }
-
-  const outputs = [];
-
-  for (const pathData of paths) {
-    const params = pathData.params || {};
-
-    let vnode = typeof App === "function" ? App({ params }) : App;
-    if (vnode instanceof Promise) {
-      vnode = await vnode;
-    }
-
-    const html = renderToString(vnode);
-
-    // Determine output path from params
-    const routeDir = dirname(relative(join(process.cwd(), "pages"), resolvedInput));
-    const fileName = basename(resolvedInput, ".jsx");
-
-    // Replace [param] with actual value
-    let outputPath = fileName;
-    for (const [key, value] of Object.entries(params)) {
-      outputPath = outputPath.replace(`[${key}]`, value);
-    }
-
-    const fullOutputPath = join(
-      outDir,
-      routeDir === "." ? "" : routeDir,
-      `${outputPath}.html`
-    );
-
-    await mkdir(dirname(fullOutputPath), { recursive: true });
-    await writeFile(fullOutputPath, html);
-
-    outputs.push({ outputPath: fullOutputPath, html, params });
-
-    if (!silent) {
-      console.log(`  ✓ ${relative(process.cwd(), fullOutputPath)}`);
-    }
-  }
-
-  // Clean up temp file
-  await import("node:fs/promises").then((fs) => fs.unlink(tempFile).catch(() => {}));
-
-  return outputs;
-}
-
 /**
  * Build multiple JSX files
+ * @param {string} inputPattern - Input directory path
+ * @param {Object} options - Build options
+ * @param {string} [options.outputDir] - Output directory
+ * @param {boolean} [options.silent] - Suppress console output
+ * @returns {Promise<Array<{outputPath: string, html: string}>>}
  */
 export async function buildFiles(inputPattern, options = {}) {
-  const { outputDir = "dist", unocssConfig, silent = false } = options;
+  const { outputDir = DIRS.OUTPUT, silent = false } = options;
 
   const pagesDir = resolve(process.cwd(), inputPattern);
-  const files = await getAllJSXFiles(pagesDir);
+  const files = await getFilesRecursively(pagesDir, isJSXFile);
 
   if (!silent) {
     console.log(`Found ${files.length} page(s) in ${inputPattern}/\n`);
-  }
-
-  const results = [];
-
-  for (const file of files) {
-    if (isDynamicRoute(file)) {
-      if (!silent) {
-        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)...`);
-      }
-      const outputs = await buildDynamicRoute(file, { outputDir, silent: true });
-      results.push(...outputs);
-    } else {
-      if (!silent) {
-        console.log(`Building ${relative(process.cwd(), file)}...`);
-      }
-      const result = await buildFile(file, { outputDir, unocssConfig, silent: true });
-      results.push(result);
+    for (const file of files) {
+      console.log(`Building ${relative(process.cwd(), file)}...`);
     }
   }
 
-  return results;
+  return Promise.all(
+    files.map((file) =>
+      buildFile(file, { outputDir, inputRoot: pagesDir, silent: true }),
+    ),
+  );
 }
 
 /**
- * Get all JSX files recursively
- */
-async function getAllJSXFiles(dir) {
-  const files = [];
-  const entries = await readdir(dir, { withFileTypes: true });
-
-  for (const entry of entries) {
-    const fullPath = join(dir, entry.name);
-
-    if (entry.isDirectory()) {
-      const subFiles = await getAllJSXFiles(fullPath);
-      files.push(...subFiles);
-    } else if (entry.isFile() && entry.name.endsWith(".jsx")) {
-      files.push(fullPath);
-    }
-  }
-
-  return files;
-}
-
-/**
- * Helper to get paths from a dynamic route
- */
-/**
- * Helper to get paths from a dynamic route
- */
-export async function getDynamicRoutePaths(file) {
-  const outDir = resolve(process.cwd(), "dist");
-  const jsx = await readFile(file, "utf-8");
-  const transformed = await transformJSX(jsx, file);
-
-  // Add inline JSX runtime
-  const codeWithRuntime = INLINE_JSX_RUNTIME + transformed;
-
-  const tempFile = join(outDir, `_temp_paths_${Date.now()}.js`);
-  await mkdir(dirname(tempFile), { recursive: true });
-  await writeFile(tempFile, codeWithRuntime);
-
-  const moduleUrl = new URL(`file://${tempFile}?t=${Date.now()}`);
-  const module = await import(moduleUrl.href);
-
-  const pathsData = module.getStaticPaths ? await module.getStaticPaths() : [];
-
-  await import("node:fs/promises").then((fs) => fs.unlink(tempFile).catch(() => {}));
-
-  return pathsData;
-}
-
-/**
- * Generate UnoCSS file
+ * Generate UnoCSS file from the built HTML.
+ * Loads uno.config.js from the project root unless a config is passed in.
+ * @param {Object} options - Generation options
+ * @param {string} [options.outputDir] - Output directory
+ * @param {Object} [options.config] - UnoCSS configuration override
+ * @param {boolean} [options.silent] - Suppress console output
+ * @returns {Promise<string|null>} CSS file path or null
  */
 export async function generateUnoCSS(options = {}) {
-  const { outputDir = "dist", unocssConfig, silent = false } = options;
+  const { outputDir = DIRS.OUTPUT, silent = false } = options;
+  const config = options.config ?? (await loadUnoConfig());
 
   const outDir = resolve(process.cwd(), outputDir);
 
   // Scan all HTML files
-  const htmlFiles = await getAllHTMLFiles(outDir);
+  const htmlFiles = await getFilesRecursively(outDir, isHTMLFile);
 
   if (htmlFiles.length === 0) {
     return null;
   }
 
   // Generate CSS from HTML files
-  const css = await generateCSSFromFiles(htmlFiles, unocssConfig);
+  const css = await generateCSSFromFiles(htmlFiles, config);
 
   if (!css) {
     return null;
@@ -289,29 +193,3 @@ export async function generateUnoCSS(options = {}) {
 
   return cssPath;
 }
-
-/**
- * Get all HTML files recursively
- */
-async function getAllHTMLFiles(dir) {
-  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 getAllHTMLFiles(fullPath);
-        files.push(...subFiles);
-      } else if (entry.isFile() && entry.name.endsWith(".html")) {
-        files.push(fullPath);
-      }
-    }
-  } catch (error) {
-    // Directory might not exist yet
-  }
-
-  return files;
-}