create-revo 2.0.2 → 2.0.4

package/cli.js

@@ -64,50 +64,26 @@ 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);
   }
 
-  console.log("\nSetting up project...");
+  console.log("\nSetting up project...\n");
   
-  // 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
 }
 
 function createGitignoreFile(projectDir) {
@@ -167,7 +143,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 +175,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 +189,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 +200,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 +237,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,23 +248,24 @@ 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(`Project created successfully at ${finalTargetDir}`);
+    console.log(`Time Taken - ${copyDurationMs}ms.`);
+    console.log(`\nProject created at ${finalTargetDir}`);
     process.chdir(finalTargetDir);
     
     console.log("\nNext steps:");
-    console.log("1. Run: npm install");
-    console.log("2. Run: npm run dev");
+    console.log("1. npm install");
+    console.log("2. npm run dev");
   } catch (error) {
     console.error("Error creating project:", error.message);
     process.exit(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-revo",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "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/src/app/page.tsx

@@ -1,25 +1,31 @@
-import Image from 'next/image';
+import { Revo } from 'revoicons';
 
 export default function Home() {
   return (
-    <div className="bg-[#EFF0EF] w-screen h-screen flex flex-col justify-center items-center select-none">
-      <div className="flex flex-col items-center space-y-2">
-        <div className="flex justify-center items-center space-x-4">
-          <Image 
-            src="/revo.svg" 
-            alt="revo" 
-            width={128}
-            height={128}
-            className="w-32 h-32 md:w-32 md:h-32"
-            priority
-          />
-          <h1 className="text-[#2D2A32] text-6xl md:text-[10rem] font-semibold leading-none -mt-10">
-            revo
-          </h1>
+    <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 50ms
+          </p>
         </div>
-        <p className="text-[#2D2A32] text-base md:text-lg uppercase text-center max-w-md">
-          your project is ready to go
-        </p>
+      </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/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,22 +1,31 @@
-import revo from './assets/revo.svg';
+import { Revo } from 'revoicons';
 
 function App() {
   return (
-    <div className="bg-[#EFF0EF] w-screen h-screen flex flex-col justify-center items-center select-none">
-      <div className="flex flex-col items-center space-y-2">
-        <div className="flex justify-center items-center space-x-4">
-          <img 
-            src={revo} 
-            alt="revo" 
-            className="w-32 h-32 md:w-32 md:h-32" 
-          />
-          <h1 className="text-[#2D2A32] text-6xl md:text-[10rem] font-semibold leading-none -mt-10">
-            revo
-          </h1>
+    <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 50ms
+          </p>
         </div>
-        <p className="text-[#2D2A32] text-base md:text-lg uppercase text-center max-w-md">
-          your project is ready to go
-        </p>
+      </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/test/README.md

@@ -1,36 +1,28 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-revo`](https://www.npmjs.com/package/create-revo) for test.
-
-## 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.
+# test
+
+This is a React project bootstrapped with [`create-revo`](https://www.npmjs.com/package/create-revo).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+
+## Features
+
+- ⚡ Vite for fast development
+- ⚛️ React 18 with TypeScript
+- 🎨 Tailwind CSS for styling
+- 🔧 ESLint for code quality
+- 🚀 Motion for animations
+
+## Learn More
+
+To learn more about React, take a look at the following resources:
+
+- [React Documentation](https://react.dev) - learn about React features and API.
+- [Vite Documentation](https://vitejs.dev) - learn about Vite features and configuration.

package/test/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

package/test/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <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>
+    <meta name="author" content="Tarun Gupta" />
+    <!-- <meta name="keywords" content="" /> -->
+    <!-- <meta name="description" content=""/> -->
+    <!-- <meta property="og:image" content="" /> -->
+    <!-- <meta property="og:title" content="" /> -->
+    <!-- <meta property="og:description" content="" /> -->
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>