frontend-hamroun 1.2.15 → 1.2.17

package/templates/basic/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/tailwind.config.js

@@ -1,32 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    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: [
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
-  ],
-}

package/templates/basic/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

package/templates/basic/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/vite.config.js

@@ -1,18 +0,0 @@
-import { defineConfig } from 'vite';
-import { nodePolyfills } from 'vite-plugin-node-polyfills';
-
-export default defineConfig({
-  build: {
-    outDir: 'dist',
-    emptyOutDir: true
-  },
-  server: {
-    port: 3000,
-    open: true
-  },
-  plugins: [
-    nodePolyfills({
-      protocolImports: true,
-    }),
-  ]
-});

package/templates/basic/vite.config.ts

@@ -1,86 +0,0 @@
-import { defineConfig } from 'vite';
-import { nodePolyfills } from 'vite-plugin-node-polyfills';
-
-export default defineConfig({
-  esbuild: {
-    jsxFactory: 'jsx',
-    jsxFragment: 'Fragment'
-  },
-  build: {
-    outDir: 'dist',
-    emptyOutDir: true,
-    rollupOptions: {
-      // Mark testing dependencies and Node.js dependencies as external
-      external: [
-        'mock-aws-s3',
-        'aws-sdk',
-        'nock',
-        'jest',
-        'jest-mock',
-        '@testing-library/react',
-        '@testing-library/jest-dom',
-        '@mswjs/interceptors',
-        'node-pre-gyp',
-        'bcrypt',
-        'jsonwebtoken',
-        'mongoose',
-        'express',
-        'compression',
-        'helmet',
-        'morgan',
-        /node:.*/
-      ]
-    }
-  },
-  server: {
-    port: 3000,
-    open: true
-  },
-  optimizeDeps: {
-    esbuildOptions: {
-      // Node.js global to browser globalThis
-      define: {
-        global: 'globalThis'
-      },
-      // Enable esbuild polyfill plugins
-      plugins: [
-        {
-          name: 'node-modules-polyfill',
-          setup(build) {
-            // Exclude node:* imports and html files
-            build.onResolve({ filter: /^node:/ }, () => {
-              return { external: true };
-            });
-            build.onResolve({ filter: /\.html$/ }, () => {
-              return { external: true };
-            });
-          }
-        }
-      ]
-    },
-    // Exclude problematic dependencies from optimization
-    exclude: [
-      'mock-aws-s3',
-      'aws-sdk',
-      'nock',
-      '@mswjs/interceptors',
-      'node-pre-gyp',
-      'bcrypt'
-    ]
-  },
-  plugins: [
-    // Add node polyfills for browser environment
-    nodePolyfills({
-      // Whether to polyfill `node:` protocol imports
-      protocolImports: true,
-    }),
-  ],
-  resolve: {
-    // Add node compatibility
-    alias: {
-      // Handle missing imports specifically
-      '@mswjs/interceptors/presets/node': { find: /^@mswjs\/interceptors\/presets\/node/, replacement: '{}' },
-      './util/nw-pre-gyp/index.html': { find: './util/nw-pre-gyp/index.html', replacement: '{}' }
-    }
-  }
-});

package/templates/basic-app/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++;
-  
-  // Using plain JS objects instead of JSX
-  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/basic-app/src/App.tsx

@@ -1,143 +0,0 @@
-import { useState, useEffect, useContext, useRef } from 'frontend-hamroun';
-import { Header } from './components/Header';
-import { Counter } from './components/Counter';
-import { ApiClient } from './api.js';
-import { TodoList } from './components/TodoList.js';
-import { AppContext } from './main';
-
-interface AppProps {
-  api: ApiClient;
-}
-
-// Use function declaration style instead of JSX component syntax
-export function App(props: any) {
-  const [count, setCount] = useState(0);
-  const [theme, setTheme] = useState('light');
-  const renderCount = useRef(0);
-  
-  renderCount.current++;
-  
-  // Return a standard object structure rather than JSX
-  return {
-    type: 'div',
-    props: {
-      style: { 
-        fontFamily: 'Arial, sans-serif', 
-        maxWidth: '600px', 
-        margin: '0 auto', 
-        padding: '2rem',
-        backgroundColor: theme === 'dark' ? '#222' : '#fff',
-        color: theme === 'dark' ? '#fff' : '#222'
-      },
-      children: [
-        {
-          type: 'h1',
-          props: { 
-            style: { textAlign: 'center' },
-            children: 'Frontend Hamroun App'
-          }
-        },
-        {
-          type: 'p',
-          props: {
-            style: { textAlign: 'center' },
-            children: `This component has rendered ${renderCount.current} times`
-          }
-        },
-        {
-          type: 'div',
-          props: {
-            style: {
-              display: 'flex',
-              justifyContent: 'center',
-              marginBottom: '1rem'
-            },
-            children: {
-              type: 'button',
-              props: {
-                onClick: () => setTheme(theme === 'light' ? 'dark' : 'light'),
-                style: {
-                  padding: '8px 16px',
-                  backgroundColor: '#4b5563',
-                  color: 'white',
-                  border: 'none',
-                  borderRadius: '4px',
-                  cursor: 'pointer'
-                },
-                children: `Switch to ${theme === 'light' ? 'dark' : 'light'} mode`
-              }
-            }
-          }
-        },
-        {
-          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/basic-app/src/api.ts

@@ -1,58 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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>
-  );
-}