baraqex 1.0.32 → 1.0.33

package/templates/ssr-template/package.json

@@ -1,16 +1,13 @@
 {
-  "name": "ssr-template",
+  "name": "ssr-version",
+  "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "npm run build && npm run start",
+    "build:client": "esbuild src/client.tsx --bundle --outfile=dist/client.js --platform=browser --format=esm",
+    "build:server": "esbuild src/server.ts --bundle --outfile=dist/server.js --platform=node --format=esm --external:frontend-hamroun --packages=external",
     "build": "node esbuild.config.js",
-    "build:vite": "npm run build:client && npm run build:server",
-    "build:client": "cross-env BUILD_TARGET=client vite build",
-    "build:server": "cross-env BUILD_TARGET=server vite build --ssr",
-    "start": "node dist/server.js",
-    "preview": "npm run build && npm run start",
-    "clean": "rm -rf node_modules package-lock.json dist && npm install"
+    "start": "node dist/server.js"
   },
   "dependencies": {
     "express": "^4.18.2",
@@ -18,11 +15,8 @@
   },
   "devDependencies": {
     "@types/express": "^4.17.17",
-    "@types/node": "^20.0.0",
-    "@types/react": "^18.0.0",
-    "cross-env": "^7.0.3",
-    "esbuild": "^0.19.0",
-    "typescript": "^5.0.0",
-    "vite": "^5.0.0"
+    "@types/node": "^20.5.0",
+    "esbuild": "^0.19.12",
+    "typescript": "^5.0.0"
   }
 }

package/templates/ssr-template/src/App.tsx

@@ -1,18 +1,5 @@
 import { useState, useEffect, useRef, useMemo } from 'frontend-hamroun';
 
-// Type definitions
-interface Todo {
-  id: number;
-  text: string;
-  completed: boolean;
-}
-
-interface TodoItemProps {
-  todo: Todo;
-  onToggle: (id: number) => void;
-  onDelete: (id: number) => void;
-}
-
 // Custom hooks for better code organization
 function useTimer(initialTime = 0) {
   const [time, setTime] = useState(initialTime);
@@ -165,7 +152,7 @@ function useTheme() {
 }
 
 // Todo Item Component
-function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) {
+function TodoItem({ todo, onToggle, onDelete, ...props }:any) {
   return (
     <div style={{
       display: 'flex',
@@ -185,7 +172,7 @@ function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) {
         onChange={() => onToggle(todo.id)}
         style={{ marginRight: '0.75rem' }}
       />
-      <span style={{ flex: 1 ,color:"black"}} >{todo.text}</span>
+      <span style={{ flex: 1 }}>{todo.text}</span>
       <button
         onClick={() => onDelete(todo.id)}
         style={{
@@ -205,7 +192,7 @@ function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) {
 }
 
 // Stats Component
-function StatsCard({ title, value, color = '#3498db' }: { title: string; value: string | number; color?: string }) {
+function StatsCard({ title, value, color = '#3498db' }) {
   return (
     <div style={{
       background: 'white',
@@ -249,7 +236,7 @@ export function App() {
   const inputRef = useRef(null);
 
   // Handle todo form submission
-  const handleTodoSubmit = (e:any) => {
+  const handleTodoSubmit = (e: { preventDefault: () => void; }) => {
     e.preventDefault();
     // Ensure newTodo is a string before passing to addTodo
     const todoText = String(newTodo || '');
@@ -451,7 +438,7 @@ export function App() {
                 min="1"
                 max="10"
                 value={step}
-                onChange={(e: { target: { value: string; }; }) => setStep(parseInt(e.target.value))}
+                onChange={(e) => setStep(parseInt(e.target.value))}
                 style={{ width: '100%' }}
               />
             </div>
@@ -492,7 +479,7 @@ export function App() {
                       background: colors.bg,
                       color: colors.text
                     }}
-                    onKeyPress={(e: { key: string; target: { value: string; }; }) => {
+                    onKeyPress={(e) => {
                       if (e.key === 'Enter') {
                         setValue(parseInt(e.target.value) || 0);
                         e.target.value = '';
@@ -730,6 +717,7 @@ export function App() {
             ) : (
               todos.map(todo => (
                 <TodoItem
+                  key={todo.id}
                   todo={todo}
                   onToggle={toggleTodo}
                   onDelete={deleteTodo}

package/templates/ssr-template/src/client.tsx

@@ -1,24 +1,4 @@
 import { hydrate, jsx } from 'frontend-hamroun';
 import { App } from './App.js';
 
-document.addEventListener('DOMContentLoaded', () => {
-  const root = document.getElementById('root');
-  if (root) {
-    try {
-      // Create the app element
-      const appElement = jsx(App, {});
-      
-      // Hydrate the app with error boundary
-      hydrate(appElement, root);
-      
-      console.log('✅ Client hydrated successfully!');
-    } catch (error) {
-      console.error('❌ Hydration failed:', error);
-      
-      // Fallback rendering
-      root.innerHTML = '<div style="padding: 2rem; text-align: center;">⚠️ Client-side rendering failed, but page content is still available.</div>';
-    }
-  } else {
-    console.error('❌ Root element not found');
-  }
-});
+hydrate(jsx(App, {}), document.getElementById('root')!);

package/templates/ssr-template/src/server.ts

@@ -14,189 +14,20 @@ const port = 3000;
 app.use(express.static(path.join(__dirname)));
 
 app.get('/', async (req, res) => {
-  try {
-    // Create JSX element directly
-    const appElement = jsx(App, {});
-    const html = await renderToString(appElement);
-    
-    res.send(`
-      <!DOCTYPE html>
-      <html>
-        <head>
-          <title>Frontend Hamroun SSR - Advanced Template</title>
-          <meta name="viewport" content="width=device-width, initial-scale=1.0">
-          <meta name="description" content="Advanced SSR template with hooks, modern design, and interactive components">
-          <style>
-            * {
-              box-sizing: border-box;
-            }
-            
-            body {
-              margin: 0;
-              padding: 0;
-              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-              line-height: 1.6;
-              color: #333;
-              background: #f5f5f5;
-            }
-            
-            /* Responsive design */
-            @media (max-width: 768px) {
-              .grid-responsive {
-                grid-template-columns: 1fr !important;
-              }
-              
-              .flex-responsive {
-                flex-direction: column;
-                gap: 0.5rem !important;
-              }
-              
-              .padding-responsive {
-                padding: 1rem !important;
-              }
-            }
-            
-            /* Smooth transitions */
-            * {
-              transition: all 0.2s ease;
-            }
-            
-            /* Button hover effects */
-            button:hover {
-              transform: translateY(-2px);
-              box-shadow: 0 4px 12px rgba(0,0,0,0.2);
-            }
-            
-            button:active {
-              transform: translateY(0);
-            }
-            
-            /* Input focus styles */
-            input:focus {
-              outline: none;
-              box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
-            }
-            
-            /* Loading states */
-            .loading {
-              animation: pulse 2s infinite;
-            }
-            
-            @keyframes pulse {
-              0% { opacity: 1; }
-              50% { opacity: 0.5; }
-              100% { opacity: 1; }
-            }
-            
-            /* Grid animations */
-            .grid-item {
-              animation: slideInUp 0.6s ease-out;
-            }
-            
-            @keyframes slideInUp {
-              from {
-                opacity: 0;
-                transform: translateY(30px);
-              }
-              to {
-                opacity: 1;
-                transform: translateY(0);
-              }
-            }
-            
-            /* Dark theme support */
-            .dark-theme {
-              background: #1a1a1a;
-              color: #ffffff;
-            }
-            
-            /* Custom scrollbar */
-            ::-webkit-scrollbar {
-              width: 8px;
-            }
-            
-            ::-webkit-scrollbar-track {
-              background: #f1f1f1;
-              border-radius: 4px;
-            }
-            
-            ::-webkit-scrollbar-thumb {
-              background: #c1c1c1;
-              border-radius: 4px;
-            }
-            
-            ::-webkit-scrollbar-thumb:hover {
-              background: #a8a8a8;
-            }
-          </style>
-        </head>
-        <body>
-          <div id="root">${html}</div>
-          <script type="module" src="/client.js"></script>
-          
-          <!-- Performance monitoring -->
-          <script>
-            // Log performance metrics
-            window.addEventListener('load', () => {
-              const perfData = performance.getEntriesByType('navigation')[0];
-              console.log('🚀 Frontend Hamroun SSR Performance:');
-              console.log('⏱️ Page Load Time:', Math.round(perfData.loadEventEnd - perfData.fetchStart), 'ms');
-              console.log('🎨 DOM Content Loaded:', Math.round(perfData.domContentLoadedEventEnd - perfData.fetchStart), 'ms');
-              console.log('📡 Server Response:', Math.round(perfData.responseEnd - perfData.requestStart), 'ms');
-            });
-            
-            // Enhanced error handling
-            window.addEventListener('error', (event) => {
-              console.error('🚨 Runtime Error:', event.error);
-            });
-            
-            // Console welcome message
-            console.log('%c🚀 Frontend Hamroun SSR Template', 'color: #3498db; font-size: 24px; font-weight: bold;');
-            console.log('%cFeatures: SSR ✓ Hooks ✓ Modern Design ✓ TypeScript ✓', 'color: #27ae60; font-size: 14px;');
-          </script>
-        </body>
-      </html>
-    `);
-  } catch (error) {
-    console.error('Server-side rendering error:', error);
-    res.status(500).send(`
-      <!DOCTYPE html>
-      <html>
-        <head>
-          <title>Frontend Hamroun SSR - Error</title>
-          <style>
-            body {
-              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              min-height: 100vh;
-              margin: 0;
-              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-              color: white;
-            }
-            .error-container {
-              text-align: center;
-              padding: 2rem;
-              background: rgba(255,255,255,0.1);
-              border-radius: 16px;
-              backdrop-filter: blur(10px);
-              border: 1px solid rgba(255,255,255,0.2);
-            }
-          </style>
-        </head>
-        <body>
-          <div class="error-container">
-            <h1>🚨 Server Error</h1>
-            <p>The Frontend Hamroun SSR template encountered an error, but don't worry!</p>
-            <p>Error: ${error instanceof Error ? error.message : String(error)}</p>
-            <p><a href="/" style="color: white;">Try again</a></p>
-          </div>
-          <script type="module" src="/client.js"></script>
-        </body>
-      </html>
-    `);
-  }
+  const html = await renderToString(jsx(App, {}));
+  
+  res.send(`
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <title>SSR App</title>
+      </head>
+      <body>
+        <div id="root">${html}</div>
+        <script type="module" src="/client.js"></script>
+      </body>
+    </html>
+  `);
 });
 
 app.listen(port, () => {

package/templates/ssr-template/tsconfig.json

@@ -2,31 +2,22 @@
   "compilerOptions": {
     "target": "ES2022",
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "allowJs": true,
+    "allowJs": false,
     "skipLibCheck": true,
-    "esModuleInterop": true,
+    "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "preserve",
-    "declaration": true,
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
+    "jsxImportSource": "frontend-hamroun"
   },
   "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
+    "src",
+    "server.ts"
   ]
 }

package/templates/ssr-template/tsconfig.server.json

@@ -1,24 +1,11 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "target": "ES2022",
     "module": "ESNext",
-    "moduleResolution": "node",
-    "lib": ["ES2022"],
-    "types": ["node"],
-    "allowJs": true,
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "skipLibCheck": true
+    "outDir": "dist",
+    "noEmit": false,
+    "jsx": "preserve",
+    "moduleResolution": "bundler"
   },
-  "include": [
-    "src/server.ts",
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "src/client.tsx",
-    "node_modules"
-  ]
+  "include": ["src/server.ts"]
 }

package/templates/wasm/build-wasm.js

@@ -0,0 +1,228 @@
+import { spawn } from 'child_process';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const goDir = join(__dirname, 'go');
+const outputDir = join(__dirname, 'public');
+const wasmFile = join(outputDir, 'example.wasm');
+
+// Prevent infinite loops by checking if we're already running
+const lockFile = join(__dirname, '.build-lock');
+if (fs.existsSync(lockFile)) {
+  console.log('Build already in progress, skipping...');
+  process.exit(0);
+}
+
+// Create lock file
+fs.writeFileSync(lockFile, process.pid.toString());
+
+// Clean up lock file on exit
+process.on('exit', () => {
+  try {
+    fs.unlinkSync(lockFile);
+  } catch (e) {
+    // Ignore cleanup errors
+  }
+});
+
+process.on('SIGINT', () => {
+  try {
+    fs.unlinkSync(lockFile);
+  } catch (e) {
+    // Ignore cleanup errors
+  }
+  process.exit(0);
+});
+
+// Ensure public directory exists
+if (!fs.existsSync(outputDir)) {
+  fs.mkdirSync(outputDir, { recursive: true });
+}
+
+// Only create Go files if they don't exist (prevent infinite generation)
+if (!fs.existsSync(goDir) || !fs.existsSync(join(goDir, 'main.go'))) {
+  console.log('Creating Go WASM example files...');
+  fs.mkdirSync(goDir, { recursive: true });
+  
+  // Create the corrected Go main file with proper function names
+  const goMainContent = `package main
+
+import (
+	"fmt"
+	"strings"
+	"syscall/js"
+)
+
+func goHello(this js.Value, inputs []js.Value) interface{} {
+	name := inputs[0].String()
+	return fmt.Sprintf("Hello, %s from Go WASM!", name)
+}
+
+func goAdd(this js.Value, inputs []js.Value) interface{} {
+	a := inputs[0].Int()
+	b := inputs[1].Int()
+	return a + b
+}
+
+func goMultiply(this js.Value, inputs []js.Value) interface{} {
+	a := inputs[0].Float()
+	b := inputs[1].Float()
+	return a * b
+}
+
+func goFibonacci(this js.Value, inputs []js.Value) interface{} {
+	n := inputs[0].Int()
+	if n <= 1 {
+		return n
+	}
+	
+	a, b := 0, 1
+	for i := 2; i <= n; i++ {
+		a, b = b, a+b
+	}
+	return b
+}
+
+func goIsPrime(this js.Value, inputs []js.Value) interface{} {
+	n := inputs[0].Int()
+	if n < 2 {
+		return false
+	}
+	if n == 2 {
+		return true
+	}
+	if n%2 == 0 {
+		return false
+	}
+	
+	for i := 3; i*i <= n; i += 2 {
+		if n%i == 0 {
+			return false
+		}
+	}
+	return true
+}
+
+func main() {
+	fmt.Println("Go WASM initialized")
+	
+	// Register functions with correct names that match the frontend
+	js.Global().Set("goHello", js.FuncOf(goHello))
+	js.Global().Set("goAdd", js.FuncOf(goAdd))
+	js.Global().Set("goMultiply", js.FuncOf(goMultiply))
+	js.Global().Set("goFibonacci", js.FuncOf(goFibonacci))
+	js.Global().Set("goIsPrime", js.FuncOf(goIsPrime))
+	
+	fmt.Println("Go functions registered and ready!")
+	
+	// Keep the program running
+	select {}
+}
+`;
+  
+  fs.writeFileSync(join(goDir, 'main.go'), goMainContent);
+  
+  // Create go.mod file
+  const goModContent = `module wasm-example
+
+go 1.21
+`;
+  
+  fs.writeFileSync(join(goDir, 'go.mod'), goModContent);
+  
+  console.log('✅ Go example files created');
+} else {
+  console.log('Go files already exist, skipping creation');
+}
+
+console.log('Building Go WASM module...');
+
+// Set environment variables for WASM compilation
+const env = {
+  ...process.env,
+  GOOS: 'js',
+  GOARCH: 'wasm'
+};
+
+// Build command
+const buildArgs = ['build', '-o', wasmFile, 'main.go'];
+
+console.log(`Running: go ${buildArgs.join(' ')}`);
+console.log(`Working directory: ${goDir}`);
+console.log(`Output: ${wasmFile}`);
+
+const goProcess = spawn('go', buildArgs, {
+  cwd: goDir,
+  env: env,
+  stdio: 'inherit',
+  shell: true
+});
+
+goProcess.on('close', (code) => {
+  // Clean up lock file
+  try {
+    fs.unlinkSync(lockFile);
+  } catch (e) {
+    // Ignore cleanup errors
+  }
+  
+  if (code === 0) {
+    console.log('✅ Go WASM build successful!');
+    console.log(`📦 WASM file created: ${wasmFile}`);
+    
+    // Check if wasm_exec.js exists, if not, copy it
+    const wasmExecJs = join(outputDir, 'wasm_exec.js');
+    if (!fs.existsSync(wasmExecJs)) {
+      console.log('📋 Copying wasm_exec.js...');
+      
+      // Try to find wasm_exec.js in GOROOT
+      const findWasmExec = spawn('go', ['env', 'GOROOT'], {
+        stdio: 'pipe',
+        shell: true
+      });
+      
+      let goroot = '';
+      findWasmExec.stdout.on('data', (data) => {
+        goroot += data.toString().trim();
+      });
+      
+      findWasmExec.on('close', () => {
+        if (goroot) {
+          const wasmExecSource = join(goroot, 'misc', 'wasm', 'wasm_exec.js');
+          if (fs.existsSync(wasmExecSource)) {
+            fs.copyFileSync(wasmExecSource, wasmExecJs);
+            console.log('✅ wasm_exec.js copied successfully');
+          } else {
+            console.log('⚠️  wasm_exec.js not found, you may need to copy it manually');
+            console.log(`Expected location: ${wasmExecSource}`);
+          }
+        }
+      });
+    }
+  } else {
+    console.error('❌ Go WASM build failed with exit code:', code);
+    console.log('\n💡 Troubleshooting tips:');
+    console.log('1. Make sure Go is installed and in your PATH');
+    console.log('2. Check that your Go code in ./go/main.go is valid');
+    console.log('3. Ensure you have Go 1.11+ for WASM support');
+    process.exit(1);
+  }
+});
+
+goProcess.on('error', (error) => {
+  // Clean up lock file
+  try {
+    fs.unlinkSync(lockFile);
+  } catch (e) {
+    // Ignore cleanup errors
+  }
+  
+  console.error('❌ Failed to start Go build process:', error.message);
+  console.log('\n💡 Make sure Go is installed and available in your PATH');
+  console.log('Download Go from: https://golang.org/dl/');
+  process.exit(1);
+});