@hashrock/ono 0.1.1 → 0.1.3

package/package.json

@@ -1,9 +1,19 @@
 {
   "name": "@hashrock/ono",
-  "version": "0.1.1",
-  "description": "A lightweight JSX library for static site generation with UnoCSS support",
+  "version": "0.1.3",
+  "description": "Minimalist SSG framework with JSX, powered by TypeScript's JSX transformer",
   "type": "module",
   "main": "src/jsx-runtime.js",
+  "exports": {
+    ".": "./src/jsx-runtime.js",
+    "./jsx-runtime": "./src/jsx-runtime.js",
+    "./renderer": "./src/renderer.js",
+    "./transformer": "./src/transformer.js",
+    "./bundler": "./src/bundler.js",
+    "./content": "./src/content.js",
+    "./browser/compiler": "./src/browser/compiler.js",
+    "./browser/unocss": "./src/browser/unocss.js"
+  },
   "bin": {
     "ono": "src/cli.js"
   },
@@ -14,7 +24,10 @@
   ],
   "scripts": {
     "test": "node --test test/**/*.test.js",
-    "test:watch": "node --test --watch test/**/*.test.js"
+    "test:watch": "node --test --watch test/**/*.test.js",
+    "test:snapshot": "node --test test/**/*.snapshot.test.js",
+    "test:snapshot:update": "UPDATE_SNAPSHOTS=true node --test test/**/*.snapshot.test.js",
+    "test:all": "npm run test && npm run test:snapshot"
   },
   "keywords": [
     "jsx",
@@ -38,9 +51,10 @@
   "engines": {
     "node": ">=18.0.0"
   },
-  "devDependencies": {},
   "dependencies": {
     "@unocss/preset-uno": "^66.5.4",
+    "h3": "^2.0.1-rc.5",
+    "marked": "^16.4.1",
     "typescript": "^5.9.3",
     "unocss": "^66.5.4",
     "ws": "^8.18.3"

package/src/browser/compiler.js

@@ -0,0 +1,253 @@
+/**
+ * Browser compiler utilities shared with the REPL worker.
+ */
+
+import { transformJSX } from '../transformer.js';
+import { renderToString } from '../renderer.js';
+import { h } from '../jsx-runtime.js';
+import { getUnoGenerator } from './unocss.js';
+
+function resolveImport(from, to) {
+  if (to.startsWith('./') || to.startsWith('../')) {
+    const fromParts = from.split('/').slice(0, -1);
+    const targetParts = to.split('/');
+    const resolved = [...fromParts];
+
+    for (const part of targetParts) {
+      if (!part || part === '.') continue;
+      if (part === '..') {
+        resolved.pop();
+      } else {
+        resolved.push(part);
+      }
+    }
+
+    return resolved.join('/');
+  }
+
+  return to;
+}
+
+function topoSortModules(files, entryPoint) {
+  const filenames = Object.keys(files);
+  const dependencyMap = new Map();
+  const importPattern = /import\s+(?:[\s\S]+?)?from\s+['"]([^'"]+)['"]/g;
+
+  for (const filename of filenames) {
+    const source = files[filename] || '';
+    const deps = [];
+    source.replace(importPattern, (match, specifier) => {
+      const resolved = resolveImport(filename, specifier);
+      if (files[resolved]) {
+        deps.push(resolved);
+      }
+      return match;
+    });
+    dependencyMap.set(filename, deps);
+  }
+
+  const visited = new Set();
+  const order = [];
+
+  const visit = (file) => {
+    if (!files[file] || visited.has(file)) return;
+    visited.add(file);
+    const deps = dependencyMap.get(file) || [];
+    for (const dep of deps) {
+      visit(dep);
+    }
+    order.push(file);
+  };
+
+  if (entryPoint) {
+    visit(entryPoint);
+  }
+
+  for (const filename of filenames) {
+    if (!visited.has(filename)) {
+      visit(filename);
+    }
+  }
+
+  return order;
+}
+
+function bundleModules(files, entryPoint) {
+  const order = topoSortModules(files, entryPoint);
+  let bundledCode = 'const __modules = {};\n';
+
+  for (const filename of order) {
+    const transformedCode = transformJSX(files[filename], filename);
+    let code = transformedCode;
+    const exportMappings = new Map();
+
+    const addExport = (exportName, localName = exportName) => {
+      if (!exportName || exportMappings.has(exportName)) return;
+      exportMappings.set(exportName, localName);
+    };
+
+    code = code.replace(/import\s+{([^}]+)}\s+from\s+['"]([^'"]+)['"]/g, (match, imports, path) => {
+      const resolvedPath = resolveImport(filename, path);
+      const importNames = imports.split(',').map(part => part.trim()).filter(Boolean);
+
+      return importNames
+        .map(name => {
+          const [local, alias] = name.split(/\s+as\s+/).map(token => token && token.trim());
+          const localName = alias || local;
+          const exportName = local;
+          return `const ${localName} = __modules['${resolvedPath}']['${exportName}'];`;
+        })
+        .join('\n');
+    });
+
+    code = code.replace(/import\s+(\w+)\s+from\s+['"]([^'"]+)['"]/g, (match, localName, path) => {
+      const resolvedPath = resolveImport(filename, path);
+      return `const ${localName} = __modules['${resolvedPath}']['default'];`;
+    });
+
+    code = code.replace(/import\s+\*\s+as\s+(\w+)\s+from\s+['"]([^'"]+)['"]/g, (match, localName, path) => {
+      const resolvedPath = resolveImport(filename, path);
+      return `const ${localName} = __modules['${resolvedPath}'];`;
+    });
+
+    code = code.replace(/export\s+default\s+function\s+([A-Za-z_$][\w$]*)/g, (match, name) => {
+      addExport('default', name);
+      return `function ${name}`;
+    });
+
+    code = code.replace(/export\s+default\s+([A-Za-z_$][\w$]*)/g, (match, name) => {
+      addExport('default', name);
+      return `${name}`;
+    });
+
+    code = code.replace(/export\s+(const|let|var)\s+([A-Za-z_$][\w$]*)/g, (match, kind, name) => {
+      addExport(name);
+      return `${kind} ${name}`;
+    });
+
+    code = code.replace(/export\s+function\s+([A-Za-z_$][\w$]*)/g, (match, name) => {
+      addExport(name);
+      return `function ${name}`;
+    });
+
+    code = code.replace(/export\s+class\s+([A-Za-z_$][\w$]*)/g, (match, name) => {
+      addExport(name);
+      return `class ${name}`;
+    });
+
+    code = code.replace(/export\s*{\s*([^}]+)\s*};?/g, (match, names) => {
+      names
+        .split(',')
+        .map(part => part.trim())
+        .filter(Boolean)
+        .forEach(part => {
+          const [local, alias] = part.split(/\s+as\s+/).map(token => token && token.trim());
+          addExport(alias || local, local);
+        });
+      return '';
+    });
+
+    code = code.replace(/export\s*{\s*};?/g, '');
+
+    if (filename === entryPoint) {
+      const functionMatches = code.matchAll(/function\s+([A-Za-z_$][\w$]*)/g);
+      for (const match of functionMatches) {
+        const name = match[1];
+        addExport(name);
+      }
+    }
+
+    const exportEntries = Array.from(exportMappings.entries()).map(([exportName, localName]) => {
+      if (exportName === 'default') {
+        return `'default': ${localName}`;
+      }
+      if (exportName === localName) {
+        return exportName;
+      }
+      return `'${exportName}': ${localName}`;
+    });
+
+    const exportsObject = exportEntries.length > 0 ? `{ ${exportEntries.join(', ')} }` : '{}';
+
+    bundledCode += `
+__modules['${filename}'] = (() => {
+  ${code}
+  return ${exportsObject};
+})();
+`;
+  }
+
+  bundledCode += `const __entry = __modules['${entryPoint}'];\n`;
+
+  return bundledCode;
+}
+
+function extractRenderCandidate(entryModule, entryCode) {
+  if (!entryModule || typeof entryModule !== 'object') {
+    return null;
+  }
+
+  const defaultExport = entryModule.default;
+  if (typeof defaultExport === 'function') {
+    return defaultExport;
+  }
+  if (defaultExport !== undefined) {
+    return () => defaultExport;
+  }
+
+  const lastCallMatch = entryCode.match(/([A-Za-z_$][\w$]*)\s*\([^)]*\)\s*$/m);
+  if (lastCallMatch) {
+    const lastCallName = lastCallMatch[1];
+    const candidate = entryModule[lastCallName];
+    if (typeof candidate === 'function') {
+      return candidate;
+    }
+    if (candidate !== undefined) {
+      return () => candidate;
+    }
+  }
+
+  const fallbackFunction = Object.values(entryModule).find(value => typeof value === 'function');
+  if (fallbackFunction) {
+    return fallbackFunction;
+  }
+
+  const firstValue = Object.values(entryModule)[0];
+  if (firstValue !== undefined) {
+    return () => firstValue;
+  }
+
+  return null;
+}
+
+function evaluateEntryModule(bundledCode) {
+  const getEntryModule = new Function('h', `
+    ${bundledCode}
+    return __entry;
+  `);
+
+  return getEntryModule(h);
+}
+
+export async function compileProject(files, entryPoint = 'index.jsx', options = {}) {
+  const bundled = bundleModules(files, entryPoint);
+  const entryModule = evaluateEntryModule(bundled);
+  const entryCode = files[entryPoint] || '';
+  const renderCandidate = extractRenderCandidate(entryModule, entryCode);
+
+  if (!renderCandidate) {
+    throw new Error('Unable to determine a render function in the entry module.');
+  }
+
+  const vnode = renderCandidate();
+  const html = renderToString(vnode);
+
+  let css = '';
+  if (options.enableUno !== false) {
+    const uno = await getUnoGenerator(options.unoConfig);
+    const result = await uno.generate(html, { preflights: true });
+    css = result.css;
+  }
+
+  return { html, css };
+}

package/src/browser/unocss.js

@@ -0,0 +1,29 @@
+/**
+ * Lightweight UnoCSS helpers for browser environments.
+ */
+
+import { createGenerator } from '@unocss/core';
+import { presetUno } from '@unocss/preset-uno';
+
+let cachedGeneratorKey = null;
+let cachedGeneratorPromise = null;
+
+function serializeConfig(config = {}) {
+  try {
+    return JSON.stringify(config);
+  } catch {
+    return '__dynamic__';
+  }
+}
+
+export async function getUnoGenerator(config = {}) {
+  const key = serializeConfig(config);
+  if (!cachedGeneratorPromise || cachedGeneratorKey !== key) {
+    cachedGeneratorKey = key;
+    cachedGeneratorPromise = createGenerator({
+      presets: [presetUno()],
+      ...config,
+    });
+  }
+  return cachedGeneratorPromise;
+}

package/src/builder.js

@@ -0,0 +1,316 @@
+/**
+ * Build utilities for Ono SSG
+ */
+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 { renderToString } from "./renderer.js";
+import { generateCSSFromFiles } from "./unocss.js";
+import { bundle } from "./bundler.js";
+
+/**
+ * Check if a route is dynamic (contains [param])
+ */
+export function isDynamicRoute(filePath) {
+  return /\[([^\]]+)\]/.test(filePath);
+}
+
+// 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);
+    }
+  }
+  return result;
+}
+function h(tag, props, ...children) {
+  return { tag, props: props || {}, children: flattenChildren(children) };
+}
+`;
+
+/**
+ * Build a single JSX file
+ */
+export async function buildFile(inputFile, options = {}) {
+  const { outputDir = "dist", unocssConfig, silent = false } = options;
+
+  const outDir = resolve(process.cwd(), outputDir);
+  const resolvedInput = resolve(process.cwd(), inputFile);
+
+  // Bundle the file with all its dependencies
+  const bundledCode = await bundle(resolvedInput);
+
+  // Add inline JSX runtime
+  const codeWithRuntime = INLINE_JSX_RUNTIME + bundledCode;
+
+  // 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 App = module.default;
+  if (!App) {
+    throw new Error(`No default export found in ${inputFile}`);
+  }
+
+  let vnode = typeof App === "function" ? App({}) : App;
+  if (vnode instanceof Promise) {
+    vnode = await vnode;
+  }
+
+  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);
+
+  await mkdir(dirname(outputPath), { recursive: true });
+  await writeFile(outputPath, html);
+
+  if (!silent) {
+    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);
+
+  // Bundle the file with all its dependencies
+  const bundledCode = await bundle(resolvedInput);
+
+  // Add inline JSX runtime
+  const codeWithRuntime = INLINE_JSX_RUNTIME + bundledCode;
+
+  // 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
+ */
+export async function buildFiles(inputPattern, options = {}) {
+  const { outputDir = "dist", unocssConfig, silent = false } = options;
+
+  const pagesDir = resolve(process.cwd(), inputPattern);
+  const files = await getAllJSXFiles(pagesDir);
+
+  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);
+    }
+  }
+
+  return results;
+}
+
+/**
+ * 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");
+
+  // Bundle the file with all its dependencies
+  const bundledCode = await bundle(file);
+
+  // Add inline JSX runtime
+  const codeWithRuntime = INLINE_JSX_RUNTIME + bundledCode;
+
+  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
+ */
+export async function generateUnoCSS(options = {}) {
+  const { outputDir = "dist", unocssConfig, silent = false } = options;
+
+  const outDir = resolve(process.cwd(), outputDir);
+
+  // Scan all HTML files
+  const htmlFiles = await getAllHTMLFiles(outDir);
+
+  if (htmlFiles.length === 0) {
+    return null;
+  }
+
+  // Generate CSS from HTML files
+  const css = await generateCSSFromFiles(htmlFiles, unocssConfig);
+
+  if (!css) {
+    return null;
+  }
+
+  const cssPath = join(outDir, "uno.css");
+  await writeFile(cssPath, css);
+
+  if (!silent) {
+    console.log(`\n⚡ Generated UnoCSS: ${relative(process.cwd(), cssPath)}`);
+  }
+
+  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;
+}

package/src/bundler.js

@@ -48,16 +48,24 @@ export async function bundle(entryFile) {
 }
 
 /**
- * Remove import statements from code
+ * Remove import statements from code (but keep package imports)
  * @param {string} code - JavaScript code
- * @returns {string} Code without imports
+ * @returns {string} Code with relative imports removed, package imports kept
  */
 function removeImports(code) {
-  // Remove import statements
+  // Remove only relative import statements, keep package imports
   const lines = code.split("\n");
   const filteredLines = lines.filter(line => {
     const trimmed = line.trim();
-    return !trimmed.startsWith("import ") && trimmed !== "import";
+    if (!trimmed.startsWith("import ")) return true;
+
+    // Keep package imports (not starting with . or /)
+    const importMatch = trimmed.match(/from\s+['"]([^'"]+)['"]/);
+    if (importMatch && !importMatch[1].startsWith('.') && !importMatch[1].startsWith('/')) {
+      return true; // Keep package import
+    }
+
+    return false; // Remove relative import
   });
 
   return filteredLines.join("\n");