fix(ie11): remove unnecessary polyfills

fixes #1668

package.json

@@ -82,6 +82,7 @@
     "ansi-colors": "4.0.1",
     "autoprefixer": "9.6.0",
     "conventional-changelog-cli": "^2.0.12",
+    "core-js-builder": "^3.1.4",
     "css-what": "2.1.3",
     "cssnano": "4.1.10",
     "execa": "^1.0.0",

readme.md

@@ -148,30 +148,44 @@ Web Components, specifically Custom Elements, are natively supported in Chrome a
 
 ## Polyfills
 
-For the small minority of browsers that do not support modern browser features and APIs, Stencil will automatically polyfill them on-demand. What this means is that for browsers that already support the feature natively, they will not have to download and parse any unnecessary JavaScript. The great news is that in today's web landscape, most modern APIs are already shipping for what Stencil requires. Polyfills which are loaded on-demand include:
+Stencil includes a subset of the `core-js` polyfills for old browsers like IE11, `fetch` and conditionally downloads the [Custom Elements v1](https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements) only when it's needed for modern browsers (EDGE and old versions of Firefox.)
+
+
+### Internet Explorer 11
+
+Browser that does not support native ESM (at the moment, only IE11 and older) will download a subset of [`core-js`](https://github.com/zloirock/core-js).
+
+This subset is generated using the [`core-js-builder` tool](https://github.com/zloirock/core-js/tree/master/packages/core-js-builder) with the following configuration:
+
+```js
+require('core-js-builder')({
+  modules: [
+    'es',
+    'web.url',
+    'web.url.to-json',
+    'web.url-search-params'
+  ],
+  blacklist: [
+    'es.math',
+    'es.date',
+    'es.symbol',
+    'es.array-buffer',
+    'es.data-view',
+    'es.typed-array',
+    'es.reflect'
+  ]
+});
+```
+
+In addition, the following set of polyfills are also included:
 
- - [Custom Element](https://github.com/WebReflection/document-register-element)
- - [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)
- - [CSS Variables](https://github.com/webcomponents/shadycss)
  - [Promise](https://github.com/stefanpenner/es6-promise)
- - [async/await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) *(transpiled to promises)*
  - [fetch()](https://github.com/github/fetch)
- - [URL](https://github.com/lifaon74/url-polyfill)
- - [Array.fill](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill)
- - [Array.find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
- - [Array.findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)
- - [Array.from](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
- - [Array.includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)
- - [Element.closest](https://github.com/jonathantneal/closest)
- - [Element.matches](https://github.com/jonathantneal/closest)
- - [Element.remove](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove)
- - [Map/Set/WeakMap/WeakSet](https://github.com/WebReflection/es6-collections)
- - [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
- - [Object.entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)
- - [Object.values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)
- - [String.startsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith)
- - [String.endsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith)
- - [String.includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes)
+ - [CSS variables](https://github.com/ionic-team/stencil/tree/master/src/client/polyfills/css-shim): We implemented out own CSS variables polyfill that integrates into the Stencil¡s run
+
+### All browsers
+
+Some modern browsers today like Edge does not include native support for web components, in that case we conditionally load the [Custom Elements v1](https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements) polyfill.
 
 
 ## Related

scripts/build-polyfills.js

@@ -2,13 +2,35 @@ const fs = require('fs-extra');
 const path = require('path');
 const rollup = require('rollup');
 const ts = require('typescript');
-const terser = require('terser');
 
 const ROOT_DIR = path.join(__dirname, '..');
 const SRC_DIR = path.join(ROOT_DIR, 'src', 'client', 'polyfills');
 
+function buildCoreJs() {
+  return require('core-js-builder')({
+    modules: [
+      'es',
+      'web.url',
+      'web.url.to-json',
+      'web.url-search-params'
+    ],
+    blacklist: [
+      'es.math',
+      'es.date',
+      'es.symbol',
+      'es.array-buffer',
+      'es.data-view',
+      'es.typed-array',
+      'es.reflect'
+    ],
+    filename: path.join(SRC_DIR, 'core-js.js'),
+  });
+}
 
 module.exports = async function buildPolyfills(transpiledPolyfillsDir, outputPolyfillsDir) {
+  // Only run when regenerating core-js polyfill
+  // await buildCoreJs();
+
   await fs.emptyDir(outputPolyfillsDir);
 
   const filesSrc = (await fs.readdir(SRC_DIR)).filter(f => f.endsWith('.js'));