🔮 mastic-filler 🌟

Automatically tests your browser for the features you want, and then fetches the polyfills

How to use it

First, install mastic-filler as one of your dependencies :

npm i mastic-filler --save

You'll need to provide three things to mastic-filler :

• a list of polyfills to test
• an url to fetch the polyfills if needed
• a list of scripts to load and execute when the browser is polyfilled and ready to rock

import filler from 'mastic-filler';
import { Promise } from 'mastic-polyfills';

filler({
	polyfills: [Promise],
	url: 'http://url.of.your.mastic.server',
	scripts: ['/assets/app.js']
});

filler() options

polyfills

Array of Polyfill objects

The list of polyfills the fill script will test and fetch if needed. You can import and use the ones from mastic-polyfills, but you can also make it work with your hand-made polyfills :

import filler from 'mastic-filler';
import Polyfill, { Promise } from 'mastic-polyfills';

const isFeatureSupported = typeof feature !== 'undefined';
const myBundleName = 'feature-polyfill';
const myPolyfill = new Polyfill(isFeatureSupported, customBundleName);

filler({
	polyfills: [Promise, customPolyfill],
	url: 'http://url.of.your.mastic.server',
	scripts: ['/assets/app.js']
});

For more information on polyfills objects, see the mastic-polyfills readme.

url

String

The url of the server serving your polyfills bundles. See the mastic-node-server readme for more information.

scripts

Array of String

To be able to polyfill your browser before your app code runs, mastic-filler must control the script loading and executing order. It means you have to remove the scripts tags from your pages, and provide the urls to mastic-filler. It can be done with a global variable or anything you want.

- <script src="/assets/app.js"></script>
+ <script>window.scripts=['/assets/app.js']></script>

filler({
	polyfills: [Promise],
	url: 'http://url.of.your.mastic.server',
	scripts: window.scripts
});

You can improve the loading speed of your scripts in the browsers supporting resources preload (mainly Chrome for the moment) by adding some lines in the header of your page :

<link rel="preload" href="/assets/app.js" as="script">

This will preload the scripts you specify without executing them, so when mastic-filler will want to execute them they will already be in loaded in cache.