@react-grab/cli 0.0.76 → 0.0.78

package/dist/cli.cjs

@@ -9,6 +9,8 @@ var path = require('path');
 var ni = require('@antfu/ni');
 var colors = require('kleur/colors');
 var ora = require('ora');
+var http = require('http');
+var httpProxyMiddleware = require('http-proxy-middleware');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -1094,8 +1096,6 @@ var add = new commander.Command().name("add").description("add an agent integrat
   try {
     const cwd = opts.cwd;
     const isNonInteractive = opts.yes;
-    logger.log(`\u269B ${highlighter.info("React Grab")}`);
-    logger.break();
     const preflightSpinner = spinner("Preflight checks.").start();
     const projectInfo = await detectProject(cwd);
     if (!projectInfo.hasReactGrab) {
@@ -1181,7 +1181,11 @@ var add = new commander.Command().name("add").description("add an agent integrat
     if (hasLayoutChanges || hasPackageJsonChanges) {
       logger.break();
       if (hasLayoutChanges) {
-        printDiff(result.filePath, result.originalContent, result.newContent);
+        printDiff(
+          result.filePath,
+          result.originalContent,
+          result.newContent
+        );
       }
       if (hasPackageJsonChanges) {
         if (hasLayoutChanges) {
@@ -1215,7 +1219,11 @@ var add = new commander.Command().name("add").description("add an agent integrat
         `Installing ${packages.join(", ")}.`
       ).start();
       try {
-        installPackages(packages, projectInfo.packageManager, projectInfo.projectRoot);
+        installPackages(
+          packages,
+          projectInfo.packageManager,
+          projectInfo.projectRoot
+        );
         installSpinner.succeed();
       } catch (error) {
         installSpinner.fail();
@@ -1223,7 +1231,9 @@ var add = new commander.Command().name("add").description("add an agent integrat
       }
     }
     if (hasLayoutChanges) {
-      const writeSpinner = spinner(`Applying changes to ${result.filePath}.`).start();
+      const writeSpinner = spinner(
+        `Applying changes to ${result.filePath}.`
+      ).start();
       const writeResult = applyTransform(result);
       if (!writeResult.success) {
         writeSpinner.fail();
@@ -1258,7 +1268,7 @@ var add = new commander.Command().name("add").description("add an agent integrat
     handleError(error);
   }
 });
-var VERSION = "0.0.76";
+var VERSION = "0.0.78";
 var REPORT_URL = "https://react-grab.com/api/report-cli";
 var DOCS_URL = "https://github.com/aidenybai/react-grab";
 var reportToCli = async (type, config, error) => {
@@ -1307,8 +1317,6 @@ var init = new commander.Command().name("init").description("initialize React Gr
   try {
     const cwd = opts.cwd;
     const isNonInteractive = opts.yes;
-    logger.log(`\u269B ${highlighter.info("React Grab")}`);
-    logger.break();
     const preflightSpinner = spinner("Preflight checks.").start();
     const projectInfo = await detectProject(cwd);
     if (projectInfo.hasReactGrab && !opts.force) {
@@ -1562,12 +1570,232 @@ var init = new commander.Command().name("init").description("initialize React Gr
     await reportToCli("error", void 0, error);
   }
 });
+var DEFAULT_PROXY_PORT = 2e3;
+var REACT_GRAB_SCRIPT = '<script src="//unpkg.com/react-grab/dist/index.global.js"></script>';
+var buildProviderScript = (provider) => `<script src="//unpkg.com/${provider}/dist/client.global.js"></script>`;
+var findAvailablePort = async (startingPort, hostname) => {
+  return new Promise((resolve) => {
+    const server = http.createServer();
+    server.listen(startingPort, hostname, () => {
+      server.close(() => resolve(startingPort));
+    });
+    server.on("error", () => {
+      resolve(findAvailablePort(startingPort + 1, hostname));
+    });
+  });
+};
+var parseTargetUrl = (urlInput) => {
+  if (urlInput.startsWith("http://") || urlInput.startsWith("https://")) {
+    return urlInput;
+  }
+  return `http://${urlInput}`;
+};
+var resolveTargetUrl = async (initialUrl) => {
+  try {
+    const response = await fetch(initialUrl, {
+      method: "HEAD",
+      redirect: "follow"
+    });
+    return response.url;
+  } catch {
+    return initialUrl;
+  }
+};
+var start = new commander.Command().name("start").alias("proxy").description("start a proxy server for a given URL").argument("[url]", "target URL to proxy (e.g., localhost:3000)").option(
+  "-p, --port <port>",
+  "starting port for the proxy server",
+  String(DEFAULT_PROXY_PORT)
+).option(
+  "--host <hostname>",
+  "hostname to bind the proxy server to",
+  "localhost"
+).option(
+  "--provider <package>",
+  "provider package to run via npx (e.g., @react-grab/cursor)"
+).action(async (urlArg, opts) => {
+  let url = urlArg;
+  let provider = opts.provider;
+  if (!url) {
+    const { targetUrl: promptedUrl } = await prompts2__default.default({
+      type: "text",
+      name: "targetUrl",
+      message: "Enter the target URL to proxy:",
+      initial: "localhost:3000"
+    });
+    if (!promptedUrl) {
+      logger.break();
+      process.exit(1);
+    }
+    url = promptedUrl;
+    if (!provider) {
+      const { selectedProvider } = await prompts2__default.default({
+        type: "select",
+        name: "selectedProvider",
+        message: `Select a ${highlighter.info("provider")} to use:`,
+        choices: [
+          { title: "None", value: "" },
+          { title: "Claude Code", value: "@react-grab/claude-code" },
+          { title: "Cursor", value: "@react-grab/cursor" },
+          { title: "Opencode", value: "@react-grab/opencode" },
+          { title: "Ami", value: "@react-grab/ami" }
+        ]
+      });
+      if (selectedProvider === void 0) {
+        logger.break();
+        process.exit(1);
+      }
+      provider = selectedProvider || void 0;
+    }
+    logger.break();
+  }
+  const parsedUrl = parseTargetUrl(url);
+  const targetUrl = await resolveTargetUrl(parsedUrl);
+  const startingPort = parseInt(opts.port, 10);
+  const hostname = opts.host || "localhost";
+  if (isNaN(startingPort) || startingPort < 1 || startingPort > 65535) {
+    logger.break();
+    logger.error(
+      "Invalid port number. Please provide a port between 1 and 65535."
+    );
+    logger.break();
+    process.exit(1);
+  }
+  const proxyPort = await findAvailablePort(startingPort, hostname);
+  const scriptsToInject = provider ? REACT_GRAB_SCRIPT + buildProviderScript(provider) : REACT_GRAB_SCRIPT;
+  const injectScript = (html) => {
+    const headCloseIndex = html.indexOf("</head>");
+    if (headCloseIndex !== -1) {
+      return html.slice(0, headCloseIndex) + scriptsToInject + html.slice(headCloseIndex);
+    }
+    const bodyCloseIndex = html.indexOf("</body>");
+    if (bodyCloseIndex !== -1) {
+      return html.slice(0, bodyCloseIndex) + scriptsToInject + html.slice(bodyCloseIndex);
+    }
+    return html + scriptsToInject;
+  };
+  const proxyMiddleware = httpProxyMiddleware.createProxyMiddleware({
+    target: targetUrl,
+    changeOrigin: true,
+    followRedirects: false,
+    ws: true,
+    selfHandleResponse: true,
+    cookieDomainRewrite: {
+      "*": ""
+    },
+    autoRewrite: true,
+    preserveHeaderKeyCase: true,
+    xfwd: true,
+    on: {
+      error: (_error, _request, response) => {
+        if ("writeHead" in response && !response.headersSent) {
+          response.writeHead(503, { "Content-Type": "text/plain" });
+          response.end(`Proxy error: Unable to connect to ${targetUrl}`);
+        }
+      },
+      proxyReq: (proxyRequest) => {
+        proxyRequest.removeHeader("accept-encoding");
+      },
+      proxyRes: httpProxyMiddleware.responseInterceptor(async (responseBuffer, proxyResponse) => {
+        const contentType = proxyResponse.headers["content-type"] || "";
+        const isHtml = contentType.includes("text/html");
+        if (!isHtml) {
+          return responseBuffer;
+        }
+        const html = responseBuffer.toString("utf-8");
+        return injectScript(html);
+      })
+    }
+  });
+  const server = http.createServer((request, response) => {
+    proxyMiddleware(request, response, (error) => {
+      if (error) {
+        logger.error(`Request error: ${error}`);
+        response.writeHead(500);
+        response.end("Internal Server Error");
+      }
+    });
+  });
+  server.on("upgrade", proxyMiddleware.upgrade);
+  const startSpinner = spinner("Starting.").start();
+  const showSuccess = () => {
+    startSpinner.succeed(`Open in your browser: http://${hostname}:${proxyPort}`);
+    const commandParts = ["npx react-grab@latest start", url];
+    if (opts.port !== String(DEFAULT_PROXY_PORT)) {
+      commandParts.push(`--port=${opts.port}`);
+    }
+    if (hostname !== "localhost") {
+      commandParts.push(`--host=${hostname}`);
+    }
+    if (provider) {
+      commandParts.push(`--provider=${provider}`);
+    }
+    logger.break();
+    logger.log(highlighter.dim(`$ ${commandParts.join(" ")}`));
+  };
+  let isServerReady = false;
+  let isProviderReady = !provider;
+  const checkReady = () => {
+    if (isServerReady && isProviderReady) {
+      showSuccess();
+    }
+  };
+  server.listen(proxyPort, hostname, () => {
+    isServerReady = true;
+    checkReady();
+  });
+  if (provider) {
+    const providerProcess = child_process.spawn("npx", [`${provider}@latest`], {
+      stdio: "ignore",
+      shell: true,
+      detached: false
+    });
+    const cleanup = () => {
+      if (!providerProcess.killed) {
+        providerProcess.kill();
+      }
+    };
+    process.on("exit", cleanup);
+    process.on("SIGINT", () => {
+      cleanup();
+      process.exit(0);
+    });
+    process.on("SIGTERM", () => {
+      cleanup();
+      process.exit(0);
+    });
+    providerProcess.on("error", (error) => {
+      startSpinner.fail(`Failed to start provider: ${error.message}`);
+    });
+    providerProcess.on("spawn", () => {
+      isProviderReady = true;
+      checkReady();
+    });
+    providerProcess.on("close", (code) => {
+      if (code !== 0 && code !== null) {
+        logger.error(`Provider exited with code ${code}`);
+      }
+    });
+  }
+  server.on("error", (error) => {
+    logger.break();
+    logger.error(`Server error: ${error.message}`);
+    logger.break();
+    process.exit(1);
+  });
+});
 
 // src/cli.ts
-var VERSION2 = "0.0.76";
+var VERSION2 = "0.0.78";
+var VERSION_API_URL = "https://react-grab.com/api/version";
 process.on("SIGINT", () => process.exit(0));
 process.on("SIGTERM", () => process.exit(0));
+try {
+  fetch(`${VERSION_API_URL}?source=cli&t=${Date.now()}`).catch(() => {
+  });
+} catch {
+}
 var program = new commander.Command().name("react-grab").description("add React Grab to your project").version(VERSION2, "-v, --version", "display the version number");
 program.addCommand(init);
 program.addCommand(add);
+program.addCommand(start);
 program.parse();

package/dist/cli.js

@@ -1,12 +1,14 @@
 #!/usr/bin/env node
 import { Command } from 'commander';
 import prompts2 from 'prompts';
-import { execSync } from 'child_process';
+import { spawn, execSync } from 'child_process';
 import { existsSync, readFileSync, writeFileSync, accessSync, constants, readdirSync } from 'fs';
 import { join, basename } from 'path';
 import { detect } from '@antfu/ni';
 import { cyan, dim, green, yellow, red } from 'kleur/colors';
 import ora from 'ora';
+import { createServer } from 'http';
+import { createProxyMiddleware, responseInterceptor } from 'http-proxy-middleware';
 
 var detectPackageManager = async (projectRoot) => {
   const detected = await detect({ cwd: projectRoot });
@@ -1087,8 +1089,6 @@ var add = new Command().name("add").description("add an agent integration").argu
   try {
     const cwd = opts.cwd;
     const isNonInteractive = opts.yes;
-    logger.log(`\u269B ${highlighter.info("React Grab")}`);
-    logger.break();
     const preflightSpinner = spinner("Preflight checks.").start();
     const projectInfo = await detectProject(cwd);
     if (!projectInfo.hasReactGrab) {
@@ -1174,7 +1174,11 @@ var add = new Command().name("add").description("add an agent integration").argu
     if (hasLayoutChanges || hasPackageJsonChanges) {
       logger.break();
       if (hasLayoutChanges) {
-        printDiff(result.filePath, result.originalContent, result.newContent);
+        printDiff(
+          result.filePath,
+          result.originalContent,
+          result.newContent
+        );
       }
       if (hasPackageJsonChanges) {
         if (hasLayoutChanges) {
@@ -1208,7 +1212,11 @@ var add = new Command().name("add").description("add an agent integration").argu
         `Installing ${packages.join(", ")}.`
       ).start();
       try {
-        installPackages(packages, projectInfo.packageManager, projectInfo.projectRoot);
+        installPackages(
+          packages,
+          projectInfo.packageManager,
+          projectInfo.projectRoot
+        );
         installSpinner.succeed();
       } catch (error) {
         installSpinner.fail();
@@ -1216,7 +1224,9 @@ var add = new Command().name("add").description("add an agent integration").argu
       }
     }
     if (hasLayoutChanges) {
-      const writeSpinner = spinner(`Applying changes to ${result.filePath}.`).start();
+      const writeSpinner = spinner(
+        `Applying changes to ${result.filePath}.`
+      ).start();
       const writeResult = applyTransform(result);
       if (!writeResult.success) {
         writeSpinner.fail();
@@ -1251,7 +1261,7 @@ var add = new Command().name("add").description("add an agent integration").argu
     handleError(error);
   }
 });
-var VERSION = "0.0.76";
+var VERSION = "0.0.78";
 var REPORT_URL = "https://react-grab.com/api/report-cli";
 var DOCS_URL = "https://github.com/aidenybai/react-grab";
 var reportToCli = async (type, config, error) => {
@@ -1300,8 +1310,6 @@ var init = new Command().name("init").description("initialize React Grab in your
   try {
     const cwd = opts.cwd;
     const isNonInteractive = opts.yes;
-    logger.log(`\u269B ${highlighter.info("React Grab")}`);
-    logger.break();
     const preflightSpinner = spinner("Preflight checks.").start();
     const projectInfo = await detectProject(cwd);
     if (projectInfo.hasReactGrab && !opts.force) {
@@ -1555,12 +1563,232 @@ var init = new Command().name("init").description("initialize React Grab in your
     await reportToCli("error", void 0, error);
   }
 });
+var DEFAULT_PROXY_PORT = 2e3;
+var REACT_GRAB_SCRIPT = '<script src="//unpkg.com/react-grab/dist/index.global.js"></script>';
+var buildProviderScript = (provider) => `<script src="//unpkg.com/${provider}/dist/client.global.js"></script>`;
+var findAvailablePort = async (startingPort, hostname) => {
+  return new Promise((resolve) => {
+    const server = createServer();
+    server.listen(startingPort, hostname, () => {
+      server.close(() => resolve(startingPort));
+    });
+    server.on("error", () => {
+      resolve(findAvailablePort(startingPort + 1, hostname));
+    });
+  });
+};
+var parseTargetUrl = (urlInput) => {
+  if (urlInput.startsWith("http://") || urlInput.startsWith("https://")) {
+    return urlInput;
+  }
+  return `http://${urlInput}`;
+};
+var resolveTargetUrl = async (initialUrl) => {
+  try {
+    const response = await fetch(initialUrl, {
+      method: "HEAD",
+      redirect: "follow"
+    });
+    return response.url;
+  } catch {
+    return initialUrl;
+  }
+};
+var start = new Command().name("start").alias("proxy").description("start a proxy server for a given URL").argument("[url]", "target URL to proxy (e.g., localhost:3000)").option(
+  "-p, --port <port>",
+  "starting port for the proxy server",
+  String(DEFAULT_PROXY_PORT)
+).option(
+  "--host <hostname>",
+  "hostname to bind the proxy server to",
+  "localhost"
+).option(
+  "--provider <package>",
+  "provider package to run via npx (e.g., @react-grab/cursor)"
+).action(async (urlArg, opts) => {
+  let url = urlArg;
+  let provider = opts.provider;
+  if (!url) {
+    const { targetUrl: promptedUrl } = await prompts2({
+      type: "text",
+      name: "targetUrl",
+      message: "Enter the target URL to proxy:",
+      initial: "localhost:3000"
+    });
+    if (!promptedUrl) {
+      logger.break();
+      process.exit(1);
+    }
+    url = promptedUrl;
+    if (!provider) {
+      const { selectedProvider } = await prompts2({
+        type: "select",
+        name: "selectedProvider",
+        message: `Select a ${highlighter.info("provider")} to use:`,
+        choices: [
+          { title: "None", value: "" },
+          { title: "Claude Code", value: "@react-grab/claude-code" },
+          { title: "Cursor", value: "@react-grab/cursor" },
+          { title: "Opencode", value: "@react-grab/opencode" },
+          { title: "Ami", value: "@react-grab/ami" }
+        ]
+      });
+      if (selectedProvider === void 0) {
+        logger.break();
+        process.exit(1);
+      }
+      provider = selectedProvider || void 0;
+    }
+    logger.break();
+  }
+  const parsedUrl = parseTargetUrl(url);
+  const targetUrl = await resolveTargetUrl(parsedUrl);
+  const startingPort = parseInt(opts.port, 10);
+  const hostname = opts.host || "localhost";
+  if (isNaN(startingPort) || startingPort < 1 || startingPort > 65535) {
+    logger.break();
+    logger.error(
+      "Invalid port number. Please provide a port between 1 and 65535."
+    );
+    logger.break();
+    process.exit(1);
+  }
+  const proxyPort = await findAvailablePort(startingPort, hostname);
+  const scriptsToInject = provider ? REACT_GRAB_SCRIPT + buildProviderScript(provider) : REACT_GRAB_SCRIPT;
+  const injectScript = (html) => {
+    const headCloseIndex = html.indexOf("</head>");
+    if (headCloseIndex !== -1) {
+      return html.slice(0, headCloseIndex) + scriptsToInject + html.slice(headCloseIndex);
+    }
+    const bodyCloseIndex = html.indexOf("</body>");
+    if (bodyCloseIndex !== -1) {
+      return html.slice(0, bodyCloseIndex) + scriptsToInject + html.slice(bodyCloseIndex);
+    }
+    return html + scriptsToInject;
+  };
+  const proxyMiddleware = createProxyMiddleware({
+    target: targetUrl,
+    changeOrigin: true,
+    followRedirects: false,
+    ws: true,
+    selfHandleResponse: true,
+    cookieDomainRewrite: {
+      "*": ""
+    },
+    autoRewrite: true,
+    preserveHeaderKeyCase: true,
+    xfwd: true,
+    on: {
+      error: (_error, _request, response) => {
+        if ("writeHead" in response && !response.headersSent) {
+          response.writeHead(503, { "Content-Type": "text/plain" });
+          response.end(`Proxy error: Unable to connect to ${targetUrl}`);
+        }
+      },
+      proxyReq: (proxyRequest) => {
+        proxyRequest.removeHeader("accept-encoding");
+      },
+      proxyRes: responseInterceptor(async (responseBuffer, proxyResponse) => {
+        const contentType = proxyResponse.headers["content-type"] || "";
+        const isHtml = contentType.includes("text/html");
+        if (!isHtml) {
+          return responseBuffer;
+        }
+        const html = responseBuffer.toString("utf-8");
+        return injectScript(html);
+      })
+    }
+  });
+  const server = createServer((request, response) => {
+    proxyMiddleware(request, response, (error) => {
+      if (error) {
+        logger.error(`Request error: ${error}`);
+        response.writeHead(500);
+        response.end("Internal Server Error");
+      }
+    });
+  });
+  server.on("upgrade", proxyMiddleware.upgrade);
+  const startSpinner = spinner("Starting.").start();
+  const showSuccess = () => {
+    startSpinner.succeed(`Open in your browser: http://${hostname}:${proxyPort}`);
+    const commandParts = ["npx react-grab@latest start", url];
+    if (opts.port !== String(DEFAULT_PROXY_PORT)) {
+      commandParts.push(`--port=${opts.port}`);
+    }
+    if (hostname !== "localhost") {
+      commandParts.push(`--host=${hostname}`);
+    }
+    if (provider) {
+      commandParts.push(`--provider=${provider}`);
+    }
+    logger.break();
+    logger.log(highlighter.dim(`$ ${commandParts.join(" ")}`));
+  };
+  let isServerReady = false;
+  let isProviderReady = !provider;
+  const checkReady = () => {
+    if (isServerReady && isProviderReady) {
+      showSuccess();
+    }
+  };
+  server.listen(proxyPort, hostname, () => {
+    isServerReady = true;
+    checkReady();
+  });
+  if (provider) {
+    const providerProcess = spawn("npx", [`${provider}@latest`], {
+      stdio: "ignore",
+      shell: true,
+      detached: false
+    });
+    const cleanup = () => {
+      if (!providerProcess.killed) {
+        providerProcess.kill();
+      }
+    };
+    process.on("exit", cleanup);
+    process.on("SIGINT", () => {
+      cleanup();
+      process.exit(0);
+    });
+    process.on("SIGTERM", () => {
+      cleanup();
+      process.exit(0);
+    });
+    providerProcess.on("error", (error) => {
+      startSpinner.fail(`Failed to start provider: ${error.message}`);
+    });
+    providerProcess.on("spawn", () => {
+      isProviderReady = true;
+      checkReady();
+    });
+    providerProcess.on("close", (code) => {
+      if (code !== 0 && code !== null) {
+        logger.error(`Provider exited with code ${code}`);
+      }
+    });
+  }
+  server.on("error", (error) => {
+    logger.break();
+    logger.error(`Server error: ${error.message}`);
+    logger.break();
+    process.exit(1);
+  });
+});
 
 // src/cli.ts
-var VERSION2 = "0.0.76";
+var VERSION2 = "0.0.78";
+var VERSION_API_URL = "https://react-grab.com/api/version";
 process.on("SIGINT", () => process.exit(0));
 process.on("SIGTERM", () => process.exit(0));
+try {
+  fetch(`${VERSION_API_URL}?source=cli&t=${Date.now()}`).catch(() => {
+  });
+} catch {
+}
 var program = new Command().name("react-grab").description("add React Grab to your project").version(VERSION2, "-v, --version", "display the version number");
 program.addCommand(init);
 program.addCommand(add);
+program.addCommand(start);
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-grab/cli",
-  "version": "0.0.76",
+  "version": "0.0.78",
   "type": "module",
   "bin": {
     "react-grab": "./dist/cli.js"
@@ -23,6 +23,7 @@
   "dependencies": {
     "@antfu/ni": "^0.23.0",
     "commander": "^14.0.0",
+    "http-proxy-middleware": "^3.0.3",
     "kleur": "^4.1.5",
     "ora": "^8.2.0",
     "prompts": "^2.4.2"