frontend-hamroun 1.2.82 → 1.2.84

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

@@ -1,26 +1,404 @@
-import { useState } from 'frontend-hamroun';
+import { 
+  jsx, 
+  useState, 
+  useEffect, 
+  useMemo, 
+  useErrorBoundary,
+  useForm
+} from 'frontend-hamroun';
 
-export function App() {
-  // Initialize with a default state that works on both server and client
-  const [count, setCount] = useState(0);
-  
+// Todo item interface
+interface Todo {
+  id: number;
+  text: string;
+  completed: boolean;
+  priority: 'high' | 'medium' | 'low';
+}
+
+// Component prop interfaces
+interface TodoItemProps {
+  todo: Todo;
+  onToggle: (id: number) => void;
+  onDelete: (id: number) => void;
+}
+
+interface ThemeToggleButtonProps {
+  theme: string;
+  onToggle: () => void;
+}
+
+interface AppFooterProps {
+  theme: string;
+}
+
+// Todo Item Component
+function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) {
   return (
-    <div>
-      <h1>Server-Side Rendered App</h1>
-      <div>
+    <div className={`todo-item ${todo.completed ? 'completed' : ''}`}>
+      <input
+        type="checkbox"
+        checked={todo.completed}
+        onChange={() => onToggle(todo.id)}
+        className="todo-checkbox"
+      />
+      <span className="todo-text">{todo.text}</span>
+      <span className={`todo-priority priority-${todo.priority}`}>
+        {todo.priority === 'high' && '🔴'}
+        {todo.priority === 'medium' && '🟡'}
+        {todo.priority === 'low' && '🟢'}
+        {todo.priority}
+      </span>
+      <div className="todo-actions">
         <button 
-          onClick={() => setCount(count - 1)}
-          data-action="decrement"
-        >-</button>
-        <span style={{ margin: '0 10px' }}>{count}</span>
-        <button 
-          onClick={() => setCount(count + 1)}
-          data-action="increment"
-        >+</button>
+          onClick={() => onDelete(todo.id)}
+          className="btn btn-sm btn-danger"
+          title="Delete todo"
+        >
+          🗑️
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// Theme Toggle Button Component
+function ThemeToggleButton({ theme, onToggle }: ThemeToggleButtonProps) {
+  return (
+    <button 
+      onClick={onToggle} 
+      className="btn btn-secondary theme-toggle"
+      title="Toggle theme"
+    >
+      {theme === 'light' ? '🌙' : '☀️'}
+    </button>
+  );
+}
+
+// App Footer Component
+function AppFooter({ theme }: AppFooterProps) {
+  return (
+    <footer className="app-footer">
+      <div className="container">
+        <p>Built with Frontend Hamroun • Hooks: useState, useEffect, useMemo, useErrorBoundary, useForm</p>
+        <p>Theme: <strong>{theme}</strong> • Environment: <strong>Client</strong></p>
+      </div>
+    </footer>
+  );
+}
+
+export function App() {
+  // State hooks with proper typing
+  const [todos, setTodos] = useState<Todo[]>([
+    { id: 1, text: 'Learn Frontend Hamroun hooks', completed: false, priority: 'high' },
+    { id: 2, text: 'Build a todo app', completed: false, priority: 'medium' },
+    { id: 3, text: 'Master client-side concepts', completed: true, priority: 'low' }
+  ]);
+  const [theme, setTheme] = useState<string>('light');
+  const [taskFilter, setTaskFilter] = useState<string>('all');
+  
+  // Error boundary hook
+  const [error, resetError] = useErrorBoundary();
+  
+  // Form hook for adding new todos
+  const addTodoForm = useForm({
+    initialValues: {
+      text: '',
+      priority: 'medium' as 'high' | 'medium' | 'low'
+    },
+    validate: (values) => {
+      const errors: Record<string, string> = {};
+      if (!values.text.trim()) {
+        errors.text = 'Todo text is required';
+      }
+      return errors;
+    },
+    onSubmit: (values) => {
+      const newTodo: Todo = {
+        id: Date.now(),
+        text: values.text.trim(),
+        completed: false,
+        priority: values.priority
+      };
+      setTodos(prev => [...prev, newTodo]);
+      addTodoForm.resetForm();
+    }
+  });
+
+  // Mount effect
+  useEffect(() => {
+    console.log('Todo App mounted');
+    
+    // Load saved todos from localStorage
+    const savedTodos = localStorage.getItem('todos');
+    const savedTheme = localStorage.getItem('theme');
+    
+    if (savedTodos) {
+      try {
+        setTodos(JSON.parse(savedTodos));
+      } catch (e) {
+        console.error('Failed to load saved todos');
+      }
+    }
+    
+    if (savedTheme) {
+      setTheme(savedTheme);
+    }
+    
+    return () => {
+      console.log('Todo App unmounting');
+    };
+  }, []);
+
+  // Theme effect
+  useEffect(() => {
+    document.body.className = `theme-${theme}`;
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  // Save todos effect
+  useEffect(() => {
+    if (todos.length === 0) return;
+    localStorage.setItem('todos', JSON.stringify(todos));
+  }, [todos]);
+
+  // Memoized filtered todos
+  const filteredTodos = useMemo(() => {
+    console.log('Filtering todos - memoized computation');
+    return todos.filter(todo => {
+      if (taskFilter === 'completed') return todo.completed;
+      if (taskFilter === 'active') return !todo.completed;
+      if (taskFilter === 'high') return todo.priority === 'high';
+      if (taskFilter === 'medium') return todo.priority === 'medium';
+      if (taskFilter === 'low') return todo.priority === 'low';
+      return true;
+    });
+  }, [todos, taskFilter]);
+
+  // Memoized todo stats
+  const todoStats = useMemo(() => {
+    const total = todos.length;
+    const completed = todos.filter(t => t.completed).length;
+    const active = total - completed;
+    const highPriority = todos.filter(t => t.priority === 'high' && !t.completed).length;
+    
+    return { total, completed, active, highPriority };
+  }, [todos]);
+
+  // Todo action handlers
+  const handleToggleTodo = (id: number) => {
+    console.log('Toggling todo:', id);
+    setTodos(prev => prev.map(todo => 
+      todo.id === id ? { ...todo, completed: !todo.completed } : todo
+    ));
+  };
+
+  const handleDeleteTodo = (id: number) => {
+    console.log('Deleting todo:', id);
+    setTodos(prev => prev.filter(todo => todo.id !== id));
+  };
+
+  // Event handlers
+  const clearCompleted = () => {
+    setTodos(prev => prev.filter(todo => !todo.completed));
+  };
+
+  const markAllComplete = () => {
+    setTodos(prev => prev.map(todo => ({ ...todo, completed: true })));
+  };
+
+  const toggleTheme = () => {
+    setTheme(prev => prev === 'light' ? 'dark' : 'light');
+  };
+
+  const simulateError = () => {
+    throw new Error('Simulated error for testing error boundary');
+  };
+
+  if (error) {
+    return (
+      <div className="error-container">
+        <h2>Something went wrong!</h2>
+        <p>{(error as Error).message}</p>
+        <button onClick={resetError} className="btn btn-primary">
+          Try Again
+        </button>
       </div>
-      <script dangerouslySetInnerHTML={{
-        __html: `window.__INITIAL_STATE__ = ${JSON.stringify({ count: 0 })};`
-      }} />
+    );
+  }
+
+  return (
+    <div className={`app theme-${theme}`}>
+      
+      {/* Header */}
+      <header className="app-header">
+        <div className="container">
+          <h1 className="app-title">
+            📝 Todo App
+            <span className="subtitle">Built with Frontend Hamroun</span>
+          </h1>
+          
+          <div className="header-controls">
+            <ThemeToggleButton theme={theme} onToggle={toggleTheme} />
+            <div className="stats">
+              <span className="stat">
+                Total: <strong>{todoStats.total}</strong>
+              </span>
+              <span className="stat">
+                Active: <strong>{todoStats.active}</strong>
+              </span>
+              <span className="stat">
+                Done: <strong>{todoStats.completed}</strong>
+              </span>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main className="main-content">
+        <div className="container">
+          
+          {/* Add Todo Section */}
+          <section className="card add-todo-section">
+            <h2>➕ Add New Todo</h2>
+            
+            <form onSubmit={addTodoForm.handleSubmit} className="add-todo-form">
+              <input
+                type="text"
+                name="text"
+                value={addTodoForm.values.text}
+                onChange={addTodoForm.handleChange}
+                onBlur={addTodoForm.handleBlur}
+                placeholder="What needs to be done?"
+                className={`input todo-input ${addTodoForm.errors.text && addTodoForm.touched.text ? 'error' : ''}`}
+              />
+              
+              <select 
+                name="priority"
+                value={addTodoForm.values.priority} 
+                onChange={addTodoForm.handleChange}
+                className="select priority-select"
+              >
+                <option value="low">🟢 Low Priority</option>
+                <option value="medium">🟡 Medium Priority</option>
+                <option value="high">🔴 High Priority</option>
+              </select>
+              
+              <button 
+                type="submit"
+                className={`btn btn-primary add-btn ${addTodoForm.isSubmitting ? 'loading' : ''}`}
+                disabled={addTodoForm.isSubmitting || !addTodoForm.values.text.trim()}
+              >
+                {addTodoForm.isSubmitting ? '⏳ Adding...' : '➕ Add Todo'}
+              </button>
+            </form>
+            
+            {addTodoForm.errors.text && addTodoForm.touched.text && (
+              <div className="error-message">{addTodoForm.errors.text}</div>
+            )}
+          </section>
+
+          {/* Filters Section */}
+          <section className="card filters-section">
+            <h2>🔍 Filter Todos</h2>
+            
+            <div className="filters">
+              {(['all', 'active', 'completed', 'high', 'medium', 'low'] as const).map(filterType => (
+                <button
+                  key={filterType}
+                  onClick={() => setTaskFilter(filterType)}
+                  className={`btn btn-sm filter-btn ${taskFilter === filterType ? 'btn-primary' : 'btn-outline'}`}
+                >
+                  {filterType === 'all' && '📋 All'}
+                  {filterType === 'active' && '⏳ Active'}
+                  {filterType === 'completed' && '✅ Completed'}
+                  {filterType === 'high' && '🔴 High Priority'}
+                  {filterType === 'medium' && '🟡 Medium Priority'}
+                  {filterType === 'low' && '🟢 Low Priority'}
+                </button>
+              ))}
+            </div>
+            
+            <div className="bulk-actions">
+              <button 
+                onClick={markAllComplete}
+                className="btn btn-success btn-sm"
+                disabled={todoStats.active === 0}
+              >
+                ✅ Mark All Complete
+              </button>
+              <button 
+                onClick={clearCompleted}
+                className="btn btn-warning btn-sm"
+                disabled={todoStats.completed === 0}
+              >
+                🗑️ Clear Completed
+              </button>
+            </div>
+          </section>
+
+          {/* Todos List Section */}
+          <section className="card todos-section">
+            <div className="section-header">
+              <h2>📋 Todo List</h2>
+              <div className="filter-info">
+                Showing <strong>{filteredTodos.length}</strong> of <strong>{todoStats.total}</strong> todos
+                {taskFilter !== 'all' && <span className="filter-badge">{taskFilter}</span>}
+              </div>
+            </div>
+
+            <div className="todos-list">
+              {filteredTodos.length > 0 ? (
+                filteredTodos.map(todo => (
+                  <TodoItem 
+                    key={todo.id} 
+                    todo={todo} 
+                    onToggle={handleToggleTodo}
+                    onDelete={handleDeleteTodo}
+                  />
+                ))
+              ) : (
+                <div className="empty-state">
+                  <p>
+                    {taskFilter === 'all' ? '🎉 No todos yet. Add one above!' : 
+                     taskFilter === 'completed' ? '📝 No completed todos yet.' :
+                     taskFilter === 'active' ? '🎯 No active todos. Great job!' :
+                     `🔍 No ${taskFilter} priority todos found.`}
+                  </p>
+                </div>
+              )}
+            </div>
+          </section>
+
+          {/* Actions Section */}
+          <section className="card actions-section">
+            <h2>⚙️ Actions</h2>
+            <div className="action-buttons">
+              <button onClick={simulateError} className="btn btn-danger">
+                💥 Test Error Boundary
+              </button>
+            </div>
+          </section>
+
+        </div>
+      </main>
+
+      {/* Footer */}
+      <AppFooter theme={theme} />
+
+      {/* Styles */}
+      <style>{`
+        /* ...existing styles... */
+        .error-message {
+          color: #e74c3c;
+          font-size: 0.875rem;
+          margin-top: 0.5rem;
+        }
+        
+        .input.error {
+          border-color: #e74c3c;
+        }
+      `}</style>
     </div>
   );
 }

package/templates/ssr-template/dist/client/assets/main-D-VH3xOb.js

@@ -0,0 +1 @@
+import{useState as l,useEffect as g,jsx as e,hydrate as f,render as y}from"frontend-hamroun";(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const t of document.querySelectorAll('link[rel="modulepreload"]'))o(t);new MutationObserver(t=>{for(const r of t)if(r.type==="childList")for(const i of r.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&o(i)}).observe(document,{childList:!0,subtree:!0});function s(t){const r={};return t.integrity&&(r.integrity=t.integrity),t.referrerPolicy&&(r.referrerPolicy=t.referrerPolicy),t.crossOrigin==="use-credentials"?r.credentials="include":t.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function o(t){if(t.ep)return;t.ep=!0;const r=s(t);fetch(t.href,r)}})();function c({path:a="/",dev:n=!1,timestamp:s}){const[o,t]=l(0),[r,i]=l(new Date().toLocaleTimeString());return g(()=>{const u=setInterval(()=>{i(new Date().toLocaleTimeString())},1e3);return()=>clearInterval(u)},[]),e("div",{className:"container"},[e("header",{style:{background:"linear-gradient(135deg, #667eea 0%, #764ba2 100%)",color:"white",padding:"2rem",borderRadius:"12px",marginBottom:"2rem",textAlign:"center"}},[e("h1",{},"🚀 Frontend Hamroun SSR"),e("p",{},"Server-Side Rendering with Client Hydration"),n&&e("div",{style:{background:"rgba(255, 255, 255, 0.2)",padding:"0.5rem 1rem",borderRadius:"8px",fontSize:"0.9rem",marginTop:"1rem"}},"🔥 Development Mode - Hot Reload Active")]),e("main",{},[e("section",{style:{background:"#f8f9fa",padding:"2rem",borderRadius:"8px",marginBottom:"2rem"}},[e("h2",{},"📍 Route Information"),e("p",{},[e("strong",{},"Current path: "),a]),e("p",{},[e("strong",{},"Render time: "),s||"Client-side"]),e("p",{},[e("strong",{},"Current time: "),r])]),e("section",{style:{background:"#e3f2fd",padding:"2rem",borderRadius:"8px",marginBottom:"2rem"}},[e("h2",{},"🎛️ Interactive Counter"),e("p",{},"This demonstrates client-side hydration:"),e("div",{style:{display:"flex",alignItems:"center",gap:"1rem",marginTop:"1rem"}},[e("button",{onClick:()=>t(o-1),style:{background:"#f44336",color:"white",border:"none",padding:"0.5rem 1rem",borderRadius:"4px",cursor:"pointer"}},"-"),e("span",{style:{fontSize:"1.5rem",fontWeight:"bold",minWidth:"60px",textAlign:"center"}},o.toString()),e("button",{onClick:()=>t(o+1),style:{background:"#4caf50",color:"white",border:"none",padding:"0.5rem 1rem",borderRadius:"4px",cursor:"pointer"}},"+")])]),e("section",{style:{background:"#fff3e0",padding:"2rem",borderRadius:"8px"}},[e("h2",{},"✨ Framework Features"),e("ul",{style:{lineHeight:"1.8"}},[e("li",{},"🔄 Server-Side Rendering (SSR)"),e("li",{},"💧 Client-Side Hydration"),e("li",{},"🔥 Hot Reload in Development"),e("li",{},"🎣 React-like Hooks (useState, useEffect)"),e("li",{},"⚡ Fast Development Server"),e("li",{},"📦 Optimized Production Builds"),e("li",{},"🎨 Component-Based Architecture"),e("li",{},"🔧 TypeScript Support")])])]),e("footer",{style:{textAlign:"center",padding:"2rem",marginTop:"2rem",borderTop:"1px solid #eee"}},[e("p",{},"Built with ❤️ using Frontend Hamroun"),e("p",{style:{fontSize:"0.9rem",color:"#666"}},["Edit ",e("code",{},"src/App.tsx")," and save to see changes"])])])}const p=window.__INITIAL_DATA__||{path:window.location.pathname,dev:!1,timestamp:new Date().toISOString()},d=document.getElementById("app");if(!d)throw new Error("Root element not found");function m(){try{d.hasChildNodes()?(console.log("🔄 Hydrating SSR content"),f(e(c,p),d)):(console.log("🚀 Rendering app from scratch"),y(e(c,p),d)),console.log("✅ App started successfully")}catch(a){console.error("❌ Error starting app:",a),d.innerHTML='<div style="color: red; padding: 20px;">Error loading application</div>'}}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m):m();

package/templates/ssr-template/dist/client/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Frontend Hamroun SSR App</title>
+  <style>
+    body {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    }
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+  </style>
+  <script type="module" crossorigin src="/assets/main-D-VH3xOb.js"></script>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>