frontend-hamroun 1.2.77 → 1.2.79

package/templates/complete-app/build.js

@@ -1,284 +0,0 @@
-import { execSync } from 'child_process';
-import path from 'path';
-import fs from 'fs';
-import esbuild from 'esbuild';
-import http from 'http';
-import { fileURLToPath } from 'url';
-
-// Get __dirname equivalent in ESM
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-// ANSI color codes for console output
-const colors = {
-  reset: "\x1b[0m",
-  bright: "\x1b[1m",
-  dim: "\x1b[2m",
-  cyan: "\x1b[36m",
-  green: "\x1b[32m",
-  yellow: "\x1b[33m",
-  red: "\x1b[31m"
-};
-
-// Parse command line arguments
-const args = process.argv.slice(2);
-const isProduction = process.env.NODE_ENV === 'production';
-const wasmOnly = args.includes('--wasm-only');
-const serve = args.includes('--serve');
-
-// Helper for logging with colors
-function log(message, type = 'info') {
-  const prefix = {
-    info: `${colors.bright}${colors.cyan}[INFO]${colors.reset}`,
-    success: `${colors.bright}${colors.green}[SUCCESS]${colors.reset}`,
-    warning: `${colors.bright}${colors.yellow}[WARNING]${colors.reset}`,
-    error: `${colors.bright}${colors.red}[ERROR]${colors.reset}`
-  };
-  
-  console.log(`${prefix[type] || prefix.info} ${message}`);
-}
-
-// Build configuration
-const config = {
-  // Entry points
-  entryPoints: {
-    client: 'src/client.js',
-    server: 'src/server.js'
-  },
-  
-  // Output directories
-  outDir: {
-    client: 'dist/public',
-    server: 'dist'
-  },
-  
-  // WASM configuration
-  wasm: {
-    dir: 'src/wasm',
-    buildScript: process.platform === 'win32' ? 'build.bat' : './build.sh',
-    outputDir: 'dist/public/wasm'
-  }
-};
-
-// Build WASM modules if they exist
-async function buildWasmModules() {
-  const wasmDir = path.join(__dirname, config.wasm.dir);
-  
-  if (!fs.existsSync(wasmDir)) {
-    log('No WASM directory found, skipping WASM build', 'warning');
-    return;
-  }
-  
-  log('Building WebAssembly modules...');
-  
-  try {
-    // Execute build script in WASM directory
-    execSync(config.wasm.buildScript, {
-      cwd: wasmDir,
-      stdio: 'inherit'
-    });
-    
-    // Ensure output directory exists
-    const outputDir = path.join(__dirname, config.wasm.outputDir);
-    if (!fs.existsSync(outputDir)) {
-      fs.mkdirSync(outputDir, { recursive: true });
-    }
-    
-    // Copy WASM files to output directory
-    const wasmFiles = fs.readdirSync(wasmDir).filter(file => 
-      file.endsWith('.wasm') || file === 'wasm_exec.js');
-    
-    for (const file of wasmFiles) {
-      fs.copyFileSync(
-        path.join(wasmDir, file),
-        path.join(outputDir, file)
-      );
-    }
-    
-    log(`WebAssembly modules built and copied to ${config.wasm.outputDir}`, 'success');
-  } catch (error) {
-    log(`Failed to build WebAssembly modules: ${error.message}`, 'error');
-    if (!wasmOnly) {
-      log('Continuing with rest of build...', 'warning');
-    } else {
-      process.exit(1);
-    }
-  }
-}
-
-// Build client-side code
-async function buildClient() {
-  log('Building client bundle...');
-  
-  try {
-    const clientOutDir = path.join(__dirname, config.outDir.client);
-    
-    // Ensure output directory exists
-    if (!fs.existsSync(clientOutDir)) {
-      fs.mkdirSync(clientOutDir, { recursive: true });
-    }
-    
-    // Bundle client code
-    await esbuild.build({
-      entryPoints: [path.join(__dirname, config.entryPoints.client)],
-      bundle: true,
-      outfile: path.join(clientOutDir, 'client.js'),
-      format: 'esm',
-      platform: 'browser',
-      target: ['es2020'],
-      minify: isProduction,
-      sourcemap: !isProduction,
-      define: {
-        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
-      },
-      loader: {
-        '.js': 'jsx',
-        '.jsx': 'jsx'
-      }
-    });
-    
-    // Copy index.html if it exists
-    const indexPath = path.join(__dirname, 'src/index.html');
-    if (fs.existsSync(indexPath)) {
-      fs.copyFileSync(indexPath, path.join(clientOutDir, 'index.html'));
-    }
-    
-    log('Client bundle built successfully', 'success');
-  } catch (error) {
-    log(`Failed to build client bundle: ${error.message}`, 'error');
-    process.exit(1);
-  }
-}
-
-// Build server-side code
-async function buildServer() {
-  log('Building server bundle...');
-  
-  try {
-    const serverOutDir = path.join(__dirname, config.outDir.server);
-    
-    // Ensure output directory exists
-    if (!fs.existsSync(serverOutDir)) {
-      fs.mkdirSync(serverOutDir, { recursive: true });
-    }
-    
-    // Bundle server code
-    await esbuild.build({
-      entryPoints: [path.join(__dirname, config.entryPoints.server)],
-      bundle: true,
-      outfile: path.join(serverOutDir, 'server.js'),
-      format: 'esm',
-      platform: 'node',
-      target: ['node16'],
-      minify: isProduction,
-      sourcemap: !isProduction,
-      define: {
-        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
-      },
-      loader: {
-        '.js': 'jsx',
-        '.jsx': 'jsx'
-      },
-      external: ['express', 'frontend-hamroun', 'compression', 'cors', 'path', 'fs', 'http', 'socket.io']
-    });
-    
-    log('Server bundle built successfully', 'success');
-  } catch (error) {
-    log(`Failed to build server bundle: ${error.message}`, 'error');
-    process.exit(1);
-  }
-}
-
-// Copy static assets like CSS, images, etc.
-function copyStaticAssets() {
-  log('Copying static assets...');
-  
-  const publicDir = path.join(__dirname, 'public');
-  const outputDir = path.join(__dirname, config.outDir.client);
-  
-  if (fs.existsSync(publicDir)) {
-    // Recursive function to copy directory contents
-    function copyDir(src, dest) {
-      // Create destination directory if it doesn't exist
-      if (!fs.existsSync(dest)) {
-        fs.mkdirSync(dest, { recursive: true });
-      }
-      
-      // Read all files in source directory
-      const entries = fs.readdirSync(src, { withFileTypes: true });
-      
-      for (const entry of entries) {
-        const srcPath = path.join(src, entry.name);
-        const destPath = path.join(dest, entry.name);
-        
-        if (entry.isDirectory()) {
-          // Recursively copy subdirectories
-          copyDir(srcPath, destPath);
-        } else {
-          // Copy files
-          fs.copyFileSync(srcPath, destPath);
-        }
-      }
-    }
-    
-    copyDir(publicDir, outputDir);
-    log('Static assets copied successfully', 'success');
-  } else {
-    log('No static assets to copy (public directory not found)', 'warning');
-  }
-}
-
-// Start a development server
-async function startDevServer() {
-  log('Starting development server...');
-  
-  // Import server module
-  try {
-    // Use dynamic import because this is ESM
-    const serverModule = await import('./dist/server.js');
-    log('Server started. Press Ctrl+C to stop.', 'success');
-  } catch (error) {
-    log(`Failed to start development server: ${error.message}`, 'error');
-    process.exit(1);
-  }
-}
-
-// Main build function
-async function build() {
-  console.log('\n' + '='.repeat(60));
-  log(`Building ${isProduction ? 'production' : 'development'} bundle...`);
-  console.log('='.repeat(60) + '\n');
-  
-  try {
-    // Build WASM first
-    await buildWasmModules();
-    
-    // If wasm-only flag is provided, exit after building WASM
-    if (wasmOnly) {
-      log('WASM-only build completed', 'success');
-      return;
-    }
-    
-    // Build client and server code
-    await Promise.all([
-      buildClient(),
-      buildServer()
-    ]);
-    
-    // Copy static assets
-    copyStaticAssets();
-    
-    log('Build completed successfully', 'success');
-    
-    // Start development server if requested
-    if (serve) {
-      await startDevServer();
-    }
-  } catch (error) {
-    log(`Build failed: ${error.message}`, 'error');
-    process.exit(1);
-  }
-}
-
-// Run the build
-build();

package/templates/complete-app/src/api/index.js

@@ -1,31 +0,0 @@
-import express from 'express';
-
-// Create API router
-const ApiRouter = express.Router();
-
-// Random data endpoint
-ApiRouter.get('/random', (req, res) => {
-  const value = Math.floor(Math.random() * 1000);
-  res.json({ value });
-});
-
-// Echo endpoint
-ApiRouter.post('/echo', (req, res) => {
-  res.json({
-    method: 'POST',
-    body: req.body,
-    timestamp: new Date().toISOString()
-  });
-});
-
-// Status endpoint
-ApiRouter.get('/status', (req, res) => {
-  res.json({
-    status: 'ok',
-    timestamp: new Date().toISOString(),
-    environment: process.env.NODE_ENV || 'development',
-    uptime: process.uptime()
-  });
-});
-
-export { ApiRouter };

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

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

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

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

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

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

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