frontend-hamroun 1.2.74 → 1.2.77

package/templates/complete-app/public/styles.css

@@ -0,0 +1,345 @@
+/* Base styles */
+:root {
+  --primary-color: #4a89dc;
+  --secondary-color: #5d9cec;
+  --accent-color: #967adc;
+  --success-color: #8cc152;
+  --error-color: #da4453;
+  --background-color: #f5f7fa;
+  --text-color: #434a54;
+  --border-color: #e6e9ed;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  line-height: 1.5;
+  color: var(--text-color);
+  background-color: var(--background-color);
+}
+
+a {
+  color: var(--primary-color);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+button {
+  cursor: pointer;
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  font-size: 1rem;
+  transition: background-color 0.2s;
+}
+
+button:hover {
+  background-color: var(--secondary-color);
+}
+
+input, textarea {
+  padding: 0.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: 1rem;
+  width: 100%;
+}
+
+/* Layout */
+.app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.content {
+  flex: 1;
+  padding: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+/* Header */
+.app-header {
+  background-color: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo h1 {
+  font-size: 1.5rem;
+  color: var(--primary-color);
+}
+
+.main-nav ul {
+  display: flex;
+  list-style: none;
+  gap: 2rem;
+}
+
+.main-nav a {
+  color: var(--text-color);
+  font-weight: 500;
+}
+
+.main-nav a:hover {
+  color: var(--primary-color);
+}
+
+/* Footer */
+.app-footer {
+  background-color: white;
+  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
+  padding: 1.5rem 2rem;
+  margin-top: 2rem;
+}
+
+.footer-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.footer-links {
+  display: flex;
+  gap: 1rem;
+}
+
+/* Home page */
+.hero {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.hero h1 {
+  font-size: 2.5rem;
+  margin-bottom: 0.5rem;
+  color: var(--primary-color);
+}
+
+.subtitle {
+  font-size: 1.2rem;
+  color: #666;
+  margin-bottom: 2rem;
+}
+
+.features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+  margin-top: 3rem;
+}
+
+.feature {
+  background-color: white;
+  border-radius: 8px;
+  padding: 1.5rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.feature:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.feature h3 {
+  margin-bottom: 1rem;
+  color: var(--primary-color);
+}
+
+.counter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.counter button {
+  width: 40px;
+  height: 40px;
+  font-size: 1.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.counter span {
+  font-size: 1.5rem;
+  min-width: 40px;
+  text-align: center;
+}
+
+.api-button {
+  margin-top: 1rem;
+  width: 100%;
+}
+
+/* About page */
+.about-page {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.about-page h1 {
+  margin-bottom: 2rem;
+  color: var(--primary-color);
+}
+
+.about-section {
+  margin-bottom: 2rem;
+}
+
+.about-section h2 {
+  margin-bottom: 1rem;
+  color: var(--secondary-color);
+  font-size: 1.5rem;
+}
+
+.about-section ul {
+  margin-left: 1.5rem;
+  margin-top: 0.5rem;
+}
+
+.about-section li {
+  margin-bottom: 0.5rem;
+}
+
+/* WASM Demo page */
+.wasm-demo-page {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.wasm-demo-page h1 {
+  margin-bottom: 2rem;
+  color: var(--primary-color);
+}
+
+.wasm-status {
+  padding: 1rem;
+  border-radius: 4px;
+  margin-bottom: 2rem;
+}
+
+.wasm-status.error {
+  background-color: #ffeeee;
+  border: 1px solid var(--error-color);
+}
+
+.wasm-status.success {
+  background-color: #eeffee;
+  border: 1px solid var(--success-color);
+}
+
+.demo-section {
+  background-color: white;
+  border-radius: 8px;
+  padding: 2rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.demo-section h2 {
+  margin-bottom: 1rem;
+  color: var(--secondary-color);
+  font-size: 1.5rem;
+}
+
+.calculator {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  margin-bottom: 2rem;
+  flex-wrap: wrap;
+}
+
+.calculator input {
+  width: 80px;
+}
+
+.result {
+  background-color: #f7f7f7;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  margin-top: 1rem;
+}
+
+.json-parser {
+  margin-bottom: 2rem;
+}
+
+.json-parser textarea {
+  width: 100%;
+  margin-bottom: 1rem;
+  font-family: monospace;
+}
+
+.json-result {
+  background-color: #f7f7f7;
+  padding: 1rem;
+  border-radius: 4px;
+  margin-top: 1rem;
+  font-family: monospace;
+  overflow-x: auto;
+}
+
+.function-list {
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 0.5rem;
+}
+
+.function-list li {
+  background-color: #f7f7f7;
+  padding: 0.5rem;
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .app-header {
+    flex-direction: column;
+    gap: 1rem;
+    text-align: center;
+  }
+
+  .main-nav ul {
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+
+  .footer-content {
+    flex-direction: column;
+    gap: 1rem;
+    text-align: center;
+  }
+
+  .footer-links {
+    justify-content: center;
+  }
+
+  .content {
+    padding: 1rem;
+  }
+}

package/templates/complete-app/src/api/index.js

@@ -0,0 +1,31 @@
+import express from 'express';
+
+// Create API router
+const ApiRouter = express.Router();
+
+// Random data endpoint
+ApiRouter.get('/random', (req, res) => {
+  const value = Math.floor(Math.random() * 1000);
+  res.json({ value });
+});
+
+// Echo endpoint
+ApiRouter.post('/echo', (req, res) => {
+  res.json({
+    method: 'POST',
+    body: req.body,
+    timestamp: new Date().toISOString()
+  });
+});
+
+// Status endpoint
+ApiRouter.get('/status', (req, res) => {
+  res.json({
+    status: 'ok',
+    timestamp: new Date().toISOString(),
+    environment: process.env.NODE_ENV || 'development',
+    uptime: process.uptime()
+  });
+});
+
+export { ApiRouter };

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

@@ -0,0 +1,93 @@
+// Support both ESM and CommonJS importing styles
+const frontendHamroun = 
+  typeof require !== 'undefined' 
+    ? require('frontend-hamroun') 
+    : await import('frontend-hamroun');
+
+// Destructure the imports from either ESM or CJS modules
+const { 
+  hydrate, 
+  render, 
+  jsx, 
+  useState, 
+  useEffect, 
+  loadGoWasm,
+  createContext,
+  useContext
+} = frontendHamroun;
+
+// Import components
+import App from './components/App.js';
+
+// Initialize the app
+async function initApp() {
+  console.log('Initializing client-side app...');
+  
+  // Check if we need to hydrate (SSR) or do a fresh render
+  const rootElement = document.getElementById('app');
+  const shouldHydrate = rootElement.hasAttribute('data-ssr');
+  
+  try {
+    // Pre-load any WASM modules if needed
+    let wasmModule = null;
+    try {
+      wasmModule = await loadGoWasm('/wasm/example.wasm', {
+        debug: false,
+        goWasmPath: '/wasm/wasm_exec.js'
+      });
+      console.log('WASM module loaded successfully');
+    } catch (error) {
+      console.warn('WASM module loading skipped:', error.message);
+    }
+    
+    // Create initial state from SSR data if available
+    const initialDataElement = document.getElementById('__INITIAL_DATA__');
+    const initialData = initialDataElement 
+      ? JSON.parse(initialDataElement.textContent || '{}') 
+      : {};
+    
+    // Setup global context values
+    const appContext = {
+      wasm: wasmModule,
+      initialData,
+      // Add any other global values
+    };
+    
+    // Render or hydrate the app
+    if (shouldHydrate) {
+      console.log('Hydrating app from server-rendered HTML');
+      await hydrate(<App context={appContext} />, rootElement);
+    } else {
+      console.log('Rendering app from scratch (client-only)');
+      await render(<App context={appContext} />, rootElement);
+    }
+    
+    console.log('App initialization complete');
+  } catch (error) {
+    console.error('Failed to initialize app:', error);
+    
+    // Fallback to basic error display
+    rootElement.innerHTML = `
+      <div style="color: red; padding: 20px; border: 1px solid red; margin: 20px;">
+        <h2>Error Initializing App</h2>
+        <pre>${error.message}\n${error.stack}</pre>
+      </div>
+    `;
+  }
+}
+
+// Start the app when the DOM is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initApp);
+} else {
+  initApp();
+}
+
+// Export key utilities for components
+export { 
+  jsx, 
+  useState, 
+  useEffect, 
+  createContext,
+  useContext
+};

package/templates/complete-app/src/components/App.js

@@ -0,0 +1,66 @@
+import { jsx, useState, useEffect, createContext, useContext } from '../client.js';
+import Header from './Header.js';
+import Footer from './Footer.js';
+import Home from '../pages/Home.js';
+import About from '../pages/About.js';
+import WasmDemo from '../pages/WasmDemo.js';
+
+// Create context for global state
+export const AppContext = createContext({});
+
+// Simple router implementation
+function useRouter() {
+  const { initialData } = useContext(AppContext);
+  const [path, setPath] = useState(initialData?.path || '/');
+  
+  useEffect(() => {
+    // Update path when URL changes
+    const handlePopState = () => {
+      setPath(window.location.pathname);
+    };
+    
+    // Listen for navigation events
+    window.addEventListener('popstate', handlePopState);
+    
+    // Cleanup
+    return () => {
+      window.removeEventListener('popstate', handlePopState);
+    };
+  }, []);
+  
+  // Navigation function
+  const navigate = (to) => {
+    window.history.pushState(null, '', to);
+    setPath(to);
+  };
+  
+  return { path, navigate };
+}
+
+// Define available routes
+const routes = {
+  '/': Home,
+  '/about': About,
+  '/wasm': WasmDemo
+};
+
+// Main App component
+export default function App({ context }) {
+  // Get current path from router
+  const { path, navigate } = useRouter();
+  
+  // Find the component for the current route
+  const PageComponent = routes[path] || routes['/'];
+  
+  return (
+    <AppContext.Provider value={{ ...context, navigate }}>
+      <div className="app">
+        <Header />
+        <main className="content">
+          <PageComponent />
+        </main>
+        <Footer />
+      </div>
+    </AppContext.Provider>
+  );
+}

package/templates/complete-app/src/components/Footer.js

@@ -0,0 +1,19 @@
+import { jsx } from '../client.js';
+
+export default function Footer() {
+  return (
+    <footer className="app-footer">
+      <div className="footer-content">
+        <p>© {new Date().getFullYear()} Baraqex Framework</p>
+        <div className="footer-links">
+          <a href="https://github.com/hamroun/frontend-hamroun" target="_blank" rel="noopener">
+            GitHub
+          </a>
+          <a href="https://pfe-documantation-mohamedx2s-projects.vercel.app/" target="_blank" rel="noopener">
+            Documentation
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/templates/complete-app/src/components/Header.js

@@ -0,0 +1,38 @@
+import { jsx } from '../client.js';
+import { AppContext } from './App.js';
+
+export default function Header() {
+  const { navigate } = AppContext;
+  
+  const handleNavClick = (e, path) => {
+    e.preventDefault();
+    navigate(path);
+  };
+  
+  return (
+    <header className="app-header">
+      <div className="logo">
+        <h1>Baraqex Complete App</h1>
+      </div>
+      <nav className="main-nav">
+        <ul>
+          <li>
+            <a href="/" onClick={(e) => handleNavClick(e, '/')}>
+              Home
+            </a>
+          </li>
+          <li>
+            <a href="/about" onClick={(e) => handleNavClick(e, '/about')}>
+              About
+            </a>
+          </li>
+          <li>
+            <a href="/wasm" onClick={(e) => handleNavClick(e, '/wasm')}>
+              WASM Demo
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  );
+}

package/templates/complete-app/src/pages/About.js

@@ -0,0 +1,59 @@
+import { jsx, useEffect } from '../client.js';
+
+export default function About() {
+  useEffect(() => {
+    document.title = 'About - Baraqex Complete App';
+  }, []);
+  
+  return (
+    <div className="about-page">
+      <h1>About Baraqex Framework</h1>
+      
+      <section className="about-section">
+        <h2>Framework Architecture</h2>
+        <p>
+          Baraqex is a lightweight full-stack JavaScript framework designed for modern web applications.
+          It features a virtual DOM implementation, hooks-based state management, server-side rendering,
+          and WebAssembly integration.
+        </p>
+      </section>
+      
+      <section className="about-section">
+        <h2>Key Features</h2>
+        <ul>
+          <li>
+            <strong>Virtual DOM:</strong> Efficient DOM updates through a lightweight virtual DOM implementation.
+          </li>
+          <li>
+            <strong>Hooks:</strong> React-like hooks including useState, useEffect, useContext, and more.
+          </li>
+          <li>
+            <strong>Server-Side Rendering:</strong> Improve SEO and initial load performance with SSR.
+          </li>
+          <li>
+            <strong>WebAssembly Integration:</strong> Run high-performance Go code in the browser.
+          </li>
+          <li>
+            <strong>API Routing:</strong> Express-based API with file-based routing.
+          </li>
+          <li>
+            <strong>Development Tools:</strong> CLI tools for project scaffolding and component generation.
+          </li>
+        </ul>
+      </section>
+      
+      <section className="about-section">
+        <h2>Use Cases</h2>
+        <p>
+          Baraqex is ideal for:
+        </p>
+        <ul>
+          <li>Web applications requiring high performance</li>
+          <li>Projects that need SEO optimization</li>
+          <li>Applications with computation-heavy features</li>
+          <li>Full-stack JavaScript applications</li>
+        </ul>
+      </section>
+    </div>
+  );
+}

package/templates/complete-app/src/pages/Home.js

@@ -0,0 +1,54 @@
+import { jsx, useState, useEffect, useContext } from '../client.js';
+import { AppContext } from '../components/App.js';
+
+export default function Home() {
+  const { initialData } = useContext(AppContext);
+  const [count, setCount] = useState(0);
+  
+  useEffect(() => {
+    document.title = 'Home - Baraqex Complete App';
+  }, []);
+  
+  return (
+    <div className="home-page">
+      <section className="hero">
+        <h1>Welcome to Baraqex Framework</h1>
+        <p className="subtitle">A complete JavaScript framework for modern web applications</p>
+        
+        <div className="features">
+          <div className="feature">
+            <h3>Server-Side Rendering</h3>
+            <p>Initial page was rendered on the server at: {initialData?.timestamp}</p>
+          </div>
+          
+          <div className="feature">
+            <h3>State Management</h3>
+            <div className="counter">
+              <button onClick={() => setCount(c => c - 1)}>-</button>
+              <span>{count}</span>
+              <button onClick={() => setCount(c => c + 1)}>+</button>
+            </div>
+          </div>
+          
+          <div className="feature">
+            <h3>API Integration</h3>
+            <button className="api-button" onClick={fetchRandomData}>
+              Fetch Random Data
+            </button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+  
+  async function fetchRandomData() {
+    try {
+      const response = await fetch('/api/random');
+      const data = await response.json();
+      alert(`Random value: ${data.value}`);
+    } catch (error) {
+      console.error('Error fetching data:', error);
+      alert('Failed to fetch data. See console for details.');
+    }
+  }
+}