feat: Add support for using bun package manager (bunx / bun install) (#…

…1375)

* Detect and run install with bun if using bunx to call ct3a

* format

* add CI

* fix dev script in next-steps

* alter ci

* fix path

* lint

* changeset

* doc

---------

Co-authored-by: juliusmarminge <[email protected]>

.changeset/thick-turkeys-unite.md

@@ -0,0 +1,5 @@
+---
+"create-t3-app": minor
+---
+
+feat: detect and support usage of Bun as package manager

.github/workflows/e2e.yml

@@ -69,3 +69,66 @@ jobs:
       - run: cd ../ci-${{ matrix.trpc }}-${{ matrix.tailwind }}-${{ matrix.nextAuth }}-${{ matrix.prisma }} && pnpm build
         env:
           NEXTAUTH_SECRET: foo
+
+  build-t3-app-with-bun:
+    runs-on: ubuntu-latest
+
+    name: "Build and Start T3 App with Bun"
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      # First install everything and build the CLI with Node
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - uses: pnpm/[email protected]
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - run: pnpm turbo --filter=create-t3-app build
+
+      # Then, run the CLI and build the generated app with Bun
+      # Let's just build a full app with Bun, we don't need the matrix here
+      - uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - run: cd cli && bun run dist/index.js ../../ci-bun --default
+
+      - name: We should have a Bun lockfile
+        run: |
+          if [ ! -f "../ci-bun/bun.lockb" ]; then
+            echo "Bun lockfile not found"
+            exit 1
+          fi
+
+      # FIXME: This doesn't actually run the build script using bun, since Next.js doesn't support it yet.
+      # But you should still be able to use `bun` as a package manager for any Next.js app.
+      # If/When Next.js supports it, we should be able to run `bun --bun run build` here to override any Node binaries.
+      # See: https://bun.sh/docs/cli/bunx#shebangs
+      - run: cd ../ci-bun && bun run build
+        # - run: cd ../ci-bun && bun --bun run build
+        env:
+          NEXTAUTH_SECRET: foo

cli/src/helpers/installDependencies.ts

@@ -1,5 +1,5 @@
 import chalk from "chalk";
-import { execa } from "execa";
+import { execa, type StdioOption } from "execa";
 import ora, { type Ora } from "ora";
 
 import {
@@ -8,11 +8,32 @@ import {
 } from "~/utils/getUserPkgManager.js";
 import { logger } from "~/utils/logger.js";
 
-interface Options {
-  projectDir: string;
-}
+const execWithSpinner = async (
+  projectDir: string,
+  pkgManager: PackageManager,
+  options: {
+    args?: string[];
+    stdout?: StdioOption;
+    onDataHandle?: (spinner: Ora) => (data: Buffer) => void;
+  }
+) => {
+  const { onDataHandle, args = ["install"], stdout = "pipe" } = options;
+
+  const spinner = ora(`Running ${pkgManager} install...`).start();
+  const subprocess = execa(pkgManager, args, { cwd: projectDir, stdout });
+
+  await new Promise<void>((res, rej) => {
+    if (onDataHandle) {
+      subprocess.stdout?.on("data", onDataHandle(spinner));
+    }
+
+    void subprocess.on("error", (e) => rej(e));
+    void subprocess.on("close", () => res());
+  });
+
+  return spinner;
+};
 
-/*eslint-disable @typescript-eslint/no-floating-promises*/
 const runInstallCommand = async (
   pkgManager: PackageManager,
   projectDir: string
@@ -28,48 +49,34 @@ const runInstallCommand = async (
       return null;
     // When using yarn or pnpm, use the stdout stream and ora spinner to show the progress
     case "pnpm":
-      const pnpmSpinner = ora("Running pnpm install...").start();
-      const pnpmSubprocess = execa(pkgManager, ["install"], {
-        cwd: projectDir,
-        stdout: "pipe",
-      });
-
-      await new Promise<void>((res, rej) => {
-        pnpmSubprocess.stdout?.on("data", (data: Buffer) => {
+      return execWithSpinner(projectDir, pkgManager, {
+        onDataHandle: (spinner) => (data) => {
           const text = data.toString();
 
           if (text.includes("Progress")) {
-            pnpmSpinner.text = text.includes("|")
+            spinner.text = text.includes("|")
               ? text.split(" | ")[1] ?? ""
               : text;
           }
-        });
-        pnpmSubprocess.on("error", (e) => rej(e));
-        pnpmSubprocess.on("close", () => res());
+        },
       });
-
-      return pnpmSpinner;
     case "yarn":
-      const yarnSpinner = ora("Running yarn...").start();
-      const yarnSubprocess = execa(pkgManager, [], {
-        cwd: projectDir,
-        stdout: "pipe",
+      return execWithSpinner(projectDir, pkgManager, {
+        onDataHandle: (spinner) => (data) => {
+          spinner.text = data.toString();
+        },
       });
-
-      await new Promise<void>((res, rej) => {
-        yarnSubprocess.stdout?.on("data", (data: Buffer) => {
-          yarnSpinner.text = data.toString();
-        });
-        yarnSubprocess.on("error", (e) => rej(e));
-        yarnSubprocess.on("close", () => res());
-      });
-
-      return yarnSpinner;
+    // When using bun, the stdout stream is ignored and the spinner is shown
+    case "bun":
+      return execWithSpinner(projectDir, pkgManager, { stdout: "ignore" });
   }
 };
-/*eslint-enable @typescript-eslint/no-floating-promises*/
 
-export const installDependencies = async ({ projectDir }: Options) => {
+export const installDependencies = async ({
+  projectDir,
+}: {
+  projectDir: string;
+}) => {
   logger.info("Installing dependencies...");
   const pkgManager = getUserPkgManager();
 

cli/src/helpers/logNextSteps.ts

@@ -33,7 +33,11 @@ export const logNextSteps = async ({
     );
   }
 
-  logger.info(`  ${pkgManager === "npm" ? "npm run" : pkgManager} dev`);
+  if (["npm", "bun"].includes(pkgManager)) {
+    logger.info(`  ${pkgManager} run dev`);
+  } else {
+    logger.info(`  ${pkgManager} dev`);
+  }
 
   if (!(await isInsideGitRepo(projectDir)) && !isRootGitRepo(projectDir)) {
     logger.info(`  git init`);

cli/src/utils/getUserPkgManager.ts

@@ -1,4 +1,4 @@
-export type PackageManager = "npm" | "pnpm" | "yarn";
+export type PackageManager = "npm" | "pnpm" | "yarn" | "bun";
 
 export const getUserPkgManager: () => PackageManager = () => {
   // This environment variable is set by npm and yarn but pnpm seems less consistent
@@ -9,6 +9,8 @@ export const getUserPkgManager: () => PackageManager = () => {
       return "yarn";
     } else if (userAgent.startsWith("pnpm")) {
       return "pnpm";
+    } else if (userAgent.startsWith("bun")) {
+      return "bun";
     } else {
       return "npm";
     }

www/src/pages/ar/installation.mdx

@@ -29,6 +29,12 @@ yarn create t3-app
 pnpm create t3-app@latest
 ```
 
+### bun
+
+```bash
+bunx create-t3-app@latest
+```
+
 بعد أن تَنتهي عَملية إنشاء التطبيق، اَلق نَظرة عَلي [الخطوات الأولى](/ar/usage/first-steps) للبدء في تطبيقك الجديد.
 
 ## الخصائص المَتقدمة

www/src/pages/en/installation.mdx

@@ -28,6 +28,12 @@ yarn create t3-app
 pnpm create t3-app@latest
 ```
 
+### bun
+
+```bash
+bunx create-t3-app@latest
+```
+
 After your app has been scaffolded, check out the [first steps](/en/usage/first-steps) to get started on your new application.
 
 ## Advanced usage

www/src/pages/es/installation.mdx

@@ -28,6 +28,12 @@ yarn create t3-app
 pnpm create t3-app@latest
 ```
 
+### bun
+
+```bash
+bunx create-t3-app@latest
+```
+
 Después de que tu aplicación haya sido creada, consulta los [primeros pasos](/es/usage/first-steps) para comenzar con tu nueva aplicación.
 
 ## Uso avanzado

www/src/pages/fr/installation.mdx

@@ -28,6 +28,12 @@ yarn create t3-app
 pnpm create t3-app@latest
 ```
 
+### bun
+
+```bash
+bunx create-t3-app@latest
+```
+
 Une fois votre application configurée, consultez les [premières étapes](/fr/usage/first-steps) pour démarrer sur votre nouvelle application.
 
 ## Utilisation avancée

www/src/pages/ja/installation.mdx

@@ -28,6 +28,12 @@ yarn create t3-app
 pnpm create t3-app@latest
 ```
 
+### bun
+
+```bash
+bunx create-t3-app@latest
+```
+
 アプリケーションの初期構成が生成されたら、[ファーストステップ](/ja/usage/first-steps) をチェックして、新しいアプリケーションを開始しましょう。
 
 ## 高度な使用法

www/src/pages/no/installation.mdx

@@ -28,6 +28,12 @@ yarn create t3-app
 pnpm create t3-app@latest
 ```
 
+### bun
+
+```bash
+bunx create-t3-app@latest
+```
+
 Etter at applikasjonen din har blitt opprettet, sjekk ut [første steg](/no/usage/first-steps) for å begynne å utvikle den nye applikasjonen.
 
 ## Avansert bruk

www/src/pages/pl/installation.mdx

@@ -28,6 +28,12 @@ yarn create t3-app
 pnpm create t3-app@latest
 ```
 
+### bun
+
+```bash
+bunx create-t3-app@latest
+```
+
 Po tym, jak szablon aplikacji zostanie utworzony, sprawdź [pierwsze kroki](/pl/usage/first-steps) aby zacząć budować swoją nową aplikację.
 
 ## Zaawansowane użycie

www/src/pages/pt/installation.mdx

@@ -28,6 +28,12 @@ yarn create t3-app
 pnpm create t3-app@latest
 ```
 
+### bun
+
+```bash
+bunx create-t3-app@latest
+```
+
 Após sua aplicação ter sido estruturada, verifique os [Primeiros Passos](/pt/usage/first-steps) para começar a usar sua nova aplicação.
 
 ## Uso avançado

www/src/pages/ru/installation.mdx

@@ -28,6 +28,12 @@ yarn create t3-app
 pnpm create t3-app@latest
 ```
 
+### bun
+
+```bash
+bunx create-t3-app@latest
+```
+
 После того, как приложение будет создано, ознакомьтесь с [первыми шагами](/ru/usage/first-steps), чтобы начать работу над вашим новым приложением.
 
 ## Дополнительные параметры

www/src/pages/zh-hans/installation.mdx

@@ -28,6 +28,12 @@ yarn create t3-app
 pnpm create t3-app@latest
 ```
 
+### bun
+
+```bash
+bunx create-t3-app@latest
+```
+
 在你的应用程序被创建后，请查看 [第一步](/zh-hans/usage/first-steps) 以开始你的新应用。
 
 ## 高级用法