frontend-hamroun 1.2.80 → 1.2.83

package/templates/ssr-template/dist/server.js

@@ -0,0 +1,739 @@
+// jsx-shim.js
+import { jsx, Fragment } from "frontend-hamroun";
+
+// src/server.ts
+import express from "express";
+import path from "path";
+import { fileURLToPath } from "url";
+import { renderToString, jsx as jsx3 } from "frontend-hamroun";
+
+// src/App.tsx
+import {
+  jsx as jsx2,
+  useState,
+  useEffect,
+  useMemo,
+  useErrorBoundary
+} from "frontend-hamroun";
+function TodoItem({ todo, onToggle, onDelete }) {
+  return /* @__PURE__ */ jsx2("div", { className: `todo-item ${todo.completed ? "completed" : ""}` }, /* @__PURE__ */ jsx2(
+    "input",
+    {
+      type: "checkbox",
+      checked: todo.completed,
+      onChange: () => onToggle(todo.id),
+      className: "todo-checkbox"
+    }
+  ), /* @__PURE__ */ jsx2("span", { className: "todo-text" }, todo.text), /* @__PURE__ */ jsx2("span", { className: `todo-priority priority-${todo.priority}` }, todo.priority === "high" && "\u{1F534}", todo.priority === "medium" && "\u{1F7E1}", todo.priority === "low" && "\u{1F7E2}", todo.priority), /* @__PURE__ */ jsx2("div", { className: "todo-actions" }, /* @__PURE__ */ jsx2(
+    "button",
+    {
+      onClick: () => onDelete(todo.id),
+      className: "btn btn-sm btn-danger",
+      title: "Delete todo"
+    },
+    "\u{1F5D1}\uFE0F"
+  )));
+}
+function ThemeToggleButton({ theme, onToggle }) {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      onClick: onToggle,
+      className: "btn btn-secondary theme-toggle",
+      title: "Toggle theme"
+    },
+    theme === "light" ? "\u{1F319}" : "\u2600\uFE0F"
+  );
+}
+function AppFooter({ theme, isBrowser }) {
+  return /* @__PURE__ */ jsx2("footer", { className: "app-footer" }, /* @__PURE__ */ jsx2("div", { className: "container" }, /* @__PURE__ */ jsx2("p", null, "Built with Frontend Hamroun \u2022 Hooks: useState, useEffect, useMemo, useErrorBoundary"), /* @__PURE__ */ jsx2("p", null, "Theme: ", /* @__PURE__ */ jsx2("strong", null, theme), " \u2022 Environment: ", /* @__PURE__ */ jsx2("strong", null, isBrowser ? "Client" : "Server"))));
+}
+function App() {
+  const [todos, setTodos] = useState([
+    { 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 SSR concepts", completed: true, priority: "low" }
+  ]);
+  const [newTask, setNewTask] = useState("");
+  const [taskFilter, setTaskFilter] = useState("all");
+  const [taskPriority, setTaskPriority] = useState("medium");
+  const [theme, setTheme] = useState("light");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, resetError] = useErrorBoundary();
+  const isBrowser = typeof window !== "undefined";
+  useEffect(() => {
+    if (!isBrowser)
+      return;
+    console.log("Todo App mounted");
+    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");
+    };
+  }, []);
+  useEffect(() => {
+    if (!isBrowser)
+      return;
+    document.body.className = `theme-${theme}`;
+    document.documentElement.setAttribute("data-theme", theme);
+    localStorage.setItem("theme", theme);
+  }, [theme, isBrowser]);
+  useEffect(() => {
+    if (!isBrowser || todos.length === 0)
+      return;
+    localStorage.setItem("todos", JSON.stringify(todos));
+  }, [todos, isBrowser]);
+  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]);
+  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]);
+  const handleToggleTodo = (id) => {
+    console.log("Toggling todo:", id);
+    setTodos((prev) => prev.map(
+      (todo) => todo.id === id ? { ...todo, completed: !todo.completed } : todo
+    ));
+  };
+  const handleDeleteTodo = (id) => {
+    console.log("Deleting todo:", id);
+    setTodos((prev) => prev.filter((todo) => todo.id !== id));
+  };
+  const handleAddTodo = (text, priority) => {
+    if (!text || !text.trim())
+      return;
+    const newTodo = {
+      id: Date.now(),
+      text: text.trim(),
+      completed: false,
+      priority: priority || "medium"
+    };
+    setTodos((prev) => [...prev, newTodo]);
+  };
+  const addTask = () => {
+    if (newTask.trim()) {
+      setIsLoading(true);
+      setTimeout(() => {
+        handleAddTodo(newTask, taskPriority);
+        setNewTask("");
+        setIsLoading(false);
+      }, 300);
+    }
+  };
+  const handleKeyPress = (e) => {
+    if (e.key === "Enter") {
+      addTask();
+    }
+  };
+  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 /* @__PURE__ */ jsx2("div", { className: "error-container" }, /* @__PURE__ */ jsx2("h2", null, "Something went wrong!"), /* @__PURE__ */ jsx2("p", null, error.message), /* @__PURE__ */ jsx2("button", { onClick: resetError, className: "btn btn-primary" }, "Try Again"));
+  }
+  return /* @__PURE__ */ jsx2("div", { className: `app theme-${theme}` }, /* @__PURE__ */ jsx2("header", { className: "app-header" }, /* @__PURE__ */ jsx2("div", { className: "container" }, /* @__PURE__ */ jsx2("h1", { className: "app-title" }, "\u{1F4DD} Todo App", /* @__PURE__ */ jsx2("span", { className: "subtitle" }, "Built with Frontend Hamroun")), /* @__PURE__ */ jsx2("div", { className: "header-controls" }, /* @__PURE__ */ jsx2(ThemeToggleButton, { theme, onToggle: toggleTheme }), /* @__PURE__ */ jsx2("div", { className: "stats" }, /* @__PURE__ */ jsx2("span", { className: "stat" }, "Total: ", /* @__PURE__ */ jsx2("strong", null, todoStats.total)), /* @__PURE__ */ jsx2("span", { className: "stat" }, "Active: ", /* @__PURE__ */ jsx2("strong", null, todoStats.active)), /* @__PURE__ */ jsx2("span", { className: "stat" }, "Done: ", /* @__PURE__ */ jsx2("strong", null, todoStats.completed)))))), /* @__PURE__ */ jsx2("main", { className: "main-content" }, /* @__PURE__ */ jsx2("div", { className: "container" }, /* @__PURE__ */ jsx2("section", { className: "card add-todo-section" }, /* @__PURE__ */ jsx2("h2", null, "\u2795 Add New Todo"), /* @__PURE__ */ jsx2("div", { className: "add-todo-form" }, /* @__PURE__ */ jsx2(
+    "input",
+    {
+      type: "text",
+      value: newTask,
+      onChange: (e) => setNewTask(e.target.value),
+      onKeyPress: handleKeyPress,
+      placeholder: "What needs to be done?",
+      className: "input todo-input",
+      disabled: isLoading
+    }
+  ), /* @__PURE__ */ jsx2(
+    "select",
+    {
+      value: taskPriority,
+      onChange: (e) => setTaskPriority(e.target.value),
+      className: "select priority-select",
+      disabled: isLoading
+    },
+    /* @__PURE__ */ jsx2("option", { value: "low" }, "\u{1F7E2} Low Priority"),
+    /* @__PURE__ */ jsx2("option", { value: "medium" }, "\u{1F7E1} Medium Priority"),
+    /* @__PURE__ */ jsx2("option", { value: "high" }, "\u{1F534} High Priority")
+  ), /* @__PURE__ */ jsx2(
+    "button",
+    {
+      onClick: addTask,
+      className: `btn btn-primary add-btn ${isLoading ? "loading" : ""}`,
+      disabled: isLoading || !newTask.trim()
+    },
+    isLoading ? "\u23F3 Adding..." : "\u2795 Add Todo"
+  ))), /* @__PURE__ */ jsx2("section", { className: "card filters-section" }, /* @__PURE__ */ jsx2("h2", null, "\u{1F50D} Filter Todos"), /* @__PURE__ */ jsx2("div", { className: "filters" }, ["all", "active", "completed", "high", "medium", "low"].map((filterType) => /* @__PURE__ */ jsx2(
+    "button",
+    {
+      key: filterType,
+      onClick: () => setTaskFilter(filterType),
+      className: `btn btn-sm filter-btn ${taskFilter === filterType ? "btn-primary" : "btn-outline"}`
+    },
+    filterType === "all" && "\u{1F4CB} All",
+    filterType === "active" && "\u23F3 Active",
+    filterType === "completed" && "\u2705 Completed",
+    filterType === "high" && "\u{1F534} High Priority",
+    filterType === "medium" && "\u{1F7E1} Medium Priority",
+    filterType === "low" && "\u{1F7E2} Low Priority"
+  ))), /* @__PURE__ */ jsx2("div", { className: "bulk-actions" }, /* @__PURE__ */ jsx2(
+    "button",
+    {
+      onClick: markAllComplete,
+      className: "btn btn-success btn-sm",
+      disabled: todoStats.active === 0
+    },
+    "\u2705 Mark All Complete"
+  ), /* @__PURE__ */ jsx2(
+    "button",
+    {
+      onClick: clearCompleted,
+      className: "btn btn-warning btn-sm",
+      disabled: todoStats.completed === 0
+    },
+    "\u{1F5D1}\uFE0F Clear Completed"
+  ))), /* @__PURE__ */ jsx2("section", { className: "card todos-section" }, /* @__PURE__ */ jsx2("div", { className: "section-header" }, /* @__PURE__ */ jsx2("h2", null, "\u{1F4CB} Todo List"), /* @__PURE__ */ jsx2("div", { className: "filter-info" }, "Showing ", /* @__PURE__ */ jsx2("strong", null, filteredTodos.length), " of ", /* @__PURE__ */ jsx2("strong", null, todoStats.total), " todos", taskFilter !== "all" && /* @__PURE__ */ jsx2("span", { className: "filter-badge" }, taskFilter))), /* @__PURE__ */ jsx2("div", { className: "todos-list" }, filteredTodos.length > 0 ? filteredTodos.map((todo) => /* @__PURE__ */ jsx2(
+    TodoItem,
+    {
+      key: todo.id,
+      todo,
+      onToggle: handleToggleTodo,
+      onDelete: handleDeleteTodo
+    }
+  )) : /* @__PURE__ */ jsx2("div", { className: "empty-state" }, /* @__PURE__ */ jsx2("p", null, taskFilter === "all" ? "\u{1F389} No todos yet. Add one above!" : taskFilter === "completed" ? "\u{1F4DD} No completed todos yet." : taskFilter === "active" ? "\u{1F3AF} No active todos. Great job!" : `\u{1F50D} No ${taskFilter} priority todos found.`)))), /* @__PURE__ */ jsx2("section", { className: "card actions-section" }, /* @__PURE__ */ jsx2("h2", null, "\u2699\uFE0F Actions"), /* @__PURE__ */ jsx2("div", { className: "action-buttons" }, /* @__PURE__ */ jsx2("button", { onClick: simulateError, className: "btn btn-danger" }, "\u{1F4A5} Test Error Boundary"))))), /* @__PURE__ */ jsx2(AppFooter, { theme, isBrowser }), /* @__PURE__ */ jsx2("style", null, `
+        * {
+          margin: 0;
+          padding: 0;
+          box-sizing: border-box;
+        }
+
+        :root {
+          --primary: #3b82f6;
+          --primary-dark: #2563eb;
+          --secondary: #6b7280;
+          --success: #10b981;
+          --warning: #f59e0b;
+          --danger: #ef4444;
+          --background: #ffffff;
+          --surface: #f9fafb;
+          --text: #111827;
+          --text-muted: #6b7280;
+          --border: #e5e7eb;
+          --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+          --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+        }
+
+        [data-theme="dark"] {
+          --primary: #3b82f6;
+          --secondary: #9ca3af;
+          --success: #10b981;
+          --warning: #f59e0b;
+          --danger: #ef4444;
+          --background: #111827;
+          --surface: #1f2937;
+          --text: #f9fafb;
+          --text-muted: #9ca3af;
+          --border: #374151;
+        }
+
+        body {
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          line-height: 1.6;
+          color: var(--text);
+          background-color: var(--background);
+          transition: all 0.3s ease;
+        }
+
+        .app {
+          min-height: 100vh;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .container {
+          max-width: 800px;
+          margin: 0 auto;
+          padding: 0 1rem;
+        }
+
+        /* Header */
+        .app-header {
+          background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+          color: white;
+          padding: 2rem 0;
+          box-shadow: var(--shadow-lg);
+        }
+
+        .app-header .container {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          flex-wrap: wrap;
+          gap: 1rem;
+        }
+
+        .app-title {
+          font-size: 2rem;
+          font-weight: 700;
+          margin: 0;
+          display: flex;
+          flex-direction: column;
+          gap: 0.25rem;
+        }
+
+        .subtitle {
+          font-size: 1rem;
+          font-weight: 400;
+          opacity: 0.9;
+        }
+
+        .header-controls {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+        }
+
+        .stats {
+          display: flex;
+          gap: 1rem;
+          font-size: 0.875rem;
+        }
+
+        .stat {
+          background: rgba(255, 255, 255, 0.2);
+          padding: 0.5rem 0.75rem;
+          border-radius: 0.5rem;
+          backdrop-filter: blur(10px);
+        }
+
+        /* Main content */
+        .main-content {
+          flex: 1;
+          padding: 2rem 0;
+        }
+
+        /* Cards */
+        .card {
+          background: var(--surface);
+          border-radius: 1rem;
+          padding: 1.5rem;
+          margin-bottom: 1.5rem;
+          box-shadow: var(--shadow);
+          border: 1px solid var(--border);
+          transition: transform 0.2s ease;
+        }
+
+        .card:hover {
+          transform: translateY(-2px);
+        }
+
+        .card h2 {
+          font-size: 1.25rem;
+          margin-bottom: 1rem;
+          color: var(--text);
+        }
+
+        /* Add Todo Form */
+        .add-todo-form {
+          display: flex;
+          gap: 0.75rem;
+          flex-wrap: wrap;
+        }
+
+        .todo-input {
+          flex: 1;
+          min-width: 250px;
+        }
+
+        .priority-select {
+          min-width: 150px;
+        }
+
+        /* Filters */
+        .filters {
+          display: flex;
+          gap: 0.5rem;
+          margin-bottom: 1rem;
+          flex-wrap: wrap;
+        }
+
+        .filter-btn {
+          font-size: 0.875rem;
+        }
+
+        .bulk-actions {
+          display: flex;
+          gap: 0.5rem;
+          flex-wrap: wrap;
+        }
+
+        /* Section Header */
+        .section-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 1rem;
+          flex-wrap: wrap;
+          gap: 1rem;
+        }
+
+        .filter-info {
+          font-size: 0.875rem;
+          color: var(--text-muted);
+        }
+
+        .filter-badge {
+          background: var(--primary);
+          color: white;
+          padding: 0.25rem 0.5rem;
+          border-radius: 0.25rem;
+          font-size: 0.75rem;
+          margin-left: 0.5rem;
+        }
+
+        /* Todos List */
+        .todos-list {
+          display: flex;
+          flex-direction: column;
+          gap: 0.75rem;
+        }
+
+        .todo-item {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          padding: 1rem;
+          background: var(--background);
+          border-radius: 0.5rem;
+          border: 1px solid var(--border);
+          transition: all 0.2s ease;
+        }
+
+        .todo-item:hover {
+          border-color: var(--primary);
+          box-shadow: var(--shadow);
+        }
+
+        .todo-item.completed {
+          opacity: 0.7;
+        }
+
+        .todo-item.completed .todo-text {
+          text-decoration: line-through;
+        }
+
+        .todo-checkbox {
+          width: 1.25rem;
+          height: 1.25rem;
+          cursor: pointer;
+        }
+
+        .todo-text {
+          flex: 1;
+          font-size: 1rem;
+        }
+
+        .todo-priority {
+          padding: 0.25rem 0.5rem;
+          border-radius: 0.25rem;
+          font-size: 0.75rem;
+          font-weight: 600;
+        }
+
+        .priority-high {
+          background: #fee2e2;
+          color: #991b1b;
+        }
+
+        .priority-medium {
+          background: #fef3c7;
+          color: #92400e;
+        }
+
+        .priority-low {
+          background: #dcfce7;
+          color: #166534;
+        }
+
+        .todo-actions {
+          display: flex;
+          gap: 0.5rem;
+        }
+
+        /* Form elements */
+        .input, .select {
+          padding: 0.75rem;
+          border: 2px solid var(--border);
+          border-radius: 0.5rem;
+          font-size: 1rem;
+          background: var(--background);
+          color: var(--text);
+          transition: border-color 0.2s ease;
+        }
+
+        .input:focus, .select:focus {
+          outline: none;
+          border-color: var(--primary);
+        }
+
+        /* Buttons */
+        .btn {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+          padding: 0.75rem 1.5rem;
+          border: none;
+          border-radius: 0.5rem;
+          font-size: 0.875rem;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          text-decoration: none;
+          user-select: none;
+        }
+
+        .btn:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        .btn-sm {
+          padding: 0.5rem 1rem;
+          font-size: 0.75rem;
+        }
+
+        .btn-primary {
+          background: var(--primary);
+          color: white;
+        }
+
+        .btn-primary:hover:not(:disabled) {
+          background: var(--primary-dark);
+          transform: translateY(-1px);
+        }
+
+        .btn-secondary {
+          background: var(--secondary);
+          color: white;
+        }
+
+        .btn-success {
+          background: var(--success);
+          color: white;
+        }
+
+        .btn-warning {
+          background: var(--warning);
+          color: white;
+        }
+
+        .btn-danger {
+          background: var(--danger);
+          color: white;
+        }
+
+        .btn-outline {
+          background: transparent;
+          color: var(--text);
+          border: 2px solid var(--border);
+        }
+
+        .btn-outline:hover:not(:disabled) {
+          background: var(--surface);
+          border-color: var(--primary);
+        }
+
+        .btn.loading {
+          position: relative;
+          color: transparent;
+        }
+
+        .btn.loading::after {
+          content: '';
+          position: absolute;
+          width: 1rem;
+          height: 1rem;
+          border: 2px solid transparent;
+          border-top: 2px solid currentColor;
+          border-radius: 50%;
+          animation: spin 1s linear infinite;
+          color: white;
+        }
+
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+
+        .theme-toggle {
+          border-radius: 50%;
+          width: 3rem;
+          height: 3rem;
+          padding: 0;
+          font-size: 1.25rem;
+          background: rgba(255, 255, 255, 0.2);
+          color: white;
+          border: 2px solid rgba(255, 255, 255, 0.3);
+        }
+
+        .theme-toggle:hover {
+          background: rgba(255, 255, 255, 0.3);
+          transform: scale(1.05);
+        }
+
+        /* Empty state */
+        .empty-state {
+          text-align: center;
+          padding: 3rem 1rem;
+          color: var(--text-muted);
+        }
+
+        .empty-state p {
+          font-size: 1.1rem;
+        }
+
+        /* Actions section */
+        .action-buttons {
+          display: flex;
+          gap: 1rem;
+          flex-wrap: wrap;
+        }
+
+        /* Footer */
+        .app-footer {
+          background: var(--surface);
+          border-top: 1px solid var(--border);
+          padding: 1.5rem 0;
+          text-align: center;
+          color: var(--text-muted);
+          font-size: 0.875rem;
+        }
+
+        .app-footer p {
+          margin: 0.25rem 0;
+        }
+
+        /* Error container */
+        .error-container {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          min-height: 100vh;
+          padding: 2rem;
+          text-align: center;
+        }
+
+        .error-container h2 {
+          color: var(--danger);
+          margin-bottom: 1rem;
+        }
+
+        .error-container p {
+          color: var(--text-muted);
+          margin-bottom: 2rem;
+        }
+
+        /* Responsive design */
+        @media (max-width: 768px) {
+          .app-header .container {
+            flex-direction: column;
+            text-align: center;
+          }
+
+          .app-title {
+            font-size: 1.75rem;
+          }
+
+          .add-todo-form {
+            flex-direction: column;
+          }
+
+          .todo-input, .priority-select {
+            min-width: auto;
+            width: 100%;
+          }
+
+          .section-header {
+            flex-direction: column;
+            align-items: stretch;
+          }
+
+          .stats {
+            justify-content: center;
+          }
+
+          .filters {
+            justify-content: center;
+          }
+
+          .bulk-actions {
+            justify-content: center;
+          }
+        }
+
+        /* Smooth transitions */
+        * {
+          transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+        }
+      `));
+}
+
+// src/server.ts
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = path.dirname(__filename);
+var app = express();
+var port = 3e3;
+app.use(express.static(path.join(__dirname)));
+app.get("/", async (req, res) => {
+  const html = await renderToString(jsx3(App, {}));
+  res.send(`
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <title>SSR App</title>
+      </head>
+      <body>
+        <div id="root">${html}</div>
+        <script type="module" src="/client.js"></script>
+      </body>
+    </html>
+  `);
+});
+app.listen(port, () => {
+  console.log(`Server running at http://localhost:${port}`);
+});