[code-infra] Add bundle size monitor

.circleci/config.yml

@@ -27,7 +27,7 @@ default-job: &default-job
     COREPACK_ENABLE_DOWNLOAD_PROMPT: '0'
   working_directory: /tmp/base-ui
   docker:
-    - image: cimg/node:18.20
+    - image: cimg/node:20.17
 
 default-context: &default-context
   context:
@@ -183,7 +183,7 @@ jobs:
             pnpm docs:link-check
             git add -A && git diff --exit-code --staged
       - run:
-          name: '`pnpm inline-scripts changes committed?'
+          name: '`pnpm inline-scripts` changes committed?'
           command: |
             pnpm inline-scripts
             git add -A && git diff --exit-code --staged
@@ -297,18 +297,20 @@ jobs:
       - run:
           name: pnpm test:e2e
           command: pnpm test:e2e
-  test_bundle_size_monitor:
-    <<: *default-job
-    steps:
-      - checkout
-      - install_js
-      # TODO test bundle size https://github.com/mui/base-ui/issues/201
+
   test_package:
     <<: *default-job
     steps:
       - checkout
       - install_js:
           react-version: << parameters.react-version >>
+
+      - run:
+          name: prepare danger on PRs
+          command: pnpm danger ci
+          environment:
+            DANGER_COMMAND: prepareBundleSizeReport
+
       - run:
           name: Build packages
           command: pnpm release:build
@@ -319,6 +321,19 @@ jobs:
           name: Verify built packages
           command: pnpm -r test:package
 
+      - run:
+          name: create and upload a size snapshot
+          command: |
+            export AWS_ACCESS_KEY_ID=$AWS_ACCESS_KEY_ID_ARTIFACTS
+            export AWS_SECRET_ACCESS_KEY=$AWS_SECRET_ACCESS_KEY_ARTIFACTS
+            export AWS_REGION=$AWS_REGION_ARTIFACTS
+            pnpm size:snapshot
+
+      - run:
+          name: Run danger on PRs
+          command: pnpm danger ci --fail-on-errors
+          environment:
+            DANGER_COMMAND: reportBundleSize
 workflows:
   pipeline:
     when:

dangerfile.js

@@ -0,0 +1,6 @@
+const tsx = require('tsx/cjs/api');
+
+// danger uses babelify under the hood. The implementation is buggy and fails on our
+// custom plugins in our codebase. We'll just disable it and do our own compilation.
+// Danger must always be run with envirnonent variable `DANGER_DISABLE_TRANSPILATION="true"`.
+tsx.require('./scripts/dangerFileContent', __filename);

package.json

@@ -30,8 +30,8 @@
     "valelint": "pnpm vale sync && git ls-files | grep -h \".md$\" | xargs pnpm vale --filter='.Level==\"error\"'",
     "prettier": "pretty-quick --ignore-path .eslintignore",
     "prettier:all": "prettier --write . --ignore-path .eslintignore",
-    "size:snapshot": "node --max-old-space-size=4096 ./scripts/sizeSnapshot/create",
-    "size:why": "pnpm size:snapshot --analyze",
+    "size:snapshot": "pnpm -F ./test/bundle-size check",
+    "size:why": "pnpm size:snapshot --analyze --accurateBundles",
     "start": "pnpm install && pnpm docs:dev",
     "test": "pnpm test:chromium",
     "test:e2e": "cross-env NODE_ENV=production pnpm test:e2e:build && concurrently --success first --kill-others \"pnpm test:e2e:run\" \"pnpm test:e2e:server\"",
@@ -73,6 +73,7 @@
     "@babel/register": "^7.27.1",
     "@mui/internal-babel-plugin-display-name": "^1.0.0",
     "@mui/internal-babel-plugin-resolve-imports": "^2.0.1",
+    "@mui/internal-bundle-size-checker": "^1.0.3",
     "@mui/internal-docs-utils": "^2.0.1",
     "@mui/internal-markdown": "^2.0.4",
     "@mui/internal-scripts": "^2.0.7",
@@ -105,6 +106,7 @@
     "concurrently": "^9.1.2",
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
+    "danger": "^13.0.4",
     "docs": "workspace:^",
     "eslint": "^8.57.1",
     "eslint-config-airbnb": "^19.0.4",

packages/react/package.json

@@ -79,7 +79,7 @@
     "build:types": "tsx ../../scripts/buildTypes.mts --copy build/cjs",
     "build:copy-files": "node ../../scripts/copyFiles.mjs ./.npmignore:./.npmignore",
     "build:manifest": "tsx ./scripts/createPackageManifest.mts",
-    "test:package": "publint ./build && attw --pack ./build",
+    "test:package": "publint ./build && attw --pack ./build --exclude-entrypoints package.json",
     "release": "pnpm build && pnpm publish",
     "test": "cross-env NODE_ENV=test VITEST_ENV=jsdom vitest",
     "typescript": "tsc -b tsconfig.json"

packages/react/scripts/createPackageManifest.mts

@@ -40,7 +40,10 @@ export async function createPackageManifest() {
         '*': ['./cjs/*/index.d.ts'],
       },
     },
-    exports: retargetExports(exports),
+    exports: {
+      './package.json': './package.json',
+      ...retargetExports(exports),
+    },
     publishConfig,
   };