create-revo 1.2.7 → 2.0.1

package/README.md

@@ -1,24 +1,35 @@
-# Revo - Fast & Efficient React Project Setup
+# Revo - Fast & Efficient React & Next.js Project Setup
 
-**Revo** is a custom React project setup tool built on top of Vite. It’s designed to streamline your workflow by providing a clean project structure, pre-configured with **Tailwind CSS** and **Framer Motion**, so you can focus on building amazing applications.
+**Revo** is a modern project setup tool that supports both **React** and **Next.js** projects. It's designed to streamline your workflow by providing clean project structures, pre-configured with **TypeScript** and **Tailwind CSS**, so you can focus on building amazing applications.
 
 ---
 
 ## 🚀 Features
 
-- **Powered by Vite**: Enjoy blazing-fast builds and an optimized development experience.
-- **Tailwind CSS**: Fully configured for utility-first styling right out of the box.
-- **Framer Motion**: Pre-installed for creating stunning animations with ease.
-- **Better Project Layout**: Thoughtfully organized file structure to keep your code clean and maintainable.
+- **Two Framework Options**: Choose between React (Vite) or Next.js
+- **TypeScript Ready**: Pre-configured TypeScript for type safety
+- **Tailwind CSS**: Fully configured for utility-first styling right out of the box
+- **Latest Dependencies**: Always uses the latest versions of all packages
+- **Interactive Setup**: Simple CLI with progress indicators
+- **Clean Project Structure**: Thoughtfully organized file structure for maintainable code
 
 ---
 
 ## 📦 What You Get
 
-1. **Pre-configured Tailwind CSS** for styling.
-2. **Framer Motion** set up for animations.
-3. **Optimized Vite setup** for fast development and builds.
-4. A clean project directory structure:
+### React Template (Vite)
+1. **React 18** with TypeScript
+2. **Vite** for lightning-fast development
+3. **Tailwind CSS** for styling
+4. **ESLint** for code quality
+5. **Motion** for animations
+
+### Next.js Template
+1. **Next.js 15** with App Router
+2. **TypeScript** for type safety
+3. **Tailwind CSS** for styling
+4. **ESLint** for code quality
+5. **Optimized** for production
 
 ---
 
@@ -28,21 +39,29 @@
 Make sure you have Node.js (>=14.x) and npm/yarn installed.
 
 ### Create a New Project
-Run the following command to create a new project:
 
+**Option 1: With project name**
+```bash
+npx create-revo my-awesome-project
 ```
-npx create-revo [project-name]
+
+**Option 2: Interactive mode (will prompt for project name)**
+```bash
+npx create-revo
 ```
 
-### Navigate to Your Project
+### Choose Your Template
+You'll be prompted to choose between:
+1. **React.js** - Vite + TypeScript + Tailwind CSS
+2. **Next.js** - App Router + TypeScript + Tailwind CSS
 
-```
+### Navigate to Your Project
+```bash
 cd [project-name]
 ```
 
 ### Install Dependencies
-
-```
+```bash
 npm install
 ```
 
@@ -84,6 +103,8 @@ Happy coding with Revo! 🎉
 
 Revo is built on top of amazing open-source tools. A big shoutout to:  
 
-- [Vite](https://vitejs.dev/) - The lightning-fast frontend build tool.  
-- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework for rapid UI development.  
-- [Framer Motion](https://www.framer.com/motion/) - The library for creating smooth and delightful animations.
+- [React](https://react.dev/) - The library for building user interfaces
+- [Next.js](https://nextjs.org/) - The React framework for production
+- [Vite](https://vitejs.dev/) - The lightning-fast frontend build tool
+- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework for rapid UI development
+- [TypeScript](https://www.typescriptlang.org/) - Typed JavaScript at any scale

package/cli.js

@@ -3,18 +3,58 @@
 import fs from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
+import readline from "readline";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const projectName = process.argv[2];
 
-if (!projectName) {
-  console.error("Please provide a project name: npx create-revo [project-name]");
-  process.exit(1);
+function askProjectName() {
+  return new Promise((resolve) => {
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout
+    });
+
+    rl.question('Enter project name: ', (answer) => {
+      rl.close();
+      resolve(answer.trim());
+    });
+  });
 }
 
-const targetDir = path.join(process.cwd(), projectName);
+function askTemplateChoice() {
+  return new Promise((resolve) => {
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout
+    });
+
+    console.log('\nChoose your template:');
+    console.log('1. React.js + Typescript + TailwindCSS + Vite');
+    console.log('2. Next.js + Typescript + TailwindCSS');
+
+    const askQuestion = () => {
+      rl.question('Enter your choice (1 or 2): ', (answer) => {
+        const choice = answer.trim().toLowerCase();
+        
+        if (choice === '1' || choice === 'react' || choice === 'reactjs') {
+          rl.close();
+          resolve('reactjs');
+        } else if (choice === '2' || choice === 'next' || choice === 'nextjs') {
+          rl.close();
+          resolve('nextjs');
+        } else {
+          console.log('Invalid choice. Please enter 1 or 2.');
+          askQuestion();
+        }
+      });
+    };
+
+    askQuestion();
+  });
+}
 
 function replacePlaceholders(content, placeholderValues) {
   Object.keys(placeholderValues).forEach((key) => {
@@ -24,24 +64,124 @@ function replacePlaceholders(content, placeholderValues) {
   return content;
 }
 
-function copyTemplateFiles() {
-  const templateDir = path.join(__dirname, "template");
+function updateProgress(percentage, message) {
+  const barLength = 20;
+  const filledLength = Math.round((percentage / 100) * barLength);
+  const bar = '█'.repeat(filledLength) + '░'.repeat(barLength - filledLength);
+  
+  // Clear the current line and move cursor to beginning
+  process.stdout.write('\r\x1b[K');
+  process.stdout.write(`[${bar}] ${percentage}% - ${message}`);
+  
+  if (percentage === 100) {
+    process.stdout.write('\n');
+  }
+}
+
+function copyTemplateFiles(templateType, projectName, targetDir) {
+  const templateDir = path.join(__dirname, `template-${templateType}`);
+
+  // Check if template directory exists
+  if (!fs.existsSync(templateDir)) {
+    console.error(`Template directory 'template-${templateType}' not found!`);
+    process.exit(1);
+  }
 
+  console.log("\nSetting up project...");
+  
+  // Step 1: Create directory
+  updateProgress(10, "Creating project directory...");
   fs.mkdirSync(targetDir, { recursive: true });
 
+  // Step 2: Copy template files
+  updateProgress(30, "Copying template files...");
   copyRecursive(templateDir, targetDir);
 
+  // Step 3: Replace placeholders
+  updateProgress(60, "Configuring project files...");
   replacePlaceholdersInDirectory(targetDir, { projectName });
+  
+  // Step 4: Create .gitignore file
+  updateProgress(80, "Creating .gitignore file...");
+  createGitignoreFile(targetDir);
+
+  // Step 5: Finalizing
+  updateProgress(100, "Project setup complete!");
+  console.log(""); // New line after progress
+}
+
+function createGitignoreFile(projectDir) {
+  const gitignoreContent = `# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+`;
+
+  try {
+    const gitignorePath = path.join(projectDir, '.gitignore');
+    fs.writeFileSync(gitignorePath, gitignoreContent);
+  } catch (error) {
+    //
+  }
 }
 
 function copyRecursive(source, target) {
-  if (fs.statSync(source).isDirectory()) {
-    fs.mkdirSync(target, { recursive: true });
-    fs.readdirSync(source).forEach((file) => {
-      copyRecursive(path.join(source, file), path.join(target, file));
-    });
-  } else {
-    fs.copyFileSync(source, target);
+  try {
+    if (fs.statSync(source).isDirectory()) {
+      fs.mkdirSync(target, { recursive: true });
+      const files = fs.readdirSync(source);
+      
+      for (const file of files) {
+        // Skip node_modules and other system directories
+        if (file === 'node_modules' || file === '.git' || file === 'dist' || file === 'build' || file === '.next') {
+          continue;
+        }
+        
+        const sourcePath = path.join(source, file);
+        const targetPath = path.join(target, file);
+        copyRecursive(sourcePath, targetPath);
+      }
+    } else {
+      fs.copyFileSync(source, target);
+    }
+  } catch (error) {
+    console.error(`Error copying ${source} to ${target}:`, error.message);
+    throw error;
   }
 }
 
@@ -53,40 +193,109 @@ function sanitizeProjectName(name) {
 }
 
 function replacePlaceholdersInDirectory(directory, placeholderValues) {
+  try {
+    const sanitizedProjectName = sanitizeProjectName(placeholderValues.projectName);
+    const files = fs.readdirSync(directory);
 
-  const sanitizedProjectName = sanitizeProjectName(placeholderValues.projectName);
+    for (const file of files) {
+      const filePath = path.join(directory, file);
+      
+      // Skip node_modules and other system directories
+      if (file === 'node_modules' || file === '.git' || file === 'dist' || file === 'build' || file === '.next') {
+        continue;
+      }
+      
+      if (fs.statSync(filePath).isDirectory()) {
+        replacePlaceholdersInDirectory(filePath, placeholderValues);
+      } else {
+        let content = fs.readFileSync(filePath, "utf8");
 
-  fs.readdirSync(directory).forEach((file) => {
-    const filePath = path.join(directory, file);
-    if (fs.statSync(filePath).isDirectory()) {
-      replacePlaceholdersInDirectory(filePath, placeholderValues);
-    } else {
-      let content = fs.readFileSync(filePath, "utf8");
+        if (file === "package.json" || file === "package-lock.json") {
+          try {
+            const jsonContent = JSON.parse(content);
+            jsonContent.name = sanitizedProjectName;
+            
+            // Update all dependencies to latest versions
+            if (jsonContent.dependencies) {
+              Object.keys(jsonContent.dependencies).forEach(dep => {
+                jsonContent.dependencies[dep] = "latest";
+              });
+            }
+            if (jsonContent.devDependencies) {
+              Object.keys(jsonContent.devDependencies).forEach(dep => {
+                jsonContent.devDependencies[dep] = "latest";
+              });
+            }
+            
+            content = JSON.stringify(jsonContent, null, 2);
+          } catch (jsonError) {
+            console.warn(`Warning: Could not parse JSON in ${filePath}:`, jsonError.message);
+            // Fallback to string replacement
+            content = content.replace(/\{\{projectName\}\}/g, sanitizedProjectName);
+          }
+        } else if (file === "index.html" || file.endsWith(".html")) {
+          // Replace project name in HTML title and meta tags
+          content = content.replace(/\{\{projectName\}\}/g, placeholderValues.projectName);
+          // Also replace common placeholders like "Revo" with project name
+          content = content.replace(/Revo/g, placeholderValues.projectName);
+        } else if (file.endsWith(".tsx") || file.endsWith(".ts") || file.endsWith(".jsx") || file.endsWith(".js")) {
+          // Replace project name in React/Next.js files
+          content = content.replace(/\{\{projectName\}\}/g, placeholderValues.projectName);
+          // Replace common placeholders
+          content = content.replace(/Create Next App/g, placeholderValues.projectName);
+          content = content.replace(/Generated by create next app/g, `Generated by ${placeholderValues.projectName}`);
+        } else {
+          // Use the optimized replacePlaceholders function for other files
+          content = replacePlaceholders(content, placeholderValues);
+        }
 
-      if (file === "package.json" || file === "package-lock.json") {
-        const jsonContent = JSON.parse(content);
-        jsonContent.name = sanitizedProjectName;
-        content = JSON.stringify(jsonContent, null, 2); 
-      } else {
-        Object.keys(placeholderValues).forEach((key) => {
-          const placeholder = `{{${key}}}`;
-          content = content.replace(new RegExp(placeholder, "g"), placeholderValues[key]);
-        });
+        fs.writeFileSync(filePath, content);
       }
-
-      fs.writeFileSync(filePath, content);
     }
-  });
+  } catch (error) {
+    console.error(`Error processing directory ${directory}:`, error.message);
+    throw error;
+  }
 }
 
-try {
-  console.log("Setting up project...");
-  copyTemplateFiles();
-  console.log(`Project created at ${targetDir}`);
-  process.chdir(targetDir);
-  console.log("Project setup complete!");
-  console.log("Run npm install and you are set.");
-} catch (error) {
-  console.error("Error creating project:", error);
-  process.exit(1);
+async function main() {
+  try {
+    let finalProjectName = projectName;
+    
+    // If no project name provided, ask for it
+    if (!finalProjectName) {
+      finalProjectName = await askProjectName();
+    }
+    
+    // Validate project name
+    if (!/^[a-zA-Z0-9-_~]+$/.test(finalProjectName)) {
+      console.error("Project name can only contain letters, numbers, hyphens, underscores, and tildes");
+      process.exit(1);
+    }
+    
+    const finalTargetDir = path.join(process.cwd(), finalProjectName);
+    
+    // Check if target directory already exists
+    if (fs.existsSync(finalTargetDir)) {
+      console.error(`Directory '${finalProjectName}' already exists! Please choose a different name.`);
+      process.exit(1);
+    }
+    
+    // Ask user to choose template
+    const templateType = await askTemplateChoice();
+    
+    copyTemplateFiles(templateType, finalProjectName, finalTargetDir);
+    
+    console.log(`Project created successfully at ${finalTargetDir}`);
+    process.chdir(finalTargetDir);
+    
+    console.log("\nNext steps:");
+    console.log("1. Run: npm install");
+    console.log("2. Run: npm run dev");
+  } catch (error) {
+    console.error("Error creating project:", error.message);
+    process.exit(1);
+  }
 }
+
+main();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-revo",
-  "version": "1.2.7",
-  "description": "React Project Setup Tool built on Vite",
+  "version": "2.0.1",
+  "description": "Project setup tool for ReactJS and NextJS",
   "main": "cli.js",
   "bin": {
     "create-revo": "./cli.js"
@@ -12,9 +12,14 @@
   "keywords": [
     "build",
     "tool",
-    "bread",
     "react",
+    "nextjs",
+    "next.js",
+    "typescript",
+    "tailwind",
+    "vite",
     "project",
+    "template",
     "maybetarun"
   ],
   "author": "Tarun Gupta",

package/template-nextjs/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-revo`](https://www.npmjs.com/package/create-revo) for {{projectName}}.
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

package/template-nextjs/eslint.config.mjs

@@ -0,0 +1,25 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    ignores: [
+      "node_modules/**",
+      ".next/**",
+      "out/**",
+      "build/**",
+      "next-env.d.ts",
+    ],
+  },
+];
+
+export default eslintConfig;

package/template-nextjs/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;