Make the packager work with babel strict mode transform

Summary:
At the moment we have to disable strict mode for the transform-es2015-modules-commonjs because strict mode leaks to the global scope and breaks the bridge. It was due to the way the polyfills were bundled in the package. To fix it, I wrapped the polyfill modules in an IIFE. Then when strict mode was enabled some polyfills were broken due to strict mode errors so that was fixed too. Also removed the IIFE from the polyfills that included one.

This diff doesn't enable the strict mode transform since some internal facebook modules depend on it not being enabled. When #5214 lands we could make the default babel config shipped with OSS react-native use strict mode modules and facebook could just modify the babel config to disable it if needed.

This will allow removing `"strict": false` from https://github.com/facebook/react-native/blob/master/packager/react-packager/.babelrc#L16

Fixes #5316
Closes https://github.com/facebook/react-native/pull/5422

Reviewed By: svcscm

Differential Revision: D2846422

Pulled By: davidaurelio

fb-gh-sync-id: a3e2f8909aa87dabab2b872c61b887e80220fb56

Libraries/JavaScriptAppEngine/Initialization/InitializeJavaScriptAppEngine.js

@@ -25,11 +25,11 @@
 require('regenerator/runtime');
 
 if (typeof GLOBAL === 'undefined') {
-  GLOBAL = this;
+  global.GLOBAL = this;
 }
 
 if (typeof window === 'undefined') {
-  window = GLOBAL;
+  global.window = GLOBAL;
 }
 
 function setUpConsole() {
@@ -70,6 +70,15 @@ function polyfillGlobal(name, newValue, scope = GLOBAL) {
   Object.defineProperty(scope, name, {...descriptor, value: newValue});
 }
 
+/**
+ * Polyfill a module if it is not already defined in `scope`.
+ */
+function polyfillIfNeeded(name, polyfill, scope = GLOBAL, descriptor = {}) {
+  if (scope[name] === undefined) {
+    Object.defineProperty(scope, name, {...descriptor, value: polyfill});
+  }
+}
+
 function setUpErrorHandler() {
   if (global.__fbDisableExceptionsManager) {
     return;
@@ -146,7 +155,11 @@ function setUpXHR() {
 }
 
 function setUpGeolocation() {
-  GLOBAL.navigator = GLOBAL.navigator || {};
+  polyfillIfNeeded('navigator', {}, GLOBAL, {
+    writable: true,
+    enumerable: true,
+    configurable: true,
+  });
   polyfillGlobal('geolocation', require('Geolocation'), GLOBAL.navigator);
 }
 
@@ -179,9 +192,9 @@ function setUpProcessEnv() {
 }
 
 function setUpNumber() {
-  Number.EPSILON = Number.EPSILON || Math.pow(2, -52);
+  polyfillIfNeeded('EPSILON', Math.pow(2, -52), Number);
-  Number.MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER || Math.pow(2, 53) - 1;
+  polyfillIfNeeded('MAX_SAFE_INTEGER', Math.pow(2, 53) - 1, Number);
-  Number.MIN_SAFE_INTEGER = Number.MIN_SAFE_INTEGER || -(Math.pow(2, 53) - 1);
+  polyfillIfNeeded('MIN_SAFE_INTEGER', -(Math.pow(2, 53) - 1), Number);
 }
 
 function setUpDevTools() {

Libraries/JavaScriptAppEngine/polyfills/document.js

@@ -1,9 +1,6 @@
-/* eslint global-strict: 0 */
+/* eslint strict: 0 */
-(function(GLOBAL) {
+
-  /**
+// TODO: Remove document polyfill now that chrome debugging is in a web worker.
-   * The document must be shimmed before anything else that might define the
-   * `ExecutionEnvironment` module (which checks for `document.createElement`).
-   */
 
 // The browser defines Text and Image globals by default. If you forget to
 // require them, then the error message is very confusing.
@@ -13,22 +10,21 @@
     'React element. You probably forgot to require ' + name + '.'
   );
 }
-  GLOBAL.Text = {
+global.Text = {
   get defaultProps() {
     throw getInvalidGlobalUseError('Text');
   }
 };
-  GLOBAL.Image = {
+global.Image = {
   get defaultProps() {
     throw getInvalidGlobalUseError('Image');
   }
 };
 // Force `ExecutionEnvironment.canUseDOM` to be false.
-  if (GLOBAL.document) {
+if (global.document) {
-    GLOBAL.document.createElement = null;
+  global.document.createElement = null;
 }
 
 // There is no DOM so MutationObserver doesn't make sense. It is used
 // as feature detection in Bluebird Promise implementation
-  GLOBAL.MutationObserver = undefined;
+global.MutationObserver = undefined;
-})(this);

Libraries/vendor/emitter/mixInEventEmitter.js

@@ -49,12 +49,13 @@ var TYPES_KEY = keyOf({__types: true});
  */
 function mixInEventEmitter(klass, types) {
   invariant(types, 'Must supply set of valid event types');
-  invariant(!this.__eventEmitter, 'An active emitter is already mixed in');
 
   // If this is a constructor, write to the prototype, otherwise write to the
   // singleton object.
   var target = klass.prototype || klass;
 
+  invariant(!target.__eventEmitter, 'An active emitter is already mixed in');
+
   var ctor = klass.constructor;
   if (ctor) {
     invariant(

packager/react-packager/src/Resolver/__tests__/Resolver-test.js

@@ -58,6 +58,14 @@ describe('Resolver', function() {
     return module;
   }
 
+  function createPolyfill(id, dependencies) {
+    var polyfill = new Polyfill({});
+    polyfill.getName.mockImpl(() => Promise.resolve(id));
+    polyfill.getDependencies.mockImpl(() => Promise.resolve(dependencies));
+    polyfill.isPolyfill.mockReturnValue(true);
+    return polyfill;
+  }
+
   describe('getDependencies', function() {
     pit('should get dependencies with polyfills', function() {
       var module = createModule('index');
@@ -1020,5 +1028,26 @@ describe('Resolver', function() {
         ].join('\n'));
       });
     });
+
+    pit('should resolve polyfills', function () {
+      const depResolver = new Resolver({
+        projectRoot: '/root',
+      });
+      const polyfill = createPolyfill('test polyfill', []);
+      const code = [
+        'global.fetch = () => 1;',
+      ].join('');
+      return depResolver.wrapModule(
+        null,
+        polyfill,
+        code
+      ).then(processedCode => {
+        expect(processedCode.code).toEqual([
+          '(function(global) {',
+          'global.fetch = () => 1;',
+          "\n})(typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : this);",
+        ].join(''));
+      });
+    });
   });
 });

packager/react-packager/src/Resolver/index.js

@@ -214,7 +214,9 @@ class Resolver {
 
   wrapModule(resolutionResponse, module, code) {
     if (module.isPolyfill()) {
-      return Promise.resolve({code});
+      return Promise.resolve({
+        code: definePolyfillCode(code),
+      });
     }
 
     return this.resolveRequires(resolutionResponse, module, code).then(
@@ -239,4 +241,12 @@ function defineModuleCode(moduleName, code) {
   ].join('');
 }
 
+function definePolyfillCode(code) {
+  return [
+    '(function(global) {',
+    code,
+    `\n})(typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : this);`,
+  ].join('');
+}
+
 module.exports = Resolver;

packager/react-packager/src/Resolver/polyfills/Array.prototype.es6.js

@@ -6,9 +6,7 @@
  */
 
 /* eslint-disable */
-/*jslint bitwise: true */
 
-(function(undefined) {
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
 function findIndex(predicate, context) {
   if (this == null) {
@@ -55,4 +53,3 @@
     }
   });
 }
-})();

packager/react-packager/src/Resolver/polyfills/babelHelpers.js

@@ -7,8 +7,7 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 
-/* global self:true */
+/* eslint-disable */
-/* eslint-disable strict */
 
 // Created by running:
 // require('babel-core').buildExternalHelpers('_extends classCallCheck createClass createRawReactElement defineProperty get inherits  interopRequireDefault interopRequireWildcard objectWithoutProperties possibleConstructorReturn slicedToArray taggedTemplateLiteral toArray toConsumableArray '.split(' '))
@@ -16,7 +15,6 @@
 //
 // actually, that's a lie, because babel6 omits _extends and createRawReactElement
 
-(function (global) {
 var babelHelpers = global.babelHelpers = {};
 
 babelHelpers.createRawReactElement = (function () {
@@ -229,4 +227,3 @@
     return Array.from(arr);
   }
 };
-})(typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : this);

packager/react-packager/src/Resolver/polyfills/console.js

@@ -14,8 +14,7 @@
  * @nolint
  */
 
-(function(global) {
+/* eslint-disable */
-  'use strict';
 
 var inspect = (function() {
   // Copyright Joyent, Inc. and other Node contributors.
@@ -504,5 +503,3 @@
 } else {
   setupConsole(global);
 }
-
-})(this);

packager/react-packager/src/Resolver/polyfills/error-guard.js

@@ -13,8 +13,7 @@
  * before any of the modules, this ErrorUtils must be defined (and the handler
  * set) globally before requiring anything.
  */
-/* eslint global-strict:0 */
+/* eslint strict:0 */
-(function(global) {
 var ErrorUtils = {
   _inGuard: 0,
   _globalHandler: null,
@@ -83,4 +82,3 @@
 }
 
 setupErrorGuard();
-})(this);

packager/react-packager/src/Resolver/polyfills/loadBundles.js

@@ -1,5 +1,5 @@
-/* eslint global-strict:0 */
+/* eslint strict:0 */
-(global => {
+
 let loadBundlesOnNative = (bundles) =>
   new Promise((resolve) =>
     require('NativeModules').RCTBundlesLoader.loadBundles(bundles, resolve));
@@ -23,7 +23,6 @@
 global.__loadBundles = function(bundles) {
   // split bundles by whether they've already been requested or not
   const bundlesToRequest = bundles.filter(b => !requestedBundles[b]);
-    const bundlesAlreadyRequested = bundles.filter(b => !!requestedBundles[b]);
 
   // keep a reference to the promise loading each bundle
   if (bundlesToRequest.length > 0) {
@@ -33,18 +32,3 @@
 
   return Promise.all(bundles.map(bundle => requestedBundles[bundle]));
 };
-})(global);
-
-
-// turns a callback async based function into a promised based one
-function promisify(fn) {
-  return function() {
-    var self = this;
-    var args = Array.prototype.slice.call(arguments);
-
-    return new Promise((resolve, reject) => {
-      args.push(resolve);
-      fn.apply(self, args);
-    });
-  };
-}

packager/react-packager/src/Resolver/polyfills/polyfills.js

@@ -15,7 +15,7 @@
 
 // WARNING: This is an optimized version that fails on hasOwnProperty checks
 // and non objects. It's not spec-compliant. It's a perf optimization.
-/* eslint global-strict:0 */
+/* eslint strict:0 */
 Object.assign = function(target, sources) {
   if (__DEV__) {
     if (target == null) {

packager/react-packager/src/Resolver/polyfills/prelude.js

@@ -1,5 +1,4 @@
-/* eslint global-strict:0 */
+/* eslint strict:0 */
-__DEV__ = false;
+global.__DEV__ = false;
 
-/* global __BUNDLE_START_TIME__:true */
+global.__BUNDLE_START_TIME__ = Date.now();
-__BUNDLE_START_TIME__ = Date.now();

packager/react-packager/src/Resolver/polyfills/prelude_dev.js

@@ -1,5 +1,4 @@
-/* eslint global-strict:0 */
+/* eslint strict:0 */
-__DEV__ = true;
+global.__DEV__ = true;
 
-/* global __BUNDLE_START_TIME__:true */
+global.__BUNDLE_START_TIME__ = Date.now();
-__BUNDLE_START_TIME__ = Date.now();

packager/react-packager/src/Resolver/polyfills/require-unbundle.js

@@ -1,6 +1,5 @@
 'use strict';
 
-((global) => {
 const {ErrorUtils, __nativeRequire} = global;
 global.require = require;
 global.__d = define;
@@ -69,5 +68,3 @@
 function moduleThrewError(id) {
   return Error('Requiring module "' + id + '", which threw an exception.');
 }
-
-})(this);

packager/react-packager/src/Resolver/polyfills/require.js

@@ -1,5 +1,4 @@
 /* eslint strict:0 */
-(function(global) {
 var modules = Object.create(null);
 var inGuard = false;
 
@@ -127,4 +126,3 @@
 
   global.__accept = accept;
 }
-})(this);

packager/react-packager/src/transforms/whole-program-optimisations/__tests__/dead-module-elimination-test.js

@@ -33,7 +33,7 @@ const trim = (str) =>
 describe('dead-module-elimination', () => {
   it('should inline __DEV__', () => {
     compare(
-      `__DEV__ = false;
+      `global.__DEV__ = false;
       var foo = __DEV__;`,
       `var foo = false;`
     );
@@ -41,7 +41,7 @@ describe('dead-module-elimination', () => {
 
   it('should accept unary operators with literals', () => {
     compare(
-      `__DEV__ = !1;
+      `global.__DEV__ = !1;
       var foo = __DEV__;`,
       `var foo = false;`
     );
@@ -49,7 +49,7 @@ describe('dead-module-elimination', () => {
 
   it('should kill dead branches', () => {
     compare(
-      `__DEV__ = false;
+      `global.__DEV__ = false;
       if (__DEV__) {
         doSomething();
       }`,
@@ -74,7 +74,7 @@ describe('dead-module-elimination', () => {
 
   it('should kill modules referenced only from dead branches', () => {
     compare(
-      `__DEV__ = false;
+      `global.__DEV__ = false;
       __d('bar', function() {});
       if (__DEV__) { require('bar'); }`,
       ``
@@ -83,7 +83,7 @@ describe('dead-module-elimination', () => {
 
   it('should replace logical expressions with the result', () => {
     compare(
-      `__DEV__ = false;
+      `global.__DEV__ = false;
       __d('bar', function() {});
       __DEV__ && require('bar');`,
       `false;`
@@ -92,7 +92,7 @@ describe('dead-module-elimination', () => {
 
   it('should keep if result branch', () => {
     compare(
-      `__DEV__ = false;
+      `global.__DEV__ = false;
       __d('bar', function() {});
       if (__DEV__) {
         killWithFire();
@@ -106,7 +106,7 @@ describe('dead-module-elimination', () => {
 
   it('should replace falsy ternaries with alternate expression', () => {
     compare(
-      `__DEV__ = false;
+      `global.__DEV__ = false;
       __DEV__ ? foo() : bar();
       `,
       `bar();`

packager/react-packager/src/transforms/whole-program-optimisations/dead-module-elimination.js

@@ -60,7 +60,12 @@ module.exports = function () {
     AssignmentExpression(path) {
       const { node } = path;
 
-      if (node.left.type === 'Identifier' && node.left.name === '__DEV__') {
+      if (
+        node.left.type === 'MemberExpression' &&
+        node.left.object.name === 'global' &&
+        node.left.property.type === 'Identifier' &&
+        node.left.property.name === '__DEV__'
+      ) {
         var value;
         if (node.right.type === 'BooleanLiteral') {
           value = node.right.value;
@@ -73,7 +78,7 @@ module.exports = function () {
         } else {
           return;
         }
-        globals[node.left.name] = value;
+        globals[node.left.property.name] = value;
 
         // workaround babel/source map bug - the minifier should strip it
         path.replaceWith(t.booleanLiteral(value));