frontend-hamroun 1.2.77 → 1.2.79

package/templates/complete-app/package.json

@@ -1,40 +1,17 @@
 {
-  "name": "complete-app",
-  "version": "1.0.0",
-  "description": "Complete Frontend Hamroun App with all features: SSR, WASM, API routes, and more",
+  "name": "ssr-app",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
-    "dev": "cross-env NODE_ENV=development node build.js --serve",
-    "build": "cross-env NODE_ENV=production node build.js",
-    "build:wasm": "node build.js --wasm-only",
-    "start": "cross-env NODE_ENV=production node dist/server.js",
-    "test": "vitest run",
-    "wasm:build": "cd src/wasm && ./build.sh"
+    "dev": "node server.js",
+    "start": "node server.js",
+    "build": "echo 'No build step required for this template'"
   },
   "dependencies": {
-    "compression": "^1.7.4",
-    "cors": "^2.8.5",
-    "dotenv": "^16.3.1",
+    "compression": "^1.8.0",
+    "dotenv": "^16.0.3",
     "express": "^4.18.2",
     "frontend-hamroun": "latest",
-    "jsonwebtoken": "^9.0.2",
-    "socket.io": "^4.7.2"
-  },
-  "devDependencies": {
-    "@types/compression": "^1.7.3",
-    "@types/cors": "^2.8.14",
-    "@types/express": "^4.17.18",
-    "@types/jsonwebtoken": "^9.0.3",
-    "@types/node": "^20.8.2",
-    "autoprefixer": "^10.4.14",
-    "chokidar": "^3.5.3",
-    "cross-env": "^7.0.3",
-    "esbuild": "^0.19.5",
-    "postcss": "^8.4.27",
-    "tailwindcss": "^3.3.3",
-    "vitest": "^0.34.6"
-  },
-  "engines": {
-    "node": ">=16.0.0"
+    "node-fetch": "^3.3.1"
   }
 }

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

@@ -0,0 +1,119 @@
+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

@@ -0,0 +1,157 @@
+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

@@ -0,0 +1,290 @@
+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.';