revine 0.1.0

package/README.md

@@ -0,0 +1,81 @@
+# Revine
+
+[![npm version](https://img.shields.io/npm/v/revine)](https://www.npmjs.com/package/revine)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+A minimal React framework with file-based routing and TypeScript-first approach.
+
+## Features
+
+- ⚡️ Vite-powered development
+- 🗂 File-based routing (Next.js style)
+- 🛠 TypeScript support out-of-the-box
+- 🚀 Zero-config setup
+- 🔥 Hot Module Replacement (HMR)
+
+## Installation
+
+Create a new project with:
+
+```bash
+npx revine my-project
+```
+
+## Documentation
+
+### CLI Options
+
+```bash
+npx revine <project-name>
+```
+
+### Project Structure
+
+Generated projects follow this structure:
+
+```
+my-project/
+├── src/
+│   ├── pages/         # Route components
+│   │   └── index.tsx
+│   ├── App.tsx        # Router configuration
+│   └── main.tsx       # Entry point
+├── public/            # Static assets
+├── vite.config.ts     # Vite configuration
+└── package.json
+```
+
+### Routing Convention
+
+src/pages/index.tsx → /
+
+src/pages/about.tsx → /about
+
+src/pages/blog/[slug].tsx → /blog/:slug
+
+## Contributing
+
+### Clone repository
+
+```bash
+git clone https://github.com/your-username/revine.git
+```
+
+### Install dependencies
+
+```bash
+npm install
+```
+
+### Build and link locally
+
+```bash
+npm run build
+npm link
+```
+
+### Test locally
+
+revine test-project
+
+### Thank you for contributing!

package/dist/commands/create.js

@@ -0,0 +1,65 @@
+import { Command } from "commander";
+import chalk from "chalk";
+import fs from "fs-extra";
+import path from "path";
+import inquirer from "inquirer";
+// locals
+import { getDirname } from "../lib/utils/paths.js";
+import { validateDirectory } from "../lib/setup/directory.js";
+import { updatePackageJson } from "../lib/setup/package.js";
+import { setupTailwind } from "../lib/setup/tailwind.js";
+import { runInstall } from "../lib/utils/exec.js";
+const __dirname = getDirname(import.meta.url);
+export function createCommand() {
+    const command = new Command("create")
+        .description("Create a new Revine project")
+        .argument("<project-name>")
+        .option("-f, --force", "Force creation in non-empty directory")
+        .action(async (projectName, options) => {
+        try {
+            const templateDir = path.join(__dirname, "../../template");
+            const projectDir = path.resolve(projectName);
+            const isCurrentDir = [".", "./"].includes(projectName);
+            // Validate directory
+            validateDirectory(projectDir, isCurrentDir, options.force);
+            // Copy template
+            console.log(chalk.cyan(`Creating project in ${projectDir}...`));
+            fs.copySync(templateDir, projectDir, { overwrite: options.force });
+            // Update package.json
+            const { useTailwind } = await inquirer.prompt([
+                {
+                    type: "confirm",
+                    name: "useTailwind",
+                    message: "Would you like to set up Tailwind CSS?",
+                    default: true,
+                },
+            ]);
+            await updatePackageJson(projectDir, isCurrentDir ? path.basename(projectDir) : projectName, useTailwind);
+            // Update README
+            const readmePath = path.join(projectDir, "README.md");
+            let readmeContent = fs.readFileSync(readmePath, "utf-8");
+            fs.writeFileSync(readmePath, readmeContent.replace(/%PROJECT_NAME%/g, projectName));
+            // Install dependencies
+            console.log(chalk.cyan("\nInstalling dependencies..."));
+            runInstall(projectDir);
+            // Setup Tailwind
+            if (useTailwind) {
+                setupTailwind(projectDir);
+            }
+            // Final message
+            console.log(chalk.green("\nSuccess! Created project at"), chalk.yellow(projectDir));
+            console.log(chalk.cyan("\nStart developing with:"));
+            if (!isCurrentDir)
+                console.log(`  cd ${projectName}`);
+            console.log("  npm run dev\n");
+        }
+        catch (error) {
+            let message = "Unknown error occurred";
+            if (error instanceof Error)
+                message = error.message;
+            console.log(chalk.red("Error:"), message);
+            process.exit(1);
+        }
+    });
+    return command;
+}

package/dist/index.js

@@ -0,0 +1,101 @@
+#!/usr/bin/env node
+import chalk from "chalk";
+import { spawnSync } from "child_process";
+import { Command } from "commander";
+import fs from "fs-extra";
+import inquirer from "inquirer";
+import path from "path";
+import { fileURLToPath } from "url";
+// Get directory paths in ESM
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const program = new Command();
+program
+    .version("0.1.0")
+    .argument("<project-name>")
+    .option("-f, --force", "Force creation in non-empty directory")
+    .action(async (projectName, options) => {
+    const templateDir = path.join(__dirname, "../template");
+    const projectDir = path.resolve(projectName);
+    const isCurrentDir = [".", "./"].includes(projectName);
+    // ... [keep existing directory checks the same] ...
+    try {
+        console.log(chalk.cyan(`Creating project in ${projectDir}...`));
+        fs.copySync(templateDir, projectDir, { overwrite: options.force });
+        // Update package.json with ESM configuration
+        const packageJsonPath = path.join(projectDir, "package.json");
+        const packageJson = await fs.readJson(packageJsonPath);
+        const finalProjectName = isCurrentDir
+            ? path.basename(projectDir)
+            : projectName;
+        packageJson.name = finalProjectName;
+        packageJson.type = "module"; // Add ESM type declaration
+        const npmCmd = process.platform === "win32" ? "npm.cmd" : "npm";
+        // Add Tailwind prompt
+        const { useTailwind } = await inquirer.prompt([
+            {
+                type: "confirm",
+                name: "useTailwind",
+                message: "Would you like to set up Tailwind CSS?",
+                default: true,
+            },
+        ]);
+        // Add Tailwind v4 dependencies if selected
+        if (useTailwind) {
+            packageJson.devDependencies = {
+                ...packageJson.devDependencies,
+                tailwindcss: "^4.0.0",
+                "@tailwindcss/vite": "^4.0.0",
+            };
+        }
+        await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+        // Update README
+        const readmePath = path.join(projectDir, "README.md");
+        let readmeContent = fs.readFileSync(readmePath, "utf-8");
+        readmeContent = readmeContent.replace(/%PROJECT_NAME%/g, finalProjectName);
+        fs.writeFileSync(readmePath, readmeContent);
+        // Install dependencies with error handling
+        console.log(chalk.cyan("\nInstalling dependencies..."));
+        const installResult = spawnSync(npmCmd, ["install"], {
+            stdio: "inherit",
+            cwd: projectDir,
+            shell: true,
+        });
+        if (installResult.error || installResult.status !== 0) {
+            console.log(chalk.red("\nError installing dependencies!", installResult.error));
+            console.log(chalk.yellow("Try running manually: npm install"));
+            process.exit(1);
+        }
+        // Setup Tailwind after dependencies are installed
+        if (useTailwind) {
+            console.log(chalk.cyan("\nSetting up Tailwind CSS v4..."));
+            // Update Vite config to add Tailwind plugin
+            const viteConfigPath = path.join(projectDir, "vite.config.ts");
+            let viteConfigContent = fs.readFileSync(viteConfigPath, "utf-8");
+            // Add Tailwind import
+            viteConfigContent = viteConfigContent.replace("import react from '@vitejs/plugin-react';", "import react from '@vitejs/plugin-react';\nimport tailwindcss from '@tailwindcss/vite';");
+            // Add Tailwind plugin to existing config
+            viteConfigContent = viteConfigContent.replace("plugins: [react()]", "plugins: [\n    react(),\n    tailwindcss()\n  ]");
+            fs.writeFileSync(viteConfigPath, viteConfigContent);
+            fs.writeFileSync(viteConfigPath, viteConfigContent);
+            // Create CSS file with import
+            const cssDir = path.join(projectDir, "src", "styles");
+            fs.ensureDirSync(cssDir);
+            fs.writeFileSync(path.join(cssDir, "global.css"), "@import 'tailwindcss';\n");
+            // Add CSS import to main.tsx
+            const mainTsxPath = path.join(projectDir, "src", "main.tsx");
+            const mainContent = `import './styles/global.css';\n${fs.readFileSync(mainTsxPath, "utf-8")}`;
+            fs.writeFileSync(mainTsxPath, mainContent);
+        }
+        console.log(chalk.green("\nSuccess! Created project at"), chalk.yellow(projectDir));
+        console.log(chalk.cyan("\nStart developing with:"));
+        if (!isCurrentDir)
+            console.log(`  cd ${projectName}`);
+        console.log("  npm run dev\n");
+    }
+    catch (error) {
+        console.log(chalk.red("Error:"), error);
+        process.exit(1);
+    }
+});
+program.parse(process.argv);

package/dist/lib/setup/directory.js

@@ -0,0 +1,21 @@
+import fs from "fs-extra";
+import chalk from "chalk";
+export function validateDirectory(projectDir, isCurrentDir, force) {
+    if (fs.existsSync(projectDir)) {
+        if (!isCurrentDir && !force) {
+            console.log(chalk.red(`Error: Directory "${projectDir}" already exists.`));
+            process.exit(1);
+        }
+        const existingFiles = fs
+            .readdirSync(projectDir)
+            .filter((file) => file !== ".git");
+        if (existingFiles.length > 0 && !force) {
+            console.log(chalk.red(`Error: Directory "${projectDir}" is not empty.`));
+            console.log(chalk.yellow("Use --force to override existing files"));
+            process.exit(1);
+        }
+    }
+    else {
+        fs.mkdirpSync(projectDir);
+    }
+}

package/dist/lib/setup/package.js

@@ -0,0 +1,17 @@
+import fs from "fs-extra";
+import path from "path";
+export async function updatePackageJson(projectDir, projectName, useTailwind) {
+    const packageJsonPath = path.join(projectDir, "package.json");
+    const packageJson = await fs.readJson(packageJsonPath);
+    packageJson.name = projectName;
+    packageJson.type = "module";
+    if (useTailwind) {
+        packageJson.devDependencies = {
+            ...packageJson.devDependencies,
+            tailwindcss: "^4.0.0",
+            "@tailwindcss/vite": "^4.0.0",
+        };
+    }
+    await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+    return packageJson;
+}

package/dist/lib/setup/tailwind.js

@@ -0,0 +1,22 @@
+import fs from "fs-extra";
+import path from "path";
+import chalk from "chalk";
+export function setupTailwind(projectDir) {
+    console.log(chalk.cyan("\nSetting up Tailwind CSS..."));
+    // Update Vite config
+    const viteConfigPath = path.join(projectDir, "vite.config.ts");
+    let viteConfig = fs.readFileSync(viteConfigPath, "utf-8");
+    viteConfig = viteConfig
+        .replace("import react from '@vitejs/plugin-react';", "import react from '@vitejs/plugin-react';\nimport tailwindcss from '@tailwindcss/vite';")
+        .replace("plugins: [react()]", "plugins: [\n    react(),\n    tailwindcss()\n  ]");
+    fs.writeFileSync(viteConfigPath, viteConfig);
+    // Create styles directory
+    const cssDir = path.join(projectDir, "src", "styles");
+    fs.ensureDirSync(cssDir);
+    // Create CSS file
+    fs.writeFileSync(path.join(cssDir, "global.css"), "@import 'tailwindcss';\n");
+    // Update main entry file
+    const mainTsxPath = path.join(projectDir, "src", "main.tsx");
+    const mainContent = `import './styles/global.css';\n${fs.readFileSync(mainTsxPath, "utf-8")}`;
+    fs.writeFileSync(mainTsxPath, mainContent);
+}

package/dist/lib/utils/exec.js

@@ -0,0 +1,15 @@
+import { spawnSync } from "child_process";
+import { platform } from "os";
+export function getNpmCommand() {
+    return platform() === "win32" ? "npm.cmd" : "npm";
+}
+export function runInstall(cwd) {
+    const result = spawnSync(getNpmCommand(), ["install"], {
+        stdio: "inherit",
+        cwd,
+        shell: true,
+    });
+    if (result.error || result.status !== 0) {
+        throw new Error("Dependency installation failed");
+    }
+}

package/dist/lib/utils/paths.js

@@ -0,0 +1,6 @@
+import { fileURLToPath } from 'url';
+import path from 'path';
+export function getDirname(metaUrl) {
+    const __filename = fileURLToPath(metaUrl);
+    return path.dirname(__filename);
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "revine",
+  "version": "0.1.0",
+  "description": "A react framework, but better.",
+  "license": "ISC",
+  "author": "Rachit Bharadwaj",
+  "type": "module",
+  "main": "dist/index.js",
+  "bin": {
+    "revine": "dist/index.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc -w",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "chalk": "^5.4.1",
+    "commander": "^13.1.0",
+    "cross-spawn": "^7.0.6",
+    "fs-extra": "^11.3.0",
+    "inquirer": "^12.4.1"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^22.13.0",
+    "typescript": "^5.7.3"
+  }
+}

package/src/index.ts

@@ -0,0 +1,143 @@
+#!/usr/bin/env node
+
+import chalk from "chalk";
+import { spawnSync } from "child_process";
+import { Command } from "commander";
+import fs from "fs-extra";
+import inquirer from "inquirer";
+import path from "path";
+import { fileURLToPath } from "url";
+
+// Get directory paths in ESM
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const program = new Command();
+
+program
+  .version("0.1.0")
+  .argument("<project-name>")
+  .option("-f, --force", "Force creation in non-empty directory")
+  .action(async (projectName: string, options: { force?: boolean }) => {
+    const templateDir = path.join(__dirname, "../template");
+    const projectDir = path.resolve(projectName);
+    const isCurrentDir = [".", "./"].includes(projectName);
+
+    // ... [keep existing directory checks the same] ...
+
+    try {
+      console.log(chalk.cyan(`Creating project in ${projectDir}...`));
+      fs.copySync(templateDir, projectDir, { overwrite: options.force });
+
+      // Update package.json with ESM configuration
+      const packageJsonPath = path.join(projectDir, "package.json");
+      const packageJson = await fs.readJson(packageJsonPath);
+      const finalProjectName = isCurrentDir
+        ? path.basename(projectDir)
+        : projectName;
+
+      packageJson.name = finalProjectName;
+      packageJson.type = "module"; // Add ESM type declaration
+
+      const npmCmd = process.platform === "win32" ? "npm.cmd" : "npm";
+
+      // Add Tailwind prompt
+      const { useTailwind } = await inquirer.prompt([
+        {
+          type: "confirm",
+          name: "useTailwind",
+          message: "Would you like to set up Tailwind CSS?",
+          default: true,
+        },
+      ]);
+
+      // Add Tailwind v4 dependencies if selected
+      if (useTailwind) {
+        packageJson.devDependencies = {
+          ...packageJson.devDependencies,
+          tailwindcss: "^4.0.0",
+          "@tailwindcss/vite": "^4.0.0",
+        };
+      }
+
+      await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+
+      // Update README
+      const readmePath = path.join(projectDir, "README.md");
+      let readmeContent = fs.readFileSync(readmePath, "utf-8");
+      readmeContent = readmeContent.replace(
+        /%PROJECT_NAME%/g,
+        finalProjectName
+      );
+      fs.writeFileSync(readmePath, readmeContent);
+
+      // Install dependencies with error handling
+      console.log(chalk.cyan("\nInstalling dependencies..."));
+      const installResult = spawnSync(npmCmd, ["install"], {
+        stdio: "inherit",
+        cwd: projectDir,
+        shell: true,
+      });
+
+      if (installResult.error || installResult.status !== 0) {
+        console.log(
+          chalk.red("\nError installing dependencies!", installResult.error)
+        );
+        console.log(chalk.yellow("Try running manually: npm install"));
+        process.exit(1);
+      }
+
+      // Setup Tailwind after dependencies are installed
+      if (useTailwind) {
+        console.log(chalk.cyan("\nSetting up Tailwind CSS v4..."));
+
+        // Update Vite config to add Tailwind plugin
+        const viteConfigPath = path.join(projectDir, "vite.config.ts");
+        let viteConfigContent = fs.readFileSync(viteConfigPath, "utf-8");
+
+        // Add Tailwind import
+        viteConfigContent = viteConfigContent.replace(
+          "import react from '@vitejs/plugin-react';",
+          "import react from '@vitejs/plugin-react';\nimport tailwindcss from '@tailwindcss/vite';"
+        );
+
+        // Add Tailwind plugin to existing config
+        viteConfigContent = viteConfigContent.replace(
+          "plugins: [react()]",
+          "plugins: [\n    react(),\n    tailwindcss()\n  ]"
+        );
+
+        fs.writeFileSync(viteConfigPath, viteConfigContent);
+        fs.writeFileSync(viteConfigPath, viteConfigContent);
+
+        // Create CSS file with import
+        const cssDir = path.join(projectDir, "src", "styles");
+        fs.ensureDirSync(cssDir);
+        fs.writeFileSync(
+          path.join(cssDir, "global.css"),
+          "@import 'tailwindcss';\n"
+        );
+
+        // Add CSS import to main.tsx
+        const mainTsxPath = path.join(projectDir, "src", "main.tsx");
+        const mainContent = `import './styles/global.css';\n${fs.readFileSync(
+          mainTsxPath,
+          "utf-8"
+        )}`;
+        fs.writeFileSync(mainTsxPath, mainContent);
+      }
+
+      console.log(
+        chalk.green("\nSuccess! Created project at"),
+        chalk.yellow(projectDir)
+      );
+      console.log(chalk.cyan("\nStart developing with:"));
+      if (!isCurrentDir) console.log(`  cd ${projectName}`);
+      console.log("  npm run dev\n");
+    } catch (error) {
+      console.log(chalk.red("Error:"), error);
+      process.exit(1);
+    }
+  });
+
+program.parse(process.argv);

package/template/README.md

@@ -0,0 +1,63 @@
+# %PROJECT_NAME%
+
+Welcome to your new Revine project!
+
+## Getting Started
+
+### 1. Install dependencies
+```bash
+npm install
+```
+
+### 2. Start development server
+```bash
+npm run dev
+```
+
+## Scripts
+- npm run dev - Start dev server
+
+- npm run build - Production build
+
+- npm run preview - Preview production build
+
+## Project Structure
+```bash
+src/
+├── pages/         # Application routes
+│   └── index.tsx  # Home page
+├── App.tsx        # Router configuration
+└── main.tsx       # Application entry point
+```
+
+## Customization
+### Add a New Page
+Create new .tsx file in src/pages
+
+```tsx
+// src/pages/about.tsx
+export default function About() {
+  return <h1>About Page</h1>
+}
+```
+Access at /about
+
+### Modify Vite Config
+Edit vite.config.ts:
+
+```typescript
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 8080 // Custom port
+  }
+});
+```
+
+## Deployment
+Build for production:
+
+```bash
+npm run build
+```
+The build artifacts will be in dist/ directory.

package/template/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="This project is built using Revine" />
+    <meta name="theme-color" content="#ffffff" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="/assets/index.css" />
+    <title>Revine App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+    <noscript>
+      <h1>This application requires JavaScript to run.</h1>
+    </noscript>
+  </body>
+</html>

package/template/package.json

@@ -0,0 +1,21 @@
+{
+    "name": "{{project-name}}",
+    "version": "0.1.0",
+    "scripts": {
+      "dev": "vite",
+      "build": "vite build",
+      "preview": "vite preview"
+    },
+    "dependencies": {
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0",
+      "react-router-dom": "^6.22.3"
+    },
+    "devDependencies": {
+      "@types/react": "^18.2.45",
+      "@types/react-dom": "^18.2.18",
+      "typescript": "^5.3.3",
+      "vite": "^5.0.12",
+      "@vitejs/plugin-react": "^4.2.1"
+    }
+  }

package/template/src/App.tsx

@@ -0,0 +1,31 @@
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { lazy, Suspense, ComponentType } from "react";
+
+const pages = import.meta.glob("./pages/**/*.tsx");
+
+const routes = Object.entries(pages).map(([path, component]) => {
+  const routePath = path
+    .replace(/\.\/pages\//i, "")
+    .replace(/\.tsx$/i, "")
+    .replace(/\/index$/i, "")
+    .replace(/\[(\w+)\]/g, ":$1");
+
+  const Component = lazy(
+    component as unknown as () => Promise<{ default: ComponentType }>
+  );
+
+  return {
+    path: routePath === "index" ? "/" : `/${routePath}`,
+    element: (
+      <Suspense fallback={<div>Loading...</div>}>
+        <Component />
+      </Suspense>
+    ),
+  };
+});
+
+const router = createBrowserRouter(routes);
+
+export default function App() {
+  return <RouterProvider router={router} />;
+}

package/template/src/main.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const container = document.getElementById("root")!;
+const root = createRoot(container);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/template/src/pages/index.tsx

@@ -0,0 +1,8 @@
+export default function HomePage() {
+  return (
+    <div>
+      <h1>Welcome to Revine!</h1>
+      <p>Start editing this page in src/pages/index.tsx</p>
+    </div>
+  );
+}

package/template/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src"]
+}

package/template/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    open: true,
+    port: 3000,
+    host: true
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+  }
+});

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ES2020",
+    "moduleResolution": "node",
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/template/**/*"]
+}