revine 0.8.1 → 0.9.0

package/README.md

@@ -1,81 +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!
+# 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/config/package.js

@@ -3,6 +3,10 @@ export async function updatePackageJson(filePath, projectName, options = {}) {
     const packageJson = await fs.readJson(filePath);
     packageJson.name = projectName;
     packageJson.type = "module";
+    packageJson.dependencies = {
+        ...packageJson.dependencies,
+        revine: "latest",
+    };
     if (options.useTailwind) {
         packageJson.devDependencies = {
             ...packageJson.devDependencies,

package/dist/index.js

@@ -1,21 +1,53 @@
 #!/usr/bin/env node
 import { Command } from "commander";
 import { createProject } from "./commands/createProject.js";
+import { spawn } from "child_process";
+import path from "path";
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 const program = new Command();
 // Main command handler for direct project creation
 const handleProjectCreation = async (projectName, options) => {
     await createProject(projectName, options);
 };
-// Root command (npx revine my-app)
+// Helper to run vite with internal config
+const runViteCommand = (command) => {
+    // Path to the compiled vite.config.js in dist
+    const configPath = path.resolve(__dirname, "runtime/bundler/vite.config.js");
+    const args = [command, "--config", configPath];
+    if (command === "dev") {
+        // Vite dev doesn't need 'dev' argument, just calling vite is enough
+        args.shift();
+    }
+    spawn("npx", ["vite", ...args], {
+        stdio: "inherit",
+        shell: true,
+    });
+};
+// Main command handler for direct project creation with command check
+const handleRootAction = async (projectName, options) => {
+    const knownCommands = ["create", "dev", "build", "preview"];
+    if (projectName && !knownCommands.includes(projectName)) {
+        await handleProjectCreation(projectName, options);
+    }
+    else if (!projectName) {
+        program.help();
+    }
+};
+// Root command
 program
-    .version("0.1.0")
-    .argument("[project-name]")
+    .version("0.8.0")
+    .argument("[project-name/command]")
     .option("-f, --force", "Force creation in non-empty directory")
-    .action(async (projectName, options) => {
-    if (projectName) {
-        await handleProjectCreation(projectName, options);
+    .action(async (arg, options) => {
+    // If it's a known command, Commander will handle it in the subcommand action.
+    // We only handle it here if it's NOT a known command.
+    const knownCommands = ["create", "dev", "build", "preview"];
+    if (arg && !knownCommands.includes(arg)) {
+        await handleProjectCreation(arg, options);
     }
-    else {
+    else if (!arg) {
         program.help();
     }
 });
@@ -27,4 +59,16 @@ program
     .action(async (projectName, options) => {
     await handleProjectCreation(projectName, options);
 });
+program
+    .command("dev")
+    .description("Start the development server")
+    .action(() => runViteCommand("dev"));
+program
+    .command("build")
+    .description("Build the project for production")
+    .action(() => runViteCommand("build"));
+program
+    .command("preview")
+    .description("Preview the production build")
+    .action(() => runViteCommand("preview"));
 program.parse(process.argv);

package/dist/prompts/project.js

@@ -1,9 +1,10 @@
 import inquirer from "inquirer";
-import { execSync } from "child_process";
+import { spawn } from "child_process";
 import { logInfo } from "../utils/logger.js";
 /**
  * Ask the user if they want to run the project after setup is complete.
- * If the user confirms, it will run `npm run dev` or the equivalent command.
+ * If the user confirms, it will start the dev server using the same revine
+ * binary that was invoked (i.e. the local build), rather than the npm package.
  * @param projectDir - The directory where the project was set up.
  */
 export default async function runProject(projectDir) {
@@ -17,11 +18,13 @@ export default async function runProject(projectDir) {
     ]);
     if (runProject) {
         logInfo("Running your Revine project on dev server...");
-        try {
-            execSync("npm run dev", { cwd: projectDir, stdio: "inherit" });
-        }
-        catch (error) {
-            logInfo("Failed to start the project. You can manually run `npm run dev`.");
-        }
+        // Use the same revine binary that the user invoked (process.argv[1])
+        // so that local development always uses the local build.
+        const revineBin = process.argv[1];
+        spawn("node", [revineBin, "dev"], {
+            cwd: projectDir,
+            stdio: "inherit",
+            shell: false,
+        });
     }
 }

package/dist/runtime/bundler/defaults/vite.js

@@ -0,0 +1,17 @@
+import react from "@vitejs/plugin-react";
+import { revineLoggerPlugin } from "../viteLoggerPlugin.js";
+import { revinePlugin } from "../revinePlugin.js";
+export const defaultViteConfig = {
+    plugins: [react(), revinePlugin(), revineLoggerPlugin()],
+    logLevel: "silent",
+    server: {
+        clearScreen: false,
+        open: true,
+        port: 3000,
+        host: true,
+    },
+    build: {
+        outDir: "build",
+        emptyOutDir: true,
+    },
+};

package/dist/runtime/bundler/generateConfig.js

@@ -0,0 +1,27 @@
+import { merge } from "lodash-es";
+import path from "path";
+import fs from "fs-extra";
+import { defaultViteConfig } from "./defaults/vite.js";
+import { loadUserConfig } from "./utils/loadUserConfig.js";
+export async function generateRevineViteConfig() {
+    // Load the user's revine.config.ts
+    const userConfig = (await loadUserConfig());
+    // Merge user "vite" overrides with your default config
+    const finalConfig = merge({}, defaultViteConfig, userConfig.vite || {});
+    // Dynamically add Tailwind if present in the project
+    try {
+        const projectPkgPath = path.resolve(process.cwd(), "package.json");
+        const pkg = await fs.readJson(projectPkgPath);
+        const hasTailwind = pkg.devDependencies?.["@tailwindcss/vite"] ||
+            pkg.dependencies?.["@tailwindcss/vite"];
+        if (hasTailwind) {
+            const tailwindModule = "@tailwindcss/vite";
+            const { default: tailwindcss } = (await import(tailwindModule));
+            finalConfig.plugins = [...(finalConfig.plugins || []), tailwindcss()];
+        }
+    }
+    catch (e) {
+        // Ignore error if package.json not found or tailwind not importable
+    }
+    return finalConfig;
+}

package/dist/runtime/bundler/revinePlugin.js

@@ -0,0 +1,68 @@
+const VIRTUAL_ROUTING_ID = "\0revine:routing";
+/**
+ * The Revine Vite plugin.
+ *
+ * Provides a virtual module for `revine/routing` so that:
+ *  - `import.meta.glob` is resolved by Vite in the *project* context (not node_modules)
+ *  - React runtime is resolved from the project's own node_modules
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function revinePlugin() {
+    return {
+        name: "revine",
+        resolveId(id) {
+            if (id === "revine/routing") {
+                return VIRTUAL_ROUTING_ID;
+            }
+        },
+        // Return the routing source as a virtual module.
+        // Because it's virtual (not inside node_modules), Vite processes
+        // import.meta.glob and all imports normally in the project context.
+        load(id) {
+            if (id === VIRTUAL_ROUTING_ID) {
+                return `
+import { createBrowserRouter } from "react-router-dom";
+import { lazy, Suspense, createElement } from "react";
+
+// Eagerly load NotFound from the project's src directory.
+const notFoundModules = import.meta.glob("/src/NotFound.tsx", { eager: true });
+const NotFoundComponent = Object.values(notFoundModules)[0]?.default;
+
+// Lazily load all page components under /src/pages.
+const pages = import.meta.glob("/src/pages/**/*.tsx");
+
+const routes = Object.entries(pages).map(([filePath, component]) => {
+  let cleaned = filePath.replace(/\\\\/g, "/");
+  cleaned = cleaned.replace(/.*\\/pages\\//, "");
+  cleaned = cleaned.replace(/\\.tsx$/i, "");
+  cleaned = cleaned.replace(/\\/index$/, "");
+  cleaned = cleaned.replace(/\\[(\\w+)\\]/g, ":$1");
+  if (cleaned === "index") cleaned = "";
+
+  const routePath = cleaned === "" ? "/" : \`/\${cleaned}\`;
+  const Component = lazy(component);
+
+  return {
+    path: routePath,
+    element: createElement(
+      Suspense,
+      { fallback: createElement("div", null, "Loading\u2026") },
+      createElement(Component)
+    ),
+  };
+});
+
+// 404 fallback
+routes.push({
+  path: "*",
+  element: NotFoundComponent
+    ? createElement(NotFoundComponent)
+    : createElement("div", null, "404 - Page Not Found"),
+});
+
+export const router = createBrowserRouter(routes);
+`;
+            }
+        },
+    };
+}

package/dist/runtime/bundler/utils/loadUserConfig.js

@@ -0,0 +1,20 @@
+import path from "path";
+import { pathToFileURL } from "url";
+export async function loadUserConfig() {
+    const configPath = path.resolve(process.cwd(), "revine.config.ts");
+    try {
+        const configModule = await import(pathToFileURL(configPath).href);
+        return configModule.default || {};
+    }
+    catch (error) {
+        // If .ts fails, try .js or just return empty
+        try {
+            const configPathJs = path.resolve(process.cwd(), "revine.config.js");
+            const configModule = await import(pathToFileURL(configPathJs).href);
+            return configModule.default || {};
+        }
+        catch (e) {
+            return {};
+        }
+    }
+}

package/dist/runtime/bundler/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import { generateRevineViteConfig } from "./generateConfig.js";
+// Vite supports async config. We can do:
+export default defineConfig(async () => {
+    // Merge defaults + user overrides
+    return (await generateRevineViteConfig());
+});

package/dist/runtime/bundler/viteLoggerPlugin.js

@@ -0,0 +1,27 @@
+import chalk from "chalk";
+export function revineLoggerPlugin() {
+    //  custom chalk instance pointing to the indigo color
+    const indigo = chalk.hex("#6d28d9");
+    return {
+        name: "revine-logger",
+        configureServer(server) {
+            server.httpServer?.once("listening", () => {
+                const protocol = server.config.server.https ? "https" : "http";
+                const host = server.resolvedUrls?.local[0] || "localhost:3000";
+                const { network = [] } = server.resolvedUrls ?? {};
+                // Use the 'indigo' instance in place of 'chalk.cyan'
+                console.log(indigo("─────────────────────────────────────────────"));
+                console.log(indigo.bold("🚀 Revine Dev Server is now running!"));
+                console.log(indigo("─────────────────────────────────────────────"));
+                console.log(indigo(`Local:   ${chalk.green(`${protocol}://${host}`)}`));
+                if (network.length) {
+                    network.forEach((url) => {
+                        console.log(indigo(`Network: ${chalk.green(url)}`));
+                    });
+                }
+                console.log(indigo("─────────────────────────────────────────────"));
+                console.log("");
+            });
+        },
+    };
+}

package/dist/runtime/routing/fileBased.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createBrowserRouter } from "react-router-dom";
+import { lazy, Suspense } from "react";
+// @ts-ignore
+import NotFound from "/src/NotFound";
+// @ts-ignore
+const pages = import.meta.glob("/src/pages/**/*.tsx");
+const routes = Object.entries(pages).map(([filePath, component]) => {
+    let cleaned = filePath.replace(/\\/g, "/");
+    cleaned = cleaned.replace(/.*\/pages\//, "");
+    cleaned = cleaned.replace(/\.tsx$/i, "");
+    cleaned = cleaned.replace(/\/index$/, "");
+    cleaned = cleaned.replace(/\[(\w+)\]/g, ":$1");
+    if (cleaned === "index") {
+        cleaned = "";
+    }
+    const routePath = cleaned === "" ? "/" : `/${cleaned}`;
+    const Component = lazy(component);
+    return {
+        path: routePath,
+        element: (_jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(Component, {}) })),
+    };
+});
+// fallback route for 404s
+routes.push({
+    path: "*",
+    element: _jsx(NotFound, {}),
+});
+export const router = createBrowserRouter(routes);

package/dist/setup/dependencies.js

@@ -2,6 +2,7 @@ import { spawnSync } from "child_process";
 import { logError, logInfo } from "../utils/logger.js";
 export async function installDependencies(projectDir) {
     const npmCmd = process.platform === "win32" ? "npm.cmd" : "npm";
+    // Step 1: npm install
     const installResult = spawnSync(npmCmd, ["install"], {
         stdio: "inherit",
         cwd: projectDir,
@@ -12,4 +13,11 @@ export async function installDependencies(projectDir) {
         logInfo("Try running manually: npm install");
         process.exit(1);
     }
+    // Step 2: Link local revine if available (replaces npm version with local build)
+    // This is a no-op if revine hasn't been globally linked via `npm link` in the revine repo.
+    spawnSync(npmCmd, ["link", "revine"], {
+        stdio: "pipe", // suppress output — silently skip if not linked
+        cwd: projectDir,
+        shell: true,
+    });
 }