feat: rework repack-init

.changeset/three-ties-compete.md

@@ -0,0 +1,5 @@
+---
+"@callstack/repack": minor
+---
+
+Prettify `repack-init` and make it behave similarly to other tools in the ecosystem

packages/init/package.json

@@ -24,23 +24,21 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@inquirer/prompts": "^5.5.0",
-    "@manypkg/find-root": "^2.2.1",
-    "chalk": "^5.2.0",
-    "dedent": "^0.7.0",
-    "detect-package-manager": "^3.0.2",
-    "execa": "^7.1.1",
-    "node-fetch": "^3.3.1",
-    "ora": "^6.3.1",
-    "semver": "^7.5.1",
+    "@clack/prompts": "^0.9.1",
+    "@manypkg/find-root": "^2.2.3",
+    "chalk": "^5.4.1",
+    "dedent": "^1.5.3",
+    "execa": "^9.5.2",
+    "gradient-string": "^3.0.0",
+    "preferred-pm": "^4.0.0",
+    "semver": "^7.6.3",
     "xcode": "^3.0.1",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@types/dedent": "^0.7.2",
     "@types/node": "18",
-    "@types/semver": "^7.5.6",
-    "@types/yargs": "^17.0.32",
+    "@types/semver": "^7.5.8",
+    "@types/yargs": "^17.0.33",
     "typescript": "^5.7.2"
   }
 }

packages/init/src/bin.ts

@@ -3,7 +3,6 @@
 import { createRequire } from 'node:module';
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
-
 import run from './index.js';
 
 const require = createRequire(import.meta.url);

packages/init/src/index.ts

@@ -1,61 +1,86 @@
-import addDependencies from './tasks/addDependencies.js';
+import path from 'node:path';
+
 import checkPackageManager from './tasks/checkPackageManager.js';
+import checkProjectExists from './tasks/checkProjectExists.js';
 import checkReactNative from './tasks/checkReactNative.js';
+import collectProjectOptions from './tasks/collectProjectOptions.js';
+import completeSetup from './tasks/completeSetup.js';
 import createBundlerConfig from './tasks/createBundlerConfig.js';
-import ensureProjectExists from './tasks/ensureProjectExists.js';
-import handleReactNativeConfig from './tasks/handleReactNativeConfig.js';
+import createNewProject from './tasks/createNewProject.js';
+import modifyDependencies from './tasks/modifyDependencies.js';
 import modifyIOS from './tasks/modifyIOS.js';
-import selectBundler from './tasks/selectBundler.js';
-
+import modifyReactNativeConfig from './tasks/modifyReactNativeConfig.js';
+import welcomeMessage from './tasks/welcomeMessage.js';
 import logger, { enableVerboseLogging } from './utils/logger.js';
+import { cancelPromptAndExit } from './utils/prompts.js';
+import spinner from './utils/spinner.js';
 
 interface Options {
-  bundler: 'rspack' | 'webpack';
+  bundler: 'rspack' | 'webpack' | undefined;
   entry: string;
-  repackVersion?: string;
+  repackVersion: string | undefined;
   templateType: 'mjs' | 'cjs';
   verbose: boolean;
 }
 
-export default async function run({
-  bundler,
-  entry,
-  repackVersion,
-  templateType,
-  verbose,
-}: Options) {
-  if (verbose) {
+export default async function run(options: Options) {
+  const cwd = process.cwd();
+
+  if (options.verbose) {
     enableVerboseLogging();
   }
 
   try {
-    const { cwd, rootDir } = await ensureProjectExists();
-    const packageManager = await checkPackageManager(rootDir);
+    welcomeMessage();
+
+    const { projectRootDir } = await checkProjectExists(cwd);
+    const packageManager = await checkPackageManager(projectRootDir);
+    checkReactNative(projectRootDir);
 
-    checkReactNative(cwd);
+    const projectExists = projectRootDir !== undefined;
 
-    if (!bundler) {
-      bundler = await selectBundler();
+    const { bundler, projectName, shouldOverrideProject } =
+      await collectProjectOptions(cwd, projectExists, {
+        bundler: options.bundler,
+      });
+
+    spinner.start();
+
+    if (!projectExists) {
+      await createNewProject(
+        projectName,
+        packageManager,
+        shouldOverrideProject
+      );
     }
 
-    await addDependencies(bundler, cwd, packageManager, repackVersion);
+    const rootDir = projectRootDir ?? path.join(cwd, projectName!);
+
+    await modifyDependencies(bundler, rootDir, options.repackVersion);
+
+    await createBundlerConfig(
+      bundler,
+      rootDir,
+      options.templateType,
+      options.entry
+    );
 
-    await createBundlerConfig(bundler, cwd, templateType, entry);
+    modifyReactNativeConfig(bundler, rootDir);
 
-    handleReactNativeConfig(bundler, cwd);
+    modifyIOS(rootDir);
 
-    modifyIOS(cwd);
+    spinner.stop('Setup complete.');
 
-    logger.done('Setup complete. Thanks for using Re.Pack!');
+    completeSetup(projectName, packageManager);
   } catch (error) {
-    logger.fatal('Re.Pack setup failed\n\nWhat went wrong:');
+    logger.error('Re.Pack setup failed\n\nWhat went wrong:');
 
     if (error instanceof Error) {
       logger.error(error.message);
     } else {
       logger.error(error as any);
     }
 
-    process.exit(1);
+    cancelPromptAndExit();
   }
 }

packages/init/src/tasks/checkPackageManager.ts

@@ -1,17 +1,56 @@
-import { type PM, detect } from 'detect-package-manager';
+import preferredPM from 'preferred-pm';
+import type { PM, PackageManager } from '../types/pm.js';
 import logger from '../utils/logger.js';
 
+const PM_MAPPING: Record<string, PM> = {
+  npm: 'npm',
+  npx: 'npm',
+  yarn: 'yarn',
+  yarnpkg: 'yarn',
+  pnpm: 'pnpm',
+  pnpx: 'pnpm',
+  bun: 'bun',
+  bunx: 'bun',
+};
+
+const PM_COMMANDS: Record<PM, PackageManager> = {
+  npm: { name: 'npm', runCommand: 'npm', dlxCommand: 'npx' },
+  yarn: { name: 'yarn', runCommand: 'yarn', dlxCommand: 'yarn dlx' },
+  pnpm: { name: 'pnpm', runCommand: 'pnpm', dlxCommand: 'pnpm dlx' },
+  bun: { name: 'bun', runCommand: 'bun', dlxCommand: 'bunx' },
+};
+
 /**
  * Determines which package manager to use
  *
  * @param rootDir root directory of the project
- * @returns package manager name (one of 'npm', 'yarn', 'pnpm', 'bun')
+ * @returns package manager details including name and commands
  */
 export default async function checkPackageManager(
-  rootDir: string
-): Promise<PM> {
-  const packageManager = await detect({ cwd: rootDir });
-  logger.info(`Using ${packageManager} as package manager`);
+  rootDir: string | undefined
+): Promise<PackageManager> {
+  let packageManager: PM;
+
+  if (rootDir) {
+    const result = await preferredPM(rootDir);
+    if (result) {
+      packageManager = result.name;
+      logger.info(`Detected ${packageManager} as package manager`);
+      return PM_COMMANDS[packageManager];
+    }
+  }
+
+  const candidate = process.argv0;
+  packageManager = PM_MAPPING[candidate];
+
+  if (packageManager) {
+    logger.info(
+      `Detected ${packageManager} as package manager from executor ${candidate}`
+    );
+  } else {
+    logger.info('No package manager detected, defaulting to npm');
+    packageManager = 'npm';
+  }
 
-  return packageManager;
+  return PM_COMMANDS[packageManager];
 }

packages/init/src/tasks/checkProjectExists.ts

@@ -0,0 +1,22 @@
+import { findRoot } from '@manypkg/find-root';
+import logger from '../utils/logger.js';
+
+/**
+ * Checks if the project exists
+ *
+ * @param cwd current working directory
+ * @returns projectRootDir if it exists, undefined otherwise
+ */
+export default async function checkProjectExists(cwd: string): Promise<{
+  projectRootDir: string | undefined;
+}> {
+  try {
+    const { rootDir } = await findRoot(cwd);
+    logger.info(`Found root of the project at ${rootDir}`);
+    return { projectRootDir: rootDir };
+  } catch {
+    logger.info('No existing React Native project found');
+  }
+
+  return { projectRootDir: undefined };
+}

packages/init/src/tasks/checkReactNative.ts

@@ -1,16 +1,22 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import semver, { type SemVer } from 'semver';
-
 import logger from '../utils/logger.js';
 
 /**
  * Checks whether React-Native is installed and returns it's version
  *
- * @param cwd current working directory
+ * @param rootDir root directory of the project
  * @returns React-Native version
  */
-export default function checkReactNative(rootDir: string): SemVer {
+export default function checkReactNative(
+  rootDir: string | undefined
+): SemVer | undefined {
+  if (!rootDir) {
+    logger.info('Unknown React Native version');
+    return undefined;
+  }
+
   const packageJsonPath = path.join(rootDir, 'package.json');
   const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));