@flexireact/core 3.0.0 → 3.0.2

package/core/client/hydration.ts

@@ -1,147 +0,0 @@
-/**
- * FlexiReact Client Hydration
- * Handles selective hydration of islands and full app hydration
- */
-
-import React from 'react';
-import { hydrateRoot, createRoot } from 'react-dom/client';
-
-// Extend Window interface for __FLEXI_DATA__
-declare global {
-  interface Window {
-    __FLEXI_DATA__?: {
-      islands?: any[];
-      props?: Record<string, any>;
-    };
-  }
-}
-
-/**
- * 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.ts

@@ -1,12 +0,0 @@
-/**
- * FlexiReact Client Runtime
- * Handles hydration, navigation, and client-side interactivity
- */
-
-export { hydrateIsland, hydrateApp } from './hydration.js';
-export { navigate, prefetch, Link as NavLink } from './navigation.js';
-export { useIsland, IslandBoundary } from './islands.js';
-
-// Enhanced Link component with prefetching
-export { Link, useRouter } from './Link.js';
-export type { LinkProps } from './Link.js';

package/core/client/islands.ts

@@ -1,143 +0,0 @@
-/**
- * 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
- */
-interface LazyIslandOptions {
-  fallback?: React.ReactNode;
-  name?: string;
-}
-
-export function createClientIsland(loader: () => Promise<any>, options: LazyIslandOptions = {}) {
-  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
-};

package/core/client/navigation.ts

@@ -1,212 +0,0 @@
-/**
- * FlexiReact Client Navigation
- * Client-side navigation with prefetching
- */
-
-import React from 'react';
-
-// Navigation state
-const navigationState: {
-  listeners: Set<(url: string) => void>;
-  prefetched: Set<string>;
-} = {
-  listeners: new Set(),
-  prefetched: new Set()
-};
-
-/**
- * Navigates to a new URL
- */
-interface NavigateOptions {
-  replace?: boolean;
-  scroll?: boolean;
-}
-
-export function navigate(url: string, options: NavigateOptions = {}) {
-  const { replace = false, scroll = true } = options;
-
-  if (replace) {
-    window.history.replaceState({}, '', url);
-  } else {
-    window.history.pushState({}, '', url);
-  }
-
-  // Dispatch navigation event
-  window.dispatchEvent(new CustomEvent('flexi:navigate', {
-    detail: { url, replace, scroll }
-  }));
-
-  // Scroll to top if needed
-  if (scroll) {
-    window.scrollTo(0, 0);
-  }
-
-  // Notify listeners
-  navigationState.listeners.forEach(listener => listener(url));
-
-  // Fetch and render new page
-  return fetchAndRender(url);
-}
-
-/**
- * Prefetches a URL for faster navigation
- */
-export function prefetch(url) {
-  if (navigationState.prefetched.has(url)) {
-    return Promise.resolve();
-  }
-
-  navigationState.prefetched.add(url);
-
-  // Create a link element for prefetching
-  const link = document.createElement('link');
-  link.rel = 'prefetch';
-  link.href = url;
-  document.head.appendChild(link);
-
-  return Promise.resolve();
-}
-
-/**
- * Fetches and renders a new page
- */
-async function fetchAndRender(url) {
-  try {
-    const response = await fetch(url, {
-      headers: {
-        'X-Flexi-Navigation': 'true'
-      }
-    });
-
-    if (!response.ok) {
-      throw new Error(`Navigation failed: ${response.status}`);
-    }
-
-    const html = await response.text();
-    
-    // Parse the HTML
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, 'text/html');
-
-    // Update the page content
-    const newRoot = doc.getElementById('root');
-    const currentRoot = document.getElementById('root');
-
-    if (newRoot && currentRoot) {
-      currentRoot.innerHTML = newRoot.innerHTML;
-    }
-
-    // Update the title
-    document.title = doc.title;
-
-    // Update meta tags
-    updateMetaTags(doc);
-
-    // Re-hydrate islands
-    window.dispatchEvent(new CustomEvent('flexi:pageload'));
-
-  } catch (error) {
-    console.error('Navigation error:', error);
-    // Fallback to full page navigation
-    window.location.href = url;
-  }
-}
-
-/**
- * Updates meta tags from new document
- */
-function updateMetaTags(doc) {
-  // Remove old meta tags
-  document.querySelectorAll('meta[data-flexi]').forEach(el => el.remove());
-
-  // Add new meta tags
-  doc.querySelectorAll('meta').forEach(meta => {
-    if (meta.name || meta.property) {
-      const newMeta = meta.cloneNode(true);
-      newMeta.setAttribute('data-flexi', 'true');
-      document.head.appendChild(newMeta);
-    }
-  });
-}
-
-/**
- * Link component for client-side navigation
- */
-export function Link({ href, children, prefetch: shouldPrefetch = true, replace = false, className, ...props }) {
-  const handleClick = (e) => {
-    // Allow normal navigation for external links or modified clicks
-    if (
-      e.ctrlKey ||
-      e.metaKey ||
-      e.shiftKey ||
-      e.button !== 0 ||
-      href.startsWith('http') ||
-      href.startsWith('//')
-    ) {
-      return;
-    }
-
-    e.preventDefault();
-    navigate(href, { replace });
-  };
-
-  const handleMouseEnter = () => {
-    if (shouldPrefetch) {
-      prefetch(href);
-    }
-  };
-
-  return React.createElement('a', {
-    href,
-    onClick: handleClick,
-    onMouseEnter: handleMouseEnter,
-    className,
-    ...props
-  }, children);
-}
-
-/**
- * Hook to listen for navigation events
- */
-export function useNavigation() {
-  const [pathname, setPathname] = React.useState(
-    typeof window !== 'undefined' ? window.location.pathname : '/'
-  );
-
-  React.useEffect(() => {
-    const handleNavigation = (url) => {
-      setPathname(new URL(url, window.location.origin).pathname);
-    };
-
-    navigationState.listeners.add(handleNavigation);
-
-    const handlePopState = () => {
-      setPathname(window.location.pathname);
-      navigationState.listeners.forEach(listener => listener(window.location.pathname));
-    };
-
-    window.addEventListener('popstate', handlePopState);
-
-    return () => {
-      navigationState.listeners.delete(handleNavigation);
-      window.removeEventListener('popstate', handlePopState);
-    };
-  }, []);
-
-  return { pathname, navigate, prefetch };
-}
-
-// Setup popstate listener
-if (typeof window !== 'undefined') {
-  window.addEventListener('popstate', () => {
-    const url = window.location.pathname + window.location.search;
-    navigationState.listeners.forEach(listener => listener(url));
-  });
-}
-
-export default {
-  navigate,
-  prefetch,
-  Link,
-  useNavigation
-};

package/core/client/runtime.ts

@@ -1,52 +0,0 @@
-/**
- * FlexiReact Client Runtime
- * Main entry point for client-side JavaScript
- */
-
-import { hydrateAllIslands, setupProgressiveHydration } from './hydration.js';
-import { navigate, prefetch } from './navigation.js';
-
-// Extend Window interface
-declare global {
-  interface Window {
-    FlexiReact: {
-      navigate: typeof navigate;
-      prefetch: typeof prefetch;
-      hydrateAllIslands: typeof hydrateAllIslands;
-      setupProgressiveHydration: typeof setupProgressiveHydration;
-    };
-    __FLEXI_DATA__?: {
-      islands?: any[];
-      props?: Record<string, any>;
-    };
-  }
-}
-
-// Expose to global scope
-window.FlexiReact = {
-  navigate,
-  prefetch,
-  hydrateAllIslands,
-  setupProgressiveHydration
-};
-
-// Auto-setup on page load
-document.addEventListener('DOMContentLoaded', () => {
-  // Setup progressive hydration for islands
-  if (window.__FLEXI_DATA__?.islands) {
-    setupProgressiveHydration(window.__FLEXI_DATA__.islands);
-  }
-
-  // Dispatch ready event
-  window.dispatchEvent(new CustomEvent('flexi:ready'));
-});
-
-// Handle page transitions
-window.addEventListener('flexi:pageload', () => {
-  // Re-setup hydration after navigation
-  if (window.__FLEXI_DATA__?.islands) {
-    setupProgressiveHydration(window.__FLEXI_DATA__.islands);
-  }
-});
-
-console.log('⚡ FlexiReact v2 client runtime loaded');

package/core/config.ts

@@ -1,116 +0,0 @@
-/**
- * FlexiReact Configuration System
- * Handles loading and merging of configuration from flexireact.config.js
- */
-
-import fs from 'fs';
-import path from 'path';
-import { pathToFileURL } from 'url';
-
-// Default configuration
-export const defaultConfig = {
-  // Directories
-  pagesDir: 'pages',
-  layoutsDir: 'layouts',
-  publicDir: 'public',
-  outDir: '.flexi',
-  
-  // Build options
-  build: {
-    target: 'es2022',
-    minify: true,
-    sourcemap: true,
-    splitting: true
-  },
-  
-  // Server options
-  server: {
-    port: 3000,
-    host: 'localhost'
-  },
-  
-  // SSG options
-  ssg: {
-    enabled: false,
-    paths: []
-  },
-  
-  // Islands (partial hydration)
-  islands: {
-    enabled: true
-  },
-  
-  // RSC options
-  rsc: {
-    enabled: true
-  },
-  
-  // Plugins
-  plugins: [],
-  
-  // Styles (CSS files to include)
-  styles: [],
-  
-  // Scripts (JS files to include)
-  scripts: [],
-  
-  // Favicon path
-  favicon: null
-};
-
-/**
- * Loads configuration from the project root
- * @param {string} projectRoot - Path to project root
- * @returns {Object} Merged configuration
- */
-export async function loadConfig(projectRoot: string) {
-  // Try .ts first, then .js
-  const configPathTs = path.join(projectRoot, 'flexireact.config.ts');
-  const configPathJs = path.join(projectRoot, 'flexireact.config.js');
-  const configPath = fs.existsSync(configPathTs) ? configPathTs : configPathJs;
-  
-  let userConfig = {};
-  
-  if (fs.existsSync(configPath)) {
-    try {
-      const configUrl = pathToFileURL(configPath).href;
-      const module = await import(`${configUrl}?t=${Date.now()}`);
-      userConfig = module.default || module;
-    } catch (error: any) {
-      console.warn('Warning: Failed to load flexireact config:', error.message);
-    }
-  }
-  
-  // Deep merge configs
-  return deepMerge(defaultConfig, userConfig);
-}
-
-/**
- * Deep merge two objects
- */
-function deepMerge(target, source) {
-  const result = { ...target };
-  
-  for (const key in source) {
-    if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
-      result[key] = deepMerge(target[key] || {}, source[key]);
-    } else {
-      result[key] = source[key];
-    }
-  }
-  
-  return result;
-}
-
-/**
- * Resolves all paths in config relative to project root
- */
-export function resolvePaths(config, projectRoot) {
-  return {
-    ...config,
-    pagesDir: path.resolve(projectRoot, config.pagesDir),
-    layoutsDir: path.resolve(projectRoot, config.layoutsDir),
-    publicDir: path.resolve(projectRoot, config.publicDir),
-    outDir: path.resolve(projectRoot, config.outDir)
-  };
-}