lemon-polyfills v0.0.16
@shopify/polyfills
Blessed polyfills for web platform features. Exports browser and node polyfills where appropriate.
The following polyfills are currently exported:
baseline
- The minimum required polyfills for a Shopify app to work in a legacy browser. This includes:unhandled-rejection
fetch
baseline.node
- The minimum required polyfills for a Shopify app to work in node. This includes:fetch
fetch
(fetch.node
): Polyfills whatwg-fetch in the browser and node-fetch in nodeurl
(url.node
): Polyfills URLSearchParamsintl
: Browser only, polyfills Intl.PluralRulesintersection-observer
: Browser only, polyfillsIntersectionObserver
Installation
$ yarn add @shopify/polyfills
Usage
No index file is exported. You must specify the polyfills that you actually need in your project.
In a project:
import '@shopify/polyfills/baseline';
import '@shopify/polyfills/url';
Module Bundler Configuration
This module also provides a way to configure your bundler to remap polyfill imports based on the environment being built for. For example, if you are building for node, you can have your bundler remap @shopify/polyfills/fetch
to @shopify/polyfills/fetch.node
. This allows you to maintain only one list of polyfills in your app codebase. Sewing-kit will perform this translation for you automatically.
For this example usage, we will use webpack.
import {mappedPolyfillsForEnv} from '@shopify/polyfills/config';
module.exports = {
resolve: {
alias: {
...mappedPolyfillsForEnv(env.isServer ? 'node' : env.supportedBrowsers),
},
},
};
The argument for mappedPolyfillsForEnv
can be either 'node'
or a string (or array of strings) provided by the browserslist
module. These will then be run through caniuse
to determine if each polyfill is required for that particular browser or combination of browsers. If it is not, imports for that polyfill will be no-op.
You can use this to build two (or more) browser bundles that contain different amounts of polyfills to serve to different browsers. Note, however, that this would also require server support to serve a different built bundle based on a request's user agent.