frontend-hamroun 1.2.79 → 1.2.82

package/templates/complete-app/server.js

@@ -2,17 +2,15 @@ import express from 'express';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import fs from 'fs';
+// Fix imports by using only the exports that exist
 import { 
   renderToString, 
-  jsx, 
-  Server, 
-  createServer,
-  rateLimit,
+  jsx,
   requestLogger,
   errorHandler,
   notFoundHandler,
-  loadGoWasmFromFile
-} from 'frontend-hamroun';
+  rateLimit
+} from './lib/frontend-hamroun.js';
 import dotenv from 'dotenv';
 import compression from 'compression';
 import cors from 'cors';
@@ -42,6 +40,7 @@ app.use(rateLimit({
 }));
 
 // Serve static files from the public directory
+// Important: This middleware should be defined BEFORE your catch-all route
 app.use(express.static(path.join(__dirname, 'public')));
 
 // Add correct MIME type for client.js module
@@ -55,7 +54,7 @@ app.get('*.wasm', (req, res, next) => {
   next();
 });
 
-// Add API routes example with authentication
+// Add API routes example
 app.get('/api/hello', (req, res) => {
   res.json({
     message: 'Hello from the API!',
@@ -63,31 +62,6 @@ app.get('/api/hello', (req, res) => {
   });
 });
 
-// Load WebAssembly modules if available
-async function loadWasmModules() {
-  const wasmDir = path.join(__dirname, 'wasm');
-  
-  if (fs.existsSync(wasmDir)) {
-    try {
-      const wasmFiles = fs.readdirSync(wasmDir).filter(file => file.endsWith('.wasm'));
-      
-      for (const wasmFile of wasmFiles) {
-        const wasmPath = path.join(wasmDir, wasmFile);
-        const wasmModule = await loadGoWasmFromFile(wasmPath, { debug: true });
-        
-        console.log(`Loaded WASM module: ${wasmFile}`);
-        console.log(`Available functions:`, Object.keys(wasmModule.functions));
-        
-        // Store modules globally for API routes to use
-        global.wasmModules = global.wasmModules || {};
-        global.wasmModules[wasmFile.replace('.wasm', '')] = wasmModule;
-      }
-    } catch (error) {
-      console.error('Failed to load WASM modules:', error);
-    }
-  }
-}
-
 // Find the pages directory
 const getPagesDirectory = () => {
   return path.join(__dirname, 'pages');
@@ -103,31 +77,6 @@ const fileExists = async (filePath) => {
   }
 };
 
-// Generate meta tags for SEO
-async function generateMetaTags(content, title = '') {
-  // Extract title from content or use provided title
-  const pageTitle = title || 'Frontend Hamroun App';
-  
-  // Generate description from content
-  const plainText = content.replace(/<[^>]*>/g, ' ').trim();
-  const description = plainText.substring(0, 160) + (plainText.length > 160 ? '...' : '');
-  
-  // Extract keywords
-  const keywords = plainText
-    .toLowerCase()
-    .replace(/[^\w\s]/g, '')
-    .split(/\s+/)
-    .filter(w => w.length > 3)
-    .slice(0, 5)
-    .join(', ');
-  
-  return {
-    title: pageTitle,
-    description,
-    keywords
-  };
-}
-
 // Map URL path to component path
 const getComponentPath = async (urlPath) => {
   const pagesDir = getPagesDirectory();
@@ -144,8 +93,7 @@ const getComponentPath = async (urlPath) => {
   }
   
   // Try direct match (e.g., /about -> /pages/about.js)
-  // Only look for .js files since Node.js ESM doesn't support .jsx directly
-  const possibleExtensions = ['.js']; // Remove .jsx, .ts, .tsx
+  const possibleExtensions = ['.js']; 
   
   for (const ext of possibleExtensions) {
     const directPath = path.join(pagesDir, `${urlPath.slice(1)}${ext}`);
@@ -168,80 +116,24 @@ const getComponentPath = async (urlPath) => {
     }
   }
   
-  // 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')) {
-        if (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 SSR
+// Handle all GET routes with SSR - explicitly exclude /public/ paths
 app.get('*', async (req, res, next) => {
   try {
-    // Skip static assets and API routes
-    if (req.path.match(/\.(js|css|ico|png|jpg|jpeg|gif|svg|wasm)$/) || req.path.startsWith('/api/')) {
+    // Skip API routes
+    if (req.path.startsWith('/api/')) {
       return next();
     }
-    
+
+    // Skip static assets - check file extensions that should be handled as static
+    if (req.path.match(/\.(js|css|ico|png|jpg|jpeg|gif|svg|wasm|txt|pdf|json|map)$/)) {
+      return next();
+    }
+
+    // Try to find the matching component
     const routeResult = await getComponentPath(req.path);
     
     if (!routeResult) {
@@ -271,16 +163,14 @@ app.get('*', async (req, res, next) => {
       `);
     }
     
-    // Fixed component loading to use file:// URL scheme for Windows
-    const componentUrl = new URL(`file://${routeResult.componentPath}`).href;
-    
+    // Import the component
     try {
-      // Import the component - handle both module.default and direct module exports
+      const componentUrl = `file://${routeResult.componentPath}`;
       const moduleImport = await import(componentUrl);
       const PageComponent = moduleImport.default || moduleImport;
       
       if (!PageComponent || typeof PageComponent !== 'function') {
-        throw new Error(`Invalid component in ${routeResult.componentPath}: component is not a function`);
+        throw new Error(`Invalid component in ${routeResult.componentPath}`);
       }
 
       // Create props with route data
@@ -293,40 +183,9 @@ app.get('*', async (req, res, next) => {
         }
       };
       
-      // Use a simpler rendering approach for more reliability
-      let html;
-      try {
-        // Create a simple HTML structure based on the component's output
-        const result = PageComponent(initialProps);
-        
-        // Create a fallback HTML if the result is not valid
-        if (!result || typeof result !== 'object' || !result.type) {
-          html = `
-            <div class="error-container">
-              <h1>Frontend Hamroun App</h1>
-              <p>This is a simple fallback page.</p>
-              <p>Path: ${req.path}</p>
-              <p>Server time: ${initialProps.api.serverTime}</p>
-            </div>
-          `;
-        } else {
-          // Use renderToString with error handling
-          html = renderToString(result) || '<div>Rendering failed</div>';
-        }
-      } catch (err) {
-        console.error("Error with renderToString:", err);
-        html = `
-          <div class="error-container">
-            <h1>Rendering Error</h1>
-            <p>There was an error rendering this page: ${err.message}</p>
-            <p>Path: ${req.path}</p>
-          </div>
-        `;
-      }
-      
-      // Generate meta tags
-      const metaTags = await generateMetaTags(html, 
-        typeof PageComponent.getTitle === 'function' ? PageComponent.getTitle(initialProps) : 'Frontend Hamroun App');
+      // Render the component
+      const result = PageComponent(initialProps);
+      let html = renderToString(result);
       
       // Send complete HTML with hydration data
       res.send(`
@@ -335,61 +194,22 @@ app.get('*', async (req, res, next) => {
           <head>
             <meta charset="UTF-8">
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
-            
-            <!-- Generated Meta Tags -->
-            <title>${metaTags.title}</title>
-            <meta name="description" content="${metaTags.description}">
-            <meta name="keywords" content="${metaTags.keywords}">
-            
-            <!-- Open Graph Meta Tags -->
-            <meta property="og:title" content="${metaTags.title}">
-            <meta property="og:description" content="${metaTags.description}">
-            <meta property="og:type" content="website">
-            <meta property="og:url" content="${req.protocol}://${req.get('host')}${req.originalUrl}">
-            
-            <!-- Import styles -->
+            <title>Frontend Hamroun App</title>
             <link href="/styles.css" rel="stylesheet" type="text/css">
           </head>
           <body>
             <div id="app">${html}</div>
-            
-            <!-- Add initial state for hydration -->
             <script id="__APP_DATA__" type="application/json">${JSON.stringify(initialProps)}</script>
             <script type="module" src="/client.js"></script>
           </body>
         </html>
       `);
-    } catch (importError) {
-      console.error(`Error importing component from ${componentUrl}:`, importError);
-      throw new Error(`Failed to import component: ${importError.message}`);
+    } catch (error) {
+      console.error('Error rendering component:', error);
+      next(error);
     }
   } 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">
-          <link href="/styles.css" rel="stylesheet" type="text/css">
-        </head>
-        <body>
-          <div id="app">
-            <div class="container">
-              <h1>500 - Server Error</h1>
-              <p>Something went wrong on the server.</p>
-              ${process.env.NODE_ENV === 'development' ? `<pre>${error.stack}</pre>` : ''}
-              <a href="/" class="button">Go to Home</a>
-            </div>
-          </div>
-          <script id="__APP_DATA__" type="application/json">${JSON.stringify({
-            path: req.path,
-            error: 'server_error'
-          })}</script>
-          <script type="module" src="/client.js"></script>
-        </body>
-      </html>
-    `);
+    next(error);
   }
 });
 
@@ -400,18 +220,7 @@ app.use(errorHandler);
 app.use(notFoundHandler);
 
 // Start the server
-const startServer = async () => {
-  // Load WebAssembly modules if available
-  await loadWasmModules();
-  
-  // Start the server
-  app.listen(PORT, () => {
-    console.log(`Server running at http://localhost:${PORT}`);
-    console.log(`Mode: ${process.env.NODE_ENV || 'development'}`);
-  });
-};
-
-startServer().catch(err => {
-  console.error('Failed to start server:', err);
-  process.exit(1);
+app.listen(PORT, () => {
+  console.log(`Server running at http://localhost:${PORT}`);
+  console.log(`Mode: ${process.env.NODE_ENV || 'development'}`);
 });

package/templates/fullstack-app/build/main.js

@@ -14,7 +14,90 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
-// node_modules/frontend-hamroun/dist/index.mjs
+// node_modules/frontend-hamroun/dist/jsx-runtime.js
+function jsx(type, props) {
+  console.log("JSX Transform:", { type, props });
+  const processedProps = { ...props };
+  if (arguments.length > 2) {
+    processedProps.children = Array.prototype.slice.call(arguments, 2);
+  }
+  return { type, props: processedProps };
+}
+async function createElement(vnode) {
+  console.log("Creating element from:", vnode);
+  if (vnode == null) {
+    return document.createTextNode("");
+  }
+  if (typeof vnode === "boolean") {
+    return document.createTextNode("");
+  }
+  if (typeof vnode === "number" || typeof vnode === "string") {
+    return document.createTextNode(String(vnode));
+  }
+  if (Array.isArray(vnode)) {
+    const fragment = document.createDocumentFragment();
+    for (const child of vnode) {
+      const node = await createElement(child);
+      fragment.appendChild(node);
+    }
+    return fragment;
+  }
+  if ("type" in vnode && vnode.props !== void 0) {
+    const { type, props } = vnode;
+    if (typeof type === "function") {
+      try {
+        const result = await type(props || {});
+        const node = await createElement(result);
+        if (node instanceof Element) {
+          node.setAttribute("data-component-id", type.name || type.toString());
+        }
+        return node;
+      } catch (error) {
+        console.error("Error rendering component:", error);
+        return document.createTextNode("");
+      }
+    }
+    const element = document.createElement(type);
+    for (const [key, value] of Object.entries(props || {})) {
+      if (key === "children")
+        continue;
+      if (key.startsWith("on") && typeof value === "function") {
+        const eventName = key.toLowerCase().slice(2);
+        const existingHandler = element.__events?.[eventName];
+        if (existingHandler) {
+          element.removeEventListener(eventName, existingHandler);
+        }
+        element.addEventListener(eventName, value);
+        if (!element.__events) {
+          element.__events = {};
+        }
+        element.__events[eventName] = value;
+      } else if (key === "style" && typeof value === "object") {
+        Object.assign(element.style, value);
+      } else if (key === "className") {
+        element.setAttribute("class", String(value));
+      } else if (key !== "key" && key !== "ref") {
+        element.setAttribute(key, String(value));
+      }
+    }
+    const children = props?.children;
+    if (children != null) {
+      const childArray = Array.isArray(children) ? children.flat() : [children];
+      for (const child of childArray) {
+        const childNode = await createElement(child);
+        element.appendChild(childNode);
+      }
+    }
+    return element;
+  }
+  return document.createTextNode(String(vnode));
+}
+var init_jsx_runtime = __esm({
+  "node_modules/frontend-hamroun/dist/jsx-runtime.js"() {
+  }
+});
+
+// node_modules/frontend-hamroun/dist/server-renderer-QHt45Ip2.js
 function batchUpdates(fn) {
   if (isBatching) {
     queue.push(fn);
@@ -25,7 +108,7 @@ function batchUpdates(fn) {
     fn();
     while (queue.length > 0) {
       const nextFn = queue.shift();
-      nextFn == null ? void 0 : nextFn();
+      nextFn?.();
     }
   } finally {
     isBatching = false;
@@ -61,7 +144,7 @@ function useState(initial) {
       componentState.set(index2, initial);
     }
     const state2 = componentState.get(index2);
-    const setState2 = (newValue) => {
+    const setState2 = (_newValue) => {
     };
     stateIndices.set(currentRender, index2 + 1);
     return [state2, setState2];
@@ -70,7 +153,7 @@ function useState(initial) {
     states.set(currentRender, []);
   }
   const componentStates = states.get(currentRender);
-  const index = stateIndices.get(currentRender);
+  const index = stateIndices.get(currentRender) || 0;
   if (index >= componentStates.length) {
     componentStates.push(initial);
   }
@@ -92,19 +175,24 @@ function useState(initial) {
 function useEffect(callback, deps) {
   if (!currentRender)
     throw new Error("useEffect must be called within a render");
-  const effectIndex = stateIndices.get(currentRender);
+  if (isServer) {
+    const effectIndex2 = stateIndices.get(currentRender) || 0;
+    stateIndices.set(currentRender, effectIndex2 + 1);
+    return;
+  }
+  const effectIndex = stateIndices.get(currentRender) || 0;
   if (!effects.has(currentRender)) {
     effects.set(currentRender, []);
   }
   const componentEffects = effects.get(currentRender);
   const prevEffect = componentEffects[effectIndex];
   if (!prevEffect || !deps || !prevEffect.deps || deps.some((dep, i) => dep !== prevEffect.deps[i])) {
-    if (prevEffect == null ? void 0 : prevEffect.cleanup) {
+    if (prevEffect?.cleanup) {
       prevEffect.cleanup();
     }
     queueMicrotask(() => {
       const cleanup = callback() || void 0;
-      componentEffects[effectIndex] = { cleanup, deps };
+      componentEffects[effectIndex] = { cleanup, deps: deps || [] };
     });
   }
   stateIndices.set(currentRender, effectIndex + 1);
@@ -112,7 +200,7 @@ function useEffect(callback, deps) {
 function useMemo(factory, deps) {
   if (!currentRender)
     throw new Error("useMemo must be called within a render");
-  const memoIndex = stateIndices.get(currentRender);
+  const memoIndex = stateIndices.get(currentRender) || 0;
   if (!memos.has(currentRender)) {
     memos.set(currentRender, []);
   }
@@ -120,7 +208,7 @@ function useMemo(factory, deps) {
   const prevMemo = componentMemos[memoIndex];
   if (!prevMemo || deps && deps.some((dep, i) => !Object.is(dep, prevMemo.deps[i]))) {
     const value = factory();
-    componentMemos[memoIndex] = { value, deps };
+    componentMemos[memoIndex] = { value, deps: deps || [] };
     stateIndices.set(currentRender, memoIndex + 1);
     return value;
   }
@@ -148,84 +236,25 @@ function useErrorBoundary() {
   const [error, setError] = useState(null);
   return [error, () => setError(null)];
 }
-function jsx(type, props) {
-  console.log("JSX Transform:", { type, props });
-  const processedProps = { ...props };
-  if (arguments.length > 2) {
-    processedProps.children = Array.prototype.slice.call(arguments, 2);
-  }
-  return { type, props: processedProps };
-}
-async function createElement(vnode) {
-  var _a;
-  console.log("Creating element from:", vnode);
-  if (vnode == null) {
-    return document.createTextNode("");
-  }
-  if (typeof vnode === "boolean") {
-    return document.createTextNode("");
-  }
-  if (typeof vnode === "number" || typeof vnode === "string") {
-    return document.createTextNode(String(vnode));
-  }
-  if (Array.isArray(vnode)) {
-    const fragment = document.createDocumentFragment();
-    for (const child of vnode) {
-      const node = await createElement(child);
-      fragment.appendChild(node);
-    }
-    return fragment;
-  }
-  if ("type" in vnode && vnode.props !== void 0) {
-    const { type, props } = vnode;
-    if (typeof type === "function") {
-      try {
-        const result = await type(props || {});
-        const node = await createElement(result);
-        if (node instanceof Element) {
-          node.setAttribute("data-component-id", type.name || type.toString());
-        }
-        return node;
-      } catch (error) {
-        console.error("Error rendering component:", error);
-        return document.createTextNode("");
-      }
-    }
-    const element = document.createElement(type);
-    for (const [key, value] of Object.entries(props || {})) {
-      if (key === "children")
-        continue;
-      if (key.startsWith("on") && typeof value === "function") {
-        const eventName = key.toLowerCase().slice(2);
-        const existingHandler = (_a = element.__events) == null ? void 0 : _a[eventName];
-        if (existingHandler) {
-          element.removeEventListener(eventName, existingHandler);
-        }
-        element.addEventListener(eventName, value);
-        if (!element.__events) {
-          element.__events = {};
-        }
-        element.__events[eventName] = value;
-      } else if (key === "style" && typeof value === "object") {
-        Object.assign(element.style, value);
-      } else if (key === "className") {
-        element.setAttribute("class", String(value));
-      } else if (key !== "key" && key !== "ref") {
-        element.setAttribute(key, String(value));
-      }
-    }
-    const children = props == null ? void 0 : props.children;
-    if (children != null) {
-      const childArray = Array.isArray(children) ? children.flat() : [children];
-      for (const child of childArray) {
-        const childNode = await createElement(child);
-        element.appendChild(childNode);
-      }
-    }
-    return element;
+var isBatching, queue, currentRender, states, stateIndices, effects, memos, isServer, serverStates, globalRenderCallback, globalContainer, currentElement;
+var init_server_renderer_QHt45Ip2 = __esm({
+  "node_modules/frontend-hamroun/dist/server-renderer-QHt45Ip2.js"() {
+    isBatching = false;
+    queue = [];
+    currentRender = 0;
+    states = /* @__PURE__ */ new Map();
+    stateIndices = /* @__PURE__ */ new Map();
+    effects = /* @__PURE__ */ new Map();
+    memos = /* @__PURE__ */ new Map();
+    isServer = typeof window === "undefined";
+    serverStates = /* @__PURE__ */ new Map();
+    globalRenderCallback = null;
+    globalContainer = null;
+    currentElement = null;
   }
-  return document.createTextNode(String(vnode));
-}
+});
+
+// node_modules/frontend-hamroun/dist/renderer-Bo9zkUZ_.js
 async function hydrate(element, container) {
   isHydrating = true;
   try {
@@ -250,25 +279,25 @@ async function render(element, container) {
     }
   });
 }
-var isBatching, queue, currentRender, states, stateIndices, effects, memos, globalRenderCallback, globalContainer, currentElement, isServer, serverStates, isHydrating;
-var init_dist = __esm({
-  "node_modules/frontend-hamroun/dist/index.mjs"() {
-    isBatching = false;
-    queue = [];
-    currentRender = 0;
-    states = /* @__PURE__ */ new Map();
-    stateIndices = /* @__PURE__ */ new Map();
-    effects = /* @__PURE__ */ new Map();
-    memos = /* @__PURE__ */ new Map();
-    globalRenderCallback = null;
-    globalContainer = null;
-    currentElement = null;
-    isServer = typeof window === "undefined";
-    serverStates = /* @__PURE__ */ new Map();
+var isHydrating;
+var init_renderer_Bo9zkUZ = __esm({
+  "node_modules/frontend-hamroun/dist/renderer-Bo9zkUZ_.js"() {
+    init_jsx_runtime();
+    init_server_renderer_QHt45Ip2();
     isHydrating = false;
   }
 });
 
+// node_modules/frontend-hamroun/dist/index.js
+var init_dist = __esm({
+  "node_modules/frontend-hamroun/dist/index.js"() {
+    init_jsx_runtime();
+    init_renderer_Bo9zkUZ();
+    init_server_renderer_QHt45Ip2();
+    init_server_renderer_QHt45Ip2();
+  }
+});
+
 // src/pages/404.tsx
 var __exports = {};
 __export(__exports, {