frontend-hamroun 1.2.79 → 1.2.80

package/templates/complete-app/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "ssr-app",
-  "version": "0.1.0",
-  "type": "module",
-  "scripts": {
-    "dev": "node server.js",
-    "start": "node server.js",
-    "build": "echo 'No build step required for this template'"
-  },
-  "dependencies": {
-    "compression": "^1.8.0",
-    "dotenv": "^16.0.3",
-    "express": "^4.18.2",
-    "frontend-hamroun": "latest",
-    "node-fetch": "^3.3.1"
-  }
-}

package/templates/complete-app/pages/about.js

@@ -1,119 +0,0 @@
-import { jsx, useState, useEffect } from 'frontend-hamroun';
-
-// Simple animation component to demonstrate useEffect
-function FadeIn({ children, delay = 0 }) {
-  const [opacity, setOpacity] = useState(0);
-  
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setOpacity(1);
-    }, delay);
-    
-    return () => clearTimeout(timer);
-  }, [delay]);
-  
-  return jsx('div', { 
-    style: `opacity: ${opacity}; transition: opacity 0.5s ease-in-out;` 
-  }, children);
-}
-
-// Main about page component
-export default function AboutPage(props) {
-  const [activeSection, setActiveSection] = useState('overview');
-  
-  return jsx('div', { className: 'container' }, [
-    jsx('header', { className: 'header' }, [
-      jsx('h1', {}, 'About Frontend Hamroun'),
-      jsx('a', { href: '/', className: 'back-link' }, '← Back to Home')
-    ]),
-    
-    jsx('main', {}, [
-      jsx('div', { className: 'about-nav' }, [
-        jsx('button', { 
-          className: activeSection === 'overview' ? 'active' : '',
-          onClick: () => setActiveSection('overview')
-        }, 'Overview'),
-        jsx('button', { 
-          className: activeSection === 'features' ? 'active' : '',
-          onClick: () => setActiveSection('features')
-        }, 'Features'),
-        jsx('button', { 
-          className: activeSection === 'team' ? 'active' : '',
-          onClick: () => setActiveSection('team')
-        }, 'Team')
-      ]),
-      
-      // Overview section
-      activeSection === 'overview' && jsx(FadeIn, {}, [
-        jsx('section', { className: 'about-section' }, [
-          jsx('h2', {}, 'Framework Overview'),
-          jsx('p', {}, 'Frontend Hamroun is a lightweight JavaScript framework for building modern web applications with server-side rendering and client-side hydration.'),
-          jsx('p', {}, 'Inspired by React and other modern frameworks, it provides a simple yet powerful component model with hooks for state management and side effects.'),
-          jsx('p', {}, `This page was rendered on the server at ${props.api?.serverTime} and then hydrated on the client to provide interactivity.`)
-        ])
-      ]),
-      
-      // Features section
-      activeSection === 'features' && jsx(FadeIn, {}, [
-        jsx('section', { className: 'about-section' }, [
-          jsx('h2', {}, 'Key Features'),
-          jsx('ul', { className: 'feature-list expanded' }, [
-            jsx('li', {}, [
-              jsx('strong', {}, 'Server-Side Rendering (SSR):'),
-              jsx('p', {}, 'Render pages on the server for faster initial load and improved SEO.')
-            ]),
-            jsx('li', {}, [
-              jsx('strong', {}, 'Client-Side Hydration:'),
-              jsx('p', {}, 'Add interactivity to server-rendered HTML without rebuilding the DOM.')
-            ]),
-            jsx('li', {}, [
-              jsx('strong', {}, 'React-like Hooks:'),
-              jsx('p', {}, 'Use useState, useEffect, useMemo, and useRef for managing component state and lifecycle.')
-            ]),
-            jsx('li', {}, [
-              jsx('strong', {}, 'Context API:'),
-              jsx('p', {}, 'Share state between components without prop drilling using createContext and useContext.')
-            ]),
-            jsx('li', {}, [
-              jsx('strong', {}, 'WebAssembly Integration:'),
-              jsx('p', {}, 'Leverage high-performance Go code compiled to WebAssembly for computationally intensive tasks.')
-            ]),
-            jsx('li', {}, [
-              jsx('strong', {}, 'Automatic Route Handling:'),
-              jsx('p', {}, 'File-based routing system similar to Next.js for intuitive page organization.')
-            ])
-          ])
-        ])
-      ]),
-      
-      // Team section
-      activeSection === 'team' && jsx(FadeIn, {}, [
-        jsx('section', { className: 'about-section' }, [
-          jsx('h2', {}, 'The Team'),
-          jsx('div', { className: 'team-grid' }, [
-            jsx('div', { className: 'team-member' }, [
-              jsx('div', { className: 'avatar' }, 'MH'),
-              jsx('h3', {}, 'Mohamed Hamroun'),
-              jsx('p', { className: 'title' }, 'Lead Framework Developer'),
-              jsx('p', { className: 'bio' }, 'Creator of Frontend Hamroun and full-stack JavaScript enthusiast.')
-            ]),
-            jsx('div', { className: 'team-member' }, [
-              jsx('div', { className: 'avatar' }, 'AI'),
-              jsx('h3', {}, 'AI Assistant'),
-              jsx('p', { className: 'title' }, 'Documentation & Support'),
-              jsx('p', { className: 'bio' }, 'Helps with documentation, examples, and framework support.')
-            ])
-          ])
-        ])
-      ])
-    ]),
-    
-    jsx('footer', {}, [
-      jsx('p', {}, '© 2025 Frontend Hamroun Framework')
-    ])
-  ]);
-}
-
-// Static metadata for SEO
-AboutPage.getTitle = () => 'About - Frontend Hamroun Framework';
-AboutPage.getDescription = () => 'Learn about the Frontend Hamroun framework, its features, and the team behind it.';

package/templates/complete-app/pages/index.js

@@ -1,157 +0,0 @@
-import { jsx, useState, useEffect, useMemo, useRef, useContext, createContext } from 'frontend-hamroun';
-
-// Create a context for theme
-const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} });
-
-// Demo counter component using hooks
-function Counter({ initialCount = 0 }) {
-  const [count, setCount] = useState(initialCount);
-  const countRef = useRef(count);
-  const { theme } = useContext(ThemeContext);
-  
-  // Update ref when count changes
-  useEffect(() => {
-    countRef.current = count;
-    console.log('Count updated to:', count);
-  }, [count]);
-  
-  // Use memoization for expensive calculation
-  const isEven = useMemo(() => {
-    console.log('Computing isEven...');
-    return count % 2 === 0;
-  }, [count]);
-  
-  const themeClass = theme === 'dark' ? 'dark-theme' : 'light-theme';
-  
-  return jsx('div', { className: `counter ${themeClass}` }, [
-    jsx('h3', {}, 'Interactive Counter'),
-    jsx('p', {}, [
-      jsx('span', {}, `Current count: ${count} `),
-      jsx('span', { className: 'badge' }, isEven ? 'even' : 'odd')
-    ]),
-    jsx('div', { className: 'button-group' }, [
-      jsx('button', { 
-        onClick: () => setCount(c => c - 1),
-        className: 'btn'
-      }, 'Decrease'),
-      jsx('button', { 
-        onClick: () => setCount(c => c + 1),
-        className: 'btn primary'
-      }, 'Increase'),
-      jsx('button', { 
-        onClick: () => setCount(initialCount),
-        className: 'btn secondary'
-      }, 'Reset')
-    ])
-  ]);
-}
-
-// ServerInfo component to show server time
-function ServerInfo({ serverTime }) {
-  const [clientTime, setClientTime] = useState(new Date().toISOString());
-  const [timeVisible, setTimeVisible] = useState(true);
-  
-  // Update client time every second
-  useEffect(() => {
-    if (!timeVisible) return;
-    
-    const interval = setInterval(() => {
-      setClientTime(new Date().toISOString());
-    }, 1000);
-    
-    return () => clearInterval(interval);
-  }, [timeVisible]);
-  
-  return jsx('div', { className: 'server-info card' }, [
-    jsx('h3', {}, 'Server/Client Time'),
-    jsx('button', { 
-      onClick: () => setTimeVisible(!timeVisible),
-      className: 'btn small'
-    }, timeVisible ? 'Hide Times' : 'Show Times'),
-    timeVisible && jsx('div', { className: 'time-container' }, [
-      jsx('p', {}, [
-        jsx('strong', {}, 'Server Time: '),
-        jsx('span', {}, serverTime)
-      ]),
-      jsx('p', {}, [
-        jsx('strong', {}, 'Client Time: '),
-        jsx('span', {}, clientTime)
-      ]),
-      jsx('p', { className: 'note' }, 'The client time updates every second to demonstrate client-side effects.')
-    ])
-  ]);
-}
-
-// Main page component
-export default function HomePage(props) {
-  const [theme, setTheme] = useState('light');
-  const toggleTheme = () => setTheme(theme === 'light' ? 'dark' : 'light');
-  
-  const themeValue = useMemo(() => ({ theme, toggleTheme }), [theme]);
-  
-  return jsx(ThemeContext.Provider, { value: themeValue }, [
-    jsx('div', { className: `container ${theme}-theme` }, [
-      jsx('header', { className: 'header' }, [
-        jsx('div', { className: 'logo' }, [
-          jsx('h1', {}, 'Frontend Hamroun'),
-          jsx('span', { className: 'version' }, 'v1.2')
-        ]),
-        jsx('button', { 
-          onClick: toggleTheme,
-          className: 'theme-toggle'
-        }, theme === 'light' ? '🌙 Dark Mode' : '☀️ Light Mode')
-      ]),
-      
-      jsx('main', {}, [
-        jsx('section', { className: 'hero' }, [
-          jsx('h2', {}, 'Welcome to the Complete Server-Side Rendered App'),
-          jsx('p', {}, 'This demo showcases the power of Frontend Hamroun framework with server-side rendering and hydration.')
-        ]),
-        
-        jsx('div', { className: 'grid' }, [
-          jsx('div', { className: 'card' }, [
-            jsx('h3', {}, 'Framework Features'),
-            jsx('ul', { className: 'feature-list' }, [
-              jsx('li', {}, 'Server-Side Rendering'),
-              jsx('li', {}, 'Client-Side Hydration'),
-              jsx('li', {}, 'React-like Hooks (useState, useEffect, useMemo, useRef)'),
-              jsx('li', {}, 'Context API for State Management'),
-              jsx('li', {}, 'WebAssembly Integration'),
-              jsx('li', {}, 'SEO Optimization')
-            ])
-          ]),
-          
-          jsx('div', { className: 'card' }, [
-            jsx(Counter, { initialCount: props.params.count ? parseInt(props.params.count) : 0 })
-          ]),
-          
-          jsx('div', { className: 'card' }, [
-            jsx(ServerInfo, { serverTime: props.api?.serverTime || 'Not available' })
-          ]),
-          
-          jsx('div', { className: 'card' }, [
-            jsx('h3', {}, 'Navigation'),
-            jsx('nav', { className: 'nav-links' }, [
-              jsx('a', { href: '/', className: 'active' }, 'Home'),
-              jsx('a', { href: '/about', className: '' }, 'About'),
-              jsx('a', { href: '/users', className: '' }, 'Users'),
-              jsx('a', { href: '/wasm-demo', className: '' }, 'WebAssembly Demo')
-            ])
-          ])
-        ])
-      ]),
-      
-      jsx('footer', {}, [
-        jsx('p', {}, [
-          '© ',
-          jsx('span', {}, new Date().getFullYear()),
-          ' Frontend Hamroun Framework. Built with 💙 using SSR and hydration.'
-        ])
-      ])
-    ])
-  ]);
-}
-
-// Static metadata for SEO
-HomePage.getTitle = (props) => 'Frontend Hamroun - Modern JavaScript Framework';
-HomePage.getDescription = (props) => 'A server-side rendered demo of the Frontend Hamroun framework with React-like hooks and component architecture.';

package/templates/complete-app/pages/wasm-demo.js

@@ -1,290 +0,0 @@
-import { jsx, useState, useEffect } from 'frontend-hamroun';
-import { loadGoWasm } from 'frontend-hamroun/wasm';
-
-export default function WasmDemo(props) {
-  // State for WASM loading
-  const [wasm, setWasm] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  
-  // State for math demo
-  const [num1, setNum1] = useState(5);
-  const [num2, setNum2] = useState(3);
-  const [operation, setOperation] = useState('add');
-  const [result, setResult] = useState(null);
-  
-  // State for string operations
-  const [inputText, setInputText] = useState('Hello WebAssembly!');
-  const [processedText, setProcessedText] = useState('');
-  
-  // State for array processing
-  const [arrayInput, setArrayInput] = useState('apple, banana, orange');
-  const [arrayResult, setArrayResult] = useState('');
-  
-  // Load WASM module on client-side only
-  useEffect(() => {
-    async function loadWasmModule() {
-      setLoading(true);
-      try {
-        const wasmModule = await loadGoWasm('/wasm/example.wasm', {
-          debug: true
-        });
-        setWasm(wasmModule);
-        setError(null);
-        console.log('WASM module loaded:', wasmModule);
-      } catch (err) {
-        console.error('Failed to load WASM:', err);
-        setError(`Error loading WASM: ${err.message}`);
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    loadWasmModule();
-  }, []);
-
-  // Update result when inputs or operation change
-  useEffect(() => {
-    if (!wasm || !wasm.functions) return;
-    
-    try {
-      let calculatedResult;
-      switch (operation) {
-        case 'add':
-          calculatedResult = wasm.functions.goAdd(num1.toString(), num2.toString());
-          break;
-        case 'subtract':
-          calculatedResult = wasm.functions.goSubtract(num1.toString(), num2.toString());
-          break;
-        case 'multiply':
-          calculatedResult = wasm.functions.goMultiply(num1.toString(), num2.toString());
-          break;
-        case 'divide':
-          calculatedResult = wasm.functions.goDivide(num1.toString(), num2.toString());
-          break;
-        default:
-          calculatedResult = 'Unknown operation';
-      }
-      
-      setResult(calculatedResult);
-    } catch (err) {
-      setResult(`Error: ${err.message}`);
-    }
-  }, [wasm, num1, num2, operation]);
-  
-  // Handle text processing
-  const handleProcessText = () => {
-    if (!wasm || !wasm.functions) return;
-    
-    try {
-      // Process the text with the WASM module's goReverseString function
-      const reversed = wasm.functions.goReverseString(inputText);
-      setProcessedText(reversed);
-    } catch (err) {
-      setProcessedText(`Error: ${err.message}`);
-    }
-  };
-  
-  // Handle array processing
-  const handleProcessArray = () => {
-    if (!wasm || !wasm.functions) return;
-    
-    try {
-      // Process the array with the WASM module's goProcessArray function
-      const processed = wasm.functions.goProcessArray(arrayInput);
-      setArrayResult(processed);
-    } catch (err) {
-      setArrayResult(`Error: ${err.message}`);
-    }
-  };
-
-  // Handle factorial calculation
-  const [factorialInput, setFactorialInput] = useState(5);
-  const [factorialResult, setFactorialResult] = useState(null);
-  
-  const calculateFactorial = () => {
-    if (!wasm || !wasm.functions) return;
-    
-    try {
-      const result = wasm.functions.goCalculateFactorial(factorialInput.toString());
-      setFactorialResult(result);
-    } catch (err) {
-      setFactorialResult(`Error: ${err.message}`);
-    }
-  };
-
-  if (loading) {
-    return jsx('div', { className: 'container loading-container' }, [
-      jsx('h1', {}, 'WebAssembly Demo'),
-      jsx('div', { className: 'loading' }, [
-        jsx('div', { className: 'spinner' }),
-        jsx('p', {}, 'Loading WebAssembly module...')
-      ])
-    ]);
-  }
-
-  if (error) {
-    return jsx('div', { className: 'container error-container' }, [
-      jsx('h1', {}, 'WebAssembly Demo'),
-      jsx('div', { className: 'error-box' }, [
-        jsx('h3', {}, 'Error Loading WebAssembly'),
-        jsx('p', {}, error),
-        jsx('p', {}, 'Make sure your browser supports WebAssembly and that the WASM file is correctly built and accessible.')
-      ]),
-      jsx('a', { href: '/', className: 'button' }, 'Back to Home')
-    ]);
-  }
-
-  return jsx('div', { className: 'container' }, [
-    jsx('header', { className: 'header' }, [
-      jsx('h1', {}, 'WebAssembly Integration Demo'),
-      jsx('a', { href: '/', className: 'back-link' }, '← Back to Home')
-    ]),
-    
-    jsx('main', { className: 'wasm-demo' }, [
-      jsx('section', { className: 'intro-section' }, [
-        jsx('h2', {}, 'Go + WebAssembly Integration'),
-        jsx('p', {}, 'This page demonstrates how Frontend Hamroun integrates with WebAssembly modules compiled from Go. The following examples show different operations performed by Go code running in your browser.')
-      ]),
-      
-      jsx('div', { className: 'demo-grid' }, [
-        // Math Operations Demo
-        jsx('section', { className: 'card' }, [
-          jsx('h3', {}, 'Math Operations'),
-          
-          jsx('div', { className: 'form-grid' }, [
-            jsx('div', { className: 'form-group' }, [
-              jsx('label', { htmlFor: 'num1' }, 'First Number'),
-              jsx('input', {
-                id: 'num1',
-                type: 'number',
-                value: num1,
-                onChange: (e) => setNum1(parseInt(e.target.value))
-              })
-            ]),
-            
-            jsx('div', { className: 'form-group' }, [
-              jsx('label', { htmlFor: 'num2' }, 'Second Number'),
-              jsx('input', {
-                id: 'num2',
-                type: 'number',
-                value: num2,
-                onChange: (e) => setNum2(parseInt(e.target.value))
-              })
-            ]),
-            
-            jsx('div', { className: 'form-group' }, [
-              jsx('label', { htmlFor: 'operation' }, 'Operation'),
-              jsx('select', {
-                id: 'operation',
-                value: operation,
-                onChange: (e) => setOperation(e.target.value)
-              }, [
-                jsx('option', { value: 'add' }, 'Addition'),
-                jsx('option', { value: 'subtract' }, 'Subtraction'),
-                jsx('option', { value: 'multiply' }, 'Multiplication'),
-                jsx('option', { value: 'divide' }, 'Division')
-              ])
-            ])
-          ]),
-          
-          jsx('div', { className: 'result-box' }, [
-            jsx('div', { className: 'result-label' }, 'Result:'),
-            jsx('div', { className: 'result-value' }, result !== null ? result : 'Calculating...')
-          ])
-        ]),
-        
-        // String Operations Demo
-        jsx('section', { className: 'card' }, [
-          jsx('h3', {}, 'String Reversal'),
-          
-          jsx('div', { className: 'form-group' }, [
-            jsx('label', { htmlFor: 'inputText' }, 'Input Text'),
-            jsx('input', {
-              id: 'inputText',
-              type: 'text',
-              value: inputText,
-              onChange: (e) => setInputText(e.target.value)
-            })
-          ]),
-          
-          jsx('button', { 
-            onClick: handleProcessText,
-            className: 'btn primary'
-          }, 'Reverse Text'),
-          
-          jsx('div', { className: 'result-box' }, [
-            jsx('div', { className: 'result-label' }, 'Reversed Text:'),
-            jsx('div', { className: 'result-value' }, processedText || 'Click button to process')
-          ])
-        ]),
-        
-        // Factorial Calculation Demo
-        jsx('section', { className: 'card' }, [
-          jsx('h3', {}, 'Factorial Calculation'),
-          
-          jsx('div', { className: 'form-group' }, [
-            jsx('label', { htmlFor: 'factorialInput' }, 'Number (0-20)'),
-            jsx('input', {
-              id: 'factorialInput',
-              type: 'number',
-              min: '0',
-              max: '20',
-              value: factorialInput,
-              onChange: (e) => setFactorialInput(parseInt(e.target.value))
-            })
-          ]),
-          
-          jsx('button', { 
-            onClick: calculateFactorial,
-            className: 'btn primary'
-          }, 'Calculate Factorial'),
-          
-          jsx('div', { className: 'result-box' }, [
-            jsx('div', { className: 'result-label' }, `Factorial of ${factorialInput}:`),
-            jsx('div', { className: 'result-value' }, factorialResult || 'Click button to calculate')
-          ])
-        ]),
-        
-        // Array Processing Demo
-        jsx('section', { className: 'card' }, [
-          jsx('h3', {}, 'Array Processing'),
-          
-          jsx('div', { className: 'form-group' }, [
-            jsx('label', { htmlFor: 'arrayInput' }, 'Comma-separated values'),
-            jsx('input', {
-              id: 'arrayInput',
-              type: 'text',
-              value: arrayInput,
-              onChange: (e) => setArrayInput(e.target.value)
-            })
-          ]),
-          
-          jsx('button', { 
-            onClick: handleProcessArray,
-            className: 'btn primary'
-          }, 'Process Array'),
-          
-          jsx('div', { className: 'result-box' }, [
-            jsx('div', { className: 'result-label' }, 'Processed Array (uppercase):'),
-            jsx('div', { className: 'result-value array-result' }, arrayResult || 'Click button to process')
-          ])
-        ])
-      ]),
-      
-      jsx('section', { className: 'info-section' }, [
-        jsx('h3', {}, 'How It Works'),
-        jsx('p', {}, 'The computations on this page are performed by Go code compiled to WebAssembly. The WebAssembly binary is loaded by Frontend Hamroun\'s WASM utility and executed in your browser.'),
-        jsx('p', {}, 'This demonstrates how you can leverage the performance and type safety of Go while maintaining the interactivity of a JavaScript application.')
-      ])
-    ]),
-    
-    jsx('footer', {}, [
-      jsx('p', {}, '© 2025 Frontend Hamroun Framework - WebAssembly Demo')
-    ])
-  ]);
-}
-
-// Static metadata for SEO
-WasmDemo.getTitle = () => 'WebAssembly Demo - Frontend Hamroun';
-WasmDemo.getDescription = () => 'Interactive demonstration of WebAssembly integration with Go in the Frontend Hamroun framework.';

package/templates/complete-app/public/client.js

@@ -1,80 +0,0 @@
-import { hydrate, jsx, useState, useEffect, useMemo, useRef, useContext, batchUpdates, createContext } from 'frontend-hamroun';
-
-// Immediately invoked function to handle hydration
-(async function() {
-  try {
-    // Get the app container
-    const appRoot = document.getElementById('app');
-    if (!appRoot) {
-      console.error('App root element not found');
-      return;
-    }
-
-    // Get initial data from the server
-    let initialData = {};
-    try {
-      const dataElement = document.getElementById('__APP_DATA__');
-      if (dataElement && dataElement.textContent) {
-        initialData = JSON.parse(dataElement.textContent);
-        console.log('Initial data loaded:', initialData);
-      }
-    } catch (err) {
-      console.error('Error parsing initial data:', err);
-    }
-
-    // Path for component loading
-    const path = initialData.path || window.location.pathname;
-    const normalizedPath = path === '/' ? '/index' : path;
-    
-    try {
-      // Import the component for the current path
-      console.log(`Importing component for path: ${normalizedPath}`);
-      // First attempt to load the page component
-      const module = await import(`/pages${normalizedPath}.js`).catch(() => 
-        import(`/pages${normalizedPath}/index.js`));
-      
-      if (!module || !module.default) {
-        throw new Error(`No default export found for ${normalizedPath}`);
-      }
-
-      // Get the component
-      const PageComponent = module.default;
-      
-      // Use batchUpdates for better performance during hydration
-      batchUpdates(() => {
-        console.log('Hydrating app with props:', initialData);
-        // Hydrate the component
-        hydrate(jsx(PageComponent, initialData), appRoot);
-        console.log('Hydration complete for', normalizedPath);
-      });
-      
-    } catch (err) {
-      console.error(`Error loading or hydrating component: ${err.message}`);
-      
-      // Fallback to a simple component that shows the error
-      const ErrorComponent = (props) => {
-        const [showDetails, setShowDetails] = useState(false);
-        
-        return jsx('div', { className: 'error-container' }, [
-          jsx('h1', {}, 'Error Loading Page'),
-          jsx('p', {}, `Failed to load: ${normalizedPath}`),
-          jsx('button', { 
-            onClick: () => setShowDetails(!showDetails),
-            className: 'btn'
-          }, showDetails ? 'Hide Details' : 'Show Details'),
-          showDetails && jsx('pre', { className: 'error-details' }, 
-            `${err.message}\n${err.stack || ''}`
-          ),
-          jsx('a', { href: '/', className: 'button' }, 'Go Home')
-        ]);
-      };
-      
-      hydrate(jsx(ErrorComponent, initialData), appRoot);
-    }
-  } catch (err) {
-    console.error('Hydration failed:', err);
-  }
-})();
-
-// Make jsx globally available
-window.jsx = jsx;