frontend-hamroun 1.2.80 → 1.2.83

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

@@ -1,18 +1,4 @@
-import { hydrate, createElement } from 'frontend-hamroun';
+import { hydrate, jsx } from 'frontend-hamroun';
+import { App } from './App.js';
 
-// For simplicity in this example, we just hydrate the root component
-// In a more complex app, you might use a router
-import HomePage from './pages/index';
-
-// When the DOM is ready, hydrate the server-rendered HTML
-document.addEventListener('DOMContentLoaded', () => {
-  const rootElement = document.getElementById('app');
-  
-  if (rootElement) {
-    // Hydrate the app with the same component that was rendered on the server
-    hydrate(<HomePage />, rootElement);
-    console.log('Hydration complete');
-  } else {
-    console.error('Could not find root element with id "app"');
-  }
-});
+hydrate(jsx(App, {}), document.getElementById('root')!);

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

@@ -3,214 +3,31 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 import { renderToString, jsx } from 'frontend-hamroun';
 import { App } from './App.js';
-import fs from 'fs';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 const app = express();
 const port = 3000;
 
-// Find the client entry file
-const getClientEntry = () => {
-  const assetsDir = path.join(__dirname, './');
-  const files = fs.readdirSync(assetsDir);
-  return files.find(file => file.startsWith("client") && file.endsWith('.js'));
-};
-
-// Serve static files from dist/assets
-app.use('/assets', express.static(path.join(__dirname, './')));
-
-// Serve static files from dist
-app.use(express.static(path.join(__dirname, 'dist')));
-
-// Auto-routing middleware - scans the pages directory for components
-const getPagesDirectory = () => {
-  return path.join(__dirname, 'pages');
-};
-
-// Helper to check if a file exists
-const fileExists = async (filePath) => {
-  try {
-    await fs.promises.access(filePath);
-    return true;
-  } catch {
-    return false;
-  }
-};
-
-// Map URL path to component path
-const getComponentPath = async (urlPath) => {
-  const pagesDir = getPagesDirectory();
-  
-  // Handle root path
-  if (urlPath === '/') {
-    const indexPath = path.join(pagesDir, 'index.js');
-    if (await fileExists(indexPath)) {
-      return { 
-        componentPath: indexPath,
-        params: {}
-      };
-    }
-  }
-  
-  // Try direct match (e.g., /about -> /pages/about.js)
-  const directPath = path.join(pagesDir, `${urlPath.slice(1)}.js`);
-  if (await fileExists(directPath)) {
-    return { 
-      componentPath: directPath,
-      params: {}
-    };
-  }
-  
-  // Try directory index (e.g., /about -> /pages/about/index.js)
-  const dirIndexPath = path.join(pagesDir, urlPath.slice(1), 'index.js');
-  if (await fileExists(dirIndexPath)) {
-    return { 
-      componentPath: dirIndexPath,
-      params: {}
-    };
-  }
-  
-  // Look for dynamic routes (with [param] in filename)
-  const segments = urlPath.split('/').filter(Boolean);
-  const dynamicRoutes = [];
-  
-  // Recursively scan pages directory for all files
-  const scanDir = (dir, basePath = '') => {
-    const items = fs.readdirSync(dir, { withFileTypes: true });
-    
-    for (const item of items) {
-      const itemPath = path.join(dir, item.name);
-      const routePath = path.join(basePath, item.name);
-      
-      if (item.isDirectory()) {
-        scanDir(itemPath, routePath);
-      } else if (item.name.endsWith('.js') && item.name.includes('[')) {
-        // This is a dynamic route file
-        const urlPattern = routePath
-          .replace(/\.js$/, '')
-          .replace(/\[([^\]]+)\]/g, ':$1');
-        
-        dynamicRoutes.push({
-          pattern: urlPattern,
-          componentPath: itemPath
-        });
-      }
-    }
-  };
-  
-  scanDir(pagesDir);
-  
-  // Check if any dynamic routes match
-  for (const route of dynamicRoutes) {
-    const routeSegments = route.pattern.split('/').filter(Boolean);
-    if (routeSegments.length !== segments.length) continue;
-    
-    const params = {};
-    let matches = true;
-    
-    for (let i = 0; i < segments.length; i++) {
-      const routeSeg = routeSegments[i];
-      const urlSeg = segments[i];
-      
-      if (routeSeg.startsWith(':')) {
-        // This is a parameter
-        const paramName = routeSeg.slice(1);
-        params[paramName] = urlSeg;
-      } else if (routeSeg !== urlSeg) {
-        matches = false;
-        break;
-      }
-    }
-    
-    if (matches) {
-      return {
-        componentPath: route.componentPath,
-        params
-      };
-    }
-  }
-  
-  // No match found
-  return null;
-};
-
-// Handle all routes with auto-routing
-app.get('*', async (req, res) => {
-  try {
-    const clientEntry = getClientEntry();
-    const routeResult = await getComponentPath(req.path);
-    
-    if (!routeResult) {
-      return res.status(404).send(`
-        <!DOCTYPE html>
-        <html>
-          <head>
-            <title>404 - Page Not Found</title>
-            <meta name="viewport" content="width=device-width, initial-scale=1.0">
-          </head>
-          <body>
-            <div id="root">
-              <h1>404 - Page Not Found</h1>
-              <p>The page you requested could not be found.</p>
-            </div>
-            <script type="module" src="/assets/${clientEntry}"></script>
-          </body>
-        </html>
-      `);
-    }
-    
-    // Import the component dynamically
-    const { default: PageComponent } = await import(routeResult.componentPath);
-    
-    if (!PageComponent) {
-      throw new Error(`Invalid component in ${routeResult.componentPath}`);
-    }
-    
-    // Render the component with params
-    const html = await renderToString(jsx(PageComponent, { params: routeResult.params }));
-    
-    // Create route data for client hydration
-    const initialState = {
-      route: req.path,
-      params: routeResult.params,
-      timestamp: new Date().toISOString()
-    };
-    
-    res.send(`
-      <!DOCTYPE html>
-      <html>
-        <head>
-          <title>Frontend Hamroun SSR</title>
-          <meta name="viewport" content="width=device-width, initial-scale=1.0">
-          <meta charset="UTF-8">
-        </head>
-        <body>
-          <div id="root">${html}</div>
-          <script>window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}</script>
-          <script type="module" src="/assets/${clientEntry}"></script>
-        </body>
-      </html>
-    `);
-  } catch (error) {
-    console.error('Rendering error:', error);
-    res.status(500).send(`
-      <!DOCTYPE html>
-      <html>
-        <head>
-          <title>500 - Server Error</title>
-          <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        </head>
-        <body>
-          <div id="root">
-            <h1>500 - Server Error</h1>
-            <p>Something went wrong on the server.</p>
-            <pre>${process.env.NODE_ENV === 'production' ? '' : error.stack}</pre>
-          </div>
-          <script type="module" src="/assets/${clientEntry}"></script>
-        </body>
-      </html>
-    `);
-  }
+// Serve static files from dist directory
+app.use(express.static(path.join(__dirname)));
+
+app.get('/', async (req, res) => {
+  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

@@ -1,22 +1,23 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "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",
-    "jsxFactory": "createElement",
-    "jsxFragmentFactory": "Fragment"
+    "jsxImportSource": "frontend-hamroun"
   },
-  "include": ["src"]
+  "include": [
+    "src",
+    "server.ts"
+  ]
 }

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

@@ -1,19 +1,11 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "target": "ES2020",
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "esModuleInterop": true,
-    "outDir": "./dist/server",
-    "declaration": true,
-    "sourceMap": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "jsx": "react",
-    "jsxFactory": "createElement",
-    "jsxFragmentFactory": "Fragment"
+    "module": "ESNext",
+    "outDir": "dist",
+    "noEmit": false,
+    "jsx": "preserve",
+    "moduleResolution": "bundler"
   },
-  "include": ["server.ts", "src/pages/**/*.tsx"],
-  "exclude": ["node_modules", "dist"]
+  "include": ["src/server.ts"]
 }

package/templates/ssr-template/vite.config.ts

@@ -2,29 +2,31 @@ import { defineConfig } from 'vite';
 import path from 'path';
 
 export default defineConfig({
-  resolve: {
-    alias: {
-      'frontend-hamroun': path.resolve(__dirname, 'node_modules/frontend-hamroun')
-    }
+  esbuild: {
+    jsx: 'transform',
+    jsxFactory: 'jsx',
+    jsxFragment: 'Fragment',
+    jsxImportSource: 'frontend-hamroun',
+  },
+  ssr: {
+    noExternal: ['frontend-hamroun']
+  },
+  optimizeDeps: {
+    include: ['frontend-hamroun'],
+    exclude: []
   },
   build: {
-    outDir: 'dist',
-    ssr: 'src/server.ts',
+    target: 'esnext',
     rollupOptions: {
-      input: {
-        client: './src/client.tsx',
-        server: './src/server.ts'
-      },
       output: {
-        entryFileNames: '[name].js',
-        chunkFileNames: 'assets/[name]-[hash].js',
-        assetFileNames: 'assets/[name]-[hash].[ext]'
+        format: 'es'
       }
     }
   },
-  esbuild: {
-    jsxFactory: '_jsx',
-    jsxFragment: '_Fragment',
-    jsxInject: `import { jsx as _jsx, Fragment as _Fragment } from 'frontend-hamroun'`
+  resolve: {
+    alias: {
+      'frontend-hamroun/jsx-dev-runtime': 'frontend-hamroun',
+      'frontend-hamroun/jsx-runtime': 'frontend-hamroun'
+    }
   }
 });

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);
+});