ci: add bundle size report

.github/actions/install-dependencies/action.yml

@@ -25,6 +25,6 @@ runs:
       if: steps.cache.outputs.cache-hit != 'true'
 
     - name: Run postinstall script
-      run: yarn postinstall && yarn workspace @razorpay/blade postinstall
+      run: yarn postinstall
       shell: bash
       if: steps.cache.outputs.cache-hit == 'true'

.github/workflows/blade-bundle-size.yml

@@ -0,0 +1,70 @@
+name: Blade Bundle Size
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+  push:
+    branches:
+      - master
+
+env:
+  GITHUB_ACCESS_TOKEN: ${{ secrets.CI_BOT_TOKEN }}
+
+jobs:
+  pr-bundle-size:
+    name: Generate PR Report
+    runs-on: ubuntu-latest # nosemgrep: non-self-hosted-runner
+    if: ${{ github.event_name == 'pull_request' }}
+    steps:
+      - name: Checkout Codebase
+        uses: actions/checkout@v4
+      - name: Use Node v18
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.12.1
+      - name: Setup Cache & Install Dependencies
+        uses: ./.github/actions/install-dependencies
+      - name: Update Bundle Size Data
+        run: yarn generate-bundle-size-info
+        working-directory: packages/blade
+      - name: Danger
+        run: yarn danger ci
+        working-directory: packages/blade
+        env:
+          DANGER_GITHUB_API_TOKEN: ${{ env.GITHUB_ACCESS_TOKEN }}
+          DANGER_DISABLE_TRANSPILATION: 'true'
+
+  master-bundle-size:
+    name: Update Base Stats
+    runs-on: ubuntu-latest # nosemgrep: non-self-hosted-runner
+    if: ${{ github.event_name == 'push' }}
+    steps:
+      - name: Checkout Codebase
+        uses: actions/checkout@v4
+      - name: Use Node v18
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.12.1
+      - name: Setup Cache & Install Dependencies
+        uses: ./.github/actions/install-dependencies
+      - name: Build Blade React Production
+        run: yarn run-s build:clean build:generate-types build:react-prod
+        working-directory: packages/blade
+      - name: Update Bundle Size Data
+        run: yarn generate-bundle-size-info
+        working-directory: packages/blade
+        env:
+          BUNDLE_SIZE_STATS_FILENAME: 'baseBundleSizeStats.json'
+      - name: Check if file is modified
+        id: file-check
+        run: if [ -n "$(git status baseBundleSizeStats.json --porcelain)" ]; then echo "result=true" >> $GITHUB_OUTPUT; else echo "result=false" >> $GITHUB_OUTPUT; fi
+        working-directory: packages/blade
+      - name: Commit Updated Bundle Size Data
+        if: ${{ steps.file-check.outputs.result == 'true' }}
+        run: |
+          git config user.email "tools+cibot@razorpay.com"
+          git config user.name "rzpcibot"
+          git add baseBundleSizeStats.json
+          git commit -m "chore: update bundle size data [skip ci]"
+          git push
+        working-directory: packages/blade

.github/workflows/blade-validate.yml

@@ -26,9 +26,6 @@ jobs:
       - name: Run TypeScript Checks
         run: yarn typecheck
         working-directory: packages/blade
-      - name: Check Tree Shaking
-        run: yarn size-limit
-        working-directory: packages/blade
 
   test:
     name: Run Tests (${{ matrix.shard }})

.github/workflows/release.yml

@@ -42,8 +42,3 @@ jobs:
         if: steps.changesets.outputs.published == 'false'
         working-directory: packages/blade
         run: yarn build
-      # - name: Run & store bundle metadata
-      #   run: yarn bundlemon
-      #   working-directory: packages/blade
-
-

package.json

@@ -34,8 +34,8 @@
     "@types/styled-components": "5.1.25",
     "@types/styled-components-react-native": "5.1.3",
     "@typescript-eslint/eslint-plugin": "5.59.6",
-    "@typescript-eslint/utils": "5.59.6",
     "@typescript-eslint/parser": "5.59.6",
+    "@typescript-eslint/utils": "5.59.6",
     "chalk": "4.1.1",
     "eslint": "8.40.0",
     "eslint-config-kentcdodds": "18.0.0",
@@ -45,11 +45,11 @@
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-mdx": "2.1.0",
+    "eslint-plugin-no-only-tests": "3.1.0",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-react-native-a11y": "3.3.0",
-    "eslint-plugin-no-only-tests": "3.1.0",
     "figures": "3.2.0",
     "husky": "4.2.3",
     "lerna": "4.0.0",

packages/blade/.gitignore

@@ -54,6 +54,8 @@ yarn-error.log
 
 # Bundle artifact
 *.jsbundle
+.size-limit.json
+prBundleSizeStats.json
 
 # Ruby / CocoaPods
 /ios/Pods/

packages/blade/dangerfile.js

@@ -0,0 +1,28 @@
+const { danger, markdown } = require('danger');
+const generateBundleDiff = require('./scripts/generateBundleDiff');
+
+const showBundleSizeDiff = async () => {
+  const { diffTable } = await generateBundleDiff(danger);
+
+  if (diffTable) {
+    markdown(`
+  ## Bundle Size Report
+
+  <details>
+  <summary> Updated Components </summary>
+
+  ${diffTable}
+
+  </details>
+
+  `);
+  } else {
+    markdown(`
+  ## Bundle Size Report
+
+  No bundle size changes detected.
+  `);
+  }
+};
+
+showBundleSizeDiff();

packages/blade/package.json

@@ -127,11 +127,11 @@
     "watch:test:react-native": "yarn test:react-native --watch --onlyChanged",
     "chromatic": "npx chromatic",
     "publish-npm": "node ./scripts/publishToNpm.js",
-    "generate-github-npmrc": "node ./scripts/generateGitHubRegistryNpmrc.js",
-    "postinstall": "patch-package"
+    "pregenerate-bundle-size-info": "yarn run-s build:clean build:generate-types build:react-prod",
+    "generate-bundle-size-info": "node ./scripts/generateBundleSizeInfo.js",
+    "generate-github-npmrc": "node ./scripts/generateGitHubRegistryNpmrc.js"
   },
   "dependencies": {
-    "patch-package": "7.0.0",
     "@babel/runtime": "7.20.0",
     "body-scroll-lock-upgrade": "1.1.0",
     "ts-deepmerge": "6.2.0",
@@ -154,6 +154,8 @@
     "chromatic": "6.22.0",
     "@babel/cli": "7.23.0",
     "@babel/core": "7.20.2",
+    "@babel/parser": "7.23.6",
+    "@babel/traverse": "7.23.7",
     "@babel/plugin-transform-react-jsx": "7.16.5",
     "@babel/plugin-transform-runtime": "7.16.5",
     "@babel/preset-env": "7.20.2",
@@ -220,15 +222,16 @@
     "babel-loader": "8.2.3",
     "babel-plugin-module-resolver": "4.1.0",
     "babel-plugin-styled-components": "1.12.0",
-    "bundlemon": "2.0.1",
     "chalk": "4.1.1",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
+    "danger": "11.3.1",
     "dedent": "0.7.0",
     "eslint-plugin-mdx": "1.16.0",
     "execa": "5.0.0",
     "figures": "3.2.0",
     "flat": "5.0.2",
+    "globby": "14.0.1",
     "ismobilejs": "1.1.1",
     "jest": "29.6.1",
     "jest-axe": "8.0.0",
@@ -304,56 +307,5 @@
     "react-dom": "18.2.0",
     "react": "18.2.0",
     "styled-components": "^5"
-  },
-  "bundlemon": {
-    "files": [
-      {
-        "friendlyName": "Web Components",
-        "path": "./build/components/index.production.web.js"
-      },
-      {
-        "friendlyName": "React Native Components",
-        "path": "./build/components/index.native.js"
-      },
-      {
-        "friendlyName": "Web Tokens",
-        "path": "./build/tokens/index.production.web.js"
-      },
-      {
-        "friendlyName": "React Native Tokens",
-        "path": "./build/tokens/index.native.js"
-      },
-      {
-        "friendlyName": "CSS Theme Tokens",
-        "path": "./build/css/*.css"
-      },
-      {
-        "friendlyName": "Web Utils",
-        "path": "./build/utils/index.production.web.js"
-      },
-      {
-        "friendlyName": "React Native Utils",
-        "path": "./build/utils/index.native.js"
-      }
-    ],
-    "reportOutput": [
-      "github"
-    ]
-  },
-  "size-limit": [
-    {
-      "name": "Import Button only",
-      "path": "./build/lib/web/production/components/index.js",
-      "import": "{ Button }",
-      "limit": "31 kb",
-      "running": false
-    },
-    {
-      "name": "Import Text only",
-      "path": "./build/lib/web/production/components/index.js",
-      "import": "{ Text }",
-      "limit": "25 kb",
-      "running": false
-    }
-  ]
+  }
 }

packages/blade/scripts/generateBundleDiff.js

@@ -0,0 +1,94 @@
+// Asynchronous function to generate the bundle size difference report
+const generateBundleDiff = async () => {
+  // Array to store the base bundle size statistics
+  let baseBundleSizeStats = [];
+  // Get the base bundle size report from the master branch
+  const baseBundleStatsURL =
+    process.env.BASE_BUNDLE_SIZE_STATS_URL ||
+    'https://raw.githubusercontent.com/razorpay/blade/master/packages/blade/baseBundleSizeStats.json';
+  const response = await fetch(baseBundleStatsURL);
+
+  // Parse the JSON response if the request is successful
+  if (response.status === 200) {
+    baseBundleSizeStats = await response.json();
+  }
+
+  // Import the current bundle size statistics from the PR
+  // eslint-disable-next-line import/extensions
+  const currentBundleSizeStats = require('../prBundleSizeStats.json');
+  // Initialize the bundle difference array with current bundle stats
+  let bundleDiff = currentBundleSizeStats;
+
+  // Filter the components that don't have the same size in the base and current bundle
+  if (baseBundleSizeStats.length > 0) {
+    bundleDiff = baseBundleSizeStats.filter(
+      ({ size: baseSize, name: baseName }) =>
+        !currentBundleSizeStats.some(
+          ({ size: currentSize, name: currentName }) =>
+            currentSize === baseSize && currentName === baseName,
+        ),
+    );
+  }
+
+  // If there is no difference, return null
+  if (bundleDiff.length === 0) {
+    return { diffTable: null };
+  }
+
+  // Calculate the size differences and create a formatted diff table
+  bundleDiff.forEach((component) => {
+    if (component.name === 'Base') {
+      return;
+    }
+
+    const currentComponent = currentBundleSizeStats.find((stat) => stat.name === component.name);
+    const baseComponent = baseBundleSizeStats.find((stat) => stat.name === component.name);
+    // Calculate the empty project size, including all dependencies, and subtract it from the component bundle size
+    // This adjustment is crucial to obtain more accurate results, mitigating size differences due to additional dependencies in the project
+    const emptyProjectSize =
+      currentBundleSizeStats.find((stat) => stat.name === 'Base').size / 1000;
+    const currentComponentSize = currentComponent
+      ? currentComponent.size / 1000 - emptyProjectSize
+      : 0;
+    const baseComponentSize = baseComponent ? baseComponent.size / 1000 - emptyProjectSize : 0;
+
+    if (baseComponent && !currentComponent) {
+      // Component removed in the PR
+      component.diffSize = -baseComponentSize;
+      component.baseSize = baseComponentSize;
+      component.prSize = 0;
+      component.isSizeIncreased = false;
+    } else if (!baseComponent && currentComponent) {
+      // Component added in the PR
+      component.diffSize = currentComponentSize;
+      component.baseSize = 0;
+      component.prSize = currentComponentSize;
+      component.isSizeIncreased = true;
+    } else {
+      // Component size changed in the PR
+      component.diffSize = currentComponentSize - baseComponentSize;
+      component.baseSize = baseComponentSize;
+      component.prSize = currentComponentSize;
+      component.isSizeIncreased = component.diffSize > 0;
+    }
+  });
+
+  // Generate a Markdown table for the bundle size differences
+  const diffTable = `
+  | Status | Component | Base Size (kb) | Current Size (kb) | Diff |
+  | --- | --- | --- | --- | --- |
+  ${bundleDiff
+    .filter(({ name }) => name !== 'Base')
+    .map(
+      ({ name, baseSize, prSize, diffSize, isSizeIncreased }) =>
+        `| ${isSizeIncreased ? '⬆' : '⬇'} | ${name} | ${baseSize.toFixed(3)} | ${prSize.toFixed(
+          3,
+        )} | ${isSizeIncreased ? `+${diffSize.toFixed(3)}` : diffSize.toFixed(3)} KB |`,
+    )
+    .join('\n')}
+  `;
+
+  return { diffTable };
+};
+
+module.exports = generateBundleDiff;