[code-infra] Add bundle size monitor (#17754)

Author: Janpot

.circleci/config.yml

@@ -307,6 +307,38 @@ jobs:
           command: pnpm test:e2e-website
           environment:
             PLAYWRIGHT_TEST_BASE_URL: << parameters.e2e-base-url >>
+
+  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
+
+      - 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
+
   test_regressions:
     <<: *default-job
     steps:
@@ -320,14 +352,7 @@ jobs:
       - run:
           name: Upload screenshots to Argos CI
           command: pnpm test:argos
-  run_danger:
-    <<: *default-job
-    steps:
-      - checkout
-      - install_js
-      - run:
-          name: Run danger on PRs
-          command: pnpm danger ci --fail-on-errors
+
 workflows:
   pipeline:
     when:
@@ -349,7 +374,7 @@ workflows:
           <<: *default-context
       - test_regressions:
           <<: *default-context
-      - run_danger:
+      - test_package:
           <<: *default-context
   e2e-website:
     when:

.eslintrc.js

@@ -223,11 +223,6 @@ module.exports = {
         'packages/x-data-grid-premium/**/*{.tsx,.ts,.js}',
         'docs/src/pages/**/*.tsx',
       ],
-      excludedFiles: [
-        'packages/x-data-grid/src/themeAugmentation/index.js', // TypeScript ignores JS files with the same name as the TS file
-        'packages/x-data-grid-pro/src/themeAugmentation/index.js',
-        'packages/x-data-grid-premium/src/themeAugmentation/index.js',
-      ],
       rules: {
         'material-ui/no-direct-state-access': 'error',
       },

dangerfile.js

@@ -1,84 +1,7 @@
-const { danger, markdown } = require('danger');
+// eslint-disable-next-line import/no-unresolved
+const tsx = require('tsx/cjs/api');
 
-function addDeployPreviewUrls() {
-  /**
-   * The incoming docsPath from danger does not start with `/`
-   * e.g. ['docs/data/data-grid/editing/editing.md']
-   */
-  function formatFileToLink(docsPath) {
-    const url = docsPath.replace('docs/data', 'x').replace(/\/[^/]+\.md$/, '/');
-
-    return url
-      .replace('data-grid/', 'react-data-grid/')
-      .replace('date-pickers/', 'react-date-pickers/')
-      .replace('charts/', 'react-charts/')
-      .replace('scheduler/', 'react-scheduler/')
-      .replace('tree-view/', 'react-tree-view/')
-      .replace(/\/[^/]+\.md$/, '/');
-  }
-
-  const netlifyPreview = `https://deploy-preview-${danger.github.pr.number}--material-ui-x.netlify.app/`;
-
-  const files = [...danger.git.created_files, ...danger.git.modified_files];
-
-  // limit to the first 5 docs
-  const docs = files
-    .filter((file) => file.startsWith('docs/data') && file.endsWith('.md'))
-    .slice(0, 5);
-
-  markdown(`**Deploy preview:** <a href="${netlifyPreview}">${netlifyPreview}</a>`);
-
-  if (docs.length) {
-    markdown(`
-
-**Updated pages:**
-
-${docs
-  .map((docsPath) => {
-    const formattedUrl = formatFileToLink(docsPath);
-    return `- [${docsPath}](${netlifyPreview}${formattedUrl})`;
-  })
-  .join('\n')}
-`);
-  }
-}
-
-function addL10nHelpMessage() {
-  const isAddingLocale = danger.git.created_files.some((file) => file.includes('/src/locales/'));
-  const isUpdatingLocale = danger.git.modified_files.some((file) => file.includes('/src/locales/'));
-
-  if (!isAddingLocale && !isUpdatingLocale) {
-    return;
-  }
-  markdown(
-    [
-      '## Localization writing tips :writing_hand:',
-      '',
-      'Seems you are updating localization :earth_africa: files.',
-      '',
-      'Thank you for contributing to the localization! :tada: To make your PR perfect, here is a list of elements to check: :heavy_check_mark:',
-      '- [ ] Verify if the PR title respects the release format. Here are two examples (depending if you update or add a locale file)',
-      '  > [l10n] Improve Swedish (sv-SE) locale',
-      '  > [l10n] Add Danish (da-DK) locale',
-      '- [ ] Update the documentation of supported locales by running `pnpm l10n`',
-      ...(isAddingLocale
-        ? [
-            '- [ ] Verify that you have added an export line in `src/locales/index.ts` for the new locale.',
-            '- [ ] Run `pnpm docs:api` which should add your new translation to the list of exported interfaces.',
-          ]
-        : []),
-      '- [ ] Clean files with `pnpm prettier`.',
-      '',
-    ].join('\n'),
-  );
-}
-
-async function run() {
-  addL10nHelpMessage();
-  addDeployPreviewUrls();
-}
-
-run().catch((error) => {
-  console.error(error);
-  process.exit(1);
-});
+// 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,7 +30,7 @@
     "prettier:all": "prettier --write . --ignore-path .eslintignore",
     "prettier:check": "prettier --check . --ignore-path .eslintignore",
     "proptypes": "tsx ./docs/scripts/generateProptypes.ts",
-    "size:snapshot": "node --max-old-space-size=2048 ./scripts/sizeSnapshot/create",
+    "size:snapshot": "pnpm -F ./test/bundle-size check",
     "size:why": "pnpm size:snapshot --analyze --accurateBundles",
     "test": "pnpm test:unit:jsdom",
     "test:jsdom": "pnpm test:unit:jsdom",
@@ -87,6 +87,7 @@
     "@mui/icons-material": "^7.0.2",
     "@mui/internal-babel-plugin-display-name": "github:mui/mui-public#master&path:./packages/babel-plugin-display-name",
     "@mui/internal-babel-plugin-resolve-imports": "^2.0.2",
+    "@mui/internal-bundle-size-checker": "^1.0.3",
     "@mui/internal-markdown": "^2.0.5",
     "@mui/internal-test-utils": "^2.0.8",
     "@mui/material": "^7.0.2",