initkit 1.1.0 → 1.2.0

package/src/utils/cliRunner.js

@@ -0,0 +1,146 @@
+import { spawn } from 'child_process';
+import chalk from 'chalk';
+
+/**
+ * Execute a CLI command with proper error handling and output streaming
+ *
+ * This utility function spawns a child process to run external CLI commands
+ * (like create-next-app, create-vite, etc.) while maintaining proper error
+ * handling and allowing the user to see the output in real-time.
+ *
+ * @param {string} command - The full command to execute (e.g., "npx create-next-app my-app")
+ * @param {Object} [options={}] - Execution options
+ * @param {string} [options.cwd=process.cwd()] - Working directory for the command
+ * @param {string|Array} [options.stdio='inherit'] - How to handle stdin/stdout/stderr
+ * @param {boolean} [options.shell=true] - Whether to run in a shell
+ * @param {Object} [options.env] - Environment variables
+ *
+ * @returns {Promise<void>}
+ * @throws {Error} If command execution fails
+ *
+ * @example
+ * // Bootstrap a Next.js project
+ * await execCommand('npx create-next-app@latest my-app --typescript', {
+ *   cwd: '/path/to/parent/dir'
+ * });
+ *
+ * @example
+ * // Install dependencies
+ * await execCommand('npm install @reduxjs/toolkit react-redux', {
+ *   cwd: '/path/to/project'
+ * });
+ */
+export async function execCommand(command, options = {}) {
+  const {
+    cwd = process.cwd(),
+    stdio = 'inherit',
+    shell = true,
+    env = { ...process.env, FORCE_COLOR: '1', CI: 'true' },
+  } = options;
+
+  return new Promise((resolve, reject) => {
+    // Parse command into executable and arguments
+    const args = command.split(' ');
+    const cmd = args.shift();
+
+    const child = spawn(cmd, args, {
+      cwd,
+      stdio,
+      shell,
+      env,
+    });
+
+    child.on('close', (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(new Error(`Command failed with exit code ${code}: ${chalk.red(command)}`));
+      }
+    });
+
+    child.on('error', (error) => {
+      reject(
+        new Error(`Failed to execute command: ${chalk.red(error.message)}\nCommand: ${command}`)
+      );
+    });
+  });
+}
+
+/**
+ * Execute a command and capture its output
+ *
+ * Unlike execCommand which streams output to the console, this function
+ * captures stdout and stderr and returns them as strings. Useful for
+ * commands where you need to parse the output.
+ *
+ * @param {string} command - The command to execute
+ * @param {Object} [options={}] - Execution options
+ * @param {string} [options.cwd=process.cwd()] - Working directory
+ *
+ * @returns {Promise<{stdout: string, stderr: string}>}
+ * @throws {Error} If command execution fails
+ *
+ * @example
+ * // Get npm version
+ * const { stdout } = await execCommandWithOutput('npm --version');
+ * console.log('npm version:', stdout.trim());
+ */
+export async function execCommandWithOutput(command, options = {}) {
+  const { cwd = process.cwd() } = options;
+
+  return new Promise((resolve, reject) => {
+    const args = command.split(' ');
+    const cmd = args.shift();
+
+    let stdout = '';
+    let stderr = '';
+
+    const child = spawn(cmd, args, {
+      cwd,
+      shell: true,
+      env: { ...process.env },
+    });
+
+    child.stdout?.on('data', (data) => {
+      stdout += data.toString();
+    });
+
+    child.stderr?.on('data', (data) => {
+      stderr += data.toString();
+    });
+
+    child.on('close', (code) => {
+      if (code === 0) {
+        resolve({ stdout, stderr });
+      } else {
+        reject(new Error(`Command failed with exit code ${code}\nStderr: ${stderr}`));
+      }
+    });
+
+    child.on('error', (error) => {
+      reject(new Error(`Failed to execute command: ${error.message}`));
+    });
+  });
+}
+
+/**
+ * Check if a command exists in the system
+ *
+ * @param {string} command - The command to check (e.g., 'npm', 'git')
+ * @returns {Promise<boolean>}
+ *
+ * @example
+ * if (await commandExists('pnpm')) {
+ *   console.log('pnpm is installed');
+ * }
+ */
+export async function commandExists(command) {
+  const checkCmd = process.platform === 'win32' ? `where ${command}` : `which ${command}`;
+
+  try {
+    await execCommandWithOutput(checkCmd);
+    return true;
+  } catch {
+    return false;
+  }
+}

package/src/utils/frameworkBootstrap.js

@@ -0,0 +1,304 @@
+import path from 'path';
+import { execCommand } from './cliRunner.js';
+import chalk from 'chalk';
+
+/**
+ * Bootstrap a project using official framework CLIs
+ *
+ * This function delegates project creation to official framework CLIs
+ * instead of manually creating files. This ensures we always use the
+ * latest best practices and configurations from framework maintainers.
+ *
+ * @param {string} projectPath - Absolute path to the project directory
+ * @param {Object} config - User configuration object
+ * @returns {Promise<void>}
+ */
+export async function bootstrapWithOfficialCLI(projectPath, config) {
+  const { projectType, frontend, backend } = config;
+
+  switch (projectType) {
+    case 'frontend':
+      return bootstrapFrontend(projectPath, config);
+
+    case 'backend':
+      return bootstrapBackend(projectPath, config);
+
+    default:
+      throw new Error(`Unsupported project type: ${projectType}`);
+  }
+}
+
+/**
+ * Bootstrap a frontend project
+ */
+async function bootstrapFrontend(projectPath, config) {
+  const { frontend } = config;
+
+  switch (frontend) {
+    case 'nextjs':
+      return bootstrapNextjs(projectPath, config);
+
+    case 'react':
+      return bootstrapReact(projectPath, config);
+
+    case 'vue':
+      return bootstrapVue(projectPath, config);
+
+    case 'nuxt':
+      return bootstrapNuxt(projectPath, config);
+
+    case 'svelte':
+      return bootstrapSvelte(projectPath, config);
+
+    default:
+      throw new Error(`Unsupported frontend framework: ${frontend}`);
+  }
+}
+
+/**
+ * Bootstrap a backend project
+ */
+async function bootstrapBackend(projectPath, config) {
+  const { backend } = config;
+
+  switch (backend) {
+    case 'express':
+      return bootstrapExpress(projectPath, config);
+
+    case 'nestjs':
+      return bootstrapNestJS(projectPath, config);
+
+    case 'fastify':
+      return bootstrapFastify(projectPath, config);
+
+    default:
+      throw new Error(`Unsupported backend framework: ${backend}`);
+  }
+}
+
+// ============================================
+// Frontend Framework Bootstrappers
+// ============================================
+
+/**
+ * Bootstrap Next.js project using create-next-app
+ *
+ * @param {string} projectPath - Absolute path to project
+ * @param {Object} config - Configuration object
+ */
+export async function bootstrapNextjs(projectPath, config) {
+  const { language, styling, packageManager = 'npm' } = config;
+  const projectName = path.basename(projectPath);
+  const parentDir = path.dirname(projectPath);
+
+  console.log(chalk.cyan(`\n📦 Creating Next.js project...`));
+  console.log(
+    chalk.gray(`   Language: ${language === 'typescript' ? 'TypeScript' : 'JavaScript'}`)
+  );
+  console.log(chalk.gray(`   Styling: ${styling || 'CSS'}`));
+  console.log(chalk.gray(`   Package Manager: ${packageManager}\n`));
+
+  const args = ['create-next-app@latest', projectName];
+
+  // Language
+  if (language === 'typescript') {
+    args.push('--typescript');
+  } else {
+    args.push('--javascript');
+  }
+
+  // Styling - check if user wants Tailwind
+  if (styling === 'tailwind' || styling === 'tailwindcss') {
+    args.push('--tailwind');
+  } else {
+    args.push('--no-tailwind');
+  }
+
+  // Default options
+  args.push('--eslint'); // Always include ESLint
+  args.push('--app'); // Use App Router
+  args.push('--src-dir'); // Use src directory
+  args.push('--import-alias', '@/*'); // Set import alias
+  args.push('--no-git'); // We handle git separately
+
+  // Package manager
+  args.push(`--use-${packageManager}`);
+
+  // Skip installation - we'll install add-ons after
+  args.push('--skip-install');
+
+  console.log(chalk.dim(`   Command: npx ${args.join(' ')}\n`));
+
+  await execCommand(`npx ${args.join(' ')}`, {
+    cwd: parentDir,
+  });
+}
+
+/**
+ * Bootstrap React project using Vite
+ *
+ * @param {string} projectPath - Absolute path to project
+ * @param {Object} config - Configuration object
+ */
+export async function bootstrapReact(projectPath, config) {
+  const { language = 'typescript', packageManager = 'npm' } = config;
+  const projectName = path.basename(projectPath);
+  const parentDir = path.dirname(projectPath);
+  const template = language === 'typescript' ? 'react-ts' : 'react';
+
+  console.log(chalk.cyan(`\n📦 Creating React project with Vite...`));
+  console.log(
+    chalk.gray(`   Language: ${language === 'typescript' ? 'TypeScript' : 'JavaScript'}`)
+  );
+  console.log(chalk.gray(`   Template: ${template}`));
+  console.log(chalk.gray(`   Package Manager: ${packageManager}\n`));
+
+  // Use create-vite 5.1.0 which is more stable and doesn't auto-start dev server
+  // The --template flag should make it non-interactive
+  const command = `npx create-vite@5.1.0 ${projectName} --template ${template}`;
+  console.log(chalk.dim(`   Command: ${command}\n`));
+
+  await execCommand(command, {
+    cwd: parentDir,
+  });
+}
+
+/**
+ * Bootstrap Vue project
+ *
+ * @param {string} projectPath - Absolute path to project
+ * @param {Object} config - Configuration object
+ */
+export async function bootstrapVue(projectPath, config) {
+  const { language = 'typescript', packageManager = 'npm' } = config;
+  const projectName = path.basename(projectPath);
+  const parentDir = path.dirname(projectPath);
+
+  console.log(chalk.cyan(`\n📦 Creating Vue project...`));
+  console.log(
+    chalk.gray(`   Language: ${language === 'typescript' ? 'TypeScript' : 'JavaScript'}`)
+  );
+  console.log(chalk.gray(`   Package Manager: ${packageManager}\n`));
+
+  // Use --typescript and --default flags to create non-interactive TypeScript project
+  const flags = language === 'typescript' ? '--typescript --default' : '--default';
+  const command = `npm create vue@latest ${projectName} -- ${flags}`;
+  console.log(chalk.dim(`   Command: ${command}\n`));
+
+  await execCommand(command, { cwd: parentDir });
+}
+
+/**
+ * Bootstrap Nuxt project
+ *
+ * @param {string} projectPath - Absolute path to project
+ * @param {Object} config - Configuration object
+ */
+export async function bootstrapNuxt(projectPath, config) {
+  const { packageManager = 'npm' } = config;
+  const projectName = path.basename(projectPath);
+  const parentDir = path.dirname(projectPath);
+
+  console.log(chalk.cyan(`\n📦 Creating Nuxt project...`));
+  console.log(chalk.gray(`   Package Manager: ${packageManager}\n`));
+
+  const command = `npx nuxi@latest init ${projectName} --packageManager ${packageManager}`;
+  console.log(chalk.dim(`   Command: ${command}\n`));
+
+  await execCommand(command, { cwd: parentDir });
+}
+
+/**
+ * Bootstrap Svelte project
+ *
+ * @param {string} projectPath - Absolute path to project
+ * @param {Object} config - Configuration object
+ */
+export async function bootstrapSvelte(projectPath, config) {
+  const { packageManager = 'npm' } = config;
+  const projectName = path.basename(projectPath);
+  const parentDir = path.dirname(projectPath);
+
+  console.log(chalk.cyan(`\n📦 Creating Svelte project...`));
+  console.log(chalk.gray(`   Package Manager: ${packageManager}\n`));
+
+  const command = `npm create svelte@latest ${projectName} -y`;
+  console.log(chalk.dim(`   Command: ${command}\n`));
+
+  await execCommand(command, { cwd: parentDir });
+}
+
+// ============================================
+// Backend Framework Bootstrappers
+// ============================================
+
+/**
+ * Bootstrap Express project
+ *
+ * @param {string} projectPath - Absolute path to project
+ * @param {Object} config - Configuration object
+ */
+export async function bootstrapExpress(projectPath, config) {
+  const { language, packageManager = 'npm' } = config;
+  const projectName = path.basename(projectPath);
+  const parentDir = path.dirname(projectPath);
+
+  console.log(chalk.cyan(`\n📦 Creating Express project...`));
+  console.log(
+    chalk.gray(`   Language: ${language === 'typescript' ? 'TypeScript' : 'JavaScript'}\n`)
+  );
+
+  // Express doesn't have a modern CLI, so we'll use express-generator
+  const command = `npx express-generator --no-view --git ${projectName}`;
+  console.log(chalk.dim(`   Command: ${command}\n`));
+
+  await execCommand(command, { cwd: parentDir });
+
+  // If TypeScript, we'll need to convert it later in the template generator
+  if (language === 'typescript') {
+    console.log(chalk.yellow('   TypeScript setup will be added in the next step...\n'));
+  }
+}
+
+/**
+ * Bootstrap NestJS project
+ *
+ * @param {string} projectPath - Absolute path to project
+ * @param {Object} config - Configuration object
+ */
+export async function bootstrapNestJS(projectPath, config) {
+  const { packageManager = 'npm' } = config;
+  const projectName = path.basename(projectPath);
+  const parentDir = path.dirname(projectPath);
+
+  console.log(chalk.cyan(`\n📦 Creating NestJS project...`));
+  console.log(chalk.gray(`   Language: TypeScript (NestJS default)`));
+  console.log(chalk.gray(`   Package Manager: ${packageManager}\n`));
+
+  const command = `npx @nestjs/cli new ${projectName} --package-manager ${packageManager} --skip-git --skip-install`;
+  console.log(chalk.dim(`   Command: ${command}\n`));
+
+  await execCommand(command, { cwd: parentDir });
+}
+
+/**
+ * Bootstrap Fastify project
+ *
+ * @param {string} projectPath - Absolute path to project
+ * @param {Object} config - Configuration object
+ */
+export async function bootstrapFastify(projectPath, config) {
+  const { language = 'javascript' } = config;
+  const projectName = path.basename(projectPath);
+  const parentDir = path.dirname(projectPath);
+
+  console.log(chalk.cyan(`\n📦 Creating Fastify project...`));
+  console.log(
+    chalk.gray(`   Language: ${language === 'typescript' ? 'TypeScript' : 'JavaScript'}\n`)
+  );
+
+  const command = `npx fastify-cli generate ${projectName}`;
+  console.log(chalk.dim(`   Command: ${command}\n`));
+
+  await execCommand(command, { cwd: parentDir });
+}