bertui 1.2.8 → 2.0.0

package/src/hydration/index.js

@@ -1,151 +0,0 @@
-// bertui/src/hydration/index.js
-// Partial hydration - only hydrate interactive components, not whole page
-
-import logger from '../logger/logger.js';
-
-/**
- * Markers that make a component interactive (needs JS hydration)
- */
-const INTERACTIVE_MARKERS = [
-  // React hooks
-  'useState', 'useEffect', 'useReducer', 'useCallback',
-  'useMemo', 'useRef', 'useContext', 'useLayoutEffect',
-  'useTransition', 'useDeferredValue', 'useSyncExternalStore',
-  // Event handlers
-  'onClick', 'onChange', 'onSubmit', 'onInput', 'onFocus',
-  'onBlur', 'onMouseEnter', 'onMouseLeave', 'onKeyDown',
-  'onKeyUp', 'onScroll', 'onDrop', 'onDrag', 'onTouchStart',
-  // Browser APIs in component body
-  'window.', 'document.', 'localStorage.', 'sessionStorage.',
-  'navigator.', 'fetch(', 'WebSocket', 'EventSource',
-  'setTimeout(', 'setInterval(', 'requestAnimationFrame(',
-];
-
-/**
- * Scan source code to determine if a component needs hydration
- */
-export function needsHydration(sourceCode) {
-  for (const marker of INTERACTIVE_MARKERS) {
-    if (sourceCode.includes(marker)) {
-      return true;
-    }
-  }
-  return false;
-}
-
-/**
- * Get which specific interactive features a component uses
- */
-export function getInteractiveFeatures(sourceCode) {
-  const features = [];
-
-  const hooks = ['useState', 'useEffect', 'useReducer', 'useCallback', 'useMemo', 'useRef'];
-  for (const hook of hooks) {
-    if (sourceCode.includes(hook)) features.push({ type: 'hook', name: hook });
-  }
-
-  const events = ['onClick', 'onChange', 'onSubmit', 'onFocus', 'onBlur', 'onKeyDown'];
-  for (const event of events) {
-    if (sourceCode.includes(event)) features.push({ type: 'event', name: event });
-  }
-
-  const apis = ['fetch(', 'WebSocket', 'localStorage.', 'sessionStorage.'];
-  for (const api of apis) {
-    if (sourceCode.includes(api)) features.push({ type: 'api', name: api });
-  }
-
-  return features;
-}
-
-/**
- * Analyze all routes and classify them
- * Returns: { static: [], interactive: [], mixed: [] }
- */
-export async function analyzeRoutes(routes) {
-  const result = { static: [], interactive: [], mixed: [] };
-
-  for (const route of routes) {
-    try {
-      const sourceCode = await Bun.file(route.path).text();
-      const isServerIsland = sourceCode.includes('export const render = "server"');
-      const interactive = needsHydration(sourceCode);
-      const features = getInteractiveFeatures(sourceCode);
-
-      const analyzed = {
-        ...route,
-        interactive,
-        isServerIsland,
-        features,
-        hydrationMode: isServerIsland
-          ? 'none'
-          : interactive
-          ? 'full'
-          : 'none',
-      };
-
-      if (isServerIsland || !interactive) {
-        result.static.push(analyzed);
-      } else {
-        result.interactive.push(analyzed);
-      }
-    } catch (err) {
-      logger.warn(`Could not analyze ${route.route}: ${err.message}`);
-      result.interactive.push({ ...route, interactive: true, features: [] });
-    }
-  }
-
-  return result;
-}
-
-/**
- * Generate hydration-aware router that skips JS for static routes
- * Key insight: static routes still render HTML, just skip React.hydrate()
- */
-export function generatePartialHydrationCode(routes, analyzedRoutes) {
-  const interactivePaths = new Set(
-    analyzedRoutes.interactive.map(r => r.route)
-  );
-
-  const imports = routes.map((route, i) => {
-    const isInteractive = interactivePaths.has(route.route);
-    const componentName = `Page${i}`;
-    const importPath = `./pages/${route.file.replace(/\.(jsx|tsx|ts)$/, '.js')}`;
-
-    // Lazy load static routes (they're just HTML, load fast)
-    // Eager load interactive routes (need JS ready)
-    return isInteractive
-      ? `import ${componentName} from '${importPath}';`
-      : `const ${componentName} = React.lazy(() => import('${importPath}'));`;
-  }).join('\n');
-
-  const routeConfigs = routes.map((route, i) => {
-    const isInteractive = interactivePaths.has(route.route);
-    return `  { 
-    path: '${route.route}', 
-    component: Page${i}, 
-    type: '${route.type}',
-    hydrate: ${isInteractive},
-    lazy: ${!isInteractive}
-  }`;
-  }).join(',\n');
-
-  return { imports, routeConfigs };
-}
-
-/**
- * Log hydration analysis results
- */
-export function logHydrationReport(analyzedRoutes) {
-  const { static: staticRoutes, interactive } = analyzedRoutes;
-
-  logger.bigLog('HYDRATION ANALYSIS', { color: 'cyan' });
-  logger.info(`⚡ Interactive (needs JS): ${interactive.length} routes`);
-  logger.info(`🏝️  Static (no JS needed): ${staticRoutes.length} routes`);
-
-  if (interactive.length > 0) {
-    logger.table(interactive.map(r => ({
-      route: r.route,
-      features: r.features.map(f => f.name).join(', ').substring(0, 40) || 'unknown',
-    })));
-  }
-}

package/src/image-optimizer/index.js

@@ -1,103 +0,0 @@
-// 3. src/image-optimizer/index.js - USE OXIPNG BINARY
-import { exec } from 'child_process';
-import { promisify } from 'util';
-import { join } from 'path';
-import { tmpdir } from 'os';
-import { writeFile, readFile, unlink } from 'fs/promises';
-
-const execAsync = promisify(exec);
-
-export async function optimizeImage(buffer, options = {}) {
-  const { format = 'auto', quality = 3 } = options;
-  
-  // Detect format
-  const detectedFormat = format === 'auto' ? detectFormat(buffer) : format;
-  
-  // Only PNG supported for now
-  if (detectedFormat === 'png') {
-    return await optimizePNG(buffer, quality);
-  }
-  
-  // Fallback to copy
-  return fallbackOptimize(buffer, detectedFormat);
-}
-
-async function optimizePNG(buffer, level = 3) {
-  const original_size = buffer.byteLength;
-  
-  // Write temp file
-  const tmpPath = join(tmpdir(), `bertui-${Date.now()}.png`);
-  const outPath = join(tmpdir(), `bertui-${Date.now()}-opt.png`);
-  
-  try {
-    await writeFile(tmpPath, Buffer.from(buffer));
-    
-    // Run oxipng binary
-    await execAsync(`oxipng -o ${level} -s "${tmpPath}" -o "${outPath}"`);
-    
-    // Read optimized file
-    const optimized = await readFile(outPath);
-    const optimized_size = optimized.length;
-    const savings_percent = ((original_size - optimized_size) / original_size * 100).toFixed(1);
-    
-    return {
-      data: optimized.buffer,
-      original_size,
-      optimized_size,
-      format: 'png',
-      savings_percent: parseFloat(savings_percent)
-    };
-  } finally {
-    // Cleanup
-    await unlink(tmpPath).catch(() => {});
-    await unlink(outPath).catch(() => {});
-  }
-}
-
-function fallbackOptimize(buffer, format) {
-  return {
-    data: buffer,
-    original_size: buffer.byteLength,
-    optimized_size: buffer.byteLength,
-    format,
-    savings_percent: 0
-  };
-}
-
-function detectFormat(buffer) {
-  if (buffer.length >= 8) {
-    const pngSig = [0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A];
-    if (pngSig.every((b, i) => buffer[i] === b)) return 'png';
-  }
-  return 'unknown';
-}
-
-// Batch optimization function
-export async function optimizeImagesBatch(images, format = 'auto', options = {}) {
-  const results = [];
-  
-  for (const image of images) {
-    try {
-      const result = await optimizeImage(image.buffer || image, {
-        format,
-        ...options
-      });
-      
-      results.push({
-        ...result,
-        filename: image.filename || image.name || 'unknown'
-      });
-    } catch (error) {
-      results.push({
-        filename: image.filename || image.name || 'unknown',
-        error: error.message,
-        success: false
-      });
-    }
-  }
-  
-  return results;
-}
-
-export const hasWasm = () => false;
-export const version = '1.1.7';

package/src/images/index.js

@@ -1,102 +0,0 @@
-// bertui/src/images/index.js
-// PURE image handling - NO WASM, NO SHARP, just copy (FALLBACK)
-
-import { join, extname } from 'path';
-import { cpSync, mkdirSync, existsSync, readdirSync } from 'fs';
-import logger from '../logger/logger.js';
-
-export const IMAGE_EXTENSIONS = [
-  '.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg', 
-  '.avif', '.ico', '.bmp', '.tiff', '.tif'
-];
-
-export function isImageFile(filename) {
-  const ext = extname(filename).toLowerCase();
-  return IMAGE_EXTENSIONS.includes(ext);
-}
-
-export function copyImagesSync(srcDir, destDir) {
-  let copied = 0;
-  let skipped = 0;
-
-  if (!existsSync(srcDir)) return { copied, skipped };
-
-  mkdirSync(destDir, { recursive: true });
-
-  function process(dir, targetDir) {
-    const entries = readdirSync(dir, { withFileTypes: true });
-
-    for (const entry of entries) {
-      const srcPath = join(dir, entry.name);
-      const destPath = join(targetDir, entry.name);
-
-      if (entry.isDirectory()) {
-        const subDest = join(targetDir, entry.name);
-        mkdirSync(subDest, { recursive: true });
-        process(srcPath, subDest);
-      } else if (entry.isFile() && isImageFile(entry.name)) {
-        try {
-          cpSync(srcPath, destPath);
-          copied++;
-        } catch (error) {
-          logger.warn(`Failed to copy ${entry.name}: ${error.message}`);
-          skipped++;
-        }
-      } else {
-        skipped++;
-      }
-    }
-  }
-
-  process(srcDir, destDir);
-  return { copied, skipped };
-}
-
-export function getImageContentType(ext) {
-  const types = {
-    '.jpg': 'image/jpeg',
-    '.jpeg': 'image/jpeg',
-    '.png': 'image/png',
-    '.gif': 'image/gif',
-    '.svg': 'image/svg+xml',
-    '.webp': 'image/webp',
-    '.avif': 'image/avif',
-    '.ico': 'image/x-icon'
-  };
-  return types[ext.toLowerCase()] || 'application/octet-stream';
-}
-
-export function getImageFiles(dir, baseDir = dir) {
-  const images = [];
-  if (!existsSync(dir)) return images;
-
-  function scan(directory) {
-    const entries = readdirSync(directory, { withFileTypes: true });
-    for (const entry of entries) {
-      const fullPath = join(directory, entry.name);
-      const relativePath = fullPath.replace(baseDir, '').replace(/^[\/\\]/, '');
-      if (entry.isDirectory()) {
-        scan(fullPath);
-      } else if (entry.isFile() && isImageFile(entry.name)) {
-        images.push({ path: fullPath, relativePath, filename: entry.name });
-      }
-    }
-  }
-  scan(dir);
-  return images;
-}
-
-export function getTotalImageSize(images) {
-  return images.reduce((total, img) => total + img.size, 0);
-}
-
-export function formatBytes(bytes) {
-  if (bytes === 0) return '0 B';
-  const k = 1024;
-  const sizes = ['B', 'KB', 'MB', 'GB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
-}
-
-// Legacy exports
-export { optimizeImages, copyImages } from '../build/image-optimizer.js';

package/src/images/processor.js

@@ -1,169 +0,0 @@
-// bertui/src/images/processor.js - PURE IMAGE PROCESSING
-import { join, extname } from 'path';
-import { cpSync, mkdirSync, existsSync, readdirSync, statSync } from 'fs';
-import logger from '../logger/logger.js';
-
-// All supported image formats
-export const IMAGE_EXTENSIONS = [
-  '.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg', 
-  '.avif', '.ico', '.bmp', '.tiff', '.tif'
-];
-
-/**
- * Check if a file is an image based on extension
- */
-export function isImageFile(filename) {
-  if (!filename) return false;
-  const ext = extname(filename).toLowerCase();
-  return IMAGE_EXTENSIONS.includes(ext);
-}
-
-/**
- * Get image content type for HTTP headers
- */
-export function getImageContentType(ext) {
-  const types = {
-    '.jpg': 'image/jpeg',
-    '.jpeg': 'image/jpeg',
-    '.png': 'image/png',
-    '.gif': 'image/gif',
-    '.svg': 'image/svg+xml',
-    '.webp': 'image/webp',
-    '.avif': 'image/avif',
-    '.ico': 'image/x-icon',
-    '.bmp': 'image/bmp',
-    '.tiff': 'image/tiff',
-    '.tif': 'image/tiff'
-  };
-  
-  return types[ext.toLowerCase()] || 'application/octet-stream';
-}
-
-/**
- * Copy images synchronously from source to destination
- */
-export function copyImagesSync(srcDir, destDir, options = {}) {
-  const {
-    verbose = false,
-    overwrite = true,
-    filter = null
-  } = options;
-
-  let copied = 0;
-  let skipped = 0;
-  let failed = 0;
-
-  if (!existsSync(srcDir)) {
-    logger.warn(`Source directory not found: ${srcDir}`);
-    return { copied, skipped, failed };
-  }
-
-  // Create destination directory
-  mkdirSync(destDir, { recursive: true });
-
-  function copyDir(dir, targetDir) {
-    try {
-      const entries = readdirSync(dir, { withFileTypes: true });
-
-      for (const entry of entries) {
-        const srcPath = join(dir, entry.name);
-        const destPath = join(targetDir, entry.name);
-
-        // Skip if filtered
-        if (filter && !filter(srcPath)) {
-          skipped++;
-          continue;
-        }
-
-        if (entry.isDirectory()) {
-          // Recursively copy subdirectories
-          const subDest = join(targetDir, entry.name);
-          mkdirSync(subDest, { recursive: true });
-          copyDir(srcPath, subDest);
-        } 
-        else if (entry.isFile() && isImageFile(entry.name)) {
-          try {
-            // Check if destination exists and we should overwrite
-            if (!overwrite && existsSync(destPath)) {
-              skipped++;
-              if (verbose) logger.debug(`Skipped existing: ${entry.name}`);
-              continue;
-            }
-
-            cpSync(srcPath, destPath);
-            copied++;
-            
-            if (verbose) {
-              const srcSize = statSync(srcPath).size;
-              logger.debug(`Copied: ${entry.name} (${(srcSize / 1024).toFixed(2)}KB)`);
-            }
-          } catch (error) {
-            failed++;
-            logger.warn(`Failed to copy ${entry.name}: ${error.message}`);
-          }
-        } else {
-          skipped++;
-        }
-      }
-    } catch (error) {
-      logger.error(`Error processing ${dir}: ${error.message}`);
-    }
-  }
-
-  copyDir(srcDir, destDir);
-
-  return { copied, skipped, failed };
-}
-
-/**
- * Get all image files from a directory recursively
- */
-export function getImageFiles(dir, baseDir = dir) {
-  const images = [];
-
-  if (!existsSync(dir)) {
-    return images;
-  }
-
-  function scan(directory) {
-    const entries = readdirSync(directory, { withFileTypes: true });
-
-    for (const entry of entries) {
-      const fullPath = join(directory, entry.name);
-      const relativePath = fullPath.replace(baseDir, '').replace(/^[\/\\]/, '');
-
-      if (entry.isDirectory()) {
-        scan(fullPath);
-      } else if (entry.isFile() && isImageFile(entry.name)) {
-        images.push({
-          path: fullPath,
-          relativePath,
-          filename: entry.name,
-          size: statSync(fullPath).size,
-          ext: extname(entry.name).toLowerCase()
-        });
-      }
-    }
-  }
-
-  scan(dir);
-  return images;
-}
-
-/**
- * Calculate total size of images
- */
-export function getTotalImageSize(images) {
-  return images.reduce((total, img) => total + img.size, 0);
-}
-
-/**
- * Format bytes to human readable
- */
-export function formatBytes(bytes) {
-  if (bytes === 0) return '0 B';
-  const k = 1024;
-  const sizes = ['B', 'KB', 'MB', 'GB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
-}

package/src/layouts/index.js

@@ -1,165 +0,0 @@
-// bertui/src/layouts/index.js
-// Layout system - src/layouts/default.tsx wraps all pages
-
-import { join, extname, basename } from 'path';
-import { existsSync, readdirSync, mkdirSync } from 'fs';;
-import logger from '../logger/logger.js';
-
-/**
- * Discover all layouts in src/layouts/
- * Layout naming convention:
- *   default.tsx  → wraps all pages (fallback)
- *   blog.tsx     → wraps pages in /blog/*
- *   [route].tsx  → wraps pages matching route prefix
- */
-export async function discoverLayouts(root) {
-  const layoutsDir = join(root, 'src', 'layouts');
-  const layouts = {};
-
-  if (!existsSync(layoutsDir)) {
-    return layouts;
-  }
-
-  const entries = readdirSync(layoutsDir, { withFileTypes: true });
-
-  for (const entry of entries) {
-    if (!entry.isFile()) continue;
-    const ext = extname(entry.name);
-    if (!['.jsx', '.tsx', '.js', '.ts'].includes(ext)) continue;
-
-    const name = basename(entry.name, ext);
-    layouts[name] = {
-      name,
-      path: join(layoutsDir, entry.name),
-      route: name === 'default' ? '*' : `/${name}`,
-    };
-
-    logger.debug(`📐 Layout found: ${entry.name} → ${layouts[name].route}`);
-  }
-
-  if (Object.keys(layouts).length > 0) {
-    logger.success(`✅ ${Object.keys(layouts).length} layout(s) loaded`);
-  }
-
-  return layouts;
-}
-
-/**
- * Match which layout applies to a given route
- * Priority: exact name match > default
- */
-export function matchLayout(route, layouts) {
-  if (!layouts || Object.keys(layouts).length === 0) return null;
-
-  // Strip leading slash and get first segment
-  const segment = route.replace(/^\//, '').split('/')[0];
-
-  // Exact match (e.g., /blog → blog.tsx)
-  if (segment && layouts[segment]) {
-    return layouts[segment];
-  }
-
-  // Default layout fallback
-  if (layouts['default']) {
-    return layouts['default'];
-  }
-
-  return null;
-}
-
-/**
- * Generate layout wrapper code for the compiler
- * Wraps the page component with the layout component
- */
-export function generateLayoutWrapper(pageImportPath, layoutImportPath, componentName = 'Page') {
-  return `
-import React from 'react';
-import ${componentName} from '${pageImportPath}';
-import Layout from '${layoutImportPath}';
-
-export default function LayoutWrapped(props) {
-  return React.createElement(
-    Layout,
-    props,
-    React.createElement(${componentName}, props)
-  );
-}
-`.trim();
-}
-
-/**
- * Compile layouts directory - transpiles layout files to .bertui/compiled/layouts/
- */
-export async function compileLayouts(root, compiledDir) {
-  const layoutsDir = join(root, 'src', 'layouts');
-  if (!existsSync(layoutsDir)) return {};
-
-  const outDir = join(compiledDir, 'layouts');
-  
-  mkdirSync(outDir, { recursive: true });
-
-  const layouts = await discoverLayouts(root);
-
-  for (const [name, layout] of Object.entries(layouts)) {
-    const ext = extname(layout.path);
-    const loader = ext === '.tsx' ? 'tsx' : ext === '.ts' ? 'ts' : 'jsx';
-
-    try {
-      let code = await Bun.file(layout.path).text();
-
-      // Add React import if missing
-      if (!code.includes('import React')) {
-        code = `import React from 'react';\n${code}`;
-      }
-
-      const transpiler = new Bun.Transpiler({
-        loader,
-        target: 'browser',
-        tsconfig: {
-          compilerOptions: {
-            jsx: 'react',
-            jsxFactory: 'React.createElement',
-            jsxFragmentFactory: 'React.Fragment',
-          },
-        },
-      });
-
-      let compiled = await transpiler.transform(code);
-
-      // Fix relative imports
-      compiled = compiled.replace(
-        /from\s+['"](\.\.?\/[^'"]+?)(?<!\.js|\.jsx|\.ts|\.tsx|\.json)['"]/g,
-        (match, path) => {
-          if (path.endsWith('/') || /\.\w+$/.test(path)) return match;
-          return `from '${path}.js'`;
-        }
-      );
-
-      await Bun.write(join(outDir, `${name}.js`), compiled);
-      logger.debug(`📐 Compiled layout: ${name}`);
-    } catch (err) {
-      logger.error(`Failed to compile layout ${name}: ${err.message}`);
-    }
-  }
-
-  return layouts;
-}
-
-/**
- * Inject layout into router generation
- * Called by router-generator to wrap page components with their layouts
- */
-export function injectLayoutsIntoRouter(routes, layouts, compiledDir) {
-  if (!layouts || Object.keys(layouts).length === 0) return routes;
-
-  return routes.map(route => {
-    const layout = matchLayout(route.route, layouts);
-    if (!layout) return route;
-
-    return {
-      ...route,
-      layout: layout.name,
-      layoutPath: join(compiledDir, 'layouts', `${layout.name}.js`),
-    };
-  });
-}