Polyfill service 1.1

We’re pleased to announce the release of a major update to the polyfill service, with our first CI-validated build, many improved polyfills and 8 new ones, support for callbacks and improvements in our documentation. This update added 4,883 lines and deleted 2,222 across 196 files. Here’s some more detail on the highlights.

Build: passing!

In 1.0, we added an extensive test harness and reporting system, and we added tests to a lot of polyfills. This showed that while a lot of the polyfills worked fine, there were edge cases where they didn’t. We’ve been working to fix those, and with 1.1 we have our first release of a 100% passing build, as well as even more test coverage: 315 tests across 82 browser features, tested in 24 browsers. That means up to 7,560 tests run on every push.

Travis CI showing passing build for polyfill service

We also updated the browsers that we use for testing to reflect new releases of Chrome and Firefox.

More polyfills

We’ve added polyfills for more features, based on requests from FT devs and the community, as well as contributions people have made via pull requests. Here are the new browser features now polyfillable:

  • Array.prototype.contains
  • Array.prototype.find
  • Array.prototype.findIndex
  • Element.prototype.cloneNode
  • Node.prototype.contains
  • screen.orientation
  • setImmediate
  • WeakSet

And the following existing polyfills have been improved:

  • Array.from
  • Array.isArray
  • Array.of
  • CustomEvent
  • DOMTokenList
  • Date.prototype.toISOString
  • Document
  • Element
  • Element.prototype.mutation
  • Event.DOMContentLoaded
  • Event.focusin
  • Event.hashchange
  • Event
  • HTMLDocument
  • Object.defineProperty
  • Object.keys
  • Promise
  • String.prototype.repeat

More browsers

We can now recognise and target polyfills at Yandex browser (aliased to Chrome) and Iceweasel (aliased to Firefox). This release also reduces the granularity of our version matching from patch to minor: we’ve lost the ability to distinguish between version 1.2.3 and 1.2.4 of the same browser – but we found we have no need to be this granular and limiting variance to the minor level will improve cache performance.

Callback support

We now support a callback argument on the query string, to add a function call to the end of the resulting polyfill bundle. This provides a simple and legacy-compatible way for you to load your own scripts asynchronously but execute them only when the required polyfills have been installed:

<script src="//cdn.polyfill.io/v1/polyfill.min.js?callback=init" defer async></script>
<script>
  function init() {
    // I only get called when polyfills have been loaded
  }
</script>

Better feature docs

We now provide links in our documentation, for each feature, to the polyfill source code and to the test runner to run the test suite. We also show the minifed size of the polyfill and flag it with a star if it’s in the default set.

Polyfill service 1.1 feature matrix

The visual style of the different indicators in the feature matrix has also been updated to make the distinction clearer and ensure it is visible to colour blind users.

Because Gzipping of a concatenated bundle will compress polyfills by a different amount depending on how many are in the bundle, you can now see the total bundle size of the default feature set in all our test browsers:

Bundle sizes

No more automatic feature expansion

Starting with this release the service will no longer auto-expand feature names. Previously if you requested Array you would get Array.*, but this made it impossible to load just the constructor polyfills for Window and Document. No requests in the last 7 days had used the service in a way that would have depended on this feature, so we feel we’re safe to remove it.

Better debug output

If you omit the .min from your request path, the comment at the top of the response will now additionally include the full resolved list of features requested. This should be identical to the value of your features argument (albeit sorted into alphabetical order), and makes it easy to verify that you are receiving the correct response.

Feature list in debug header

On the way: ES6

In our next release we hope to support polyfill sources written in ES6 syntax, along with more ES6 features like WeakMap.

If you find the polyfill service useful, we’d love to hear from you, and we’d love to get you involved. You can read more about contributing to the project in the service docs.