baraqex 2.0.3 → 2.0.4

package/templates/fullstack-app/public/tailwind.css

@@ -1,15 +0,0 @@
-/* All Tailwind directives */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* Custom styles */
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  line-height: 1.6;
-}
-
-/* Any custom utility classes can go here */
-.custom-container {
-  @apply max-w-4xl mx-auto px-4 py-8;
-}

package/templates/fullstack-app/server.js

@@ -1,267 +0,0 @@
-import express from 'express';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import fs from 'fs';
-import dotenv from 'dotenv';
-import { createServer } from 'http';
-import { Server as SocketServer } from 'socket.io';
-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;
-const httpServer = createServer(app);
-
-// Create socket.io server
-const io = new SocketServer(httpServer, {
-  cors: {
-    origin: process.env.NODE_ENV === 'production' ? false : '*',
-    methods: ['GET', 'POST']
-  }
-});
-
-// Middleware setup
-app.use(express.json());
-app.use(express.urlencoded({ extended: true }));
-app.use(compression()); // Add compression for better performance
-app.use(cors()); // Enable CORS for API access
-
-// Add request logging in development mode
-if (process.env.NODE_ENV !== 'production') {
-  app.use((req, res, next) => {
-    console.log(`${new Date().toISOString()} - ${req.method} ${req.url}`);
-    next();
-  });
-}
-
-// For production, serve the built files
-if (process.env.NODE_ENV === 'production') {
-  app.use(express.static(path.join(__dirname, 'dist')));
-} else {
-  // In development, we'll let Vite handle the frontend
-  console.log('Running in development mode - Vite handles the frontend');
-}
-
-// Global in-memory store for demo purposes
-// In a real app, you would use a database
-const store = {
-  users: [
-    { 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' }
-  ],
-  posts: [
-    { 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 }
-  ]
-};
-
-// Core API routes (available without file-based routing)
-app.get('/api/hello', (req, res) => {
-  res.json({
-    message: "Hello from the API!",
-    time: new Date().toISOString(),
-    features: [
-      "Server-side rendering",
-      "API routes",
-      "Component-based UI",
-      "React-like development experience",
-      "WebSocket integration",
-      "Database connectivity",
-      "Authentication"
-    ]
-  });
-});
-
-// REST API endpoints for store data
-app.get('/api/users', (req, res) => {
-  res.json(store.users);
-});
-
-app.get('/api/users/:id', (req, res) => {
-  const user = store.users.find(u => u.id === parseInt(req.params.id));
-  if (user) {
-    res.json(user);
-  } else {
-    res.status(404).json({ error: 'User not found' });
-  }
-});
-
-app.get('/api/posts', (req, res) => {
-  const { authorId } = req.query;
-  
-  if (authorId) {
-    const filteredPosts = store.posts.filter(p => p.authorId === parseInt(authorId));
-    return res.json(filteredPosts);
-  }
-  
-  res.json(store.posts);
-});
-
-// Improved dynamic API route loading with better error handling
-const apiDir = path.join(__dirname, 'api');
-if (fs.existsSync(apiDir)) {
-  console.log('Loading API routes from directory...');
-  
-  // Function to map file paths to API routes
-  const registerApiRoutes = async (dir, routePrefix = '') => {
-    try {
-      const entries = fs.readdirSync(dir, { withFileTypes: true });
-      
-      for (const entry of entries) {
-        const fullPath = path.join(dir, entry.name);
-        
-        if (entry.isDirectory()) {
-          // Process directories recursively
-          await registerApiRoutes(fullPath, `${routePrefix}/${entry.name}`);
-        } else if (entry.name.endsWith('.js') || entry.name.endsWith('.ts')) {
-          // Process API file
-          try {
-            const fileName = entry.name.replace(/\.[^/.]+$/, ""); // Remove extension
-            const routePath = fileName === 'index' 
-              ? routePrefix 
-              : fileName.startsWith('[') && fileName.endsWith(']')
-                ? `${routePrefix}/:${fileName.slice(1, -1)}` // Convert [param] to :param
-                : `${routePrefix}/${fileName}`;
-                
-            // Import the route module
-            const module = await import(`file://${fullPath}`);
-            
-            // Register handlers for HTTP methods
-            ['get', 'post', 'put', 'delete', 'patch'].forEach(method => {
-              if (typeof module[method] === 'function') {
-                console.log(`  Registered ${method.toUpperCase()} ${routePath}`);
-                app[method](`/api${routePath}`, module[method]);
-              }
-            });
-            
-            // Special case for 'delete' which might be named 'delete_' in some files
-            if (typeof module['delete_'] === 'function') {
-              console.log(`  Registered DELETE ${routePath}`);
-              app.delete(`/api${routePath}`, module['delete_']);
-            }
-          } catch (err) {
-            console.error(`Error loading API route ${fullPath}:`, err);
-          }
-        }
-      }
-    } catch (err) {
-      console.error(`Error reading directory ${dir}:`, err);
-    }
-  };
-  
-  // Start registering API routes
-  registerApiRoutes(apiDir).catch(err => {
-    console.error('Error loading API routes:', err);
-  });
-} else {
-  console.log('API directory not found, skipping API route loading');
-}
-
-// WebSocket setup
-io.on('connection', (socket) => {
-  console.log('Client connected:', socket.id);
-  
-  // Send welcome message
-  socket.emit('welcome', { 
-    message: 'Connected to WebSocket server',
-    time: new Date().toISOString()
-  });
-  
-  // Handle client messages
-  socket.on('message', (data) => {
-    console.log('Received message:', data);
-    // Broadcast to all clients
-    io.emit('broadcast', {
-      from: socket.id,
-      data,
-      time: new Date().toISOString()
-    });
-  });
-  
-  // Handle disconnect
-  socket.on('disconnect', () => {
-    console.log('Client disconnected:', socket.id);
-  });
-});
-
-// In production or if using SSR, handle all routes
-app.get('*', (req, res, next) => {
-  // Skip API routes
-  if (req.path.startsWith('/api/')) {
-    return next();
-  }
-  
-  // In production, serve the index.html
-  if (process.env.NODE_ENV === 'production') {
-    const indexPath = path.join(__dirname, 'dist', 'index.html');
-    if (fs.existsSync(indexPath)) {
-      try {
-        // Read the index.html file
-        let html = fs.readFileSync(indexPath, 'utf8');
-        
-        // Create initial state for client hydration
-        const initialState = {
-          route: req.path,
-          timestamp: new Date().toISOString()
-        };
-        
-        // Inject initial state for hydration
-        html = html.replace(
-          '</head>',
-          `<script>window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};</script></head>`
-        );
-        
-        res.send(html);
-      } catch (error) {
-        console.error('Error serving HTML:', error);
-        res.status(500).send('Server Error');
-      }
-    } else {
-      res.status(404).send('Not found');
-    }
-  } else {
-    // In development, use Vite's dev server
-    // Instead of redirecting, proxy the request to maintain the URL path
-    // This allows Vite to handle the route properly
-    const viteDevServerUrl = 'http://localhost:5173';
-    
-    // Tell the client which route to handle via response headers
-    res.setHeader('x-original-route', req.path);
-    
-    // Forward the request to the Vite dev server with the original path
-    res.redirect(302, `${viteDevServerUrl}${req.path}`);
-    
-    // Note: If the above still causes 404s, you can try this alternative
-    // res.redirect(302, `${viteDevServerUrl}/?_path=${encodeURIComponent(req.path)}`);
-  }
-});
-
-// Error handling middleware
-app.use((err, req, res, next) => {
-  console.error('Server error:', err);
-  res.status(500).json({
-    error: process.env.NODE_ENV === 'production' 
-      ? 'Internal server error' 
-      : err.message
-  });
-});
-
-// Start server
-httpServer.listen(PORT, () => {
-  console.log(`Server running on http://localhost:${PORT}`);
-  
-  if (process.env.NODE_ENV !== 'production') {
-    console.log(`Frontend development server will run on http://localhost:5173`);
-    console.log(`Run 'npm run dev' to start both servers`);
-  }
-});

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

@@ -1,55 +0,0 @@
-# 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,87 +0,0 @@
-import { hydrate, createElement, jsx } from 'frontend-hamroun';
-
-// 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;
-  }
-}
-
-// 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/ErrorBoundary.tsx

@@ -1,36 +0,0 @@
-import { jsx, useState, useEffect, useErrorBoundary } from 'frontend-hamroun';
-
-interface ErrorBoundaryProps {
-  children: any;
-  fallback?: (error: Error, reset: () => void) => any;
-}
-
-export function ErrorBoundary({ children, fallback }: ErrorBoundaryProps) {
-  const [error, resetError] = useErrorBoundary();
-  
-  if (error) {
-    if (fallback) {
-      return fallback(error, resetError);
-    }
-    
-    return (
-      <div className="error-boundary p-4 border border-red-500 rounded bg-red-50">
-        <h3 className="text-lg font-medium text-red-800 mb-2">Something went wrong</h3>
-        <p className="text-red-600 mb-2">{error.message}</p>
-        <button
-          onClick={resetError}
-          className="px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700"
-        >
-          Try again
-        </button>
-        {process.env.NODE_ENV !== 'production' && (
-          <pre className="mt-3 text-xs overflow-auto p-2 bg-gray-100">
-            {error.stack}
-          </pre>
-        )}
-      </div>
-    );
-  }
-  
-  return children;
-}

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

@@ -1,42 +0,0 @@
-import { jsx } from 'frontend-hamroun';
-
-interface LayoutProps {
-  children: any;
-  title?: string;
-}
-
-export default function Layout({ children, title = 'Frontend Hamroun App' }: LayoutProps) {
-  return (
-    <div className="min-h-screen flex flex-col bg-gray-50">
-      <header className="bg-blue-600 text-white">
-        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
-          <h1 className="text-xl font-bold">
-            <a href="/" className="hover:text-blue-100">
-              {title}
-            </a>
-          </h1>
-          
-          <nav>
-            <ul className="flex space-x-6">
-              <li><a href="/" className="hover:text-blue-100">Home</a></li>
-              <li><a href="/about" className="hover:text-blue-100">About</a></li>
-              {/* WASM demo link removed */}
-            </ul>
-          </nav>
-        </div>
-      </header>
-      
-      <main className="flex-grow container mx-auto px-4 py-8">
-        {children}
-      </main>
-      
-      <footer className="bg-gray-800 text-white">
-        <div className="container mx-auto px-4 py-6">
-          <p className="text-center text-gray-400">
-            &copy; {new Date().getFullYear()} Frontend Hamroun App. All rights reserved.
-          </p>
-        </div>
-      </footer>
-    </div>
-  );
-}