frontend-hamroun 1.2.79 → 1.2.82

package/templates/basic-app/src/server.js

@@ -0,0 +1,47 @@
+import express from 'express';
+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 app = express();
+const port = 3000;
+// Find the client entry file
+function getClientEntry() {
+    const assetsDir = path.join(__dirname, './');
+    const files = fs.readdirSync(assetsDir);
+    const entry = files.find(file => file.startsWith("client") && file.endsWith('.js'));
+    if (!entry) {
+        throw new Error('Client entry file not found');
+    }
+    return entry;
+}
+// Static file serving
+app.use('/assets', express.static(path.join(__dirname, './')));
+app.use(express.static(path.join(__dirname, 'dist')));
+// Main route handler
+app.get('/', async (_req, res) => {
+    try {
+        const clientEntry = getClientEntry();
+        const html = await renderToString({
+            element: jsx(App, null),
+            title: 'SSR App',
+            scripts: [`/assets/${clientEntry}`],
+            initialState: {
+            // Add any initial state here
+            },
+            meta: {
+                'viewport': 'width=device-width, initial-scale=1.0',
+            }
+        });
+        res.send(html);
+    }
+    catch (error) {
+        console.error('Rendering error:', error);
+        res.status(500).send('Server Error');
+    }
+});
+app.listen(port, () => {
+    console.log(`Server running at http://localhost:${port}`);
+});

package/templates/basic-app/src/server.ts

@@ -0,0 +1,52 @@
+import express from 'express';
+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 app = express();
+const port = 3000;
+
+// Find the client entry file
+function getClientEntry(): string {
+  const assetsDir = path.join(__dirname, './');
+  const files = fs.readdirSync(assetsDir);
+  const entry = files.find(file => file.startsWith("client") && file.endsWith('.js'));
+  if (!entry) {
+    throw new Error('Client entry file not found');
+  }
+  return entry;
+}
+
+// Static file serving
+app.use('/assets', express.static(path.join(__dirname, './')));
+app.use(express.static(path.join(__dirname, 'dist')));
+
+// Main route handler
+app.get('/', async (_req: express.Request, res: express.Response) => {
+  try {
+    const clientEntry = getClientEntry();
+    const html = await renderToString({
+      element: jsx(App, null),
+      title: 'SSR App',
+      scripts: [`/assets/${clientEntry}`],
+      initialState: {
+        // Add any initial state here
+      },
+      meta: {
+        'viewport': 'width=device-width, initial-scale=1.0',
+      }
+    });
+    
+    res.send(html);
+  } catch (error) {
+    console.error('Rendering error:', error);
+    res.status(500).send('Server Error');
+  }
+});
+
+app.listen(port, () => {
+  console.log(`Server running at http://localhost:${port}`);
+});

package/templates/basic-app/tsconfig.server.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "outDir": "dist",
+    "noEmit": false,
+    "jsx": "preserve",
+    "moduleResolution": "bundler"
+  },
+  "include": ["src/server.ts"]
+}

package/templates/complete-app/lib/frontend-hamroun.js

@@ -0,0 +1,182 @@
+/**
+ * Simple JSX implementation for server-side rendering
+ */
+
+// Render a virtual DOM node to HTML string
+export function renderToString(vnode) {
+  // Handle null or undefined
+  if (vnode == null) return '';
+  
+  // Handle primitive values
+  if (typeof vnode === 'string' || typeof vnode === 'number') 
+    return escapeHtml(String(vnode));
+  
+  // Handle arrays (like fragments)
+  if (Array.isArray(vnode)) 
+    return vnode.map(renderToString).join('');
+  
+  // Handle functional components
+  if (typeof vnode.type === 'function') {
+    try {
+      const result = vnode.type(vnode.props || {});
+      return renderToString(result);
+    } catch (err) {
+      console.error('Error rendering component:', err);
+      return `<div class="error">Error: ${escapeHtml(err.message)}</div>`;
+    }
+  }
+  
+  // Handle Fragment
+  if (vnode.type === Symbol.for('react.fragment')) {
+    return renderToString(vnode.props.children);
+  }
+  
+  // Handle regular DOM elements
+  if (typeof vnode.type === 'string') {
+    let props = vnode.props || {};
+    let children = props.children || [];
+    if (!Array.isArray(children)) {
+      children = [children];
+    }
+    
+    // Build opening tag with attributes
+    let html = `<${vnode.type}`;
+    
+    for (const [key, value] of Object.entries(props)) {
+      if (key === 'children' || key === 'dangerouslySetInnerHTML') continue;
+      
+      // Handle event handlers (they should be ignored in SSR)
+      if (key.startsWith('on')) continue;
+      
+      // Handle className -> class
+      if (key === 'className') {
+        html += ` class="${escapeHtml(value)}"`;
+        continue;
+      }
+      
+      // Handle style objects
+      if (key === 'style' && typeof value === 'object') {
+        const styleStr = Object.entries(value)
+          .map(([k, v]) => `${kebabCase(k)}:${v}`)
+          .join(';');
+        html += ` style="${escapeHtml(styleStr)}"`;
+        continue;
+      }
+      
+      // Handle boolean attributes
+      if (value === true) {
+        html += ` ${key}`;
+        continue;
+      }
+      
+      // Skip false boolean attributes
+      if (value === false) continue;
+      
+      // Regular attributes
+      if (value != null) {
+        html += ` ${key}="${escapeHtml(value)}"`;
+      }
+    }
+    
+    // Handle self-closing tags
+    const selfClosing = ['img', 'input', 'br', 'hr', 'meta', 'link', 'area', 'base', 'col', 'embed', 'param', 'source', 'track', 'wbr'];
+    if (selfClosing.includes(vnode.type)) {
+      return `${html} />`;
+    }
+    
+    // Add closing bracket for opening tag
+    html += '>';
+    
+    // Handle dangerouslySetInnerHTML
+    if (props.dangerouslySetInnerHTML) {
+      html += props.dangerouslySetInnerHTML.__html || '';
+    } else {
+      // Add children
+      for (const child of children) {
+        html += renderToString(child);
+      }
+    }
+    
+    // Add closing tag
+    html += `</${vnode.type}>`;
+    
+    return html;
+  }
+  
+  // Unknown node type
+  console.warn('Unknown vnode type:', vnode.type);
+  return '';
+}
+
+// Create a JSX element
+export function jsx(type, props, ...children) {
+  props = props || {};
+  if (children.length) {
+    props.children = children.length === 1 ? children[0] : children;
+  }
+  return { type, props };
+}
+
+// Helper for escaping HTML
+function escapeHtml(str) {
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+// Helper to convert camelCase to kebab-case for CSS properties
+function kebabCase(str) {
+  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+// Create a basic requestLogger middleware
+export function requestLogger(req, res, next) {
+  console.log(`${new Date().toISOString()} - ${req.method} ${req.url}`);
+  next();
+}
+
+// Create a basic error handler middleware
+export function errorHandler(err, req, res, next) {
+  console.error('Server error:', err);
+  res.status(500).send('Server Error');
+}
+
+// Create a basic 404 handler middleware
+export function notFoundHandler(req, res) {
+  res.status(404).send('Not Found');
+}
+
+// Create a basic rate limiter middleware
+export function rateLimit(options = { windowMs: 60000, max: 100 }) {
+  const requests = new Map();
+  
+  return (req, res, next) => {
+    const ip = req.ip || 'unknown';
+    const now = Date.now();
+    
+    if (!requests.has(ip)) {
+      requests.set(ip, []);
+    }
+    
+    const reqs = requests.get(ip);
+    const validReqs = reqs.filter(time => now - time < options.windowMs);
+    
+    validReqs.push(now);
+    requests.set(ip, validReqs);
+    
+    if (validReqs.length > options.max) {
+      return res.status(429).send('Too Many Requests');
+    }
+    
+    next();
+  };
+}
+
+// Export other necessary functions
+export const Fragment = Symbol.for('react.fragment');
+export function loadGoWasmFromFile() {
+  throw new Error('WASM not supported in this environment');
+}

package/templates/complete-app/package.json

@@ -9,9 +9,10 @@
   },
   "dependencies": {
     "compression": "^1.8.0",
+    "cors": "^2.8.5",
     "dotenv": "^16.0.3",
     "express": "^4.18.2",
-    "frontend-hamroun": "latest",
+    "frontend-hamroun": "^1.2.79",
     "node-fetch": "^3.3.1"
   }
 }

package/templates/complete-app/public/client.js

@@ -1,4 +1,57 @@
-import { hydrate, jsx, useState, useEffect, useMemo, useRef, useContext, batchUpdates, createContext } from 'frontend-hamroun';
+// Simple client-side hydration script
+
+// Helper to create a jsx element
+function jsx(type, props, ...children) {
+  props = props || {};
+  if (children.length) {
+    props.children = children.length === 1 ? children[0] : children;
+  }
+  return { type, props };
+}
+
+// Global Fragment symbol
+const Fragment = Symbol.for('react.fragment');
+
+// Basic hydration logic for interactivity
+function hydrate(element, container) {
+  console.log('Hydrating app...');
+  
+  // Simple event delegation for the entire app container
+  container.addEventListener('click', (event) => {
+    const target = event.target;
+    
+    // Handle button clicks
+    if (target.tagName === 'BUTTON') {
+      console.log('Button clicked:', target.textContent);
+      
+      // Add some visual feedback
+      const originalColor = target.style.backgroundColor;
+      target.style.backgroundColor = '#ccc';
+      
+      setTimeout(() => {
+        target.style.backgroundColor = originalColor;
+      }, 200);
+    }
+    
+    // Handle links
+    if (target.tagName === 'A' && target.getAttribute('href') && !target.getAttribute('href').startsWith('http')) {
+      event.preventDefault();
+      const href = target.getAttribute('href');
+      console.log('Link clicked:', href);
+      
+      // Simple client-side navigation simulation
+      history.pushState(null, '', href);
+      
+      // Show a loading message - in a real app, you would fetch the new page
+      container.innerHTML = '<div class="container"><h3>Loading...</h3></div>';
+      
+      // Reload the page after a short delay to demonstrate
+      setTimeout(() => {
+        window.location.reload();
+      }, 300);
+    }
+  });
+}
 
 // Immediately invoked function to handle hydration
 (async function() {
@@ -22,55 +75,10 @@ import { hydrate, jsx, useState, useEffect, useMemo, useRef, useContext, batchUp
       console.error('Error parsing initial data:', err);
     }
 
-    // Path for component loading
-    const path = initialData.path || window.location.pathname;
-    const normalizedPath = path === '/' ? '/index' : path;
+    // Make the app interactive
+    hydrate({ type: 'div', props: { initialData } }, appRoot);
     
-    try {
-      // Import the component for the current path
-      console.log(`Importing component for path: ${normalizedPath}`);
-      // First attempt to load the page component
-      const module = await import(`/pages${normalizedPath}.js`).catch(() => 
-        import(`/pages${normalizedPath}/index.js`));
-      
-      if (!module || !module.default) {
-        throw new Error(`No default export found for ${normalizedPath}`);
-      }
-
-      // Get the component
-      const PageComponent = module.default;
-      
-      // Use batchUpdates for better performance during hydration
-      batchUpdates(() => {
-        console.log('Hydrating app with props:', initialData);
-        // Hydrate the component
-        hydrate(jsx(PageComponent, initialData), appRoot);
-        console.log('Hydration complete for', normalizedPath);
-      });
-      
-    } catch (err) {
-      console.error(`Error loading or hydrating component: ${err.message}`);
-      
-      // Fallback to a simple component that shows the error
-      const ErrorComponent = (props) => {
-        const [showDetails, setShowDetails] = useState(false);
-        
-        return jsx('div', { className: 'error-container' }, [
-          jsx('h1', {}, 'Error Loading Page'),
-          jsx('p', {}, `Failed to load: ${normalizedPath}`),
-          jsx('button', { 
-            onClick: () => setShowDetails(!showDetails),
-            className: 'btn'
-          }, showDetails ? 'Hide Details' : 'Show Details'),
-          showDetails && jsx('pre', { className: 'error-details' }, 
-            `${err.message}\n${err.stack || ''}`
-          ),
-          jsx('a', { href: '/', className: 'button' }, 'Go Home')
-        ]);
-      };
-      
-      hydrate(jsx(ErrorComponent, initialData), appRoot);
-    }
+    console.log('App hydrated successfully');
   } catch (err) {
     console.error('Hydration failed:', err);
   }
@@ -78,3 +86,4 @@ import { hydrate, jsx, useState, useEffect, useMemo, useRef, useContext, batchUp
 
 // Make jsx globally available
 window.jsx = jsx;
+window.Fragment = Fragment;

package/templates/complete-app/public/index.html

@@ -3,45 +3,116 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Static Fallback</title>
-  <!-- Import Tailwind-like styles for quick styling -->
-  <link href="https://cdn.jsdelivr.net/npm/daisyui@3.7.4/dist/full.css" rel="stylesheet" type="text/css" />
-  <script src="https://cdn.tailwindcss.com"></script>
-  <!-- Client-side script for hydration -->
-  <script type="module" src="/src/client.tsx"></script>
+  <title>Static Fallback - Frontend Hamroun</title>
+  <link href="/styles.css" rel="stylesheet" type="text/css">
   <style>
     body {
-      font-family: sans-serif;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      background-color: #f8f9fa;
+      color: #212529;
+      line-height: 1.5;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+    }
+    .container {
       max-width: 800px;
       margin: 0 auto;
       padding: 2rem;
-      line-height: 1.6;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+    .alert {
+      background-color: #f8d7da;
+      color: #721c24;
+      border: 1px solid #f5c6cb;
+      border-radius: 4px;
+      padding: 1.5rem;
+      margin-bottom: 2rem;
     }
     .warning {
       background-color: #fff3cd;
-      border: 1px solid #ffecb5;
       color: #856404;
-      padding: 1rem;
+      border: 1px solid #ffeeba;
       border-radius: 4px;
-      margin-bottom: 1rem;
+      padding: 1.5rem;
+      margin-bottom: 2rem;
+    }
+    .steps {
+      background-color: #e9ecef;
+      border-radius: 4px;
+      padding: 1.5rem;
+    }
+    h1 {
+      margin-top: 0;
+      color: #0066cc;
+    }
+    footer {
+      text-align: center;
+      padding: 1rem;
+      background-color: #f1f1f1;
+      font-size: 0.875rem;
+      color: #6c757d;
     }
     code {
-      background-color: #f5f5f5;
+      background-color: #f1f1f1;
       padding: 0.2rem 0.4rem;
       border-radius: 3px;
     }
+    .logo {
+      font-size: 2rem;
+      margin-bottom: 2rem;
+      color: #0066cc;
+      font-weight: bold;
+      text-align: center;
+    }
+    ul {
+      margin-bottom: 0;
+    }
+    li {
+      margin-bottom: 0.5rem;
+    }
+    li:last-child {
+      margin-bottom: 0;
+    }
   </style>
 </head>
 <body>
-  <!-- App will be rendered here by SSR -->
-  <div id="app">
-    <div class="warning">
-      <h2>STATIC INDEX.HTML FILE</h2>
-      <p>You should NOT be seeing this page if the server is running correctly.</p>
+  <div class="container">
+    <div class="logo">Frontend Hamroun</div>
+    
+    <div class="alert">
+      <h1>STATIC INDEX.HTML FILE</h1>
+      <p><strong>You should NOT be seeing this page if the server is running correctly.</strong></p>
       <p>This is a static file that should only be used as a fallback when the server is not running.</p>
+    </div>
+    
+    <div class="warning">
       <p>If you're seeing this while running <code>npm run dev</code>, there's likely an issue with the Express route handling.</p>
       <p>Try clearing your browser cache and refreshing the page.</p>
     </div>
+    
+    <div class="steps">
+      <h2>Troubleshooting Steps:</h2>
+      <ul>
+        <li>Check your terminal for any error messages</li>
+        <li>Verify that you've installed all dependencies with <code>npm install</code></li>
+        <li>Check that the server port (default: 3000) is not already in use</li>
+        <li>Make sure your Express routes are configured correctly</li>
+        <li>Try restarting the server with <code>npm run dev</code></li>
+        <li>Check that all required environment variables are set</li>
+      </ul>
+    </div>
   </div>
+  
+  <footer class="footer">
+    <div class="container">
+      <p>&copy; 2025 Frontend Hamroun - A lightweight full-stack JavaScript framework</p>
+    </div>
+  </footer>
 </body>
 </html>