baraqex 1.0.76 → 2.0.0

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

@@ -0,0 +1,207 @@
+import { jsx, useState, useEffect, useMemo } from 'frontend-hamroun';
+
+// Define our state types for better type safety
+interface CounterState {
+  count: number;
+  lastUpdated: string | null;
+  history: number[];
+}
+
+export default function StateDemo() {
+  // More comprehensive state with history tracking
+  const [state, setState] = useState<CounterState>({
+    count: 0,
+    lastUpdated: null,
+    history: []
+  });
+  
+  // Track UI state separately
+  const [isLoading, setIsLoading] = useState(false);
+  const [showHistory, setShowHistory] = useState(false);
+  
+  // Check for server-side rendering
+  const isSSR = typeof window === 'undefined';
+  
+  // Calculate derived state with useMemo for performance
+  const stats = useMemo(() => {
+    // Ensure we have a valid history array
+    if (isSSR || !state || !state.history || state.history.length === 0) {
+      return { avg: 0, max: 0, min: 0 };
+    }
+    
+    try {
+      const sum = state.history.reduce((a, b) => a + b, 0);
+      return {
+        avg: parseFloat((sum / state.history.length).toFixed(1)),
+        max: Math.max(...state.history),
+        min: Math.min(...state.history)
+      };
+    } catch (error) {
+      console.error('Error calculating stats:', error);
+      return { avg: 0, max: 0, min: 0 };
+    }
+  }, [state?.history]);
+  
+  // Handle increment with history tracking
+  const increment = () => {
+    if (isSSR) return;
+    
+    setIsLoading(true);
+    
+    // Simulate async operation
+    setTimeout(() => {
+      setState(prevState => ({
+        count: prevState.count + 1,
+        lastUpdated: new Date().toLocaleTimeString(),
+        history: [...(prevState.history || []), prevState.count + 1]
+      }));
+      setIsLoading(false);
+    }, 300);
+  };
+  
+  // Handle decrement with bounds checking
+  const decrement = () => {
+    if (isSSR) return;
+    
+    setIsLoading(true);
+    
+    // Simulate async operation
+    setTimeout(() => {
+      setState(prevState => ({
+        count: Math.max(0, prevState.count - 1),
+        lastUpdated: new Date().toLocaleTimeString(),
+        history: prevState.count > 0 ? [...(prevState.history || []), prevState.count - 1] : (prevState.history || [])
+      }));
+      setIsLoading(false);
+    }, 300);
+  };
+  
+  // Reset counter
+  const reset = () => {
+    if (isSSR) return;
+    
+    setState({
+      count: 0,
+      lastUpdated: new Date().toLocaleTimeString(),
+      history: []
+    });
+  };
+  
+  // Toggle history visibility
+  const toggleHistory = () => {
+    if (isSSR) return;
+    
+    setShowHistory(prev => !prev);
+  };
+  
+  // For SSR, return a simpler version of the component
+  if (isSSR) {
+    return (
+      <div className="bg-white shadow-lg rounded-lg p-6 mb-8">
+        <h2 className="text-xl font-semibold text-gray-800 mb-4">
+          State Management Demo
+        </h2>
+        <div className="flex items-center justify-between mb-4">
+          <button className="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg">-</button>
+          <span className="text-2xl font-bold mx-4">0</span>
+          <button className="px-4 py-2 bg-blue-600 text-white rounded-lg">+</button>
+        </div>
+        <p className="text-sm text-gray-500">Interactive counter (client-side only)</p>
+      </div>
+    );
+  }
+  
+  // Regular client-side render
+  return (
+    <div className="bg-white shadow-lg rounded-lg p-6 mb-8">
+      <h2 className="text-xl font-semibold text-gray-800 mb-4">
+        State Management Demo
+      </h2>
+      
+      <div className="mb-6">
+        <div className="flex items-center justify-between mb-4">
+          <button 
+            onClick={decrement}
+            className="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 disabled:opacity-50"
+            disabled={state.count === 0 || isLoading}
+          >
+            {isLoading ? '...' : '-'}
+          </button>
+          
+          <span className="text-2xl font-bold mx-4">{state.count}</span>
+          
+          <button 
+            onClick={increment}
+            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
+            disabled={isLoading}
+          >
+            {isLoading ? '...' : '+'}
+          </button>
+        </div>
+        
+        <button
+          onClick={reset}
+          className="text-sm text-gray-600 hover:text-red-600"
+          disabled={state.count === 0 && (!state.history || state.history.length === 0)}
+        >
+          Reset Counter
+        </button>
+      </div>
+      
+      {state.lastUpdated && (
+        <div className="mb-4">
+          <p className="text-sm text-gray-500">
+            Last updated: {state.lastUpdated}
+          </p>
+        </div>
+      )}
+      
+      {state.history && state.history.length > 0 && (
+        <div className="border-t pt-4 mt-4">
+          <div className="flex items-center justify-between mb-2">
+            <h3 className="text-md font-medium text-gray-700">Statistics</h3>
+            <button
+              onClick={toggleHistory}
+              className="text-sm text-blue-600 hover:underline"
+            >
+              {showHistory ? 'Hide History' : 'Show History'}
+            </button>
+          </div>
+          
+          <div className="grid grid-cols-3 gap-2 mb-3">
+            <div className="bg-blue-50 p-2 rounded text-center">
+              <div className="text-xs text-gray-500">Average</div>
+              <div className="font-bold">{stats.avg}</div>
+            </div>
+            <div className="bg-green-50 p-2 rounded text-center">
+              <div className="text-xs text-gray-500">Maximum</div>
+              <div className="font-bold">{stats.max}</div>
+            </div>
+            <div className="bg-red-50 p-2 rounded text-center">
+              <div className="text-xs text-gray-500">Minimum</div>
+              <div className="font-bold">{stats.min}</div>
+            </div>
+          </div>
+          
+          {showHistory && (
+            <div className="mt-3">
+              <h4 className="text-sm font-medium text-gray-600 mb-1">
+                History ({state.history.length} events)
+              </h4>
+              <div className="bg-gray-50 p-2 rounded max-h-24 overflow-y-auto text-xs">
+                {state.history.map((value, index) => (
+                  <span 
+                    key={index} 
+                    className="inline-block bg-gray-200 rounded px-2 py-1 m-1"
+                  >
+                    {value}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,44 @@
+import { jsx } from 'frontend-hamroun';
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+interface UserListProps {
+  users: User[];
+}
+
+export default function UserList({ users }: UserListProps) {
+  if (!users || users.length === 0) {
+    return (
+      <div className="empty-state p-4 text-center bg-gray-50 rounded">
+        <p className="text-gray-500">No users available</p>
+      </div>
+    );
+  }
+  
+  return (
+    <div className="user-list">
+      <ul className="divide-y divide-gray-100">
+        {users.map(user => (
+          <li key={user.id} className="py-3">
+            <div className="flex justify-between">
+              <div>
+                <p className="font-medium text-gray-900">{user.name}</p>
+                <p className="text-sm text-gray-500">{user.email}</p>
+              </div>
+              <a 
+                href={`/users/${user.id}`}
+                className="text-blue-600 hover:underline text-sm self-center"
+              >
+                View Profile
+              </a>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

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,206 @@
+/**
+ * API utilities for making requests to the backend
+ */
+import { batchUpdates } from 'frontend-hamroun';
+
+// Cache for API responses
+const apiCache = new Map<string, { data: any, timestamp: number }>();
+const CACHE_DURATION = 60000; // 1 minute cache
+
+/**
+ * Fetch data from the API with caching
+ */
+export async function fetchApi(
+  endpoint: string, 
+  options: RequestInit & { 
+    useCache?: boolean,
+    forceFresh?: boolean 
+  } = {}
+): Promise<any> {
+  const url = endpoint.startsWith('/') ? `/api${endpoint}` : `/api/${endpoint}`;
+  const { useCache = true, forceFresh = false, ...fetchOptions } = options;
+  
+  // Check cache first if enabled
+  if (useCache && !forceFresh) {
+    const cached = apiCache.get(url);
+    if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {
+      console.log(`[API] Using cached data for: ${url}`);
+      return cached.data;
+    }
+  }
+  
+  try {
+    console.log(`[API] Fetching data from: ${url}`);
+    const response = await fetch(url, {
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+      },
+      ...fetchOptions
+    });
+    
+    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}`);
+    
+    // Cache the response if caching is enabled
+    if (useCache) {
+      apiCache.set(url, { data, timestamp: Date.now() });
+    }
+    
+    return data;
+  } catch (error) {
+    console.error(`[API] Error fetching from ${url}:`, error);
+    throw error;
+  }
+}
+
+/**
+ * Clear the API cache
+ */
+export function clearApiCache(endpoint?: string): void {
+  if (endpoint) {
+    const url = endpoint.startsWith('/') ? `/api${endpoint}` : `/api/${endpoint}`;
+    apiCache.delete(url);
+  } else {
+    apiCache.clear();
+  }
+}
+
+// Sample data for development
+const sampleUsers = [
+  { id: 1, name: 'User 1', email: 'user1@example.com' },
+  { id: 2, name: 'User 2', email: 'user2@example.com' },
+  { id: 3, name: 'User 3', email: 'user3@example.com' }
+];
+
+const samplePosts = [
+  { id: 1, title: 'Post 1', content: 'Content for post 1', authorId: 1 },
+  { id: 2, title: 'Post 2', content: 'Content for post 2', authorId: 2 },
+  { id: 3, title: 'Post 3', content: 'Content for post 3', authorId: 1 }
+];
+
+// Helper to simulate network delay
+const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+
+// User API client
+export const UserApi = {
+  // Get all users
+  async getAll() {
+    try {
+      // In a real app, we'd fetch from API
+      // const response = await fetch('/api/users');
+      // if (!response.ok) throw new Error('Failed to fetch users');
+      // return await response.json();
+      
+      // Simulate API delay
+      await delay(300);
+      return [...sampleUsers]; // Return a copy to avoid mutations
+    } catch (error) {
+      console.error('Error fetching users:', error);
+      return [];
+    }
+  },
+  
+  // Get user by ID
+  async getById(id: number | string) {
+    try {
+      // In a real app, we'd fetch from API
+      // const response = await fetch(`/api/users/${id}`);
+      // if (!response.ok) throw new Error('User not found');
+      // return await response.json();
+      
+      // Convert ID to number if it's a string
+      const userId = typeof id === 'string' ? parseInt(id, 10) : id;
+      
+      // Simulate API delay
+      await delay(200);
+      
+      // Find user
+      const user = sampleUsers.find(u => u.id === userId);
+      if (!user) throw new Error('User not found');
+      
+      return { ...user }; // Return a copy to avoid mutations
+    } catch (error) {
+      console.error(`Error fetching user ${id}:`, error);
+      return null;
+    }
+  },
+  
+  // Get posts (all or by author)
+  async getPosts(authorId?: number | string) {
+    try {
+      // In a real app, we'd fetch from API
+      // const url = authorId ? `/api/posts?authorId=${authorId}` : '/api/posts';
+      // const response = await fetch(url);
+      // if (!response.ok) throw new Error('Failed to fetch posts');
+      // return await response.json();
+      
+      // Convert authorId to number if it's a string
+      const userId = authorId ? (typeof authorId === 'string' ? parseInt(authorId, 10) : authorId) : undefined;
+      
+      // Simulate API delay
+      await delay(400);
+      
+      // Filter posts if authorId is provided
+      const posts = userId
+        ? samplePosts.filter(p => p.authorId === userId)
+        : samplePosts;
+      
+      return [...posts]; // Return a copy to avoid mutations
+    } catch (error) {
+      console.error('Error fetching posts:', error);
+      return [];
+    }
+  }
+};
+
+// WASM API service
+export const WasmApi = {
+  calculate: (operation: 'add' | 'multiply', a: number, b: number) => 
+    fetchApi(`/wasm/calculate?op=${operation}&a=${a}&b=${b}`),
+    
+  processJson: (data: any) => fetchApi('/wasm/process-json', {
+    method: 'POST',
+    body: JSON.stringify(data),
+    useCache: false
+  })
+};
+
+// Batch multiple API calls for efficiency
+export const batchApiCalls = async <T>(
+  apiFunctions: Array<() => Promise<T>>
+): Promise<T[]> => {
+  const results: T[] = [];
+  let errors: Error[] = [];
+  
+  // Execute all API calls in parallel
+  const promises = apiFunctions.map(fn => fn());
+  
+  try {
+    const settledResults = await Promise.allSettled(promises);
+    
+    // Process results
+    batchUpdates(() => {
+      settledResults.forEach(result => {
+        if (result.status === 'fulfilled') {
+          results.push(result.value);
+        } else {
+          errors.push(result.reason);
+        }
+      });
+    });
+    
+    if (errors.length) {
+      console.error('[API] Some batch API calls failed:', errors);
+    }
+    
+    return results;
+  } catch (error) {
+    console.error('[API] Batch API calls failed:', error);
+    throw error;
+  }
+};

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

@@ -0,0 +1,155 @@
+import { render, hydrate, jsx } from 'frontend-hamroun';
+// Import Tailwind CSS
+import './styles.css';
+
+// Type declaration for window.__INITIAL_STATE__
+declare global {
+  interface Window {
+    __INITIAL_STATE__?: any;
+  }
+}
+
+// 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);
+
+// Create a mutable variable for hydration state
+let isHydrating = document.getElementById('root')?.innerHTML.trim() !== '';
+
+// Function to handle navigation
+async function handleRouteChange(path: string, isPushState = true) {
+  try {
+    console.log(`[Router] Navigating to: ${path}`);
+    
+    // Update URL if needed
+    if (isPushState) {
+      window.history.pushState(null, '', path);
+    }
+    
+    // Dynamically load the page component based on the path
+    const normalizedPath = path === '/' ? 'index' : path.replace(/^\//, '');
+    
+    let Page;
+    try {
+      // Dynamic import for the page component
+      const module = await import(`./pages/${normalizedPath}.tsx`);
+      Page = module.default;
+    } catch (error) {
+      console.warn(`[Router] Could not load page for ${path}, trying index file`);
+      try {
+        // Try loading index file in directory
+        const module = await import(`./pages/${normalizedPath}/index.tsx`);
+        Page = module.default;
+      } catch (innerError) {
+        console.error(`[Router] Failed to load page component for ${path}`);
+        
+        // Try to load 404 page
+        try {
+          const notFoundModule = await import(`./pages/404.tsx`);
+          Page = notFoundModule.default;
+        } catch (notFoundError) {
+          // If all fails, render a simple not found message
+          const rootElement = document.getElementById('root');
+          if (rootElement) {
+            render(
+              <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
+                <h1>Page Not Found</h1>
+                <p>The page you requested could not be found.</p>
+                <a href="/" style={{ color: '#0066cc' }}>Go to Home</a>
+              </div>,
+              rootElement
+            );
+          }
+          return;
+        }
+      }
+    }
+    
+    // Get the current page props
+    let pageProps = initialState.pageProps || {};
+    
+    // If the page defines getServerSideProps, fetch data
+    if (Page.getServerSideProps) {
+      try {
+        const response = await fetch(`/api/__props${path}`);
+        if (response.ok) {
+          const data = await response.json();
+          pageProps = data.props || {};
+        }
+      } catch (error) {
+        console.error('[Router] Error fetching page props:', error);
+      }
+    }
+    
+    // Update the state with current route
+    const updatedState = {
+      ...initialState,
+      route: path,
+      pageProps
+    };
+    
+    // Render the page
+    const rootElement = document.getElementById('root');
+    if (!rootElement) return;
+    
+    if (isHydrating && path === initialState.route) {
+      console.log('[Client] Hydrating server-rendered content');
+      hydrate(<Page {...pageProps} initialState={updatedState} />, rootElement);
+      isHydrating = false;
+    } else {
+      console.log('[Client] Rendering client-side');
+      render(<Page {...pageProps} initialState={updatedState} />, rootElement);
+    }
+  } catch (error) {
+    console.error('[Router] Navigation error:', error);
+  }
+}
+
+// Handle initial route
+handleRouteChange(window.location.pathname, false);
+
+// Handle client-side navigation
+document.addEventListener('click', (e) => {
+  let target = e.target as HTMLElement | null;
+  
+  // Find closest anchor element
+  while (target && target.tagName !== 'A') {
+    target = target.parentElement;
+    if (!target) break;
+  }
+  
+  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') || '/';
+    handleRouteChange(href);
+  }
+});
+
+// Handle back/forward navigation
+window.addEventListener('popstate', () => {
+  handleRouteChange(window.location.pathname, false);
+});
+
+// Set up socket.io for live reload in development
+if (typeof io !== 'undefined') {
+  const socket = io();
+  socket.on('reload', () => {
+    console.log('[Dev] Reloading page due to file changes');
+    window.location.reload();
+  });
+}

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

@@ -0,0 +1,28 @@
+// Next.js-like global middleware
+import { Request, Response, NextFunction } from 'express';
+
+// Extend the Express Request interface
+declare global {
+  namespace Express {
+    interface Request {
+      timestamp: string;
+    }
+  }
+}
+
+// This middleware will be applied to all routes (API and pages)
+export default async function middleware(req: Request, res: Response, next?: NextFunction) {
+  // Add request timestamp
+  req.timestamp = await new Date().toISOString();
+  
+  // Log all requests in development mode
+  if (process.env.NODE_ENV !== 'production') {
+    console.log(`[${req.timestamp}] ${req.method} ${req.url}`);
+  }
+  
+  // Example of response header modification
+  res.setHeader('X-Powered-By', 'Frontend Hamroun');
+  
+  // Continue to next middleware
+  if (next) next();
+}