frontend-hamroun 1.2.20 → 1.2.22

package/bin/cli.js

@@ -459,48 +459,29 @@ async function generateApiRoute(name, directory) {
 }
 
 // Add a server template for Express
-const SERVER_TEMPLATE = `import { Server, Database, AuthService } from 'frontend-hamroun/server';
+const SERVER_TEMPLATE = `// Import directly from frontend-hamroun
+// The server module will be dynamically loaded in Node.js environment
+import { server } from 'frontend-hamroun';
 
 async function startServer() {
   try {
+    // Dynamically import server components
+    const { Server, Database, AuthService, renderComponent } = await server.getServer();
+    
     // Create and configure the server
     const app = new Server({
       port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
       apiDir: './api',
+      pagesDir: './src/pages', // For SSR pages
       staticDir: './public',
       
       // Enable CORS
       enableCors: true,
       corsOptions: {
-        origin: process.env.CORS_ORIGIN || '*', // Set to specific domain in production
+        origin: process.env.CORS_ORIGIN || '*',
         methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
         allowedHeaders: ['Content-Type', 'Authorization']
-      },
-      
-      // Uncomment to enable database (choose one)
-      /*
-      db: {
-        // MongoDB
-        url: process.env.MONGODB_URL || 'mongodb://localhost:27017/my_app',
-        type: 'mongodb'
-        
-        // MySQL
-        // url: process.env.MYSQL_URL || 'mysql://user:password@localhost:3306/my_db',
-        // type: 'mysql'
-        
-        // PostgreSQL
-        // url: process.env.POSTGRES_URL || 'postgres://user:password@localhost:5432/my_db',
-        // type: 'postgres'
-      },
-      */
-      
-      // Uncomment to enable authentication
-      /*
-      auth: {
-        secret: process.env.JWT_SECRET || 'your-secret-key',
-        expiresIn: '7d'
       }
-      */
     });
     
     // Connect to database if configured

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend-hamroun",
-  "version": "1.2.20",
+  "version": "1.2.22",
   "description": "A lightweight full-stack JavaScript framework",
   "type": "module",
   "main": "./dist/index.js",
@@ -24,6 +24,11 @@
       "types": "./dist/server/index.d.ts",
       "import": "./dist/server/index.js",
       "default": "./dist/server/index.js"
+    },
+    "./ssr": {
+      "types": "./dist/server-renderer.d.ts",
+      "import": "./dist/server-renderer.js",
+      "default": "./dist/server-renderer.js"
     }
   },
   "bin": {

package/templates/ssr-template/client.js

@@ -0,0 +1,30 @@
+import { hydrate } from 'frontend-hamroun';
+
+// Dynamically import the page component that matches the current URL
+async function hydratePage() {
+  try {
+    // Get the current path
+    const path = window.location.pathname;
+    
+    // Import the corresponding page component
+    const pagePath = `/src/pages${path === '/' ? '/index' : path}.jsx`;
+    
+    try {
+      const { default: PageComponent } = await import(pagePath);
+      
+      // Find the root element to hydrate
+      const rootElement = document.getElementById('app');
+      if (rootElement) {
+        // Hydrate the server-rendered HTML with the client component
+        hydrate(<PageComponent />, rootElement);
+      }
+    } catch (error) {
+      console.error(`Error importing page component for path ${path}:`, error);
+    }
+  } catch (error) {
+    console.error('Error during hydration:', error);
+  }
+}
+
+// Start hydration when the DOM is ready
+document.addEventListener('DOMContentLoaded', hydratePage);

package/templates/ssr-template/package.json

@@ -1,14 +1,16 @@
 {
-  "name": "ssr-version",
+  "name": "ssr-app",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev:client": "vite",
+    "dev:server": "node --loader ts-node/esm server.ts",
+    "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
     "build:client": "vite build",
-    "build:server": "vite build --ssr",
+    "build:server": "tsc --project tsconfig.server.json",
     "build": "npm run build:client && npm run build:server",
-    "start": "node dist/server.js"
+    "start": "node dist/server/server.js"
   },
   "dependencies": {
     "express": "^4.18.2",
@@ -16,8 +18,10 @@
   },
   "devDependencies": {
     "@types/express": "^4.17.17",
-    "@types/node": "^20.5.0",
-    "typescript": "^5.0.0",
+    "@types/node": "^18.16.19",
+    "concurrently": "^8.2.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.2.2",
     "vite": "^4.4.9"
   }
 }

package/templates/ssr-template/public/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Frontend Hamroun SSR</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>
+</head>
+<body>
+  <!-- App will be rendered here by SSR -->
+  <div id="app">
+    <!-- This comment will be replaced with server-rendered HTML -->
+    <!-- If you see this text, server-side rendering failed -->
+    <div class="flex items-center justify-center min-h-screen">
+      <div class="text-center">
+        <h1 class="text-xl font-bold">Loading...</h1>
+        <p>If this message persists, make sure your server is running.</p>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

package/templates/ssr-template/server.ts

@@ -0,0 +1,46 @@
+import { Server, renderComponent } from 'frontend-hamroun/server';
+import { join } from 'path';
+import express from 'express';
+
+async function startServer() {
+  try {
+    // Create and configure the server
+    const app = new Server({
+      port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
+      pagesDir: './src/pages',
+      staticDir: './public',
+      
+      // Enable CORS for API endpoints
+      enableCors: true
+    });
+    
+    // Add server-side data endpoints (optional)
+    const expressApp = app.getExpressApp();
+    
+    // Example API endpoint that provides data to SSR pages
+    expressApp.get('/api/page-data', (req, res) => {
+      res.json({
+        title: 'Server-side Data',
+        content: 'This data was fetched from the server',
+        timestamp: new Date().toISOString()
+      });
+    });
+    
+    // Start the server
+    await app.start();
+    
+    console.log(`Server running at http://localhost:${process.env.PORT || 3000}`);
+    
+    // Handle graceful shutdown
+    process.on('SIGINT', async () => {
+      console.log('Shutting down server...');
+      await app.stop();
+      process.exit(0);
+    });
+  } catch (error) {
+    console.error('Failed to start server:', error);
+    process.exit(1);
+  }
+}
+
+startServer();

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

@@ -1,9 +1,18 @@
-import { hydrate } from 'frontend-hamroun';
-import { App } from './App';
+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', () => {
-  hydrate(
-    <App />, 
-    document.getElementById('root')!
-  );
+  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/ssr-template/src/pages/index.tsx

@@ -0,0 +1,51 @@
+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 (
+    <div id="app">
+      <div className="hero min-h-screen bg-base-200">
+        <div className="hero-content text-center">
+          <div className="max-w-md">
+            <h1 className="text-5xl font-bold">Frontend Hamroun SSR</h1>
+            <p className="py-6">
+              This page was rendered on the server and hydrated on the client.
+            </p>
+            
+            {/* Interactive counter demonstrates client-side hydration */}
+            <div className="my-4 p-4 bg-base-300 rounded-lg">
+              <p>Counter: {count}</p>
+              <button 
+                className="btn btn-primary mt-2"
+                onClick={() => setCount(count + 1)}
+              >
+                Increment
+              </button>
+            </div>
+            
+            {/* Shows server render time or hydration status */}
+            <div className="text-sm opacity-70 mt-4">
+              {serverTime ? serverTime : `Server rendered at: ${new Date().toISOString()}`}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/ssr-template/tsconfig.json

@@ -1,25 +1,23 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "moduleResolution": "bundler",
-    "jsx": "preserve",
-    "jsxFactory": "jsx",
-    "jsxFragmentFactory": "Fragment",
-    "strict": true,
-    "esModuleInterop": true,
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
     "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "types": ["node"],
-    "paths": {
-      "frontend-hamroun": ["./node_modules/frontend-hamroun"]
-    }
+    "jsx": "react",
+    "jsxFactory": "createElement",
+    "jsxFragmentFactory": "Fragment"
   },
   "include": ["src"],
-  "exclude": ["node_modules", "dist"]
+  "references": [{ "path": "./tsconfig.server.json" }]
 }

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

@@ -1,11 +1,19 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "module": "ESNext",
-    "outDir": "dist",
-    "noEmit": false,
-    "jsx": "preserve",
-    "moduleResolution": "bundler"
+    "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": ["src/server.ts"]
+  "include": ["server.ts", "src/pages/**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
 }

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

@@ -0,0 +1,44 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+export default defineConfig({
+  // Configure JSX
+  esbuild: {
+    jsxFactory: 'createElement',
+    jsxFragment: 'Fragment',
+    jsxInject: `import { createElement, Fragment } from 'frontend-hamroun'`
+  },
+
+  // Configure build
+  build: {
+    outDir: 'dist/client',
+    emptyOutDir: true,
+    minify: process.env.NODE_ENV === 'production',
+    rollupOptions: {
+      input: {
+        client: resolve(__dirname, 'src/client.tsx')
+      },
+      output: {
+        entryFileNames: 'assets/[name]-[hash].js',
+        chunkFileNames: 'assets/[name]-[hash].js',
+        assetFileNames: 'assets/[name]-[hash].[ext]'
+      }
+    }
+  },
+
+  // Optimize dependencies
+  optimizeDeps: {
+    include: ['frontend-hamroun']
+  },
+
+  // Development server
+  server: {
+    proxy: {
+      // Forward API requests to the actual Node.js server during development
+      '/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true
+      }
+    }
+  }
+});