[bundlephobia] Added a shield for calculating npm bundle sizes #1391

pastelsky · 2017-12-24T10:37:35Z

A shield for bundle sizes of front end npm packages, as discussed over here - #941

shields-ci · 2017-12-24T10:38:22Z

	Messages
📖	✨ Thanks for your contribution to Shields, @pastelsky!
📖	Thanks for contributing to our documentation. We ❤️ our documentarians!

Generated by 🚫 dangerJS

pastelsky · 2017-12-24T10:51:02Z

I'm not exactly sure why the CI check failed. Looks like some sort of an error related to svg2img library, which isn't related to this PR.

paulmelnikow · 2017-12-26T03:28:11Z

Yea, you're right, it's unrelated. I opened #1392 to increase the timeout on that test. It times out fairly often.

e.g. #1391

pastelsky · 2018-01-04T02:08:14Z

Hey, are there any blockers for this to get merged?

paulmelnikow

Thanks for this! Here are a few comments for you.

paulmelnikow · 2018-01-04T02:37:48Z

lib/all-badge-examples.js

+          'node',
+          'npm',
+          'bundle',
+          'size'


You can just include 'node' here and remove the others. Substrings of the title will be matched automatically.

paulmelnikow · 2018-01-04T02:40:22Z

server.js

+  // C: /bundlephobia/(min|gzip)/@:scope/:package.:format
+  // D: /bundlephobia/(min|gzip)/@:scope/:package/:version.:format
+  const capturedResultType = match[1];
+  const capturedScopeWithoutAtSign = match[2];


Much as I love verbose names, I think you could drop captured from these, and shorten this one to scope.

paulmelnikow · 2018-01-04T02:41:08Z

server.js

@@ -7715,6 +7715,53 @@ camp.route(/^\/nsp\/npm\/(?:@([^/]+)?\/)?([^/]+)?(?:\/([^/]+)?)?\.(svg|png|gif|j
  }
 }));

+// bundle size for npm packages
+camp.route(/^\/bundlephobia\/(min|gzip)\/(?:@([^/]+)?\/)?([^/]+)?(?:\/([^/]+)?)?\.(svg|png|gif|jpg|json)?$/,


Minified and gzipped aren't exclusive. Does gzip mean minified and gzipped?

Yes, it does.

Then how about we make it min and min-gzip?

Another commonly used term for this is "minzip"

Sure, that works and seems clear.

paulmelnikow · 2018-01-04T02:43:21Z

server.js

+    });
+  }
+
+  getBundlephobiaResults(capturedScopeWithoutAtSign, capturedPackageName, capturedVersion);


What advantage does making this basically an IIFE provide?

Inlined the function

paulmelnikow · 2018-01-04T02:43:49Z

server.js

+        badgeData.colorscheme = 'red';
+      } else {
+        badgeData.text[1] = prettyBytes(showMin ? body.size : body.gzip);
+        badgeData.colorscheme = 'blue';


Could you put this in a try block to handle the case where the JSON is malformed?

Added a check for typeof body !== 'object' || body === null

paulmelnikow · 2018-01-04T02:46:00Z

service-tests/bundlephobia.js

+      .get(noExistPackage)
+      .expectJSON({
+        name: 'minified size',
+        value: 'PackageNotFoundError',


minified size | package not found or even bundlephobia | package not found would be more stylistically consistent with our error badges.

These error codes are returned by the bundlephobia service, and there are multiple such types - EntryPointError | PackageNotFoundError | VersionMismatchError etc. I'd prefer to keep them the same to enable easier debugging when issues are filed.

I think it's sufficient to re-run the failing request when an issue is filed. One of the goals of Shields is to provide consistent and concise badges, which applies to error messages too.

paulmelnikow · 2018-01-04T02:48:00Z

service-tests/bundlephobia.js

+const withoutErrorSizesGzip = {
+  A: Joi.string().regex(/^\d+[.]?\d+ kB$/),
+  B: '3.58 kB',
+  C: Joi.string().regex(/^\d+[.]?\d+ kB$/),


You could use isFileSize for this.

paulmelnikow · 2018-01-04T02:52:28Z

service-tests/bundlephobia.js

+  const withoutErrorSizeMin = withoutErrorSizesMin[format]
+
+  const withoutErrorGzip = withoutErrorsGzip[format]
+  const withoutErrorSizeGzip = withoutErrorSizesGzip[format]


This is nice and DRY, though it's a bit difficult to follow what you're doing. Also not sure it's necessary to be exhaustive in testing these combinations.

Could I suggest a couple ways of making it easier to understand? One would be to reduce this to 5 success cases (four min and one gzip) and 1–3 failure cases, and lay out each test explicitly. The other would be to basically invert your data objects, making an array of objects with format, withoutErrorMin, etc. as keys.

paulmelnikow · 2018-01-15T19:06:36Z

Are you willing to make the change to standardize the errors? If not I could pick this up from here.

pastelsky · 2018-01-16T18:10:02Z

Since I might have new error types in the future, I've added a regex based formatter that basically does this conversion => BuildError to build error. Unfortunately, I could not make time to refactor the tests. You can pick this up if you wish to, or I'll try to refactor them later when I find some time.

The CI seems to be tripping on something unrelated.

paulmelnikow · 2018-01-16T18:18:23Z

Okay, I'll pick that up.

I noticed the services-pr failure, which I think I fixed in #1454. If you merge master I think that should clear.

The failure in main should be fixable with npm run lint -- --fix.

pastelsky · 2018-01-16T18:33:13Z

Lint errors / tests are passing now.

tlaziuk · 2018-01-31T22:11:12Z

@pastelsky @paulmelnikow - I want to help you with this PR, can I do that somehow?

paulmelnikow · 2018-02-01T02:46:43Z

@tlaziuk That would be great! Would you like to take a shot at refactoring the tests? If so you could just grab these commits, merge in master, address the comments, and open a new PR.

paulmelnikow · 2018-02-02T22:45:15Z

Let's finish this up in #1481.

Added a shield for calculating npm bundle sizes

4b845c9

Fix linting errors

e25bcc4

Fixed badges for bundlephobia

20037a8

pastelsky mentioned this pull request Dec 25, 2017

Make Badges API pastelsky/bundlephobia#4

Closed

paulmelnikow mentioned this pull request Dec 26, 2017

Increase the timeout on a test that often runs out of time #1392

Merged

paulmelnikow added the service-badge Accepted and actionable changes, features, and bugs label Dec 26, 2017

paulmelnikow added a commit that referenced this pull request Dec 26, 2017

Increase the timeout on a test that often runs out of time (#1392)

0a2a804

e.g. #1391

paulmelnikow reviewed Jan 4, 2018

View reviewed changes

pastelsky added 3 commits January 4, 2018 13:29

Remove un-required keywords

f4a86d7

Simplified handler based on feedback

f14a6ed

Use isFileSize for validation

fa0b418

pastelsky added 3 commits January 16, 2018 23:23

Convert camel-cased error codes to space separated ones

9a22906

Updated error format

79e1d6c

Fixed error formatting

a6c8198

pastelsky force-pushed the bundlephobia branch from 9ace8bd to 2befb65 Compare January 16, 2018 18:21

pastelsky added 2 commits January 16, 2018 23:56

Renamed gzip to minzip

32ff320

Fixes lint error

319b812

pastelsky force-pushed the bundlephobia branch from 8077a32 to 319b812 Compare January 16, 2018 18:26

Remove test that times out

3f1fd89

tlaziuk mentioned this pull request Jan 28, 2018

badges tlaziuk/asap-es#22

Merged

tlaziuk mentioned this pull request Feb 1, 2018

[bundlephobia] add badge for the npm package size #1481

Merged

3 tasks

paulmelnikow closed this Feb 2, 2018

snyk-bot mentioned this pull request Sep 14, 2021

[Snyk] Upgrade ioredis from 4.24.2 to 4.27.8 kamil1marczak/shields#2

Open

snyk-bot mentioned this pull request Sep 23, 2022

[Snyk] Fix for 5 vulnerabilities andruszd/shields#38

Open

andruszd mentioned this pull request Sep 24, 2022

[Snyk] Fix for 5 vulnerabilities andruszd/shields#39

Open

This was referenced Sep 27, 2022

[Snyk] Fix for 5 vulnerabilities andruszd/shields#40

Open

[Snyk] Fix for 5 vulnerabilities andruszd/shields#41

Open

[Snyk] Fix for 5 vulnerabilities andruszd/shields#42

Open

[Snyk] Fix for 5 vulnerabilities andruszd/shields#43

Open

j-sp4 mentioned this pull request Oct 6, 2022

[Snyk] Fix for 6 vulnerabilities j-sp4/shields#12

Open

andruszd mentioned this pull request Oct 8, 2022

[Snyk] Fix for 5 vulnerabilities andruszd/shields#44

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[bundlephobia] Added a shield for calculating npm bundle sizes #1391

[bundlephobia] Added a shield for calculating npm bundle sizes #1391

pastelsky commented Dec 24, 2017

shields-ci commented Dec 24, 2017 •

edited

Loading

pastelsky commented Dec 24, 2017

paulmelnikow commented Dec 26, 2017

pastelsky commented Jan 4, 2018

paulmelnikow left a comment

paulmelnikow Jan 4, 2018

pastelsky Jan 4, 2018

paulmelnikow Jan 4, 2018

pastelsky Jan 4, 2018

paulmelnikow Jan 4, 2018

pastelsky Jan 4, 2018

paulmelnikow Jan 6, 2018

pastelsky Jan 16, 2018

paulmelnikow Jan 16, 2018

pastelsky Jan 16, 2018

paulmelnikow Jan 4, 2018

pastelsky Jan 4, 2018 •

edited

Loading

paulmelnikow Jan 4, 2018

pastelsky Jan 4, 2018

paulmelnikow Jan 4, 2018

pastelsky Jan 4, 2018

paulmelnikow Jan 6, 2018

paulmelnikow Jan 4, 2018

paulmelnikow Jan 4, 2018

paulmelnikow commented Jan 15, 2018

pastelsky commented Jan 16, 2018 •

edited

Loading

paulmelnikow commented Jan 16, 2018 •

edited

Loading

pastelsky commented Jan 16, 2018

tlaziuk commented Jan 31, 2018

paulmelnikow commented Feb 1, 2018

paulmelnikow commented Feb 2, 2018

[bundlephobia] Added a shield for calculating npm bundle sizes #1391

[bundlephobia] Added a shield for calculating npm bundle sizes #1391

Conversation

pastelsky commented Dec 24, 2017

shields-ci commented Dec 24, 2017 • edited Loading

pastelsky commented Dec 24, 2017

paulmelnikow commented Dec 26, 2017

pastelsky commented Jan 4, 2018

paulmelnikow left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pastelsky Jan 4, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

paulmelnikow commented Jan 15, 2018

pastelsky commented Jan 16, 2018 • edited Loading

paulmelnikow commented Jan 16, 2018 • edited Loading

pastelsky commented Jan 16, 2018

tlaziuk commented Jan 31, 2018

paulmelnikow commented Feb 1, 2018

paulmelnikow commented Feb 2, 2018

shields-ci commented Dec 24, 2017 •

edited

Loading

pastelsky Jan 4, 2018 •

edited

Loading

pastelsky commented Jan 16, 2018 •

edited

Loading

paulmelnikow commented Jan 16, 2018 •

edited

Loading