Add bundle size CI check using size-limit

.bundle-size-skip-branch

@@ -0,0 +1,6 @@
+# This file allows skipping the bundle size CI check for a specific branch.
+# When a branch name in this file matches the PR branch, the size check is skipped.
+#
+# Usage: Run `bin/skip-bundle-size-check` to set the current branch, then commit and push.
+#
+# This is useful when you have an intentional size increase that exceeds the 0.5KB threshold.

.github/workflows/bundle-size.yml

@@ -0,0 +1,115 @@
+name: Bundle Size
+
+on:
+  pull_request:
+    paths:
+      - 'packages/**'
+      - 'package.json'
+      - 'pnpm-lock.yaml'
+      - '.size-limit.json'
+      - '.github/workflows/bundle-size.yml'
+      - '.bundle-size-skip-branch'
+
+jobs:
+  check-skip:
+    runs-on: ubuntu-22.04
+    outputs:
+      skip: ${{ steps.skip-check.outputs.skip }}
+    steps:
+      - name: Checkout PR branch
+        uses: actions/checkout@v4
+
+      - name: Check if branch should skip size check
+        id: skip-check
+        env:
+          BRANCH: ${{ github.head_ref }}
+        run: |
+          SKIP_FILE=".bundle-size-skip-branch"
+          SKIP_BRANCH=$(grep -v '^[[:space:]]*#' "$SKIP_FILE" 2>/dev/null | grep -v '^[[:space:]]*$' | tr -d '[:space:]' || echo "")
+          if [ "$SKIP_BRANCH" = "$BRANCH" ]; then
+            echo "skip=true" >> $GITHUB_OUTPUT
+            echo "::notice::Branch '$BRANCH' is set to skip size check"
+          else
+            echo "skip=false" >> $GITHUB_OUTPUT
+          fi
+
+  size:
+    needs: check-skip
+    if: needs.check-skip.outputs.skip != 'true'
+    runs-on: ubuntu-22.04
+    permissions:
+      contents: read
+      pull-requests: write
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      # 1. Get PR's size-limit config first (base branch may not have it)
+      - name: Checkout PR branch for config
+        uses: actions/checkout@v4
+
+      - name: Save size-limit config
+        run: cp .size-limit.json /tmp/size-limit-config.json
+
+      # 2. Get base branch sizes
+      - name: Checkout base branch
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.base_ref }}
+
+      - name: Copy size-limit config to base branch
+        run: cp /tmp/size-limit-config.json .size-limit.json
+
+      - name: Install base dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build base branch
+        run: pnpm run build
+
+      - name: Verify build artifacts
+        run: |
+          missing=0
+          for pkg in react-on-rails react-on-rails-pro react-on-rails-pro-node-renderer; do
+            if ! ls packages/$pkg/lib/*.js >/dev/null 2>&1; then
+              echo "::error::Missing build artifacts in packages/$pkg/lib/"
+              missing=1
+            fi
+          done
+          if [ $missing -eq 1 ]; then
+            exit 1
+          fi
+          echo "All build artifacts verified"
+
+      - name: Measure base branch sizes
+        run: |
+          pnpm exec size-limit --json > /tmp/base-sizes.json
+          echo "Base branch sizes:"
+          cat /tmp/base-sizes.json
+
+      # 3. Checkout PR and set dynamic limits
+      - name: Checkout PR branch
+        uses: actions/checkout@v4
+
+      - name: Install PR dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Set dynamic limits (base + 0.5KB)
+        run: node scripts/bundle-size.mjs set-limits --base /tmp/base-sizes.json
+
+      # 4. Run the action with dynamic limits
+      - name: Check bundle size
+        uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          package_manager: pnpm
+          build_script: build
+          skip_step: install

CHANGELOG.md

@@ -25,6 +25,8 @@ Changes since the last non-beta release.
 
 #### Added
 
+- **Bundle Size CI Monitoring**: Added automated bundle size tracking to CI using size-limit. Compares PR bundle sizes against the base branch and fails if any package increases by more than 0.5KB. Includes local comparison tool (`bin/compare-bundle-sizes`) and bypass mechanism (`bin/skip-bundle-size-check`) for intentional size increases. [PR 2149](https://github.com/shakacode/react_on_rails/pull/2149) by [AbanoubGhadban](https://github.com/AbanoubGhadban).
+
 - **Service Dependency Checking for bin/dev**: Added optional `.dev-services.yml` configuration to validate required external services (Redis, PostgreSQL, Elasticsearch, etc.) are running before `bin/dev` starts the development server. Provides clear error messages with start commands and install hints when services are missing. Zero impact if not configured - backwards compatible with all existing installations. [PR 2098](https://github.com/shakacode/react_on_rails/pull/2098) by [justin808](https://github.com/justin808).
 
 #### Changed

CONTRIBUTING.md

@@ -305,6 +305,69 @@ Run only ESLint:
 pnpm run lint
 ```
 
+### Bundle Size Checks
+
+React on Rails monitors bundle sizes in CI to prevent unexpected size increases. The CI compares your PR's bundle sizes against the base branch and fails if any package increases by more than 0.5KB.
+
+#### Running Locally
+
+Check current bundle sizes:
+
+```sh
+pnpm run size
+```
+
+Get JSON output for programmatic use:
+
+```sh
+pnpm run size:json
+```
+
+Compare your branch against the base branch:
+
+```sh
+bin/compare-bundle-sizes
+```
+
+This script automatically:
+
+1. Stashes any uncommitted changes
+2. Checks out and builds the base branch (default: `master`)
+3. Checks out and builds your current branch
+4. Compares the sizes and shows a detailed report
+
+Options:
+
+```sh
+bin/compare-bundle-sizes main        # Compare against 'main' instead of 'master'
+bin/compare-bundle-sizes --hierarchical  # Group results by package
+```
+
+#### Bypassing the Check
+
+If your PR intentionally increases bundle size (e.g., adding a new feature), you can skip the bundle size check:
+
+```sh
+# Run from your PR branch
+bin/skip-bundle-size-check
+git add .bundle-size-skip-branch
+git commit -m "Skip bundle size check for intentional size increase"
+git push
+```
+
+This sets your branch to skip the size check. The skip only applies to the specific branch name written to `.bundle-size-skip-branch`.
+
+**Important**: Only skip the check when the size increase is justified. Document why the increase is acceptable in your PR description.
+
+#### What Gets Measured
+
+The CI measures sizes for:
+
+- **react-on-rails**: Raw, gzip, and brotli compressed sizes
+- **react-on-rails-pro**: Raw, gzip, and brotli compressed sizes
+- **react-on-rails-pro-node-renderer**: Raw, gzip, and brotli compressed sizes
+- **Webpack bundled imports**: Client-side bundle sizes when importing via webpack
+
 ### Starting the Dummy App
 
 To run the dummy app, it's **CRITICAL** to not just run `rails s`. You have to run `foreman start` with one of the Procfiles. If you don't do this, then `webpack` will not generate a new bundle, and you will be seriously confused when you change JavaScript and the app does not change. If you change the Webpack configs, then you need to restart Foreman. If you change the JS code for react-on-rails, you need to run `pnpm run build` in the project root.

bin/compare-bundle-sizes

@@ -0,0 +1,69 @@
+#!/usr/bin/env bash
+#
+# Compare bundle sizes between current branch and a base branch
+#
+# Usage:
+#   bin/compare-bundle-sizes [base-branch]
+#
+# Arguments:
+#   base-branch  The branch to compare against (default: master)
+#
+# Examples:
+#   bin/compare-bundle-sizes                    # Compare against master
+#   bin/compare-bundle-sizes develop            # Compare against develop
+#   bin/compare-bundle-sizes feature/some-branch
+
+set -e
+
+BASE_BRANCH="${1:-master}"
+CURRENT_BRANCH=$(git branch --show-current)
+STASHED=false
+
+# Colors for output
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+cleanup() {
+  echo -e "\n${BLUE}Cleaning up...${NC}"
+  git checkout "$CURRENT_BRANCH" --quiet 2>/dev/null || true
+  if [ "$STASHED" = true ]; then
+    git stash pop --quiet 2>/dev/null || true
+  fi
+}
+
+trap cleanup EXIT
+
+echo -e "${BLUE}📦 Bundle Size Comparison${NC}"
+echo -e "   Current branch: ${YELLOW}$CURRENT_BRANCH${NC}"
+echo -e "   Base branch:    ${YELLOW}$BASE_BRANCH${NC}"
+echo ""
+
+# Check for uncommitted changes
+if ! git diff --quiet || ! git diff --cached --quiet; then
+  echo -e "${YELLOW}Stashing uncommitted changes...${NC}"
+  git stash push -m "compare-bundle-sizes temp stash" --quiet
+  STASHED=true
+fi
+
+# Get base branch sizes
+echo -e "${BLUE}Building base branch ($BASE_BRANCH)...${NC}"
+git fetch origin "$BASE_BRANCH" --quiet 2>/dev/null || true
+git checkout "$BASE_BRANCH" --quiet 2>/dev/null || git checkout "origin/$BASE_BRANCH" --quiet
+pnpm install --frozen-lockfile 2>&1 | grep -v "^$" | head -5 || true
+pnpm run build 2>&1 | grep -v "^$" | tail -3 || true
+
+echo -e "${BLUE}Measuring base branch sizes...${NC}"
+pnpm exec size-limit --json > /tmp/base-sizes.json
+
+# Get current branch sizes
+echo -e "${BLUE}Building current branch ($CURRENT_BRANCH)...${NC}"
+git checkout "$CURRENT_BRANCH" --quiet
+pnpm install --frozen-lockfile 2>&1 | grep -v "^$" | head -5 || true
+pnpm run build 2>&1 | grep -v "^$" | tail -3 || true
+
+echo -e "${BLUE}Measuring current branch sizes...${NC}"
+pnpm exec size-limit --json > /tmp/current-sizes.json
+
+# Compare sizes using the bundle-size script
+node scripts/bundle-size.mjs compare --base /tmp/base-sizes.json --current /tmp/current-sizes.json

bin/skip-bundle-size-check

@@ -0,0 +1,34 @@
+#!/usr/bin/env bash
+#
+# Skip bundle size check for current branch
+#
+# Usage:
+#   bin/skip-bundle-size-check
+#
+
+set -e
+
+SKIP_FILE=".bundle-size-skip-branch"
+BRANCH=$(git branch --show-current)
+
+if [ -z "$BRANCH" ]; then
+  echo "Error: Not on a branch (detached HEAD?)"
+  exit 1
+fi
+
+# Write comment header and branch name
+cat > "$SKIP_FILE" << EOF
+# This file allows skipping the bundle size CI check for a specific branch.
+# When a branch name in this file matches the PR branch, the size check is skipped.
+#
+# Usage: Run \`bin/skip-bundle-size-check\` to set the current branch, then commit and push.
+#
+# This is useful when you have an intentional size increase that exceeds the 0.5KB threshold.
+$BRANCH
+EOF
+echo "Set '$BRANCH' as the branch to skip bundle size check"
+echo ""
+echo "Next steps:"
+echo "  git add $SKIP_FILE"
+echo "  git commit -m 'Skip bundle size check for $BRANCH'"
+echo "  git push"

package.json

@@ -34,7 +34,6 @@
     "@types/react-dom": "^18.3.5",
     "@types/turbolinks": "^5.2.2",
     "create-react-class": "^15.7.0",
-    "globals": "^16.2.0",
     "eslint": "^9.24.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-config-shakacode": "^19.0.0",
@@ -47,6 +46,7 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-testing-library": "^7.1.1",
+    "globals": "^16.2.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",