frontend-hamroun 1.2.16 → 1.2.17

package/templates/basic-app/src/components/TodoList.tsx

@@ -1,90 +0,0 @@
-import { useState } from 'front-package';
-import { ApiClient, Todo } from '../api';
-
-interface TodoListProps {
-  todos: Todo[];
-  api: ApiClient;
-  setTodos: (todos: Todo[]) => void;
-}
-
-export function TodoList({ todos, api, setTodos }: TodoListProps) {
-  const [newTodoText, setNewTodoText] = useState('');
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  async function handleAddTodo(e: Event) {
-    e.preventDefault();
-    if (!newTodoText.trim()) return;
-    
-    try {
-      setIsSubmitting(true);
-      const newTodo = await api.addTodo({
-        title: newTodoText,
-        completed: false
-      });
-      
-      setTodos([...todos, newTodo]);
-      setNewTodoText('');
-    } catch (err) {
-      console.error('Failed to add todo:', err);
-    } finally {
-      setIsSubmitting(false);
-    }
-  }
-
-  async function handleToggleTodo(id: string, completed: boolean) {
-    try {
-      await api.updateTodo(id, { completed });
-      setTodos(
-        todos.map(todo => 
-          todo.id === id ? { ...todo, completed } : todo
-        )
-      );
-    } catch (err) {
-      console.error('Failed to update todo:', err);
-    }
-  }
-
-  return (
-    <div>
-      <form onSubmit={handleAddTodo} className="mb-4">
-        <div className="flex gap-2">
-          <input
-            type="text"
-            value={newTodoText}
-            onChange={(e) => setNewTodoText(e.target.value)}
-            placeholder="Add a new todo..."
-            className="flex-1 border rounded px-3 py-2"
-            disabled={isSubmitting}
-          />
-          <button 
-            type="submit" 
-            className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition"
-            disabled={isSubmitting || !newTodoText.trim()}
-          >
-            {isSubmitting ? 'Adding...' : 'Add'}
-          </button>
-        </div>
-      </form>
-
-      <ul className="space-y-2">
-        {todos.length === 0 ? (
-          <li className="text-center py-2 text-gray-500">No todos yet</li>
-        ) : (
-          todos.map(todo => (
-            <li key={todo.id} className="flex items-center gap-2 p-2 border-b">
-              <input
-                type="checkbox"
-                checked={todo.completed}
-                onChange={(e) => handleToggleTodo(todo.id, e.target.checked)}
-                className="h-5 w-5 text-blue-600"
-              />
-              <span className={todo.completed ? 'line-through text-gray-500' : ''}>
-                {todo.title}
-              </span>
-            </li>
-          ))
-        )}
-      </ul>
-    </div>
-  );
-}

package/templates/basic-app/src/main.js

@@ -1,10 +0,0 @@
-import { render } from 'frontend-hamroun';
-import { App } from './App.js';
-
-document.addEventListener('DOMContentLoaded', () => {
-  const rootElement = document.getElementById('app');
-  if (rootElement) {
-    render(App(), rootElement);
-    console.log('App rendered successfully');
-  }
-});

package/templates/basic-app/src/main.ts

@@ -1,21 +0,0 @@
-import './main.css';
-import { render } from 'frontend-hamroun';
-import { App } from './App';
-import { createApiClient } from './api';
-
-// Initialize API client
-const api = createApiClient({
-  baseUrl: import.meta.env.VITE_API_URL || '/api'
-});
-
-// Render the app into the DOM
-document.addEventListener('DOMContentLoaded', () => {
-  const rootElement = document.getElementById('app');
-  if (rootElement) {
-    // Call App as a function to create the VDOM structure
-    render(App({ api }), rootElement);
-    console.log('App rendered successfully');
-  } else {
-    console.error('Root element #app not found');
-  }
-});

package/templates/basic-app/src/react/index.ts

@@ -1,35 +0,0 @@
-import { 
-  useState, 
-  useEffect, 
-  useRef, 
-  useMemo, 
-  useContext, 
-  createContext,
-  jsx
-} from 'frontend-hamroun';
-
-// Provide React compatibility layer
-const React = {
-  createElement: jsx,
-  Fragment: Symbol('Fragment'),
-  useState,
-  useEffect,
-  useRef,
-  useMemo,
-  useContext,
-  createContext
-};
-
-// Export hooks directly for named imports
-export {
-  useState,
-  useEffect,
-  useRef,
-  useMemo,
-  useContext,
-  createContext,
-  jsx as createElement
-};
-
-// Default export
-export default React;

package/templates/basic-app/src/react/jsx-dev-runtime.ts

@@ -1,13 +0,0 @@
-import { jsx } from 'frontend-hamroun';
-
-// Export jsx as jsxDEV for React compatibility
-export const jsxDEV = jsx;
-export const Fragment = Symbol('Fragment');
-export const jsxs = jsx;
-
-// Default export
-export default {
-  jsxDEV,
-  Fragment,
-  jsxs
-};

package/templates/basic-app/src/react/jsx-runtime.ts

@@ -1,12 +0,0 @@
-import { jsx } from 'frontend-hamroun';
-
-// Export jsx functions for React compatibility
-export const jsxs = jsx;
-export const Fragment = Symbol('Fragment');
-
-// Default export
-export default {
-  jsx,
-  jsxs,
-  Fragment
-};

package/templates/basic-app/src/server.ts

@@ -1,99 +0,0 @@
-import { createServer, Router, Database, ApiRoute } from 'front-package';
-import { fileURLToPath } from 'url';
-import { dirname, join } from 'path';
-import fs from 'fs';
-
-// Setup paths for server
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-const DIST_PATH = process.env.NODE_ENV === 'production' 
-  ? join(__dirname, '..') 
-  : join(__dirname, '../dist');
-
-// Initialize database
-const db = new Database({
-  filePath: join(__dirname, '../data/db.json'),
-  defaultData: {
-    todos: [
-      { id: '1', title: 'Learn Front Package', completed: false },
-      { id: '2', title: 'Build an app', completed: false },
-      { id: '3', title: 'Deploy to production', completed: false }
-    ]
-  }
-});
-
-// Create API routes
-const apiRouter = new Router();
-
-// GET /api/todos
-apiRouter.get('/todos', async (req, res) => {
-  const todos = await db.getAll('todos');
-  res.json(todos);
-});
-
-// GET /api/todos/:id
-apiRouter.get('/todos/:id', async (req, res) => {
-  const todo = await db.getById('todos', req.params.id);
-  if (!todo) {
-    return res.status(404).json({ error: 'Todo not found' });
-  }
-  res.json(todo);
-});
-
-// POST /api/todos
-apiRouter.post('/todos', async (req, res) => {
-  const { title, completed = false } = req.body;
-  
-  if (!title) {
-    return res.status(400).json({ error: 'Title is required' });
-  }
-  
-  const newTodo = {
-    id: Date.now().toString(),
-    title,
-    completed
-  };
-  
-  await db.insert('todos', newTodo);
-  res.status(201).json(newTodo);
-});
-
-// PATCH /api/todos/:id
-apiRouter.patch('/todos/:id', async (req, res) => {
-  const todo = await db.getById('todos', req.params.id);
-  if (!todo) {
-    return res.status(404).json({ error: 'Todo not found' });
-  }
-  
-  const updatedTodo = { ...todo, ...req.body };
-  await db.update('todos', req.params.id, updatedTodo);
-  res.json(updatedTodo);
-});
-
-// DELETE /api/todos/:id
-apiRouter.delete('/todos/:id', async (req, res) => {
-  const todo = await db.getById('todos', req.params.id);
-  if (!todo) {
-    return res.status(404).json({ error: 'Todo not found' });
-  }
-  
-  await db.delete('todos', req.params.id);
-  res.status(204).end();
-});
-
-// Create server
-const server = createServer({
-  port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
-  staticDir: DIST_PATH,
-  routes: [
-    new ApiRoute('/api', apiRouter)
-  ]
-});
-
-// Start server
-server.start().then(() => {
-  console.log(`Server running at http://localhost:${server.port}`);
-}).catch(err => {
-  console.error('Failed to start server:', err);
-  process.exit(1);
-});

package/templates/basic-app/src/shims.ts

@@ -1,9 +0,0 @@
-// This file provides compatibility shims for React JSX imports
-
-import { jsx } from 'frontend-hamroun';
-
-// Export the jsx function as jsxDEV for React compatibility
-export const jsxDEV = jsx;
-
-// Export a Fragment symbol
-export const Fragment = Symbol('Fragment');

package/templates/basic-app/tsconfig.node.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}

package/templates/basic-app/vite.config.js

@@ -1,22 +0,0 @@
-import { defineConfig } from 'vite';
-import { nodePolyfills } from 'vite-plugin-node-polyfills';
-
-export default defineConfig({
-  // No JSX-specific configuration
-  build: {
-    outDir: 'dist',
-    emptyOutDir: true
-  },
-  server: {
-    port: 3000,
-    open: true
-  },
-  optimizeDeps: {
-    include: ['frontend-hamroun']
-  },
-  plugins: [
-    nodePolyfills({
-      protocolImports: true,
-    }),
-  ]
-});

package/templates/full-stack/.env.example

@@ -1,11 +0,0 @@
-# Server Configuration
-PORT=3000
-NODE_ENV=development
-
-# Database Configuration
-MONGODB_URI=mongodb://localhost:27017
-MONGODB_NAME={{projectName}}
-
-# Authentication
-JWT_SECRET=your-jwt-secret-key-change-me
-REFRESH_SECRET=your-refresh-token-secret-change-me

package/templates/full-stack/README.md

@@ -1,51 +0,0 @@
-# {{appName}}
-
-{{description}}
-
-## Getting Started
-
-1. Clone this repository
-2. Install dependencies:
-   ```
-   npm install
-   ```
-3. Copy the environment variables file:
-   ```
-   cp .env.example .env
-   ```
-4. Start the development server:
-   ```
-   npm run dev
-   ```
-
-## Scripts
-
-- `npm run dev` - Start the development server
-- `npm run dev:server` - Start the backend server only
-- `npm run dev:client` - Start the frontend development server only
-- `npm run build` - Build for production
-- `npm start` - Start the production server
-- `npm test` - Run tests
-
-## Project Structure
-
-```
-├── src/
-│   ├── client/          # Frontend code
-│   │   ├── components/  # UI components
-│   │   ├── App.tsx      # Main app component
-│   │   └── main.tsx     # Entry point
-│   └── server/          # Backend code
-│       ├── routes/      # API routes
-│       └── index.ts     # Server entry point
-├── .env.example         # Environment variables example
-├── package.json         # Dependencies and scripts
-└── tsconfig.json        # TypeScript configuration
-```
-
-## Created with Hamroun
-
-This project was generated using the Hamroun framework.
-
-Author: {{author}}
-Created: {{creationDate}}

package/templates/full-stack/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Frontend Hamroun App</title>
-</head>
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.js"></script>
-</body>
-</html>

package/templates/full-stack/jsconfig.json

@@ -1,14 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true,
-    "resolveJsonModule": true,
-    "checkJs": false,
-    "strict": false
-  },
-  "include": ["src/**/*.js"],
-  "exclude": ["node_modules"]
-}

package/templates/full-stack/package.json

@@ -1,21 +0,0 @@
-{
-  "name": "frontend-hamroun-app",
-  "private": true,
-  "version": "0.1.0",
-  "type": "module",
-  "scripts": {
-    "dev": "node src/server.js",
-    "build": "tsc",
-    "start": "node dist/server.js"
-  },
-  "dependencies": {
-    "express": "^4.18.2",
-    "compression": "^1.7.4",
-    "helmet": "^7.1.0",
-    "morgan": "^1.10.0"
-  },
-  "devDependencies": {
-    "@types/node": "^20.10.0",
-    "typescript": "^5.3.2"
-  }
-}

package/templates/full-stack/src/App.js

@@ -1,105 +0,0 @@
-import { useState, useRef } from 'frontend-hamroun';
-
-export function App() {
-  const [count, setCount] = useState(0);
-  const renderCount = useRef(0);
-  
-  renderCount.current++;
-  
-  // Return a plain JavaScript object representation of the UI
-  return {
-    type: 'div',
-    props: {
-      style: { 
-        fontFamily: 'Arial, sans-serif', 
-        maxWidth: '600px', 
-        margin: '0 auto', 
-        padding: '2rem'
-      },
-      children: [
-        {
-          type: 'h1',
-          props: { 
-            style: { textAlign: 'center' },
-            children: 'Frontend Hamroun App'
-          }
-        },
-        {
-          type: 'p',
-          props: {
-            style: { textAlign: 'center' },
-            children: `Render count: ${renderCount.current}`
-          }
-        },
-        {
-          type: 'div',
-          props: {
-            style: {
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              padding: '1rem',
-              border: '1px solid #ccc',
-              borderRadius: '8px'
-            },
-            children: [
-              {
-                type: 'h2',
-                props: {
-                  children: 'Counter Example'
-                }
-              },
-              {
-                type: 'p',
-                props: {
-                  children: `Count: ${count}`
-                }
-              },
-              {
-                type: 'div',
-                props: {
-                  style: {
-                    display: 'flex',
-                    gap: '8px'
-                  },
-                  children: [
-                    {
-                      type: 'button',
-                      props: {
-                        onClick: () => setCount(count - 1),
-                        style: {
-                          padding: '8px 16px',
-                          backgroundColor: '#ff4d4d',
-                          color: 'white',
-                          border: 'none',
-                          borderRadius: '4px',
-                          cursor: 'pointer'
-                        },
-                        children: 'Decrement'
-                      }
-                    },
-                    {
-                      type: 'button',
-                      props: {
-                        onClick: () => setCount(count + 1),
-                        style: {
-                          padding: '8px 16px',
-                          backgroundColor: '#4d79ff',
-                          color: 'white',
-                          border: 'none',
-                          borderRadius: '4px',
-                          cursor: 'pointer'
-                        },
-                        children: 'Increment'
-                      }
-                    }
-                  ]
-                }
-              }
-            ]
-          }
-        }
-      ]
-    }
-  };
-}

package/templates/full-stack/src/client/App.tsx

@@ -1,50 +0,0 @@
-import { useState, useEffect } from 'frontend-hamroun';
-import { Header } from './components/Header';
-import { UserList } from './components/UserList';
-
-export function App() {
-  const [users, setUsers] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  
-  useEffect(() => {
-    // Fetch users from API
-    fetch('/api/users')
-      .then(response => {
-        if (!response.ok) {
-          throw new Error('Failed to fetch users');
-        }
-        return response.json();
-      })
-      .then(data => {
-        setUsers(data.data || []);
-        setLoading(false);
-      })
-      .catch(err => {
-        setError(err.message);
-        setLoading(false);
-      });
-  }, []);
-  
-  return (
-    <div className="app">
-      <Header title="{{appName}}" />
-      
-      <main>
-        <h2>Welcome to your Hamroun Application</h2>
-        
-        {loading ? (
-          <p>Loading users...</p>
-        ) : error ? (
-          <p className="error">Error: {error}</p>
-        ) : (
-          <UserList users={users} />
-        )}
-      </main>
-      
-      <footer>
-        <p>&copy; {new Date().getFullYear()} {{appName}}. Created with Hamroun.</p>
-      </footer>
-    </div>
-  );
-}

package/templates/full-stack/src/client/components/Header.tsx

@@ -1,42 +0,0 @@
-import { useState } from 'frontend-hamroun';
-
-interface HeaderProps {
-  title: string;
-}
-
-export function Header({ title }: HeaderProps) {
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
-  
-  const handleLogin = () => {
-    // In a real app, this would authenticate with the server
-    setIsLoggedIn(true);
-  };
-  
-  const handleLogout = () => {
-    setIsLoggedIn(false);
-  };
-  
-  return (
-    <header className="header">
-      <div className="logo">
-        <h1>{title}</h1>
-      </div>
-      
-      <nav>
-        <ul>
-          <li><a href="/">Home</a></li>
-          <li><a href="/about">About</a></li>
-          <li><a href="/contact">Contact</a></li>
-        </ul>
-      </nav>
-      
-      <div className="auth">
-        {isLoggedIn ? (
-          <button onClick={handleLogout}>Logout</button>
-        ) : (
-          <button onClick={handleLogin}>Login</button>
-        )}
-      </div>
-    </header>
-  );
-}

package/templates/full-stack/src/client/components/UserList.tsx

@@ -1,29 +0,0 @@
-interface User {
-  id: string;
-  name: string;
-  email: string;
-  role: string;
-}
-
-interface UserListProps {
-  users: User[];
-}
-
-export function UserList({ users }: UserListProps) {
-  if (!users.length) {
-    return <p>No users found.</p>;
-  }
-  
-  return (
-    <div className="user-list">
-      <h3>Users</h3>
-      <ul>
-        {users.map(user => (
-          <li key={user.id}>
-            <strong>{user.name}</strong> ({user.email}) - {user.role}
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}

package/templates/full-stack/src/client/main.tsx

@@ -1,5 +0,0 @@
-import { render } from 'frontend-hamroun';
-import { App } from './App';
-
-// Mount the application
-render(<App />, document.getElementById('root'));

package/templates/full-stack/src/main.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;