@flexireact/core 3.0.1 → 3.0.2

package/core/cli/logger.ts

@@ -1,353 +0,0 @@
-/**
- * FlexiReact CLI Logger - Premium Console Output
- * Beautiful, modern, and professional CLI aesthetics
- */
-
-import pc from 'picocolors';
-
-// ============================================================================
-// Color Palette
-// ============================================================================
-
-const colors = {
-  primary: (text) => pc.green(text),        // Neon emerald
-  secondary: (text) => pc.cyan(text),       // Cyan
-  accent: (text) => pc.magenta(text),       // Magenta accent
-  success: (text) => pc.green(text),        // Success green
-  error: (text) => pc.red(text),            // Error red
-  warning: (text) => pc.yellow(text),       // Warning yellow
-  info: (text) => pc.blue(text),            // Info blue
-  muted: (text) => pc.dim(text),            // Muted/dim
-  bold: (text) => pc.bold(text),            // Bold
-  white: (text) => pc.white(text),          // White
-};
-
-// ============================================================================
-// Icons & Symbols
-// ============================================================================
-
-const icons = {
-  success: pc.green('✓'),
-  error: pc.red('✗'),
-  warning: pc.yellow('⚠'),
-  info: pc.blue('ℹ'),
-  arrow: pc.dim('→'),
-  dot: pc.dim('•'),
-  star: pc.yellow('★'),
-  rocket: '🚀',
-  lightning: '⚡',
-  puzzle: '🧩',
-  island: '🏝️',
-  plug: '🔌',
-  package: '📦',
-  folder: '📁',
-  file: '📄',
-  globe: '🌐',
-  check: pc.green('✔'),
-  cross: pc.red('✘'),
-  spinner: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'],
-};
-
-// ============================================================================
-// Box Drawing
-// ============================================================================
-
-const box = {
-  topLeft: '╭',
-  topRight: '╮',
-  bottomLeft: '╰',
-  bottomRight: '╯',
-  horizontal: '─',
-  vertical: '│',
-  horizontalDown: '┬',
-  horizontalUp: '┴',
-  verticalRight: '├',
-  verticalLeft: '┤',
-};
-
-interface BoxOptions {
-  padding?: number;
-  borderColor?: (s: string) => string;
-  width?: number;
-}
-
-function createBox(content: string, options: BoxOptions = {}) {
-  const { 
-    padding = 1, 
-    borderColor = colors.primary,
-    width = 50 
-  } = options;
-  
-  const lines = content.split('\n');
-  const maxLen = Math.max(...lines.map(l => stripAnsi(l).length), width - 4);
-  const innerWidth = maxLen + (padding * 2);
-  
-  const top = borderColor(box.topLeft + box.horizontal.repeat(innerWidth) + box.topRight);
-  const bottom = borderColor(box.bottomLeft + box.horizontal.repeat(innerWidth) + box.bottomRight);
-  const empty = borderColor(box.vertical) + ' '.repeat(innerWidth) + borderColor(box.vertical);
-  
-  const contentLines = lines.map(line => {
-    const stripped = stripAnsi(line);
-    const pad = innerWidth - stripped.length - padding;
-    return borderColor(box.vertical) + ' '.repeat(padding) + line + ' '.repeat(Math.max(0, pad)) + borderColor(box.vertical);
-  });
-  
-  const paddingLines = padding > 0 ? [empty] : [];
-  
-  return [top, ...paddingLines, ...contentLines, ...paddingLines, bottom].join('\n');
-}
-
-function stripAnsi(str) {
-  return str.replace(/\x1B\[[0-9;]*m/g, '');
-}
-
-// ============================================================================
-// ASCII Art Banners
-// ============================================================================
-
-const banners = {
-  // Main banner - Gradient style
-  main: `
-${pc.cyan('   ╭─────────────────────────────────────────╮')}
-${pc.cyan('   │')}                                           ${pc.cyan('│')}
-${pc.cyan('   │')}   ${pc.bold(pc.green('⚡'))} ${pc.bold(pc.white('F L E X I R E A C T'))}              ${pc.cyan('│')}
-${pc.cyan('   │')}                                           ${pc.cyan('│')}
-${pc.cyan('   │')}   ${pc.dim('The Modern React Framework')}            ${pc.cyan('│')}
-${pc.cyan('   │')}                                           ${pc.cyan('│')}
-${pc.cyan('   ╰─────────────────────────────────────────╯')}
-`,
-
-  // Compact banner
-  compact: `
-  ${pc.green('⚡')} ${pc.bold('FlexiReact')} ${pc.dim('v2.1.0')}
-`,
-
-  // Build banner
-  build: `
-${pc.cyan('   ╭─────────────────────────────────────────╮')}
-${pc.cyan('   │')}   ${pc.bold(pc.green('⚡'))} ${pc.bold('FlexiReact Build')}                    ${pc.cyan('│')}
-${pc.cyan('   ╰─────────────────────────────────────────╯')}
-`,
-};
-
-// ============================================================================
-// Server Status Panel
-// ============================================================================
-
-function serverPanel(config) {
-  const {
-    mode = 'development',
-    port = 3000,
-    host = 'localhost',
-    pagesDir = './pages',
-    islands = true,
-    rsc = true,
-  } = config;
-
-  const modeColor = mode === 'development' ? colors.warning : colors.success;
-  const url = `http://${host}:${port}`;
-  
-  console.log('');
-  console.log(pc.dim('   ─────────────────────────────────────────'));
-  console.log(`   ${icons.arrow} ${pc.dim('Mode:')}    ${modeColor(mode)}`);
-  console.log(`   ${icons.arrow} ${pc.dim('Local:')}   ${pc.cyan(pc.underline(url))}`);
-  console.log(`   ${icons.arrow} ${pc.dim('Pages:')}   ${pc.white(pagesDir)}`);
-  console.log(`   ${icons.arrow} ${pc.dim('Islands:')} ${islands ? pc.green('enabled') : pc.dim('disabled')}`);
-  console.log(`   ${icons.arrow} ${pc.dim('RSC:')}     ${rsc ? pc.green('enabled') : pc.dim('disabled')}`);
-  console.log(pc.dim('   ─────────────────────────────────────────'));
-  console.log('');
-  console.log(`   ${icons.success} ${pc.green('Ready for requests...')}`);
-  console.log('');
-}
-
-// ============================================================================
-// Plugin Loader
-// ============================================================================
-
-function pluginLoader(plugins = []) {
-  console.log('');
-  console.log(`${icons.package} ${pc.bold('Loading plugins...')}`);
-  console.log('');
-  
-  if (plugins.length === 0) {
-    console.log(`   ${pc.dim('No plugins configured')}`);
-  } else {
-    plugins.forEach((plugin, i) => {
-      console.log(`   ${icons.check} ${pc.white(plugin.name)} ${pc.dim(`v${plugin.version || '1.0.0'}`)}`);
-    });
-  }
-  
-  console.log('');
-  console.log(`   ${pc.dim('Total plugins:')} ${pc.white(plugins.length)}`);
-  console.log('');
-}
-
-// ============================================================================
-// HTTP Request Logger
-// ============================================================================
-
-function request(method: string, path: string, statusCode: number, duration: number, options: { type?: string } = {}) {
-  const { type = 'dynamic' } = options;
-  
-  // Method colors
-  const methodColors = {
-    GET: pc.green,
-    POST: pc.blue,
-    PUT: pc.yellow,
-    DELETE: pc.red,
-    PATCH: pc.magenta,
-  };
-  
-  // Type badges
-  const typeBadges = {
-    ssr: `${pc.yellow('[SSR]')}`,
-    ssg: `${pc.green('[SSG]')}`,
-    rsc: `${pc.magenta('[RSC]')}`,
-    island: `${pc.cyan('[ISL]')}`,
-    api: `${pc.blue('[API]')}`,
-    asset: `${pc.dim('[AST]')}`,
-    dynamic: `${pc.yellow('[SSR]')}`,
-  };
-  
-  // Status colors
-  const statusColor = statusCode >= 500 ? pc.red :
-                      statusCode >= 400 ? pc.yellow :
-                      statusCode >= 300 ? pc.cyan :
-                      pc.green;
-  
-  const methodColor = methodColors[method] || pc.white;
-  const badge = typeBadges[type] || typeBadges.dynamic;
-  const durationStr = duration < 100 ? pc.green(`${duration}ms`) :
-                      duration < 500 ? pc.yellow(`${duration}ms`) :
-                      pc.red(`${duration}ms`);
-  
-  console.log(`   ${methodColor(method.padEnd(6))} ${pc.white(path)}`);
-  console.log(`   ${pc.dim('└─')} ${badge} ${statusColor(statusCode)} ${pc.dim('(')}${durationStr}${pc.dim(')')}`);
-}
-
-// ============================================================================
-// Error & Warning Formatters
-// ============================================================================
-
-function error(title, message, stack = null, suggestions = []) {
-  console.log('');
-  console.log(pc.red('   ╭─────────────────────────────────────────────────────────╮'));
-  console.log(pc.red('   │') + ` ${pc.red(pc.bold('✗ ERROR'))}                                               ` + pc.red('│'));
-  console.log(pc.red('   ├─────────────────────────────────────────────────────────┤'));
-  console.log(pc.red('   │') + ` ${pc.white(title.substring(0, 55).padEnd(55))} ` + pc.red('│'));
-  console.log(pc.red('   │') + ' '.repeat(57) + pc.red('│'));
-  
-  // Message lines
-  const msgLines = message.split('\n').slice(0, 3);
-  msgLines.forEach(line => {
-    console.log(pc.red('   │') + ` ${pc.dim(line.substring(0, 55).padEnd(55))} ` + pc.red('│'));
-  });
-  
-  if (suggestions.length > 0) {
-    console.log(pc.red('   │') + ' '.repeat(57) + pc.red('│'));
-    console.log(pc.red('   │') + ` ${pc.cyan('Suggestions:')}                                          ` + pc.red('│'));
-    suggestions.slice(0, 2).forEach(s => {
-      console.log(pc.red('   │') + ` ${pc.dim('→')} ${pc.white(s.substring(0, 52).padEnd(52))} ` + pc.red('│'));
-    });
-  }
-  
-  console.log(pc.red('   ╰─────────────────────────────────────────────────────────╯'));
-  console.log('');
-}
-
-function warning(title, message) {
-  console.log('');
-  console.log(pc.yellow('   ⚠ WARNING: ') + pc.white(title));
-  console.log(pc.dim(`     ${message}`));
-  console.log('');
-}
-
-function info(message) {
-  console.log(`   ${icons.info} ${message}`);
-}
-
-function success(message) {
-  console.log(`   ${icons.success} ${pc.green(message)}`);
-}
-
-// ============================================================================
-// Build Logger
-// ============================================================================
-
-function buildStart() {
-  console.log(banners.build);
-  console.log(`   ${icons.rocket} ${pc.bold('Starting production build...')}`);
-  console.log('');
-}
-
-function buildStep(step, total, message) {
-  console.log(`   ${pc.dim(`[${step}/${total}]`)} ${message}`);
-}
-
-function buildComplete(stats) {
-  const { duration, pages, size } = stats;
-  
-  console.log('');
-  console.log(pc.green('   ╭─────────────────────────────────────────╮'));
-  console.log(pc.green('   │') + ` ${pc.green(pc.bold('✓ Build completed successfully!'))}        ` + pc.green('│'));
-  console.log(pc.green('   ├─────────────────────────────────────────┤'));
-  console.log(pc.green('   │') + ` ${pc.dim('Duration:')}  ${pc.white(duration + 'ms').padEnd(27)} ` + pc.green('│'));
-  console.log(pc.green('   │') + ` ${pc.dim('Pages:')}     ${pc.white(pages + ' pages').padEnd(27)} ` + pc.green('│'));
-  console.log(pc.green('   │') + ` ${pc.dim('Size:')}      ${pc.white(size).padEnd(27)} ` + pc.green('│'));
-  console.log(pc.green('   ╰─────────────────────────────────────────╯'));
-  console.log('');
-}
-
-// ============================================================================
-// Dividers & Spacing
-// ============================================================================
-
-function divider() {
-  console.log(pc.dim('   ─────────────────────────────────────────'));
-}
-
-function blank() {
-  console.log('');
-}
-
-function clear() {
-  console.clear();
-}
-
-// ============================================================================
-// Export
-// ============================================================================
-
-export const logger = {
-  // Banners
-  banner: () => console.log(banners.main),
-  bannerCompact: () => console.log(banners.compact),
-  
-  // Panels
-  serverPanel,
-  pluginLoader,
-  
-  // Logging
-  request,
-  error,
-  warning,
-  info,
-  success,
-  
-  // Build
-  buildStart,
-  buildStep,
-  buildComplete,
-  
-  // Utilities
-  divider,
-  blank,
-  clear,
-  createBox,
-  
-  // Colors & Icons
-  colors,
-  icons,
-};
-
-export default logger;

package/core/client/Link.tsx

@@ -1,345 +0,0 @@
-'use client';
-
-/**
- * FlexiReact Link Component
- * Enhanced link with prefetching, client-side navigation, and loading states
- */
-
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-
-export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
-  /** The URL to navigate to */
-  href: string;
-  /** Prefetch the page on hover/visibility */
-  prefetch?: boolean | 'hover' | 'viewport';
-  /** Replace the current history entry instead of pushing */
-  replace?: boolean;
-  /** Scroll to top after navigation */
-  scroll?: boolean;
-  /** Show loading indicator while navigating */
-  showLoading?: boolean;
-  /** Custom loading component */
-  loadingComponent?: React.ReactNode;
-  /** Callback when navigation starts */
-  onNavigationStart?: () => void;
-  /** Callback when navigation ends */
-  onNavigationEnd?: () => void;
-  /** Children */
-  children: React.ReactNode;
-}
-
-// Prefetch cache to avoid duplicate requests
-const prefetchCache = new Set<string>();
-
-// Prefetch a URL
-async function prefetchUrl(url: string): Promise<void> {
-  if (prefetchCache.has(url)) return;
-  
-  try {
-    // Mark as prefetched immediately to prevent duplicate requests
-    prefetchCache.add(url);
-    
-    // Use link preload for better browser optimization
-    const link = document.createElement('link');
-    link.rel = 'prefetch';
-    link.href = url;
-    link.as = 'document';
-    document.head.appendChild(link);
-    
-    // Also fetch the page to warm the cache
-    const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), 5000);
-    
-    await fetch(url, {
-      method: 'GET',
-      credentials: 'same-origin',
-      signal: controller.signal,
-      headers: {
-        'X-Flexi-Prefetch': '1',
-        'Accept': 'text/html'
-      }
-    });
-    
-    clearTimeout(timeoutId);
-  } catch (error) {
-    // Remove from cache on error so it can be retried
-    prefetchCache.delete(url);
-  }
-}
-
-// Check if URL is internal
-function isInternalUrl(url: string): boolean {
-  if (url.startsWith('/')) return true;
-  if (url.startsWith('#')) return true;
-  
-  try {
-    const parsed = new URL(url, window.location.origin);
-    return parsed.origin === window.location.origin;
-  } catch {
-    return false;
-  }
-}
-
-// Navigate to a URL
-function navigate(url: string, options: { replace?: boolean; scroll?: boolean } = {}): void {
-  const { replace = false, scroll = true } = options;
-  
-  if (replace) {
-    window.history.replaceState({}, '', url);
-  } else {
-    window.history.pushState({}, '', url);
-  }
-  
-  // Dispatch popstate event to trigger any listeners
-  window.dispatchEvent(new PopStateEvent('popstate', { state: {} }));
-  
-  // Scroll to top if requested
-  if (scroll) {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  }
-}
-
-/**
- * Link component with prefetching and client-side navigation
- * 
- * @example
- * ```tsx
- * import { Link } from '@flexireact/core/client';
- * 
- * // Basic usage
- * <Link href="/about">About</Link>
- * 
- * // With prefetch on hover
- * <Link href="/products" prefetch="hover">Products</Link>
- * 
- * // With prefetch on viewport visibility
- * <Link href="/contact" prefetch="viewport">Contact</Link>
- * 
- * // Replace history instead of push
- * <Link href="/login" replace>Login</Link>
- * 
- * // Disable scroll to top
- * <Link href="/section#anchor" scroll={false}>Go to section</Link>
- * ```
- */
-export function Link({
-  href,
-  prefetch = true,
-  replace = false,
-  scroll = true,
-  showLoading = false,
-  loadingComponent,
-  onNavigationStart,
-  onNavigationEnd,
-  children,
-  className,
-  onClick,
-  onMouseEnter,
-  onFocus,
-  ...props
-}: LinkProps) {
-  const [isNavigating, setIsNavigating] = useState(false);
-  const linkRef = useRef<HTMLAnchorElement>(null);
-  const hasPrefetched = useRef(false);
-
-  // Prefetch on viewport visibility
-  useEffect(() => {
-    if (prefetch !== 'viewport' && prefetch !== true) return;
-    if (!isInternalUrl(href)) return;
-    if (hasPrefetched.current) return;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            prefetchUrl(href);
-            hasPrefetched.current = true;
-            observer.disconnect();
-          }
-        });
-      },
-      { rootMargin: '200px' }
-    );
-
-    if (linkRef.current) {
-      observer.observe(linkRef.current);
-    }
-
-    return () => observer.disconnect();
-  }, [href, prefetch]);
-
-  // Handle hover prefetch
-  const handleMouseEnter = useCallback(
-    (e: React.MouseEvent<HTMLAnchorElement>) => {
-      onMouseEnter?.(e);
-      
-      if ((prefetch === 'hover' || prefetch === true) && isInternalUrl(href)) {
-        prefetchUrl(href);
-      }
-    },
-    [href, prefetch, onMouseEnter]
-  );
-
-  // Handle focus prefetch (for keyboard navigation)
-  const handleFocus = useCallback(
-    (e: React.FocusEvent<HTMLAnchorElement>) => {
-      onFocus?.(e);
-      
-      if ((prefetch === 'hover' || prefetch === true) && isInternalUrl(href)) {
-        prefetchUrl(href);
-      }
-    },
-    [href, prefetch, onFocus]
-  );
-
-  // Handle click for client-side navigation
-  const handleClick = useCallback(
-    async (e: React.MouseEvent<HTMLAnchorElement>) => {
-      onClick?.(e);
-      
-      // Don't handle if default was prevented
-      if (e.defaultPrevented) return;
-      
-      // Don't handle if modifier keys are pressed (open in new tab, etc.)
-      if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
-      
-      // Don't handle external URLs
-      if (!isInternalUrl(href)) return;
-      
-      // Don't handle if target is set
-      if (props.target && props.target !== '_self') return;
-      
-      // Prevent default navigation
-      e.preventDefault();
-      
-      // Start navigation
-      setIsNavigating(true);
-      onNavigationStart?.();
-      
-      try {
-        // Fetch the new page
-        const response = await fetch(href, {
-          method: 'GET',
-          credentials: 'same-origin',
-          headers: {
-            'X-Flexi-Navigation': '1',
-            'Accept': 'text/html'
-          }
-        });
-        
-        if (response.ok) {
-          const html = await response.text();
-          
-          // Parse and update the page
-          const parser = new DOMParser();
-          const doc = parser.parseFromString(html, 'text/html');
-          
-          // Update title
-          const newTitle = doc.querySelector('title')?.textContent;
-          if (newTitle) {
-            document.title = newTitle;
-          }
-          
-          // Update body content (or specific container)
-          const newContent = doc.querySelector('#root') || doc.body;
-          const currentContent = document.querySelector('#root') || document.body;
-          
-          if (newContent && currentContent) {
-            currentContent.innerHTML = newContent.innerHTML;
-          }
-          
-          // Update URL
-          navigate(href, { replace, scroll });
-        } else {
-          // Fallback to regular navigation on error
-          window.location.href = href;
-        }
-      } catch (error) {
-        // Fallback to regular navigation on error
-        window.location.href = href;
-      } finally {
-        setIsNavigating(false);
-        onNavigationEnd?.();
-      }
-    },
-    [href, replace, scroll, onClick, onNavigationStart, onNavigationEnd, props.target]
-  );
-
-  return (
-    <a
-      ref={linkRef}
-      href={href}
-      className={className}
-      onClick={handleClick}
-      onMouseEnter={handleMouseEnter}
-      onFocus={handleFocus}
-      data-prefetch={prefetch}
-      data-navigating={isNavigating || undefined}
-      {...props}
-    >
-      {showLoading && isNavigating ? (
-        loadingComponent || (
-          <span className="flexi-link-loading">
-            <span className="flexi-link-spinner" />
-            {children}
-          </span>
-        )
-      ) : (
-        children
-      )}
-    </a>
-  );
-}
-
-/**
- * Programmatic navigation function
- * 
- * @example
- * ```tsx
- * import { useRouter } from '@flexireact/core/client';
- * 
- * function MyComponent() {
- *   const router = useRouter();
- *   
- *   const handleClick = () => {
- *     router.push('/dashboard');
- *   };
- *   
- *   return <button onClick={handleClick}>Go to Dashboard</button>;
- * }
- * ```
- */
-export function useRouter() {
-  return {
-    push(url: string, options?: { scroll?: boolean }) {
-      navigate(url, { replace: false, scroll: options?.scroll ?? true });
-      // Trigger page reload for now (full SPA navigation requires more work)
-      window.location.href = url;
-    },
-    
-    replace(url: string, options?: { scroll?: boolean }) {
-      navigate(url, { replace: true, scroll: options?.scroll ?? true });
-      window.location.href = url;
-    },
-    
-    back() {
-      window.history.back();
-    },
-    
-    forward() {
-      window.history.forward();
-    },
-    
-    prefetch(url: string) {
-      if (isInternalUrl(url)) {
-        prefetchUrl(url);
-      }
-    },
-    
-    refresh() {
-      window.location.reload();
-    }
-  };
-}
-
-export default Link;