frontend-hamroun 1.2.75 → 1.2.77

package/templates/complete-app/build.js

@@ -0,0 +1,284 @@
+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/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "complete-app",
+  "version": "1.0.0",
+  "description": "Complete Frontend Hamroun App with all features: SSR, WASM, API routes, and more",
+  "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"
+  },
+  "dependencies": {
+    "compression": "^1.7.4",
+    "cors": "^2.8.5",
+    "dotenv": "^16.3.1",
+    "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"
+  }
+}

package/templates/complete-app/public/styles.css

@@ -0,0 +1,345 @@
+/* Base styles */
+:root {
+  --primary-color: #4a89dc;
+  --secondary-color: #5d9cec;
+  --accent-color: #967adc;
+  --success-color: #8cc152;
+  --error-color: #da4453;
+  --background-color: #f5f7fa;
+  --text-color: #434a54;
+  --border-color: #e6e9ed;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  line-height: 1.5;
+  color: var(--text-color);
+  background-color: var(--background-color);
+}
+
+a {
+  color: var(--primary-color);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+button {
+  cursor: pointer;
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  font-size: 1rem;
+  transition: background-color 0.2s;
+}
+
+button:hover {
+  background-color: var(--secondary-color);
+}
+
+input, textarea {
+  padding: 0.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: 1rem;
+  width: 100%;
+}
+
+/* Layout */
+.app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.content {
+  flex: 1;
+  padding: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+/* Header */
+.app-header {
+  background-color: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo h1 {
+  font-size: 1.5rem;
+  color: var(--primary-color);
+}
+
+.main-nav ul {
+  display: flex;
+  list-style: none;
+  gap: 2rem;
+}
+
+.main-nav a {
+  color: var(--text-color);
+  font-weight: 500;
+}
+
+.main-nav a:hover {
+  color: var(--primary-color);
+}
+
+/* Footer */
+.app-footer {
+  background-color: white;
+  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
+  padding: 1.5rem 2rem;
+  margin-top: 2rem;
+}
+
+.footer-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.footer-links {
+  display: flex;
+  gap: 1rem;
+}
+
+/* Home page */
+.hero {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.hero h1 {
+  font-size: 2.5rem;
+  margin-bottom: 0.5rem;
+  color: var(--primary-color);
+}
+
+.subtitle {
+  font-size: 1.2rem;
+  color: #666;
+  margin-bottom: 2rem;
+}
+
+.features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+  margin-top: 3rem;
+}
+
+.feature {
+  background-color: white;
+  border-radius: 8px;
+  padding: 1.5rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.feature:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.feature h3 {
+  margin-bottom: 1rem;
+  color: var(--primary-color);
+}
+
+.counter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.counter button {
+  width: 40px;
+  height: 40px;
+  font-size: 1.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.counter span {
+  font-size: 1.5rem;
+  min-width: 40px;
+  text-align: center;
+}
+
+.api-button {
+  margin-top: 1rem;
+  width: 100%;
+}
+
+/* About page */
+.about-page {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.about-page h1 {
+  margin-bottom: 2rem;
+  color: var(--primary-color);
+}
+
+.about-section {
+  margin-bottom: 2rem;
+}
+
+.about-section h2 {
+  margin-bottom: 1rem;
+  color: var(--secondary-color);
+  font-size: 1.5rem;
+}
+
+.about-section ul {
+  margin-left: 1.5rem;
+  margin-top: 0.5rem;
+}
+
+.about-section li {
+  margin-bottom: 0.5rem;
+}
+
+/* WASM Demo page */
+.wasm-demo-page {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.wasm-demo-page h1 {
+  margin-bottom: 2rem;
+  color: var(--primary-color);
+}
+
+.wasm-status {
+  padding: 1rem;
+  border-radius: 4px;
+  margin-bottom: 2rem;
+}
+
+.wasm-status.error {
+  background-color: #ffeeee;
+  border: 1px solid var(--error-color);
+}
+
+.wasm-status.success {
+  background-color: #eeffee;
+  border: 1px solid var(--success-color);
+}
+
+.demo-section {
+  background-color: white;
+  border-radius: 8px;
+  padding: 2rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.demo-section h2 {
+  margin-bottom: 1rem;
+  color: var(--secondary-color);
+  font-size: 1.5rem;
+}
+
+.calculator {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  margin-bottom: 2rem;
+  flex-wrap: wrap;
+}
+
+.calculator input {
+  width: 80px;
+}
+
+.result {
+  background-color: #f7f7f7;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  margin-top: 1rem;
+}
+
+.json-parser {
+  margin-bottom: 2rem;
+}
+
+.json-parser textarea {
+  width: 100%;
+  margin-bottom: 1rem;
+  font-family: monospace;
+}
+
+.json-result {
+  background-color: #f7f7f7;
+  padding: 1rem;
+  border-radius: 4px;
+  margin-top: 1rem;
+  font-family: monospace;
+  overflow-x: auto;
+}
+
+.function-list {
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 0.5rem;
+}
+
+.function-list li {
+  background-color: #f7f7f7;
+  padding: 0.5rem;
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .app-header {
+    flex-direction: column;
+    gap: 1rem;
+    text-align: center;
+  }
+
+  .main-nav ul {
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+
+  .footer-content {
+    flex-direction: column;
+    gap: 1rem;
+    text-align: center;
+  }
+
+  .footer-links {
+    justify-content: center;
+  }
+
+  .content {
+    padding: 1rem;
+  }
+}

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

@@ -0,0 +1,31 @@
+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 };