msn0 / mdn-polyfills Goto Github PK

MDN polyfills - from, forEach, filter, find, findIndex, assign, includes, create, entries, of, repeat, startsWith, endsWith, toggleAttribute, bind, MouseEvent, CustomEvent, padEnd, padStart

Home Page: https://msn0.github.io/mdn-polyfills

JavaScript 100.00%

mdn polyfills

mdn-polyfills's Introduction

Polyfills copy-pasted from MDN

MDN polyfills. A collection of side-effect ECMAScript modules. Minimized, mangled and extremely small thanks to Rollup - next-generation ES6 module bundler.

Installation

npm i mdn-polyfills --save

Usage

import 'mdn-polyfills/POLYFILL_NAME';

// For example:

// (ES6 Modules)
import 'mdn-polyfills/Array.prototype.includes';
import 'mdn-polyfills/Object.create';

// (CommonJS)
require('mdn-polyfills/CustomEvent');
require('mdn-polyfills/String.prototype.padStart');

// and so on ...

Polyfills are also available over a CDN, for example

<script src="https://unpkg.com/mdn-polyfills/Object.assign"></script>
<script src="https://cdn.jsdelivr.net/npm/mdn-polyfills/NodeList.prototype.forEach.js"></script>

Supported polyfills

name	size [b]
Object.assign	274
Object.create	299
Object.entries	151
Object.keys	723
Object.values	142
Array.from	788
Array.of	79
Array.prototype.fill	343
Array.prototype.filter	300
Array.prototype.find	330
Array.prototype.findIndex	362
Array.prototype.forEach	328
Array.prototype.includes	346
Array.prototype.some	346
Array.prototype.reduce	492
String.prototype.includes	153
String.prototype.repeat	504
String.prototype.startsWith	117
String.prototype.endsWith	148
String.prototype.padStart	209
String.prototype.padEnd	205
String.prototype.trim	121
Function.prototype.bind	427
Node.prototype.addEventListener	1321
Node.prototype.append	433
Node.prototype.prepend	452
Node.prototype.before	440
Node.prototype.after	461
Node.prototype.remove	290
Node.prototype.replaceWith	731
Node.prototype.children	245
Node.prototype.firstElementChild	262
NodeList.prototype.forEach	158
Element.prototype.closest	333
Element.prototype.toggleAttribute	243
Element.prototype.matches	133
Element.prototype.classList	4450
Element.prototype.getAttributeNames	182
MouseEvent	405
CustomEvent	279
Number.isInteger	106
Number.isNaN	53
HTMLCanvasElement.prototype.toBlob	276

License

The mdn-polyfills as a module is licensed under MIT © Michał Jezierski
Polyfills are licensed under https://developer.mozilla.org/en-US/docs/MDN/About#Copyrights_and_licenses

mdn-polyfills's People

Stargazers

Watchers

mdn-polyfills's Issues

Element.prototype.classList error

Element.prototype.closest returns following error when used:

'ele' is undefined

Object.entries IE10, Edge

Object.entries('s')
expected: [['0', 's']]
received: Error argument

Object.entries(100)
expected: []
received: Error argument

'before' polyfill error in IE11

There is a small fault in the Node.prototype.before polyfill which results in a ErrorNotFound in IE11.

this.insertBefore(o, this) should be this.parentNode.insertBefore(o, this)

It has already been fixed on MDN: https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/before

String.prototype.repeat()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat#Polyfill

Add Number.isNaN polyfill

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN

Implement String.prototype.padEnd

Implement a polyfill for String.prototype.padEnd as per https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd#Polyfill

Array.prototype.findIndex

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex?v=example#Polyfill

Release Hacktoberfest contributions

Polyfills to be released:

String.prototype.padStart
String.prototype.padEnd
CustomEvent

Array.prototype.includes

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

In line 3, document.documentElement.contains only succeeds if the element is present in window.document. For a document instance parsed from a string using DOMParser.parseFromString it won't work. Is there a reason to have this check?

Element.classList.toggle

Hi, there is a bug in Element.classList.toggle.

First:
https://github.com/msn0/mdn-polyfills/blob/master/src/Element.prototype.classList/classList.js#L157 - this.remove(oldToken), there is no variable oldToken in this function, this is copy-paste from next method DOMTokenListProto.replace, there must be a "val" variable from arguments.

Second:
I replaced this.remove(oldToken) with this.remove(val) but this code is not work in Android 4.2
browser\webview (but it works in Chrome, for example), because expression "this.value" in Android 4.2 returns undefined, so className always added, but never removed.

I tried to submit bug into MDN documentation, but got: Sorry, entering a bug into the product Developer Documentation has been disabled.

Simple implementation in russian version of doc works, but not consider the second argument of "toggle" method https://developer.mozilla.org/ru/docs/Web/API/Element/classList

Array.prototype.filter()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Polyfills being treeshaked as deadcode

Hello,

So there is a big discussion about how self executing functions or side effects are being shaked off when, for example, you directly import one poly fill.

Imagine the following scenario:

App A includes a component from module M.

Module M imports one of your polyfills P.

When webpack compiles A, as your module has no sideEffects in package.json, it simply thinks that P is dead code.

(A nice discussion can be followed at : webpack/webpack#6571)

What do you think of adding sideEffects to this library package.json?

Thank you!

Will the mdn-polyfills software be updated?

Element.closest

https://developer.mozilla.org/pl/docs/Web/API/Element/closest

Array.prototype.from is not actually on the prototype

Array.from() is a static function and not on the prototype.

Array.prototype.forEach()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#Polyfill

Implement String.prototype.padStart

Implement a polyfill for String.prototype.padStart as per https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart#Polyfill

Add Array reduce polyfill

Is there any way we can have the Array.reduce polyfill from here:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce#Polyfill

(IE11) array.prototype.find adds 'find' key

Adding the 'Array.prototype.find' script - under IE11 - causes 'find' to be returned as a key when looping through any array, even an empty one.

var x = []; for( var key in x ) console.log(key);

The above code logs 'find' to the console, only when the shim is added however. I suspect looking at the code that other array shims will have a similar impact.

Can we add a LICENCE file

Create a very simple gh-pages

Create a very simple gh-pages with a list of supported polyfills along with usage examples and links to mdn website.

Array.prototype.find()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find#Polyfill

String.prototype.includes

Implement `Object.values`

Would be nice to have Object.values in this package, so I have all polyfills from a single library (I still support IE11)

Element.closest doesn't work correctly on SVG elements

Say I have a page with an inline SVG which contains a path element.

In Firefox if I do document.querySelector('path').closest('html') I'll get the HTML element.

But in IE11 with the polyfill currently in this repo, I get nothing. This is because parentElement isn't defined on SVG elements.

I notice that the polyfill in this repo doesn't match that on MDN. I guess it's been updated. The one currently on MDN has el.parentElement || el.parentNode in one spot, so I think this issue has been fixed there.

https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill

I was going to open a PR with the updated code, but noticed that this polyfill also polyfills Element.prototype.matches. With that in mind I'm not sure how the code for this repo should look. Should it import the Element.prototype.matches polyfill, and so rely on it as a dependency?

Implement Object.entries polyfill

Implement Object.entries polyfill as per https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

String.prototype.startsWith

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith

Function.prototype.bind()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#Polyfill

MouseEvent doesn't take params

Hello,

The implementation of MouseEvent doesn't match the one currently at : https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent

So ScreenX, ClientX, etc doesn't work ...

(function (window) {
  try {
    new MouseEvent('test');
    return false; // No need to polyfill
  } catch (e) {
		// Need to polyfill - fall through
  }

    // Polyfills DOM4 MouseEvent
	var MouseEventPolyfill = function (eventType, params) {
		params = params || { bubbles: false, cancelable: false };
		var mouseEvent = document.createEvent('MouseEvent');
		mouseEvent.initMouseEvent(eventType, 
			params.bubbles,
			params.cancelable,
			window,
			0,
			params.screenX || 0,
			params.screenY || 0,
			params.clientX || 0,
			params.clientY || 0,
			params.ctrlKey || false,
			params.altKey || false,
			params.shiftKey || false,
			params.metaKey || false,
			params.button || 0,
			params.relatedTarget || null
		);

		return mouseEvent;
	}

	MouseEventPolyfill.prototype = Event.prototype;

	window.MouseEvent = MouseEventPolyfill;
})(window);