Badges with package size

[Demivan]

shields.io has Bundlephobia integration.

Lodash:

Would be nice to have something similar with bundlejs.

[okikio]

I'll get on that

[wooorm]

See also https://github.com/okikio/bundlejs/discussions/29.

P.S. I’m still very interested in badges :)

[okikio]

I've started working on it. A beta version should be out in a couple days

[okikio]

There is now a beta API you can try out, https://bundlejs.com/api?q=react, it is very much not production ready and very experimental, but try it out and tell me what you think.

[okikio]

Badges WIP https://github.com/badges/shields/issues/8266

[wooorm]

Sweet, thanks for working on this! (Btw, maybe this is intentional, but FYI: your branch is not a PR to upstream yet.)

[okikio]

That's because I've still got some stuff I've gotta do before making a fully fledged pr.

[okikio]

So, I've got a beta version of badges out. There are some bugs in the Vercel Serverless functions that cause the badge to not be generated properly for large bundles to which the bundlejs website can handle.

You can try it out, using

![bundlejs bundle of react](https://bundlejs.com/api/badge?q=react) 

^ Note: it uses the exact same syntax as normal bundlejs. You can check out the bundlejs' docs to learn how sharing bundles work.

[Demivan]

https://github.com/fluent-vue/fluent-vue it works. Function timed out few times. Some comments:

• other badges have label on the left side
• bundlejs label could be confusing. bundlephobia has just minified size as a label

Side note https://bundlejs.com/ is broken. Editor never finishes loading

[okikio]

Thanks @Demivan , yeah i can totaly change the order of the file size to bundlejs text.

P.S. I've fixed bundlejs' infinite loading.

Update: changed text order

[wooorm]

I tried to update some things but I’m getting errors it seems:

For: https://bundlejs.com/api/badge?q=rehype-raw

{"error":"TypeError: Cannot read properties of undefined (reading 'contents')"}

For: https://bundlejs.com/api/badge?q=micromark

This Serverless Function has timed out.

Your connection is working correctly.

Vercel is working correctly.

(the vercel 504 gateway timeout error)

[okikio]

@wooorm Thanks for that, I'm working on fixing this issue

[okikio]

Good news I've got an even better version releasing this week. It supports badges, complex modules, can return the bundle metafile for https://esbuild.github.io/analyze/, and even gives you the fully bundled code, etc...

Get excited, I'm just waiting for the DNS propagation...before launching

[okikio]

A little late, but it's now out...badges 👏

[![spring-easing's badge](https://deno.bundlejs.com/?q=spring-easing&badge=detailed&badge-style=for-the-badge)](https://bundlejs.com/?q=spring-easing)

https://twitter.com/jsbundle/status/1634457855746011136?s=20

cc @wooorm

[okikio]

You can also now import bundled bundlejs files and polyfill them using the bundlejs API

[wooorm]

Awesome!

Two Qs:

• I was missing some docs on what options are available to build the urls

• How come the esbuild CLI gives me 15kb, but bundlejs gives me 27kb? 👀:

  $ ./node_modules/.bin/esbuild micromark --color=true --global-name=BundledCode --log-level=info --target=esnext --format=esm --bundle --minify --tree-shaking=true --platform=browser | gzip-size
  15.2 kB

  https://deno.bundlejs.com/?q=micromark

  n.b., my assumption is that the platform=browser isn’t actually set. Changing it to --platform=node does report 27kb. In Node, a bunch of extra code is loaded which isn’t needed if the DOM is available

[okikio]

@wooorm It's possible it's grabbing the cjs format of one of the files, from what I can see of the bundle analysis it seems to be grabbing all the right files? Maybe, I'm missing something? 🤔 https://deno.bundlejs.com/?q=micromark&analysis=verbose

[wooorm]

I can’t open that url: {"error":"TypeError: worker.postMessage is not a function"} (on safari)

In browsers, it should pick index.dom.jss from decode-named-character-reference: https://github.com/wooorm/decode-named-character-reference/blob/4347630741f82d7d4c7fb38763ba158951b2a1be/package.json#L37. But it doesn’t. It doesn’t, it picks the default one (https://unpkg.com/decode-named-character-reference@1.0.2/index.js). esbuilt itself does pick index.dom.js with --platform=browser, so it’s something specific to bundlejs that that flag is not passed somehow!

[okikio]

I'll have to look into this further, I think the package resolution is messing up, thanks for taking the time to take a look

[okikio]

The bundle analysis error should now be fixed. Please take a look

[okikio]

@wooorm Fixed. It should now be using index.dom.js

[wooorm]

Sweet, works well!

![](https://deno.bundlejs.com/?q=micromark&badge)

What do you think about using minzipped size on the left (and removing (gzip) on the right)? That’s what I get for shields.io currently:

![](https://img.shields.io/bundlephobia/minzip/preact.svg)
![](https://img.shields.io/bundlephobia/min/preact.svg)

[okikio]

Most devs would assume that the badge is from bundlephobia, if I simple put minzipped on the left. Also, bundlejs supports compressing the bundle using brotli, lz4, and zstd, so I guess I could show the (gzip) if you're using a compression algorithm that's not gzip

[MellKam]

Hello, I would like to customize the badge a bit. Can you provide the ability to show only the minimized size or only the gzipped size? That would be very nice.

[okikio]

@MellKam By default it shows the gzipped size, but you can use a JSON endpoint shield in the meantime

![](https://img.shields.io/badge/dynamic/json?color=blue&label=bundlejs-(min)&query=$.size.uncompressedSize&url=https://deno.bundlejs.com/?q=react)

[MellKam]

@okikio Thank you!

[okikio]

@MellKam Minified badges are now built-in https://twitter.com/jsbundle/status/1635883074201214977?s=20

[okikio]

@Demivan Does the badge API work for you? Can I mark this issue as complete?

[Demivan]

It timed out few times but it is working now.

Only thing is that I cannot find is how to properly encode string with esbuild config, so shields.io does not complain about wrong url.

![](https://img.shields.io/badge/dynamic/json?color=blue&label=fluent-vue&suffix=%20(bundlejs)&query=$.size.size&url=https://deno.bundlejs.com/?q=fluent-vue)

It either ignores is:

![](https://img.shields.io/badge/dynamic/json?label=fluent-vue&suffix=%20(bundlejs)&query=$.size.size&url=https://deno.bundlejs.com/?q=fluent-vue&config={"esbuild":{"external":["vue"]}})

Or breaks:

![](https://img.shields.io/badge/dynamic/json?label=fluent-vue&suffix=%20(bundlejs)&query=$.size.size&url=https://deno.bundlejs.com/?q=fluent-vue%26config={"esbuild":{"external":["vue"]}})

[okikio]

@Demivan You can use encodeURIComponent('https://deno.bundlejs.com/?q=fluent-vue%26config={"esbuild":{"external":["vue"]}}') to get a URL safe url,

e.g. https%3A%2F%2Fdeno.bundlejs.com%2F%3Fq%3Dfluent-vue%2526config%3D%7B%22esbuild%22%3A%7B%22external%22%3A%5B%22vue%22%5D%7D%7D

![](https://img.shields.io/badge/dynamic/json?label=fluent-vue&suffix=%20(bundlejs)&query=$.size.size&url=https%3A%2F%2Fdeno.bundlejs.com%2F%3Fq%3Dfluent-vue%2526config%3D%7B%22esbuild%22%3A%7B%22external%22%3A%5B%22vue%22%5D%7D%7D)

I don't do this by default, because it's just really difficult to read

[Demivan]

Yeah. I was trying to do that. But as you can see shields.io still complains.

But this is not an issue with bundlejs badges so this issue can be closed.

[okikio]

I'll look into what the best way to solve, and get back to you, for now I'll close this issue

[okikio]

@Demivan https://github.com/badges/shields/issues/9012