Polifyll
As a design decision, we decided against any kind of polyfill in our code. This not only benefits the codebase, but also makes testing easier.
A more effective way to compensate for incompatibilities is to add missing functionality via external polyfills.
To avoid having to search for and include every polyfill yourself, you can use services like polyfill.io. These can inject the missing functions and objects for each browser.
The URL builder can be used to compile the desired polyfills.
You can also automate the creation of the URL. For this you can install the tool create-polyfill-service-url.
With the following call the tool analyzes your script and throws out the desired URL.
npm i create-polyfill-service-url
With the following call the tool analyzes your script and throws out the desired URL.
npx create-polyfill-service-url analyse --file bundle.js
bundle.js is here the file that contains your code.
The result is a URL that you can easily paste into your HTML web page.
For Monster, the following code can currently be used in the header of an HTML page.
Firefox also needs the polyfill construct-style-sheets-polyfill for
the monster components for the constructable stylesheets.
<script id="polyfill"
src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.entries,Array.prototype.filter,Array.prototype.forEach,Array.prototype.indexOf,Array.prototype.map,document,Event,fetch,IntersectionObserver,JSON,Map,MutationObserver,Object.assign,Object.entries,Promise,ResizeObserver,Set,String.prototype.trim,Symbol,Symbol.iterator,URL,WeakMap,WeakSet"
crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/es-module-shims.min.js"
referrerpolicy="no-referrer"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/adoptedStyleSheets.min.js"
referrerpolicy="no-referrer"
crossorigin="anonymous"></script>