baraqex 1.0.76 → 2.0.1

package/templates/go-wasm-app/build.js

@@ -0,0 +1,218 @@
+// Support both ESM and CommonJS imports
+const path = require('path');
+const fs = require('fs');
+const esbuild = require('esbuild');
+const { execSync } = require('child_process');
+const config = require('./build.config.js');
+
+// Define colors for console output
+const colors = {
+  reset: "\x1b[0m",
+  bright: "\x1b[1m",
+  dim: "\x1b[2m",
+  underscore: "\x1b[4m",
+  blink: "\x1b[5m",
+  cyan: "\x1b[36m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  red: "\x1b[31m"
+};
+
+// Helper for formatted console logs
+function log(message, type = 'info') {
+  const timestamp = new Date().toISOString().split('T')[1].split('.')[0];
+  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(`${colors.dim}[${timestamp}]${colors.reset} ${prefix[type] || prefix.info} ${message}`);
+}
+
+// Main build function
+async function build() {
+  try {
+    log(`Starting build process (${process.env.NODE_ENV || 'development'} mode)`);
+    
+    // Ensure output directories
+    ensureDir(path.join(__dirname, 'dist'));
+    ensureDir(path.join(__dirname, 'dist/server'));
+    ensureDir(path.join(__dirname, 'dist/assets'));
+    ensureDir(path.join(__dirname, 'public/wasm'));
+    
+    // Build the WASM modules if enabled
+    if (config.wasm.enabled) {
+      await buildWasmModules();
+    }
+
+    // Build the client code
+    await buildClient();
+    
+    // Build the server code if it exists
+    if (fs.existsSync(path.join(__dirname, config.entryPoints.server))) {
+      await buildServer();
+    }
+
+    log('Build completed successfully', 'success');
+  } catch (error) {
+    log(`Build failed: ${error.message}`, 'error');
+    console.error(error);
+    process.exit(1);
+  }
+}
+
+// Build WebAssembly modules
+async function buildWasmModules() {
+  const sourceDir = path.join(__dirname, config.wasm.sourceDir);
+  const outputDir = path.join(__dirname, config.wasm.outputDir);
+  
+  if (!fs.existsSync(sourceDir)) {
+    log(`WASM source directory not found: ${sourceDir}`, 'warning');
+    return;
+  }
+  
+  log('Building WebAssembly modules...');
+  
+  // Get all .go files that need to be compiled
+  const goFiles = fs.readdirSync(sourceDir)
+    .filter(file => file.endsWith('.go'));
+  
+  if (goFiles.length === 0) {
+    log('No Go files found to compile', 'warning');
+    return;
+  }
+  
+  // Compile each Go file to WASM
+  for (const goFile of goFiles) {
+    const goFilePath = path.join(sourceDir, goFile);
+    const wasmFileName = goFile.replace('.go', '.wasm');
+    const wasmFilePath = path.join(outputDir, wasmFileName);
+    
+    log(`Compiling ${goFile} to WebAssembly...`);
+    
+    try {
+      // Set environment variables for Go WASM compilation
+      const env = {
+        ...process.env,
+        GOOS: 'js',
+        GOARCH: 'wasm'
+      };
+      
+      // Compile Go to WASM
+      execSync(`${config.wasm.goBinaryPath} build -o "${wasmFilePath}" "${goFilePath}"`, {
+        env,
+        stdio: 'inherit'
+      });
+      
+      log(`Successfully compiled ${goFile} to ${wasmFileName}`, 'success');
+    } catch (error) {
+      log(`Failed to compile ${goFile}: ${error.message}`, 'error');
+      throw error;
+    }
+  }
+  
+  // Copy wasm_exec.js from Go installation to public folder
+  if (config.wasm.copyGoRuntime) {
+    try {
+      const goRoot = execSync(`${config.wasm.goBinaryPath} env GOROOT`, { encoding: 'utf8' }).trim();
+      const wasmExecSrc = path.join(goRoot, 'misc', 'wasm', 'wasm_exec.js');
+      const wasmExecDest = path.join(outputDir, 'wasm_exec.js');
+      
+      fs.copyFileSync(wasmExecSrc, wasmExecDest);
+      log('Copied wasm_exec.js runtime to public folder', 'success');
+    } catch (error) {
+      log(`Failed to copy wasm_exec.js: ${error.message}`, 'warning');
+    }
+  }
+}
+
+// Build client code with esbuild
+async function buildClient() {
+  const formats = config.dualModuleSupport ? config.outputFormats : ['esm'];
+  
+  for (const format of formats) {
+    const outfile = path.join(
+      __dirname, 
+      'dist', 
+      config.output.client[format].replace('[name]', 'client')
+    );
+    
+    log(`Building client bundle (${format})...`);
+    
+    await esbuild.build({
+      entryPoints: [path.join(__dirname, config.entryPoints.client)],
+      bundle: true,
+      outfile,
+      format,
+      platform: 'browser',
+      target: config.options.target,
+      minify: config.options.minify,
+      sourcemap: config.options.sourcemap,
+      define: {
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
+        '__ESM__': format === 'esm' ? 'true' : 'false'
+      },
+      jsxFactory: 'jsx',
+      jsxFragment: 'Fragment',
+      banner: {
+        js: format === 'esm' 
+          ? `import { jsx, Fragment } from 'frontend-hamroun/jsx-runtime';` 
+          : `const { jsx, Fragment } = require('frontend-hamroun/jsx-runtime');`
+      }
+    });
+  }
+  
+  log('Client build completed', 'success');
+}
+
+// Build server code with esbuild
+async function buildServer() {
+  const formats = config.dualModuleSupport ? config.outputFormats : ['cjs'];
+  
+  for (const format of formats) {
+    const outfile = path.join(
+      __dirname, 
+      'dist', 
+      config.output.server[format].replace('[name]', 'server')
+    );
+    
+    log(`Building server bundle (${format})...`);
+    
+    await esbuild.build({
+      entryPoints: [path.join(__dirname, config.entryPoints.server)],
+      bundle: true,
+      outfile,
+      format,
+      platform: 'node',
+      target: config.options.target,
+      minify: config.options.minify,
+      sourcemap: config.options.sourcemap,
+      external: ['express', 'cors', 'path', 'fs', 'frontend-hamroun', 'frontend-hamroun/*'],
+      define: {
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
+        '__ESM__': format === 'esm' ? 'true' : 'false'
+      }
+    });
+  }
+  
+  log('Server build completed', 'success');
+}
+
+// Utility to ensure directory exists
+function ensureDir(dir) {
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+}
+
+// Execute the build
+build();
+
+// Support both CommonJS and ESM
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { build };
+}
+
+export { build };

package/templates/go-wasm-app/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "go-wasm-app",
+  "version": "1.0.0",
+  "type": "commonjs",
+  "description": "Frontend Hamroun app with Go WebAssembly integration",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node server.js",
+    "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/server.js",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "frontend-hamroun": "latest"
+  },
+  "devDependencies": {
+    "cross-env": "^7.0.3",
+    "esbuild": "^0.19.5",
+    "nodemon": "^3.0.1",
+    "vitest": "^0.34.6"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/assets/client.mjs",
+      "require": "./dist/assets/client.js"
+    }
+  }
+}

package/templates/go-wasm-app/public/index.html

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Frontend Hamroun + Go WebAssembly</title>
+  <style>
+    :root {
+      --primary-color: #0070f3;
+      --secondary-color: #0051cc;
+      --background: #f9f9f9;
+      --text-color: #333;
+      --card-background: #fff;
+      --border-color: #eaeaea;
+      --error-color: #f44336;
+      --success-color: #4caf50;
+    }
+    
+    * {
+      box-sizing: border-box;
+    }
+    
+    body {
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 2rem;
+      line-height: 1.6;
+      color: #333;
+    }
+    
+    .app {
+      max-width: 900px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+    
+    header {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+    
+    header h1 {
+      margin-bottom: 0.5rem;
+      color: var(--primary-color);
+    }
+    
+    header p {
+      color: #666;
+    }
+    
+    .card {
+      background-color: var(--card-background);
+      border: 1px solid var(--border-color);
+      border-radius: 8px;
+      padding: 1.5rem;
+      margin-bottom: 2rem;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    }
+    
+    pre {
+      background-color: #f5f5f5;
+      padding: 1rem;
+      border-radius: 4px;
+      overflow-x: auto;
+    }
+    
+    footer {
+      margin-top: 3rem;
+      text-align: center;
+      color: #666;
+      padding: 1rem 0;
+      border-top: 1px solid var(--border-color);
+    }
+    
+    .warning {
+      display: none;
+      background-color: #fff3cd;
+      border: 1px solid #ffecb5;
+      color: #856404;
+      padding: 1rem;
+      border-radius: 4px;
+      margin-bottom: 1rem;
+    }
+    
+    code {
+      background-color: #f5f5f5;
+      padding: 0.2rem 0.4rem;
+      border-radius: 3px;
+    }
+    
+    .loading {
+      text-align: center;
+      padding: 3rem 1rem;
+      color: #666;
+    }
+  </style>
+  <script src="/wasm/wasm_exec.js" defer></script>
+</head>
+<body>
+  <div id="root">
+    <!-- Server-rendered content will be inserted here -->
+    <div class="loading">
+      <h2>Loading...</h2>
+      <p>Please wait while the server starts.</p>
+      <p>If this message persists, there might be an issue with the server.</p>
+    </div>
+  </div>
+  <script type="module" src="/src/client.js"></script>
+  <script>
+    // The server should replace this entire page with server-rendered content
+    // If you're seeing this, something is wrong with the server-side rendering
+    setTimeout(() => {
+      if (document.querySelector('.loading')) {
+        document.querySelector('#root').innerHTML = `
+          <div class="warning" style="display:block; background-color: #fff3cd; border: 1px solid #ffecb5; color: #856404; padding: 1rem; border-radius: 4px; margin-bottom: 1rem;">
+            <h2>Server Not Responding</h2>
+            <p>The server is not responding with the expected server-rendered content.</p>
+            <p>Please make sure the server is running properly with:</p>
+            <code>npm run dev</code>
+            <p>This static HTML file should be replaced by server-rendered content.</p>
+          </div>
+        `;
+      }
+    }, 2000);
+  </script>
+</body>
+</html>

package/templates/go-wasm-app/public/styles.css

@@ -0,0 +1,197 @@
+:root {
+  --primary-color: #0070f3;
+  --secondary-color: #0051cc;
+  --background: #f9f9f9;
+  --text-color: #333;
+  --card-background: #fff;
+  --border-color: #eaeaea;
+  --error-color: #f44336;
+  --success-color: #4caf50;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  background-color: var(--background);
+  color: var(--text-color);
+  margin: 0;
+  padding: 0;
+  line-height: 1.6;
+}
+
+.app {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+header h1 {
+  margin-bottom: 0.5rem;
+  color: var(--primary-color);
+}
+
+header p {
+  color: #666;
+}
+
+.rendering-info {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-top: 10px;
+}
+
+.badge {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  background-color: #eaeaea;
+  color: #666;
+  font-size: 0.8rem;
+}
+
+.badge.active {
+  background-color: var(--success-color);
+  color: white;
+}
+
+footer {
+  margin-top: 3rem;
+  text-align: center;
+  color: #666;
+  padding: 1rem 0;
+  border-top: 1px solid var(--border-color);
+}
+
+footer a {
+  color: var(--primary-color);
+  text-decoration: none;
+}
+
+.loading {
+  text-align: center;
+  padding: 2rem;
+}
+
+.error {
+  background-color: rgba(244, 67, 54, 0.1);
+  border: 1px solid var(--error-color);
+  border-radius: 8px;
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.error-message {
+  background-color: rgba(244, 67, 54, 0.1);
+  color: var(--error-color);
+  padding: 1rem;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+}
+
+.card {
+  background-color: var(--card-background);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin-bottom: 2rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.demo-section {
+  background-color: var(--card-background);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin-bottom: 2rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.input-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.input-row input {
+  width: 80px;
+  padding: 0.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: 1rem;
+}
+
+.input-row .operator {
+  font-size: 1.5rem;
+  margin: 0 0.5rem;
+}
+
+button {
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background-color 0.2s;
+}
+
+button:hover {
+  background-color: var(--secondary-color);
+}
+
+.json-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.json-editor textarea {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 0.9rem;
+  resize: vertical;
+}
+
+.result {
+  background-color: #f0f7ff;
+  padding: 1rem;
+  border-radius: 4px;
+  margin-top: 1rem;
+}
+
+.result pre {
+  margin: 0;
+  white-space: pre-wrap;
+  font-family: monospace;
+  font-size: 0.9rem;
+}
+
+.info-section {
+  background-color: #f0f7ff;
+  border: 1px solid #e1e7fd;
+  border-radius: 8px;
+  padding: 1.5rem;
+}
+
+.info-section h2 {
+  color: var(--primary-color);
+  margin-top: 0;
+}
+
+.info-section ol {
+  padding-left: 1.5rem;
+}