@flexireact/core 3.0.0 → 3.0.2

package/core/islands/index.ts

@@ -1,293 +0,0 @@
-/**
- * FlexiReact Islands Architecture
- * 
- * Islands allow partial hydration - only interactive components are hydrated on the client,
- * while static content remains as HTML. This dramatically reduces JavaScript bundle size.
- * 
- * Usage:
- * - Add 'use island' at the top of a component file
- * - The component will be rendered on server and hydrated on client
- * - Non-island components are pure HTML (no JS)
- */
-
-import React from 'react';
-import { renderToString } from 'react-dom/server';
-import crypto from 'crypto';
-
-// Island registry for tracking all islands in a render
-const islandRegistry = new Map();
-
-/**
- * Generates a unique island ID
- */
-function generateIslandId(componentName) {
-  const hash = crypto.randomBytes(4).toString('hex');
-  return `island-${componentName}-${hash}`;
-}
-
-/**
- * Island wrapper component for server-side rendering
- */
-export function Island({ component: Component, props = {}, name, clientPath }) {
-  const islandId = generateIslandId(name);
-  
-  // Register island for hydration
-  islandRegistry.set(islandId, {
-    id: islandId,
-    name,
-    clientPath,
-    props
-  });
-
-  // Render the component
-  const content = renderToString(React.createElement(Component, props));
-
-  // Return wrapper with hydration marker
-  return React.createElement('div', {
-    'data-island': islandId,
-    'data-island-name': name,
-    'data-island-props': JSON.stringify(props),
-    dangerouslySetInnerHTML: { __html: content }
-  });
-}
-
-/**
- * Gets all registered islands and clears the registry
- */
-export function getRegisteredIslands() {
-  const islands = Array.from(islandRegistry.values());
-  islandRegistry.clear();
-  return islands;
-}
-
-/**
- * Creates an island component wrapper
- */
-interface IslandOptions {
-  name?: string;
-  clientPath?: string;
-}
-
-export function createIsland(Component: React.ComponentType<any>, options: IslandOptions = {}) {
-  const { name = (Component as any).name || 'Island', clientPath } = options;
-
-  function IslandWrapper(props) {
-    return Island({
-      component: Component,
-      props,
-      name,
-      clientPath: clientPath || `/_flexi/islands/${name}.js`
-    });
-  }
-
-  IslandWrapper.displayName = `Island(${name})`;
-  IslandWrapper.isIsland = true;
-  IslandWrapper.originalComponent = Component;
-
-  return IslandWrapper;
-}
-
-/**
- * Generates the client-side hydration script
- */
-export function generateHydrationScript(islands) {
-  if (!islands.length) return '';
-
-  const islandData = islands.map(island => ({
-    id: island.id,
-    name: island.name,
-    path: island.clientPath,
-    props: island.props
-  }));
-
-  return `
-<script type="module">
-  const islands = ${JSON.stringify(islandData)};
-  
-  async function hydrateIslands() {
-    const { hydrateRoot } = await import('/_flexi/react-dom-client.js');
-    const React = await import('/_flexi/react.js');
-    
-    for (const island of islands) {
-      try {
-        const element = document.querySelector(\`[data-island="\${island.id}"]\`);
-        if (!element) continue;
-        
-        const module = await import(island.path);
-        const Component = module.default;
-        
-        // Hydrate the island
-        hydrateRoot(element, React.createElement(Component, island.props));
-        
-        // Mark as hydrated
-        element.setAttribute('data-hydrated', 'true');
-      } catch (error) {
-        console.error(\`Failed to hydrate island \${island.name}:\`, error);
-      }
-    }
-  }
-  
-  // Hydrate when DOM is ready
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', hydrateIslands);
-  } else {
-    hydrateIslands();
-  }
-</script>`;
-}
-
-/**
- * Island loading strategies
- */
-export const LoadStrategy = {
-  // Hydrate immediately when page loads
-  IMMEDIATE: 'immediate',
-  // Hydrate when island becomes visible
-  VISIBLE: 'visible',
-  // Hydrate when user interacts with the page
-  IDLE: 'idle',
-  // Hydrate on specific media query
-  MEDIA: 'media'
-};
-
-/**
- * Creates a lazy island that hydrates based on strategy
- */
-interface LazyIslandOptions {
-  name?: string;
-  clientPath?: string;
-  strategy?: string;
-  media?: string | null;
-}
-
-export function createLazyIsland(Component: React.ComponentType<any>, options: LazyIslandOptions = {}) {
-  const {
-    name = (Component as any).name || 'LazyIsland',
-    clientPath,
-    strategy = LoadStrategy.VISIBLE,
-    media = null
-  } = options;
-
-  function LazyIslandWrapper(props) {
-    const islandId = generateIslandId(name);
-    const content = renderToString(React.createElement(Component, props));
-
-    // Register with loading strategy
-    islandRegistry.set(islandId, {
-      id: islandId,
-      name,
-      clientPath: clientPath || `/_flexi/islands/${name}.js`,
-      props,
-      strategy,
-      media
-    });
-
-    return React.createElement('div', {
-      'data-island': islandId,
-      'data-island-name': name,
-      'data-island-strategy': strategy,
-      'data-island-media': media,
-      'data-island-props': JSON.stringify(props),
-      dangerouslySetInnerHTML: { __html: content }
-    });
-  }
-
-  LazyIslandWrapper.displayName = `LazyIsland(${name})`;
-  LazyIslandWrapper.isIsland = true;
-  LazyIslandWrapper.isLazy = true;
-
-  return LazyIslandWrapper;
-}
-
-/**
- * Generates advanced hydration script with loading strategies
- */
-export function generateAdvancedHydrationScript(islands) {
-  if (!islands.length) return '';
-
-  const islandData = islands.map(island => ({
-    id: island.id,
-    name: island.name,
-    path: island.clientPath,
-    props: island.props,
-    strategy: island.strategy || LoadStrategy.IMMEDIATE,
-    media: island.media
-  }));
-
-  return `
-<script type="module">
-  const islands = ${JSON.stringify(islandData)};
-  
-  async function hydrateIsland(island) {
-    const element = document.querySelector(\`[data-island="\${island.id}"]\`);
-    if (!element || element.hasAttribute('data-hydrated')) return;
-    
-    try {
-      const { hydrateRoot } = await import('/_flexi/react-dom-client.js');
-      const React = await import('/_flexi/react.js');
-      const module = await import(island.path);
-      const Component = module.default;
-      
-      hydrateRoot(element, React.createElement(Component, island.props));
-      element.setAttribute('data-hydrated', 'true');
-    } catch (error) {
-      console.error(\`Failed to hydrate island \${island.name}:\`, error);
-    }
-  }
-  
-  // Intersection Observer for visible strategy
-  const visibleObserver = new IntersectionObserver((entries) => {
-    entries.forEach(entry => {
-      if (entry.isIntersecting) {
-        const id = entry.target.getAttribute('data-island');
-        const island = islands.find(i => i.id === id);
-        if (island) {
-          hydrateIsland(island);
-          visibleObserver.unobserve(entry.target);
-        }
-      }
-    });
-  }, { rootMargin: '50px' });
-  
-  // Process islands based on strategy
-  function processIslands() {
-    for (const island of islands) {
-      const element = document.querySelector(\`[data-island="\${island.id}"]\`);
-      if (!element) continue;
-      
-      switch (island.strategy) {
-        case 'immediate':
-          hydrateIsland(island);
-          break;
-        case 'visible':
-          visibleObserver.observe(element);
-          break;
-        case 'idle':
-          requestIdleCallback(() => hydrateIsland(island));
-          break;
-        case 'media':
-          if (island.media && window.matchMedia(island.media).matches) {
-            hydrateIsland(island);
-          }
-          break;
-      }
-    }
-  }
-  
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', processIslands);
-  } else {
-    processIslands();
-  }
-</script>`;
-}
-
-export default {
-  Island,
-  createIsland,
-  createLazyIsland,
-  getRegisteredIslands,
-  generateHydrationScript,
-  generateAdvancedHydrationScript,
-  LoadStrategy
-};

package/core/loader.ts

@@ -1,111 +0,0 @@
-import { transformSync } from 'esbuild';
-import { readFileSync } from 'fs';
-import { fileURLToPath, pathToFileURL } from 'url';
-import path from 'path';
-import { createRequire } from 'module';
-
-const require = createRequire(import.meta.url);
-
-// Get the framework's React path to ensure single instance
-const frameworkReactPath = require.resolve('react');
-const frameworkReactDir = path.dirname(frameworkReactPath);
-
-/**
- * Custom ESM loader for JSX files
- * This allows Node.js to import .jsx files directly
- */
-
-export async function load(url, context, nextLoad) {
-  // Handle .jsx, .tsx, and .ts files
-  const isJsx = url.endsWith('.jsx') || url.includes('.jsx?');
-  const isTsx = url.endsWith('.tsx') || url.includes('.tsx?');
-  const isTs = url.endsWith('.ts') || url.includes('.ts?');
-  
-  if (isJsx || isTsx || isTs) {
-    // Remove query string for file reading
-    const cleanUrl = url.split('?')[0];
-    const filePath = fileURLToPath(cleanUrl);
-    
-    // Read the source file
-    let source = readFileSync(filePath, 'utf-8');
-    
-    // Remove 'use client', 'use server', 'use island' directives
-    // These are handled at build time, not runtime
-    source = source.replace(/^['"]use (client|server|island)['"];?\s*/m, '');
-    
-    // Determine the loader based on file extension
-    const loader = isTsx ? 'tsx' : isTs ? 'ts' : 'jsx';
-    
-    // Transform to JS using esbuild
-    // Use classic JSX transform to avoid jsx-runtime issues
-    const result = transformSync(source, {
-      loader,
-      format: 'esm',
-      jsx: 'transform',
-      jsxFactory: 'React.createElement',
-      jsxFragment: 'React.Fragment',
-      target: 'node18'
-    });
-    
-    return {
-      format: 'module',
-      source: result.code,
-      shortCircuit: true
-    };
-  }
-  
-  // Let Node.js handle other file types
-  return nextLoad(url, context);
-}
-
-/**
- * Resolve hook to ensure single React instance and handle TS/TSX imports
- */
-export async function resolve(specifier, context, nextResolve) {
-  // Redirect react imports to framework's React
-  if (specifier === 'react' || specifier === 'react-dom' || specifier.startsWith('react/') || specifier.startsWith('react-dom/')) {
-    try {
-      const resolved = require.resolve(specifier);
-      return {
-        url: pathToFileURL(resolved).href,
-        shortCircuit: true
-      };
-    } catch {
-      // Fall through to default resolution
-    }
-  }
-  
-  // Handle TypeScript file imports (resolve .ts/.tsx extensions)
-  if (context.parentURL && !specifier.startsWith('node:') && !specifier.startsWith('data:')) {
-    // Try to resolve with .tsx, .ts, .jsx extensions
-    const extensions = ['.tsx', '.ts', '.jsx', '.js'];
-    const parentPath = fileURLToPath(context.parentURL);
-    const parentDir = path.dirname(parentPath);
-    
-    for (const ext of extensions) {
-      try {
-        const possiblePath = path.resolve(parentDir, specifier + ext);
-        if (require('fs').existsSync(possiblePath)) {
-          return {
-            url: pathToFileURL(possiblePath).href,
-            shortCircuit: true
-          };
-        }
-        
-        // Also try index files
-        const indexPath = path.resolve(parentDir, specifier, 'index' + ext);
-        if (require('fs').existsSync(indexPath)) {
-          return {
-            url: pathToFileURL(indexPath).href,
-            shortCircuit: true
-          };
-        }
-      } catch {
-        // Continue to next extension
-      }
-    }
-  }
-  
-  return nextResolve(specifier, context);
-}
-

package/core/logger.ts

@@ -1,242 +0,0 @@
-/**
- * FlexiReact Logger
- * Premium console output inspired by Next.js, Vite, and Bun
- */
-
-// ANSI color codes
-const colors = {
-  reset: '\x1b[0m',
-  bold: '\x1b[1m',
-  dim: '\x1b[2m',
-  italic: '\x1b[3m',
-  underline: '\x1b[4m',
-  
-  // Text colors
-  black: '\x1b[30m',
-  red: '\x1b[31m',
-  green: '\x1b[32m',
-  yellow: '\x1b[33m',
-  blue: '\x1b[34m',
-  magenta: '\x1b[35m',
-  cyan: '\x1b[36m',
-  white: '\x1b[37m',
-  gray: '\x1b[90m',
-  
-  // Bright colors
-  brightRed: '\x1b[91m',
-  brightGreen: '\x1b[92m',
-  brightYellow: '\x1b[93m',
-  brightBlue: '\x1b[94m',
-  brightMagenta: '\x1b[95m',
-  brightCyan: '\x1b[96m',
-  brightWhite: '\x1b[97m',
-  
-  // Background colors
-  bgRed: '\x1b[41m',
-  bgGreen: '\x1b[42m',
-  bgYellow: '\x1b[43m',
-  bgBlue: '\x1b[44m',
-  bgMagenta: '\x1b[45m',
-  bgCyan: '\x1b[46m',
-};
-
-const c = colors;
-
-// Get current time formatted
-function getTime() {
-  const now = new Date();
-  return `${c.dim}${now.toLocaleTimeString('en-US', { hour12: false })}${c.reset}`;
-}
-
-// Status code colors
-function getStatusColor(status) {
-  if (status >= 500) return c.red;
-  if (status >= 400) return c.yellow;
-  if (status >= 300) return c.cyan;
-  if (status >= 200) return c.green;
-  return c.white;
-}
-
-// Method colors
-function getMethodColor(method) {
-  const methodColors = {
-    GET: c.brightGreen,
-    POST: c.brightBlue,
-    PUT: c.brightYellow,
-    PATCH: c.brightMagenta,
-    DELETE: c.brightRed,
-    OPTIONS: c.gray,
-    HEAD: c.gray,
-  };
-  return methodColors[method] || c.white;
-}
-
-// Format time
-function formatTime(ms) {
-  if (ms < 1) return `${c.gray}<1ms${c.reset}`;
-  if (ms < 100) return `${c.green}${ms}ms${c.reset}`;
-  if (ms < 500) return `${c.yellow}${ms}ms${c.reset}`;
-  return `${c.red}${ms}ms${c.reset}`;
-}
-
-// FlexiReact ASCII Logo - Premium Design
-const LOGO = `
-${c.green}   ╭─────────────────────────────────────────────╮${c.reset}
-${c.green}   │${c.reset}                                             ${c.green}│${c.reset}
-${c.green}   │${c.reset}   ${c.brightGreen}⚡${c.reset} ${c.bold}${c.white}F L E X I R E A C T${c.reset}   ${c.dim}v1.0.0${c.reset}       ${c.green}│${c.reset}
-${c.green}   │${c.reset}                                             ${c.green}│${c.reset}
-${c.green}   │${c.reset}   ${c.dim}The Modern React Framework${c.reset}              ${c.green}│${c.reset}
-${c.green}   │${c.reset}                                             ${c.green}│${c.reset}
-${c.green}   ╰─────────────────────────────────────────────╯${c.reset}
-`;
-
-const MINI_LOGO = `${c.brightGreen}⚡${c.reset} ${c.bold}FlexiReact${c.reset}`;
-
-// Compact ready message like Next.js
-const READY_MSG = `   ${c.green}▲${c.reset} ${c.bold}Ready${c.reset} in`;
-
-export const logger = {
-  // Show startup logo
-  logo() {
-    console.log(LOGO);
-  },
-
-  // Server started - Next.js style
-  serverStart(config, startTime = Date.now()) {
-    const { port, host, mode, pagesDir, islands, rsc } = config;
-    const elapsed = Date.now() - startTime;
-    
-    console.log('');
-    console.log(`   ${c.green}▲${c.reset} ${c.bold}Ready${c.reset} in ${c.cyan}${elapsed}ms${c.reset}`);
-    console.log('');
-    console.log(`   ${c.dim}┌${c.reset} ${c.bold}Local:${c.reset}        ${c.cyan}http://${host}:${port}${c.reset}`);
-    console.log(`   ${c.dim}├${c.reset} ${c.bold}Environment:${c.reset}  ${mode === 'development' ? `${c.yellow}development${c.reset}` : `${c.green}production${c.reset}`}`);
-    if (islands) {
-      console.log(`   ${c.dim}├${c.reset} ${c.bold}Islands:${c.reset}      ${c.green}enabled${c.reset}`);
-    }
-    if (rsc) {
-      console.log(`   ${c.dim}├${c.reset} ${c.bold}RSC:${c.reset}          ${c.green}enabled${c.reset}`);
-    }
-    console.log(`   ${c.dim}└${c.reset} ${c.bold}Pages:${c.reset}        ${c.dim}${pagesDir}${c.reset}`);
-    console.log('');
-  },
-
-  // HTTP request log - Compact single line like Next.js
-  request(method: string, path: string, status: number, time: number, extra: { type?: string } = {}) {
-    const methodColor = getMethodColor(method);
-    const statusColor = getStatusColor(status);
-    const timeStr = formatTime(time);
-    
-    // Route type badge
-    let badge = '';
-    if (extra.type === 'static' || extra.type === 'ssg') {
-      badge = `${c.dim}○${c.reset}`;  // Static
-    } else if (extra.type === 'dynamic' || extra.type === 'ssr') {
-      badge = `${c.magenta}ƒ${c.reset}`;  // Function/SSR
-    } else if (extra.type === 'api') {
-      badge = `${c.blue}λ${c.reset}`;  // API
-    } else if (extra.type === 'asset') {
-      badge = `${c.dim}◦${c.reset}`;  // Asset
-    } else {
-      badge = `${c.magenta}ƒ${c.reset}`;
-    }
-    
-    const statusStr = `${statusColor}${status}${c.reset}`;
-    const methodStr = `${methodColor}${method}${c.reset}`;
-    
-    // Single line format like Next.js
-    console.log(`   ${badge} ${methodStr} ${path} ${statusStr} ${c.dim}in${c.reset} ${timeStr}`);
-  },
-
-  // Info message
-  info(msg) {
-    console.log(`   ${c.cyan}ℹ${c.reset} ${msg}`);
-  },
-
-  // Success message
-  success(msg) {
-    console.log(`   ${c.green}✓${c.reset} ${msg}`);
-  },
-
-  // Warning message
-  warn(msg) {
-    console.log(`   ${c.yellow}⚠${c.reset} ${c.yellow}${msg}${c.reset}`);
-  },
-
-  // Error message
-  error(msg, err = null) {
-    console.log(`   ${c.red}✗${c.reset} ${c.red}${msg}${c.reset}`);
-    if (err && err.stack) {
-      const stack = err.stack.split('\n').slice(1, 4).join('\n');
-      console.log(`${c.dim}${stack}${c.reset}`);
-    }
-  },
-
-  // Compilation message
-  compile(file, time) {
-    console.log(`   ${c.magenta}◉${c.reset} Compiled ${c.cyan}${file}${c.reset} ${c.dim}(${time}ms)${c.reset}`);
-  },
-
-  // Hot reload
-  hmr(file) {
-    console.log(`   ${c.yellow}↻${c.reset} HMR update: ${c.cyan}${file}${c.reset}`);
-  },
-
-  // Plugin loaded
-  plugin(name) {
-    console.log(`   ${c.blue}⬡${c.reset} Plugin: ${c.cyan}${name}${c.reset}`);
-  },
-
-  // Route info
-  route(path, type) {
-    const typeColors = {
-      static: c.green,
-      dynamic: c.yellow,
-      api: c.blue,
-    };
-    const color = typeColors[type] || c.white;
-    console.log(`   ${c.dim}├─${c.reset} ${path} ${color}[${type}]${c.reset}`);
-  },
-
-  // Divider
-  divider() {
-    console.log(`${c.dim}   ─────────────────────────────────────────${c.reset}`);
-  },
-
-  // Blank line
-  blank() {
-    console.log('');
-  },
-
-  // Port in use error with solution
-  portInUse(port) {
-    console.log(`
-${c.red}   ✗ Port ${port} is already in use${c.reset}
-
-   ${c.dim}Try one of these solutions:${c.reset}
-   
-   ${c.yellow}1.${c.reset} Kill the process using the port:
-      ${c.cyan}npx kill-port ${port}${c.reset}
-   
-   ${c.yellow}2.${c.reset} Use a different port in ${c.cyan}flexireact.config.js${c.reset}:
-      ${c.dim}server: { port: 3001 }${c.reset}
-   
-   ${c.yellow}3.${c.reset} Set PORT environment variable:
-      ${c.cyan}PORT=3001 npm run dev${c.reset}
-`);
-  },
-
-  // Build info
-  build(stats) {
-    console.log(`
-   ${c.green}✓${c.reset} Build complete!
-   
-   ${c.dim}├─${c.reset} Pages:    ${c.cyan}${stats.pages}${c.reset}
-   ${c.dim}├─${c.reset} API:      ${c.cyan}${stats.api}${c.reset}
-   ${c.dim}├─${c.reset} Assets:   ${c.cyan}${stats.assets}${c.reset}
-   ${c.dim}└─${c.reset} Time:     ${c.green}${stats.time}ms${c.reset}
-`);
-  },
-};
-
-export default logger;