@react-grab/cli 0.1.32 → 0.1.34

package/README.md

@@ -1,6 +1,8 @@
 # @react-grab/cli
 
-Interactive CLI to install and configure React Grab in your project.
+CLI for installing React Grab and configuring its activation behavior.
+
+The CLI detects supported React projects, applies the dev-only setup, and can reconfigure an existing installation without hand-editing framework files.
 
 ## Quick Start
 
@@ -12,7 +14,7 @@ npx grab@latest init
 
 ### `grab init`
 
-Initialize React Grab in your project. Auto-detects your framework and applies the necessary changes.
+Install React Grab in the current project. The CLI auto-detects the framework and applies the required development-only integration.
 
 ```bash
 npx grab@latest init
@@ -27,35 +29,9 @@ npx grab@latest init
 | `--pkg <pkg>`    |       | Custom package URL                       |
 | `--cwd <cwd>`    | `-c`  | Working directory (default: current dir) |
 
-### `grab add`
-
-Connect React Grab to your coding agent via MCP.
-
-```bash
-npx grab@latest add mcp
-```
-
-| Option        | Alias | Description                              |
-| ------------- | ----- | ---------------------------------------- |
-| `--yes`       | `-y`  | Skip confirmation prompts                |
-| `--cwd <cwd>` | `-c`  | Working directory (default: current dir) |
-
-### `grab remove`
-
-Disconnect React Grab from your coding agent.
-
-```bash
-npx grab@latest remove mcp
-```
-
-| Option        | Alias | Description                              |
-| ------------- | ----- | ---------------------------------------- |
-| `--yes`       | `-y`  | Skip confirmation prompts                |
-| `--cwd <cwd>` | `-c`  | Working directory (default: current dir) |
-
 ### `grab configure`
 
-Configure React Grab options. Runs an interactive wizard when called without flags.
+Update React Grab options. Runs an interactive wizard when called without flags.
 
 ```bash
 npx grab@latest configure
@@ -84,9 +60,6 @@ npx grab@latest init -y
 # Set a custom activation key
 npx grab@latest init -k "Meta+K"
 
-# Connect MCP to your agent
-npx grab@latest add mcp
-
 # Change activation mode to hold
 npx grab@latest configure --mode hold --hold-duration 500
 
@@ -96,9 +69,10 @@ npx grab@latest configure
 
 ## Supported Frameworks
 
-| Framework              | Detection                             |
-| ---------------------- | ------------------------------------- |
-| Next.js (App Router)   | `next.config.ts` + `app/` directory   |
-| Next.js (Pages Router) | `next.config.ts` + `pages/` directory |
-| Vite                   | `vite.config.ts`                      |
-| Webpack                | `webpack.config.*`                    |
+The CLI currently configures:
+
+- Next.js App Router
+- Next.js Pages Router
+- Vite
+- TanStack Start
+- Webpack

package/bin/cli.js

@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+import module from "node:module";
+
+if (module.enableCompileCache && !process.env.NODE_DISABLE_COMPILE_CACHE) {
+  try {
+    module.enableCompileCache();
+  } catch {
+    // Ignore compile-cache errors.
+  }
+}
+
+await import("../dist/cli.js");

package/dist/cli.cjs

@@ -23,27 +23,27 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 //#endregion
 let commander = require("commander");
 let picocolors = require("picocolors");
-picocolors = __toESM(picocolors);
+picocolors = __toESM(picocolors, 1);
 let node_fs = require("node:fs");
-node_fs = __toESM(node_fs);
+node_fs = __toESM(node_fs, 1);
 let node_path = require("node:path");
-node_path = __toESM(node_path);
-let _antfu_ni = require("@antfu/ni");
+node_path = __toESM(node_path, 1);
+let package_manager_detector_detect = require("package-manager-detector/detect");
 let ignore = require("ignore");
-ignore = __toESM(ignore);
+ignore = __toESM(ignore, 1);
 let node_os = require("node:os");
-node_os = __toESM(node_os);
+node_os = __toESM(node_os, 1);
 let node_process = require("node:process");
-node_process = __toESM(node_process);
+node_process = __toESM(node_process, 1);
 let jsonc_parser = require("jsonc-parser");
-jsonc_parser = __toESM(jsonc_parser);
+jsonc_parser = __toESM(jsonc_parser, 1);
 let smol_toml = require("smol-toml");
-smol_toml = __toESM(smol_toml);
+smol_toml = __toESM(smol_toml, 1);
 let prompts = require("prompts");
-prompts = __toESM(prompts);
+prompts = __toESM(prompts, 1);
 let ora = require("ora");
-ora = __toESM(ora);
-let node_child_process = require("node:child_process");
+ora = __toESM(ora, 1);
+let tinyexec = require("tinyexec");
 //#region src/utils/is-non-interactive.ts
 const AGENT_ENVIRONMENT_VARIABLES = [
 	"CI",
@@ -65,9 +65,9 @@ const VALID_PACKAGE_MANAGERS = new Set([
 	"bun"
 ]);
 const detectPackageManager = async (projectRoot) => {
-	const detected = await (0, _antfu_ni.detect)({ cwd: projectRoot });
-	if (detected) {
-		const managerName = detected.split("@")[0];
+	const result = await (0, package_manager_detector_detect.detect)({ cwd: projectRoot });
+	if (result?.agent) {
+		const managerName = result.agent.split("@")[0];
 		if (VALID_PACKAGE_MANAGERS.has(managerName)) return managerName;
 	}
 	return "npm";
@@ -587,7 +587,7 @@ const promptMcpInstall = async () => {
 };
 //#endregion
 //#region src/commands/add.ts
-const VERSION$5 = "0.1.32";
+const VERSION$5 = "0.1.34";
 const add = new commander.Command().name("add").alias("install").description("connect React Grab to your agent via MCP").argument("[agent]", "agent to connect (mcp)").option("-y, --yes", "skip confirmation prompts", false).option("-c, --cwd <cwd>", "working directory (defaults to current directory)", process.cwd()).action(async (agentArg, opts) => {
 	console.log(`${picocolors.default.magenta("✿")} ${picocolors.default.bold("React Grab")} ${picocolors.default.gray(VERSION$5)}`);
 	console.log();
@@ -1217,7 +1217,7 @@ const formatActivationKeyDisplay = (activationKey) => {
 };
 //#endregion
 //#region src/commands/configure.ts
-const VERSION$4 = "0.1.32";
+const VERSION$4 = "0.1.34";
 const isMac = process.platform === "darwin";
 const META_LABEL = isMac ? "Cmd" : "Win";
 const ALT_LABEL = isMac ? "Option" : "Alt";
@@ -1408,7 +1408,7 @@ const formatCombo = (combo) => {
 	return parts.join("+");
 };
 const parseInput = (input) => {
-	const parts = input.toLowerCase().replace(/\s+/g, "").split(/[+\-]/);
+	const parts = input.toLowerCase().replace(/\s+/g, "").split(/[+-]/);
 	const modifiers = /* @__PURE__ */ new Set();
 	let partial = "";
 	for (const part of parts) {
@@ -1776,23 +1776,31 @@ const configure = new commander.Command().name("configure").alias("config").desc
 });
 //#endregion
 //#region src/utils/install.ts
-const INSTALL_COMMANDS = {
-	npm: "npm install",
-	yarn: "yarn add",
-	pnpm: "pnpm add",
-	bun: "bun add"
-};
-const installPackages = (packages, packageManager, projectRoot, isDev = true) => {
+const installPackages = async (packages, options = {}) => {
 	if (packages.length === 0) return;
-	const fullCommand = `${INSTALL_COMMANDS[packageManager]}${isDev ? " -D" : ""} ${packages.join(" ")}`;
-	console.log(`Running: ${fullCommand}\n`);
-	(0, node_child_process.execSync)(fullCommand, {
-		cwd: projectRoot,
-		stdio: "inherit",
-		env: {
-			...process.env,
-			REACT_GRAB_INIT: "1"
-		}
+	const detectedAgent = options.packageManager ?? await detectPackageManager(options.cwd ?? process.cwd());
+	const args = [];
+	if (options.preferOffline) args.push("--prefer-offline");
+	if (detectedAgent === "pnpm") {
+		args.push("--prod=false");
+		if ((0, node_fs.existsSync)((0, node_path.resolve)(options.cwd ?? process.cwd(), "pnpm-workspace.yaml"))) args.push("-w");
+	}
+	if (options.additionalArgs) args.push(...options.additionalArgs);
+	await (0, tinyexec.x)(detectedAgent, [
+		detectedAgent === "npm" ? "install" : "add",
+		...options.isDev !== false ? ["-D"] : [],
+		...args,
+		...packages
+	], {
+		nodeOptions: {
+			stdio: options.silent ? "ignore" : "inherit",
+			cwd: options.cwd,
+			env: {
+				...process.env,
+				REACT_GRAB_INIT: "1"
+			}
+		},
+		throwOnError: true
 	});
 };
 const getPackagesToInstall = (includeReactGrab = true) => {
@@ -1812,11 +1820,14 @@ const applyTransformWithFeedback = (result, message) => {
 	}
 	writeSpinner.succeed();
 };
-const installPackagesWithFeedback = (packages, packageManager, projectRoot) => {
+const installPackagesWithFeedback = async (packages, packageManager, projectRoot) => {
 	if (packages.length === 0) return;
 	const installSpinner = spinner(`Installing ${packages.join(", ")}.`).start();
 	try {
-		installPackages(packages, packageManager, projectRoot);
+		await installPackages(packages, {
+			packageManager,
+			cwd: projectRoot
+		});
 		installSpinner.succeed();
 	} catch (error) {
 		installSpinner.fail();
@@ -1825,7 +1836,7 @@ const installPackagesWithFeedback = (packages, packageManager, projectRoot) => {
 };
 //#endregion
 //#region src/commands/init.ts
-const VERSION$3 = "0.1.32";
+const VERSION$3 = "0.1.34";
 const REPORT_URL = "https://react-grab.com/api/report-cli";
 const DOCS_URL = "https://github.com/aidenybai/react-grab";
 const reportToCli = (type, config, error) => {
@@ -2183,7 +2194,7 @@ const init = new commander.Command().name("init").alias("setup").description("in
 			}
 		}
 		const shouldInstallReactGrab = !projectInfo.hasReactGrab;
-		if (!opts.skipInstall && shouldInstallReactGrab) installPackagesWithFeedback(getPackagesToInstall(shouldInstallReactGrab), finalPackageManager, projectInfo.projectRoot);
+		if (!opts.skipInstall && shouldInstallReactGrab) await installPackagesWithFeedback(getPackagesToInstall(shouldInstallReactGrab), finalPackageManager, projectInfo.projectRoot);
 		if (hasLayoutChanges) applyTransformWithFeedback(result);
 		logger.break();
 		logger.log(`${highlighter.success("Success!")} React Grab has been installed.`);
@@ -2203,7 +2214,7 @@ const init = new commander.Command().name("init").alias("setup").description("in
 });
 //#endregion
 //#region src/commands/remove.ts
-const VERSION$2 = "0.1.32";
+const VERSION$2 = "0.1.34";
 const remove = new commander.Command().name("remove").description("disconnect React Grab from your agent").argument("[agent]", "agent to disconnect (mcp)").option("-y, --yes", "skip confirmation prompts", false).option("-c, --cwd <cwd>", "working directory (defaults to current directory)", process.cwd()).action(async (agentArg, opts) => {
 	console.log(`${picocolors.default.magenta("✿")} ${picocolors.default.bold("React Grab")} ${picocolors.default.gray(VERSION$2)}`);
 	console.log();
@@ -2233,7 +2244,7 @@ const remove = new commander.Command().name("remove").description("disconnect Re
 });
 //#endregion
 //#region src/commands/upgrade.ts
-const VERSION$1 = "0.1.32";
+const VERSION$1 = "0.1.34";
 const NPM_REGISTRY_URL = "https://registry.npmjs.org/react-grab/latest";
 const fetchLatestVersion = async () => {
 	try {
@@ -2286,7 +2297,11 @@ const upgrade = new commander.Command().name("upgrade").alias("update").descript
 		versionSpinner.succeed(`Update available: ${highlighter.dim(fromLabel)} → ${highlighter.info(`v${latestVersion}`)}.`);
 		const upgradeSpinner = spinner("Upgrading react-grab.").start();
 		try {
-			installPackages(["react-grab@latest"], projectInfo.packageManager, projectInfo.projectRoot, isDevDependency(projectInfo.projectRoot));
+			await installPackages(["react-grab@latest"], {
+				packageManager: projectInfo.packageManager,
+				cwd: projectInfo.projectRoot,
+				isDev: isDevDependency(projectInfo.projectRoot)
+			});
 			upgradeSpinner.succeed();
 		} catch {
 			upgradeSpinner.fail();
@@ -2304,7 +2319,7 @@ const upgrade = new commander.Command().name("upgrade").alias("update").descript
 });
 //#endregion
 //#region src/cli.ts
-const VERSION = "0.1.32";
+const VERSION = "0.1.34";
 const VERSION_API_URL = "https://www.react-grab.com/api/version";
 process.on("SIGINT", () => process.exit(0));
 process.on("SIGTERM", () => process.exit(0));

package/dist/cli.js

@@ -3,7 +3,7 @@ import { Command } from "commander";
 import pc from "picocolors";
 import fs, { accessSync, constants, existsSync, readFileSync, readdirSync, writeFileSync } from "node:fs";
 import path, { basename, dirname, join, relative, resolve } from "node:path";
-import { detect } from "@antfu/ni";
+import { detect } from "package-manager-detector/detect";
 import ignore from "ignore";
 import os from "node:os";
 import process$1 from "node:process";
@@ -11,7 +11,7 @@ import * as jsonc from "jsonc-parser";
 import * as TOML from "smol-toml";
 import basePrompts from "prompts";
 import ora from "ora";
-import { execSync } from "node:child_process";
+import { x } from "tinyexec";
 //#region src/utils/is-non-interactive.ts
 const AGENT_ENVIRONMENT_VARIABLES = [
 	"CI",
@@ -33,9 +33,9 @@ const VALID_PACKAGE_MANAGERS = new Set([
 	"bun"
 ]);
 const detectPackageManager = async (projectRoot) => {
-	const detected = await detect({ cwd: projectRoot });
-	if (detected) {
-		const managerName = detected.split("@")[0];
+	const result = await detect({ cwd: projectRoot });
+	if (result?.agent) {
+		const managerName = result.agent.split("@")[0];
 		if (VALID_PACKAGE_MANAGERS.has(managerName)) return managerName;
 	}
 	return "npm";
@@ -555,7 +555,7 @@ const promptMcpInstall = async () => {
 };
 //#endregion
 //#region src/commands/add.ts
-const VERSION$5 = "0.1.32";
+const VERSION$5 = "0.1.34";
 const add = new Command().name("add").alias("install").description("connect React Grab to your agent via MCP").argument("[agent]", "agent to connect (mcp)").option("-y, --yes", "skip confirmation prompts", false).option("-c, --cwd <cwd>", "working directory (defaults to current directory)", process.cwd()).action(async (agentArg, opts) => {
 	console.log(`${pc.magenta("✿")} ${pc.bold("React Grab")} ${pc.gray(VERSION$5)}`);
 	console.log();
@@ -1185,7 +1185,7 @@ const formatActivationKeyDisplay = (activationKey) => {
 };
 //#endregion
 //#region src/commands/configure.ts
-const VERSION$4 = "0.1.32";
+const VERSION$4 = "0.1.34";
 const isMac = process.platform === "darwin";
 const META_LABEL = isMac ? "Cmd" : "Win";
 const ALT_LABEL = isMac ? "Option" : "Alt";
@@ -1376,7 +1376,7 @@ const formatCombo = (combo) => {
 	return parts.join("+");
 };
 const parseInput = (input) => {
-	const parts = input.toLowerCase().replace(/\s+/g, "").split(/[+\-]/);
+	const parts = input.toLowerCase().replace(/\s+/g, "").split(/[+-]/);
 	const modifiers = /* @__PURE__ */ new Set();
 	let partial = "";
 	for (const part of parts) {
@@ -1744,23 +1744,31 @@ const configure = new Command().name("configure").alias("config").description("c
 });
 //#endregion
 //#region src/utils/install.ts
-const INSTALL_COMMANDS = {
-	npm: "npm install",
-	yarn: "yarn add",
-	pnpm: "pnpm add",
-	bun: "bun add"
-};
-const installPackages = (packages, packageManager, projectRoot, isDev = true) => {
+const installPackages = async (packages, options = {}) => {
 	if (packages.length === 0) return;
-	const fullCommand = `${INSTALL_COMMANDS[packageManager]}${isDev ? " -D" : ""} ${packages.join(" ")}`;
-	console.log(`Running: ${fullCommand}\n`);
-	execSync(fullCommand, {
-		cwd: projectRoot,
-		stdio: "inherit",
-		env: {
-			...process.env,
-			REACT_GRAB_INIT: "1"
-		}
+	const detectedAgent = options.packageManager ?? await detectPackageManager(options.cwd ?? process.cwd());
+	const args = [];
+	if (options.preferOffline) args.push("--prefer-offline");
+	if (detectedAgent === "pnpm") {
+		args.push("--prod=false");
+		if (existsSync(resolve(options.cwd ?? process.cwd(), "pnpm-workspace.yaml"))) args.push("-w");
+	}
+	if (options.additionalArgs) args.push(...options.additionalArgs);
+	await x(detectedAgent, [
+		detectedAgent === "npm" ? "install" : "add",
+		...options.isDev !== false ? ["-D"] : [],
+		...args,
+		...packages
+	], {
+		nodeOptions: {
+			stdio: options.silent ? "ignore" : "inherit",
+			cwd: options.cwd,
+			env: {
+				...process.env,
+				REACT_GRAB_INIT: "1"
+			}
+		},
+		throwOnError: true
 	});
 };
 const getPackagesToInstall = (includeReactGrab = true) => {
@@ -1780,11 +1788,14 @@ const applyTransformWithFeedback = (result, message) => {
 	}
 	writeSpinner.succeed();
 };
-const installPackagesWithFeedback = (packages, packageManager, projectRoot) => {
+const installPackagesWithFeedback = async (packages, packageManager, projectRoot) => {
 	if (packages.length === 0) return;
 	const installSpinner = spinner(`Installing ${packages.join(", ")}.`).start();
 	try {
-		installPackages(packages, packageManager, projectRoot);
+		await installPackages(packages, {
+			packageManager,
+			cwd: projectRoot
+		});
 		installSpinner.succeed();
 	} catch (error) {
 		installSpinner.fail();
@@ -1793,7 +1804,7 @@ const installPackagesWithFeedback = (packages, packageManager, projectRoot) => {
 };
 //#endregion
 //#region src/commands/init.ts
-const VERSION$3 = "0.1.32";
+const VERSION$3 = "0.1.34";
 const REPORT_URL = "https://react-grab.com/api/report-cli";
 const DOCS_URL = "https://github.com/aidenybai/react-grab";
 const reportToCli = (type, config, error) => {
@@ -2151,7 +2162,7 @@ const init = new Command().name("init").alias("setup").description("initialize R
 			}
 		}
 		const shouldInstallReactGrab = !projectInfo.hasReactGrab;
-		if (!opts.skipInstall && shouldInstallReactGrab) installPackagesWithFeedback(getPackagesToInstall(shouldInstallReactGrab), finalPackageManager, projectInfo.projectRoot);
+		if (!opts.skipInstall && shouldInstallReactGrab) await installPackagesWithFeedback(getPackagesToInstall(shouldInstallReactGrab), finalPackageManager, projectInfo.projectRoot);
 		if (hasLayoutChanges) applyTransformWithFeedback(result);
 		logger.break();
 		logger.log(`${highlighter.success("Success!")} React Grab has been installed.`);
@@ -2171,7 +2182,7 @@ const init = new Command().name("init").alias("setup").description("initialize R
 });
 //#endregion
 //#region src/commands/remove.ts
-const VERSION$2 = "0.1.32";
+const VERSION$2 = "0.1.34";
 const remove = new Command().name("remove").description("disconnect React Grab from your agent").argument("[agent]", "agent to disconnect (mcp)").option("-y, --yes", "skip confirmation prompts", false).option("-c, --cwd <cwd>", "working directory (defaults to current directory)", process.cwd()).action(async (agentArg, opts) => {
 	console.log(`${pc.magenta("✿")} ${pc.bold("React Grab")} ${pc.gray(VERSION$2)}`);
 	console.log();
@@ -2201,7 +2212,7 @@ const remove = new Command().name("remove").description("disconnect React Grab f
 });
 //#endregion
 //#region src/commands/upgrade.ts
-const VERSION$1 = "0.1.32";
+const VERSION$1 = "0.1.34";
 const NPM_REGISTRY_URL = "https://registry.npmjs.org/react-grab/latest";
 const fetchLatestVersion = async () => {
 	try {
@@ -2254,7 +2265,11 @@ const upgrade = new Command().name("upgrade").alias("update").description("upgra
 		versionSpinner.succeed(`Update available: ${highlighter.dim(fromLabel)} → ${highlighter.info(`v${latestVersion}`)}.`);
 		const upgradeSpinner = spinner("Upgrading react-grab.").start();
 		try {
-			installPackages(["react-grab@latest"], projectInfo.packageManager, projectInfo.projectRoot, isDevDependency(projectInfo.projectRoot));
+			await installPackages(["react-grab@latest"], {
+				packageManager: projectInfo.packageManager,
+				cwd: projectInfo.projectRoot,
+				isDev: isDevDependency(projectInfo.projectRoot)
+			});
 			upgradeSpinner.succeed();
 		} catch {
 			upgradeSpinner.fail();
@@ -2272,7 +2287,7 @@ const upgrade = new Command().name("upgrade").alias("update").description("upgra
 });
 //#endregion
 //#region src/cli.ts
-const VERSION = "0.1.32";
+const VERSION = "0.1.34";
 const VERSION_API_URL = "https://www.react-grab.com/api/version";
 process.on("SIGINT", () => process.exit(0));
 process.on("SIGTERM", () => process.exit(0));