frontend-hamroun 1.2.27 → 1.2.29

package/templates/fullstack-app/src/README.md

@@ -0,0 +1,55 @@
+# Frontend Hamroun Fullstack Template
+
+This template uses a file-system based routing system similar to Next.js. Here's how to use it:
+
+## Creating New Pages
+
+1. Add new pages in the `src/pages` directory
+2. File names become routes automatically:
+   - `src/pages/index.tsx` → `/`
+   - `src/pages/about.tsx` → `/about`
+   - `src/pages/users/[id].tsx` → `/users/:id`
+
+## Page Structure
+
+Each page should follow this structure:
+
+```tsx
+import { jsx } from 'frontend-hamroun';
+import Layout from '../components/Layout';
+
+const YourPage = ({ initialState }) => (
+  <Layout title="Your Page Title">
+    {/* Your content here */}
+  </Layout>
+);
+
+// Optional: Add data fetching
+YourPage.getInitialData = async (path) => {
+  // Fetch any data your page needs
+  return {
+    yourData: await fetchSomething()
+  };
+};
+
+export default YourPage;
+```
+
+## Data Fetching
+
+Use the API utilities in `src/data/api.ts` to fetch data in a consistent way:
+
+```tsx
+import { UserApi } from '../data/api';
+
+// In your getInitialData method:
+const users = await UserApi.getAll();
+```
+
+## Components
+
+Store reusable components in the `src/components` directory and import them in your pages.
+
+## Navigation
+
+Client-side navigation is handled automatically. Just use regular `<a href="...">` links.

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

@@ -1,20 +1,87 @@
-import { hydrate, createElement } from 'frontend-hamroun';
+import { hydrate, createElement, jsx } from 'frontend-hamroun';
 
-// Simple component for testing
-function App() {
-  return createElement('div', null, [
-    createElement('h1', null, 'Hello from Frontend Hamroun'),
-    createElement('p', null, 'This is a fullstack app with SSR')
-  ]);
+// Add global jsx for compatibility
+window.jsx = jsx;
+window.createElement = createElement;
+
+// Get the initial state from the server (if available)
+const initialState = window.__INITIAL_STATE__ || {
+  route: window.location.pathname
+};
+
+// Dynamically import the right page component based on the route
+async function loadAndHydrateComponent() {
+  try {
+    const path = initialState.route || '/';
+    const normalizedPath = path === '/' ? '/index' : path;
+    
+    console.log(`Loading component for path: ${normalizedPath}`);
+    
+    // Try to import the page component
+    const module = await import(`./pages${normalizedPath}.js`).catch(() => 
+      import(`./pages${normalizedPath}/index.js`)).catch(() => {
+        console.warn(`No component found for ${normalizedPath}, falling back to index`);
+        return import('./pages/index.js');
+      });
+    
+    const PageComponent = module.default;
+    
+    if (!PageComponent) {
+      throw new Error(`No default export found in module for ${normalizedPath}`);
+    }
+    
+    // Find the root element - try both 'root' and 'app' IDs
+    const rootElement = document.getElementById('root') || document.getElementById('app');
+    
+    if (!rootElement) {
+      throw new Error('Could not find root element with id "root" or "app"');
+    }
+    
+    // Hydrate the application
+    hydrate(jsx(PageComponent, { initialState }), rootElement);
+    console.log('Hydration complete');
+    
+    // Add navigation event listeners if using client-side routing
+    document.addEventListener('click', handleLinkClicks);
+    window.addEventListener('popstate', handleRouteChange);
+    
+    return true;
+  } catch (error) {
+    console.error('Error during hydration:', error);
+    return false;
+  }
 }
 
-// Wait for DOM to be ready
-document.addEventListener('DOMContentLoaded', () => {
-  const root = document.getElementById('root');
-  
-  // Hydrate the application
-  if (root) {
-    hydrate(createElement(App), root);
-    console.log('App hydrated successfully');
+// Handle client-side navigation for links
+function handleLinkClicks(event) {
+  // Only handle links within our app
+  if (event.target.tagName === 'A' && 
+      event.target.origin === window.location.origin && 
+      !event.target.hasAttribute('external')) {
+    
+    event.preventDefault();
+    const href = event.target.getAttribute('href');
+    
+    // Update history and load the new component
+    window.history.pushState({}, '', href);
+    handleRouteChange();
   }
-});
+}
+
+// Handle route changes (back/forward navigation or pushState)
+function handleRouteChange() {
+  // Update the initialState with the new route
+  initialState.route = window.location.pathname;
+  
+  // Load and hydrate the new component
+  loadAndHydrateComponent().catch(err => {
+    console.error('Failed to load component after route change:', err);
+  });
+}
+
+// Wait for DOM to be ready before hydrating
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', loadAndHydrateComponent);
+} else {
+  loadAndHydrateComponent();
+}

package/templates/fullstack-app/src/components/Layout.tsx

@@ -0,0 +1,45 @@
+import { jsx } from 'frontend-hamroun';
+import AppConfig from '../config';
+
+export interface LayoutProps {
+  children: any;
+  title?: string;
+  showNavigation?: boolean;
+}
+
+export default function Layout({ children, title = AppConfig.title, showNavigation = true }: LayoutProps) {
+  const { navigation } = AppConfig;
+  
+  return (
+    <div className="container mx-auto px-4 py-8 max-w-5xl">
+      <header className="mb-8">
+        <h1 className="text-4xl font-bold text-gray-800 mb-4">{title}</h1>
+        
+        {showNavigation && (
+          <nav className="mb-6">
+            <ul className="flex space-x-6">
+              {navigation.map(item => (
+                <li key={item.path}>
+                  <a 
+                    href={item.path} 
+                    className="text-blue-600 hover:text-blue-800 hover:underline transition-colors font-medium"
+                  >
+                    {item.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        )}
+      </header>
+      
+      <main className="min-h-[50vh]">
+        {children}
+      </main>
+      
+      <footer className="mt-12 pt-6 border-t border-gray-200 text-gray-600 text-sm">
+        <p>{AppConfig.title} &copy; {new Date().getFullYear()}</p>
+      </footer>
+    </div>
+  );
+}

package/templates/fullstack-app/src/components/UserList.tsx

@@ -0,0 +1,27 @@
+import { jsx } from 'frontend-hamroun';
+
+const UserList = ({ users }) => {
+  if (!users || users.length === 0) {
+    return (
+      <div className="p-4 bg-gray-50 rounded-lg border border-gray-200 my-4">
+        <p className="text-gray-500 italic">No users found or still loading...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-lg overflow-hidden my-4">
+      <h3 className="text-lg font-medium mb-3">Users ({users.length})</h3>
+      <ul className="divide-y divide-gray-200 border border-gray-200 rounded-lg overflow-hidden">
+        {users.map(user => (
+          <li key={user.id} className="flex justify-between items-center p-4 hover:bg-gray-50">
+            <span className="font-medium text-gray-800">{user.name}</span>
+            <span className="text-gray-500 text-sm">{user.email}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default UserList;

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

@@ -0,0 +1,42 @@
+// Application configuration
+// Modify this file to customize your application without changing core files
+
+export const AppConfig = {
+  // App information
+  title: 'Frontend Hamroun App',
+  description: 'A full-stack application built with Frontend Hamroun',
+  
+  // Navigation
+  navigation: [
+    { path: '/', label: 'Home' },
+    { path: '/about', label: 'About' },
+    { path: '/users', label: 'Users' }
+  ],
+  
+  // API endpoints
+  api: {
+    baseUrl: '/api',
+    endpoints: {
+      users: '/users',
+      posts: '/posts'
+    }
+  },
+  
+  // Default meta tags
+  meta: {
+    viewport: 'width=device-width, initial-scale=1.0',
+    charset: 'UTF-8',
+    author: 'Your Name',
+    keywords: 'frontend-hamroun, fullstack, template'
+  },
+  
+  // Style customization
+  theme: {
+    primaryColor: '#0066cc',
+    backgroundColor: '#ffffff',
+    textColor: '#333333',
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif'
+  }
+};
+
+export default AppConfig;

package/templates/fullstack-app/src/data/api.ts

@@ -0,0 +1,71 @@
+// General API utility for data fetching
+
+/**
+ * Fetch data from an API endpoint
+ * @param endpoint The API endpoint to fetch from (without /api prefix)
+ * @param options Additional fetch options
+ * @returns The parsed JSON response or null if there was an error
+ */
+export async function fetchApi(endpoint: string, options = {}) {
+  const url = endpoint.startsWith('/') ? `/api${endpoint}` : `/api/${endpoint}`;
+  
+  try {
+    console.log(`[API] Fetching data from: ${url}`);
+    const response = await fetch(url, {
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+      },
+      ...options
+    });
+    
+    if (!response.ok) {
+      throw new Error(`API request failed: ${response.status} ${response.statusText}`);
+    }
+    
+    const data = await response.json();
+    console.log(`[API] Successfully fetched data from: ${url}`);
+    return data;
+  } catch (error) {
+    console.error(`[API] Error fetching from ${url}:`, error);
+    return null;
+  }
+}
+
+/**
+ * User-related API calls
+ */
+export const UserApi = {
+  getAll: () => fetchApi('/users'),
+  getById: (id: number | string) => fetchApi(`/users/${id}`),
+  create: (data: any) => fetchApi('/users', {
+    method: 'POST',
+    body: JSON.stringify(data)
+  }),
+  update: (id: number | string, data: any) => fetchApi(`/users/${id}`, {
+    method: 'PUT',
+    body: JSON.stringify(data)
+  }),
+  delete: (id: number | string) => fetchApi(`/users/${id}`, {
+    method: 'DELETE'
+  })
+};
+
+/**
+ * Post-related API calls
+ */
+export const PostApi = {
+  getAll: () => fetchApi('/posts'),
+  getById: (id: number | string) => fetchApi(`/posts/${id}`),
+  create: (data: any) => fetchApi('/posts', {
+    method: 'POST',
+    body: JSON.stringify(data)
+  }),
+  update: (id: number | string, data: any) => fetchApi(`/posts/${id}`, {
+    method: 'PUT',
+    body: JSON.stringify(data)
+  }),
+  delete: (id: number | string) => fetchApi(`/posts/${id}`, {
+    method: 'DELETE'
+  })
+};

package/templates/fullstack-app/src/main.tsx

@@ -1,9 +1,221 @@
-import { jsx, render } from 'frontend-hamroun';
-import HomePage from './pages/index.tsx';
+import { render, hydrate, jsx } from 'frontend-hamroun';
+import { router } from './router';
+// Import Tailwind CSS
+import './styles.css';
 
-// Add global jsx for Vite to use
-window.jsx = jsx;
+// Import pages directly to ensure they're available
+import HomePage from './pages/index';
+import AboutPage from './pages/about';
+import UsersPage from './pages/users';
 
-// Fix: Pass the component properly to render
-// Don't call HomePage() directly - pass it as a component
-render(jsx(HomePage, {}, null), document.getElementById('root'));
+// Create a mutable variable for hydration state
+let isHydrating = document.getElementById('root')?.innerHTML.trim() !== '';
+
+console.log('[Client] Running client-side code. Hydration state:', isHydrating);
+
+// Get initial state from server
+const initialState = window.__INITIAL_STATE__ || { 
+  route: window.location.pathname,
+  timestamp: new Date().toISOString(),
+  serverRendered: false,
+  data: {
+    users: null,
+    posts: null
+  }
+};
+
+console.log('[Client] Initial state:', initialState);
+
+// Function to fetch data from API
+async function fetchData(path) {
+  try {
+    console.log(`[Client] Fetching data from API: ${path}`);
+    const response = await fetch(`/api${path}`);
+    if (!response.ok) {
+      throw new Error(`API request failed: ${response.status}`);
+    }
+    const data = await response.json();
+    console.log(`[Client] Received data:`, data);
+    return data;
+  } catch (error) {
+    console.error(`[Client] Error fetching data from ${path}:`, error);
+    return null;
+  }
+}
+
+// Initialize known routes
+function initializeRouter() {
+  console.log('[Client] Initializing router with known pages');
+  router.register('index', HomePage);
+  router.register('about', AboutPage);
+  router.register('users', UsersPage);
+}
+
+// Call initialization before rendering
+initializeRouter();
+
+// Function to determine which page to render based on the route
+async function renderApp() {
+  try {
+    // Get current path
+    const currentPath = window.location.pathname;
+    
+    console.log(`[Client] Rendering for path: ${currentPath}`);
+    
+    // Find the root element
+    const rootElement = document.getElementById('root');
+    if (!rootElement) {
+      console.error('[Client] Root element not found');
+      return;
+    }
+    
+    // Fetch data based on the current route
+    console.log(`[Client] Fetching users data for ${currentPath}`);
+    const users = await fetchData('/users');
+    
+    if (users) {
+      initialState.data = {
+        ...initialState.data,
+        users
+      };
+      console.log(`[Client] Updated state with ${users.length} users`);
+    }
+    
+    // Get the component for the current path
+    let PageComponent = null;
+    
+    // Special cases for known routes
+    if (currentPath === '/about') {
+      try {
+        const AboutPage = await import('./pages/about');
+        PageComponent = AboutPage.default;
+      } catch (err) {
+        console.error('[Client] Failed to load about page:', err);
+      }
+    } else if (currentPath === '/users') {
+      try {
+        const UsersPage = await import('./pages/users');
+        PageComponent = UsersPage.default;
+      } catch (err) {
+        console.error('[Client] Failed to load users page:', err);
+      }
+    } else {
+      // Try the router for other paths
+      PageComponent = await router.resolve(currentPath);
+    }
+    
+    // If component wasn't found, handle special cases
+    if (!PageComponent) {
+      console.warn(`[Client] Page component not found for ${currentPath}, checking special cases`);
+      
+      // Special case for /users
+      if (currentPath === '/users') {
+        try {
+          console.log('[Client] Attempting direct import of Users page');
+          const UsersModule = await import('./pages/users');
+          if (UsersModule.default) {
+            PageComponent = UsersModule.default;
+          }
+        } catch (err) {
+          console.error('[Client] Failed to import Users page:', err);
+        }
+      }
+    }
+    
+    // Final fallback if still no component
+    if (!PageComponent) {
+      // Create a simple fallback component
+      PageComponent = ({ initialState }) => jsx('div', { 
+        style: 'padding: 20px; max-width: 800px; margin: 0 auto;' 
+      }, [
+        jsx('h1', {}, ['Page Not Found']),
+        jsx('p', {}, [`No component found for path: ${initialState.route}`]),
+        jsx('a', { href: '/', style: 'color: #0066cc;' }, ['Go to Home'])
+      ]);
+    }
+    
+    // Update state with current route and timestamp
+    initialState.route = currentPath;
+    initialState.timestamp = new Date().toISOString();
+    initialState.serverRendered = false; // This is now a client render
+    
+    // Render or hydrate
+    if (isHydrating) {
+      console.log('[Client] Hydrating server-rendered content');
+      hydrate(<PageComponent initialState={initialState} />, rootElement);
+      // After hydration is complete, set to false for future renders
+      isHydrating = false;
+    } else {
+      console.log('[Client] Rendering client-side');
+      render(<PageComponent initialState={initialState} />, rootElement);
+    }
+  } catch (error) {
+    console.error('[Client] Error rendering app:', error);
+    
+    // Render error message
+    const rootElement = document.getElementById('root');
+    if (rootElement) {
+      rootElement.innerHTML = `
+        <div style="padding: 20px; color: red;">
+          <h1>Error</h1>
+          <p>${error.message}</p>
+          <pre>${error.stack}</pre>
+        </div>
+      `;
+    }
+  }
+}
+
+// Initial render/hydrate
+renderApp();
+
+// Set up client-side navigation
+document.addEventListener('click', (e) => {
+  // Find if the clicked element is an anchor or inside an anchor
+  let target = e.target;
+  while (target && target.tagName !== 'A') {
+    target = target.parentElement;
+    if (!target) break;
+  }
+  
+  // If we found an anchor that's for internal navigation
+  if (target && 
+      target.tagName === 'A' && 
+      target.getAttribute('href') &&
+      target.getAttribute('href').startsWith('/') && 
+      !target.getAttribute('href').startsWith('//') &&
+      !target.getAttribute('target')) {
+    e.preventDefault();
+    const href = target.getAttribute('href');
+    
+    // Update history
+    window.history.pushState(null, '', href);
+    
+    // Set to false since we're doing client-side navigation now
+    isHydrating = false;
+    
+    // Re-render the app
+    renderApp();
+  }
+});
+
+// Handle back/forward navigation
+window.addEventListener('popstate', () => {
+  // Not hydrating during history navigation
+  isHydrating = false;
+  renderApp();
+});
+
+// Setup live reload for development
+if (typeof io !== 'undefined') {
+  const socket = io();
+  
+  socket.on('reload', () => {
+    console.log('[Dev] Reloading page due to file changes');
+    window.location.reload();
+  });
+  
+  socket.on('welcome', (data) => {
+    console.log('[Dev] Connected to development server:', data);
+  });
+}

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

@@ -0,0 +1,67 @@
+import { jsx } from 'frontend-hamroun';
+import Layout from '../../components/Layout';
+
+const AboutPage = ({ initialState }) => {
+  return (
+    <Layout title="About This App">
+      <div className="max-w-4xl mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
+        <div className="p-8">
+          <p className="text-lg text-gray-700 mb-6">
+            This is a frontend application built with Frontend Hamroun framework and styled with Tailwind CSS.
+          </p>
+          <p className="text-gray-600 mb-8">
+            It features server-side rendering, client-side navigation, and websocket-based live reloading during development.
+          </p>
+          
+          <div className="bg-gray-50 p-6 rounded-lg border border-gray-200 mb-8">
+            <h2 className="text-xl font-semibold text-gray-800 mb-4">Key Features</h2>
+            <ul className="space-y-2 text-gray-700">
+              <li className="flex items-center">
+                <svg className="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
+                </svg>
+                Server-side rendering
+              </li>
+              <li className="flex items-center">
+                <svg className="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
+                </svg>
+                Client-side navigation
+              </li>
+              <li className="flex items-center">
+                <svg className="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
+                </svg>
+                Component-based architecture
+              </li>
+              <li className="flex items-center">
+                <svg className="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
+                </svg>
+                Integrated API backend
+              </li>
+              <li className="flex items-center">
+                <svg className="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
+                </svg>
+                Live reload during development
+              </li>
+              <li className="flex items-center">
+                <svg className="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
+                </svg>
+                Tailwind CSS for styling
+              </li>
+            </ul>
+          </div>
+          
+          <a href="/" className="inline-block px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors">
+            Back to Home
+          </a>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default AboutPage;