[DRAFT] feat: bun support

.circleci/cache-version.txt

@@ -1,2 +1,2 @@
 # Bump this version to force CI to re-create the cache from scratch.
-10-17-2025
+12-1-2025

packages/data-context/schemas/schema.graphql

@@ -1689,6 +1689,7 @@ enum OverLimitActionTypeEnum {
 }
 
 enum PackageManagerEnum {
+  bun
   npm
   pnpm
   yarn

packages/data-context/src/data/ProjectLifecycleManager.ts

@@ -199,6 +199,10 @@ export class ProjectLifecycleManager {
       return 'pnpm'
     }
 
+    if (fs.existsSync(path.join(projectRoot, 'bun.lock'))) {
+      return 'bun'
+    }
+
     return 'npm'
   }
 

packages/data-context/src/sources/WizardDataSource.ts

@@ -33,6 +33,7 @@ export class WizardDataSource {
       'npm': 'npm install -D',
       'pnpm': 'pnpm add -D',
       'yarn': 'yarn add -D',
+      'bun': 'bun add -D',
     } as const
 
     const deps = (await this.ctx.wizard.packagesToInstall())

packages/types/src/constants.ts

@@ -20,7 +20,7 @@ export const CODE_LANGUAGES = [
 
 export type CodeLanguage = typeof CODE_LANGUAGES[number]
 
-export const PACKAGE_MANAGERS = ['npm', 'yarn', 'pnpm'] as const
+export const PACKAGE_MANAGERS = ['npm', 'yarn', 'pnpm', 'bun'] as const
 
 export type PackageManager = typeof PACKAGE_MANAGERS[number]
 

system-tests/lib/dep-installer/bun.ts

@@ -0,0 +1,27 @@
+import path from 'path'
+import tempDir from 'temp-dir'
+import { homedir } from 'os'
+
+export function getBunCommand (opts: {
+  updateLockFile: boolean
+  isCI: boolean
+  runScripts: boolean
+}): { cmd: string, env?: Record<string, string> } {
+  let cmd = 'bun install'
+
+  if (!opts.runScripts) cmd += ' --ignore-scripts'
+
+  if (!opts.updateLockFile) cmd += ' --frozen-lockfile'
+
+  // Bun configures cache directory via BUN_INSTALL_CACHE_DIR environment variable, not a flag
+  const cacheDir = opts.isCI
+    ? path.join(homedir(), '.bun', 'install', 'cache')
+    : path.join(tempDir, 'cy-system-tests-bun-cache', String(Date.now()))
+
+  return {
+    cmd,
+    env: {
+      BUN_INSTALL_CACHE_DIR: cacheDir,
+    },
+  }
+}

system-tests/lib/dep-installer/index.ts

@@ -4,6 +4,8 @@ import execa from 'execa'
 import { cyTmpDir, projectPath, projects, root } from '../fixtures'
 import { getYarnCommand } from './yarn'
 import { getNpmCommand } from './npm'
+import { getBunCommand } from './bun'
+import { getPnpmCommand } from './pnpm'
 
 type Dependencies = Record<string, string>
 
@@ -83,8 +85,18 @@ async function copyNodeModulesFromCache (tmpNodeModulesDir: string, cacheDir: st
 async function getLockFilename (dir: string) {
   const hasYarnLock = !!await fs.stat(path.join(dir, 'yarn.lock')).catch(() => false)
   const hasNpmLock = !!await fs.stat(path.join(dir, 'package-lock.json')).catch(() => false)
+  const hasPnpmLock = !!await fs.stat(path.join(dir, 'pnpm-lock.yaml')).catch(() => false)
+  const hasBunLock = !!await fs.stat(path.join(dir, 'bun.lock')).catch(() => false)
 
-  if (hasYarnLock && hasNpmLock) throw new Error(`The example project at '${dir}' has conflicting lockfiles. Only use one package manager's lockfile per project.`)
+  const lockfileCount = [hasYarnLock, hasNpmLock, hasPnpmLock, hasBunLock].filter(Boolean).length
+
+  if (lockfileCount > 1) {
+    throw new Error(`The example project at '${dir}' has conflicting lockfiles. Only use one package manager's lockfile per project.`)
+  }
+
+  if (hasBunLock) return 'bun.lock'
+
+  if (hasPnpmLock) return 'pnpm-lock.yaml'
 
   if (hasNpmLock) return 'package-lock.json'
 
@@ -164,9 +176,25 @@ export async function scaffoldProjectNodeModules ({
   )
   const projectPkgJsonPath = path.join(projectDir, 'package.json')
 
-  const runCmd = async (cmd) => {
-    log(`Running "${cmd}" in ${projectDir}`)
-    await execa(cmd, { cwd: projectDir, stdio: 'inherit', shell: true })
+  const runCmd = async (cmd: string | { cmd: string, env?: Record<string, string> }, env?: Record<string, string>) => {
+    let command: string
+    let commandEnv: Record<string, string> | undefined
+
+    if (typeof cmd === 'string') {
+      command = cmd
+      commandEnv = env
+    } else {
+      command = cmd.cmd
+      commandEnv = { ...cmd.env, ...env }
+    }
+
+    log(`Running "${command}" in ${projectDir}`)
+    await execa(command, {
+      cwd: projectDir,
+      stdio: 'inherit',
+      shell: true,
+      env: commandEnv ? { ...process.env, ...commandEnv } : undefined,
+    })
   }
 
   const cacheNodeModulesDir = path.join('/tmp', 'cy-system-tests-node-modules', project, 'node_modules')
@@ -197,6 +225,8 @@ export async function scaffoldProjectNodeModules ({
 
     const lockFilename = await getLockFilename(projectDir)
     const hasYarnLock = lockFilename === 'yarn.lock'
+    const hasPnpmLock = lockFilename === 'pnpm-lock.yaml'
+    const hasBunLock = lockFilename === 'bun.lock'
 
     // 1. Ensure there is a cache directory set up for this test project's `node_modules`.
     await ensureCacheDir(cacheNodeModulesDir)
@@ -226,8 +256,8 @@ export async function scaffoldProjectNodeModules ({
     log(`Writing ${lockFilename} with fixed relative paths to temp dir`)
     await restoreLockFileRelativePaths({ projectDir, lockFilePath, relativePathToMonorepoRoot })
 
-    // 5. Run `yarn/npm install`.
-    const getCommandFn = hasYarnLock ? getYarnCommand : getNpmCommand
+    // 5. Run `yarn/npm/bun/pnpm install`.
+    const getCommandFn = hasBunLock ? getBunCommand : (hasYarnLock ? getYarnCommand : (hasPnpmLock ? getPnpmCommand : getNpmCommand))
     const cmd = getCommandFn({
       updateLockFile,
       yarnV311: pkgJson._cyYarnV311,

system-tests/lib/dep-installer/pnpm.ts

@@ -0,0 +1,23 @@
+import path from 'path'
+import tempDir from 'temp-dir'
+import { homedir } from 'os'
+
+export function getPnpmCommand (opts: {
+  yarnV311: boolean
+  updateLockFile: boolean
+  isCI: boolean
+  runScripts: boolean
+}): string {
+  let cmd = 'pnpm install'
+
+  if (opts.yarnV311) throw new Error('_cyYarnV311 is not supported with PNPM.')
+
+  if (!opts.runScripts) cmd += ' --ignore-scripts'
+
+  if (!opts.updateLockFile) cmd += ' --frozen-lockfile'
+
+  if (opts.isCI) cmd += ` --store-dir=${homedir()}/.pnpm-store`
+  else cmd += ` --store-dir=${path.join(tempDir, 'cy-system-tests-pnpm-store', String(Date.now()))}`
+
+  return cmd
+}

system-tests/projects/bun-component-testing/cypress.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: 'react',
+      bundler: 'webpack',
+    },
+  },
+  e2e: {
+    baseUrl: 'http://localhost:5000',
+  },
+})

system-tests/projects/bun-component-testing/cypress/component/bun-component.cy.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { mount } from '@cypress/react'
+
+describe('Bun Component Test', () => {
+  it('should render a simple React component', () => {
+    const TestComponent = () => (
+      <div>
+        <h1>Hello from Bun!</h1>
+        <p>This component is tested using Bun package manager</p>
+      </div>
+    )
+
+    mount(<TestComponent />)
+    cy.contains('Hello from Bun!').should('be.visible')
+    cy.contains('This component is tested using Bun package manager').should('be.visible')
+  })
+
+  it('should work with TypeScript', () => {
+    interface Props {
+      message: string
+    }
+
+    const TypeScriptComponent: React.FC<Props> = ({ message }) => (
+      <div>
+        <h2>TypeScript Component</h2>
+        <p>{message}</p>
+      </div>
+    )
+
+    mount(<TypeScriptComponent message="Bun + TypeScript + Cypress" />)
+    cy.contains('TypeScript Component').should('be.visible')
+    cy.contains('Bun + TypeScript + Cypress').should('be.visible')
+  })
+})

system-tests/projects/bun-component-testing/cypress/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "es6"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "**/*"
+  ]
+}

system-tests/projects/bun-component-testing/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "bun-component-testing",
+  "version": "0.0.0-test",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "typescript": "^5.6.3"
+  }
+}

system-tests/projects/bun-component-testing/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "es6"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "cypress/**/*"
+  ]
+}

system-tests/projects/bun-with-deps/cypress/e2e/bun-test.cy.js

@@ -0,0 +1,15 @@
+describe('Bun E2E Test', () => {
+  it('should work with bun package manager', () => {
+    cy.visit('/cypress/fixtures/bun-test.html')
+    cy.contains('Bun Test Page').should('be.visible')
+  })
+
+  it('should be able to use lodash imported via bun', () => {
+    // This test verifies that dependencies installed via bun are available
+    const _ = require('lodash')
+
+    expect(_.isArray).to.be.a('function')
+    expect(_.isArray([])).to.be.true
+    expect(_.isArray({})).to.be.false
+  })
+})

system-tests/projects/bun-with-deps/cypress/fixtures/bun-test.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Bun Test Page</title>
+</head>
+<body>
+    <h1>Bun Test Page</h1>
+    <p>This page is used for testing Bun package manager integration with Cypress.</p>
+</body>
+</html>

system-tests/projects/bun-with-deps/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "bun-with-deps",
+  "version": "0.0.0-test",
+  "dependencies": {
+    "lodash": "^4.17.21"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.225",
+    "typescript": "^5.6.3"
+  }
+}