baraqex 2.0.3 → 2.0.4

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

@@ -0,0 +1,77 @@
+import { jsx, useState } from 'baraqex';
+import { HomePage } from './pages/Home';
+import { AboutPage } from './pages/About';
+import { WasmDemo } from './pages/WasmDemo';
+
+export interface AppProps {
+  route?: string;
+  initialState?: any;
+}
+
+function parseRoute(pathname: string): string {
+  const p = pathname || '/';
+  if (p.startsWith('/wasm')) return 'wasm';
+  if (p.startsWith('/about')) return 'about';
+  return 'home';
+}
+
+export function App({ route, initialState }: AppProps) {
+  const [current, setCurrent] = useState<string>(parseRoute(route || (typeof window !== 'undefined' ? window.location.pathname : '/')));
+
+  const navigate = (target: string) => {
+    setCurrent(target);
+    if (typeof window !== 'undefined') {
+      const path = target === 'home' ? '/' : `/${target}`;
+      window.history.pushState(null, '', path);
+    }
+  };
+
+  const navItems = [
+    { key: 'home', label: 'Home', href: '/' },
+    { key: 'about', label: 'About', href: '/about' },
+    { key: 'wasm', label: 'WASM (Go)', href: '/wasm' }
+  ];
+
+  return (
+    <div className="min-h-screen flex flex-col bg-gray-50">
+      <header className="bg-blue-700 text-white shadow">
+        <div className="max-w-5xl mx-auto px-4 py-4 flex items-center justify-between">
+          <button onClick={() => navigate('home')} className="text-xl font-bold hover:text-blue-100">
+            Baraqex Full-Stack
+          </button>
+          <nav>
+            <ul className="flex space-x-6">
+              {navItems.map((item) => (
+                <li key={item.key}>
+                  <button
+                    onClick={() => navigate(item.key)}
+                    className={
+                      'hover:text-blue-200 ' +
+                      (current === item.key ? 'underline font-semibold' : '')
+                    }
+                  >
+                    {item.label}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+      </header>
+
+      <main className="flex-grow max-w-5xl w-full mx-auto px-4 py-8">
+        {current === 'home' && <HomePage initialState={initialState} />}
+        {current === 'about' && <AboutPage />}
+        {current === 'wasm' && <WasmDemo />}
+      </main>
+
+      <footer className="bg-gray-800 text-white">
+        <div className="max-w-5xl mx-auto px-4 py-6 text-center text-gray-400">
+          © {new Date().getFullYear()} Baraqex — SSR + WASM + Full-Stack in one template
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+export default App;

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

@@ -1,155 +1,31 @@
-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();
-  });
-}
+import { hydrate, jsx } from 'baraqex';
+import { App } from './App';
+import './styles.css';
+
+declare global {
+  interface Window {
+    __INITIAL_STATE__?: any;
+  }
+}
+
+const initialState = window.__INITIAL_STATE__ || {};
+const route = window.location.pathname;
+
+const root = document.getElementById('root');
+if (root) {
+  hydrate(jsx(App, { route, initialState }), root);
+}
+
+// Socket.IO live reload (dev)
+const w = window as any;
+if (w.io) {
+  const socket = w.io();
+  socket.on('reload', () => window.location.reload());
+}
+
+// Handle back/forward navigation
+window.addEventListener('popstate', () => {
+  const r = document.getElementById('root');
+  if (r) hydrate(jsx(App, { route: window.location.pathname, initialState }), r);
+});
+

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

@@ -0,0 +1,40 @@
+import { jsx } from 'baraqex';
+
+export function AboutPage() {
+  return (
+    <div className="bg-white rounded-lg shadow p-6 space-y-6">
+      <h1 className="text-3xl font-bold text-gray-900">About this template</h1>
+      <div className="grid md:grid-cols-2 gap-6">
+        <div className="p-4 border border-blue-100 rounded-lg bg-blue-50">
+          <h3 className="font-semibold text-blue-800 mb-2">Frontend + SSR</h3>
+          <p className="text-sm text-blue-900">
+            The same <code className="bg-blue-100 px-1 rounded">App</code> component is rendered
+            server-side with <code>baraqex</code> and hydrated on the client. Initial page HTML
+            arrives fully formed.
+          </p>
+        </div>
+        <div className="p-4 border border-green-100 rounded-lg bg-green-50">
+          <h3 className="font-semibold text-green-800 mb-2">Backend (Express API)</h3>
+          <p className="text-sm text-green-900">
+            API endpoints under <code>/api/*</code> are served by an Express server bundled
+            alongside the app. Refresh users from <code>/api/users</code>.
+          </p>
+        </div>
+        <div className="p-4 border border-purple-100 rounded-lg bg-purple-50">
+          <h3 className="font-semibold text-purple-800 mb-2">WebAssembly (Go)</h3>
+          <p className="text-sm text-purple-900">
+            Go source in <code>go/main.go</code> compiles to WASM via{' '}
+            <code>npm run build:wasm</code>. Call Go functions straight from the browser.
+          </p>
+        </div>
+        <div className="p-4 border border-amber-100 rounded-lg bg-amber-50">
+          <h3 className="font-semibold text-amber-800 mb-2">Live reload (dev)</h3>
+          <p className="text-sm text-amber-900">
+            <code>npm run dev</code> bundles with esbuild and streams reload events over
+            Socket.IO when files change.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,67 @@
+import { jsx, useState } from 'baraqex';
+
+export interface HomeState {
+  users?: any[];
+  posts?: any[];
+  serverTime?: string;
+}
+
+export function HomePage({ initialState }: { initialState?: any }) {
+  const initial: HomeState = initialState || { users: [], posts: [] };
+  const [users, setUsers] = useState<any[]>(initial.users || []);
+  const [message, setMessage] = useState('');
+
+  const refresh = async () => {
+    try {
+      const res = await fetch('/api/users');
+      const data = await res.json();
+      setUsers(data);
+      setMessage('Data refreshed from /api/users');
+    } catch (e: any) {
+      setMessage('Failed to load data: ' + e.message);
+    }
+  };
+
+  return (
+    <div className="space-y-8">
+      <section>
+        <h1 className="text-3xl font-bold text-gray-900 mb-2">
+          Welcome to Baraqex
+        </h1>
+        <p className="text-gray-600">
+          This template wires together server-side rendering (SSR), a REST API, WebAssembly
+          compiled from Go, and hydration — all through the baraqex framework.
+        </p>
+        {initial.serverTime && (
+          <p className="text-sm text-gray-500 mt-2">
+            Server-rendered at: {initial.serverTime}
+          </p>
+        )}
+      </section>
+
+      <section className="bg-white rounded-lg shadow p-6">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-xl font-semibold text-gray-800">Users (fetched via API)</h2>
+          <button
+            onClick={refresh}
+            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+          >
+            Refresh
+          </button>
+        </div>
+        {message && <p className="text-green-700 text-sm mb-3">{message}</p>}
+        <ul className="divide-y divide-gray-200">
+          {(users || []).map((user: any) => (
+            <li key={user.id} className="py-2 flex items-center justify-between">
+              <span className="font-medium">{user.name}</span>
+              <span className="text-sm text-gray-500">{user.email}</span>
+            </li>
+          ))}
+        </ul>
+        {(users || []).length === 0 && (
+          <p className="text-gray-500 text-sm">No users loaded yet. Click Refresh.</p>
+        )}
+      </section>
+    </div>
+  );
+}

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

@@ -0,0 +1,81 @@
+import { jsx, useState, useEffect, batchUpdates } from 'baraqex';
+import { loadGoWasm } from 'baraqex';
+
+export function WasmDemo() {
+  const [ready, setReady] = useState(false);
+  const [status, setStatus] = useState('Loading Go WASM...');
+  const [output, setOutput] = useState('');
+  const [a, setA] = useState('5');
+  const [b, setB] = useState('7');
+  const [n, setN] = useState('10');
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        await loadGoWasm('/wasm/example.wasm');
+        if (cancelled) return;
+        batchUpdates(() => {
+          setReady(true);
+          setStatus('✅ Go WASM module loaded!');
+          setOutput('Go functions available: goAdd, goMultiply, goFibonacci, goProcessArray');
+        });
+      } catch (e: any) {
+        if (cancelled) return;
+        setStatus('❌ Failed to load WASM: ' + e.message);
+        setOutput('Run `npm run build:wasm` (requires Go) and ensure /wasm/example.wasm is served.');
+      }
+    })();
+    return () => { cancelled = true; };
+  }, []);
+
+  const call = (fn: string, ...args: any[]) => (window as any)[fn](...args);
+
+  const add = () => setOutput(`goAdd(${a}, ${b}) = ${call('goAdd', parseFloat(a), parseFloat(b))}`);
+  const multiply = () => setOutput(`goMultiply(${a}, ${b}) = ${call('goMultiply', parseFloat(a), parseFloat(b))}`);
+  const fib = () => setOutput(`goFibonacci(${n}) = ${call('goFibonacci', parseInt(n, 10))}`);
+  const processArr = () => {
+    const result = call('goProcessArray', [1, 2, 3, 4, 5]);
+    setOutput(`goProcessArray([1,2,3,4,5]) = [${Array.from(result).join(', ')}]`);
+  };
+
+  const disabled = !ready;
+
+  return (
+    <div className="bg-white rounded-lg shadow p-6 space-y-6">
+      <h1 className="text-3xl font-bold text-gray-900">Go WebAssembly Demo</h1>
+      <p className={`font-medium ${ready ? 'text-green-700' : 'text-amber-600'}`}>{status}</p>
+      <div className="grid md:grid-cols-2 gap-6">
+        <div className="p-4 border rounded-lg bg-gray-50">
+          <h3 className="font-semibold text-gray-700 mb-3">Arithmetic</h3>
+          <div className="flex items-center gap-2 mb-3">
+            <input value={a} onChange={(e: any) => setA(e.target.value)} className="w-20 px-2 py-1 border rounded" />
+            <input value={b} onChange={(e: any) => setB(e.target.value)} className="w-20 px-2 py-1 border rounded" />
+          </div>
+          <div className="flex gap-2">
+            <button onClick={add} disabled={disabled} className="px-3 py-1 bg-blue-600 text-white rounded disabled:opacity-40">Add</button>
+            <button onClick={multiply} disabled={disabled} className="px-3 py-1 bg-blue-600 text-white rounded disabled:opacity-40">Multiply</button>
+          </div>
+        </div>
+        <div className="p-4 border rounded-lg bg-gray-50">
+          <h3 className="font-semibold text-gray-700 mb-3">Fibonacci</h3>
+          <input value={n} onChange={(e: any) => setN(e.target.value)} className="w-24 px-2 py-1 border rounded mb-3" />
+          <div>
+            <button onClick={fib} disabled={disabled} className="px-3 py-1 bg-purple-600 text-white rounded disabled:opacity-40">Fibonacci(n)</button>
+          </div>
+        </div>
+      </div>
+      <div className="p-4 border rounded-lg bg-gray-50">
+        <h3 className="font-semibold text-gray-700 mb-3">Arrays (Int32)</h3>
+        <button onClick={processArr} disabled={disabled} className="px-3 py-1 bg-green-600 text-white rounded disabled:opacity-40">
+          Process array
+        </button>
+      </div>
+      {output && (
+        <pre className="p-4 bg-gray-900 text-green-400 rounded-lg overflow-auto text-sm">
+          {output}
+        </pre>
+      )}
+    </div>
+  );
+}

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

@@ -1,5 +1,12 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* Your custom styles can go here */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}

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

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

package/templates/fullstack-app/tsconfig.json

@@ -1,18 +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"]
-}
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "preserve",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["src", "server.ts", "build.mjs", "build-wasm.js"]
+}

package/templates/fullstack-app/api/hello.js

@@ -1,11 +0,0 @@
-export const get = (req, res) => {
-  res.json({
-    message: 'Hello from the API!',
-    time: new Date().toISOString(),
-    features: [
-      'Server-side rendering',
-      'API integration',
-      'No build step required'
-    ]
-  });
-};

package/templates/fullstack-app/api/hello.ts

@@ -1,18 +0,0 @@
-import { Request, Response } from 'express';
-
-export const get = (req: Request, res: Response) => {
-  res.json({
-    message: 'Hello from the API!',
-    timestamp: new Date().toISOString()
-  });
-};
-
-export const post = (req: Request, res: Response) => {
-  const { name = 'Guest' } = req.body;
-  
-  res.json({
-    message: `Hello, ${name}!`,
-    timestamp: new Date().toISOString(),
-    receivedData: req.body
-  });
-};

package/templates/fullstack-app/api/users/[id].ts

@@ -1,73 +0,0 @@
-import { Request, Response } from 'express';
-
-// Mock user database - same as in index.ts for simplicity
-const 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' }
-];
-
-export const get = (req: Request, res: Response) => {
-  const userId = parseInt(req.params.id);
-  
-  if (isNaN(userId)) {
-    return res.status(400).json({ error: 'Invalid user ID' });
-  }
-  
-  const user = users.find(u => u.id === userId);
-  
-  if (!user) {
-    return res.status(404).json({ error: 'User not found' });
-  }
-  
-  res.json(user);
-};
-
-export const put = (req: Request, res: Response) => {
-  const userId = parseInt(req.params.id);
-  
-  if (isNaN(userId)) {
-    return res.status(400).json({ error: 'Invalid user ID' });
-  }
-  
-  const userIndex = users.findIndex(u => u.id === userId);
-  
-  if (userIndex === -1) {
-    return res.status(404).json({ error: 'User not found' });
-  }
-  
-  const { name, email } = req.body;
-  
-  if (!name && !email) {
-    return res.status(400).json({ error: 'Name or email must be provided' });
-  }
-  
-  // Update the user
-  users[userIndex] = {
-    ...users[userIndex],
-    ...(name && { name }),
-    ...(email && { email })
-  };
-  
-  res.json(users[userIndex]);
-};
-
-export const delete_ = (req: Request, res: Response) => {
-  const userId = parseInt(req.params.id);
-  
-  if (isNaN(userId)) {
-    return res.status(400).json({ error: 'Invalid user ID' });
-  }
-  
-  const userIndex = users.findIndex(u => u.id === userId);
-  
-  if (userIndex === -1) {
-    return res.status(404).json({ error: 'User not found' });
-  }
-  
-  // Remove the user
-  const deletedUser = users[userIndex];
-  users.splice(userIndex, 1);
-  
-  res.json({ success: true, deletedUser });
-};

package/templates/fullstack-app/api/users/index.ts

@@ -1,32 +0,0 @@
-import { Request, Response } from 'express';
-
-// Mock user database
-const 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' }
-];
-
-export const get = (req: Request, res: Response) => {
-  // Return users without sensitive information
-  const safeUsers = users.map(({ id, name, email }) => ({ id, name, email }));
-  res.json(safeUsers);
-};
-
-export const post = (req: Request, res: Response) => {
-  const { name, email } = req.body;
-  
-  if (!name || !email) {
-    return res.status(400).json({ error: 'Name and email are required' });
-  }
-  
-  // In a real app, validate data and save to database
-  const newUser = {
-    id: users.length + 1,
-    name,
-    email
-  };
-  
-  users.push(newUser);
-  res.status(201).json(newUser);
-};