revine 0.8.0 → 0.9.0

package/src/index.ts

@@ -1,15 +1,91 @@
-#!/usr/bin/env node
-import { Command } from "commander";
-import { createProject } from "./commands/createProject.js";
-
-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 }) => {
-    await createProject(projectName, options);
-  });
-
-program.parse(process.argv);
+#!/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: string,
+  options: { force?: boolean },
+) => {
+  await createProject(projectName, options);
+};
+
+// Helper to run vite with internal config
+const runViteCommand = (command: string) => {
+  // 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: string | undefined,
+  options: { force?: boolean },
+) => {
+  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.8.0")
+  .argument("[project-name/command]")
+  .option("-f, --force", "Force creation in non-empty directory")
+  .action(async (arg: string | undefined, options: { force?: boolean }) => {
+    // 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 if (!arg) {
+      program.help();
+    }
+  });
+
+// Create subcommand (npx revine create my-app)
+program
+  .command("create")
+  .argument("<project-name>")
+  .option("-f, --force", "Force creation in non-empty directory")
+  .action(async (projectName: string, options: { force?: boolean }) => {
+    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/src/prompts/git.ts

@@ -1,61 +1,61 @@
-import inquirer from "inquirer";
-import { execSync } from "child_process";
-import { logInfo, logError } from "../utils/logger.js";
-
-/**
- * Check if Git is installed on the system.
- * @returns {boolean} true if Git exists, false otherwise.
- */
-function checkGitInstalled() {
-  try {
-    execSync("git --version", { stdio: "ignore" });
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-/**
- * Initialize a Git repository in the project directory.
- * @param projectDir - The directory where the project was set up.
- */
-export default async function initGit(projectDir: string) {
-  if (!checkGitInstalled()) {
-    logError(
-      "Git is not installed. Please install Git to use version control."
-    );
-    return;
-  }
-
-  const { initializeGit } = await inquirer.prompt([
-    {
-      type: "confirm",
-      name: "initializeGit",
-      message: "Do you want to initialize a Git repository?",
-      default: true,
-    },
-  ]);
-
-  if (initializeGit) {
-    const { commitMessage } = await inquirer.prompt([
-      {
-        type: "input",
-        name: "commitMessage",
-        message: "Enter the initial commit message:",
-        default: "chore: initial setup from revine",
-      },
-    ]);
-
-    try {
-      execSync("git init", { cwd: projectDir, stdio: "inherit" });
-      execSync("git add .", { cwd: projectDir, stdio: "inherit" });
-      execSync(`git commit -m "${commitMessage}"`, {
-        cwd: projectDir,
-        stdio: "inherit",
-      });
-      logInfo("Git repository initialized and initial commit created.");
-    } catch (error) {
-      logError("Failed to initialize Git repository or create commit.");
-    }
-  }
-}
+import inquirer from "inquirer";
+import { execSync } from "child_process";
+import { logInfo, logError } from "../utils/logger.js";
+
+/**
+ * Check if Git is installed on the system.
+ * @returns {boolean} true if Git exists, false otherwise.
+ */
+function checkGitInstalled() {
+  try {
+    execSync("git --version", { stdio: "ignore" });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Initialize a Git repository in the project directory.
+ * @param projectDir - The directory where the project was set up.
+ */
+export default async function initGit(projectDir: string) {
+  if (!checkGitInstalled()) {
+    logError(
+      "Git is not installed. Please install Git to use version control."
+    );
+    return;
+  }
+
+  const { initializeGit } = await inquirer.prompt([
+    {
+      type: "confirm",
+      name: "initializeGit",
+      message: "Do you want to initialize a Git repository?",
+      default: true,
+    },
+  ]);
+
+  if (initializeGit) {
+    const { commitMessage } = await inquirer.prompt([
+      {
+        type: "input",
+        name: "commitMessage",
+        message: "Enter the initial commit message:",
+        default: "chore: initial setup from revine",
+      },
+    ]);
+
+    try {
+      execSync("git init", { cwd: projectDir, stdio: "inherit" });
+      execSync("git add .", { cwd: projectDir, stdio: "inherit" });
+      execSync(`git commit -m "${commitMessage}"`, {
+        cwd: projectDir,
+        stdio: "inherit",
+      });
+      logInfo("Git repository initialized and initial commit created.");
+    } catch (error) {
+      logError("Failed to initialize Git repository or create commit.");
+    }
+  }
+}

package/src/prompts/index.ts

@@ -1,3 +1,3 @@
-export { default as askForTailwindSetup } from "./tailwind.js";
-export { default as runProject } from "./project.js";
-export { default as initGit } from "./git.js";
+export { default as askForTailwindSetup } from "./tailwind.js";
+export { default as runProject } from "./project.js";
+export { default as initGit } from "./git.js";

package/src/prompts/project.ts

@@ -1,31 +1,34 @@
-import inquirer from "inquirer";
-import { execSync } 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.
- * @param projectDir - The directory where the project was set up.
- */
-export default async function runProject(projectDir: string) {
-  const { runProject } = await inquirer.prompt([
-    {
-      type: "confirm",
-      name: "runProject",
-      message: "Do you want to run the project now?",
-      default: true,
-    },
-  ]);
-
-  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`."
-      );
-    }
-  }
-}
+import inquirer from "inquirer";
+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 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: string) {
+  const { runProject } = await inquirer.prompt([
+    {
+      type: "confirm",
+      name: "runProject",
+      message: "Do you want to run the project now?",
+      default: true,
+    },
+  ]);
+
+  if (runProject) {
+    logInfo("Running your Revine project on dev server...");
+
+    // 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/src/prompts/tailwind.ts

@@ -1,13 +1,13 @@
-import inquirer from "inquirer";
-
-export default async function askForTailwindSetup(): Promise<boolean> {
-  const { useTailwind } = await inquirer.prompt([
-    {
-      type: "confirm",
-      name: "useTailwind",
-      message: "Would you like to set up Tailwind CSS?",
-      default: true,
-    },
-  ]);
-  return useTailwind;
-}
+import inquirer from "inquirer";
+
+export default async function askForTailwindSetup(): Promise<boolean> {
+  const { useTailwind } = await inquirer.prompt([
+    {
+      type: "confirm",
+      name: "useTailwind",
+      message: "Would you like to set up Tailwind CSS?",
+      default: true,
+    },
+  ]);
+  return useTailwind;
+}

package/{template/.revine → src/runtime}/bundler/defaults/vite.ts

@@ -1,18 +1,18 @@
-import react from "@vitejs/plugin-react";
-import { revineLoggerPlugin } from "../viteLoggerPlugin";
-
-export const defaultViteConfig = {
-  plugins: [react(), revineLoggerPlugin()],
-  logLevel: "silent",
-
-  server: {
-    clearScreen: false,
-    open: true,
-    port: 3000,
-    host: true,
-  },
-  build: {
-    outDir: "build",
-    emptyOutDir: true,
-  },
-};
+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/src/runtime/bundler/generateConfig.ts

@@ -0,0 +1,36 @@
+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";
+
+interface UserConfig {
+  vite?: Record<string, unknown>;
+}
+
+export async function generateRevineViteConfig() {
+  // Load the user's revine.config.ts
+  const userConfig = (await loadUserConfig()) as UserConfig;
+
+  // 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)) as any;
+      finalConfig.plugins = [...(finalConfig.plugins || []), tailwindcss()];
+    }
+  } catch (e) {
+    // Ignore error if package.json not found or tailwind not importable
+  }
+
+  return finalConfig as any;
+}

package/src/runtime/bundler/revinePlugin.ts

@@ -0,0 +1,71 @@
+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(): any {
+  return {
+    name: "revine",
+
+    resolveId(id: string) {
+      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: string) {
+      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/src/runtime/bundler/utils/loadUserConfig.ts

@@ -0,0 +1,19 @@
+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/{template/.revine → src/runtime}/bundler/vite.config.ts

@@ -1,8 +1,8 @@
-import { defineConfig } from "vite";
-import { generateRevineViteConfig } from "./generateConfig";
-
-// Vite supports async config. We can do:
-export default defineConfig(async () => {
-  // Merge defaults + user overrides
-  return await generateRevineViteConfig();
-});
+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()) as any;
+});

package/{template/.revine → src/runtime}/bundler/viteLoggerPlugin.ts

@@ -1,33 +1,33 @@
-import type { Plugin, ViteDevServer } from "vite";
-import chalk from "chalk";
-
-export function revineLoggerPlugin(): Plugin {
-  //  custom chalk instance pointing to the indigo color
-  const indigo = chalk.hex("#6d28d9");
-
-  return {
-    name: "revine-logger",
-    configureServer(server: ViteDevServer) {
-      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: string) => {
-            console.log(indigo(`Network: ${chalk.green(url)}`));
-          });
-        }
-
-        console.log(indigo("─────────────────────────────────────────────"));
-        console.log("");
-      });
-    },
-  };
-}
+import type { Plugin, ViteDevServer } from "vite";
+import chalk from "chalk";
+
+export function revineLoggerPlugin(): Plugin {
+  //  custom chalk instance pointing to the indigo color
+  const indigo = chalk.hex("#6d28d9");
+
+  return {
+    name: "revine-logger",
+    configureServer(server: ViteDevServer) {
+      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: string) => {
+            console.log(indigo(`Network: ${chalk.green(url)}`));
+          });
+        }
+
+        console.log(indigo("─────────────────────────────────────────────"));
+        console.log("");
+      });
+    },
+  };
+}