minifill.js - the essential polyfill

Ever wondered how to fix old browsers, improve scripting execution performance, simplify scripting and improve overall code quality all without using jQuery? The answer is polyfills.

The polyfills come from various sources to which I give full credits:

Financial Times polyfill service
Remy Sharp (the one who came with the name of polyfill)
Mozilla Developer Network

When you use the above service, there is a certain amount of delay involved when executing the polyfill queries, as well as some unexplained in page script execution lags, a case where it's best to just host your own polyfills, and here comes minifill handy.

TIP: My other libraries such as bootstrap.native and KUTE.js work best with minifill.

A minimal polyfill with most essential stuff:

this.Document - IE8 doesn't know who is this.Document, it's this.HTMLDocument
this.Window - older Safari doesn't know who is this.Window, it's this
window.HTMLElement - IE8 doesn't know who is window.Element, it's window.HTMLElement
window.Node - IE8 doesn't know who is window.Node, it's window.Element
Object.defineProperty - important for the below classList
Object.keys - returns an array populated with the object's keys
Array.from - creates a new, shallow-copied Array instance from an array-like or iterable object, usually NodeList, HTMLCollection
Array.prototype.every - tests whether all elements in the array pass the test implemented by the provided function
Array.prototype.find - returns the value of the first element in the provided array that satisfies the provided testing function
Array.prototype.forEach - executes a provided function once for each array element.
Array.prototype.flat - creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.
Array.prototype.includes - determines whether an array includes a certain value among its entries
Array.prototype.map - creates a new array populated with the results of calling a provided function on every element in the calling array
Array.prototype.some - tests whether at least one element in the array passes the test implemented by the provided function
Multi.prototype.indexOf - checks inside strings and arrays for particular values
Multi.addEventListener - uses the deprecated attachEvent API to help legacy browsers
Multi.getElementsByClassName - a querySelectorAll based polyfill for document/Element
Multi.Event - the complete polyfill, implements createEvent or createEventObject to make HTML4 browsers as well as IE8-IE11 work properly with today's standard Event
Multi.CustomEvent - the complete polyfill, makes use of the above new Event() for stuff like unsupported events types or user defined events like my.custom.event, this also works with IE8-IE11
Multi.dispatchEvent - uses the deprecated fireEvent API on legacy browsers
Element.prototype.matches - the complete matches polyfill
Element.prototype.classList - class manipulation mostly for IE8 and other HTML4 browsers, inspired by Remy's classList
Element.prototype.closest - uses the above matches to find the closest parent element that matches the selector
Date.now - required by the below requestAnimationFrame and other stuff, uses the new Date().getTime() synthax to return the current time
String.prototype.includes - a quick fill by MDN
String.prototype.trim - yeah trim eventually
Node.prototype.contains - checks for parental relation between elements
NodeList.prototype.forEach - simple forEach polyfill, executes a provided function once for each element in a Nodelist.
window.getComputedStyle - the complete getComputedStyle polyfill, returns the true dimensions, spacing, or other browser supported properties
window.performance.now - required for KUTE.js and other stuff, when accuracy is required for the current time
window.requestAnimationFrame - also required for KUTE.js

What is minifill.js for

HTML4 browsers that don't support/recognize these methods/objects
all IE browsers don't have any/enough support for the today's standard Event
busting the myth of write less, do more

How to use minifill.js

Download or copy link from jsdelivr or cdnjs
Add one of the following to your head tag

<!-- if you wanna use it locally -->
<script type="text/javascript" src="../assets/js/minifill.min.js"></script>

<!-- if you wanna use JSDELIVR -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/thednp/minifill@0.0.4/dist/minifill.min.js"></script>

<!-- if you wanna use CDNJS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/minifill/0.0.4/minifill.min.js"></script>

Custom builds

You can create your own builds specific to your application bundles, but make sure to keep the same order as for the minifill.js.

create a new file /path-to/your-file.js
copy contents of the minifill.js
edit out the polyfills you don't need
run npm run custom INPUTFILE:path-to/your-file.js,OUTPUTFILE:path-to/your-build.js,FORMAT:esm,MIN:false ** INPUTFILE - allows you to specify the source file path ** OUTPUTFILE - allows you to specify the output file path ** MIN - when true, it will compress the output ** FORMAT - umd|cjs|esm and any format you specify or configure your rollup for

Examples

Class Manipulation

// check for a class
var docHasClass = myElement.classList.contains('someClass'); // return true|false

// add a class
myElement.classList.add('someClass');

// remove a class
myElement.classList.remove('someClass');

// toggle a class
myElement.classList.toggle('someClass');

String / Array checks

// indexOf
string.indexOf('looking for this'); // returns the index of 'looking for this' within the string OR -1 if not found
// or
array.indexOf(myElement); // returns the index of an element within the array OR -1 if not found

Get current computed style for an element

// getComputedStyle
var elStyle = window.getComputedStyle(myElement); // returns the current computed style for myElement
var width = elStyle.width; // returns the current computed width

Get the exact current time

// window.performance.now
var timeNow = window.performance.now(); // returns a number with the exact current time

Create Native Events
Instead of writing

// typical triggering events these days
if ( 'createEventObject' in document ) {
	myChangeEvent = document.createEventObject();		
	myChangeEvent.type = type;
	myChangeEvent.bubbles = bubbles;
	myChangeEvent.cancelable = cancelable;
} else {
	myChangeEvent = document.createEvent('Event');			
	myChangeEvent.initEvent(type, bubbles, cancelable);	
}

you can simply write

// Event
var myChangeEvent = new Event('change'); // creates 'change' Event Element / Object (legacy browsers)

to do it all for you.

Create Custom Events

// CustomEvent
var myCustomEvent = new CustomEvent('my.custom.event.name'); // creates 'my.custom.event.name' CustomEvent Element / Object (legacy browsers)

Triggering/Dispatching Events

myElement.dispatchEvent(myChangeEvent); // dispatches the native 'change' event for myElement, defined above
myElement.dispatchEvent(myCustomEvent); // dispatches a CustomEvent event for myElement, defined above

Adding Event Handlers

// addEventListener
window.addEventListener('scroll',handler,false); // adds a new handler to the window `scroll` event
// OR
myButton.addEventListener('click',handler,false); // adds a 'click' (or any other supported/custom event) handler for any HTML element

Removing Event Handlers

// removeEventListener
window.removeEventListener('scroll',handler,false); // removes a handler bound to the window `scroll` event
// OR
myButton.removeEventListener('click',handler,false); // removes a handler bound to 'click' (or any other supported/custom event) handler for any HTML element

NOTE: if the removeEventListener call is not in the same context with addEventListener, it will produce no effect. If you would like to autoremove a handler, you would need to write your code like this:

window.addEventListener('scroll', function handlerWrapper(e){
  handler(e);
  window.removeEventListener('scroll', handlerWrapper, false);
},false);

License

minifill.js is licensed under MIT License.