@flexireact/core 1.0.0

package/core/client/navigation.js

@@ -0,0 +1,204 @@
+/**
+ * FlexiReact Client Navigation
+ * Client-side navigation with prefetching
+ */
+
+import React from 'react';
+
+// Navigation state
+const navigationState = {
+  listeners: new Set(),
+  prefetched: new Set()
+};
+
+/**
+ * Navigates to a new URL
+ */
+export function navigate(url, options = {}) {
+  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.js

@@ -0,0 +1,36 @@
+/**
+ * FlexiReact Client Runtime
+ * Main entry point for client-side JavaScript
+ */
+
+import { hydrateAllIslands, setupProgressiveHydration } from './hydration.js';
+import { navigate, prefetch } from './navigation.js';
+
+// 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.js

@@ -0,0 +1,113 @@
+/**
+ * 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) {
+  const configPath = path.join(projectRoot, 'flexireact.config.js');
+  
+  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) {
+      console.warn('Warning: Failed to load flexireact.config.js:', 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)
+  };
+}

package/core/context.js

@@ -0,0 +1,83 @@
+/**
+ * FlexiReact Context System
+ * Provides request context and shared state for SSR/RSC
+ */
+
+import React from 'react';
+
+// Server-side request context
+export const RequestContext = React.createContext(null);
+
+// Route context for nested routes
+export const RouteContext = React.createContext(null);
+
+// Layout context
+export const LayoutContext = React.createContext(null);
+
+/**
+ * Creates a request context value
+ */
+export function createRequestContext(req, res, params = {}, query = {}) {
+  return {
+    req,
+    res,
+    params,
+    query,
+    url: req.url,
+    method: req.method,
+    headers: req.headers,
+    cookies: parseCookies(req.headers.cookie || '')
+  };
+}
+
+/**
+ * Parse cookies from header string
+ */
+function parseCookies(cookieHeader) {
+  const cookies = {};
+  if (!cookieHeader) return cookies;
+  
+  cookieHeader.split(';').forEach(cookie => {
+    const [name, ...rest] = cookie.split('=');
+    if (name) {
+      cookies[name.trim()] = rest.join('=').trim();
+    }
+  });
+  
+  return cookies;
+}
+
+/**
+ * Hook to access request context (server-side only)
+ */
+export function useRequest() {
+  const context = React.useContext(RequestContext);
+  if (!context) {
+    throw new Error('useRequest must be used within a RequestContext provider');
+  }
+  return context;
+}
+
+/**
+ * Hook to access route params
+ */
+export function useParams() {
+  const context = React.useContext(RouteContext);
+  return context?.params || {};
+}
+
+/**
+ * Hook to access query parameters
+ */
+export function useQuery() {
+  const context = React.useContext(RouteContext);
+  return context?.query || {};
+}
+
+/**
+ * Hook to access current pathname
+ */
+export function usePathname() {
+  const context = React.useContext(RouteContext);
+  return context?.pathname || '/';
+}

package/core/dev.js

@@ -0,0 +1,47 @@
+#!/usr/bin/env node
+
+/**
+ * FlexiReact Dev Server Launcher
+ * This script starts the server with the JSX loader enabled
+ */
+
+import { spawn } from 'child_process';
+import { fileURLToPath, pathToFileURL } from 'url';
+import path from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const serverPath = path.join(__dirname, 'server.js');
+const loaderPath = path.join(__dirname, 'loader.js');
+
+// Convert to file:// URLs for Windows compatibility
+const loaderUrl = pathToFileURL(loaderPath).href;
+
+// Start Node.js with the custom loader
+const child = spawn(
+  process.execPath,
+  [
+    '--import',
+    `data:text/javascript,import { register } from 'node:module'; register('${loaderUrl.replace(/\\/g, '/')}', import.meta.url);`,
+    serverPath
+  ],
+  {
+    stdio: 'inherit',
+    cwd: process.cwd(),
+    env: process.env
+  }
+);
+
+child.on('error', (error) => {
+  console.error('Failed to start server:', error);
+  process.exit(1);
+});
+
+child.on('exit', (code) => {
+  process.exit(code || 0);
+});
+
+// Forward signals to child process
+process.on('SIGINT', () => child.kill('SIGINT'));
+process.on('SIGTERM', () => child.kill('SIGTERM'));

package/core/index.js

@@ -0,0 +1,76 @@
+/**
+ * FlexiReact v2 - Main Entry Point
+ * A modern React framework with RSC, SSG, Islands, and more
+ */
+
+// Core exports
+export { loadConfig, defaultConfig, resolvePaths } from './config.js';
+export { createRequestContext, useRequest, useParams, useQuery, usePathname } from './context.js';
+export * from './utils.js';
+
+// Router
+export { buildRouteTree, matchRoute, findRouteLayouts, RouteType } from './router/index.js';
+
+// Render
+export { renderPage, renderError, renderLoading } from './render/index.js';
+
+// Server
+export { createServer } from './server/index.js';
+
+// Build
+export { build, buildDev, BuildMode } from './build/index.js';
+
+// SSG
+export { generateStaticSite, SSGResult, ISRManager } from './ssg/index.js';
+
+// RSC
+export { 
+  processServerComponent, 
+  createClientReference, 
+  serializeRSCPayload,
+  createServerAction,
+  handleServerAction,
+  ServerBoundary,
+  ClientBoundary,
+  RSC_CONTENT_TYPE 
+} from './rsc/index.js';
+
+// Islands
+export { 
+  Island, 
+  createIsland, 
+  createLazyIsland,
+  getRegisteredIslands,
+  generateHydrationScript,
+  generateAdvancedHydrationScript,
+  LoadStrategy 
+} from './islands/index.js';
+
+// Middleware
+export { 
+  MiddlewareRequest, 
+  MiddlewareResponse, 
+  loadMiddleware, 
+  runMiddleware,
+  composeMiddleware,
+  middlewares 
+} from './middleware/index.js';
+
+// Plugins
+export { 
+  PluginManager, 
+  PluginHooks, 
+  pluginManager, 
+  loadPlugins, 
+  definePlugin,
+  builtinPlugins 
+} from './plugins/index.js';
+
+// Version
+export const VERSION = '2.0.0';
+
+// Default export
+export default {
+  VERSION,
+  createServer
+};