frontend-hamroun 1.1.90 → 1.2.0

package/src/types/jsonwebtoken.d.ts

@@ -0,0 +1,55 @@
+declare module 'jsonwebtoken' {
+  export interface JwtPayload {
+    [key: string]: any;
+    iat?: number;
+    exp?: number;
+    aud?: string | string[];
+    sub?: string;
+    iss?: string;
+  }
+
+  export interface VerifyOptions {
+    algorithms?: string[];
+    audience?: string | string[];
+    complete?: boolean;
+    issuer?: string | string[];
+    jwtid?: string;
+    ignoreExpiration?: boolean;
+    ignoreNotBefore?: boolean;
+    subject?: string;
+    clockTolerance?: number;
+    maxAge?: string | number;
+    clockTimestamp?: number;
+  }
+
+  export interface SignOptions {
+    algorithm?: string;
+    keyid?: string;
+    expiresIn?: string | number;
+    notBefore?: string | number;
+    audience?: string | string[];
+    subject?: string;
+    issuer?: string;
+    jwtid?: string;
+    noTimestamp?: boolean;
+    header?: object;
+    encoding?: string;
+  }
+
+  export function sign(
+    payload: string | Buffer | object,
+    secretOrPrivateKey: string | Buffer,
+    options?: SignOptions
+  ): string;
+
+  export function verify(
+    token: string,
+    secretOrPublicKey: string | Buffer,
+    options?: VerifyOptions
+  ): JwtPayload | string;
+
+  export function decode(
+    token: string,
+    options?: { complete?: boolean; json?: boolean }
+  ): null | JwtPayload | { [key: string]: any };
+}

package/src/types.d.ts

@@ -0,0 +1,26 @@
+declare namespace JSX {
+  interface IntrinsicElements {
+  }
+  
+  interface Element extends Node {}
+  
+  interface ElementAttributesProperty {
+    props: {};
+  }
+  
+  interface ElementChildrenAttribute {
+    children: {};
+  }
+}
+
+interface Window {
+  jsx: any;
+  jsxs: any;
+  Fragment: any;
+  __renderStats?: {
+    elementsCreated: number;
+    textNodesCreated: number;
+    eventsAttached: number;
+    renderTime: number;
+  };
+}

package/src/types.ts

@@ -0,0 +1,21 @@
+export type { Context } from './context';
+
+export interface VNode {
+  type: string | Function;
+  props: Record<string, any>;
+  key?: string | number;
+}
+
+// Global JSX namespace
+declare global {
+  namespace JSX {
+    interface Element {
+      type: string | Function;
+      props: Record<string, any>;
+      key?: string | number;
+    }
+    interface IntrinsicElements {
+      [elemName: string]: any;
+    }
+  }
+}

package/src/vdom.ts

@@ -0,0 +1,34 @@
+interface VNode {
+  type: string | Function;
+  props: Record<string, any>;
+  key?: string | number;
+}
+
+function arePropsEqual(oldProps: any, newProps: any): boolean {
+  // Handle null/undefined props
+  oldProps = oldProps || {};
+  newProps = newProps || {};
+  
+  const oldKeys = Object.keys(oldProps).filter(k => k !== 'children');
+  const newKeys = Object.keys(newProps).filter(k => k !== 'children');
+  
+  if (oldKeys.length !== newKeys.length) return false;
+  return oldKeys.every(key => oldProps[key] === newProps[key]);
+}
+
+export function diff(oldNode: VNode | any, newNode: VNode | any): boolean {
+  if (oldNode == null || newNode == null) return oldNode !== newNode;
+  if (typeof oldNode !== typeof newNode) return true;
+  if (typeof newNode === 'string' || typeof newNode === 'number')
+    return oldNode !== newNode;
+  
+  // Handle primitive values that are not objects
+  if (!oldNode.type || !newNode.type) return oldNode !== newNode;
+  
+  if (newNode.type !== oldNode.type) return true;
+  return !arePropsEqual(oldNode.props, newNode.props);
+}
+
+export function shouldComponentUpdate(oldProps: any, newProps: any): boolean {
+  return !arePropsEqual(oldProps, newProps);
+}

package/templates/basic-app/package.json

@@ -1,28 +1,30 @@
 {
-  "name": "my-app",
+  "name": "front-package-app",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "lint:fix": "eslint src --ext ts,tsx --fix"
+    "start": "node dist/server.js",
+    "dev:full": "concurrently \"npm run dev\" \"npm run dev:server\"",
+    "dev:server": "tsx watch src/server.ts"
   },
   "dependencies": {
-    "frontend-hamroun": "latest"
+    "front-package": "latest"
   },
   "devDependencies": {
-    "typescript": "^5.0.0",
-    "vite": "^4.4.9",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "tailwindcss": "^3.3.3",
-    "postcss": "^8.4.27",
-    "autoprefixer": "^10.4.14"
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.10",
+    "@types/node": "^20.10.0",
+    "autoprefixer": "^10.4.16",
+    "concurrently": "^8.2.2",
+    "cssnano": "^6.0.1",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.5",
+    "tsx": "^4.6.0",
+    "typescript": "^5.3.2",
+    "vite": "^5.0.0"
   }
 }

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

@@ -2,5 +2,6 @@ export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
+    cssnano: process.env.NODE_ENV === 'production' ? { preset: 'default' } : false
   },
 }

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

@@ -0,0 +1,65 @@
+import { useState, useEffect } from 'frontend-hamroun';
+import { Header } from './components/Header';
+import { Counter } from './components/Counter';
+import { ApiClient } from './api.js';
+import { TodoList } from './components/TodoList.js';
+
+interface AppProps {
+  api: ApiClient;
+}
+
+export function App({ api }: AppProps) {
+  const [todos, setTodos] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    // Fetch data when component mounts
+    async function fetchData() {
+      try {
+        setIsLoading(true);
+        const data = await api.getTodos();
+        setTodos(data);
+        setError(null);
+      } catch (err) {
+        setError('Failed to fetch todos');
+        console.error(err);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    fetchData();
+  }, [api]);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header title="My Front Package App" />
+      
+      <main className="container mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold text-center mb-8">
+          Welcome to your Front Package app!
+        </h1>
+        
+        <div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl mb-8">
+          <div className="p-8">
+            <Counter />
+          </div>
+        </div>
+        
+        <div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
+          <div className="p-8">
+            <h2 className="text-xl font-bold mb-4">Todo List</h2>
+            {isLoading ? (
+              <div className="text-center py-4">Loading...</div>
+            ) : error ? (
+              <div className="text-red-500 py-4">{error}</div>
+            ) : (
+              <TodoList todos={todos} api={api} setTodos={setTodos} />
+            )}
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

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

@@ -0,0 +1,58 @@
+export interface Todo {
+  id: string;
+  title: string;
+  completed: boolean;
+}
+
+export interface ApiClientOptions {
+  baseUrl: string;
+}
+
+export interface ApiClient {
+  getTodos: () => Promise<Todo[]>;
+  getTodo: (id: string) => Promise<Todo>;
+  addTodo: (todo: Omit<Todo, 'id'>) => Promise<Todo>;
+  updateTodo: (id: string, updates: Partial<Omit<Todo, 'id'>>) => Promise<Todo>;
+  deleteTodo: (id: string) => Promise<void>;
+}
+
+export function createApiClient(options: ApiClientOptions): ApiClient {
+  const { baseUrl } = options;
+  
+  async function fetchJson<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
+    const response = await fetch(`${baseUrl}${endpoint}`, {
+      ...options,
+      headers: {
+        'Content-Type': 'application/json',
+        ...options.headers,
+      },
+    });
+    
+    if (!response.ok) {
+      const error = await response.text();
+      throw new Error(error || `API request failed with status ${response.status}`);
+    }
+    
+    return response.json();
+  }
+
+  return {
+    getTodos: () => fetchJson<Todo[]>('/todos'),
+    
+    getTodo: (id: string) => fetchJson<Todo>(`/todos/${id}`),
+    
+    addTodo: (todo) => fetchJson<Todo>('/todos', {
+      method: 'POST',
+      body: JSON.stringify(todo),
+    }),
+    
+    updateTodo: (id: string, updates) => fetchJson<Todo>(`/todos/${id}`, {
+      method: 'PATCH',
+      body: JSON.stringify(updates),
+    }),
+    
+    deleteTodo: (id: string) => fetchJson<void>(`/todos/${id}`, {
+      method: 'DELETE',
+    }),
+  };
+}

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

@@ -0,0 +1,26 @@
+import { useState } from 'front-package';
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="text-center">
+      <h2 className="text-xl font-bold mb-4">Counter Example</h2>
+      <p className="mb-4">Count: <span className="font-bold">{count}</span></p>
+      <div className="flex justify-center gap-2">
+        <button 
+          onClick={() => setCount(count - 1)}
+          className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition"
+        >
+          Decrement
+        </button>
+        <button 
+          onClick={() => setCount(count + 1)}
+          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition"
+        >
+          Increment
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,9 @@
+export function Header({ title }: { title: string }) {
+  return (
+    <header className="bg-primary-600 text-white shadow-lg">
+      <div className="container mx-auto px-4 py-6">
+        <h1 className="text-2xl font-bold">{title}</h1>
+      </div>
+    </header>
+  );
+}

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

@@ -0,0 +1,90 @@
+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.ts

@@ -0,0 +1,20 @@
+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) {
+    render(<App api={api} />, rootElement);
+    console.log('App rendered successfully');
+  } else {
+    console.error('Root element #app not found');
+  }
+});

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

@@ -0,0 +1,99 @@
+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/tailwind.config.js

@@ -5,7 +5,28 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: {
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          200: '#bae6fd',
+          300: '#7dd3fc',
+          400: '#38bdf8',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          700: '#0369a1',
+          800: '#075985',
+          900: '#0c4a6e',
+        },
+      },
+      fontFamily: {
+        sans: ['Inter var', 'sans-serif'],
+      },
+    },
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+  ],
 }