Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RFC: Do not include package-local polyfills. #1870

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions docs/modern/Introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,32 @@ Run the Relay Compiler after making changes to any GraphQL in your Relay applica
Then after making edits to your application files, just run `yarn run relay` to generate new files, or `yarn run relay -- --watch` to run the compiler as a long-lived process which automatically generates new files whenever you save.


## JavaScript environment requirements

The Relay Modern packages distributed on NPM use the widely-supported ES5
version of JavaScript to support as many browser environments as possible.

However, Relay Modern expects modern JavaScript global types (`Map`, `Set`,
`Promise`, `Object.assign`) to be defined. If you support older browsers and
devices which may not yet provide these natively, consider including a global
polyfill in your bundled application, such as [core-js][] or
[babel-polyfill](https://babeljs.io/docs/usage/polyfill/).

A polyfilled environment for Relay using [core-js][] to support older browsers
might look like:

```js
require('core-js/es6/map');
require('core-js/es6/set');
require('core-js/es6/promise');
require('core-js/es6/object');

require('./myRelayApplication');
```

[core-js]: https://github.com/zloirock/core-js


## Migrating to Relay Modern

Migrating a Relay Classic app to Relay Modern doesn't require rewriting from
Expand Down
15 changes: 2 additions & 13 deletions gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,6 @@ const babelOptions = require('./scripts/getBabelOptions')({
'babel-core': 'babel-core',
'babel-generator': 'babel-generator',
'babel-polyfill': 'babel-polyfill',
'babel-runtime/core-js/array/from': 'babel-runtime/core-js/array/from',
'babel-runtime/core-js/json/stringify': 'babel-runtime/core-js/json/stringify',
'babel-runtime/core-js/map': 'babel-runtime/core-js/map',
'babel-runtime/core-js/object/assign': 'babel-runtime/core-js/object/assign',
'babel-runtime/core-js/object/freeze': 'babel-runtime/core-js/object/freeze',
'babel-runtime/core-js/object/get-own-property-names': 'babel-runtime/core-js/object/get-own-property-names',
'babel-runtime/core-js/object/is-frozen': 'babel-runtime/core-js/object/is-frozen',
'babel-runtime/core-js/object/keys': 'babel-runtime/core-js/object/keys',
'babel-runtime/core-js/object/values': 'babel-runtime/core-js/object/values',
'babel-runtime/core-js/promise': 'fbjs/lib/Promise',
'babel-runtime/core-js/set': 'babel-runtime/core-js/set',
'babel-runtime/core-js/weak-map': 'babel-runtime/core-js/weak-map',
'babel-runtime/helpers/asyncToGenerator': 'babel-runtime/helpers/asyncToGenerator',
'babel-runtime/helpers/classCallCheck': 'babel-runtime/helpers/classCallCheck',
'babel-runtime/helpers/defineProperty': 'babel-runtime/helpers/defineProperty',
Expand All @@ -42,6 +30,7 @@ const babelOptions = require('./scripts/getBabelOptions')({
'fb-watchman': 'fb-watchman',
'fs': 'fs',
'graphql': 'graphql',
'immutable': 'immutable',
'net': 'net',
'path': 'path',
'prop-types': 'prop-types',
Expand All @@ -56,7 +45,7 @@ const babelOptions = require('./scripts/getBabelOptions')({
},
plugins: [
'transform-flow-strip-types',
'transform-runtime',
['transform-runtime', {'polyfill': false}],
],
postPlugins: [
'transform-async-to-generator',
Expand Down
21 changes: 14 additions & 7 deletions packages/react-relay/classic/ReactRelayClassicExports.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,21 @@ const RelayDefaultNetworkLayer = require('RelayDefaultNetworkLayer');
const RelayPublic = require('RelayPublic');
const RelayStore = require('RelayStore');

const warning = require('warning');

// As early as possible, check for the existence of the JavaScript globals which
// React Relay relies upon, and produce a clear message if they do not exist.
if (__DEV__) {
warning(
typeof Promise === 'function' && Array.prototype.find,
'Relay relies on polyfills for ES6 features in older browsers. ' +
'Babel provides a good one: https://babeljs.io/docs/usage/polyfill/',
);
if (
typeof Map !== 'function' ||
typeof Set !== 'function' ||
typeof Promise !== 'function' ||
typeof Object.assign !== 'function' ||
typeof Array.prototype.find !== 'function'
) {
throw new Error(
'react-relay requires Map, Set, Promise, Object.assign, and Array#find ' +
'to exist. Use a polyfill to provide these for older browsers.',
);
}
}

// By default, assume that GraphQL is served at `/graphql` on the same domain.
Expand Down
16 changes: 16 additions & 0 deletions packages/relay-runtime/RelayRuntime.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,22 @@ export type {
ConcreteFragment,
} from 'RelayConcreteNode';

// As early as possible, check for the existence of the JavaScript globals which
// Relay Runtime relies upon, and produce a clear message if they do not exist.
if (__DEV__) {
if (
typeof Map !== 'function' ||
typeof Set !== 'function' ||
typeof Promise !== 'function' ||
typeof Object.assign !== 'function'
) {
throw new Error(
'relay-runtime requires Map, Set, Promise, and Object.assign to exist. ' +
'Use a polyfill to provide these for older browsers.',
);
}
}

/**
* The public interface to Relay Runtime.
*/
Expand Down
4 changes: 2 additions & 2 deletions scripts/getBabelOptions.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ module.exports = function(options) {
}, options);

const fbjsPreset = require('babel-preset-fbjs/configure')({
autoImport: true,
autoImport: options.autoImport || false,
objectAssign: false,
inlineRequires: true,
rewriteModules: {
map: assign({},
require('fbjs-scripts/third-party-module-map'),
require('fbjs/module-map'),
options.moduleMap
),
Expand Down
3 changes: 3 additions & 0 deletions scripts/jest/preprocessor.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,10 @@ const SCHEMA_PATH = path.resolve(__dirname, '../../packages/relay-compiler/testu

const babelOptions = getBabelOptions({
env: 'test',
// Tests use a Promise polfill so they can use jest.runAllTimers().
autoImport: true,
moduleMap: {
'immutable': 'immutable',
'React': 'react',
'reactComponentExpect': 'react-dom/lib/reactComponentExpect',
'ReactDOM': 'react-dom',
Expand Down