frontend-hamroun 1.1.11 → 1.1.13

package/README.md

@@ -8,6 +8,23 @@ A lightweight Virtual DOM and hooks implementation with JSX support.
 npm install your-package-name
 ```
 
+## Quick Start
+
+Create a new project using:
+
+```bash
+npx create-frontend-app my-app
+# or
+npm create frontend-app@latest my-app
+```
+Then:
+
+```bash
+cd my-app
+npm install
+npm run dev
+```
+
 ## Usage
 
 ```jsx
@@ -220,4 +237,4 @@ MIT License - feel free to use in any project.
 ## Contributing
 
 Contributions are welcome! Please read our contributing guidelines and submit pull requests.
-````
+`````

package/bin/cli.js

@@ -2,111 +2,72 @@
 
 import { Command } from 'commander';
 import inquirer from 'inquirer';
-import chalk from 'chalk';
 import fs from 'fs-extra';
 import path from 'path';
-import { createSpinner } from 'nanospinner';
 import { fileURLToPath } from 'url';
-import { dirname } from 'path';
+import chalk from 'chalk';
+import { createSpinner } from 'nanospinner';
 
 const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+const __dirname = path.dirname(__filename);
+
+async function init() {
+  const program = new Command();
+
+  program
+    .name('create-frontend-app')
+    .description('Create a new Frontend Hamroun application')
+    .argument('[name]', 'Project name')
+    .action(async (name) => {
+      const projectName = name || await askProjectName();
+      await createProject(projectName);
+    });
 
-const program = new Command();
+  program.parse();
+}
 
-const CHOICES = {
-  SPA: 'Single Page Application',
-  COMPONENT: 'Component Library'
-};
+async function askProjectName() {
+  const { projectName } = await inquirer.prompt([{
+    type: 'input',
+    name: 'projectName',
+    message: 'What is your project named?',
+    default: 'my-frontend-app'
+  }]);
+  return projectName;
+}
 
-async function createProject(projectName, options) {
+async function createProject(projectName) {
   const spinner = createSpinner('Creating project...').start();
-  
-  try {
-    // Validate project name
-    if (!projectName) {
-      spinner.error({ text: 'Project name is required' });
-      process.exit(1);
-    }
 
+  try {
+    const templateDir = path.join(__dirname, '..', 'templates', 'basic-app');
     const targetDir = path.join(process.cwd(), projectName);
 
-    // Check if directory exists
-    if (fs.existsSync(targetDir)) {
-      spinner.error({ text: 'Directory already exists!' });
-      process.exit(1);
-    }
+    // Create project directory
+    await fs.ensureDir(targetDir);
 
-    // Get template path
-    const templatePath = path.join(__dirname, '../templates', options.template.toLowerCase());
-    
-    // Ensure template exists
-    if (!fs.existsSync(templatePath)) {
-      spinner.error({ text: 'Template not found!' });
-      process.exit(1);
-    }
-
-    // Copy template
-    await fs.copy(templatePath, targetDir);
+    // Copy template files
+    await fs.copy(templateDir, targetDir);
 
     // Update package.json
-    const packageJsonPath = path.join(targetDir, 'package.json');
-    const packageJson = await fs.readJson(packageJsonPath);
-    packageJson.name = projectName;
-    await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+    const pkgPath = path.join(targetDir, 'package.json');
+    const pkg = await fs.readJson(pkgPath);
+    pkg.name = projectName;
+    await fs.writeJson(pkgPath, pkg, { spaces: 2 });
 
     spinner.success({ text: `Project ${chalk.green(projectName)} created successfully!` });
-    
+
+    // Show next steps
     console.log('\nNext steps:');
-    console.log(`  cd ${projectName}`);
-    console.log('  npm install');
-    console.log('  npm run dev\n');
+    console.log(chalk.cyan(`  cd ${projectName}`));
+    console.log(chalk.cyan('  npm install'));
+    console.log(chalk.cyan('  npm run dev'));
 
   } catch (error) {
-    spinner.error({ text: `Error: ${error.message}` });
+    spinner.error({ text: 'Failed to create project' });
+    console.error(chalk.red(error));
     process.exit(1);
   }
 }
 
-program
-  .name('frontend-hamroun')
-  .description('CLI for Frontend Hamroun Framework')
-  .version('1.0.0');
-
-program
-  .command('create <project-name>')
-  .description('Create a new project')
-  .action(async (projectName) => {
-    const answers = await inquirer.prompt([
-      {
-        type: 'list',
-        name: 'template',
-        message: 'What type of project do you want to create?',
-        choices: Object.values(CHOICES)
-      }
-    ]);
-
-    await createProject(projectName, {
-      template: answers.template === CHOICES.SPA ? 'spa' : 'component'
-    });
-  });
-
-program
-  .command('dev')
-  .description('Start development server')
-  .action(() => {
-    const spinner = createSpinner('Starting development server...').start();
-    // Add dev server logic here
-    spinner.success({ text: 'Development server started on http://localhost:3000' });
-  });
-
-program
-  .command('build')
-  .description('Build for production')
-  .action(() => {
-    const spinner = createSpinner('Building for production...').start();
-    // Add build logic here
-    spinner.success({ text: 'Build complete!' });
-  });
-
-program.parse(process.argv);
+init().catch(console.error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend-hamroun",
-  "version": "1.1.11",
+  "version": "1.1.13",
   "description": "A lightweight frontend framework with hooks and virtual DOM",
   "type": "module",
   "main": "./dist/index.js",

package/templates/basic-app/index.html

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

package/templates/basic-app/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "my-app",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "frontend-hamroun": "^1.1.11"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "vite": "^4.4.9"
+  }
+}

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

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'frontend-hamroun';
+
+export function Counter({ initial = 0 }) {
+  const [count, setCount] = useState(initial);
+  
+  useEffect(() => {
+    document.title = `Count: ${count}`;
+  }, [count]);
+
+  return (
+    <div>
+      <h2>Counter Component</h2>
+      <button onClick={() => setCount(count - 1)}>-</button>
+      <span style={{ margin: '0 10px' }}>{count}</span>
+      <button onClick={() => setCount(count + 1)}>+</button>
+    </div>
+  );
+}

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

@@ -0,0 +1,18 @@
+import { render, useState } from 'frontend-hamroun';
+
+function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <h1>Welcome to Frontend Hamroun</h1>
+      <div>
+        <button onClick={() => setCount(count - 1)}>-</button>
+        <span style={{ margin: '0 10px' }}>{count}</span>
+        <button onClick={() => setCount(count + 1)}>+</button>
+      </div>
+    </div>
+  );
+}
+
+render(<App />, document.getElementById('root')!);

package/templates/basic-app/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "preserve",
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}

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

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  esbuild: {
+    jsxFactory: 'jsx',
+    jsxFragment: 'Fragment'
+  }
+});