{"id":13715227,"url":"https://github.com/PascalAOMS/dynamic-polyfill","last_synced_at":"2025-05-07T04:30:38.708Z","repository":{"id":57217694,"uuid":"69789575","full_name":"PascalAOMS/dynamic-polyfill","owner":"PascalAOMS","description":"Write modern code and load a polyfill only if the browser does not support it.","archived":false,"fork":false,"pushed_at":"2019-03-01T09:39:24.000Z","size":98,"stargazers_count":59,"open_issues_count":4,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-15T06:18:18.316Z","etag":null,"topics":["es2015","javascript","npm","polyfill"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PascalAOMS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-02T09:42:03.000Z","updated_at":"2024-11-30T05:55:29.000Z","dependencies_parsed_at":"2022-08-28T21:41:29.234Z","dependency_job_id":null,"html_url":"https://github.com/PascalAOMS/dynamic-polyfill","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PascalAOMS%2Fdynamic-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PascalAOMS%2Fdynamic-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PascalAOMS%2Fdynamic-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PascalAOMS%2Fdynamic-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PascalAOMS","download_url":"https://codeload.github.com/PascalAOMS/dynamic-polyfill/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252813611,"owners_count":21808359,"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":["es2015","javascript","npm","polyfill"],"created_at":"2024-08-03T00:00:56.116Z","updated_at":"2025-05-07T04:30:38.338Z","avatar_url":"https://github.com/PascalAOMS.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"| Size   | Support             |\n| ------ | ------------------- |\n| ~1 KB  | \u003e IE8 (see below)   |\n\n\u003cp\u003e\n    \u003ca href=\"https://www.npmjs.com/package/dynamic-polyfill\"\u003e\u003cimg src=\"https://img.shields.io/david/pascalaoms/dynamic-polyfill.svg\" alt=\"Dependencies\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## What's the use?\nMade for easier use of the [Polyfill.io API](polyfill.io) to detect browser support, offer dynamic polyfills and save an extra HTTP request.\n\nWrite modern code like fetch, Promise or Array.prototype.includes without the need to transform it or locally load a polyfill.\n\n\u003e _**Note:** Does not polyfill syntactic sugar like **Classes, enhanced Object literals** and features like **Arrow Functions** or **Template Strings**. Use compilers like Babel for that._\n\n## How does it work?\nThe module tests the given functions in `fills` (see below) against the window object to check if the browser supports them.\n\nIf not, it creates a link to the API service (i.e.`https://cdn.polyfill.io/v2/polyfill.js?features=fetch`) to load only the needed polyfills.  \nThe script tag is put at the bottom of the page with the `async` attribute.\n\n## How to use?\nNPM: `npm i dynamic-polyfill`  \nYarn: `yarn add dynamic-polyfill`\n\n```js\nimport polyfill from 'dynamic-polyfill';\n// or use require:\n// const polyfill = require('dynamic-polyfill')\n\npolyfill({\n  fills: ['fetch', 'Array.prototype.includes'],\n  options: ['gated', 'always'],\n  minify: false,\n  rum: false,\n  afterFill() {\n    // callback\n  }\n});\n```\n\n### Fills\n`['fetch', 'Array.prototype.includes']` (default: empty)  \n[A list of what can be polyfilled.](https://polyfill.io/v2/docs/features/)  \nPut them in an array of strings.\nIf empty, as default marked features on the website are being used.\n\n### Options\n`['gated', 'always']` (default: empty)\n\n**always**  \n    Polyfill should be included regardless of whether it is required by the user-agent making the request. \n    If there are multiple browser-specific variants of the polyfill, \n    the default one will be used for browser that doesn't actually require the polyfill. \n    In some cases where the only way of implementing a polyfill is to use browser-specific\n    proprietary technology, the default variant may be empty. \n    Use in combination with `gated` to avoid console errors.\n    \n**gated**  \n    If the polyfill is included in the bundle, it will be accompanied by a feature detect, which will only execute the polyfill if the native API is not present.\n\n### Minify\n`true | false` (default: true)  \nSet to false for deeper insight of what is being polyfilled.\n\n\n### Real User Monitoring\n`rum: false` (default: true)  \nAllows the polyfill service to gather performance data about itself using the [resource timing API](https://developer.mozilla.org/en-US/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API) and to perform feature detection to improve our browser targeting.\n\n[More info under `rum`.](https://polyfill.io/v2/docs/api)\n\n\n\u003e The service will default it to true in the future hence the module default choice. Set `rum: false` if you want to opt out.\n\n\n### User Agent\n`agent: 'ie/11.0.0'` (default: empty)  \nUsed to override the `User-Agent` string.  \nSet to `polyfill` to return default polyfill variants of all qualifying features.\nUseful if the polyfill service is being used from the server-side, and in that scenario, this is preferable to setting an inaccurate `User-Agent` header (the `User-Agent` header should properly be set to a string identifying the client you are using to make the request - for server side requests that might be cURL, for example).\n\n\n### User Agent Fallback\n`agentFallback: 'polyfill` (default: empty)  \nWhat to do when the user agent is not recognised.  \nUse caution when setting this argument to `polyfill` on large feature sets, since huge polyfill bundles may cause crashes or lockups in extremely old or underpowered user agents.\n\n\n### After Fill\nPut your modern code in this callback to make sure the polyfills are loaded first.\n\nExample:\n```js\npolyfill({\n  fills: ['fetch'],\n  afterFill() {\n    main();\n  }\n});\n\nfunction main() {\n  fetch(url)\n    .then(res =\u003e res.json());\n}\n```\n\n## Usage in IE8\nFor usage in IE8, you need a polyfill for `Array.prototype.reduce()`.\nYou may copy the polyfill code from [MDN](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce).  \nRun it before **dynamic-polyfill**.\n\nIt is not included in this package to keep it as small as possible.\n\n## Not supported Fills\n* ~html5-elements\n* ~viewport\n\nUse `always` flag for these.  \nThere might be more. I have not tested all of them.  \nIf you find a not supported fill, please leave a quick [issue message on Github](https://github.com/PascalAOMS/dynamic-polyfill/issues).  \nAll the most used fills are supported.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPascalAOMS%2Fdynamic-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPascalAOMS%2Fdynamic-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPascalAOMS%2Fdynamic-polyfill/lists"}