create-revo 2.0.1 → 2.0.3

package/README.md

@@ -1,6 +1,6 @@
-# Revo - Fast & Efficient React & Next.js Project Setup
+# revo
 
-**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.
+**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.
 
 ---
 
@@ -92,16 +92,16 @@ npm run preview
 
 ## 🌟 Feedback & Support
 
-If you like Revo or have suggestions for improvement, let me know!
+If you like revo or have suggestions for improvement, let me know!
 You can reach out to me on [Twitter](https://twitter.com/MaybeTarun).
 
-Happy coding with Revo! 🎉
+Happy coding with revo! 🎉
 
 ---
 
 ## 🙏 Credits
 
-Revo is built on top of amazing open-source tools. A big shoutout to:  
+revo is built on top of amazing open-source tools. A big shoutout to:  
 
 - [React](https://react.dev/) - The library for building user interfaces
 - [Next.js](https://nextjs.org/) - The React framework for production

package/cli.js

@@ -64,24 +64,9 @@ function replacePlaceholders(content, placeholderValues) {
   return content;
 }
 
-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);
@@ -89,25 +74,17 @@ function copyTemplateFiles(templateType, projectName, targetDir) {
 
   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 });
+  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
+  console.log(`Project setup complete.`);
 }
 
 function createGitignoreFile(projectDir) {
@@ -167,7 +144,6 @@ function copyRecursive(source, target) {
       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;
         }
@@ -200,7 +176,6 @@ function replacePlaceholdersInDirectory(directory, placeholderValues) {
     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;
       }
@@ -215,7 +190,6 @@ function replacePlaceholdersInDirectory(directory, placeholderValues) {
             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";
@@ -227,25 +201,27 @@ function replacePlaceholdersInDirectory(directory, placeholderValues) {
               });
             }
             
+            if (placeholderValues.scaffoldDurationMs) {
+              jsonContent.revoMetrics = {
+                scaffoldDurationMs: Number(placeholderValues.scaffoldDurationMs)
+              };
+            }
+
             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);
+          // removed scaffoldDurationMs placeholder handling
         } 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}`);
+          // removed scaffoldDurationMs placeholder handling
         } else {
-          // Use the optimized replacePlaceholders function for other files
           content = replacePlaceholders(content, placeholderValues);
         }
 
@@ -262,12 +238,10 @@ 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);
@@ -275,17 +249,18 @@ async function main() {
     
     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();
     
+    const copyStartMs = Date.now();
     copyTemplateFiles(templateType, finalProjectName, finalTargetDir);
+    const copyDurationMs = Date.now() - copyStartMs;
     
+    console.log(`Time Taken - ${copyDurationMs}ms.`);
     console.log(`Project created successfully at ${finalTargetDir}`);
     process.chdir(finalTargetDir);
     

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-revo",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "Project setup tool for ReactJS and NextJS",
   "main": "cli.js",
   "bin": {

package/template-nextjs/next.config.ts

@@ -2,6 +2,7 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   /* config options here */
+  transpilePackages: ["revoicons"],
 };
 
 export default nextConfig;

package/template-nextjs/package-lock.json

@@ -11,7 +11,8 @@
         "framer-motion": "^12.23.12",
         "next": "15.5.2",
         "react": "19.1.0",
-        "react-dom": "19.1.0"
+        "react-dom": "19.1.0",
+        "revoicons": "^1.2.4"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -5218,6 +5219,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/revoicons": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/revoicons/-/revoicons-1.2.4.tgz",
+      "integrity": "sha512-a4918brM2qbMvs4B2hTaZ98nUI5Zc+xWazecsQLv46isEBbNLVl1eiuh9XerR3Wt2dzerTn+fTN5y4efISN8fQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=17 || >=18",
+        "react-dom": ">=17 || >=18"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",

package/template-nextjs/package.json

@@ -12,7 +12,8 @@
     "framer-motion": "^12.23.12",
     "next": "15.5.2",
     "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react-dom": "19.1.0",
+    "revoicons": "^1.2.4"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

package/template-nextjs/public/revo.svg

@@ -0,0 +1,4 @@
+<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="250" cy="250" r="225" fill="#EFF0EF" stroke="#2D2A32" stroke-width="50"/>
+<path d="M247 347L362.5 222.5M362.5 222.5H265M362.5 222.5V317.5" stroke="#2D2A32" stroke-width="50" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/template-nextjs/src/app/layout.tsx

@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Revo",
-  description: "Generated by Revo",
+  title: "revo",
+  description: "Generated by revo",
 };
 
 export default function RootLayout({

package/template-nextjs/src/app/page.tsx

@@ -1,23 +1,31 @@
-import Image from 'next/image';
+import { Revo } from 'revoicons';
 
 export default function Home() {
   return (
-    <div className="bg-black w-screen h-screen flex flex-col justify-center items-center select-none">
-      <div className="flex flex-col items-center space-y-2">
-        <Image 
-          src="/revo.png" 
-          alt="Revo" 
-          width={160}
-          height={160}
-          className="w-32 h-32 md:w-40 md:h-40 transition-transform duration-300 hover:scale-105"
-          priority
-        />
-        <h1 className="text-white text-4xl md:text-6xl font-bold tracking-wider">
-          Revo
-        </h1>
-        <p className="text-gray-400 text-lg md:text-xl text-center max-w-md">
-          Your project is ready to go
-        </p>
+    <div className="bg-white w-full h-screen flex flex-col">
+      <div className="h-[10vh] w-full border-b border-gray-400">
+        <div className="h-full w-full md:w-[70vw] mx-auto border-x border-gray-400" />
+      </div>
+      <div className="h-full w-full md:w-[70vw] mx-auto border-x border-gray-400 flex flex-col justify-center items-center relative overflow-hidden">
+        <div className="absolute inset-0 -z-0 bg-[linear-gradient(to_right,theme(colors.gray.100)_1px,transparent_1px),linear-gradient(to_bottom,theme(colors.gray.100)_1px,transparent_1px)] bg-[length:16px_16px]" />
+        <div className="flex flex-col items-center space-y-2 relative z-10">
+          <div className="flex justify-center items-center space-x-2 md:space-x-4">
+            <Revo size={128} className='hidden md:block'/>
+            <Revo size={64} className='block md:hidden'/>
+            <h1 className="text-black text-[5rem] md:text-[10rem] font-semibold leading-none -mt-6 md:-mt-12">
+              revo
+            </h1>
+          </div>
+          <p className="text-black text-sm md:text-lg uppercase text-center max-w-md">
+            your project is ready to go
+          </p>
+          <p className="text-black/80 text-xs tracking-wide">
+            setup in under 500ms
+          </p>
+        </div>
+      </div>
+      <div className="h-[10vh] w-full border-t border-gray-400">
+        <div className="h-full w-full md:w-[70vw] mx-auto border-x border-gray-400" />
       </div>
     </div>
   );

package/template-reactjs/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Revo</title>
+    <title>revo</title>
     <meta name="author" content="Tarun Gupta" />
     <!-- <meta name="keywords" content="" /> -->
     <!-- <meta name="description" content=""/> -->

package/template-reactjs/package-lock.json

@@ -1,17 +1,18 @@
 {
   "name": "{{projectName}}",
-  "version": "1.0.0",
+  "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "vite",
+      "name": "{{projectName}}",
       "version": "0.0.0",
       "dependencies": {
         "motion": "^11.11.15",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-router-dom": "^6.28.0"
+        "react-router-dom": "^6.28.0",
+        "revoicons": "^1.2.4"
       },
       "devDependencies": {
         "@eslint/js": "^9.13.0",
@@ -1768,9 +1769,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001680",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001680.tgz",
-      "integrity": "sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==",
+      "version": "1.0.30001741",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001741.tgz",
+      "integrity": "sha512-QGUGitqsc8ARjLdgAfxETDhRbJ0REsP6O3I96TAth/mVjh2cYzN2u+3AzPP3aVSm2FehEItaJw1xd+IGBXWeSw==",
       "dev": true,
       "funding": [
         {
@@ -3431,6 +3432,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/revoicons": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/revoicons/-/revoicons-1.2.4.tgz",
+      "integrity": "sha512-a4918brM2qbMvs4B2hTaZ98nUI5Zc+xWazecsQLv46isEBbNLVl1eiuh9XerR3Wt2dzerTn+fTN5y4efISN8fQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=17 || >=18",
+        "react-dom": ">=17 || >=18"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.26.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.26.0.tgz",

package/template-reactjs/package.json

@@ -12,7 +12,8 @@
     "motion": "^11.11.15",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.28.0"
+    "react-router-dom": "^6.28.0",
+    "revoicons": "^1.2.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

package/template-reactjs/src/App.tsx

@@ -1,20 +1,31 @@
-import revo from './assets/revo.svg';
+import { Revo } from 'revoicons';
 
 function App() {
   return (
-    <div className="bg-black w-screen h-screen flex flex-col justify-center items-center select-none">
-      <div className="flex flex-col items-center space-y-2">
-        <img 
-          src={revo} 
-          alt="Revo" 
-          className="w-32 h-32 md:w-40 md:h-40 transition-transform duration-300 hover:scale-105" 
-        />
-        <h1 className="text-white text-4xl md:text-6xl font-bold tracking-wider">
-          Revo
-        </h1>
-        <p className="text-gray-400 text-lg md:text-xl text-center max-w-md">
-          Your project is ready to go
-        </p>
+    <div className="bg-white w-full h-screen flex flex-col">
+      <div className="h-[10vh] w-full border-b border-gray-400">
+        <div className="h-full w-full md:w-[70vw] mx-auto border-x border-gray-400" />
+      </div>
+      <div className="h-full w-full md:w-[70vw] mx-auto border-x border-gray-400 flex flex-col justify-center items-center relative overflow-hidden">
+        <div className="absolute inset-0 -z-0 bg-[linear-gradient(to_right,theme(colors.gray.100)_1px,transparent_1px),linear-gradient(to_bottom,theme(colors.gray.100)_1px,transparent_1px)] bg-[length:16px_16px]" />
+        <div className="flex flex-col items-center space-y-2 relative z-10">
+          <div className="flex justify-center items-center space-x-2 md:space-x-4">
+            <Revo size={128} className='hidden md:block'/>
+            <Revo size={64} className='block md:hidden'/>
+            <h1 className="text-black text-[5rem] md:text-[10rem] font-semibold leading-none -mt-6 md:-mt-12">
+              revo
+            </h1>
+          </div>
+          <p className="text-black text-sm md:text-lg uppercase text-center max-w-md">
+            your project is ready to go
+          </p>
+          <p className="text-black/80 text-xs tracking-wide">
+            setup in under 500ms
+          </p>
+        </div>
+      </div>
+      <div className="h-[10vh] w-full border-t border-gray-400">
+        <div className="h-full w-full md:w-[70vw] mx-auto border-x border-gray-400" />
       </div>
     </div>
   )

package/template-reactjs/src/assets/revo.svg

@@ -0,0 +1,4 @@
+<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="250" cy="250" r="225" fill="#EFF0EF" stroke="#2D2A32" stroke-width="50"/>
+<path d="M247 347L362.5 222.5M362.5 222.5H265M362.5 222.5V317.5" stroke="#2D2A32" stroke-width="50" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/test/README.md

@@ -1,36 +0,0 @@
-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/test/eslint.config.mjs

@@ -1,25 +0,0 @@
-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/test/next.config.ts

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