Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[core] Replace bundle size reporter filter #38979

Merged
merged 6 commits into from
Apr 12, 2024
Merged
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 10 additions & 11 deletions dangerfile.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// inspire by reacts dangerfile
// Inspire by React dangerfile
// danger has to be the first thing required!
import { danger, markdown } from 'danger';
import { exec } from 'child_process';
Expand All @@ -13,7 +13,7 @@ const parsedSizeChangeThreshold = 300;
const gzipSizeChangeThreshold = 100;

/**
* executes a git subcommand
* Executes a git subcommand.
* @param {any} args
*/
function git(args: any) {
Expand All @@ -40,8 +40,8 @@ async function reportBundleSizeCleanup() {
}

/**
* creates a callback for Object.entries(comparison).filter that excludes every
* entry that does not exceed the given threshold values for parsed and gzip size
* Creates a callback for Object.entries(comparison).filter that excludes every
* entry that does not exceed the given threshold values for parsed and gzip size.
* @param {number} parsedThreshold
* @param {number} gzipThreshold
*/
Expand All @@ -56,17 +56,17 @@ function createComparisonFilter(parsedThreshold: number, gzipThreshold: number)
}

/**
* checks if the bundle is of a package e.b. `@mui/material` but not
* `@mui/material/Paper`
* Checks if the bundle is of a package e.b. `@mui/material` but not
* `@mui/material/Paper`.
* @param {[string, any]} comparisonEntry
*/
function isPackageComparison(comparisonEntry: [string, any]) {
Copy link
Member

@oliviertassinari oliviertassinari Sep 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this filter in the first place? It feels like

Suggested change
function isPackageComparison(comparisonEntry: [string, any]) {

could do the job.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this filter in the first place?

As far as I'm concerned, that's up to the core team to decide 🙂. I'm fine with either way.

Copy link
Member

@oliviertassinari oliviertassinari Sep 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I imagine the main downside is about the number of diffs it could create. We could workaround it, say:

diff --git a/dangerfile.ts b/dangerfile.ts
index bd769f141a..aedc4d72d7 100644
--- a/dangerfile.ts
+++ b/dangerfile.ts
@@ -55,16 +55,6 @@ function createComparisonFilter(parsedThreshold: number, gzipThreshold: number)
   };
 }

-/**
- * Checks if the bundle is of a package e.b. `@mui/material` but not
- * `@mui/material/Paper`.
- * @param {[string, any]} comparisonEntry
- */
-function isPackageComparison(comparisonEntry: [string, any]) {
-  const [bundleKey] = comparisonEntry;
-  return !/^@[\w-]+\/[\w-]+\/.+$/.test(bundleKey);
-}
-
 /**
  * Generates a user-readable string from a percentage change.
  * @param {number} change
@@ -160,12 +150,23 @@ async function reportBundleSize() {
   if (anyResultsChanges.length > 0) {
     const importantChanges = mainResults
       .filter(createComparisonFilter(parsedSizeChangeThreshold, gzipSizeChangeThreshold))
-      .filter(isPackageComparison)
+      .sort(([, a], [, b]) => {
+        const aDiff = Math.abs(a.parsed.absoluteDiff) + Math.abs(a.gzip.absoluteDiff);
+        const bDiff = Math.abs(b.parsed.absoluteDiff) + Math.abs(b.gzip.absoluteDiff);
+        return bDiff - aDiff;
+      })
       .map(generateEmphasizedChange);

     // have to guard against empty strings
     if (importantChanges.length > 0) {
-      markdown(importantChanges.join('\n'));
+      let text = importantChanges.slice(0, 9).join('\n');
+
+      if (importantChanges.length > 10) {
+        text += '\n';
+        text += `and ${importantChanges.length - 10} more changes`;
+      }
+
+      markdown(text);
     }

     const details = `## Bundle size report

Copy link
Member Author

@Janpot Janpot Sep 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tweaked the implementation a bit (the slice is off by one 🙂) and added to this PR. Also defaulted to 20 items, because why not?

const [bundleKey] = comparisonEntry;
return /^@[\w-]+\/[\w-]+$/.test(bundleKey);
return !/^@[\w-]+\/[\w-]+\/.+$/.test(bundleKey);
}

/**
* Generates a user-readable string from a percentage change
* Generates a user-readable string from a percentage change.
* @param {number} change
* @param {string} goodEmoji emoji on reduction
* @param {string} badEmoji emoji on increase
Expand All @@ -91,7 +91,7 @@ function generateEmphasizedChange([bundle, { parsed, gzip }]: [
}

/**
* Puts results in different buckets wh
* Puts results in different buckets.
* @param {*} results
*/
function sieveResults<T>(results: Array<[string, T]>) {
Expand Down Expand Up @@ -137,8 +137,7 @@ async function loadLastComparison(
}

async function reportBundleSize() {
// Use git locally to grab the commit which represents the place
// where the branches differ
// Use git locally to grab the commit which represents the place where the branches differ
const upstreamRepo = danger.github.pr.base.repo.full_name;
const upstreamRef = danger.github.pr.base.ref;
try {
Expand Down