fix(cli): make loader async to make it spin (#611)

.changeset/real-panthers-compete.md

@@ -0,0 +1,5 @@
+---
+"create-t3-app": patch
+---
+
+fix(cli): make `installDependencies` step async to make loader spin

cli/package.json

@@ -42,6 +42,7 @@
   "dependencies": {
     "chalk": "5.0.1",
     "commander": "^9.4.1",
+    "execa": "^6.1.0",
     "fs-extra": "^10.1.0",
     "gradient-string": "^2.0.2",
     "inquirer": "^9.1.2",

cli/src/helpers/git.ts

@@ -1,10 +1,11 @@
 import chalk from "chalk";
-import ora from "ora";
 import { execSync } from "child_process";
-import { logger } from "~/utils/logger.js";
+import { execa } from "execa";
 import fs from "fs-extra";
-import path from "path";
 import inquirer from "inquirer";
+import ora from "ora";
+import path from "path";
+import { logger } from "~/utils/logger.js";
 
 const isGitInstalled = (dir: string): boolean => {
   try {
@@ -32,6 +33,14 @@ const isInsideGitRepo = (dir: string): boolean => {
   }
 };
 
+const getGitVersion = () => {
+  const stdout = execSync("git --version").toString().trim();
+  const gitVersionTag = stdout.split(" ")[2];
+  const major = gitVersionTag?.split(".")[0];
+  const minor = gitVersionTag?.split(".")[1];
+  return { major: Number(major), minor: Number(minor) };
+};
+
 // This initializes the Git-repository for the project
 export const initializeGit = async (projectDir: string) => {
   logger.info("Initializing Git...");
@@ -87,17 +96,16 @@ export const initializeGit = async (projectDir: string) => {
 
   // We're good to go, initializing the git repo
   try {
-    let initCmd = "git init --initial-branch=main";
     // --initial-branch flag was added in git v2.28.0
-    const gitVersionOutput = execSync("git --version").toString(); // git version 2.32.0 ...
-    const gitVersionTag = gitVersionOutput.split(" ")[2];
-    const major = gitVersionTag?.split(".")[0];
-    const minor = gitVersionTag?.split(".")[1];
-    if (Number(major) < 2 || Number(minor) < 28) {
-      initCmd = "git init && git branch -m main";
+    const { major, minor } = getGitVersion();
+    if (major < 2 || minor < 28) {
+      await execa("git", ["init"], { cwd: projectDir });
+      await execa("git", ["branch", "-m", "main"], { cwd: projectDir });
+    } else {
+      await execa("git", ["init", "--initial-branch=main"], {
+        cwd: projectDir,
+      });
     }
-
-    execSync(initCmd, { cwd: projectDir });
     spinner.succeed(
       `${chalk.green("Successfully initialized")} ${chalk.green.bold("git")}\n`,
     );

cli/src/helpers/installDependencies.ts

@@ -1,15 +1,14 @@
-import { execSync } from "child_process";
+import { execa } from "execa";
 import ora from "ora";
 import { getUserPkgManager } from "~/utils/getUserPkgManager.js";
 import { logger } from "~/utils/logger.js";
 
-export const installDependencies = (projectDir: string) => {
+export const installDependencies = async (projectDir: string) => {
   logger.info("Installing dependencies...");
   const pkgManager = getUserPkgManager();
-  const command = `${pkgManager} install`;
-  const spinner = ora(`Running ${command}...\n`).start();
+  const spinner = ora(`Running ${pkgManager} install...\n`).start();
 
-  execSync(command, { cwd: projectDir });
+  await execa(pkgManager, ["install"], { cwd: projectDir });
 
   spinner.succeed("Successfully installed dependencies!\n");
 };

cli/src/index.ts

@@ -40,7 +40,7 @@ const main = async () => {
   });
 
   if (!noInstall) {
-    installDependencies(projectDir);
+    await installDependencies(projectDir);
   }
 
   if (!noGit) {