Build: Introducing Bun for Script Execution

.circleci/config.yml

@@ -64,7 +64,7 @@ executors:
         default: "small"
     working_directory: /tmp/storybook
     docker:
-      - image: mcr.microsoft.com/playwright:v1.42.1-jammy
+      - image: mcr.microsoft.com/playwright:v1.42.1-focal
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
@@ -140,7 +140,8 @@ jobs:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
       - bun-orb/setup:
-          version: 1.1.1
+          version: 1.1.18
+      - node/install
       - restore_cache:
           name: Restore Yarn cache
           keys:
@@ -203,7 +204,8 @@ jobs:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
       - bun-orb/setup:
-          version: 1.1.1
+          version: 1.1.18
+      - node/install
       - attach_workspace:
           at: .
       - nx/set-shas:
@@ -222,6 +224,8 @@ jobs:
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
+      - bun-orb/setup:
+          version: 1.1.18
       - attach_workspace:
           at: .
       - run:
@@ -285,6 +289,8 @@ jobs:
     steps:
       # switched this to the CircleCI helper to get the full git history for TurboSnap
       - checkout
+      - bun-orb/setup:
+          version: 1.1.18
       - attach_workspace:
           at: .
       - run:
@@ -306,14 +312,16 @@ jobs:
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
+      - bun-orb/setup:
+          version: 1.1.18
       - attach_workspace:
           at: .
       - run:
           name: Enable Corepack
           command: sudo corepack enable yarn
       - run:
           name: Creating Sandboxes
-          command: yarn task --task sandbox --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task sandbox) --no-link --start-from=never --junit
+          command: yarn task --task sandbox --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task sandbox) --no-link --start-from=never --junit --debug
       - report-workflow-on-failure:
           template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task sandbox)
       - persist_to_workspace:
@@ -333,11 +341,13 @@ jobs:
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
+      - bun-orb/setup:
+          version: 1.1.18
       - attach_workspace:
           at: .
       - run:
           name: Smoke Testing Sandboxes
-          command: yarn task --task smoke-test --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task smoke-test) --no-link --start-from=never --junit
+          command: yarn task --task smoke-test --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task smoke-test) --no-link --start-from=never --junit --debug
       - report-workflow-on-failure:
           template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task smoke-test)
       - store_test_results:
@@ -354,17 +364,18 @@ jobs:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
       - bun-orb/setup:
-          version: 1.1.1
+          version: 1.1.18
+      - node/install
       - attach_workspace:
           at: .
       - run:
           name: Starting Event Collector
-          command: node --loader esbuild-register/loader -r esbuild-register ./event-log-collector.ts
+          command: bun ./event-log-collector.ts
           working_directory: scripts
           background: true
       - run:
           name: Building Sandboxes
-          command: yarn task --task build --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task build) --no-link --start-from=never --junit
+          command: yarn task --task build --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task build) --no-link --start-from=never --junit --debug
           environment:
             STORYBOOK_TELEMETRY_URL: "http://localhost:6007/event-log"
       - run:
@@ -373,7 +384,7 @@ jobs:
             TEMPLATE=$(yarn get-template --cadence << pipeline.parameters.workflow >> --task build)
             if [[ $TEMPLATE != bench/* ]]
             then
-              node --loader esbuild-register/loader -r esbuild-register ./event-log-checker.ts build $TEMPLATE
+              bun ./event-log-checker.ts build $TEMPLATE
             fi
           working_directory: scripts
       - report-workflow-on-failure:
@@ -396,11 +407,13 @@ jobs:
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
+      - bun-orb/setup:
+          version: 1.1.18
       - attach_workspace:
           at: .
       - run:
           name: Running Test Runner
-          command: yarn task --task test-runner --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner) --no-link --start-from=never --junit
+          command: yarn task --task test-runner --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner) --no-link --start-from=never --junit --debug
       - report-workflow-on-failure:
           template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner)
       - store_test_results:
@@ -416,11 +429,13 @@ jobs:
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
+      - bun-orb/setup:
+          version: 1.1.18
       - attach_workspace:
           at: .
       - run:
           name: Running Test Runner in Dev mode
-          command: yarn task --task test-runner-dev --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner-dev) --no-link --start-from=never --junit
+          command: yarn task --task test-runner-dev --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner-dev) --no-link --start-from=never --junit --debug
       - report-workflow-on-failure:
           template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner-dev)
       - store_test_results:
@@ -435,11 +450,13 @@ jobs:
     parallelism: << parameters.parallelism >>
     steps:
       - checkout
+      - bun-orb/setup:
+          version: 1.1.18
       - attach_workspace:
           at: .
       - run:
           name: Running Chromatic
-          command: yarn task --task chromatic --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task chromatic) --no-link --start-from=never --junit
+          command: yarn task --task chromatic --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task chromatic) --no-link --start-from=never --junit --debug
       - report-workflow-on-failure:
           template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task chromatic)
       - store_test_results:
@@ -455,11 +472,13 @@ jobs:
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
+      - bun-orb/setup:
+          version: 1.1.18
       - attach_workspace:
           at: .
       - run:
           name: Running E2E Tests
-          command: yarn task --task e2e-tests --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task e2e-tests) --no-link --start-from=never --junit
+          command: yarn task --task e2e-tests --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task e2e-tests) --no-link --start-from=never --junit --debug
       - report-workflow-on-failure:
           template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task e2e-tests)
       - store_test_results:
@@ -478,11 +497,13 @@ jobs:
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
+      - bun-orb/setup:
+          version: 1.1.18
       - attach_workspace:
           at: .
       - run:
           name: Running E2E Tests
-          command: yarn task --task e2e-tests-dev --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task e2e-tests-dev) --no-link --start-from=never --junit
+          command: yarn task --task e2e-tests-dev --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task e2e-tests-dev) --no-link --start-from=never --junit --debug
       - report-workflow-on-failure:
           template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task e2e-tests-dev)
       - store_test_results:
@@ -501,11 +522,13 @@ jobs:
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
+      - bun-orb/setup:
+          version: 1.1.18
       - attach_workspace:
           at: .
       - run:
           name: Running Bench
-          command: yarn task --task bench --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench) --no-link --start-from=never --junit
+          command: yarn task --task bench --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench) --no-link --start-from=never --junit --debug
       - run:
           name: Uploading results
           command: yarn upload-bench $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench) << pipeline.parameters.ghPrNumber >> << pipeline.parameters.ghBaseBranch >>
@@ -525,6 +548,8 @@ jobs:
           clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
+      - bun-orb/setup:
+          version: 1.1.18
       - when:
           condition:
             equal: ["npm", << parameters.packageManager >>]
@@ -615,6 +640,11 @@ jobs:
           clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
+      - run:
+          name: Install unzip
+          command: apt install zip
+      - bun-orb/setup:
+          version: 1.1.18
       - run:
           name: Install dependencies
           command: yarn install --no-immutable
@@ -637,7 +667,6 @@ jobs:
           name: Run Cypress CT tests
           command: yarn cypress
           working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
-      - report-workflow-on-failure
 workflows:
   docs:
     when:

.github/workflows/canary-release-pr.yml

@@ -62,8 +62,7 @@ jobs:
 
       - uses: oven-sh/setup-bun@v1
         with:
-          bun-version: 1.1.1
-
+          bun-version: 1.1.18
       - name: Cache dependencies
         uses: actions/cache@v4
         with:

.github/workflows/generate-sandboxes.yml

@@ -33,11 +33,15 @@ jobs:
       - uses: oven-sh/setup-bun@v1
         with:
           bun-version: 1.1.1
-  
+
       - uses: actions/setup-node@v4
         with:
           node-version-file: ".nvmrc"
 
+      - uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: 1.1.18
+
       - name: Setup git user
         run: |
           git config --global user.name "storybook-bot"
@@ -88,7 +92,7 @@ jobs:
 
       - uses: oven-sh/setup-bun@v1
         with:
-          bun-version: 1.1.1
+          bun-version: 1.1.18
 
       - uses: actions/setup-node@v4
         with:

.github/workflows/prepare-non-patch-release.yml

@@ -58,8 +58,7 @@ jobs:
 
       - uses: oven-sh/setup-bun@v1
         with:
-          bun-version: 1.1.1
-
+          bun-version: 1.1.18
       - name: Cache dependencies
         uses: actions/cache@v4
         with:

.github/workflows/prepare-patch-release.yml

@@ -37,7 +37,7 @@ jobs:
 
       - uses: oven-sh/setup-bun@v1
         with:
-          bun-version: 1.1.1
+          bun-version: 1.1.18
 
       - name: Cache dependencies
         uses: actions/cache@v4

.github/workflows/publish.yml

@@ -49,7 +49,7 @@ jobs:
 
       - uses: oven-sh/setup-bun@v1
         with:
-          bun-version: 1.1.1
+          bun-version: 1.1.18
 
       - name: Cache dependencies
         uses: actions/cache@v4

.github/workflows/tests-unit.yml

@@ -17,14 +17,13 @@ jobs:
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v4
-      - uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: 1.1.1
       - name: Set node version
         uses: actions/setup-node@v4
         with:
           node-version-file: ".nvmrc"
-
+      - uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: 1.1.18
       - name: install and compile
         run: yarn task --task compile --start-from=auto
       - name: test

CONTRIBUTING.md

@@ -2,13 +2,7 @@
 
 Storybook is developed against a specific node version which is defined in an `.nvmrc` file. You can use any Node version manager that uses the `.nvmrc` configuration file (we recommend [fnm](https://fnm.vercel.app/)).
 
-## Ensure you have the required system utilities
-
-You will need to have the following installed:
-- git
-- node
-- yarn
-- [bun](https://bun.sh/)
+Contributing to Storybook requires Linux or MacOS. If you are using Windows, you can use WSL2 to run the development environment.
 
 ## Using fnm as a Node version manager
 
@@ -19,10 +13,17 @@ You will need to have the following installed:
   eval "$(fnm env --use-on-cd --corepack-enabled --version-file-strategy recursive)"
   ```
 
+## Install bun
+
+Linux/Mac:
+
+```sh
+curl -fsSL https://bun.sh/install | bash
+```
+
 ## Running the local development environment
 
-- Ensure if you are using Windows to use the Windows Subsystem for Linux (WSL).
-- Run `yarn start` in the root directory to run a basic test Storybook "sandbox".
+Run `yarn start` in the root directory to run a basic test Storybook "sandbox".
 
 The `yarn start` script will generate a React Vite TypeScript sandbox with a set of test stories inside it, as well as taking all steps required to get it running (building the various packages we need etc). There is no need to run `yarn` or `yarn install` as `yarn start` will do this for you.
 

code/.gitignore

@@ -1 +1,2 @@
-.nx/cache
+.nx/cache
+.nx/workspace-data

code/addons/a11y/package.json

@@ -52,8 +52,8 @@
     "!src/**/*"
   ],
   "scripts": {
-    "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts",
-    "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
+    "check": "bun ../../../scripts/prepare/check.ts",
+    "prep": "bun ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
     "@storybook/addon-highlight": "workspace:*",

code/addons/actions/package.json

@@ -64,8 +64,8 @@
     "!src/**/*"
   ],
   "scripts": {
-    "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts",
-    "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
+    "check": "bun ../../../scripts/prepare/check.ts",
+    "prep": "bun ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
     "@storybook/global": "^5.0.0",

code/addons/backgrounds/package.json

@@ -52,8 +52,8 @@
     "!src/**/*"
   ],
   "scripts": {
-    "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts",
-    "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
+    "check": "bun ../../../scripts/prepare/check.ts",
+    "prep": "bun ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
     "@storybook/global": "^5.0.0",

code/addons/controls/package.json

@@ -47,8 +47,8 @@
     "!src/**/*"
   ],
   "scripts": {
-    "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts",
-    "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
+    "check": "bun ../../../scripts/prepare/check.ts",
+    "prep": "bun ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
     "dequal": "^2.0.2",