Merge pull request #67 from 10play/17Amir17/fix-non-npm-init

feat(cli): support yarn, pnpm, and bun package managers

Author: 17Amir17

cli/commands/dev.ts

@@ -3,7 +3,7 @@ import { spawn, execSync, type ChildProcess } from "child_process";
 import { existsSync, unlinkSync } from "fs";
 import { join } from "path";
 import { DevEnvironment, killProcessTree } from "../runner/devEnvironment.js";
-import { writeLocalConfig, updateInfoPlist, updateAndroidManifest, getPackageRoot, appendSecret, resolveAndroidJavaHome } from "../utils/common.js";
+import { writeLocalConfig, updateInfoPlist, updateAndroidManifest, getPackageRoot, appendSecret, resolveAndroidJavaHome, detectPackageManager, getExecCommand } from "../utils/common.js";
 
 export interface DevOptions {
   port: string;
@@ -26,7 +26,7 @@ export async function devCommand(options: DevOptions): Promise<void> {
     tunnel: false,
     server: true,
     runWidgetMetro: true,
-    metroCommand: "npm",
+    metroCommand: "run-script",
     watchServer: true,
   });
 
@@ -174,9 +174,12 @@ export async function devCommand(options: DevOptions): Promise<void> {
     }
   }
 
+  const pm = detectPackageManager(projectRoot);
+  const exec = getExecCommand(pm);
+
   buildProcess = spawn(
-    "npx",
-    runArgs,
+    exec.cmd,
+    [...exec.args, ...runArgs],
     {
       cwd: projectRoot,
       stdio: "inherit",

cli/commands/fly.ts

@@ -2,7 +2,7 @@ import chalk from "chalk";
 import { spawn } from "child_process";
 import { DevEnvironment } from "../runner/devEnvironment.js";
 import { detectAllDevices, selectDevice, ConnectedDevice } from "../utils/devices.js";
-import { getGitBranchSuffix, maskSecret, resolveAndroidJavaHome } from "../utils/common.js";
+import { getGitBranchSuffix, maskSecret, resolveAndroidJavaHome, detectPackageManager, getExecCommand } from "../utils/common.js";
 
 export interface FlyOptions {
   port: string;
@@ -59,7 +59,7 @@ export async function flyCommand(options: FlyOptions): Promise<void> {
     tunnel: options.tunnel,
     server: true, // fly always has server
     runWidgetMetro: options.dev ?? false, // Only in dev mode
-    metroCommand: "npx", // fly uses npx expo start
+    metroCommand: "exec", // fly uses <pm-exec> expo start
     watchServer: options.dev ?? false, // Watch prompt server in dev mode
   });
 
@@ -167,7 +167,10 @@ export async function flyCommand(options: FlyOptions): Promise<void> {
         String(ports.appMetro),
       ];
 
-  const buildProcess = spawn("npx", buildArgs, {
+  const pm = detectPackageManager(projectRoot);
+  const exec = getExecCommand(pm);
+
+  const buildProcess = spawn(exec.cmd, [...exec.args, ...buildArgs], {
     cwd: projectRoot,
     stdio: "inherit",
     env: buildEnv,

cli/commands/init.ts

@@ -2,6 +2,7 @@ import chalk from "chalk";
 import { execSync, spawn } from "child_process";
 import * as path from "path";
 import * as fs from "fs";
+import { detectPackageManager, getInstallCommand, getExecCommand } from "../utils/common.js";
 interface InitOptions {
   force?: boolean;
   skipPrebuild?: boolean;
@@ -50,17 +51,11 @@ export async function initCommand(options: InitOptions): Promise<void> {
     path.join(projectRoot, "node_modules", "@10play", "expo-air"),
   );
 
+  const pm = detectPackageManager(projectRoot);
+
   if (!allDeps["@10play/expo-air"] || !moduleExists) {
     console.log(chalk.gray("  Installing @10play/expo-air...\n"));
-    const cmd =
-      fs.existsSync(path.join(projectRoot, "bun.lockb")) ||
-      fs.existsSync(path.join(projectRoot, "bun.lock"))
-        ? "bun add @10play/expo-air"
-        : fs.existsSync(path.join(projectRoot, "pnpm-lock.yaml"))
-          ? "pnpm add @10play/expo-air"
-          : fs.existsSync(path.join(projectRoot, "yarn.lock"))
-            ? "yarn add @10play/expo-air"
-            : "npm install @10play/expo-air";
+    const cmd = getInstallCommand(pm, "@10play/expo-air");
 
     try {
       execSync(cmd, { cwd: projectRoot, stdio: "inherit" });
@@ -158,9 +153,12 @@ export async function initCommand(options: InitOptions): Promise<void> {
       ),
     );
 
+    const exec = getExecCommand(pm);
+    const prebuildCmd = [...exec.args, "expo", "prebuild", "--clean"];
+
     try {
       await new Promise<void>((resolve, reject) => {
-        const prebuild = spawn("npx", ["expo", "prebuild", "--clean"], {
+        const prebuild = spawn(exec.cmd, prebuildCmd, {
           cwd: projectRoot,
           stdio: "inherit",
           shell: true,
@@ -184,21 +182,23 @@ export async function initCommand(options: InitOptions): Promise<void> {
       const message = err instanceof Error ? err.message : String(err);
       console.log(chalk.red(`\n  Prebuild failed: ${message}`));
       console.log(
-        chalk.gray("  You can run it manually: npx expo prebuild --clean\n"),
+        chalk.gray(`  You can run it manually: ${exec.cmd} ${prebuildCmd.join(" ")}\n`),
       );
       process.exit(1);
     }
   } else {
+    const exec = getExecCommand(pm);
     console.log(chalk.yellow("\n  Skipped prebuild (--skip-prebuild)"));
-    console.log(chalk.gray("  Run manually: npx expo prebuild --clean\n"));
+    console.log(chalk.gray(`  Run manually: ${exec.cmd} ${[...exec.args, "expo", "prebuild", "--clean"].join(" ")}\n`));
   }
 
   // Success message
+  const exec = getExecCommand(pm);
   console.log(chalk.blue("\n  expo-air initialized!\n"));
   console.log(chalk.gray("  Next steps:"));
   console.log(
     chalk.white("    1. Connect your iOS or Android device via cable"),
   );
-  console.log(chalk.white("    2. Run: npx expo-air fly"));
+  console.log(chalk.white(`    2. Run: ${exec.cmd} ${[...exec.args, "expo-air", "fly"].join(" ")}`));
   console.log(chalk.white("    3. The widget will appear on your device\n"));
 }

cli/commands/start.ts

@@ -24,7 +24,7 @@ export async function startCommand(options: StartOptions): Promise<void> {
     tunnel: options.tunnel,
     server: options.server,
     // runWidgetMetro: auto-detect (default behavior)
-    metroCommand: "npm", // start uses npm start
+    metroCommand: "run-script", // start uses the project's start script
   });
 
   // Allocate ports

cli/runner/devEnvironment.ts

@@ -57,9 +57,9 @@ export interface DevEnvironmentOptions {
   tunnel?: boolean;
   /** Enable prompt server (default: true) */
   server?: boolean;
-  /** Run widget Metro server (default: auto-detect based on npm install) */
+  /** Run widget Metro server (default: auto-detect based on install) */
   runWidgetMetro?: boolean;
-  /** Metro command to use: 'npm' or 'npx' (default: 'npm') */
+  /** Metro command to use: 'run-script' or 'exec' (default: 'run-script') */
   metroCommand?: MetroCommand;
   /** Watch prompt server files and restart on changes (default: false) */
   watchServer?: boolean;
@@ -130,7 +130,7 @@ export class DevEnvironment {
       tunnel: options.tunnel ?? true,
       server: options.server ?? true,
       runWidgetMetro: shouldRunWidgetMetro,
-      metroCommand: options.metroCommand ?? "npm",
+      metroCommand: options.metroCommand ?? "run-script",
       watchServer: options.watchServer ?? false,
     } as Required<DevEnvironmentOptions>;
 

cli/utils/common.ts

@@ -434,6 +434,72 @@ export function resolveAndroidJavaHome(): string | null {
   return null;
 }
 
+export type PackageManager = "npm" | "yarn" | "pnpm" | "bun";
+
+/**
+ * Detect the package manager used in a project by checking lock files.
+ */
+export function detectPackageManager(projectRoot: string): PackageManager {
+  if (
+    fs.existsSync(path.join(projectRoot, "bun.lockb")) ||
+    fs.existsSync(path.join(projectRoot, "bun.lock"))
+  ) {
+    return "bun";
+  }
+  if (fs.existsSync(path.join(projectRoot, "pnpm-lock.yaml"))) {
+    return "pnpm";
+  }
+  if (fs.existsSync(path.join(projectRoot, "yarn.lock"))) {
+    return "yarn";
+  }
+  return "npm";
+}
+
+/**
+ * Get the command and args prefix for executing a local package binary.
+ * Equivalent of `npx` for each package manager.
+ *
+ * Usage: spawn(exec.cmd, [...exec.args, "expo", "prebuild", "--clean"])
+ */
+export function getExecCommand(pm: PackageManager): { cmd: string; args: string[] } {
+  switch (pm) {
+    case "bun": return { cmd: "bunx", args: [] };
+    case "pnpm": return { cmd: "pnpm", args: ["exec"] };
+    case "yarn": return { cmd: "yarn", args: [] };
+    case "npm": return { cmd: "npx", args: [] };
+  }
+}
+
+/**
+ * Get the full install command string for a package.
+ */
+export function getInstallCommand(pm: PackageManager, pkg: string): string {
+  switch (pm) {
+    case "bun": return `bun add ${pkg}`;
+    case "pnpm": return `pnpm add ${pkg}`;
+    case "yarn": return `yarn add ${pkg}`;
+    case "npm": return `npm install ${pkg}`;
+  }
+}
+
+/**
+ * Get command + args for running a package.json script with extra args.
+ *
+ * Usage: spawn(run.cmd, run.args)
+ */
+export function getRunScriptCommand(
+  pm: PackageManager,
+  script: string,
+  extraArgs: string[]
+): { cmd: string; args: string[] } {
+  switch (pm) {
+    case "npm": return { cmd: "npm", args: [script, "--", ...extraArgs] };
+    case "yarn": return { cmd: "yarn", args: [script, ...extraArgs] };
+    case "pnpm": return { cmd: "pnpm", args: [script, ...extraArgs] };
+    case "bun": return { cmd: "bun", args: ["run", script, ...extraArgs] };
+  }
+}
+
 export function getGitBranchSuffix(cwd?: string): string | null {
   try {
     const branch = execSync("git rev-parse --abbrev-ref HEAD", {

cli/utils/metro.ts

@@ -1,20 +1,20 @@
 import chalk from "chalk";
 import { spawn, ChildProcess } from "child_process";
-import { waitForPort } from "./common.js";
+import { waitForPort, detectPackageManager, getExecCommand, getRunScriptCommand } from "./common.js";
 
 export interface MetroProcess {
   process: ChildProcess;
   port: number;
   name: string;
 }
 
-export type MetroCommand = "npm" | "npx";
+export type MetroCommand = "run-script" | "exec";
 
 export interface StartMetroOptions {
   name: string;
   cwd: string;
   port: number;
-  /** Use 'npm' for `npm start -- --port`, 'npx' for `npx expo start --port` */
+  /** Use 'run-script' for `<pm> start --port`, 'exec' for `<pm-exec> expo start --port` */
   command?: MetroCommand;
   /** Timeout for waiting for port to be ready (default: 30000ms) */
   timeout?: number;
@@ -24,19 +24,23 @@ export interface StartMetroOptions {
  * Start a Metro bundler server
  */
 export async function startMetro(options: StartMetroOptions): Promise<ChildProcess | null> {
-  const { name, cwd, port, command = "npm", timeout = 30000 } = options;
+  const { name, cwd, port, command = "run-script", timeout = 30000 } = options;
+
+  const pm = detectPackageManager(cwd);
 
   try {
     let proc: ChildProcess;
 
-    if (command === "npm") {
-      proc = spawn("npm", ["start", "--", "--port", String(port)], {
+    if (command === "run-script") {
+      const run = getRunScriptCommand(pm, "start", ["--port", String(port)]);
+      proc = spawn(run.cmd, run.args, {
         cwd,
         stdio: ["ignore", "pipe", "pipe"],
         env: { ...process.env, FORCE_COLOR: "1" },
       });
     } else {
-      proc = spawn("npx", ["expo", "start", "--port", String(port)], {
+      const exec = getExecCommand(pm);
+      proc = spawn(exec.cmd, [...exec.args, "expo", "start", "--port", String(port)], {
         cwd,
         stdio: ["ignore", "pipe", "pipe"],
         env: {