frontend-hamroun 1.2.74 → 1.2.77

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

@@ -32,86 +32,7 @@ function ensureDir(dir) {
   }
 }
 
-// Build a single Go file to WASM
-export async function buildGoFile(goFilePath, wasmFilePath) {
-  try {
-    if (!fs.existsSync(goFilePath)) {
-      throw new Error(`Go file not found: ${goFilePath}`);
-    }
-    
-    console.log(`Building ${goFilePath} to ${wasmFilePath}`);
-    
-    // Create a unique temporary directory with timestamp
-    const timestamp = Date.now();
-    const tempDir = join(os.tmpdir(), `go-wasm-build-${timestamp}`);
-    
-    // Ensure the directory is clean
-    if (fs.existsSync(tempDir)) {
-      if (isWindows) {
-        execSync(`rmdir /s /q "${tempDir}"`, { shell: true });
-      } else {
-        fs.rmSync(tempDir, { recursive: true, force: true });
-      }
-    }
-    
-    // Create the temporary directory
-    ensureDir(tempDir);
-    
-    // Copy the Go file to the temp directory
-    const goFileName = goFilePath.split(/[/\\]/).pop();
-    const tempGoFile = join(tempDir, goFileName);
-    fs.copyFileSync(goFilePath, tempGoFile);
-    
-    // Initialize Go module
-    console.log(`Initializing Go module in ${tempDir}`);
-    execSync(`go mod init wasmapp`, { cwd: tempDir });
-    
-    // Build the WASM module with OS-specific command
-    if (isWindows) {
-      // Windows-specific environment variable setting
-      execSync(`go build -o "${wasmFilePath}" "${tempGoFile}"`, {
-        cwd: tempDir,
-        env: {
-          ...process.env,
-          GOOS: 'js',
-          GOARCH: 'wasm'
-        }
-      });
-    } else {
-      // Unix/Linux/Mac command
-      execSync(`GOOS=js GOARCH=wasm go build -o "${wasmFilePath}" "${tempGoFile}"`, {
-        cwd: tempDir
-      });
-    }
-    
-    // Clean up temporary directory
-    try {
-      if (isWindows) {
-        execSync(`rmdir /s /q "${tempDir}"`, { shell: true });
-      } else {
-        fs.rmSync(tempDir, { recursive: true, force: true });
-      }
-    } catch (cleanupError) {
-      console.warn(`Warning: Failed to clean up temp directory ${tempDir}:`, cleanupError);
-    }
-    
-    console.log(`✓ Successfully built ${goFileName} to WASM`);
-    return {
-      success: true,
-      wasmPath: wasmFilePath,
-      goFile: goFilePath
-    };
-  } catch (error) {
-    console.error(`✗ Error building ${goFilePath}:`, error);
-    return {
-      success: false,
-      error: error.message,
-      goFile: goFilePath
-    };
-  }
-}
-
-// Build all Go WASM modules
+// Build Go WASM modules
 async function buildWasmModules() {
   // Check if Go is installed
   if (!checkGoInstallation()) {
@@ -144,13 +65,92 @@ async function buildWasmModules() {
   console.log(`Copying ${wasmExecNodeJsPath} to ${wasmExecNodeJsDest}`);
   fs.copyFileSync(wasmExecNodeJsPath, wasmExecNodeJsDest);
   
-  // Generate a default example.go file if no Go files exist
-  const goFiles = fs.existsSync(goSourceDir) ? 
-    fs.readdirSync(goSourceDir).filter(file => file.endsWith('.go')) : [];
+  // Build all Go files in the WASM directory
+  const goFiles = fs.readdirSync(goSourceDir).filter(file => file.endsWith('.go'));
   
   if (goFiles.length === 0) {
-    console.log('No Go files found. Creating example.go...');
+    console.log('No Go files found in src/wasm');
+    
+    // Create an example Go file
+    const exampleGoFile = join(goSourceDir, 'example.go');
+    const exampleGoContent = `//go:build js && wasm
+// +build js,wasm
+
+package main
+
+import (
+	"encoding/json"
+	"fmt"
+	"syscall/js"
+)
+
+// Example Go function to be called from JavaScript
+func add(this js.Value, args []js.Value) interface{} {
+	if len(args) != 2 {
+		return js.ValueOf("Error: Expected two arguments")
+	}
+	
+	a := args[0].Int()
+	b := args[1].Int()
+	return js.ValueOf(a + b)
+}
+
+// Process complex data in Go
+func processData(this js.Value, args []js.Value) interface{} {
+	if len(args) == 0 {
+		return js.ValueOf("Error: Expected at least one argument")
+	}
+
+	// Get input data
+	data := args[0]
+	if data.Type() != js.TypeObject {
+		return js.ValueOf("Error: Expected JSON object")
+	}
+
+	// Convert JS object to Go map
+	jsonStr := js.Global().Get("JSON").Call("stringify", data).String()
+	var inputMap map[string]interface{}
+	if err := json.Unmarshal([]byte(jsonStr), &inputMap); err != nil {
+		return js.ValueOf(fmt.Sprintf("Error parsing JSON: %s", err.Error()))
+	}
+
+	// Add new fields
+	inputMap["processed"] = true
+	inputMap["processor"] = "Go WASM"
+
+	// Add some computed fields
+	if values, ok := inputMap["values"].([]interface{}); ok {
+		sum := 0.0
+		for _, v := range values {
+			if num, ok := v.(float64); ok {
+				sum += num
+			}
+		}
+		inputMap["sum"] = sum
+	}
+
+	// Convert back to JS
+	resultJSON, err := json.Marshal(inputMap)
+	if err != nil {
+		return js.ValueOf(fmt.Sprintf("Error generating JSON: %s", err.Error()))
+	}
+
+	return js.ValueOf(string(resultJSON))
+}
+
+func main() {
+	fmt.Println("Go WASM Module initialized")
+	
+	// Register functions to be callable from JavaScript
+	js.Global().Set("goAdd", js.FuncOf(add))
+	js.Global().Set("goProcessData", js.FuncOf(processData))
+	
+	// Keep the program running
+	<-make(chan bool)
+}
+`;
     
+    fs.writeFileSync(exampleGoFile, exampleGoContent);
     console.log(`Created example Go file at ${exampleGoFile}`);
     
     // Add the new file to the list

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

@@ -0,0 +1,62 @@
+// CommonJS/ESM compatible build configuration
+const buildConfig = {
+  /**
+   * Determines if we should build for dual module support
+   */
+  dualModuleSupport: true,
+  
+  /**
+   * Entry points for both client and server
+   */
+  entryPoints: {
+    client: 'src/client.js',
+    server: 'src/server.js'
+  },
+  
+  /**
+   * Output formats to generate
+   */
+  outputFormats: ['esm', 'cjs'],
+  
+  /**
+   * Output directory configuration
+   */
+  output: {
+    dir: 'dist',
+    client: {
+      esm: 'assets/[name].mjs',
+      cjs: 'assets/[name].js'
+    },
+    server: {
+      esm: 'server/[name].mjs',
+      cjs: 'server/[name].js'
+    }
+  },
+  
+  /**
+   * WebAssembly configuration
+   */
+  wasm: {
+    enabled: true,
+    goBinaryPath: 'go',
+    sourceDir: 'src/wasm',
+    outputDir: 'public/wasm',
+    copyGoRuntime: true
+  },
+  
+  /**
+   * Additional build options
+   */
+  options: {
+    minify: process.env.NODE_ENV === 'production',
+    sourcemap: true,
+    target: 'es2020'
+  }
+};
+
+// Make it work in both ESM and CommonJS environments
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = buildConfig;
+}
+
+export default buildConfig;

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

@@ -1,22 +1,32 @@
 {
   "name": "go-wasm-app",
   "version": "1.0.0",
-  "description": "WebAssembly integration with Go for Frontend Hamroun with SSR",
-  "type": "module",
-  "main": "server.js",
+  "type": "commonjs",
+  "description": "Frontend Hamroun app with Go WebAssembly integration",
   "scripts": {
-    "build:dirs": "node -e \"const fs=require('fs');const dirs=['public/wasm','src/wasm','dist'];dirs.forEach(d=>!fs.existsSync(d)&&fs.mkdirSync(d,{recursive:true}))\"",
-    "build:wasm": "node build-wasm.js",
-    "dev": "npm run build:dirs && npm run build:wasm && node --watch server.js",
-    "build": "npm run build:dirs && npm run build:wasm && node -e \"require('fs-extra').copySync('public', 'dist')\"",
-    "start": "cross-env NODE_ENV=production node server.js"
+    "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": "^1.2.72",
-    "fs-extra": "^11.1.1"
+    "frontend-hamroun": "latest"
   },
   "devDependencies": {
-    "cross-env": "^7.0.3"
+    "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

@@ -21,12 +21,12 @@
     }
     
     body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background-color: var(--background);
-      color: var(--text-color);
-      margin: 0;
-      padding: 0;
+      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 {
@@ -45,25 +45,8 @@
       color: var(--primary-color);
     }
     
-    .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;
+    header p {
       color: #666;
-      font-size: 0.8rem;
-    }
-    
-    .badge.active {
-      background-color: var(--success-color);
-      color: white;
     }
     
     .card {
@@ -75,23 +58,11 @@
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
     }
     
-    .result {
-      background-color: #f0f7ff;
+    pre {
+      background-color: #f5f5f5;
       padding: 1rem;
       border-radius: 4px;
-      margin-top: 1rem;
-      white-space: pre-wrap;
       overflow-x: auto;
-      font-family: monospace;
-      font-size: 0.9rem;
-    }
-    
-    .error {
-      background-color: #ffebee;
-      color: #c62828;
-      padding: 0.75rem;
-      border-radius: 4px;
-      margin-top: 0.5rem;
     }
     
     footer {
@@ -102,31 +73,56 @@
       border-top: 1px solid var(--border-color);
     }
     
-    footer a {
-      color: var(--primary-color);
-      text-decoration: none;
+    .warning {
+      display: none;
+      background-color: #fff3cd;
+      border: 1px solid #ffecb5;
+      color: #856404;
+      padding: 1rem;
+      border-radius: 4px;
+      margin-bottom: 1rem;
     }
     
-    @media (max-width: 768px) {
-      .app {
-        padding: 10px;
-      }
-      
-      .card {
-        padding: 1rem;
-      }
+    code {
+      background-color: #f5f5f5;
+      padding: 0.2rem 0.4rem;
+      border-radius: 3px;
+    }
+    
+    .loading {
+      text-align: center;
+      padding: 3rem 1rem;
+      color: #666;
     }
   </style>
-  <!-- WASM runtime will be loaded by server -->
-  <script src="/wasm/wasm_exec.js"></script>
+  <script src="/wasm/wasm_exec.js" defer></script>
 </head>
 <body>
   <div id="root">
-    <!-- Server-rendered content will replace this -->
-    <div class="loading" style="text-align:center;padding:3rem;">
+    <!-- Server-rendered content will be inserted here -->
+    <div class="loading">
       <h2>Loading...</h2>
-      <p>Please wait while the application initializes.</p>
+      <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>