frontend-hamroun 1.2.80 → 1.2.83

package/templates/complete-app/public/styles.css

@@ -0,0 +1,76 @@
+/* Color scheme */
+:root {
+  --primary-color: #0066cc;
+  --primary-hover: #004c99;
+  --secondary-color: #6c757d;
+  --light-bg: #f8f9fa;
+  --light-border: #dee2e6;
+  --dark-text: #212529;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  background-color: var(--light-bg);
+  color: var(--dark-text);
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  max-width: 1140px;
+  margin: 0 auto;
+  padding: 2rem 1rem;
+}
+
+.logo {
+  font-size: 2rem;
+  font-weight: bold;
+  color: var(--primary-color);
+  margin-bottom: 1.5rem;
+}
+
+h1, h2, h3 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ul {
+  padding-left: 1.5rem;
+}
+
+li {
+  margin-bottom: 0.5rem;
+}
+
+.button, button {
+  display: inline-block;
+  font-weight: 400;
+  color: #fff;
+  text-align: center;
+  vertical-align: middle;
+  background-color: var(--primary-color);
+  border: 1px solid var(--primary-color);
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  text-decoration: none;
+  transition: background-color 0.15s ease-in-out;
+}
+
+.button:hover, button:hover {
+  background-color: var(--primary-hover);
+  border-color: var(--primary-hover);
+  text-decoration: none;
+}
+
+.footer {
+  padding: 1.5rem 0;
+  margin-top: 3rem;
+  background-color: #f1f1f1;
+  color: var(--secondary-color);
+  text-align: center;
+  font-size: 0.875rem;
+}

package/templates/complete-app/server.js

@@ -0,0 +1,226 @@
+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(`
+        <!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>
+          </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'}`);
+});

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

@@ -0,0 +1,59 @@
+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' | 'dark'>('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 (
+    <ThemeContext.Provider value={theme}>
+      <div style={{ 
+        padding: '20px', 
+        backgroundColor: theme === 'dark' ? '#333' : '#fff',
+        color: theme === 'dark' ? '#fff' : '#333'
+      }}>
+        <h1>Server-Side Rendered App</h1>
+        <div>
+          <button 
+            onClick={() => setCount(count - 1)}
+            data-action="decrement"
+          >-</button>
+          <span style={{ margin: '0 10px' }}>{count}</span>
+          <button 
+            onClick={() => setCount(count + 1)}
+            data-action="increment"
+          >+</button>
+        </div>
+        <p>Doubled value: {doubled}</p>
+        {typeof window !== 'undefined' && (
+          <p>Render count: {renderCount.current}</p>
+        )}
+        <button 
+          onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+          style={{ marginTop: '10px' }}
+        >
+          Toggle Theme ({theme})
+        </button>
+        <script dangerouslySetInnerHTML={{
+          __html: `window.__INITIAL_STATE__ = ${JSON.stringify({ count: 0, theme: 'light' })};`
+        }} />
+      </div>
+    </ThemeContext.Provider>
+  );
+}

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

@@ -0,0 +1,18 @@
+import { hydrate, createElement } from 'frontend-hamroun';
+
+// 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"');
+  }
+});

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

@@ -0,0 +1,218 @@
+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
+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>
+    `);
+  }
+});
+
+app.listen(port, () => {
+  console.log(`Server running at http://localhost:${port}`);
+});

package/templates/complete-app/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxFactory": "createElement",
+    "jsxFragmentFactory": "Fragment"
+  },
+  "include": ["src"]
+}

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

@@ -0,0 +1,19 @@
+{
+  "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"
+  },
+  "include": ["server.ts", "src/pages/**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/{ssr-template → complete-app}/vite.config.js

@@ -17,11 +17,22 @@ export default defineConfig({
       input: {
         client: resolve(__dirname, 'src/client.ts')
       },
-      output: {
-        entryFileNames: 'assets/[name].js',
-        chunkFileNames: 'assets/[name]-[hash].js',
-        assetFileNames: 'assets/[name]-[hash].[ext]'
-      }
+      output: [
+        {
+          // ESM output
+          entryFileNames: 'assets/[name].mjs',
+          chunkFileNames: 'assets/[name]-[hash].mjs',
+          assetFileNames: 'assets/[name]-[hash].[ext]',
+          format: 'es',
+        },
+        {
+          // CommonJS output
+          entryFileNames: 'assets/[name].js',
+          chunkFileNames: 'assets/[name]-[hash].js',
+          assetFileNames: 'assets/[name]-[hash].[ext]',
+          format: 'cjs',
+        }
+      ]
     }
   },
 

package/templates/complete-app/vite.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      'frontend-hamroun': path.resolve(__dirname, 'node_modules/frontend-hamroun')
+    }
+  },
+  build: {
+    outDir: 'dist',
+    ssr: 'src/server.ts',
+    rollupOptions: {
+      input: {
+        client: './src/client.tsx',
+        server: './src/server.ts'
+      },
+      output: {
+        entryFileNames: '[name].js',
+        chunkFileNames: 'assets/[name]-[hash].js',
+        assetFileNames: 'assets/[name]-[hash].[ext]'
+      }
+    }
+  },
+  esbuild: {
+    jsxFactory: '_jsx',
+    jsxFragment: '_Fragment',
+    jsxInject: `import { jsx as _jsx, Fragment as _Fragment } from 'frontend-hamroun'`
+  }
+});