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

adds the browserlist configuration #615

Merged
merged 1 commit into from
Apr 3, 2024
Merged

Conversation

erikyo
Copy link
Collaborator

@erikyo erikyo commented Apr 3, 2024

Adds the configuration required for babel/browserlist.

This very simple change, however, is worth about 1/8 less code in the build

close #614

@erikyo erikyo requested a review from verlok April 3, 2024 08:18
@XhmikosR
Copy link

XhmikosR commented Apr 3, 2024

Isn't this the same as not having a browserslist config? I would expect so...

What's the du -h of the dist folder before and after this change after running dist?

@erikyo
Copy link
Collaborator Author

erikyo commented Apr 3, 2024

Seems not, the output is a bit different with and without those lines

# with browserlist 
du -h
24K     ./esm
128K    .

# without browserlist
du -h
24K     ./esm
136K    .

As a test case without browserlist i can find in the code "var myVariable" and with browserlist the output displays "const variable", so i guess to have it or to not have it changes something in the default babel config.

@XhmikosR
Copy link

XhmikosR commented Apr 3, 2024

Cool, then better add it explicitly and maybe adapt it later to your supported browsers

@erikyo
Copy link
Collaborator Author

erikyo commented Apr 3, 2024

Yes we will, the only thing is that I want to make sure that in older versions of safari (e.g. 12) everything still works as before because with the default browserslist configuration the last supported are:

safari 17.4
safari 17.3
safari 17.2
safari 16.6
safari 15.6

@verlok
Copy link
Owner

verlok commented Apr 3, 2024

I have a browserstack account if we need to test on older versions of any browser.

@verlok
Copy link
Owner

verlok commented Apr 3, 2024

And they have an SDK for Playwright
https://www.browserstack.com/docs/automate/playwright/getting-started/nodejs

@verlok
Copy link
Owner

verlok commented Apr 3, 2024

In the screenshots is why the code is shorter with @erikyo's addition.

  • var becomes const (2 chars more) or let, but
  • function () { becomes ()=>{ and
  • return statements are replaced by just the return value.
Screenshot 2024-04-03 at 14 03 26 Screenshot 2024-04-03 at 14 03 50

This code looks solid to me.

@verlok
Copy link
Owner

verlok commented Apr 3, 2024

And ES6 is widely supported nowadays, see the can I use table (or the screenshot)

Screenshot 2024-04-03 at 14 07 29

@verlok
Copy link
Owner

verlok commented Apr 3, 2024

Also interesting the relative usage table

Screenshot 2024-04-03 at 14 09 36

@verlok
Copy link
Owner

verlok commented Apr 3, 2024

And as I stated in this section of the readme, users who need to support legacy browsers can always use version 17.9.0.

There are 3.7 Billion users / month downloading version 10.19.0, so... ¯_(ツ)_/¯

@erikyo
Copy link
Collaborator Author

erikyo commented Apr 3, 2024

Yep the browserslist repository is crafted very well and the default setting should be something like

> 0.5%, last 2 versions, Firefox ESR, not dead

which is why I don't think anyone will complain 😇

Just we need to make sure to update to the last version the current database using:

npx update-browserslist-db@latest

before build the new "versions" and automatically babel will use the correct polyfills according to the current world standards

@verlok verlok merged commit f9edb7b into verlok:master Apr 3, 2024
7 checks passed
@verlok
Copy link
Owner

verlok commented Apr 3, 2024

Released

@verlok
Copy link
Owner

verlok commented Apr 3, 2024

I added this to the build steps I follow before releasing.

npx update-browserslist-db@latest

Thanks Erik

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Browserlist Support
3 participants