frontend-hamroun 1.2.16 → 1.2.18

package/README.md

@@ -13,6 +13,10 @@ A lightweight JavaScript framework with Virtual DOM and hooks implementation ins
 
 
 
+
+
+
+
 ```bash
 npm install frontend-hamroun
 ```

package/bin/cli.js

@@ -0,0 +1,691 @@
+#!/usr/bin/env node
+
+import { Command } from 'commander';
+import inquirer from 'inquirer';
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import chalk from 'chalk';
+import { createSpinner } from 'nanospinner';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Component templates
+const FUNCTION_COMPONENT_TEMPLATE = (name) => `import { useState, useEffect } from 'frontend-hamroun';
+
+export function ${name}(props) {
+  // State hooks
+  const [state, setState] = useState(null);
+
+  // Effect hooks
+  useEffect(() => {
+    // Component mounted
+    return () => {
+      // Component will unmount
+    };
+  }, []);
+
+  return (
+    <div className="${name.toLowerCase()}">
+      <h2>${name} Component</h2>
+      {/* Your JSX here */}
+    </div>
+  );
+}
+`;
+
+const CSS_TEMPLATE = (name) => `.${name.toLowerCase()} {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  margin: 0.5rem;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+`;
+
+const TEST_TEMPLATE = (name) => `import { render, screen } from '@testing-library/frontend-hamroun';
+import { ${name} } from './${name}';
+
+describe('${name} Component', () => {
+  test('renders correctly', () => {
+    render(<${name} />);
+    const element = screen.getByText('${name} Component');
+    expect(element).toBeInTheDocument();
+  });
+});
+`;
+
+// Dockerfile templates
+const DOCKERFILE_TEMPLATE = `# Stage 1: Build the application
+FROM node:18-alpine as build
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files
+COPY package.json package-lock.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source files
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Stage 2: Serve the application
+FROM nginx:alpine
+
+# Copy the build output from the previous stage
+COPY --from=build /app/dist /usr/share/nginx/html
+
+# Expose port 80
+EXPOSE 80
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]
+`;
+
+const SSR_DOCKERFILE_TEMPLATE = `# Stage 1: Build the application
+FROM node:18-alpine as build
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files
+COPY package.json package-lock.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source files
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Stage 2: Run the server
+FROM node:18-alpine
+
+WORKDIR /app
+
+# Copy package files and install production dependencies only
+COPY package.json package-lock.json ./
+RUN npm ci --production
+
+# Copy build artifacts
+COPY --from=build /app/dist ./dist
+COPY --from=build /app/server ./server
+
+# Expose port 3000
+EXPOSE 3000
+
+# Start the server
+CMD ["node", "server/index.js"]
+`;
+
+async function init() {
+  const program = new Command();
+
+  program
+    .name('frontend-hamroun')
+    .description('CLI for Frontend Hamroun framework')
+    .version('1.0.0');
+
+  // Create new project
+  program
+    .command('create')
+    .description('Create a new Frontend Hamroun application')
+    .argument('[name]', 'Project name')
+    .action(async (name) => {
+      const projectName = name || await askProjectName();
+      await createProject(projectName);
+    });
+
+  // Generate component
+  program
+    .command('generate')
+    .alias('g')
+    .description('Generate a new component')
+    .argument('<name>', 'Component name')
+    .option('-d, --directory <directory>', 'Target directory', './src/components')
+    .action(async (name, options) => {
+      await generateComponent(name, options.directory);
+    });
+
+  // Add Dockerfile
+  program
+    .command('docker')
+    .description('Add Dockerfile to project')
+    .option('-s, --ssr', 'Use SSR-compatible Dockerfile')
+    .action(async (options) => {
+      await addDockerfile(options.ssr);
+    });
+
+  // Add generate API route command
+  program
+    .command('api')
+    .description('Generate a new API route')
+    .argument('<name>', 'API route name (e.g., users or users/[id])')
+    .option('-d, --directory <directory>', 'Target directory', './api')
+    .action(async (name, options) => {
+      await generateApiRoute(name, options.directory);
+    });
+
+  // Interactive mode if no command provided
+  if (process.argv.length <= 2) {
+    await interactiveMode();
+  } else {
+    program.parse();
+  }
+}
+
+async function interactiveMode() {
+  const { action } = await inquirer.prompt([{
+    type: 'list',
+    name: 'action',
+    message: 'What would you like to do?',
+    choices: [
+      { name: 'Create a new project', value: 'create' },
+      { name: 'Generate a component', value: 'generate' },
+      { name: 'Generate an API route', value: 'api' },
+      { name: 'Add Dockerfile to project', value: 'docker' }
+    ]
+  }]);
+
+  if (action === 'create') {
+    const projectName = await askProjectName();
+    await createProject(projectName);
+  } else if (action === 'generate') {
+    const { name } = await inquirer.prompt([{
+      type: 'input',
+      name: 'name',
+      message: 'Component name:',
+      validate: (input) => input ? true : 'Component name is required'
+    }]);
+    
+    const { directory } = await inquirer.prompt([{
+      type: 'input',
+      name: 'directory',
+      message: 'Target directory:',
+      default: './src/components'
+    }]);
+    
+    await generateComponent(name, directory);
+  } else if (action === 'api') {
+    const { name } = await inquirer.prompt([{
+      type: 'input',
+      name: 'name',
+      message: 'API route name:',
+      validate: (input) => input ? true : 'API route name is required'
+    }]);
+    
+    const { directory } = await inquirer.prompt([{
+      type: 'input',
+      name: 'directory',
+      message: 'Target directory:',
+      default: './api'
+    }]);
+    
+    await generateApiRoute(name, directory);
+  } else if (action === 'docker') {
+    const { isSSR } = await inquirer.prompt([{
+      type: 'confirm',
+      name: 'isSSR',
+      message: 'Is this a server-side rendered app?',
+      default: false
+    }]);
+    
+    await addDockerfile(isSSR);
+  }
+}
+
+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 askProjectType() {
+  const { template } = await inquirer.prompt([{
+    type: 'list',
+    name: 'template',
+    message: 'Select project type:',
+    choices: [
+      { name: 'Client Side App', value: 'basic-app' },
+      { name: 'Server Side Rendered App', value: 'ssr-template' },
+      { name: 'Full Stack App', value: 'fullstack-app' }
+    ]
+  }]);
+  return template;
+}
+
+async function createProject(projectName) {
+  const spinner = createSpinner('Creating project...').start();
+
+  try {
+    const template = await askProjectType();
+    const templateDir = path.join(__dirname, '..', 'templates', template);
+    const targetDir = path.join(process.cwd(), projectName);
+
+    // Create project directory
+    await fs.ensureDir(targetDir);
+
+    // Copy template files
+    await fs.copy(templateDir, targetDir);
+
+    // Update package.json
+    const pkgPath = path.join(targetDir, 'package.json');
+    const pkg = await fs.readJson(pkgPath);
+    pkg.name = projectName;
+    await fs.writeJson(pkgPath, pkg, { spaces: 2 });
+
+    // Automatically add Dockerfile
+    const isSSR = template === 'ssr-template';
+    const dockerContent = isSSR ? SSR_DOCKERFILE_TEMPLATE : DOCKERFILE_TEMPLATE;
+    await fs.writeFile(path.join(targetDir, 'Dockerfile'), dockerContent);
+
+    spinner.success({ text: `Project ${chalk.green(projectName)} created successfully with Dockerfile!` });
+
+    // Show next steps
+    console.log('\nNext steps:');
+    console.log(chalk.cyan(`  cd ${projectName}`));
+    console.log(chalk.cyan('  npm install'));
+    console.log(chalk.cyan('  npm run dev'));
+    console.log(chalk.yellow('\nTo build Docker image:'));
+    console.log(chalk.cyan('  docker build -t my-app .'));
+    console.log(chalk.cyan('  docker run -p 3000:' + (isSSR ? '3000' : '80') + ' my-app'));
+
+  } catch (error) {
+    spinner.error({ text: 'Failed to create project' });
+    console.error(chalk.red(error));
+    process.exit(1);
+  }
+}
+
+async function generateComponent(name, directory) {
+  const spinner = createSpinner(`Generating ${name} component...`).start();
+
+  try {
+    const targetDir = path.join(process.cwd(), directory, name);
+    
+    // Create component directory
+    await fs.ensureDir(targetDir);
+    
+    // Create component files
+    await fs.writeFile(
+      path.join(targetDir, `${name}.jsx`),
+      FUNCTION_COMPONENT_TEMPLATE(name)
+    );
+    
+    await fs.writeFile(
+      path.join(targetDir, `${name}.css`),
+      CSS_TEMPLATE(name)
+    );
+    
+    await fs.writeFile(
+      path.join(targetDir, `${name}.test.jsx`),
+      TEST_TEMPLATE(name)
+    );
+    
+    await fs.writeFile(
+      path.join(targetDir, 'index.js'),
+      `export { ${name} } from './${name}';\n`
+    );
+    
+    spinner.success({ text: `Component ${chalk.green(name)} generated successfully!` });
+    
+    console.log('\nFiles created:');
+    console.log(chalk.cyan(`  ${path.join(directory, name, `${name}.jsx`)}`));
+    console.log(chalk.cyan(`  ${path.join(directory, name, `${name}.css`)}`));
+    console.log(chalk.cyan(`  ${path.join(directory, name, `${name}.test.jsx`)}`));
+    console.log(chalk.cyan(`  ${path.join(directory, name, 'index.js')}`));
+    
+  } catch (error) {
+    spinner.error({ text: 'Failed to generate component' });
+    console.error(chalk.red(error));
+    process.exit(1);
+  }
+}
+
+async function generateApiRoute(name, directory) {
+  const spinner = createSpinner(`Generating ${name} API route...`).start();
+
+  try {
+    const routePath = name.includes('/') ? name : name;
+    const routeDir = path.dirname(path.join(process.cwd(), directory, routePath));
+    const routeFileName = path.basename(routePath);
+    const targetPath = path.join(routeDir, `${routeFileName}.ts`);
+    
+    // Create directory structure
+    await fs.ensureDir(routeDir);
+    
+    // Create API route file
+    const isDynamic = routeFileName.startsWith('[') && routeFileName.endsWith(']');
+    const template = isDynamic ? DYNAMIC_API_ROUTE_TEMPLATE : API_ROUTE_TEMPLATE;
+    
+    await fs.writeFile(targetPath, template);
+    
+    // Check if server.ts file exists, if not create it
+    const serverFilePath = path.join(process.cwd(), 'server.ts');
+    if (!await fs.pathExists(serverFilePath)) {
+      await fs.writeFile(serverFilePath, SERVER_TEMPLATE);
+      console.log(chalk.green('\nCreated server.ts file with Express setup'));
+      
+      // Create tsconfig.server.json if it doesn't exist
+      const tsconfigPath = path.join(process.cwd(), 'tsconfig.server.json');
+      if (!await fs.pathExists(tsconfigPath)) {
+        await fs.writeFile(tsconfigPath, TSCONFIG_SERVER_TEMPLATE);
+        console.log(chalk.green('Created tsconfig.server.json for server-side TypeScript'));
+      }
+      
+      // Check and update package.json to add server dependencies
+      try {
+        const pkgPath = path.join(process.cwd(), 'package.json');
+        if (await fs.pathExists(pkgPath)) {
+          const pkg = await fs.readJson(pkgPath);
+          
+          // Check if we need to add server dependencies
+          let needsUpdate = false;
+          const serverDeps = {
+            "express": "^4.18.2",
+            "cors": "^2.8.5",
+            "mongodb": "^5.7.0",     // Add MongoDB support
+            "jsonwebtoken": "^9.0.2", // Add JWT support for auth
+            "bcryptjs": "^2.4.3"     // Add password hashing support
+          };
+          
+          const devDeps = {
+            "@types/express": "^4.17.17",
+            "@types/cors": "^2.8.13",
+            "@types/mongodb": "^4.0.7",
+            "@types/jsonwebtoken": "^9.0.3",
+            "@types/bcryptjs": "^2.4.4"
+          };
+          
+          // Add dependencies if needed
+          pkg.dependencies = pkg.dependencies || {};
+          for (const [dep, version] of Object.entries(serverDeps)) {
+            if (!pkg.dependencies[dep]) {
+              pkg.dependencies[dep] = version;
+              needsUpdate = true;
+            }
+          }
+          
+          // Add dev dependencies if needed
+          pkg.devDependencies = pkg.devDependencies || {};
+          for (const [dep, version] of Object.entries(devDeps)) {
+            if (!pkg.devDependencies[dep]) {
+              pkg.devDependencies[dep] = version;
+              needsUpdate = true;
+            }
+          }
+          
+          // Add start script if it doesn't exist
+          pkg.scripts = pkg.scripts || {};
+          if (!pkg.scripts.start) {
+            pkg.scripts.start = "node server.js";
+            needsUpdate = true;
+          }
+          
+          // Save changes if needed
+          if (needsUpdate) {
+            await fs.writeJson(pkgPath, pkg, { spaces: 2 });
+            console.log(chalk.green('Updated package.json with server dependencies'));
+          }
+        } 
+      } catch (error) {
+        console.warn(chalk.yellow('Could not update package.json:', error.message));
+      }
+    }
+    
+    spinner.success({ text: `API route ${chalk.green(name)} generated successfully!` });
+    
+    console.log('\nFile created:');
+    console.log(chalk.cyan(`  ${path.join(directory, routePath)}.ts`));
+    
+  } catch (error) {
+    spinner.error({ text: 'Failed to generate API route' });
+    console.error(chalk.red(error));
+    process.exit(1);
+  }
+}
+
+// Add a server template for Express
+const SERVER_TEMPLATE = `import { server } from 'frontend-hamroun';
+
+async function startServer() {
+  try {
+    // Dynamically import server module
+    const { Server } = await server.getServer();
+    
+    // Create and configure the server
+    const app = new Server({
+      port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
+      apiDir: './api',
+      staticDir: './public',
+      
+      // Enable CORS
+      enableCors: true,
+      corsOptions: {
+        origin: process.env.CORS_ORIGIN || '*', // Set to specific domain in production
+        methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
+        allowedHeaders: ['Content-Type', 'Authorization']
+      },
+      
+      // Uncomment to enable database
+      /*
+      db: {
+        // MongoDB
+        url: process.env.MONGODB_URL || 'mongodb://localhost:27017/my_app',
+        type: 'mongodb'
+        
+        // MySQL
+        // url: process.env.MYSQL_URL || 'mysql://user:password@localhost:3306/my_db',
+        // type: 'mysql'
+        
+        // PostgreSQL
+        // url: process.env.POSTGRES_URL || 'postgres://user:password@localhost:5432/my_db',
+        // type: 'postgres'
+      },
+      */
+      
+      // Uncomment to enable authentication
+      /*
+      auth: {
+        secret: process.env.JWT_SECRET || 'your-secret-key',
+        expiresIn: '7d'
+      }
+      */
+    });
+    
+    // Connect to database if configured
+    if (app.getDatabase()) {
+      await app.getDatabase().connect();
+      console.log('Connected to database');
+    }
+    
+    // Start the server
+    await app.start();
+    
+    console.log('Server running at http://localhost:' + 
+      (process.env.PORT || 3000));
+    
+    // Handle graceful shutdown
+    process.on('SIGINT', async () => {
+      console.log('Shutting down server...');
+      if (app.getDatabase()) {
+        await app.getDatabase().disconnect();
+        console.log('Database connection closed');
+      }
+      await app.stop();
+      console.log('Server stopped');
+      process.exit(0);
+    });
+  } catch (error) {
+    console.error('Failed to start server:', error);
+    process.exit(1);
+  }
+}
+
+startServer();
+`;
+
+async function addDockerfile(isSSR) {
+  const spinner = createSpinner('Adding Dockerfile...').start();
+  
+  try {
+    const dockerContent = isSSR ? SSR_DOCKERFILE_TEMPLATE : DOCKERFILE_TEMPLATE;
+    const targetPath = path.join(process.cwd(), 'Dockerfile');
+    
+    // Check if Dockerfile already exists
+    if (await fs.pathExists(targetPath)) {
+      spinner.stop();
+      const { overwrite } = await inquirer.prompt([{
+        type: 'confirm',
+        name: 'overwrite',
+        message: 'Dockerfile already exists. Overwrite?',
+        default: false
+      }]);
+      
+      if (!overwrite) {
+        console.log(chalk.yellow('Operation cancelled.'));
+        return;
+      }
+      
+      spinner.start();
+    }
+    
+    // Write Dockerfile
+    await fs.writeFile(targetPath, dockerContent);
+    
+    spinner.success({ text: 'Dockerfile added successfully!' });
+    
+    console.log('\nTo build and run Docker image:');
+    console.log(chalk.cyan('  docker build -t my-app .'));
+    console.log(chalk.cyan('  docker run -p 3000:' + (isSSR ? '3000' : '80') + ' my-app'));
+    
+  } catch (error) {
+    spinner.error({ text: 'Failed to add Dockerfile' });
+    console.error(chalk.red(error));
+    process.exit(1);
+  }
+}
+
+// Add API route templates
+const API_ROUTE_TEMPLATE = `import { Request, Response } from 'express';
+
+export const get = (req: Request, res: Response) => {
+  res.json({
+    message: 'This is a GET endpoint',
+    query: req.query,
+    timestamp: new Date().toISOString()
+  });
+};
+
+export const post = (req: Request, res: Response) => {
+  res.json({
+    message: 'This is a POST endpoint',
+    body: req.body,
+    timestamp: new Date().toISOString()
+  });
+};
+
+export const put = (req: Request, res: Response) => {
+  res.json({
+    message: 'This is a PUT endpoint',
+    body: req.body,
+    timestamp: new Date().toISOString()
+  });
+};
+
+export const delete_ = (req: Request, res: Response) => {
+  res.json({
+    message: 'This is a DELETE endpoint',
+    timestamp: new Date().toISOString()
+  });
+};
+
+// You can add middleware that will be applied to all methods
+export const middleware = [
+  // Example middleware
+  (req: Request, res: Response, next: Function) => {
+    console.log(\`\${req.method} \${req.url} - \${new Date().toISOString()}\`);
+    next();
+  }
+];
+`;
+
+const DYNAMIC_API_ROUTE_TEMPLATE = `import { Request, Response } from 'express';
+
+export const get = (req: Request, res: Response) => {
+  res.json({
+    message: 'This is a dynamic route GET endpoint',
+    params: req.params,
+    query: req.query,
+    timestamp: new Date().toISOString()
+  });
+};
+
+export const post = (req: Request, res: Response) => {
+  res.json({
+    message: 'This is a dynamic route POST endpoint',
+    params: req.params,
+    body: req.body,
+    timestamp: new Date().toISOString()
+  });
+};
+
+export const put = (req: Request, res: Response) => {
+  res.json({
+    message: 'This is a dynamic route PUT endpoint',
+    params: req.params,
+    body: req.body,
+    timestamp: new Date().toISOString()
+  });
+};
+
+export const delete_ = (req: Request, res: Response) => {
+  res.json({
+    message: 'This is a dynamic route DELETE endpoint',
+    params: req.params,
+    timestamp: new Date().toISOString()
+  });
+};
+
+// You can add middleware that will be applied to all methods
+export const middleware = [
+  // Example middleware
+  (req: Request, res: Response, next: Function) => {
+    console.log(\`\${req.method} \${req.url} - \${new Date().toISOString()}\`);
+    next();
+  }
+];
+`;
+
+// Add tsconfig.server.json template
+const TSCONFIG_SERVER_TEMPLATE = `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "esModuleInterop": true,
+    "outDir": "./dist",
+    "declaration": true,
+    "sourceMap": true,
+    "noEmit": false,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["server.ts", "api/**/*.ts"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts"]
+}`;
+
+init().catch(console.error);

package/dist/component.d.ts

@@ -8,7 +8,7 @@ export declare class Component {
     setState(newState: any): Promise<void>;
     private _replayEvents;
     private _deepCloneWithEvents;
-    update(): Promise<Text | HTMLElement>;
+    update(): Promise<HTMLElement | Text>;
     private _updateElement;
     render(): any;
 }