Runtime polyfilling with feature detection
- Dominant language
- TypeScript
- Stars
- 44k
- Forks
- 6k
- Avg merge
- 5d 15h
- Merged PRs (30d)
- 23
Description
## Feature Request
When using `preset-env` with `useBuilitins: 'usage'`, we can create bundles to serve target browsers, But modern browsers, that do not need polyfills will still load them, to solve that we can run babel with different preset options, for each browser, but it is not ideal, because server needs to know which browser is being used, and which bundle to serve, issues can happen when unknown browser is being used.
And there is polyfill.io which also requires getting them from outside, running the tool internally. So those solutions are more complicated in practice, since they involve changes in infrastructure in companies.
But I think we already have tools to achieve build time solution.
To solve that babel could provide way to get list of applied polyfills, along with and generate loader script that can be included in application to apply
For example pseudo code:
```javascript
var listOfPolyfillsUsed = ['Array.prototype.includes', 'Array.prototype.find']
var listOfPolyfillsToApply = listOfPolyfillsUsed.filter(...);
loadScript('polyfills-' + listOfPolyfillsToApply.join('-') + '.js');
```
Contributor guide
Research direction
Start by reviewing how preset-env with useBuilitins: 'usage' currently determines and applies polyfills. Define the desired output around exposing the applied polyfill list and generating a runtime loader that feature-detects and loads only the needed polyfills; the issue provides pseudocode but no files or tests to run.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- build-system, compilers
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100