frontend-hamroun 1.2.26 → 1.2.28

package/templates/fullstack-app/src/pages/index.tsx

@@ -1,63 +1,33 @@
-import { jsx, useState, useEffect } from 'frontend-hamroun';
+import { jsx } from 'frontend-hamroun';
+import Layout from '../components/Layout';
+import UserList from '../components/UserList';
+import { UserApi } from '../data/api';
 
-export default function HomePage() {
-  const [apiData, setApiData] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
+const HomePage = ({ initialState }) => (
+  <Layout title="Home">
+    <div className="max-w-4xl mx-auto py-8">
+      <h1 className="text-3xl font-bold text-blue-600 mb-6">Welcome to your Frontend Hamroun application!</h1>
+      
+      <div className="bg-white shadow-lg rounded-lg p-6 mb-8">
+        <h2 className="text-xl font-semibold text-gray-800 mb-4">User List</h2>
+        <UserList users={initialState.data?.users || []} />
+      </div>
+      
+      <div className="bg-gray-50 rounded-lg p-6 border border-gray-200">
+        <h3 className="text-lg font-medium text-gray-700 mb-3">Application State</h3>
+        <pre className="overflow-auto p-4 bg-gray-100 rounded-md text-sm text-gray-800">
+          {JSON.stringify(initialState, null, 2)}
+        </pre>
+      </div>
+    </div>
+  </Layout>
+);
 
-  useEffect(() => {
-    async function fetchData() {
-      try {
-        const response = await fetch('/api/hello');
-        const data = await response.json();
-        setApiData(data);
-        setLoading(false);
-      } catch (err) {
-        setError(err.message);
-        setLoading(false);
-      }
-    }
-    
-    fetchData();
-  }, []);
+// Static method to fetch initial data for this page
+HomePage.getInitialData = async () => {
+  return {
+    users: await UserApi.getAll()
+  };
+};
 
-  return jsx('div', { className: "container mx-auto p-4" }, [
-    jsx('h1', { className: "text-3xl font-bold mb-4" }, "Frontend Hamroun Full Stack"),
-    
-    jsx('div', { className: "mb-6" }, [
-      jsx('h2', { className: "text-xl font-semibold mb-2" }, "API Response:"),
-      loading 
-        ? jsx('p', {}, "Loading...")
-        : error 
-          ? jsx('p', { className: "text-red-500" }, `Error: ${error}`)
-          : jsx('pre', { className: "bg-gray-100 p-4 rounded" }, 
-              JSON.stringify(apiData, null, 2)
-            )
-    ]),
-    
-    jsx('div', { className: "mb-6" }, [
-      jsx('h2', { className: "text-xl font-semibold mb-2" }, "Features:"),
-      jsx('ul', { className: "list-disc pl-6" }, [
-        jsx('li', {}, "Server-side rendering"),
-        jsx('li', {}, "API routes with Express"),
-        jsx('li', {}, "Database integration"),
-        jsx('li', {}, "Authentication and authorization"),
-        jsx('li', {}, "File-based routing")
-      ])
-    ]),
-    
-    jsx('div', {}, [
-      jsx('h2', { className: "text-xl font-semibold mb-2" }, "Get Started:"),
-      jsx('p', {}, [
-        "Edit ",
-        jsx('code', { className: "bg-gray-100 px-2 py-1 rounded" }, "src/pages/index.tsx"),
-        " to customize this page"
-      ]),
-      jsx('p', {}, [
-        "API routes are in the ",
-        jsx('code', { className: "bg-gray-100 px-2 py-1 rounded" }, "api"),
-        " directory"
-      ])
-    ])
-  ]);
-}
+export default HomePage;

package/templates/fullstack-app/src/pages/users.tsx

@@ -0,0 +1,60 @@
+import { jsx } from 'frontend-hamroun';
+import Layout from '../components/Layout';
+import { UserApi } from '../data/api';
+
+const UsersPage = ({ initialState }) => {
+  const users = initialState.data?.users || [];
+
+  return (
+    <Layout title="User Management">
+      <div className="max-w-4xl mx-auto">
+        <div className="bg-blue-50 p-6 rounded-lg mb-8 border border-blue-100">
+          <h2 className="text-xl font-semibold text-blue-800 mb-2">Data Fetching Demo</h2>
+          <p className="text-blue-700">This page demonstrates dynamic data fetching with the Users API.</p>
+        </div>
+        
+        <div className="bg-white shadow-md rounded-lg overflow-hidden">
+          <div className="px-6 py-4 border-b border-gray-200">
+            <h2 className="text-xl font-semibold text-gray-800">User List</h2>
+          </div>
+          
+          {users.length === 0 ? (
+            <div className="p-6 text-center text-gray-500">
+              <p>No users found.</p>
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead>
+                  <tr className="bg-gray-50">
+                    <th className="text-left py-3 px-6 font-medium text-gray-600 text-sm uppercase tracking-wider border-b">ID</th>
+                    <th className="text-left py-3 px-6 font-medium text-gray-600 text-sm uppercase tracking-wider border-b">Name</th>
+                    <th className="text-left py-3 px-6 font-medium text-gray-600 text-sm uppercase tracking-wider border-b">Email</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200">
+                  {users.map(user => (
+                    <tr key={user.id} className="hover:bg-gray-50">
+                      <td className="py-4 px-6 text-sm text-gray-900">{user.id}</td>
+                      <td className="py-4 px-6 text-sm font-medium text-gray-900">{user.name}</td>
+                      <td className="py-4 px-6 text-sm text-gray-500">{user.email}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+// Static method to fetch initial data for this page
+UsersPage.getInitialData = async () => {
+  return {
+    users: await UserApi.getAll()
+  };
+};
+
+export default UsersPage;

package/templates/fullstack-app/src/router.ts

@@ -0,0 +1,255 @@
+import { jsx } from 'frontend-hamroun';
+// Use dynamic import to ensure it's available
+// import UsersPage from './pages/users'; 
+
+// Type definitions for page components
+export interface PageProps {
+  initialState: any;
+}
+
+export interface PageComponent {
+  (props: PageProps): any;
+  getInitialData?: (path: string) => Promise<any>;
+}
+
+// Define router interface for type safety
+interface RouteParams {
+  [key: string]: string;
+}
+
+// Define router class for handling routes
+export class Router {
+  private routes: Record<string, PageComponent> = {};
+  private notFoundComponent: PageComponent | null = null;
+  
+  // Register a component for a specific route
+  register(path: string, component: PageComponent): Router {
+    const normalizedPath = path === '/' ? 'index' : path.replace(/^\//, '');
+    this.routes[normalizedPath] = component;
+    console.log(`[Router] Registered component for path: ${normalizedPath}`);
+    return this;
+  }
+  
+  // Set the not found component
+  setNotFound(component: PageComponent): Router {
+    this.notFoundComponent = component;
+    return this;
+  }
+  
+  // Get the not found component
+  getNotFound(): PageComponent | null {
+    return this.notFoundComponent;
+  }
+  
+  // Get all registered routes
+  getAllRoutes(): Record<string, PageComponent> {
+    return this.routes;
+  }
+  
+  // Find component for a given path
+  async resolve(path: string): Promise<PageComponent | null> {
+    const normalizedPath = path === '/' ? 'index' : path.replace(/^\//, '');
+    
+    console.log(`[Router] Resolving component for path: ${normalizedPath}`);
+    
+    // Check for exact match first
+    if (this.routes[normalizedPath]) {
+      return this.routes[normalizedPath];
+    }
+    
+    // Check for nested routes (e.g., "users/123" should match a "users/[id]" route)
+    const pathSegments = normalizedPath.split('/');
+    const registeredRoutes = Object.keys(this.routes);
+    
+    // Try to find dynamic route matches
+    for (const route of registeredRoutes) {
+      const routeSegments = route.split('/');
+      
+      // Skip routes with different segment count
+      if (routeSegments.length !== pathSegments.length) continue;
+      
+      let isMatch = true;
+      const params: RouteParams = {};
+      
+      // Compare each segment
+      for (let i = 0; i < routeSegments.length; i++) {
+        const routeSegment = routeSegments[i];
+        const pathSegment = pathSegments[i];
+        
+        // Handle dynamic segments (e.g., [id])
+        if (routeSegment.startsWith('[') && routeSegment.endsWith(']')) {
+          const paramName = routeSegment.slice(1, -1);
+          params[paramName] = pathSegment;
+        }
+        // Regular segment, must match exactly
+        else if (routeSegment !== pathSegment) {
+          isMatch = false;
+          break;
+        }
+      }
+      
+      if (isMatch) {
+        console.log(`[Router] Found dynamic route match: ${route}`);
+        // Return the component with params
+        return this.routes[route];
+      }
+    }
+    
+    // If no match found yet, try to dynamically import the component
+    try {
+      let component = null;
+      let resolvedPath = normalizedPath;
+      
+      // Next.js-style dynamic route resolution
+      try {
+        // First, try direct file match (e.g., ./pages/users.tsx)
+        // Focus on .tsx since that's what this project uses
+        try {
+          console.log(`[Router] Trying direct import: ./pages/${resolvedPath}.tsx`);
+          const directModule = await import(/* @vite-ignore */ `./pages/${resolvedPath}.tsx`)
+            .catch(() => null);
+            
+          if (directModule) {
+            component = directModule.default || directModule;
+          }
+        } catch (e) {
+          console.warn(`[Router] Error importing ./pages/${resolvedPath}.tsx:`, e);
+        }
+        
+        // Next, try index file in directory (e.g., ./pages/about/index.tsx)
+        if (!component && !resolvedPath.endsWith('index')) {
+          try {
+            console.log(`[Router] Trying index file: ./pages/${resolvedPath}/index.tsx`);
+            const indexModule = await import(/* @vite-ignore */ `./pages/${resolvedPath}/index.tsx`)
+              .catch(() => null);
+              
+            if (indexModule) {
+              component = indexModule.default || indexModule;
+            }
+          } catch (e) {
+            console.warn(`[Router] Error importing ./pages/${resolvedPath}/index.tsx:`, e);
+          }
+        }
+      } catch (routeError) {
+        console.warn(`[Router] Error resolving Next.js style route:`, routeError);
+      }
+      
+      // Register and return component if found
+      if (component) {
+        this.routes[normalizedPath] = component;
+        return component;
+      }
+    } catch (error) {
+      console.warn(`[Router] Error importing component for ${normalizedPath}:`, error);
+    }
+    
+    // If we reach here, no component was found
+    console.warn(`[Router] No component found for path: ${normalizedPath}`);
+    return this.notFoundComponent;
+  }
+
+  // Auto-discover components in the pages directory
+  async discoverRoutes(): Promise<Record<string, PageComponent>> {
+    console.log('[Router] Auto-discovering routes from pages directory...');
+    
+    try {
+      // Use a more conventional approach instead of relying on import.meta.glob
+      await this.tryLoadCoreRoutes();
+      
+      console.log('[Router] Route discovery complete. Available routes:', Object.keys(this.routes));
+      return this.routes;
+    } catch (error) {
+      console.error('[Router] Error discovering routes:', error);
+      await this.tryLoadCoreRoutes();
+      return this.routes;
+    }
+  }
+  
+  // Fallback method to load core routes
+  async tryLoadCoreRoutes(): Promise<void> {
+    // First try the auto-discovery approach with dynamic imports
+    const pageModules = [
+      { path: './pages/index', route: 'index' },
+      { path: './pages/about/index', route: 'about' },
+      { path: './pages/users', route: 'users' }
+    ];
+    
+    // Try importing each module dynamically - focus on .tsx files
+    for (const { path, route } of pageModules) {
+      if (!this.routes[route]) {
+        try {
+          console.log(`[Router] Attempting to load route: ${route}`);
+          
+          // Only try .tsx imports since that's what the project uses
+          const module = await import(/* @vite-ignore */ `${path}.tsx`)
+            .catch(() => null);
+          
+          if (module && module.default) {
+            this.routes[route] = module.default;
+            console.log(`[Router] Registered route: ${route}`);
+          }
+        } catch (error) {
+          console.warn(`[Router] Could not load route: ${route}`, error);
+        }
+      }
+    }
+  }
+}
+
+// Create and export a router instance
+export const router = new Router();
+
+// NotFound component as fallback (using jsx function instead of JSX syntax)
+export const NotFound: PageComponent = ({ initialState }) => {
+  return jsx('div', { className: 'container mx-auto px-4 py-12 max-w-4xl' }, [
+    jsx('div', { className: 'bg-white shadow-lg rounded-lg overflow-hidden p-8' }, [
+      jsx('h1', { className: 'text-3xl font-bold text-gray-800 mb-4' }, ['Page Not Found']),
+      jsx('p', { className: 'text-gray-600 mb-6' }, [`No component found for path: ${initialState?.route || 'unknown'}`]),
+      jsx('a', { href: '/', className: 'text-blue-600 hover:text-blue-800 hover:underline transition-colors' }, ['Go to Home']),
+      jsx('div', { className: 'mt-8 p-6 bg-gray-50 rounded-lg border border-gray-200' }, [
+        jsx('h3', { className: 'text-lg font-medium text-gray-700 mb-3' }, ['Available Routes']),
+        jsx('ul', { className: 'space-y-2' }, [
+          jsx('li', {}, [jsx('a', { href: '/', className: 'text-blue-600 hover:text-blue-800 hover:underline' }, ['Home'])]),
+          jsx('li', {}, [jsx('a', { href: '/about', className: 'text-blue-600 hover:text-blue-800 hover:underline' }, ['About'])]),
+          jsx('li', {}, [jsx('a', { href: '/users', className: 'text-blue-600 hover:text-blue-800 hover:underline' }, ['Users'])])
+        ])
+      ])
+    ])
+  ]);
+};
+
+// Set NotFound as the default fallback
+router.setNotFound(NotFound);
+
+// Improved router initialization with auto-discovery
+export async function initializeRouter(): Promise<Router> {
+  try {
+    console.log('[Router] Initializing router with auto-discovery...');
+    
+    // Auto-discover routes
+    await router.discoverRoutes();
+    
+    // Register fallback pages for key routes if they weren't discovered
+    const routes = router.getAllRoutes();
+    
+    if (!routes['index']) {
+      router.register('index', ({ initialState }: PageProps) => jsx('div', {}, [
+        jsx('h1', {}, ['Welcome']),
+        jsx('p', {}, ['This is the home page.'])
+      ]));
+    }
+    
+    if (!routes['about']) {
+      router.register('about', ({ initialState }: PageProps) => jsx('div', {}, [
+        jsx('h1', {}, ['About']),
+        jsx('p', {}, ['This is the about page.'])
+      ]));
+    }
+    
+    console.log('[Router] Router initialized with routes:', Object.keys(router.getAllRoutes()));
+    return router;
+  } catch (error) {
+    console.error('[Router] Error initializing router:', error);
+    return router;
+  }
+}

package/templates/fullstack-app/src/styles.css

@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Your custom styles can go here */

package/templates/fullstack-app/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

package/templates/fullstack-app/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "outDir": "dist",
+    "strict": true,
+    "lib": ["ES2020"],
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/fullstack-app/vite.config.js

@@ -6,35 +6,82 @@ export default defineConfig({
   server: {
     port: 5173,
     proxy: {
-      '/api': 'http://localhost:3000'
+      '/api': 'http://localhost:3000',
+      '/socket.io': {
+        target: 'http://localhost:3000',
+        ws: true
+      }
     }
   },
   
-  // Using jsx transform with a different configuration
+  // Using jsx transform with frontend-hamroun's jsx function
   esbuild: {
     jsxFactory: 'jsx',
-    jsxFragment: 'Fragment' 
+    jsxFragment: 'Fragment',
+    jsxInject: `import { jsx, Fragment } from 'frontend-hamroun'` 
   },
   
   // Build configuration
   build: {
     outDir: 'dist',
+    assetsDir: 'assets',
+    // Generate SPA-friendly build that works with client-side routing
     rollupOptions: {
       input: {
         main: resolve(__dirname, 'index.html')
+      },
+      output: {
+        manualChunks: {
+          vendor: ['frontend-hamroun']
+        }
       }
+    },
+    // Make sure CSS is properly processed
+    cssCodeSplit: true
+  },
+  
+  // CSS preprocessing
+  css: {
+    postcss: './postcss.config.js',
+    // Include module CSS as well as global CSS
+    modules: {
+      scopeBehaviour: 'local',
+      localsConvention: 'camelCaseOnly',
     }
   },
   
   // Resolve aliases
   resolve: {
     alias: {
-      '@': resolve(__dirname, 'src')
-    }
+      '@': resolve(__dirname, 'src'),
+      '@components': resolve(__dirname, 'src/components'),
+      '@pages': resolve(__dirname, 'src/pages'),
+      '@utils': resolve(__dirname, 'src/utils')
+    },
+    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
   },
   
   // Optimize dependencies
   optimizeDeps: {
     include: ['frontend-hamroun']
-  }
+  },
+  
+  // This is a critical plugin for SPA routing - much simpler than before
+  plugins: [{
+    name: 'spa-fallback',
+    configureServer(server) {
+      return () => {
+        server.middlewares.use((req, res, next) => {
+          if (req.url.includes('.') || req.url.startsWith('/api/') || req.url.startsWith('/socket.io/')) {
+            next();
+            return;
+          }
+          
+          console.log(`[SPA] Handling route: ${req.url}`);
+          req.url = '/'; // Rewrite all routes to root
+          next();
+        });
+      };
+    }
+  }]
 });

package/templates/ssr-template/readme.md

@@ -26,6 +26,14 @@ This template demonstrates:
 - Data fetching during server rendering
 - AI-powered meta tag generation
 
+### Automatic File-Based Routing
+- Pages are automatically rendered based on their file path in the `pages` directory
+- For example:
+  - `/pages/index.js` → `/` route
+  - `/pages/about.js` → `/about` route
+  - `/pages/blog/index.js` → `/blog` route
+  - `/pages/users/[id].js` → `/users/:id` dynamic route
+
 ### API Integration
 - RESTful API endpoints
 - Dynamic API routing
@@ -133,6 +141,48 @@ app.use('/api', rateLimit({ windowMs: 15 * 60 * 1000, max: 100 }));
 app.use(errorHandler);
 ```
 
+## File-Based Routing Examples
+
+### Static Routes
+Create files in the `pages` directory:
+
+```jsx
+// pages/index.js - Maps to "/"
+export default function HomePage() {
+  return <h1>Home Page</h1>;
+}
+
+// pages/about.js - Maps to "/about"
+export default function AboutPage() {
+  return <h1>About Us</h1>;
+}
+
+// pages/contact/index.js - Maps to "/contact"
+export default function ContactPage() {
+  return <h1>Contact Us</h1>;
+}
+```
+
+### Dynamic Routes
+Use brackets in filenames to define dynamic parameters:
+
+```jsx
+// pages/users/[id].js - Maps to "/users/:id"
+export default function UserPage({ params }) {
+  return <h1>User Profile: {params.id}</h1>;
+}
+
+// pages/blog/[category]/[slug].js - Maps to "/blog/:category/:slug"
+export default function BlogPost({ params }) {
+  return (
+    <div>
+      <h1>Blog Post: {params.slug}</h1>
+      <p>Category: {params.category}</p>
+    </div>
+  );
+}
+```
+
 ## Next Steps
 
 Explore the full API documentation for more advanced features and customization options.

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

@@ -1,29 +1,61 @@
-import { hydrate } from 'frontend-hamroun';
+import { hydrate, jsx } from 'frontend-hamroun';
 
 // Dynamically import the appropriate page component
 async function hydratePage() {
   try {
-    // Get current path
-    const path = window.location.pathname === '/' ? '/index' : window.location.pathname;
+    // Get initial state from server
+    const initialState = window.__INITIAL_STATE__ || {};
     
-    // Dynamically import the component
-    const module = await import(`./pages${path}.js`);
-    const PageComponent = module.default;
+    // Get current path
+    const path = initialState.route || window.location.pathname;
+    const normalizedPath = path === '/' ? '/index' : path;
     
-    // Find the root element
-    const rootElement = document.getElementById('app');
+    // Create path to module
+    const modulePath = `.${normalizedPath.replace(/\/$/, '')}.js`;
     
-    if (rootElement && PageComponent) {
-      // Hydrate the application
-      hydrate(PageComponent(), rootElement);
-      console.log('Hydration complete');
-    } else {
-      console.error('Could not find root element or page component');
+    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);