baraqex 1.0.76 → 2.0.0

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/pages/wasm-demo.tsx

@@ -0,0 +1 @@
+// This file will be removed as it contains WASM functionality

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

@@ -0,0 +1,87 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+export default defineConfig({
+  // Server configuration
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': 'http://localhost:3000',
+      '/socket.io': {
+        target: 'http://localhost:3000',
+        ws: true
+      }
+    }
+  },
+  
+  // Using jsx transform with frontend-hamroun's jsx function
+  esbuild: {
+    jsxFactory: 'jsx',
+    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'),
+      '@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/go/build.bat

@@ -0,0 +1,36 @@
+@echo off
+echo Building Go WASM module...
+
+REM Check if Go is installed
+where go >nul 2>&1
+if %ERRORLEVEL% NEQ 0 (
+    echo Error: Go is not installed
+    exit /b 1
+)
+
+REM Build WASM module
+set GOOS=js
+set GOARCH=wasm
+go build -o example.wasm example.go
+if %ERRORLEVEL% NEQ 0 (
+    echo Error: Failed to build Go WASM module
+    exit /b 1
+)
+
+REM Copy wasm_exec.js files
+for /f "tokens=*" %%g in ('go env GOROOT') do (set GOROOT=%%g)
+
+echo Copying WASM runtime files from %GOROOT%\misc\wasm\
+copy "%GOROOT%\misc\wasm\wasm_exec.js" .
+copy "%GOROOT%\misc\wasm\wasm_exec_node.js" .
+
+echo Build complete!
+echo Files created:
+echo - example.wasm - WebAssembly module
+echo - wasm_exec.js - Browser runtime
+echo - wasm_exec_node.js - Node.js runtime
+
+echo.
+echo Usage:
+echo 1. Copy these files to your project's public directory
+echo 2. Load the WASM module using the provided utilities

package/templates/go/build.sh

@@ -0,0 +1,43 @@
+#!/bin/bash
+
+# Build script for Go WASM modules
+
+# Ensure Go is installed
+if ! command -v go &> /dev/null; then
+    echo "Error: Go is not installed"
+    exit 1
+fi
+
+# Check Go version
+GO_VERSION=$(go version | cut -d ' ' -f 3 | sed 's/go//')
+GO_VERSION_MAJOR=$(echo $GO_VERSION | cut -d '.' -f 1)
+GO_VERSION_MINOR=$(echo $GO_VERSION | cut -d '.' -f 2)
+
+if [ $GO_VERSION_MAJOR -lt 1 ] || ([ $GO_VERSION_MAJOR -eq 1 ] && [ $GO_VERSION_MINOR -lt 16 ]); then
+    echo "Warning: Go version 1.16+ recommended for WebAssembly, detected $GO_VERSION"
+fi
+
+# Build example WASM module
+echo "Building example Go WASM module..."
+GOOS=js GOARCH=wasm go build -o example.wasm example.go
+if [ $? -ne 0 ]; then
+    echo "Error: Failed to build Go WASM module"
+    exit 1
+fi
+
+# Copy wasm_exec.js files for browser and Node.js from Go installation
+GO_ROOT=$(go env GOROOT)
+echo "Copying wasm_exec.js files from $GO_ROOT/misc/wasm/"
+cp "$GO_ROOT/misc/wasm/wasm_exec.js" ./
+cp "$GO_ROOT/misc/wasm/wasm_exec_node.js" ./
+
+echo "Build complete!"
+echo "Files created:"
+echo "- example.wasm - WebAssembly module"
+echo "- wasm_exec.js - Browser runtime"
+echo "- wasm_exec_node.js - Node.js runtime"
+
+echo ""
+echo "Usage:"
+echo "1. Copy these files to your project's public directory"
+echo "2. Load the WASM module using the provided utilities"