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) 以开始你的新应用。
 
 ## 高级用法