frontend-hamroun 1.2.75 → 1.2.77

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

@@ -0,0 +1,93 @@
+// Support both ESM and CommonJS importing styles
+const frontendHamroun = 
+  typeof require !== 'undefined' 
+    ? require('frontend-hamroun') 
+    : await import('frontend-hamroun');
+
+// Destructure the imports from either ESM or CJS modules
+const { 
+  hydrate, 
+  render, 
+  jsx, 
+  useState, 
+  useEffect, 
+  loadGoWasm,
+  createContext,
+  useContext
+} = frontendHamroun;
+
+// Import components
+import App from './components/App.js';
+
+// Initialize the app
+async function initApp() {
+  console.log('Initializing client-side app...');
+  
+  // Check if we need to hydrate (SSR) or do a fresh render
+  const rootElement = document.getElementById('app');
+  const shouldHydrate = rootElement.hasAttribute('data-ssr');
+  
+  try {
+    // Pre-load any WASM modules if needed
+    let wasmModule = null;
+    try {
+      wasmModule = await loadGoWasm('/wasm/example.wasm', {
+        debug: false,
+        goWasmPath: '/wasm/wasm_exec.js'
+      });
+      console.log('WASM module loaded successfully');
+    } catch (error) {
+      console.warn('WASM module loading skipped:', error.message);
+    }
+    
+    // Create initial state from SSR data if available
+    const initialDataElement = document.getElementById('__INITIAL_DATA__');
+    const initialData = initialDataElement 
+      ? JSON.parse(initialDataElement.textContent || '{}') 
+      : {};
+    
+    // Setup global context values
+    const appContext = {
+      wasm: wasmModule,
+      initialData,
+      // Add any other global values
+    };
+    
+    // Render or hydrate the app
+    if (shouldHydrate) {
+      console.log('Hydrating app from server-rendered HTML');
+      await hydrate(<App context={appContext} />, rootElement);
+    } else {
+      console.log('Rendering app from scratch (client-only)');
+      await render(<App context={appContext} />, rootElement);
+    }
+    
+    console.log('App initialization complete');
+  } catch (error) {
+    console.error('Failed to initialize app:', error);
+    
+    // Fallback to basic error display
+    rootElement.innerHTML = `
+      <div style="color: red; padding: 20px; border: 1px solid red; margin: 20px;">
+        <h2>Error Initializing App</h2>
+        <pre>${error.message}\n${error.stack}</pre>
+      </div>
+    `;
+  }
+}
+
+// Start the app when the DOM is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initApp);
+} else {
+  initApp();
+}
+
+// Export key utilities for components
+export { 
+  jsx, 
+  useState, 
+  useEffect, 
+  createContext,
+  useContext
+};

package/templates/complete-app/src/components/App.js

@@ -0,0 +1,66 @@
+import { jsx, useState, useEffect, createContext, useContext } from '../client.js';
+import Header from './Header.js';
+import Footer from './Footer.js';
+import Home from '../pages/Home.js';
+import About from '../pages/About.js';
+import WasmDemo from '../pages/WasmDemo.js';
+
+// Create context for global state
+export const AppContext = createContext({});
+
+// Simple router implementation
+function useRouter() {
+  const { initialData } = useContext(AppContext);
+  const [path, setPath] = useState(initialData?.path || '/');
+  
+  useEffect(() => {
+    // Update path when URL changes
+    const handlePopState = () => {
+      setPath(window.location.pathname);
+    };
+    
+    // Listen for navigation events
+    window.addEventListener('popstate', handlePopState);
+    
+    // Cleanup
+    return () => {
+      window.removeEventListener('popstate', handlePopState);
+    };
+  }, []);
+  
+  // Navigation function
+  const navigate = (to) => {
+    window.history.pushState(null, '', to);
+    setPath(to);
+  };
+  
+  return { path, navigate };
+}
+
+// Define available routes
+const routes = {
+  '/': Home,
+  '/about': About,
+  '/wasm': WasmDemo
+};
+
+// Main App component
+export default function App({ context }) {
+  // Get current path from router
+  const { path, navigate } = useRouter();
+  
+  // Find the component for the current route
+  const PageComponent = routes[path] || routes['/'];
+  
+  return (
+    <AppContext.Provider value={{ ...context, navigate }}>
+      <div className="app">
+        <Header />
+        <main className="content">
+          <PageComponent />
+        </main>
+        <Footer />
+      </div>
+    </AppContext.Provider>
+  );
+}

package/templates/complete-app/src/components/Footer.js

@@ -0,0 +1,19 @@
+import { jsx } from '../client.js';
+
+export default function Footer() {
+  return (
+    <footer className="app-footer">
+      <div className="footer-content">
+        <p>© {new Date().getFullYear()} Baraqex Framework</p>
+        <div className="footer-links">
+          <a href="https://github.com/hamroun/frontend-hamroun" target="_blank" rel="noopener">
+            GitHub
+          </a>
+          <a href="https://pfe-documantation-mohamedx2s-projects.vercel.app/" target="_blank" rel="noopener">
+            Documentation
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/templates/complete-app/src/components/Header.js

@@ -0,0 +1,38 @@
+import { jsx } from '../client.js';
+import { AppContext } from './App.js';
+
+export default function Header() {
+  const { navigate } = AppContext;
+  
+  const handleNavClick = (e, path) => {
+    e.preventDefault();
+    navigate(path);
+  };
+  
+  return (
+    <header className="app-header">
+      <div className="logo">
+        <h1>Baraqex Complete App</h1>
+      </div>
+      <nav className="main-nav">
+        <ul>
+          <li>
+            <a href="/" onClick={(e) => handleNavClick(e, '/')}>
+              Home
+            </a>
+          </li>
+          <li>
+            <a href="/about" onClick={(e) => handleNavClick(e, '/about')}>
+              About
+            </a>
+          </li>
+          <li>
+            <a href="/wasm" onClick={(e) => handleNavClick(e, '/wasm')}>
+              WASM Demo
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  );
+}

package/templates/complete-app/src/pages/About.js

@@ -0,0 +1,59 @@
+import { jsx, useEffect } from '../client.js';
+
+export default function About() {
+  useEffect(() => {
+    document.title = 'About - Baraqex Complete App';
+  }, []);
+  
+  return (
+    <div className="about-page">
+      <h1>About Baraqex Framework</h1>
+      
+      <section className="about-section">
+        <h2>Framework Architecture</h2>
+        <p>
+          Baraqex is a lightweight full-stack JavaScript framework designed for modern web applications.
+          It features a virtual DOM implementation, hooks-based state management, server-side rendering,
+          and WebAssembly integration.
+        </p>
+      </section>
+      
+      <section className="about-section">
+        <h2>Key Features</h2>
+        <ul>
+          <li>
+            <strong>Virtual DOM:</strong> Efficient DOM updates through a lightweight virtual DOM implementation.
+          </li>
+          <li>
+            <strong>Hooks:</strong> React-like hooks including useState, useEffect, useContext, and more.
+          </li>
+          <li>
+            <strong>Server-Side Rendering:</strong> Improve SEO and initial load performance with SSR.
+          </li>
+          <li>
+            <strong>WebAssembly Integration:</strong> Run high-performance Go code in the browser.
+          </li>
+          <li>
+            <strong>API Routing:</strong> Express-based API with file-based routing.
+          </li>
+          <li>
+            <strong>Development Tools:</strong> CLI tools for project scaffolding and component generation.
+          </li>
+        </ul>
+      </section>
+      
+      <section className="about-section">
+        <h2>Use Cases</h2>
+        <p>
+          Baraqex is ideal for:
+        </p>
+        <ul>
+          <li>Web applications requiring high performance</li>
+          <li>Projects that need SEO optimization</li>
+          <li>Applications with computation-heavy features</li>
+          <li>Full-stack JavaScript applications</li>
+        </ul>
+      </section>
+    </div>
+  );
+}

package/templates/complete-app/src/pages/Home.js

@@ -0,0 +1,54 @@
+import { jsx, useState, useEffect, useContext } from '../client.js';
+import { AppContext } from '../components/App.js';
+
+export default function Home() {
+  const { initialData } = useContext(AppContext);
+  const [count, setCount] = useState(0);
+  
+  useEffect(() => {
+    document.title = 'Home - Baraqex Complete App';
+  }, []);
+  
+  return (
+    <div className="home-page">
+      <section className="hero">
+        <h1>Welcome to Baraqex Framework</h1>
+        <p className="subtitle">A complete JavaScript framework for modern web applications</p>
+        
+        <div className="features">
+          <div className="feature">
+            <h3>Server-Side Rendering</h3>
+            <p>Initial page was rendered on the server at: {initialData?.timestamp}</p>
+          </div>
+          
+          <div className="feature">
+            <h3>State Management</h3>
+            <div className="counter">
+              <button onClick={() => setCount(c => c - 1)}>-</button>
+              <span>{count}</span>
+              <button onClick={() => setCount(c => c + 1)}>+</button>
+            </div>
+          </div>
+          
+          <div className="feature">
+            <h3>API Integration</h3>
+            <button className="api-button" onClick={fetchRandomData}>
+              Fetch Random Data
+            </button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+  
+  async function fetchRandomData() {
+    try {
+      const response = await fetch('/api/random');
+      const data = await response.json();
+      alert(`Random value: ${data.value}`);
+    } catch (error) {
+      console.error('Error fetching data:', error);
+      alert('Failed to fetch data. See console for details.');
+    }
+  }
+}

package/templates/complete-app/src/pages/WasmDemo.js

@@ -0,0 +1,136 @@
+import { jsx, useState, useEffect, useContext } from '../client.js';
+import { AppContext } from '../components/App.js';
+
+export default function WasmDemo() {
+  const { wasm } = useContext(AppContext);
+  
+  // State for error display
+  const [error, setError] = useState(null);
+  
+  // State for calculation form
+  const [num1, setNum1] = useState(5);
+  const [num2, setNum2] = useState(7);
+  const [result, setResult] = useState(null);
+  
+  // State for JSON form
+  const [jsonInput, setJsonInput] = useState('{"name": "Baraqex", "version": "1.0"}');
+  const [jsonResult, setJsonResult] = useState(null);
+  
+  useEffect(() => {
+    document.title = 'WebAssembly Demo - Baraqex Complete App';
+    
+    // Demonstrate a calculation on mount if WASM is available
+    if (wasm && wasm.functions.goAdd) {
+      try {
+        const sum = wasm.functions.goAdd(5, 7);
+        setResult(sum);
+      } catch (err) {
+        console.error('Error in initial WASM calculation:', err);
+      }
+    }
+  }, [wasm]);
+  
+  // Function to calculate using WASM
+  const calculateResult = () => {
+    if (!wasm || !wasm.functions.goAdd) {
+      setError('WASM module not loaded or function not available');
+      return;
+    }
+    
+    try {
+      // Call the WASM function
+      const sum = wasm.functions.goAdd(parseInt(num1), parseInt(num2));
+      setResult(sum);
+      setError(null);
+    } catch (err) {
+      console.error('Error calling WASM function:', err);
+      setError('Error calling WASM function: ' + err);
+    }
+  };
+  
+  // Function to parse JSON using WASM
+  const parseJsonWithWasm = () => {
+    if (!wasm || !wasm.functions.goParseJSON) {
+      setError('WASM module not loaded or JSON parsing function not available');
+      return;
+    }
+    
+    try {
+      // Call the WASM function
+      const parsed = wasm.functions.goParseJSON(jsonInput);
+      setJsonResult(JSON.stringify(parsed, null, 2));
+      setError(null);
+    } catch (err) {
+      console.error('Error parsing JSON with WASM:', err);
+      setError('Error parsing JSON with WASM: ' + err);
+    }
+  };
+
+  return (
+    <div className="wasm-demo-page">
+      <h1>WebAssembly Integration Demo</h1>
+      
+      {!wasm && (
+        <div className="wasm-status error">
+          <h3>WASM Not Available</h3>
+          <p>WebAssembly module could not be loaded. Please check the console for details.</p>
+        </div>
+      )}
+      
+      {error && (
+        <div className="wasm-status error">
+          <h3>Error:</h3>
+          <pre>{error}</pre>
+        </div>
+      )}
+      
+      {wasm && (
+        <div className="wasm-status success">
+          <h3>WASM Module Loaded Successfully</h3>
+          <p>The Go WebAssembly module has been loaded and is ready to use.</p>
+        </div>
+      )}
+      
+      <div className="demo-section">
+        <h2>WASM Addition</h2>
+        <div className="calculator">
+          <input 
+            type="number" 
+            value={num1} 
+            onChange={(e) => setNum1(e.target.value)} 
+          />
+          <span> + </span>
+          <input 
+            type="number" 
+            value={num2} 
+            onChange={(e) => setNum2(e.target.value)} 
+          />
+          <button onClick={calculateResult}>Calculate</button>
+          <div className="result">
+            Result: <strong>{result}</strong>
+          </div>
+        </div>
+        
+        <h2>WASM JSON Parsing</h2>
+        <div className="json-parser">
+          <textarea
+            rows="5"
+            value={jsonInput}
+            onChange={(e) => setJsonInput(e.target.value)}
+          />
+          <button onClick={parseJsonWithWasm}>Parse JSON</button>
+          {jsonResult && (
+            <pre className="json-result">{jsonResult}</pre>
+          )}
+        </div>
+        
+        <h2>Available WASM Functions</h2>
+        <ul className="function-list">
+          {wasm && Object.keys(wasm.functions).map(funcName => (
+            <li key={funcName}>{funcName}</li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

package/templates/complete-app/src/server.js

@@ -0,0 +1,186 @@
+import express from 'express';
+import path from 'path';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
+import compression from 'compression';
+import cors from 'cors';
+import { Server as SocketServer } from 'socket.io';
+import http from 'http';
+import dotenv from 'dotenv';
+
+// Import from frontend-hamroun
+import { 
+  renderToString, 
+  loadGoWasmFromFile,
+  initNodeWasm
+} from 'frontend-hamroun/server';
+
+// Import components
+import App from './components/App.js';
+import { ApiRouter } from './api/index.js';
+
+// Load environment variables
+dotenv.config();
+
+// Get __dirname equivalent in ESM
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Server configuration
+const PORT = process.env.PORT || 3000;
+const PUBLIC_DIR = path.join(__dirname, 'public');
+const isProd = process.env.NODE_ENV === 'production';
+
+// Initialize the express app
+const app = express();
+const server = http.createServer(app);
+const io = new SocketServer(server);
+
+// WASM state
+let wasmInstance = null;
+
+// Middleware
+app.use(compression()); // Compress responses
+app.use(express.json()); // Parse JSON request bodies
+app.use(express.urlencoded({ extended: true })); // Parse URL-encoded request bodies
+app.use(cors()); // Enable CORS
+
+// Serve static files
+app.use(express.static(PUBLIC_DIR));
+
+// Setup API routes
+app.use('/api', ApiRouter);
+
+// Setup Socket.IO
+io.on('connection', (socket) => {
+  console.log('New client connected');
+  
+  socket.on('message', (data) => {
+    console.log('Message received:', data);
+    io.emit('message', data); // Broadcast to all clients
+  });
+  
+  socket.on('disconnect', () => {
+    console.log('Client disconnected');
+  });
+});
+
+// Initialize WASM
+async function initWasm() {
+  try {
+    // Initialize Node WASM environment
+    await initNodeWasm();
+    
+    // Check if WASM file exists
+    const wasmPath = path.join(__dirname, 'public/wasm/example.wasm');
+    if (fs.existsSync(wasmPath)) {
+      // Load WASM module
+      wasmInstance = await loadGoWasmFromFile(wasmPath, {
+        debug: false,
+        goWasmPath: path.join(__dirname, 'public/wasm/wasm_exec.js')
+      });
+      
+      console.log('Server WASM module loaded successfully');
+    } else {
+      console.log('WASM file not found, skipping WASM initialization');
+    }
+  } catch (error) {
+    console.error('Failed to initialize WASM:', error);
+  }
+}
+
+// Handle all other requests with SSR
+app.get('*', async (req, res) => {
+  try {
+    // Prepare context for rendering
+    const context = {
+      url: req.url,
+      wasm: wasmInstance,
+      initialData: {
+        // Add any data needed for initial render
+        path: req.path,
+        query: req.query,
+        timestamp: new Date().toISOString()
+      }
+    };
+    
+    // Render app to string
+    const appHtml = renderToString(<App context={context} />);
+    
+    // Format the initial data as JSON for client hydration
+    const initialDataScript = `
+      <script id="__INITIAL_DATA__" type="application/json">
+        ${JSON.stringify(context.initialData).replace(/</g, '\\u003c')}
+      </script>
+    `;
+    
+    // Generate full HTML
+    const html = `
+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Complete Baraqex App</title>
+        <link rel="stylesheet" href="/styles.css">
+      </head>
+      <body>
+        <div id="app" data-ssr>${appHtml}</div>
+        ${initialDataScript}
+        <script type="module" src="/client.js"></script>
+      </body>
+      </html>
+    `;
+    
+    res.send(html);
+  } catch (error) {
+    console.error('Error rendering page:', error);
+    
+    // Send error page
+    res.status(500).send(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>Server Error</title>
+          <style>
+            body { font-family: system-ui, sans-serif; padding: 2rem; line-height: 1.5; }
+            .error { background: #fff0f0; border: 1px solid #ffcaca; border-radius: 4px; padding: 1rem; }
+            pre { background: #f5f5f5; padding: 1rem; overflow: auto; border-radius: 4px; }
+          </style>
+        </head>
+        <body>
+          <h1>Server Error</h1>
+          <div class="error">
+            <p>${error.message}</p>
+            ${isProd ? '' : `<pre>${error.stack}</pre>`}
+          </div>
+        </body>
+      </html>
+    `);
+  }
+});
+
+// Start the server
+async function startServer() {
+  // Initialize WASM
+  await initWasm();
+  
+  // Start listening
+  server.listen(PORT, () => {
+    console.log(`
+┌─────────────────────────────────────────────────────┐
+│                                                     │
+│   Complete Baraqex App Server running!              │
+│                                                     │
+│   - Local:            http://localhost:${PORT}         │
+│   - API:              http://localhost:${PORT}/api     │
+│                                                     │
+│   Mode: ${isProd ? 'production' : 'development'}                                │
+│                                                     │
+└─────────────────────────────────────────────────────┘
+`);
+  });
+}
+
+// Run the server
+startServer().catch(console.error);

package/templates/complete-app/src/wasm/build.bat

@@ -0,0 +1,16 @@
+@echo off
+echo Building Go WASM module...
+
+set GOOS=js
+set GOARCH=wasm
+go build -o example.wasm example.go
+
+if %ERRORLEVEL% NEQ 0 (
+    echo Error: Failed to build Go WASM module
+    exit /b 1
+)
+
+for /f "tokens=*" %%g in ('go env GOROOT') do (set GOROOT=%%g)
+copy "%GOROOT%\misc\wasm\wasm_exec.js" .
+
+echo Build complete!

package/templates/complete-app/src/wasm/build.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+echo "Building Go WASM module..."
+
+# Set environment variables for Go to compile to WASM
+GOOS=js GOARCH=wasm go build -o example.wasm example.go
+
+if [ $? -ne 0 ]; then
+    echo "Error: Failed to build Go WASM module"
+    exit 1
+fi
+
+# Get Go WASM exec runtime
+GOROOT=$(go env GOROOT)
+cp "$GOROOT/misc/wasm/wasm_exec.js" .
+
+echo "Build completed!"