{"id":17002451,"url":"https://github.com/thednp/minifill","last_synced_at":"2025-09-09T08:44:23.869Z","repository":{"id":1730454,"uuid":"43932762","full_name":"thednp/minifill","owner":"thednp","description":"The polyfill for IE8-11 and other HTML4 browsers, a minimal set with most essential polyfills.","archived":false,"fork":false,"pushed_at":"2021-12-18T15:41:03.000Z","size":222,"stargazers_count":42,"open_issues_count":0,"forks_count":8,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-04T23:34:47.939Z","etag":null,"topics":["html4-browsers","javascript","polyfill"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thednp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-09T04:23:08.000Z","updated_at":"2023-06-26T21:09:07.000Z","dependencies_parsed_at":"2022-08-06T11:00:47.171Z","dependency_job_id":null,"html_url":"https://github.com/thednp/minifill","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thednp%2Fminifill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thednp%2Fminifill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thednp%2Fminifill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thednp%2Fminifill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thednp","download_url":"https://codeload.github.com/thednp/minifill/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243766117,"owners_count":20344722,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html4-browsers","javascript","polyfill"],"created_at":"2024-10-14T04:28:03.243Z","updated_at":"2025-03-17T09:30:54.406Z","avatar_url":"https://github.com/thednp.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# minifill.js - the essential polyfill\nEver 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.\n\n[![jsDeliver](https://data.jsdelivr.com/v1/package/npm/minifill/badge)](https://www.jsdelivr.com/package/npm/minifill)\n[![CDNJS](https://img.shields.io/cdnjs/v/minifill.svg?style=flat-square)](https://cdnjs.com/libraries/minifill)\n\nThe polyfills come from various sources to which I give full credits:\n* [Financial Times](https://polyfill.io/) polyfill service\n* Remy Sharp (the one who came with the name of `polyfill`)\n* Mozilla Developer Network\n\nWhen 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.\n\nTIP: My other libraries such as [bootstrap.native](https://github.com/thednp/bootstrap.native) and [KUTE.js](https://github.com/thednp/kute.js) work best with minifill.\n\n\n## A minimal polyfill with most essential stuff:\n\n* **this.Document** - IE8 doesn't know who is `this.Document`, it's `this.HTMLDocument`\n* **this.Window** - older Safari doesn't know who is `this.Window`, it's `this`\n* **window.HTMLElement** - IE8 doesn't know who is `window.Element`, it's `window.HTMLElement`\n* **window.Node** - IE8 doesn't know who is `window.Node`, it's `window.Element`\n\n* **Object.defineProperty** - important for the below `classList`\n* **Object.keys** - returns an array populated with the object's keys\n\n* **Array.from** - creates a new, shallow-copied `Array` instance from an array-like or iterable object, usually `NodeList`, `HTMLCollection`\n* **Array.prototype.every** - tests whether all elements in the array pass the test implemented by the provided function\n* **Array.prototype.find** - returns the value of the first element in the provided array that satisfies the provided testing function\n* **Array.prototype.forEach** - executes a provided function once for each array element. \n* **Array.prototype.flat** - creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.\n* **Array.prototype.includes** - determines whether an array includes a certain value among its entries\n* **Array.prototype.map** - *creates a new array* populated with the results of calling a provided function on every element in the calling array\n* **Array.prototype.some** - tests whether at least one element in the array passes the test implemented by the provided function\n\n* **Multi.prototype.indexOf** - checks inside strings and arrays for particular values \n* **Multi.addEventListener** - uses the deprecated `attachEvent` API to help legacy browsers\n* **Multi.getElementsByClassName** - a `querySelectorAll` based polyfill for `document`/`Element`\n* **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`\n* **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\n* **Multi.dispatchEvent** - uses the deprecated `fireEvent` API on legacy browsers\n\n* **Element.prototype.matches** - the complete `matches` polyfill\n* **Element.prototype.classList** - class manipulation mostly for IE8 and other HTML4 browsers, inspired by [Remy's](https://github.com/remy/polyfills/blob/master/classList.js) `classList`\n* **Element.prototype.closest** - uses the above `matches` to find the closest parent element that matches the selector\n\n* **Date.now** - required by the below `requestAnimationFrame` and other stuff, uses the `new Date().getTime()` synthax to return the current time\n* **String.prototype.includes** - a quick fill by MDN\n* **String.prototype.trim** - yeah `trim` eventually\n* **Node.prototype.contains** - checks for parental relation between elements\n* **NodeList.prototype.forEach** - simple `forEach` polyfill, executes a provided function once for each element in a `Nodelist`.\n\n* **window.getComputedStyle** - the complete `getComputedStyle` polyfill, returns the true dimensions, spacing, or other browser supported properties\n* **window.performance.now** - required for KUTE.js and other stuff, when accuracy is required for the current time\n* **window.requestAnimationFrame** - also required for KUTE.js\n\n\n## What is minifill.js for\n* HTML4 browsers that don't support/recognize these methods/objects\n* all IE browsers don't have any/enough support for the today's standard `Event`\n* busting the myth of `write less, do more`\n\n## How to use minifill.js\n* Download or copy link from \u003ca href=\"https://www.jsdelivr.com/projects/minifill\"\u003ejsdelivr\u003c/a\u003e or \u003ca href=\"https://cdnjs.com/libraries/minifill\"\u003ecdnjs\u003c/a\u003e\n* Add one of the following to your head tag\n\n```html\n\u003c!-- if you wanna use it locally --\u003e\n\u003cscript nomodule type=\"text/javascript\" src=\"../assets/js/minifill.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- if you wanna use JSDELIVR --\u003e\n\u003cscript nomodule type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/gh/thednp/minifill@0.0.4/dist/minifill.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- if you wanna use CDNJS --\u003e\n\u003cscript nomodule type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/minifill/0.0.4/minifill.min.js\"\u003e\u003c/script\u003e\n```\n\n\n## Custom builds\nYou can create your own builds specific to your application bundles, but make sure to keep the same order as for the `minifill.js`.\n* create a new file `/path-to/your-file.js`\n* copy contents of the `minifill.js`\n* edit out the polyfills you don't need\n* run `npm run custom INPUTFILE:path-to/your-file.js,OUTPUTFILE:path-to/your-build.js,FORMAT:esm,MIN:false`\n  **  `INPUTFILE` - allows you to specify the source file path\n  **  `OUTPUTFILE` - allows you to specify the output file path\n  **  `MIN` - when true, it will compress the output\n  **  `FORMAT` - umd|cjs|esm and any format you specify or configure your rollup for\n\n\n## Examples\n\u003cb\u003eClass Manipulation\u003c/b\u003e\n\n```javascript\n// check for a class\nvar docHasClass = myElement.classList.contains('someClass'); // return true|false\n\n// add a class\nmyElement.classList.add('someClass');\n\n// remove a class\nmyElement.classList.remove('someClass');\n\n// toggle a class\nmyElement.classList.toggle('someClass');\n```\n\n\u003cb\u003eString / Array checks\u003c/b\u003e\n\n```javascript\n// indexOf\nstring.indexOf('looking for this'); // returns the index of 'looking for this' within the string OR -1 if not found\n// or\narray.indexOf(myElement); // returns the index of an element within the array OR -1 if not found\n```\n\n\u003cb\u003eGet current computed style for an element\u003c/b\u003e\n\n```javascript\n// getComputedStyle\nvar elStyle = window.getComputedStyle(myElement); // returns the current computed style for myElement\nvar width = elStyle.width; // returns the current computed width\n```\n\n\u003cb\u003eGet the exact current time\u003c/b\u003e\n\n```javascript\n// window.performance.now\nvar timeNow = window.performance.now(); // returns a number with the exact current time\n```\n\n\u003cb\u003eCreate Native Events\u003c/b\u003e\u003cbr\u003e\nInstead of writing\n\n```javascript\n// typical triggering events these days\nif ( 'createEventObject' in document ) {\n\tmyChangeEvent = document.createEventObject();\t\t\n\tmyChangeEvent.type = type;\n\tmyChangeEvent.bubbles = bubbles;\n\tmyChangeEvent.cancelable = cancelable;\n} else {\n\tmyChangeEvent = document.createEvent('Event');\t\t\t\n\tmyChangeEvent.initEvent(type, bubbles, cancelable);\t\n}\n```\nyou can simply write\n\n```javascript\n// Event\nvar myChangeEvent = new Event('change'); // creates 'change' Event Element / Object (legacy browsers)\n```\nto do it all for you.\n\n\u003cb\u003eCreate Custom Events\u003c/b\u003e\n\n```javascript\n// CustomEvent\nvar myCustomEvent = new CustomEvent('my.custom.event.name'); // creates 'my.custom.event.name' CustomEvent Element / Object (legacy browsers)\n```\n\n\u003cb\u003eTriggering/Dispatching Events\u003c/b\u003e\n\n```javascript\nmyElement.dispatchEvent(myChangeEvent); // dispatches the native 'change' event for myElement, defined above\nmyElement.dispatchEvent(myCustomEvent); // dispatches a CustomEvent event for myElement, defined above\n```\n\n\u003cb\u003eAdding Event Handlers\u003c/b\u003e\n\n```javascript\n// addEventListener\nwindow.addEventListener('scroll',handler,false); // adds a new handler to the window `scroll` event\n// OR\nmyButton.addEventListener('click',handler,false); // adds a 'click' (or any other supported/custom event) handler for any HTML element\n```\n\n\u003cb\u003eRemoving Event Handlers\u003c/b\u003e\n\n```javascript\n// removeEventListener\nwindow.removeEventListener('scroll',handler,false); // removes a handler bound to the window `scroll` event\n// OR\nmyButton.removeEventListener('click',handler,false); // removes a handler bound to 'click' (or any other supported/custom event) handler for any HTML element\n```\nNOTE: 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:\n\n```javascript\nwindow.addEventListener('scroll', function handlerWrapper(e){\n  handler(e);\n  window.removeEventListener('scroll', handlerWrapper, false);\n},false);\n```\n\n## License\nminifill.js is licensed under MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthednp%2Fminifill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthednp%2Fminifill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthednp%2Fminifill/lists"}