@hashrock/ono 0.1.1 → 0.1.2

package/src/content.js

@@ -0,0 +1,272 @@
+import { readdir, readFile } from "node:fs/promises";
+import { join, relative, sep } from "node:path";
+import { marked } from "marked";
+
+/**
+ * Parse frontmatter from markdown content
+ * @param {string} content - Raw markdown content
+ * @returns {{ data: Object, content: string }} Parsed frontmatter and content
+ */
+function parseFrontmatter(content) {
+  const frontmatterRegex = /^---\s*\n([\s\S]*?)\n---\s*\n([\s\S]*)$/;
+  const match = content.match(frontmatterRegex);
+
+  if (!match) {
+    return { data: {}, content };
+  }
+
+  const [, frontmatterStr, markdownContent] = match;
+  const data = {};
+
+  // Simple YAML-like parser (supports basic key: value pairs)
+  const lines = frontmatterStr.split("\n");
+  let currentKey = null;
+  let arrayItems = [];
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed) continue;
+
+    // Array item
+    if (trimmed.startsWith("- ")) {
+      if (currentKey) {
+        arrayItems.push(trimmed.slice(2).trim());
+      }
+      continue;
+    }
+
+    // If we were collecting array items, save them
+    if (currentKey && arrayItems.length > 0) {
+      data[currentKey] = arrayItems;
+      arrayItems = [];
+      currentKey = null;
+    }
+
+    // Key-value pair
+    const colonIndex = trimmed.indexOf(":");
+    if (colonIndex > 0) {
+      const key = trimmed.slice(0, colonIndex).trim();
+      let value = trimmed.slice(colonIndex + 1).trim();
+
+      // Parse value types
+      if (value === "") {
+        // Empty value might indicate an array follows
+        currentKey = key;
+        continue;
+      } else if (value === "true") {
+        value = true;
+      } else if (value === "false") {
+        value = false;
+      } else if (value.startsWith("[") && value.endsWith("]")) {
+        // JSON array - parse with proper quoting for unquoted strings
+        try {
+          // First try parsing as-is (for properly quoted JSON)
+          value = JSON.parse(value);
+        } catch {
+          // If that fails, try parsing as YAML-style array [item1, item2]
+          try {
+            const items = value
+              .slice(1, -1) // Remove [ ]
+              .split(",")
+              .map((item) => item.trim())
+              .filter((item) => item.length > 0);
+            value = items;
+          } catch {
+            // Keep as string if all parsing fails
+          }
+        }
+      } else if (value.startsWith("{") && value.endsWith("}")) {
+        // JSON object
+        try {
+          value = JSON.parse(value);
+        } catch {
+          // Keep as string if parsing fails
+        }
+      } else if (/^\d{4}-\d{2}-\d{2}/.test(value)) {
+        // Date format
+        value = new Date(value);
+      } else if (/^\d+$/.test(value)) {
+        value = parseInt(value, 10);
+      } else if (/^\d+\.\d+$/.test(value)) {
+        value = parseFloat(value);
+      }
+
+      data[key] = value;
+      currentKey = null;
+    }
+  }
+
+  // Handle final array if exists
+  if (currentKey && arrayItems.length > 0) {
+    data[currentKey] = arrayItems;
+  }
+
+  return { data, content: markdownContent };
+}
+
+/**
+ * Validate data against schema
+ * @param {Object} data - Data to validate
+ * @param {Object} schema - Schema definition
+ * @returns {{ valid: boolean, errors: string[] }}
+ */
+function validateSchema(data, schema) {
+  const errors = [];
+
+  for (const [key, definition] of Object.entries(schema)) {
+    const value = data[key];
+
+    // Check required fields
+    if (definition.required && (value === undefined || value === null)) {
+      errors.push(`Missing required field: ${key}`);
+      continue;
+    }
+
+    // Skip validation if field is not present and not required
+    if (value === undefined || value === null) {
+      // Apply default if specified
+      if (definition.default !== undefined) {
+        data[key] = definition.default;
+      }
+      continue;
+    }
+
+    // Type validation
+    const actualType = Array.isArray(value) ? "array" : typeof value === "object" && value instanceof Date ? "date" : typeof value;
+
+    if (definition.type !== actualType) {
+      errors.push(
+        `Invalid type for ${key}: expected ${definition.type}, got ${actualType}`,
+      );
+      continue;
+    }
+
+    // Array item type validation
+    if (definition.type === "array" && definition.items) {
+      for (let i = 0; i < value.length; i++) {
+        const itemType = typeof value[i];
+        if (itemType !== definition.items) {
+          errors.push(
+            `Invalid array item type for ${key}[${i}]: expected ${definition.items}, got ${itemType}`,
+          );
+        }
+      }
+    }
+  }
+
+  return { valid: errors.length === 0, errors };
+}
+
+/**
+ * Generate slug from file path
+ * @param {string} filePath - File path relative to content directory
+ * @returns {string} Generated slug
+ */
+function generateSlug(filePath) {
+  return filePath
+    .replace(/\.md$/, "")
+    .split(sep)
+    .join("/");
+}
+
+/**
+ * Read all markdown files from a directory recursively
+ * @param {string} dir - Directory path
+ * @returns {Promise<string[]>} Array of file paths
+ */
+async function readMarkdownFiles(dir) {
+  const files = [];
+  const entries = await readdir(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...(await readMarkdownFiles(fullPath)));
+    } else if (entry.name.endsWith(".md")) {
+      files.push(fullPath);
+    }
+  }
+
+  return files;
+}
+
+/**
+ * Load content collection configuration
+ * @param {string} configPath - Path to content.config.js
+ * @returns {Promise<Object>} Configuration object
+ */
+async function loadConfig(configPath) {
+  const configFile = configPath || join(process.cwd(), "content.config.js");
+  try {
+    // Convert to file URL for proper import
+    const fileUrl = new URL(`file://${configFile}`);
+    const config = await import(fileUrl.href);
+    return config.collections || {};
+  } catch {
+    return {};
+  }
+}
+
+/**
+ * Get all entries from a collection
+ * @param {string} collection - Collection name
+ * @param {Function} [filter] - Optional filter function
+ * @returns {Promise<Array>} Array of collection entries
+ */
+export async function getCollection(collection, filter) {
+  const contentDir = join(process.cwd(), "content", collection);
+  const config = await loadConfig();
+  const schema = config[collection]?.schema;
+
+  try {
+    const files = await readMarkdownFiles(contentDir);
+    const entries = [];
+
+    for (const file of files) {
+      const content = await readFile(file, "utf-8");
+      const { data, content: markdown } = parseFrontmatter(content);
+
+      // Validate against schema if provided
+      if (schema) {
+        const validation = validateSchema(data, schema);
+        if (!validation.valid) {
+          console.warn(`Validation errors in ${file}:`, validation.errors);
+        }
+      }
+
+      const html = marked.parse(markdown);
+      const relativePath = relative(contentDir, file);
+      const slug = generateSlug(relativePath);
+
+      entries.push({
+        slug,
+        data,
+        html,
+        file,
+      });
+    }
+
+    // Apply filter if provided
+    if (filter) {
+      return entries.filter(filter);
+    }
+
+    return entries;
+  } catch (error) {
+    if (error.code === "ENOENT") {
+      return [];
+    }
+    throw error;
+  }
+}
+
+/**
+ * Get a single entry from a collection
+ * @param {string} collection - Collection name
+ * @param {string} slug - Entry slug
+ * @returns {Promise<Object|null>} Collection entry or null if not found
+ */
+export async function getEntry(collection, slug) {
+  const entries = await getCollection(collection);
+  return entries.find((entry) => entry.slug === slug) || null;
+}

package/src/jsx-runtime.js

@@ -41,5 +41,24 @@ export function createElement(tag, props, ...children) {
   };
 }
 
+/**
+ * JSX runtime function (react-jsx transform)
+ * @param {string|Function} tag - HTML tag name or component function
+ * @param {Object} props - Element properties/attributes (includes children)
+ * @returns {Object} VNode object
+ */
+export function jsx(tag, props) {
+  const { children, ...restProps } = props || {};
+  const childrenArray = children !== undefined ? (Array.isArray(children) ? children : [children]) : [];
+  return {
+    tag,
+    props: restProps,
+    children: flattenChildren(childrenArray)
+  };
+}
+
+// jsxs is the same as jsx (for elements with multiple children)
+export const jsxs = jsx;
+
 // Alias for compatibility
 export const h = createElement;

package/src/renderer.js

@@ -46,11 +46,13 @@ function styleToString(style) {
  * Render attributes to string
  */
 function renderAttributes(props) {
+  if (!props) return '';
+
   const attributes = [];
 
   for (const [key, value] of Object.entries(props)) {
     // Skip special props
-    if (key === 'children') continue;
+    if (key === 'children' || key === 'dangerouslySetInnerHTML') continue;
 
     // Handle className -> class conversion
     if (key === 'className') {
@@ -119,10 +121,15 @@ export function renderToString(vnode) {
     return `<${tag}${attrs} />`;
   }
 
+  // Handle dangerouslySetInnerHTML
+  if (props && props.dangerouslySetInnerHTML && props.dangerouslySetInnerHTML.__html) {
+    return `<${tag}${attrs}>${props.dangerouslySetInnerHTML.__html}</${tag}>`;
+  }
+
   // Render children
-  const childrenHtml = children
-    .map(child => renderToString(child))
-    .join('');
+  const childrenHtml = children && children.length > 0
+    ? children.map(child => renderToString(child)).join('')
+    : '';
 
   return `<${tag}${attrs}>${childrenHtml}</${tag}>`;
 }

package/src/server.js

@@ -0,0 +1,99 @@
+/**
+ * Dev server using h3
+ */
+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 { readFile } from "node:fs/promises";
+
+/**
+ * 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
+ */
+export async function createDevServer(options) {
+  const { outputDir = "dist", port = 3000, mode = "pages", indexFile = "index.html" } = options;
+
+  const outDir = resolve(process.cwd(), outputDir);
+
+  const app = createApp();
+
+  // Serve static files from output directory
+  app.use(
+    "/**",
+    eventHandler(async (event) => {
+      try {
+        const url = event.path || "/";
+        let filePath;
+
+        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 content = await readFile(filePath);
+        const ext = extname(filePath);
+
+        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",
+        };
+
+        setResponseHeader(event, "Content-Type", contentTypes[ext] || "application/octet-stream");
+        return content;
+      } catch (error) {
+        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,
+          });
+        }
+      }
+    })
+  );
+
+  const server = createServer(toNodeHandler(app));
+
+  return new Promise((resolve) => {
+    server.listen(port, () => {
+      resolve({ server, app, port });
+    });
+  });
+}

package/src/unocss.js

@@ -5,6 +5,29 @@
 import { createGenerator, presetUno } from "unocss";
 import fs from "node:fs/promises";
 import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+/**
+ * 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");
+  } 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 "";
+    }
+  }
+}
 
 /**
  * Create UnoCSS generator with default config
@@ -50,7 +73,7 @@ export async function generateCSS(html, config = {}) {
  * Extract and generate UnoCSS for multiple HTML files
  * @param {string[]} htmlFiles - Array of HTML file paths
  * @param {object} config - UnoCSS configuration
- * @returns {Promise<string>} Combined generated CSS
+ * @returns {Promise<string>} Combined generated CSS with reset
  */
 export async function generateCSSFromFiles(htmlFiles, config = {}) {
   const uno = await createUnoGenerator(config);
@@ -71,5 +94,8 @@ export async function generateCSSFromFiles(htmlFiles, config = {}) {
 
   // Generate CSS
   const { css } = await uno.generate(combinedHTML);
-  return css;
+
+  // Prepend reset CSS
+  const resetCSS = await getResetCSS();
+  return resetCSS + "\n" + css;
 }

package/src/watcher.js

@@ -0,0 +1,167 @@
+/**
+ * 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";
+
+/**
+ * Create a WebSocket server for live reload
+ */
+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 };
+}
+
+/**
+ * Broadcast reload message to all connected clients
+ */
+export function broadcastReload(wss) {
+  wss.clients.forEach((client) => {
+    if (client.readyState === 1) {
+      client.send("reload");
+    }
+  });
+}
+
+/**
+ * Watch for file changes and rebuild
+ */
+export async function watchFiles(inputPattern, options = {}) {
+  const { outputDir = "dist", unocssConfig, onRebuild, wss } = options;
+
+  const pagesDir = resolve(process.cwd(), inputPattern);
+  const publicDir = resolve(process.cwd(), "public");
+
+  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);
+  };
+
+  // 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);
+    }
+  });
+
+  // Watch public directory if it exists
+  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);
+        }
+      }
+    });
+
+    return { watcher, publicWatcher };
+  } catch (error) {
+    // Public directory might not exist
+    return { watcher };
+  }
+}
+
+/**
+ * Watch a single file for changes
+ */
+export async function watchFile(inputFile, options = {}) {
+  const { outputDir = "dist", unocssConfig, onRebuild, wss } = options;
+
+  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);
+
+  return { watcher };
+}