baraqex 1.0.23 → 1.0.25

package/bin/baraqex.js

@@ -323,6 +323,766 @@ async function chooseTemplate() {
   return answers.template;
 }
 
+// Template configurations
+const templates = {
+  basic: {
+    name: 'Basic App',
+    description: 'A simple Frontend Hamroun application',
+    files: {
+      'package.json': {
+        name: 'my-app',
+        version: '1.0.0',
+        type: 'module',
+        scripts: {
+          dev: 'node server.js',
+          start: 'node server.js'
+        },
+        dependencies: {
+          'frontend-hamroun': 'latest',
+          express: '^4.18.2'
+        }
+      },
+      'server.js': `import express from 'express';
+import { renderToString, jsx } from 'frontend-hamroun';
+
+const app = express();
+const port = 3000;
+
+// Simple component
+function App() {
+  return jsx('div', null, 
+    jsx('h1', null, 'Hello Frontend Hamroun!'),
+    jsx('p', null, 'Your app is running successfully.')
+  );
+}
+
+app.get('/', async (req, res) => {
+  const html = await renderToString(jsx(App));
+  res.send(\`
+    <!DOCTYPE html>
+    <html>
+      <head><title>My App</title></head>
+      <body><div id="root">\${html}</div></body>
+    </html>
+  \`);
+});
+
+app.listen(port, () => {
+  console.log(\`Server running at http://localhost:\${port}\`);
+});`,
+      'README.md': `# My Frontend Hamroun App
+
+## Getting Started
+
+\`\`\`bash
+npm install
+npm run dev
+\`\`\`
+
+Visit http://localhost:3000 to see your app.`
+    }
+  },
+  ssr: {
+    name: 'SSR Template',
+    description: 'Advanced SSR template with hooks, modern design, and interactive components',
+    files: {
+      'package.json': {
+        name: 'ssr-template',
+        version: '0.0.0',
+        type: 'module',
+        scripts: {
+          dev: 'npm run build && npm run start',
+          build: 'node esbuild.config.js',
+          'build:vite': 'npm run build:client && npm run build:server',
+          'build:client': 'cross-env BUILD_TARGET=client vite build',
+          'build:server': 'cross-env BUILD_TARGET=server vite build --ssr',
+          start: 'node dist/server.js',
+          preview: 'npm run build && npm run start',
+          clean: 'rm -rf node_modules package-lock.json dist && npm install'
+        },
+        dependencies: {
+          express: '^4.18.2',
+          'frontend-hamroun': 'latest'
+        },
+        devDependencies: {
+          '@types/express': '^4.17.17',
+          '@types/node': '^20.0.0',
+          '@types/react': '^18.0.0',
+          'cross-env': '^7.0.3',
+          esbuild: '^0.19.0',
+          typescript: '^5.0.0',
+          vite: '^5.0.0'
+        }
+      },
+      'jsx-shim.js': `export { jsx, Fragment } from 'frontend-hamroun';`,
+      'esbuild.config.js': `import { build } from 'esbuild';
+
+// Build client
+await build({
+  entryPoints: ['src/client.tsx'],
+  bundle: true,
+  outfile: 'dist/client.js',
+  platform: 'browser',
+  format: 'esm',
+  minify: false,
+  jsx: 'transform',
+  jsxFactory: 'jsx',
+  jsxFragment: 'Fragment',
+  inject: ['./jsx-shim.js'],
+});
+
+// Build server
+await build({
+  entryPoints: ['src/server.ts'],
+  bundle: true,
+  outfile: 'dist/server.js',
+  platform: 'node',
+  format: 'esm',
+  external: ['frontend-hamroun'],
+  packages: 'external',
+  minify: false,
+  jsx: 'transform',
+  jsxFactory: 'jsx',
+  jsxFragment: 'Fragment',
+  inject: ['./jsx-shim.js'],
+});
+
+console.log('Build completed successfully!');`,
+      'vite.config.ts': `import { defineConfig } from 'vite';
+import path from 'path';
+
+export default defineConfig({
+  build: {
+    target: 'es2022',
+    rollupOptions: {
+      input: {
+        client: 'src/client.tsx',
+        server: 'src/server.ts'
+      },
+      output: {
+        format: 'es'
+      }
+    }
+  },
+  esbuild: {
+    jsx: 'transform',
+    jsxFactory: 'jsx',
+    jsxFragment: 'Fragment',
+    jsxImportSource: 'frontend-hamroun',
+  },
+  ssr: {
+    noExternal: ['frontend-hamroun']
+  },
+  optimizeDeps: {
+    include: ['frontend-hamroun'],
+    exclude: []
+  },
+  resolve: {
+    alias: {
+      'frontend-hamroun/jsx-dev-runtime': 'frontend-hamroun',
+      'frontend-hamroun/jsx-runtime': 'frontend-hamroun'
+    }
+  },
+  define: {
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
+  }
+});`,
+      'tsconfig.json': {
+        compilerOptions: {
+          target: 'ES2022',
+          lib: ['ES2022', 'DOM', 'DOM.Iterable'],
+          allowJs: true,
+          skipLibCheck: true,
+          esModuleInterop: true,
+          allowSyntheticDefaultImports: true,
+          strict: true,
+          forceConsistentCasingInFileNames: true,
+          module: 'ESNext',
+          moduleResolution: 'node',
+          resolveJsonModule: true,
+          isolatedModules: true,
+          noEmit: true,
+          jsx: 'preserve',
+          declaration: true,
+          outDir: './dist',
+          rootDir: './src',
+          baseUrl: '.',
+          paths: {
+            '@/*': ['./src/*']
+          }
+        },
+        include: ['src/**/*'],
+        exclude: ['node_modules', 'dist']
+      },
+      'tsconfig.server.json': {
+        extends: './tsconfig.json',
+        compilerOptions: {
+          target: 'ES2022',
+          module: 'ESNext',
+          moduleResolution: 'node',
+          lib: ['ES2022'],
+          types: ['node'],
+          allowJs: true,
+          outDir: './dist',
+          rootDir: './src',
+          esModuleInterop: true,
+          allowSyntheticDefaultImports: true,
+          skipLibCheck: true
+        },
+        include: ['src/server.ts', 'src/**/*.ts'],
+        exclude: ['src/client.tsx', 'node_modules']
+      },
+      'src/App.tsx': `import { useState, useEffect, useRef, useMemo } from 'frontend-hamroun';
+
+// Type definitions
+interface Todo {
+  id: number;
+  text: string;
+  completed: boolean;
+}
+
+interface TodoItemProps {
+  todo: Todo;
+  onToggle: (id: number) => void;
+  onDelete: (id: number) => void;
+}
+
+// Custom hooks for better code organization
+function useTimer(initialTime = 0) {
+  const [time, setTime] = useState(initialTime);
+  const [isRunning, setIsRunning] = useState(false);
+  const intervalRef = useRef(null);
+
+  const start = () => {
+    if (!isRunning) {
+      setIsRunning(true);
+      intervalRef.current = setInterval(() => {
+        setTime(prev => prev + 1);
+      }, 1000);
+    }
+  };
+
+  const stop = () => {
+    if (isRunning) {
+      setIsRunning(false);
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    }
+  };
+
+  const reset = () => {
+    stop();
+    setTime(0);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
+
+  const formattedTime = useMemo(() => {
+    const minutes = Math.floor(time / 60);
+    const seconds = time % 60;
+    return \`\${minutes.toString().padStart(2, '0')}:\${seconds.toString().padStart(2, '0')}\`;
+  }, [time]);
+
+  return { time, formattedTime, isRunning, start, stop, reset };
+}
+
+function useCounter(initialValue = 0, step = 1) {
+  const [count, setCount] = useState(initialValue);
+  
+  const increment = () => setCount(prev => prev + step);
+  const decrement = () => setCount(prev => prev - step);
+  const reset = () => setCount(initialValue);
+  const setValue = (value: number | ((prev: number) => number)) => setCount(value);
+
+  return { count, increment, decrement, reset, setValue };
+}
+
+function useTodos() {
+  const [todos, setTodos] = useState([
+    { id: 1, text: 'Learn Frontend Hamroun', completed: false },
+    { id: 2, text: 'Build SSR app', completed: true },
+    { id: 3, text: 'Deploy to production', completed: false }
+  ]);
+  const [filter, setFilter] = useState('all');
+
+  const addTodo = (text: any) => {
+    const textString = String(text || '');
+    if (textString.trim()) {
+      setTodos(prev => [...prev, {
+        id: Date.now(),
+        text: textString.trim(),
+        completed: false
+      }]);
+    }
+  };
+
+  const toggleTodo = (id: number) => {
+    setTodos(prev => prev.map(todo => 
+      todo.id === id ? { ...todo, completed: !todo.completed } : todo
+    ));
+  };
+
+  const deleteTodo = (id: number) => {
+    setTodos(prev => prev.filter(todo => todo.id !== id));
+  };
+
+  const filteredTodos = useMemo(() => {
+    const todoArray = Array.isArray(todos) ? todos : [];
+    
+    switch (filter) {
+      case 'active':
+        return todoArray.filter(todo => !todo.completed);
+      case 'completed':
+        return todoArray.filter(todo => todo.completed);
+      default:
+        return todoArray;
+    }
+  }, [todos, filter]);
+
+  const stats = useMemo(() => {
+    const todoArray = Array.isArray(todos) ? todos : [];
+    const total = todoArray.length;
+    const completed = todoArray.filter(todo => todo.completed).length;
+    const active = total - completed;
+    return { total, completed, active };
+  }, [todos]);
+
+  return {
+    todos: filteredTodos,
+    filter,
+    setFilter,
+    addTodo,
+    toggleTodo,
+    deleteTodo,
+    stats
+  };
+}
+
+function useTheme() {
+  const [theme, setTheme] = useState('light');
+  
+  const toggleTheme = () => {
+    setTheme(prev => prev === 'light' ? 'dark' : 'light');
+  };
+
+  const themeColors = useMemo(() => {
+    return theme === 'light' ? {
+      bg: '#ffffff',
+      text: '#333333',
+      primary: '#3498db',
+      secondary: '#e8f4fd',
+      border: '#e1e1e1',
+      accent: '#2ecc71'
+    } : {
+      bg: '#1a1a1a',
+      text: '#ffffff',
+      primary: '#5dade2',
+      secondary: '#2c3e50',
+      border: '#404040',
+      accent: '#58d68d'
+    };
+  }, [theme]);
+
+  return { theme, toggleTheme, colors: themeColors };
+}
+
+// Todo Item Component
+function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) {
+  return (
+    <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      padding: '0.75rem',
+      border: '1px solid #e1e1e1',
+      borderRadius: '6px',
+      marginBottom: '0.5rem',
+      background: todo.completed ? '#f8f9fa' : 'white',
+      textDecoration: todo.completed ? 'line-through' : 'none',
+      opacity: todo.completed ? 0.7 : 1,
+      transition: 'all 0.2s ease'
+    }}>
+      <input
+        type="checkbox"
+        checked={todo.completed}
+        onChange={() => onToggle(todo.id)}
+        style={{ marginRight: '0.75rem' }}
+      />
+      <span style={{ flex: 1, color: "black" }}>{todo.text}</span>
+      <button
+        onClick={() => onDelete(todo.id)}
+        style={{
+          background: '#e74c3c',
+          color: 'white',
+          border: 'none',
+          borderRadius: '4px',
+          padding: '0.25rem 0.5rem',
+          cursor: 'pointer',
+          fontSize: '0.8rem'
+        }}
+      >
+        Delete
+      </button>
+    </div>
+  );
+}
+
+// Stats Component
+function StatsCard({ title, value, color = '#3498db' }: { title: string; value: string | number; color?: string }) {
+  return (
+    <div style={{
+      background: 'white',
+      padding: '1.5rem',
+      borderRadius: '12px',
+      boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
+      textAlign: 'center',
+      border: \`3px solid \${color}\`,
+      transition: 'transform 0.2s ease, box-shadow 0.2s ease'
+    }}>
+      <h3 style={{ 
+        margin: '0 0 0.5rem 0', 
+        color: color,
+        fontSize: '0.9rem',
+        textTransform: 'uppercase',
+        letterSpacing: '1px'
+      }}>
+        {title}
+      </h3>
+      <div style={{ 
+        fontSize: '2.5rem', 
+        fontWeight: 'bold', 
+        color: color,
+        fontFamily: 'monospace'
+      }}>
+        {value}
+      </div>
+    </div>
+  );
+}
+
+// Main App Component
+export function App() {
+  const { count, increment, decrement, reset, setValue } = useCounter(0, 1);
+  const { time, formattedTime, isRunning, start, stop, reset: resetTimer } = useTimer();
+  const { todos, filter, setFilter, addTodo, toggleTodo, deleteTodo, stats } = useTodos();
+  const { theme, toggleTheme, colors } = useTheme();
+  
+  const [newTodo, setNewTodo] = useState('');
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const inputRef = useRef(null);
+
+  const handleTodoSubmit = (e: any) => {
+    e.preventDefault();
+    const todoText = String(newTodo || '');
+    addTodo(todoText);
+    setNewTodo('');
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+
+  const [step, setStep] = useState(1);
+  
+  useEffect(() => {
+    console.log('App mounted - Frontend Hamroun SSR working!');
+    return () => console.log('App unmounted');
+  }, []);
+
+  return (
+    <div style={{
+      minHeight: '100vh',
+      background: \`linear-gradient(135deg, \${colors.primary} 0%, \${colors.accent} 100%)\`,
+      padding: '2rem',
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      color: colors.text,
+      transition: 'all 0.3s ease'
+    }}>
+      <div style={{
+        maxWidth: '1200px',
+        margin: '0 auto',
+        background: colors.bg,
+        borderRadius: '20px',
+        padding: '2rem',
+        boxShadow: '0 20px 40px rgba(0,0,0,0.1)',
+        border: \`1px solid \${colors.border}\`
+      }}>
+        {/* Header */}
+        <div style={{
+          textAlign: 'center',
+          marginBottom: '3rem',
+          position: 'relative'
+        }}>
+          <h1 style={{
+            fontSize: '3rem',
+            fontWeight: 'bold',
+            margin: '0 0 0.5rem 0',
+            background: \`linear-gradient(45deg, \${colors.primary}, \${colors.accent})\`,
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+            backgroundClip: 'text'
+          }}>
+            🚀 Frontend Hamroun SSR
+          </h1>
+          <p style={{
+            fontSize: '1.2rem',
+            color: colors.text,
+            opacity: 0.8,
+            margin: 0
+          }}>
+            Advanced SSR Template with Hooks & Modern Design
+          </p>
+          
+          <button
+            onClick={toggleTheme}
+            style={{
+              position: 'absolute',
+              top: '0',
+              right: '0',
+              background: colors.secondary,
+              border: \`2px solid \${colors.border}\`,
+              borderRadius: '50px',
+              padding: '0.5rem 1rem',
+              cursor: 'pointer',
+              fontSize: '0.9rem',
+              color: colors.text,
+              transition: 'all 0.2s ease'
+            }}
+          >
+            {theme === 'light' ? '🌙' : '☀️'} {theme === 'light' ? 'Dark' : 'Light'}
+          </button>
+        </div>
+
+        {/* Stats Overview */}
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+          gap: '1.5rem',
+          marginBottom: '3rem'
+        }}>
+          <StatsCard title="Counter" value={count} color={colors.primary} />
+          <StatsCard title="Timer" value={formattedTime} color={colors.accent} />
+          <StatsCard title="Total Todos" value={stats.total} color="#f39c12" />
+          <StatsCard title="Completed" value={stats.completed} color="#27ae60" />
+        </div>
+
+        {/* Rest of the component... */}
+      </div>
+    </div>
+  );
+}`,
+      'src/server.ts': `import express from 'express';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { renderToString, jsx } from 'frontend-hamroun';
+import { App } from './App.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const app = express();
+const port = 3000;
+
+app.use(express.static(path.join(__dirname)));
+
+app.get('/', async (req, res) => {
+  try {
+    const appElement = jsx(App, {});
+    const html = await renderToString(appElement);
+    
+    res.send(\`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>Frontend Hamroun SSR - Advanced Template</title>
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <meta name="description" content="Advanced SSR template with hooks, modern design, and interactive components">
+        </head>
+        <body>
+          <div id="root">\${html}</div>
+          <script type="module" src="/client.js"></script>
+        </body>
+      </html>
+    \`);
+  } catch (error) {
+    console.error('Server-side rendering error:', error);
+    res.status(500).send('Error rendering page');
+  }
+});
+
+app.listen(port, () => {
+  console.log(\`Server running at http://localhost:\${port}\`);
+});`,
+      'src/client.tsx': `import { hydrate, jsx } from 'frontend-hamroun';
+import { App } from './App.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const root = document.getElementById('root');
+  if (root) {
+    try {
+      const appElement = jsx(App, {});
+      hydrate(appElement, root);
+      console.log('✅ Client hydrated successfully!');
+    } catch (error) {
+      console.error('❌ Hydration failed:', error);
+    }
+  }
+});`,
+      'README.md': `# Frontend Hamroun SSR Template
+
+🚀 Advanced SSR template with hooks, modern design, and interactive components.
+
+## Features
+
+- ✅ Server-Side Rendering (SSR)
+- ✅ Client-Side Hydration
+- ✅ React-like Hooks (useState, useEffect, useRef, useMemo)
+- ✅ Modern TypeScript Support
+- ✅ Interactive Components (Counter, Timer, Todo List)
+- ✅ Theme Switching (Light/Dark)
+- ✅ Responsive Design
+- ✅ Performance Optimized
+
+## Getting Started
+
+\`\`\`bash
+# Install dependencies
+npm install
+
+# Build the application
+npm run build
+
+# Start the development server
+npm run dev
+\`\`\`
+
+Visit http://localhost:3000 to see your app.
+
+## Project Structure
+
+\`\`\`
+src/
+  ├── App.tsx          # Main application component
+  ├── server.ts        # Express server with SSR
+  └── client.tsx       # Client-side hydration
+dist/                  # Built files
+esbuild.config.js      # Build configuration
+\`\`\`
+
+## Available Scripts
+
+- \`npm run dev\` - Build and start development server
+- \`npm run build\` - Build for production
+- \`npm run start\` - Start the server
+- \`npm run clean\` - Clean and reinstall dependencies
+
+## Custom Hooks
+
+The template includes several custom hooks:
+
+- \`useTimer\` - Timer/stopwatch functionality
+- \`useCounter\` - Counter with step controls
+- \`useTodos\` - Todo list management
+- \`useTheme\` - Theme switching
+
+## Learn More
+
+- [Frontend Hamroun Documentation](https://github.com/hamroun96/frontend-hamroun)
+- [TypeScript Documentation](https://www.typescriptlang.org/)
+- [Express.js Documentation](https://expressjs.com/)
+`
+    }
+  },
+  fullstack: {
+    name: 'Full-Stack App',
+    description: 'Complete full-stack application with API routes, database, and authentication',
+    files: {
+      'package.json': {
+        name: 'fullstack-app',
+        version: '1.0.0',
+        type: 'module',
+        scripts: {
+          dev: 'node server.js',
+          start: 'node server.js',
+          build: 'echo "No build step required"'
+        },
+        dependencies: {
+          'frontend-hamroun': 'latest',
+          baraqex: 'latest'
+        }
+      },
+      'server.js': `import { createDevServer } from 'baraqex/server';
+
+const server = createDevServer({
+  port: 3000,
+  enableCors: true
+});
+
+// Enable SSR with hydration
+server.enableSSR({ hydratable: true });
+
+// Start the server
+server.start().then(() => {
+  console.log('Full-stack server started!');
+});`,
+      'src/pages/index.js': `import { jsx, useState } from 'frontend-hamroun';
+
+export default function HomePage(props) {
+  const [count, setCount] = useState(0);
+  
+  return jsx('div', { style: { padding: '2rem', textAlign: 'center' } },
+    jsx('h1', null, 'Welcome to Your Full-Stack App!'),
+    jsx('p', null, \`Counter: \${count}\`),
+    jsx('button', { 
+      onclick: () => setCount(count + 1),
+      style: { padding: '0.5rem 1rem', margin: '0.5rem' }
+    }, 'Increment'),
+    jsx('button', { 
+      onclick: () => setCount(count - 1),
+      style: { padding: '0.5rem 1rem', margin: '0.5rem' }
+    }, 'Decrement')
+  );
+}`,
+      'src/api/hello.js': `export function get(req, res) {
+  res.json({ message: 'Hello from API!' });
+}
+
+export function post(req, res) {
+  const { name } = req.body;
+  res.json({ message: \`Hello \${name || 'World'}!\` });
+}`,
+      'README.md': `# Full-Stack Frontend Hamroun App
+
+A complete full-stack application with API routes and SSR.
+
+## Features
+
+- Server-side rendering
+- API routes in \`src/api/\`
+- Page-based routing in \`src/pages/\`
+- Client-side hydration
+
+## Getting Started
+
+\`\`\`bash
+npm install
+npm run dev
+\`\`\`
+
+Visit:
+- http://localhost:3000 - Homepage
+- http://localhost:3000/api/hello - API endpoint
+`
+    }
+  }
+};
+
 // Create default templates if they don't exist
 async function createDefaultTemplates(templatesPath) {
   // Templates are now created as actual directories and files