frontend-hamroun 1.2.0 → 1.2.2

package/bin/cli.js

@@ -0,0 +1,16 @@
+#!/usr/bin/env node
+
+const path = require('path');
+const fs = require('fs');
+
+try {
+  // Try to load the ESM version
+  import('../dist/cli/index.js')
+    .catch(err => {
+      console.error('Failed to load CLI:', err);
+      process.exit(1);
+    });
+} catch (error) {
+  console.error('Error loading CLI:', error);
+  process.exit(1);
+}

package/dist/cli/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli/index.js

@@ -1 +1,215 @@
-"use strict";
+#!/usr/bin/env node
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
+import readline from 'readline';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+// Get package.json to read version
+const packageJsonPath = path.resolve(__dirname, '../../package.json');
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+// Available templates
+const TEMPLATES = {
+    'basic': 'Basic frontend only template',
+    'full-stack': 'Complete frontend and backend template',
+    'api-only': 'Backend API only template'
+};
+// CLI colors
+const colors = {
+    reset: '\x1b[0m',
+    bright: '\x1b[1m',
+    green: '\x1b[32m',
+    blue: '\x1b[34m',
+    red: '\x1b[31m',
+    yellow: '\x1b[33m'
+};
+// Create readline interface
+function createInterface() {
+    return readline.createInterface({
+        input: process.stdin,
+        output: process.stdout
+    });
+}
+// Print banner
+function printBanner() {
+    console.log(`
+${colors.blue}${colors.bright}╔══════════════════════════════════════════════╗
+║                                              ║
+║   Frontend Hamroun v${packageJson.version.padEnd(25)}║
+║   A lightweight frontend & backend framework  ║
+║                                              ║
+╚══════════════════════════════════════════════╝${colors.reset}
+  `);
+}
+// Print help
+function printHelp() {
+    console.log(`
+${colors.bright}USAGE:${colors.reset}
+  ${colors.blue}npx frontend-hamroun${colors.reset} [command] [options]
+
+${colors.bright}COMMANDS:${colors.reset}
+  ${colors.blue}create${colors.reset} <project-name> [options]  Create a new project
+  ${colors.blue}help${colors.reset}                           Display this help message
+  ${colors.blue}version${colors.reset}                        Display version information
+
+${colors.bright}OPTIONS:${colors.reset}
+  ${colors.blue}--template${colors.reset}, ${colors.blue}-t${colors.reset} <template>       Specify template (default: basic)
+  ${colors.blue}--skip-install${colors.reset}, ${colors.blue}-s${colors.reset}            Skip package installation
+
+${colors.bright}AVAILABLE TEMPLATES:${colors.reset}
+${Object.entries(TEMPLATES).map(([name, desc]) => `  ${colors.blue}${name.padEnd(12)}${colors.reset} ${desc}`).join('\n')}
+
+${colors.bright}EXAMPLES:${colors.reset}
+  ${colors.blue}npx frontend-hamroun create${colors.reset} my-app
+  ${colors.blue}npx frontend-hamroun create${colors.reset} my-app --template full-stack
+  ${colors.blue}npx frontend-hamroun create${colors.reset} my-api -t api-only --skip-install
+  `);
+}
+// Create project from template
+async function createProject(projectName, options) {
+    const template = options.template || 'basic';
+    // Check if template exists
+    if (!Object.keys(TEMPLATES).includes(template)) {
+        console.error(`${colors.red}error:${colors.reset} Template "${template}" not found.`);
+        console.log(`Available templates: ${Object.keys(TEMPLATES).join(', ')}`);
+        process.exit(1);
+    }
+    // Check if project directory already exists
+    const projectPath = path.resolve(process.cwd(), projectName);
+    if (fs.existsSync(projectPath)) {
+        console.error(`${colors.red}error:${colors.reset} Directory ${projectName} already exists.`);
+        process.exit(1);
+    }
+    console.log(`
+${colors.bright}Creating a new project with Frontend Hamroun...${colors.reset}
+${colors.blue}• Project name:${colors.reset} ${projectName}
+${colors.blue}• Template:${colors.reset} ${template}
+${colors.blue}• Directory:${colors.reset} ${projectPath}
+  `);
+    try {
+        // Find templates directory
+        const templateDir = path.resolve(__dirname, '../../templates', template);
+        // Create project directory
+        fs.mkdirSync(projectPath, { recursive: true });
+        // Copy template files
+        copyTemplateFiles(templateDir, projectPath);
+        // Update package.json with project name
+        const projectPackageJsonPath = path.join(projectPath, 'package.json');
+        if (fs.existsSync(projectPackageJsonPath)) {
+            const projectPackageJson = JSON.parse(fs.readFileSync(projectPackageJsonPath, 'utf8'));
+            projectPackageJson.name = projectName;
+            fs.writeFileSync(projectPackageJsonPath, JSON.stringify(projectPackageJson, null, 2));
+        }
+        // Install dependencies
+        if (!options.skipInstall) {
+            console.log(`\n${colors.blue}Installing dependencies...${colors.reset}`);
+            const command = getPackageManager() === 'yarn'
+                ? 'yarn'
+                : 'npm install';
+            execSync(command, {
+                cwd: projectPath,
+                stdio: 'inherit'
+            });
+        }
+        // Success message
+        console.log(`
+${colors.green}${colors.bright}Success!${colors.reset} Created ${projectName} at ${projectPath}
+
+${colors.blue}Inside that directory, you can run several commands:${colors.reset}
+
+  ${colors.bright}npm run dev${colors.reset}
+    Starts the development server.
+
+  ${colors.bright}npm run build${colors.reset}
+    Builds the app for production.
+
+  ${colors.bright}npm start${colors.reset}
+    Runs the built app in production mode.
+
+${colors.blue}We suggest that you begin by typing:${colors.reset}
+
+  ${colors.bright}cd${colors.reset} ${projectName}
+  ${colors.bright}npm run dev${colors.reset}
+
+${colors.green}Happy coding!${colors.reset}
+    `);
+    }
+    catch (error) {
+        console.error(`${colors.red}Failed to create project:${colors.reset}`, error);
+        process.exit(1);
+    }
+}
+// Copy template files recursively
+function copyTemplateFiles(source, destination) {
+    const files = fs.readdirSync(source);
+    for (const file of files) {
+        const sourcePath = path.join(source, file);
+        const destPath = path.join(destination, file);
+        const stats = fs.statSync(sourcePath);
+        if (stats.isDirectory()) {
+            fs.mkdirSync(destPath, { recursive: true });
+            copyTemplateFiles(sourcePath, destPath);
+        }
+        else {
+            fs.copyFileSync(sourcePath, destPath);
+        }
+    }
+    console.log(`${colors.green}•${colors.reset} Copied template files`);
+}
+// Detect package manager
+function getPackageManager() {
+    try {
+        const userAgent = process.env.npm_config_user_agent;
+        if (userAgent && userAgent.startsWith('yarn')) {
+            return 'yarn';
+        }
+        return 'npm';
+    }
+    catch (error) {
+        return 'npm';
+    }
+}
+// Parse command line arguments
+function parseArgs() {
+    const args = process.argv.slice(2);
+    const command = args[0];
+    if (!command || command === 'help') {
+        printBanner();
+        printHelp();
+        process.exit(0);
+    }
+    if (command === 'version') {
+        console.log(`frontend-hamroun v${packageJson.version}`);
+        process.exit(0);
+    }
+    if (command === 'create') {
+        const projectName = args[1];
+        if (!projectName) {
+            console.error(`${colors.red}error:${colors.reset} Project name is required.`);
+            console.log(`Run ${colors.blue}npx frontend-hamroun help${colors.reset} for usage information.`);
+            process.exit(1);
+        }
+        // Parse options
+        const options = {
+            template: 'basic',
+            skipInstall: false
+        };
+        for (let i = 2; i < args.length; i++) {
+            if (args[i] === '--template' || args[i] === '-t') {
+                options.template = args[++i];
+            }
+            else if (args[i] === '--skip-install' || args[i] === '-s') {
+                options.skipInstall = true;
+            }
+        }
+        printBanner();
+        createProject(projectName, options);
+        return;
+    }
+    console.error(`${colors.red}error:${colors.reset} Unknown command: ${command}`);
+    console.log(`Run ${colors.blue}npx frontend-hamroun help${colors.reset} for usage information.`);
+    process.exit(1);
+}
+// Run CLI
+parseArgs();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend-hamroun",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "A lightweight frontend and backend framework for building modern web applications",
   "type": "module",
   "main": "dist/frontend-hamroun.umd.js",
@@ -11,6 +11,7 @@
     "src",
     "templates",
     "scripts",
+    "bin",
     "LICENSE",
     "README.md"
   ],
@@ -22,16 +23,19 @@
     }
   },
   "bin": {
-    "hamroun": "src/cli/index.js"
+    "hamroun": "./bin/cli.js",
+    "frontend-hamroun": "./bin/cli.js"
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build && tsc",
+    "build": "vite build && tsc && npm run build:cli",
+    "build:cli": "node scripts/build-cli.js",
+    "prepublishOnly": "npm run build",
     "test": "jest",
-    "clean": "rimraf dist",
+    "clean": "rimraf dist bin",
     "prebuild": "npm run clean",
-    "prepublish": "npm run build",
-    "generate": "node scripts/generate.js"
+    "generate": "node scripts/generate.js",
+    "publish:next": "npm publish --tag next"
   },
   "keywords": [
     "frontend",

package/scripts/build-cli.js

@@ -0,0 +1,205 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const rootDir = path.resolve(__dirname, '..');
+const binDir = path.resolve(rootDir, 'bin');
+
+// Ensure bin directory exists
+if (!fs.existsSync(binDir)) {
+  fs.mkdirSync(binDir, { recursive: true });
+}
+
+// Create a simple CLI wrapper that doesn't rely on TypeScript
+const cliContent = `#!/usr/bin/env node
+
+const path = require('path');
+const fs = require('fs');
+
+try {
+  // Try to load the ESM version
+  import('../dist/cli/index.js')
+    .catch(err => {
+      console.error('Failed to load CLI:', err);
+      process.exit(1);
+    });
+} catch (error) {
+  console.error('Error loading CLI:', error);
+  process.exit(1);
+}
+`;
+
+// Write CLI file
+fs.writeFileSync(path.join(binDir, 'cli.js'), cliContent, 'utf8');
+
+// Make CLI executable
+try {
+  fs.chmodSync(path.join(binDir, 'cli.js'), '755');
+  console.log('✅ CLI wrapper built successfully: bin/cli.js');
+} catch (error) {
+  console.warn('⚠️ Could not make CLI executable:', error);
+}
+
+// Copy the CLI code to dist directory and compile it
+console.log('🔨 Compiling CLI TypeScript...');
+try {
+  // Ensure dist/cli directory exists
+  const distCliDir = path.resolve(rootDir, 'dist/cli');
+  if (!fs.existsSync(distCliDir)) {
+    fs.mkdirSync(distCliDir, { recursive: true });
+  }
+
+  // Extract TypeScript files needed for CLI
+  const tscCommand = `npx tsc src/cli/index.ts --outDir dist/cli --esModuleInterop --target ES2020 --module NodeNext --moduleResolution NodeNext`;
+  
+  // Execute TypeScript compilation
+  execSync(tscCommand, { stdio: 'inherit' });
+  
+  console.log('✅ CLI TypeScript compiled successfully');
+} catch (error) {
+  console.error('❌ Failed to compile CLI TypeScript:', error);
+  
+  // Create a fallback CLI if TypeScript compilation fails
+  console.log('⚠️ Creating fallback CommonJS CLI...');
+  
+  const fallbackCli = `
+// This is a fallback CLI implementation when TypeScript compilation fails
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+const packageJsonPath = path.resolve(__dirname, '../../package.json');
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+
+// Available templates
+const TEMPLATES = {
+  'basic': 'Basic frontend only template',
+  'full-stack': 'Complete frontend and backend template'
+};
+
+// Colors for console output
+const colors = {
+  reset: '\\x1b[0m',
+  bright: '\\x1b[1m',
+  green: '\\x1b[32m',
+  blue: '\\x1b[34m',
+  red: '\\x1b[31m'
+};
+
+console.log(\`
+\${colors.blue}\${colors.bright}╔══════════════════════════════════════════════╗
+║                                              ║
+║   Frontend Hamroun v\${packageJson.version.padEnd(25)}║
+║   A lightweight frontend & backend framework  ║
+║                                              ║
+╚══════════════════════════════════════════════╝\${colors.reset}
+\`);
+
+const args = process.argv.slice(2);
+const command = args[0];
+
+if (!command || command === 'help') {
+  console.log(\`
+\${colors.bright}USAGE:\${colors.reset}
+  \${colors.blue}npx frontend-hamroun\${colors.reset} create <project-name> [--template <template>]
+
+\${colors.bright}AVAILABLE TEMPLATES:\${colors.reset}
+  \${colors.blue}basic\${colors.reset}      Basic frontend only template
+  \${colors.blue}full-stack\${colors.reset} Complete frontend and backend template
+\`);
+  process.exit(0);
+}
+
+if (command === 'create') {
+  const projectName = args[1];
+  
+  if (!projectName) {
+    console.error(\`\${colors.red}Error:\${colors.reset} Project name is required\`);
+    process.exit(1);
+  }
+  
+  let template = 'basic';
+  for (let i = 2; i < args.length; i++) {
+    if (args[i] === '--template' || args[i] === '-t') {
+      template = args[++i] || 'basic';
+    }
+  }
+  
+  if (!Object.keys(TEMPLATES).includes(template)) {
+    console.error(\`\${colors.red}Error:\${colors.reset} Template "\${template}" not found\`);
+    console.log(\`Available templates: \${Object.keys(TEMPLATES).join(', ')}\`);
+    process.exit(1);
+  }
+  
+  console.log(\`Creating new \${template} project: \${projectName}...\`);
+  
+  try {
+    // Create project directory
+    const projectPath = path.resolve(process.cwd(), projectName);
+    fs.mkdirSync(projectPath, { recursive: true });
+    
+    // Create minimal package.json
+    const pkgJson = {
+      "name": projectName,
+      "version": "0.1.0",
+      "private": true,
+      "dependencies": {
+        "frontend-hamroun": packageJson.version
+      },
+      "scripts": {
+        "dev": "vite",
+        "build": "vite build"
+      }
+    };
+    
+    fs.writeFileSync(
+      path.join(projectPath, 'package.json'),
+      JSON.stringify(pkgJson, null, 2)
+    );
+    
+    console.log(\`
+\${colors.green}\${colors.bright}Success!\${colors.reset} Created project at \${projectPath}
+
+\${colors.blue}Next steps:\${colors.reset}
+  cd \${projectName}
+  npm install
+  npm run dev
+\`);
+    
+  } catch (error) {
+    console.error(\`\${colors.red}Failed to create project:\${colors.reset}\`, error);
+    process.exit(1);
+  }
+} else {
+  console.error(\`\${colors.red}Unknown command:\${colors.reset} \${command}\`);
+  process.exit(1);
+}
+`;
+
+  const distCliDir = path.resolve(rootDir, 'dist/cli');
+  if (!fs.existsSync(distCliDir)) {
+    fs.mkdirSync(distCliDir, { recursive: true });
+  }
+  
+  fs.writeFileSync(path.join(distCliDir, 'index.js'), fallbackCli, 'utf8');
+  console.log('✅ Fallback CLI created successfully');
+}
+
+// Let's make sure we also have template directories
+const templatesDir = path.resolve(rootDir, 'templates');
+const templateList = ['basic', 'full-stack'];
+
+console.log('🔍 Checking template directories...');
+for (const template of templateList) {
+  const templateDir = path.join(templatesDir, template);
+  if (!fs.existsSync(templateDir)) {
+    console.log(`⚠️ Template directory not found: ${templateDir}`);
+  } else {
+    console.log(`✅ Template found: ${template}`);
+  }
+}
+
+console.log('✅ CLI build process completed');

package/src/cli/index.ts

@@ -0,0 +1,257 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
+import readline from 'readline';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Get package.json to read version
+const packageJsonPath = path.resolve(__dirname, '../../package.json');
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+
+// Define interfaces for type safety
+interface ProjectOptions {
+  template: string;
+  skipInstall: boolean;
+}
+
+// Available templates
+const TEMPLATES: Record<string, string> = {
+  'basic': 'Basic frontend only template',
+  'full-stack': 'Complete frontend and backend template',
+  'api-only': 'Backend API only template'
+};
+
+// CLI colors
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  green: '\x1b[32m',
+  blue: '\x1b[34m',
+  red: '\x1b[31m',
+  yellow: '\x1b[33m'
+};
+
+// Create readline interface
+function createInterface(): readline.Interface {
+  return readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+}
+
+// Print banner
+function printBanner(): void {
+  console.log(`
+${colors.blue}${colors.bright}╔══════════════════════════════════════════════╗
+║                                              ║
+║   Frontend Hamroun v${packageJson.version.padEnd(25)}║
+║   A lightweight frontend & backend framework  ║
+║                                              ║
+╚══════════════════════════════════════════════╝${colors.reset}
+  `);
+}
+
+// Print help
+function printHelp(): void {
+  console.log(`
+${colors.bright}USAGE:${colors.reset}
+  ${colors.blue}npx frontend-hamroun${colors.reset} [command] [options]
+
+${colors.bright}COMMANDS:${colors.reset}
+  ${colors.blue}create${colors.reset} <project-name> [options]  Create a new project
+  ${colors.blue}help${colors.reset}                           Display this help message
+  ${colors.blue}version${colors.reset}                        Display version information
+
+${colors.bright}OPTIONS:${colors.reset}
+  ${colors.blue}--template${colors.reset}, ${colors.blue}-t${colors.reset} <template>       Specify template (default: basic)
+  ${colors.blue}--skip-install${colors.reset}, ${colors.blue}-s${colors.reset}            Skip package installation
+
+${colors.bright}AVAILABLE TEMPLATES:${colors.reset}
+${Object.entries(TEMPLATES).map(([name, desc]) => `  ${colors.blue}${name.padEnd(12)}${colors.reset} ${desc}`).join('\n')}
+
+${colors.bright}EXAMPLES:${colors.reset}
+  ${colors.blue}npx frontend-hamroun create${colors.reset} my-app
+  ${colors.blue}npx frontend-hamroun create${colors.reset} my-app --template full-stack
+  ${colors.blue}npx frontend-hamroun create${colors.reset} my-api -t api-only --skip-install
+  `);
+}
+
+// Create project from template
+async function createProject(projectName: string, options: ProjectOptions): Promise<void> {
+  const template = options.template || 'basic';
+  
+  // Check if template exists
+  if (!Object.keys(TEMPLATES).includes(template)) {
+    console.error(`${colors.red}error:${colors.reset} Template "${template}" not found.`);
+    console.log(`Available templates: ${Object.keys(TEMPLATES).join(', ')}`);
+    process.exit(1);
+  }
+  
+  // Check if project directory already exists
+  const projectPath = path.resolve(process.cwd(), projectName);
+  if (fs.existsSync(projectPath)) {
+    console.error(`${colors.red}error:${colors.reset} Directory ${projectName} already exists.`);
+    process.exit(1);
+  }
+  
+  console.log(`
+${colors.bright}Creating a new project with Frontend Hamroun...${colors.reset}
+${colors.blue}• Project name:${colors.reset} ${projectName}
+${colors.blue}• Template:${colors.reset} ${template}
+${colors.blue}• Directory:${colors.reset} ${projectPath}
+  `);
+  
+  try {
+    // Find templates directory
+    const templateDir = path.resolve(__dirname, '../../templates', template);
+    
+    // Create project directory
+    fs.mkdirSync(projectPath, { recursive: true });
+    
+    // Copy template files
+    copyTemplateFiles(templateDir, projectPath);
+    
+    // Update package.json with project name
+    const projectPackageJsonPath = path.join(projectPath, 'package.json');
+    if (fs.existsSync(projectPackageJsonPath)) {
+      const projectPackageJson = JSON.parse(fs.readFileSync(projectPackageJsonPath, 'utf8'));
+      projectPackageJson.name = projectName;
+      fs.writeFileSync(
+        projectPackageJsonPath, 
+        JSON.stringify(projectPackageJson, null, 2)
+      );
+    }
+    
+    // Install dependencies
+    if (!options.skipInstall) {
+      console.log(`\n${colors.blue}Installing dependencies...${colors.reset}`);
+      
+      const command = getPackageManager() === 'yarn' 
+        ? 'yarn' 
+        : 'npm install';
+      
+      execSync(command, { 
+        cwd: projectPath, 
+        stdio: 'inherit' 
+      });
+    }
+    
+    // Success message
+    console.log(`
+${colors.green}${colors.bright}Success!${colors.reset} Created ${projectName} at ${projectPath}
+
+${colors.blue}Inside that directory, you can run several commands:${colors.reset}
+
+  ${colors.bright}npm run dev${colors.reset}
+    Starts the development server.
+
+  ${colors.bright}npm run build${colors.reset}
+    Builds the app for production.
+
+  ${colors.bright}npm start${colors.reset}
+    Runs the built app in production mode.
+
+${colors.blue}We suggest that you begin by typing:${colors.reset}
+
+  ${colors.bright}cd${colors.reset} ${projectName}
+  ${colors.bright}npm run dev${colors.reset}
+
+${colors.green}Happy coding!${colors.reset}
+    `);
+    
+  } catch (error) {
+    console.error(`${colors.red}Failed to create project:${colors.reset}`, error);
+    process.exit(1);
+  }
+}
+
+// Copy template files recursively
+function copyTemplateFiles(source: string, destination: string): void {
+  const files = fs.readdirSync(source);
+  
+  for (const file of files) {
+    const sourcePath = path.join(source, file);
+    const destPath = path.join(destination, file);
+    
+    const stats = fs.statSync(sourcePath);
+    
+    if (stats.isDirectory()) {
+      fs.mkdirSync(destPath, { recursive: true });
+      copyTemplateFiles(sourcePath, destPath);
+    } else {
+      fs.copyFileSync(sourcePath, destPath);
+    }
+  }
+  
+  console.log(`${colors.green}•${colors.reset} Copied template files`);
+}
+
+// Detect package manager
+function getPackageManager(): string {
+  try {
+    const userAgent = process.env.npm_config_user_agent;
+    if (userAgent && userAgent.startsWith('yarn')) {
+      return 'yarn';
+    }
+    return 'npm';
+  } catch (error) {
+    return 'npm';
+  }
+}
+
+// Parse command line arguments
+function parseArgs(): void {
+  const args = process.argv.slice(2);
+  const command = args[0];
+  
+  if (!command || command === 'help') {
+    printBanner();
+    printHelp();
+    process.exit(0);
+  }
+  
+  if (command === 'version') {
+    console.log(`frontend-hamroun v${packageJson.version}`);
+    process.exit(0);
+  }
+  
+  if (command === 'create') {
+    const projectName = args[1];
+    
+    if (!projectName) {
+      console.error(`${colors.red}error:${colors.reset} Project name is required.`);
+      console.log(`Run ${colors.blue}npx frontend-hamroun help${colors.reset} for usage information.`);
+      process.exit(1);
+    }
+    
+    // Parse options
+    const options: ProjectOptions = {
+      template: 'basic',
+      skipInstall: false
+    };
+    
+    for (let i = 2; i < args.length; i++) {
+      if (args[i] === '--template' || args[i] === '-t') {
+        options.template = args[++i];
+      } else if (args[i] === '--skip-install' || args[i] === '-s') {
+        options.skipInstall = true;
+      }
+    }
+    
+    printBanner();
+    createProject(projectName, options);
+    return;
+  }
+  
+  console.error(`${colors.red}error:${colors.reset} Unknown command: ${command}`);
+  console.log(`Run ${colors.blue}npx frontend-hamroun help${colors.reset} for usage information.`);
+  process.exit(1);
+}
+
+// Run CLI
+parseArgs();

package/templates/full-stack/index.html

@@ -0,0 +1,13 @@
+<!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>
+  <link rel="stylesheet" href="/src/main.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+</html>

package/templates/full-stack/package.json

@@ -1,43 +1,50 @@
 {
-  "name": "{{projectName}}",
+  "name": "frontend-hamroun-app",
+  "private": true,
   "version": "0.1.0",
   "description": "{{description}}",
   "author": "{{author}}",
   "license": "MIT",
   "type": "module",
   "scripts": {
-    "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
-    "dev:server": "nodemon --watch src/server --exec \"ts-node src/server/index.ts\"",
-    "dev:client": "vite",
-    "build": "vite build && tsc --project tsconfig.server.json",
-    "start": "node dist/server/index.js",
-    "test": "jest"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "start": "node dist/server.js",
+    "dev:server": "ts-node-esm --transpile-only src/server.ts",
+    "dev:full": "concurrently \"npm run dev\" \"npm run dev:server\""
   },
   "dependencies": {
+    "frontend-hamroun": "latest",
     "express": "^4.18.2",
-    "frontend-hamroun": "^1.0.0",
+    "compression": "^1.7.4",
+    "helmet": "^7.0.0",
+    "morgan": "^1.10.0",
     "mongoose": "^7.0.0",
     "bcrypt": "^5.1.0",
     "jsonwebtoken": "^9.0.0",
-    "compression": "^1.7.4",
     "cookie-parser": "^1.4.6",
-    "dotenv": "^16.0.3",
-    "helmet": "^6.0.1"
+    "dotenv": "^16.0.3"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.10",
+    "@types/express": "^4.17.21",
+    "@types/node": "^20.10.0",
+    "autoprefixer": "^10.4.16",
+    "concurrently": "^8.2.2",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.5",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.3.2",
+    "vite": "^5.0.0",
     "@types/bcrypt": "^5.0.0",
     "@types/compression": "^1.7.2",
     "@types/cookie-parser": "^1.4.3",
-    "@types/express": "^4.17.17",
     "@types/jest": "^29.5.0",
     "@types/jsonwebtoken": "^9.0.1",
-    "@types/node": "^18.15.0",
-    "concurrently": "^7.6.0",
     "jest": "^29.5.0",
     "nodemon": "^2.0.21",
-    "ts-jest": "^29.0.5",
-    "ts-node": "^10.9.1",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.4"
+    "ts-jest": "^29.0.5"
   }
 }

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

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

package/templates/full-stack/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: '/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');
+  }
+});