@flexireact/core 1.0.0

package/core/cli/logger.js

@@ -0,0 +1,347 @@
+/**
+ * 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: '┤',
+};
+
+function createBox(content, options = {}) {
+  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, path, statusCode, duration, options = {}) {
+  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/hydration.js

@@ -0,0 +1,137 @@
+/**
+ * FlexiReact Client Hydration
+ * Handles selective hydration of islands and full app hydration
+ */
+
+import React from 'react';
+import { hydrateRoot, createRoot } from 'react-dom/client';
+
+/**
+ * Hydrates a specific island component
+ */
+export function hydrateIsland(islandId, Component, props) {
+  const element = document.querySelector(`[data-island="${islandId}"]`);
+  
+  if (!element) {
+    console.warn(`Island element not found: ${islandId}`);
+    return;
+  }
+
+  if (element.hasAttribute('data-hydrated')) {
+    return; // Already hydrated
+  }
+
+  try {
+    hydrateRoot(element, React.createElement(Component, props));
+    element.setAttribute('data-hydrated', 'true');
+    
+    // Dispatch custom event
+    element.dispatchEvent(new CustomEvent('flexi:hydrated', {
+      bubbles: true,
+      detail: { islandId, props }
+    }));
+  } catch (error) {
+    console.error(`Failed to hydrate island ${islandId}:`, error);
+    
+    // Fallback: try full render instead of hydration
+    try {
+      createRoot(element).render(React.createElement(Component, props));
+      element.setAttribute('data-hydrated', 'true');
+    } catch (fallbackError) {
+      console.error(`Fallback render also failed for ${islandId}:`, fallbackError);
+    }
+  }
+}
+
+/**
+ * Hydrates the entire application
+ */
+export function hydrateApp(App, props = {}) {
+  const root = document.getElementById('root');
+  
+  if (!root) {
+    console.error('Root element not found');
+    return;
+  }
+
+  // Get server-rendered props
+  const serverProps = window.__FLEXI_DATA__?.props || {};
+  const mergedProps = { ...serverProps, ...props };
+
+  try {
+    hydrateRoot(root, React.createElement(App, mergedProps));
+  } catch (error) {
+    console.error('Hydration failed, falling back to full render:', error);
+    createRoot(root).render(React.createElement(App, mergedProps));
+  }
+}
+
+/**
+ * Hydrates all islands on the page
+ */
+export async function hydrateAllIslands(islandModules) {
+  const islands = document.querySelectorAll('[data-island]');
+  
+  for (const element of islands) {
+    if (element.hasAttribute('data-hydrated')) continue;
+    
+    const islandId = element.getAttribute('data-island');
+    const islandName = element.getAttribute('data-island-name');
+    const propsJson = element.getAttribute('data-island-props');
+    
+    try {
+      const props = propsJson ? JSON.parse(propsJson) : {};
+      const module = islandModules[islandName];
+      
+      if (module) {
+        hydrateIsland(islandId, module.default || module, props);
+      }
+    } catch (error) {
+      console.error(`Failed to hydrate island ${islandName}:`, error);
+    }
+  }
+}
+
+/**
+ * Progressive hydration based on visibility
+ */
+export function setupProgressiveHydration(islandModules) {
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach(async (entry) => {
+        if (!entry.isIntersecting) return;
+        
+        const element = entry.target;
+        if (element.hasAttribute('data-hydrated')) return;
+        
+        const islandName = element.getAttribute('data-island-name');
+        const islandId = element.getAttribute('data-island');
+        const propsJson = element.getAttribute('data-island-props');
+        
+        try {
+          const props = propsJson ? JSON.parse(propsJson) : {};
+          const module = await islandModules[islandName]();
+          
+          hydrateIsland(islandId, module.default || module, props);
+          observer.unobserve(element);
+        } catch (error) {
+          console.error(`Failed to hydrate island ${islandName}:`, error);
+        }
+      });
+    },
+    { rootMargin: '50px' }
+  );
+
+  document.querySelectorAll('[data-island]:not([data-hydrated])').forEach(el => {
+    observer.observe(el);
+  });
+
+  return observer;
+}
+
+export default {
+  hydrateIsland,
+  hydrateApp,
+  hydrateAllIslands,
+  setupProgressiveHydration
+};

package/core/client/index.js

@@ -0,0 +1,8 @@
+/**
+ * FlexiReact Client Runtime
+ * Handles hydration, navigation, and client-side interactivity
+ */
+
+export { hydrateIsland, hydrateApp } from './hydration.js';
+export { navigate, prefetch, Link } from './navigation.js';
+export { useIsland, IslandBoundary } from './islands.js';

package/core/client/islands.js

@@ -0,0 +1,138 @@
+/**
+ * FlexiReact Client Islands
+ * Client-side island utilities
+ */
+
+import React from 'react';
+
+/**
+ * Hook to check if component is hydrated
+ */
+export function useIsland() {
+  const [isHydrated, setIsHydrated] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsHydrated(true);
+  }, []);
+
+  return { isHydrated };
+}
+
+/**
+ * Island boundary component
+ * Wraps interactive components for partial hydration
+ */
+export function IslandBoundary({ children, fallback = null, name = 'island' }) {
+  const { isHydrated } = useIsland();
+
+  // On server or before hydration, render children normally
+  // The server will wrap this in the island marker
+  if (!isHydrated && fallback) {
+    return fallback;
+  }
+
+  return React.createElement('div', {
+    'data-island-boundary': name,
+    children
+  });
+}
+
+/**
+ * Creates a lazy-loaded island
+ */
+export function createClientIsland(loader, options = {}) {
+  const { fallback = null, name = 'lazy-island' } = options;
+
+  return function LazyIsland(props) {
+    const [Component, setComponent] = React.useState(null);
+    const [error, setError] = React.useState(null);
+
+    React.useEffect(() => {
+      loader()
+        .then(mod => setComponent(() => mod.default || mod))
+        .catch(err => setError(err));
+    }, []);
+
+    if (error) {
+      return React.createElement('div', {
+        className: 'island-error',
+        children: `Failed to load ${name}`
+      });
+    }
+
+    if (!Component) {
+      return fallback || React.createElement('div', {
+        className: 'island-loading',
+        children: 'Loading...'
+      });
+    }
+
+    return React.createElement(Component, props);
+  };
+}
+
+/**
+ * Island with interaction trigger
+ * Only hydrates when user interacts
+ */
+export function InteractiveIsland({ children, trigger = 'click', fallback }) {
+  const [shouldHydrate, setShouldHydrate] = React.useState(false);
+  const ref = React.useRef(null);
+
+  React.useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const handleInteraction = () => {
+      setShouldHydrate(true);
+    };
+
+    element.addEventListener(trigger, handleInteraction, { once: true });
+
+    return () => {
+      element.removeEventListener(trigger, handleInteraction);
+    };
+  }, [trigger]);
+
+  if (!shouldHydrate) {
+    return React.createElement('div', {
+      ref,
+      'data-interactive-island': 'true',
+      children: fallback || children
+    });
+  }
+
+  return children;
+}
+
+/**
+ * Media query island
+ * Only hydrates when media query matches
+ */
+export function MediaIsland({ children, query, fallback }) {
+  const [matches, setMatches] = React.useState(false);
+
+  React.useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+    setMatches(mediaQuery.matches);
+
+    const handler = (e) => setMatches(e.matches);
+    mediaQuery.addEventListener('change', handler);
+
+    return () => mediaQuery.removeEventListener('change', handler);
+  }, [query]);
+
+  if (!matches) {
+    return fallback || null;
+  }
+
+  return children;
+}
+
+export default {
+  useIsland,
+  IslandBoundary,
+  createClientIsland,
+  InteractiveIsland,
+  MediaIsland
+};