frontend-hamroun 1.2.83 → 1.2.85

package/templates/complete-app/public/client.d.ts

@@ -0,0 +1,17 @@
+declare function jsx(type: any, props: any, ...children: any[]): {
+    type: any;
+    props: any;
+};
+declare function jsx(type: any, props: any, ...args: any[]): {
+    type: any;
+    props: any;
+};
+declare function jsx(type: any, props: any, ...args: any[]): {
+    type: any;
+    props: any;
+};
+declare function hydrate(element: any, container: any): void;
+declare function hydrate(element: any, container: any): Promise<void>;
+declare function hydrate(element: any, container: any): Promise<void>;
+declare const Fragment: typeof Fragment;
+//# sourceMappingURL=client.d.ts.map

package/templates/complete-app/public/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["client.js"],"names":[],"mappings":"AAGA;;;EAMC;;;;;;;;;AAMD,6DAsCC;;;AAzCD,wCAA8C"}

package/templates/complete-app/server.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=server.d.ts.map

package/templates/complete-app/server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["server.ts"],"names":[],"mappings":""}

package/templates/complete-app/server.js

@@ -1,226 +1,244 @@
-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,
-  requestLogger,
-  errorHandler,
-  notFoundHandler,
-  rateLimit
-} from './lib/frontend-hamroun.js';
-import dotenv from 'dotenv';
-import compression from 'compression';
-import cors from 'cors';
-
-// Load environment variables
-dotenv.config();
-
-// Get __dirname equivalent in ESM
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-// Create Express app
-const app = express();
-const PORT = process.env.PORT || 3000;
-
-// Middleware
-app.use(compression()); // Compress responses
-app.use(express.json()); // Parse JSON requests
-app.use(express.urlencoded({ extended: true })); // Parse URL-encoded requests
-app.use(cors()); // Enable CORS
-app.use(requestLogger); // Log all requests
-
-// Add rate limiting to prevent abuse
-app.use(rateLimit({
-  windowMs: 15 * 60 * 1000, // 15 minutes
-  max: 100 // limit each IP to 100 requests per windowMs
-}));
-
-// 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
-app.get('/client.js', (req, res) => {
-  res.type('application/javascript').sendFile(path.join(__dirname, 'public', 'client.js'));
-});
-
-// Serve WebAssembly files with correct MIME type
-app.get('*.wasm', (req, res, next) => {
-  res.type('application/wasm');
-  next();
-});
-
-// Add API routes example
-app.get('/api/hello', (req, res) => {
-  res.json({
-    message: 'Hello from the API!',
-    serverTime: new Date().toISOString()
-  });
-});
-
-// Find the pages directory
-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 possibleExtensions = ['.js']; 
-  
-  for (const ext of possibleExtensions) {
-    const directPath = path.join(pagesDir, `${urlPath.slice(1)}${ext}`);
-    if (await fileExists(directPath)) {
-      return { 
-        componentPath: directPath,
-        params: {}
-      };
-    }
-  }
-  
-  // Try directory index (e.g., /about -> /pages/about/index.js)
-  for (const ext of possibleExtensions) {
-    const dirIndexPath = path.join(pagesDir, urlPath.slice(1), `index${ext}`);
-    if (await fileExists(dirIndexPath)) {
-      return { 
-        componentPath: dirIndexPath,
-        params: {}
-      };
-    }
-  }
-  
-  // No match found
-  return null;
-};
-
-// Handle all GET routes with SSR - explicitly exclude /public/ paths
-app.get('*', async (req, res, next) => {
-  try {
-    // 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) {
-      return res.status(404).send(`
+import express from 'express';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { renderToString } from 'frontend-hamroun';
+import { Database } from 'frontend-hamroun';
+import { AuthService } from 'frontend-hamroun';
+import { requestLogger, errorHandler, notFoundHandler, rateLimit } from 'frontend-hamroun';
+import dotenv from 'dotenv';
+// Load environment variables
+dotenv.config();
+// Get directory name in ESM
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+// Create Express app
+const app = express();
+const port = process.env.PORT ? parseInt(process.env.PORT) : 3000;
+// Add middleware
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+app.use(requestLogger);
+// Rate limiting for API routes
+app.use('/api', rateLimit({
+    windowMs: 15 * 60 * 1000, // 15 minutes
+    max: 100 // limit each IP to 100 requests per windowMs
+}));
+// Configure database if connection string is provided
+let db = null;
+if (process.env.DATABASE_URL) {
+    db = new Database({
+        url: process.env.DATABASE_URL,
+        type: (process.env.DATABASE_TYPE || 'mongodb')
+    });
+    // Connect to database
+    try {
+        await db.connect();
+        console.log('Database connected successfully');
+    }
+    catch (error) {
+        console.error('Database connection failed:', error);
+    }
+}
+// Configure auth if secret is provided
+let auth = null;
+if (process.env.JWT_SECRET) {
+    auth = new AuthService({
+        secret: process.env.JWT_SECRET,
+        expiresIn: process.env.JWT_EXPIRES_IN || '24h'
+    });
+    // Add auth middleware
+    app.use(auth.initialize());
+    // Example protected route
+    app.get('/api/protected', auth.requireAuth(), (req, res) => {
+        res.json({ message: 'Protected route accessed successfully' });
+    });
+    // Example role-based protection
+    app.get('/api/admin', auth.requireRoles(['admin']), (req, res) => {
+        res.json({ message: 'Admin route accessed successfully' });
+    });
+    // Login route
+    app.post('/api/login', async (req, res) => {
+        const { username, password } = req.body;
+        // In a real app, fetch user from database
+        const user = { id: 1, username, roles: ['user'] };
+        const token = auth.generateToken(user);
+        res.json({ token, user: { id: user.id, username: user.username, roles: user.roles } });
+    });
+}
+// Serve static files from public directory
+app.use(express.static(join(__dirname, 'public')));
+// API endpoint example
+app.get('/api/page-data', (req, res) => {
+    res.json({
+        title: 'Server-side Data',
+        content: 'This data was fetched from the server',
+        timestamp: new Date().toISOString()
+    });
+});
+// Meta tag generation function (using local logic for simplicity)
+async function generateMetaTags(pageContent) {
+    // Extract title from page content
+    const title = pageContent.split('\n')[0].replace(/[#*]/g, '').trim() ||
+        'Frontend Hamroun SSR Page';
+    // Generate description from content
+    const description = pageContent.substring(0, 150) + '...';
+    // Extract keywords
+    const keywords = pageContent
+        .toLowerCase()
+        .replace(/[^\w\s]/g, '')
+        .split(/\s+/)
+        .filter(w => w.length > 3)
+        .slice(0, 5)
+        .join(', ');
+    return {
+        title,
+        description,
+        keywords
+    };
+}
+// Helper function to check if file exists
+async function fileExists(path) {
+    try {
+        const fs = await import('fs/promises');
+        await fs.access(path);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+// Implement basic SSR without relying on complex server functionality
+app.get('*', async (req, res) => {
+    try {
+        // Import the page component
+        const pagesDir = join(__dirname, 'src', 'pages');
+        let componentPath;
+        // Map URL path to component file
+        if (req.path === '/') {
+            componentPath = join(pagesDir, 'index.js');
+        }
+        else {
+            componentPath = join(pagesDir, `${req.path}.js`);
+            // Check if it's a directory with index.js
+            if (!await fileExists(componentPath)) {
+                componentPath = join(pagesDir, req.path, 'index.js');
+            }
+        }
+        // If component doesn't exist, return 404
+        if (!await fileExists(componentPath)) {
+            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">
-            <link href="/styles.css" rel="stylesheet" type="text/css">
           </head>
           <body>
-            <div id="app">
-              <div class="container">
-                <h1>404 - Page Not Found</h1>
-                <p>The page you requested could not be found.</p>
-                <a href="/" class="button">Go to Home</a>
-              </div>
-            </div>
-            <script id="__APP_DATA__" type="application/json">${JSON.stringify({
-              path: req.path,
-              error: 'not_found'
-            })}</script>
-            <script type="module" src="/client.js"></script>
+            <h1>404 - Page Not Found</h1>
+            <p>The page you requested does not exist.</p>
           </body>
         </html>
-      `);
-    }
-    
-    // Import the component
-    try {
-      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}`);
-      }
-
-      // Create props with route data
-      const initialProps = {
-        params: routeResult.params,
-        path: req.path,
-        query: req.query,
-        api: {
-          serverTime: new Date().toISOString()
-        }
-      };
-      
-      // Render the component
-      const result = PageComponent(initialProps);
-      let html = renderToString(result);
-      
-      // Send complete HTML with hydration data
-      res.send(`
-        <!DOCTYPE html>
-        <html lang="en">
-          <head>
-            <meta charset="UTF-8">
-            <meta name="viewport" content="width=device-width, initial-scale=1.0">
-            <title>Frontend Hamroun App</title>
-            <link href="/styles.css" rel="stylesheet" type="text/css">
-          </head>
-          <body>
-            <div id="app">${html}</div>
-            <script id="__APP_DATA__" type="application/json">${JSON.stringify(initialProps)}</script>
-            <script type="module" src="/client.js"></script>
-          </body>
-        </html>
-      `);
-    } catch (error) {
-      console.error('Error rendering component:', error);
-      next(error);
-    }
-  } catch (error) {
-    next(error);
-  }
-});
-
-// Add error handler middleware
-app.use(errorHandler);
-
-// Add 404 handler for API routes
-app.use(notFoundHandler);
-
-// Start the server
-app.listen(PORT, () => {
-  console.log(`Server running at http://localhost:${PORT}`);
-  console.log(`Mode: ${process.env.NODE_ENV || 'development'}`);
-});
+      `);
+        }
+        // Import the component
+        const { default: PageComponent } = await import(componentPath);
+        // Generate page content for meta tags
+        const pageContent = `
+      Frontend Hamroun SSR Page
+      This is a server-rendered page using the Frontend Hamroun framework.
+      Path: ${req.path}
+      Timestamp: ${new Date().toISOString()}
+    `;
+        // Generate meta tags
+        const metaTags = await generateMetaTags(pageContent);
+        // Render the component to string
+        const content = renderToString(PageComponent());
+        // Send the HTML response
+        res.send(`
+      <!DOCTYPE html>
+      <html lang="en">
+      <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 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="/assets/client.js"></script>
+      </head>
+      <body>
+        <div id="app">${content}</div>
+        
+        <!-- Add initial state for hydration -->
+        <script>
+          window.__INITIAL_STATE__ = ${JSON.stringify({
+            path: req.path,
+            timestamp: new Date().toISOString(),
+            metaTags
+        })};
+        </script>
+      </body>
+      </html>
+    `);
+    }
+    catch (error) {
+        console.error('Error rendering page:', error);
+        res.status(500).send(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>500 - Server Error</title>
+        </head>
+        <body>
+          <h1>500 - Server Error</h1>
+          <p>There was an error processing your request.</p>
+          ${process.env.NODE_ENV === 'development' ? `<pre>${error.stack}</pre>` : ''}
+        </body>
+      </html>
+    `);
+    }
+});
+// Add error handler middleware
+app.use(errorHandler);
+// Add not found handler for API routes that weren't caught
+app.use(notFoundHandler);
+// Graceful shutdown function to close database connections
+function gracefulShutdown() {
+    console.log('Shutting down server...');
+    // Close database connection if it exists
+    if (db) {
+        db.disconnect()
+            .then(() => console.log('Database disconnected'))
+            .catch(err => console.error('Error disconnecting from database:', err))
+            .finally(() => process.exit(0));
+    }
+    else {
+        process.exit(0);
+    }
+}
+// Start the server
+const server = app.listen(port, () => {
+    console.log(`Server running at http://localhost:${port}`);
+    console.log(`Available API endpoints:`);
+    console.log(` - GET /api/page-data`);
+    console.log(` - POST /api/login`);
+    if (process.env.JWT_SECRET) {
+        console.log(` - GET /api/protected (requires authentication)`);
+        console.log(` - GET /api/admin (requires admin role)`);
+    }
+});
+// Handle graceful shutdown
+process.on('SIGINT', gracefulShutdown);
+process.on('SIGTERM', gracefulShutdown);

package/templates/complete-app/src/App.d.ts

@@ -0,0 +1,2 @@
+export declare function App(): JSX.Element;
+//# sourceMappingURL=App.d.ts.map

package/templates/complete-app/src/App.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["App.tsx"],"names":[],"mappings":"AAKA,wBAAgB,GAAG,gBAqDlB"}

package/templates/complete-app/src/App.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "frontend-hamroun/jsx-runtime";
+import { useState, useEffect, useMemo, useRef, createContext } from 'frontend-hamroun';
+// Create a theme context
+const ThemeContext = createContext('light');
+export function App() {
+    // Initialize with a default state that works on both server and client
+    const [count, setCount] = useState(0);
+    const [theme, setTheme] = useState('light');
+    const renderCount = useRef(0);
+    // Client-side only effect
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            renderCount.current += 1;
+            console.log('Component rendered', renderCount.current, 'times');
+        }
+        return () => console.log('Component unmounting');
+    }, [count]);
+    // Memoized value
+    const doubled = useMemo(() => count * 2, [count]);
+    return (_jsx(ThemeContext.Provider, { value: theme, children: _jsxs("div", { style: {
+                padding: '20px',
+                backgroundColor: theme === 'dark' ? '#333' : '#fff',
+                color: theme === 'dark' ? '#fff' : '#333'
+            }, children: [_jsx("h1", { children: "Server-Side Rendered App" }), _jsxs("div", { children: [_jsx("button", { onClick: () => setCount(count - 1), "data-action": "decrement", children: "-" }), _jsx("span", { style: { margin: '0 10px' }, children: count }), _jsx("button", { onClick: () => setCount(count + 1), "data-action": "increment", children: "+" })] }), _jsxs("p", { children: ["Doubled value: ", doubled] }), typeof window !== 'undefined' && (_jsxs("p", { children: ["Render count: ", renderCount.current] })), _jsxs("button", { onClick: () => setTheme(theme === 'light' ? 'dark' : 'light'), style: { marginTop: '10px' }, children: ["Toggle Theme (", theme, ")"] }), _jsx("script", { dangerouslySetInnerHTML: {
+                        __html: `window.__INITIAL_STATE__ = ${JSON.stringify({ count: 0, theme: 'light' })};`
+                    } })] }) }));
+}

package/templates/complete-app/src/client.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=client.d.ts.map

package/templates/complete-app/src/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["client.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,52 @@
+import { hydrate, jsx } from 'frontend-hamroun';
+// Dynamically import the appropriate page component
+async function hydratePage() {
+    try {
+        // Get initial state from server
+        const initialState = window.__INITIAL_STATE__ || {};
+        // Get current path
+        const path = initialState.route || window.location.pathname;
+        const normalizedPath = path === '/' ? '/index' : path;
+        // Create path to module
+        const modulePath = `.${normalizedPath.replace(/\/$/, '')}.js`;
+        try {
+            // Dynamically import the component
+            const module = await import(`./pages${normalizedPath}.js`).catch(() => import(`./pages${normalizedPath}/index.js`));
+            const PageComponent = module.default;
+            // Find the root element
+            const rootElement = document.getElementById('root');
+            if (rootElement && PageComponent) {
+                // Hydrate the application with the same params from the server
+                hydrate(jsx(PageComponent, { params: initialState.params || {} }), rootElement);
+                console.log('Hydration complete');
+            }
+            else {
+                console.error('Could not find root element or page component');
+            }
+        }
+        catch (importError) {
+            console.error('Error importing page component:', importError);
+            // Fallback to App component if available
+            try {
+                const { App } = await import('./App.js');
+                const rootElement = document.getElementById('root');
+                if (rootElement && App) {
+                    hydrate(jsx(App, {}), rootElement);
+                    console.log('Fallback hydration complete');
+                }
+            }
+            catch (fallbackError) {
+                console.error('Fallback hydration failed:', fallbackError);
+            }
+        }
+    }
+    catch (error) {
+        console.error('Hydration error:', error);
+    }
+}
+// Add global variable for JSX
+window.jsx = jsx;
+// Hydrate when DOM is ready
+document.addEventListener('DOMContentLoaded', hydratePage);
+// Handle client-side navigation (if implemented)
+window.addEventListener('popstate', hydratePage);

package/templates/complete-app/src/pages/index.d.ts

@@ -0,0 +1,2 @@
+export default function HomePage(): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/templates/complete-app/src/pages/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,QAAQ,gBA+C/B"}

package/templates/complete-app/src/pages/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "frontend-hamroun/jsx-runtime";
+import { useState, useEffect } from 'frontend-hamroun';
+// This component will be rendered on both server and client
+export default function HomePage() {
+    const [count, setCount] = useState(0);
+    const [serverTime, setServerTime] = useState('');
+    // This effect only runs on the client after hydration
+    useEffect(() => {
+        // Set server render time (only when hydrating)
+        if (!serverTime) {
+            setServerTime('Client-side hydration complete');
+        }
+        // Simple cleanup function
+        return () => {
+            console.log('Component unmounting');
+        };
+    }, []);
+    return (_jsx("div", { id: "app", children: _jsx("div", { className: "hero min-h-screen bg-base-200", children: _jsx("div", { className: "hero-content text-center", children: _jsxs("div", { className: "max-w-md", children: [_jsx("h1", { className: "text-5xl font-bold", children: "Frontend Hamroun SSR" }), _jsx("p", { className: "py-6", children: "This page was rendered on the server and hydrated on the client." }), _jsxs("div", { className: "my-4 p-4 bg-base-300 rounded-lg", children: [_jsxs("p", { children: ["Counter: ", count] }), _jsx("button", { className: "btn btn-primary mt-2", onClick: () => setCount(count + 1), children: "Increment" })] }), _jsx("div", { className: "text-sm opacity-70 mt-4", children: serverTime ? serverTime : `Server rendered at: ${new Date().toISOString()}` })] }) }) }) }));
+}

package/templates/complete-app/src/server.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=server.d.ts.map

package/templates/complete-app/src/server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["server.ts"],"names":[],"mappings":""}