@hashrock/ono 0.1.0

package/src/jsx-runtime.js

@@ -0,0 +1,45 @@
+/**
+ * JSX Runtime - createElement function
+ * Creates a VNode (Virtual Node) from JSX
+ */
+
+/**
+ * Flatten array recursively and filter out falsy values
+ */
+function flattenChildren(children) {
+  const result = [];
+
+  for (const child of children) {
+    if (child === null || child === undefined || typeof child === 'boolean') {
+      // Skip null, undefined, and boolean values
+      continue;
+    }
+
+    if (Array.isArray(child)) {
+      // Recursively flatten arrays
+      result.push(...flattenChildren(child));
+    } else {
+      result.push(child);
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Create a VNode
+ * @param {string|Function} tag - HTML tag name or component function
+ * @param {Object} props - Element properties/attributes
+ * @param {...any} children - Child elements
+ * @returns {Object} VNode object
+ */
+export function createElement(tag, props, ...children) {
+  return {
+    tag,
+    props: props || {},
+    children: flattenChildren(children)
+  };
+}
+
+// Alias for compatibility
+export const h = createElement;

package/src/renderer.js

@@ -0,0 +1,128 @@
+/**
+ * Renderer - Convert VNodes to HTML strings
+ */
+
+// Self-closing HTML tags
+const SELF_CLOSING_TAGS = new Set([
+  'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+  'link', 'meta', 'param', 'source', 'track', 'wbr'
+]);
+
+/**
+ * Escape HTML special characters to prevent XSS
+ */
+function escapeHtml(text) {
+  const map = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#039;'
+  };
+  return String(text).replace(/[&<>"']/g, (char) => map[char]);
+}
+
+/**
+ * Convert camelCase to kebab-case
+ */
+function camelToKebab(str) {
+  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+
+/**
+ * Convert style object to CSS string
+ */
+function styleToString(style) {
+  if (typeof style === 'string') {
+    return style;
+  }
+
+  return Object.entries(style)
+    .map(([key, value]) => `${camelToKebab(key)}: ${value}`)
+    .join('; ');
+}
+
+/**
+ * Render attributes to string
+ */
+function renderAttributes(props) {
+  const attributes = [];
+
+  for (const [key, value] of Object.entries(props)) {
+    // Skip special props
+    if (key === 'children') continue;
+
+    // Handle className -> class conversion
+    if (key === 'className') {
+      attributes.push(`class="${escapeHtml(value)}"`);
+      continue;
+    }
+
+    // Handle style object
+    if (key === 'style') {
+      const styleStr = styleToString(value);
+      attributes.push(`style="${escapeHtml(styleStr)}"`);
+      continue;
+    }
+
+    // Handle boolean attributes
+    if (typeof value === 'boolean') {
+      if (value) {
+        attributes.push(key);
+      }
+      continue;
+    }
+
+    // Handle regular attributes
+    if (value != null) {
+      attributes.push(`${key}="${escapeHtml(value)}"`);
+    }
+  }
+
+  return attributes.length > 0 ? ' ' + attributes.join(' ') : '';
+}
+
+/**
+ * Render a VNode to HTML string
+ */
+export function renderToString(vnode) {
+  // Handle primitive values
+  if (vnode == null || typeof vnode === 'boolean') {
+    return '';
+  }
+
+  if (typeof vnode === 'string' || typeof vnode === 'number') {
+    return escapeHtml(vnode);
+  }
+
+  // Handle VNode object
+  const { tag, props, children } = vnode;
+
+  // Handle component functions
+  if (typeof tag === 'function') {
+    // Pass props with children
+    const componentProps = { ...props };
+    if (children && children.length > 0) {
+      componentProps.children = children;
+    }
+
+    // Call component function and render result
+    const result = tag(componentProps);
+    return renderToString(result);
+  }
+
+  // Handle HTML elements
+  const attrs = renderAttributes(props);
+  const isSelfClosing = SELF_CLOSING_TAGS.has(tag);
+
+  if (isSelfClosing) {
+    return `<${tag}${attrs} />`;
+  }
+
+  // Render children
+  const childrenHtml = children
+    .map(child => renderToString(child))
+    .join('');
+
+  return `<${tag}${attrs}>${childrenHtml}</${tag}>`;
+}

package/src/resolver.js

@@ -0,0 +1,137 @@
+/**
+ * Module Resolver - Parse imports and resolve dependencies
+ */
+
+import fs from "node:fs/promises";
+import path from "node:path";
+
+/**
+ * Parse import statements from source code
+ * @param {string} code - Source code
+ * @returns {Array} Array of import objects with specifier
+ */
+export function parseImports(code) {
+  const imports = [];
+
+  // Match various import patterns:
+  // import foo from "bar"
+  // import { foo } from "bar"
+  // import * as foo from "bar"
+  // import "bar"
+  const importRegex = /import\s+(?:[\w{},\s*]+\s+from\s+)?['"]([^'"]+)['"]/g;
+
+  let match;
+  while ((match = importRegex.exec(code)) !== null) {
+    imports.push({
+      specifier: match[1]
+    });
+  }
+
+  return imports;
+}
+
+/**
+ * Resolve import path relative to the importing file
+ * @param {string} importPath - Import specifier (e.g., "./Button.jsx")
+ * @param {string} fromFile - Absolute path of the file doing the import
+ * @returns {string} Absolute path to the imported file
+ */
+export function resolveImportPath(importPath, fromFile) {
+  // If it's already an absolute path, return as-is
+  if (path.isAbsolute(importPath)) {
+    return importPath;
+  }
+
+  // For relative imports, resolve relative to the importing file
+  const dir = path.dirname(fromFile);
+  return path.resolve(dir, importPath);
+}
+
+/**
+ * Topological sort for dependency graph
+ * @param {Map} graph - Dependency graph (file -> [dependencies])
+ * @returns {Array} Sorted array of file paths
+ */
+function topologicalSort(graph) {
+  const sorted = [];
+  const visited = new Set();
+  const visiting = new Set();
+
+  function visit(node) {
+    if (visited.has(node)) return;
+    if (visiting.has(node)) {
+      throw new Error(`Circular dependency detected: ${node}`);
+    }
+
+    visiting.add(node);
+
+    const deps = graph.get(node) || [];
+    for (const dep of deps) {
+      visit(dep);
+    }
+
+    visiting.delete(node);
+    visited.add(node);
+    sorted.push(node);
+  }
+
+  // Visit all nodes
+  for (const node of graph.keys()) {
+    visit(node);
+  }
+
+  return sorted;
+}
+
+/**
+ * Collect all dependencies recursively
+ * @param {string} entryFile - Absolute path to entry file
+ * @returns {Object} Object with modules (Set), graph (Map), and order (Array)
+ */
+export async function collectDependencies(entryFile) {
+  const modules = new Set();
+  const graph = new Map();
+  const queue = [entryFile];
+
+  // BFS to collect all dependencies
+  while (queue.length > 0) {
+    const currentFile = queue.shift();
+
+    // Skip if already processed
+    if (modules.has(currentFile)) continue;
+
+    // Read the file
+    let source;
+    try {
+      source = await fs.readFile(currentFile, "utf-8");
+    } catch (error) {
+      throw new Error(`Cannot read file: ${currentFile}\n${error.message}`);
+    }
+
+    // Parse imports
+    const imports = parseImports(source);
+    const dependencies = [];
+
+    for (const imp of imports) {
+      // Only process relative imports (skip node_modules, etc.)
+      if (imp.specifier.startsWith(".")) {
+        const resolvedPath = resolveImportPath(imp.specifier, currentFile);
+        dependencies.push(resolvedPath);
+        queue.push(resolvedPath);
+      }
+    }
+
+    // Add to modules and graph
+    modules.add(currentFile);
+    graph.set(currentFile, dependencies);
+  }
+
+  // Sort dependencies topologically
+  const order = topologicalSort(graph);
+
+  return {
+    modules,
+    graph,
+    order
+  };
+}

package/src/transformer.js

@@ -0,0 +1,48 @@
+/**
+ * Transformer - Convert JSX to JavaScript using TypeScript compiler
+ */
+
+import ts from "typescript";
+
+/**
+ * Transform JSX code to JavaScript
+ * @param {string} source - JSX source code
+ * @param {string} [filename='input.jsx'] - Optional filename for better error messages
+ * @returns {string} Transformed JavaScript code
+ */
+export function transformJSX(source, filename = 'input.jsx') {
+  // TypeScript compiler options
+  const compilerOptions = {
+    jsx: ts.JsxEmit.React,
+    jsxFactory: 'h',
+    module: ts.ModuleKind.ESNext,
+    target: ts.ScriptTarget.ESNext,
+    esModuleInterop: true,
+  };
+
+  // Transpile the code
+  const result = ts.transpileModule(source, {
+    compilerOptions,
+    fileName: filename,
+  });
+
+  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

@@ -0,0 +1,75 @@
+/**
+ * UnoCSS Integration for Mini JSX
+ */
+
+import { createGenerator, presetUno } from "unocss";
+import fs from "node:fs/promises";
+import path from "node:path";
+
+/**
+ * Create UnoCSS generator with default config
+ * @param {object} userConfig - User configuration
+ * @returns {Promise<object>} UnoCSS generator instance
+ */
+export async function createUnoGenerator(userConfig = {}) {
+  return await createGenerator({
+    presets: [presetUno()],
+    ...userConfig,
+  });
+}
+
+/**
+ * Load UnoCSS config from file
+ * @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
+    return {};
+  }
+}
+
+/**
+ * Generate CSS from HTML content
+ * @param {string} html - HTML content to scan for classes
+ * @param {object} config - UnoCSS configuration
+ * @returns {Promise<string>} Generated CSS
+ */
+export async function generateCSS(html, config = {}) {
+  const uno = await createUnoGenerator(config);
+  const { css } = await uno.generate(html);
+  return css;
+}
+
+/**
+ * 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
+ */
+export async function generateCSSFromFiles(htmlFiles, config = {}) {
+  const uno = await createUnoGenerator(config);
+
+  // Read all HTML files
+  const htmlContents = await Promise.all(
+    htmlFiles.map(async (file) => {
+      try {
+        return await fs.readFile(file, "utf-8");
+      } catch {
+        return "";
+      }
+    })
+  );
+
+  // Combine all HTML content
+  const combinedHTML = htmlContents.join("\n");
+
+  // Generate CSS
+  const { css } = await uno.generate(combinedHTML);
+  return css;
+}