From be0828fa81e2d5837faf527ff70bd345234b1374 Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Wed, 3 Dec 2025 11:51:59 +0200 Subject: [PATCH 01/15] reverted temp.js --- packages/react-on-rails-pro/temp.js | 1 - 1 file changed, 1 deletion(-) delete mode 100644 packages/react-on-rails-pro/temp.js diff --git a/packages/react-on-rails-pro/temp.js b/packages/react-on-rails-pro/temp.js deleted file mode 100644 index e921523b1b..0000000000 --- a/packages/react-on-rails-pro/temp.js +++ /dev/null @@ -1 +0,0 @@ -console.log('hello'); From 1b0771cc8b3d121bf135f5ab238aa7634d12de3c Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Wed, 3 Dec 2025 12:06:59 +0200 Subject: [PATCH 02/15] don't run code on non-time limited entries --- scripts/bundle-size.mjs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/bundle-size.mjs b/scripts/bundle-size.mjs index 2276c49b40..8e53bb20f0 100644 --- a/scripts/bundle-size.mjs +++ b/scripts/bundle-size.mjs @@ -101,8 +101,8 @@ function createLimitEntry(entry, baseEntry, threshold, timePercentageThreshold) console.log(`${entry.name}:`); console.log(` base size: ${formatSize(baseEntry.size)}`); console.log(` limit: ${formatSize(limit)}\n`); - const sizeLimitEntry = { ...entry, limit: `${limit} B` }; - if (!sizeLimitEntry.running) { + const sizeLimitEntry = { ...entry, running: false, limit: `${limit} B` }; + if (!baseEntry.running) { return sizeLimitEntry; } From 10462b5f28a4631f90f17be0e3f0ed2d0879ec85 Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Wed, 3 Dec 2025 12:21:45 +0200 Subject: [PATCH 03/15] move new size-limit file with limits before building base branch --- .github/workflows/bundle-size.yml | 2 +- package.json | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/bundle-size.yml b/.github/workflows/bundle-size.yml index 3562fc73bd..249b9fdb35 100644 --- a/.github/workflows/bundle-size.yml +++ b/.github/workflows/bundle-size.yml @@ -111,5 +111,5 @@ jobs: with: github_token: ${{ secrets.GITHUB_TOKEN }} package_manager: pnpm - build_script: build + build_script: build-for-size-limit skip_step: install diff --git a/package.json b/package.json index 29b3e30c29..535268a665 100644 --- a/package.json +++ b/package.json @@ -76,6 +76,7 @@ "start": "nps", "nps": "nps", "build": "pnpm --filter react-on-rails run build && pnpm --filter react-on-rails-pro run build && pnpm --filter react-on-rails-pro-node-renderer run build", + "build-for-size-limit": "cp /tmp/size-limit-config.json .size-limit.json && pnpm build", "build-watch": "pnpm -r run build-watch", "lint": "nps eslint", "lint:scss": "stylelint \"react_on_rails/spec/dummy/app/assets/stylesheets/**/*.scss\" \"react_on_rails/spec/dummy/client/**/*.scss\"", From 5ae6db645dd2d86bef455db66301d44556b80f6e Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Wed, 3 Dec 2025 13:02:48 +0200 Subject: [PATCH 04/15] move new size-limit file with limits before building base branch --- .github/workflows/bundle-size.yml | 3 +++ package.json | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/.github/workflows/bundle-size.yml b/.github/workflows/bundle-size.yml index 249b9fdb35..c11caf2a9b 100644 --- a/.github/workflows/bundle-size.yml +++ b/.github/workflows/bundle-size.yml @@ -104,6 +104,9 @@ jobs: - name: Set dynamic limits (base + 0.5KB) run: node scripts/bundle-size.mjs set-limits --base /tmp/base-sizes.json + + - name: Copy .size-limit.json file with limits to tmp directory + run: cp .size-limit.json /tmp/.size-limit-with-limits.json # 4. Run the action with dynamic limits - name: Check bundle size diff --git a/package.json b/package.json index 535268a665..d7a9556b9c 100644 --- a/package.json +++ b/package.json @@ -76,7 +76,7 @@ "start": "nps", "nps": "nps", "build": "pnpm --filter react-on-rails run build && pnpm --filter react-on-rails-pro run build && pnpm --filter react-on-rails-pro-node-renderer run build", - "build-for-size-limit": "cp /tmp/size-limit-config.json .size-limit.json && pnpm build", + "build-for-size-limit": "cp /tmp/.size-limit-with-limits.json .size-limit.json && pnpm build", "build-watch": "pnpm -r run build-watch", "lint": "nps eslint", "lint:scss": "stylelint \"react_on_rails/spec/dummy/app/assets/stylesheets/**/*.scss\" \"react_on_rails/spec/dummy/client/**/*.scss\"", From cc1b96d5a19ede6b8d2a939be8c3c158da9afe08 Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Wed, 3 Dec 2025 13:08:53 +0200 Subject: [PATCH 05/15] run all imports at the browser --- scripts/bundle-size.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/bundle-size.mjs b/scripts/bundle-size.mjs index 8e53bb20f0..b0350713ed 100644 --- a/scripts/bundle-size.mjs +++ b/scripts/bundle-size.mjs @@ -101,7 +101,7 @@ function createLimitEntry(entry, baseEntry, threshold, timePercentageThreshold) console.log(`${entry.name}:`); console.log(` base size: ${formatSize(baseEntry.size)}`); console.log(` limit: ${formatSize(limit)}\n`); - const sizeLimitEntry = { ...entry, running: false, limit: `${limit} B` }; + const sizeLimitEntry = { ...entry, limit: `${limit} B` }; if (!baseEntry.running) { return sizeLimitEntry; } From 5f5c61af9bf9527767564c181d15e78df8ef2a34 Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Wed, 3 Dec 2025 13:20:39 +0200 Subject: [PATCH 06/15] run bundle size action using node20 image --- .github/workflows/bundle-size.yml | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/.github/workflows/bundle-size.yml b/.github/workflows/bundle-size.yml index c11caf2a9b..638a93bb15 100644 --- a/.github/workflows/bundle-size.yml +++ b/.github/workflows/bundle-size.yml @@ -36,18 +36,13 @@ jobs: size: needs: check-skip if: needs.check-skip.outputs.skip != 'true' - runs-on: ubuntu-22.04 + runs-on: node20 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: From b8b721cc5bc2f525c57ee60e953dab8a7a01ce38 Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Wed, 3 Dec 2025 13:31:29 +0200 Subject: [PATCH 07/15] update bundle size workflow --- .github/workflows/bundle-size.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/bundle-size.yml b/.github/workflows/bundle-size.yml index 638a93bb15..99e7c5d21d 100644 --- a/.github/workflows/bundle-size.yml +++ b/.github/workflows/bundle-size.yml @@ -36,7 +36,8 @@ jobs: size: needs: check-skip if: needs.check-skip.outputs.skip != 'true' - runs-on: node20 + runs: + using: 'node20' permissions: contents: read pull-requests: write From 53c492890d5e57f20e2657446eae3a2c704ee08a Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Wed, 3 Dec 2025 13:40:12 +0200 Subject: [PATCH 08/15] Revert "update bundle size workflow" This reverts commit b8b721cc5bc2f525c57ee60e953dab8a7a01ce38. --- .github/workflows/bundle-size.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.github/workflows/bundle-size.yml b/.github/workflows/bundle-size.yml index 99e7c5d21d..638a93bb15 100644 --- a/.github/workflows/bundle-size.yml +++ b/.github/workflows/bundle-size.yml @@ -36,8 +36,7 @@ jobs: size: needs: check-skip if: needs.check-skip.outputs.skip != 'true' - runs: - using: 'node20' + runs-on: node20 permissions: contents: read pull-requests: write From a518eab7ac6581dc11cffc793f23fbc0c06ea885 Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Wed, 3 Dec 2025 13:40:33 +0200 Subject: [PATCH 09/15] Revert "run bundle size action using node20 image" This reverts commit 5f5c61af9bf9527767564c181d15e78df8ef2a34. --- .github/workflows/bundle-size.yml | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/.github/workflows/bundle-size.yml b/.github/workflows/bundle-size.yml index 638a93bb15..c11caf2a9b 100644 --- a/.github/workflows/bundle-size.yml +++ b/.github/workflows/bundle-size.yml @@ -36,13 +36,18 @@ jobs: size: needs: check-skip if: needs.check-skip.outputs.skip != 'true' - runs-on: node20 + 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: From cebd4f6d5c74c7ba36a5f1f9b12dda76d37c8059 Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Wed, 3 Dec 2025 13:42:55 +0200 Subject: [PATCH 10/15] disable running time limits on CI --- scripts/bundle-size.mjs | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/scripts/bundle-size.mjs b/scripts/bundle-size.mjs index b0350713ed..16d707bd11 100644 --- a/scripts/bundle-size.mjs +++ b/scripts/bundle-size.mjs @@ -102,7 +102,10 @@ function createLimitEntry(entry, baseEntry, threshold, timePercentageThreshold) console.log(` base size: ${formatSize(baseEntry.size)}`); console.log(` limit: ${formatSize(limit)}\n`); const sizeLimitEntry = { ...entry, limit: `${limit} B` }; - if (!baseEntry.running) { + // Skip time limit on CI because this script runs on a different environment than the `andresz1/size-limit-action` + // So, this script calculate different timing values than that got by the `andresz1/size-limit-action` action + // TODO: fork `andresz1/size-limit-action` and make it time limits on the same environment used to run the check + if (!baseEntry.running || process.env.CI) { return sizeLimitEntry; } From 8a38d7c6b57422467e64cd330f3f81c39ce816ac Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Wed, 3 Dec 2025 13:55:29 +0200 Subject: [PATCH 11/15] don't run bundles on browser @size-limit/time is not accurate at all in detecting changes in runtime --- .size-limit.json | 16 ++++++++-------- scripts/bundle-size.mjs | 5 +---- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/.size-limit.json b/.size-limit.json index 02f07c5fe4..052c1c41b8 100644 --- a/.size-limit.json +++ b/.size-limit.json @@ -4,55 +4,55 @@ "path": "packages/react-on-rails/lib/ReactOnRails.client.js", "import": "ReactOnRails", "gzip": true, - "running": true + "running": false }, { "name": "react-on-rails/client bundled (brotli)", "path": "packages/react-on-rails/lib/ReactOnRails.client.js", "import": "ReactOnRails", "brotli": true, - "running": true + "running": false }, { "name": "react-on-rails-pro/client bundled (gzip)", "path": "packages/react-on-rails-pro/lib/ReactOnRails.client.js", "import": "ReactOnRails", "gzip": true, - "running": true + "running": false }, { "name": "react-on-rails-pro/client bundled (brotli)", "path": "packages/react-on-rails-pro/lib/ReactOnRails.client.js", "import": "ReactOnRails", "brotli": true, - "running": true + "running": false }, { "name": "registerServerComponent/client bundled (gzip)", "path": "packages/react-on-rails-pro/lib/registerServerComponent/client.js", "import": "registerServerComponent", "gzip": true, - "running": true + "running": false }, { "name": "registerServerComponent/client bundled (brotli)", "path": "packages/react-on-rails-pro/lib/registerServerComponent/client.js", "import": "registerServerComponent", "brotli": true, - "running": true + "running": false }, { "name": "wrapServerComponentRenderer/client bundled (gzip)", "path": "packages/react-on-rails-pro/lib/wrapServerComponentRenderer/client.js", "import": "wrapServerComponentRenderer", "gzip": true, - "running": true + "running": false }, { "name": "wrapServerComponentRenderer/client bundled (brotli)", "path": "packages/react-on-rails-pro/lib/wrapServerComponentRenderer/client.js", "import": "wrapServerComponentRenderer", "brotli": true, - "running": true + "running": false } ] diff --git a/scripts/bundle-size.mjs b/scripts/bundle-size.mjs index 16d707bd11..b0350713ed 100644 --- a/scripts/bundle-size.mjs +++ b/scripts/bundle-size.mjs @@ -102,10 +102,7 @@ function createLimitEntry(entry, baseEntry, threshold, timePercentageThreshold) console.log(` base size: ${formatSize(baseEntry.size)}`); console.log(` limit: ${formatSize(limit)}\n`); const sizeLimitEntry = { ...entry, limit: `${limit} B` }; - // Skip time limit on CI because this script runs on a different environment than the `andresz1/size-limit-action` - // So, this script calculate different timing values than that got by the `andresz1/size-limit-action` action - // TODO: fork `andresz1/size-limit-action` and make it time limits on the same environment used to run the check - if (!baseEntry.running || process.env.CI) { + if (!baseEntry.running) { return sizeLimitEntry; } From ae696400e9d343c6fa8ab705d37fa8857f52766d Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Wed, 3 Dec 2025 13:59:31 +0200 Subject: [PATCH 12/15] Empty commit From fc4bdc9194bffce56e459c643399c14df71d6369 Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Wed, 3 Dec 2025 14:11:26 +0200 Subject: [PATCH 13/15] make bundle-size.mjs script puts time limits for loading time --- scripts/bundle-size.mjs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/bundle-size.mjs b/scripts/bundle-size.mjs index b0350713ed..da29d7850d 100644 --- a/scripts/bundle-size.mjs +++ b/scripts/bundle-size.mjs @@ -102,11 +102,11 @@ function createLimitEntry(entry, baseEntry, threshold, timePercentageThreshold) console.log(` base size: ${formatSize(baseEntry.size)}`); console.log(` limit: ${formatSize(limit)}\n`); const sizeLimitEntry = { ...entry, limit: `${limit} B` }; - if (!baseEntry.running) { + if (!baseEntry.running && !baseEntry.loading) { return sizeLimitEntry; } - const { loading, running } = baseEntry; + const { loading = 0, running = 0 } = baseEntry; const loadingMs = loading * 1000; const runningMs = running * 1000; console.log(` base loading time: ${formatTime(loadingMs)}`); From 232b872a1a3680509b5516418304b3e65c322c82 Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Wed, 3 Dec 2025 14:23:36 +0200 Subject: [PATCH 14/15] update docs --- .github/workflows/bundle-size.yml | 2 +- CHANGELOG.md | 2 +- scripts/bundle-size.mjs | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/workflows/bundle-size.yml b/.github/workflows/bundle-size.yml index c11caf2a9b..abe23c0a7f 100644 --- a/.github/workflows/bundle-size.yml +++ b/.github/workflows/bundle-size.yml @@ -104,7 +104,7 @@ jobs: - name: Set dynamic limits (base + 0.5KB) run: node scripts/bundle-size.mjs set-limits --base /tmp/base-sizes.json - + - name: Copy .size-limit.json file with limits to tmp directory run: cp .size-limit.json /tmp/.size-limit-with-limits.json diff --git a/CHANGELOG.md b/CHANGELOG.md index a4199cafae..a59ebacd2c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,7 +25,7 @@ Changes since the last non-beta release. #### Added -- **Total Execution Time CI Monitoring**: Added automated execution time tracking to CI using size-limit. Compares PR client import execution times against the base branch and fails if any import increases by more than 20%. [PR 2160](https://github.com/shakacode/react_on_rails/pull/2160) by [AbanoubGhadban](https://github.com/AbanoubGhadban). +- **Download Time CI Monitoring**: Added automated download time tracking to CI using size-limit. Compares PR client import download times against the base branch and fails if any import increases by more than 10%. And added ability to compare the total execution time (download + running time) to the `bin/compare-bundle-sizes` script. [PR 2160](https://github.com/shakacode/react_on_rails/pull/2160) by [AbanoubGhadban](https://github.com/AbanoubGhadban). - **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). diff --git a/scripts/bundle-size.mjs b/scripts/bundle-size.mjs index da29d7850d..04c04414df 100644 --- a/scripts/bundle-size.mjs +++ b/scripts/bundle-size.mjs @@ -18,9 +18,9 @@ import fs from 'fs'; // Intentionally strict to catch any bundle size changes early. // For intentional size increases, use bin/skip-bundle-size-check to bypass the CI check. const DEFAULT_THRESHOLD = 512; -// 20% is a big ration, but the current approach is not accurate enough to detect rations less than that +// 10% is a big ration, but the current approach is not accurate enough to detect rations less than that // Later, we will implement performance tests that will use more accurate mechanisms and can detect smaller performance regressions -const DEFAULT_TIME_PERCENTAGE_THRESHOLD = 0.2; +const DEFAULT_TIME_PERCENTAGE_THRESHOLD = 0.1; const DEFAULT_CONFIG = '.size-limit.json'; // ANSI color codes From a64bfebe0989edf826a8753f5943534f138acde2 Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Wed, 3 Dec 2025 14:30:36 +0200 Subject: [PATCH 15/15] fix typo --- .github/workflows/bundle-size.yml | 2 +- scripts/bundle-size.mjs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/bundle-size.yml b/.github/workflows/bundle-size.yml index abe23c0a7f..46b93f713f 100644 --- a/.github/workflows/bundle-size.yml +++ b/.github/workflows/bundle-size.yml @@ -33,7 +33,7 @@ jobs: echo "skip=false" >> $GITHUB_OUTPUT fi - size: + check-bundle-size: needs: check-skip if: needs.check-skip.outputs.skip != 'true' runs-on: ubuntu-22.04 diff --git a/scripts/bundle-size.mjs b/scripts/bundle-size.mjs index 04c04414df..5edab8252c 100644 --- a/scripts/bundle-size.mjs +++ b/scripts/bundle-size.mjs @@ -18,7 +18,7 @@ import fs from 'fs'; // Intentionally strict to catch any bundle size changes early. // For intentional size increases, use bin/skip-bundle-size-check to bypass the CI check. const DEFAULT_THRESHOLD = 512; -// 10% is a big ration, but the current approach is not accurate enough to detect rations less than that +// 10% is a big ratio, but the current approach is not accurate enough to detect rations less than that // Later, we will implement performance tests that will use more accurate mechanisms and can detect smaller performance regressions const DEFAULT_TIME_PERCENTAGE_THRESHOLD = 0.1; const DEFAULT_CONFIG = '.size-limit.json';