shopify-polyfills-beta
Advanced tools
Comparing version
import '@babel/polyfill'; | ||
import './fetch'; | ||
import '@shopify/polyfills/fetch'; |
@@ -5,3 +5,3 @@ "use strict"; | ||
var browser_unhandled_rejection_1 = require("browser-unhandled-rejection"); | ||
require("./fetch"); | ||
require("@shopify/polyfills/fetch"); | ||
browser_unhandled_rejection_1.auto(); |
import '@babel/polyfill'; | ||
import './fetch.node'; | ||
import '@shopify/polyfills/fetch.node'; |
@@ -5,2 +5,2 @@ "use strict"; | ||
// eslint-disable-next-line import/extensions | ||
require("./fetch.node"); | ||
require("@shopify/polyfills/fetch.node"); |
@@ -12,2 +12,6 @@ # Changelog | ||
- `@shopify/polyfills` package | ||
- Added `@shopify/polyfills/config` | ||
- Added `intl` | ||
- Added `url` | ||
- Added `fetch` | ||
- Added `baseline` |
"use strict"; | ||
var __read = (this && this.__read) || function (o, n) { | ||
var m = typeof Symbol === "function" && o[Symbol.iterator]; | ||
if (!m) return o; | ||
var i = m.call(o), r, ar = [], e; | ||
try { | ||
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value); | ||
} | ||
catch (error) { e = { error: error }; } | ||
finally { | ||
try { | ||
if (r && !r.done && (m = i["return"])) m.call(i); | ||
} | ||
finally { if (e) throw e.error; } | ||
} | ||
return ar; | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var tslib_1 = require("tslib"); | ||
var caniuse_api_1 = require("caniuse-api"); | ||
@@ -38,8 +23,7 @@ exports.polyfills = { | ||
function mappedPolyfillsForEnv(browser) { | ||
var mappedPolyfills = {}; | ||
Object.entries(exports.polyfills).forEach(function (_a) { | ||
var _b = __read(_a, 2), polyfill = _b[0], _c = _b[1], supportsNode = _c.supportsNode, featureTest = _c.featureTest; | ||
return Object.entries(exports.polyfills).reduce(function (mappedPolyfills, _a) { | ||
var _b = tslib_1.__read(_a, 2), polyfill = _b[0], _c = _b[1], supportsNode = _c.supportsNode, featureTest = _c.featureTest; | ||
var mapFrom = "@shopify/polyfills/" + polyfill + "$"; | ||
var mapToPrefix = "shopify-polyfills-beta"; | ||
var noop = "shopify-polyfills-beta/noop"; | ||
var mapToPrefix = "@shopify/polyfills"; | ||
var noop = "@shopify/polyfills/noop"; | ||
if (browser === 'node') { | ||
@@ -59,5 +43,5 @@ mappedPolyfills[mapFrom] = supportsNode | ||
} | ||
}); | ||
return mappedPolyfills; | ||
return mappedPolyfills; | ||
}, {}); | ||
} | ||
exports.mappedPolyfillsForEnv = mappedPolyfillsForEnv; |
{ | ||
"name": "shopify-polyfills-beta", | ||
"version": "0.0.1-beta.8", | ||
"version": "0.0.4-beta.3", | ||
"license": "MIT", | ||
"description": "Blessed polyfills for web platform features.", | ||
"main": "index.js", | ||
"types": "index.d.ts", | ||
"sideEffects": true, | ||
@@ -32,2 +30,3 @@ "scripts": { | ||
"isomorphic-fetch": "^2.2.1", | ||
"tslib": "^1.9.3", | ||
"url-search-params-polyfill": "^5.0.0", | ||
@@ -39,3 +38,7 @@ "whatwg-fetch": "^3.0.0" | ||
"typescript": "~3.0.1" | ||
} | ||
}, | ||
"files": [ | ||
"*.js", | ||
"*.d.ts" | ||
] | ||
} |
# `@shopify/polyfills` | ||
[](https://travis-ci.org/Shopify/quilt) | ||
[](LICENSE.md) [](https://badge.fury.io/js/%40shopify%2Fpolyfills.svg) [](https://img.shields.io/bundlephobia/minzip/@shopify/polyfills.svg) | ||
[](LICENSE.md) [](https://badge.fury.io/js/%40shopify%2Fpolyfills.svg) [](https://img.shields.io/bundlephobia/minzip/@shopify/polyfills.svg) | ||
Blessed polyfills for web platform features. | ||
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: | ||
- `@babel/polyfill` | ||
- `unhandled-rejection` | ||
- `fetch` | ||
- `baseline.node` - The minimum required polyfills for a Shopify app to work in node. This includes: | ||
- `@babel/polyfill` | ||
- `fetch` | ||
- `fetch` (`fetch.node`): Polyfills whatwg-fetch in the browser and isomorphic-fetch in node | ||
- `url` (`url.node`): Polyfills URLSearchParams | ||
- `intl`: Browser only, polyfills Intl.PluralRules | ||
## Installation | ||
@@ -15,1 +28,32 @@ | ||
## Usage | ||
**No index file is exported.** You must specify the polyfills that you actually need in your project. | ||
In a project: | ||
```typescript | ||
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. | ||
```typescript | ||
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 required server support to serve a different built bundle based on a request's user agent. |
59
293.33%7583
-25.03%8
14.29%21
-34.37%99
-49.75%+ Added
+ Added