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

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(''));
+      });
+    });
   });
 });

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;

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

@@ -5,12 +5,10 @@
  * @polyfill
  */
 
-/*eslint-disable */
-/*jslint bitwise: true */
+/* eslint-disable */
 
-(function(undefined) {
-  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
-  function findIndex(predicate, context) {
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
+function findIndex(predicate, context) {
   if (this == null) {
     throw new TypeError(
       'Array.prototype.findIndex called on null or undefined'
@@ -27,19 +25,19 @@
     }
   }
   return -1;
-  }
+}
 
-  if (!Array.prototype.findIndex) {
+if (!Array.prototype.findIndex) {
   Object.defineProperty(Array.prototype, 'findIndex', {
     enumerable: false,
     writable: true,
     configurable: true,
     value: findIndex
   });
-  }
+}
 
-  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
-  if (!Array.prototype.find) {
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
+if (!Array.prototype.find) {
   Object.defineProperty(Array.prototype, 'find', {
     enumerable: false,
     writable: true,
@@ -54,5 +52,4 @@
       return index === -1 ? undefined : this[index];
     }
   });
-  }
-})();
+}

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 strict */
+/* eslint-disable */
 
 // Created by running:
 // require('babel-core').buildExternalHelpers('_extends classCallCheck createClass createRawReactElement defineProperty get inherits  interopRequireDefault interopRequireWildcard objectWithoutProperties possibleConstructorReturn slicedToArray taggedTemplateLiteral toArray toConsumableArray '.split(' '))
@@ -16,10 +15,9 @@
 //
 // actually, that's a lie, because babel6 omits _extends and createRawReactElement
 
-(function (global) {
-  var babelHelpers = global.babelHelpers = {};
+var babelHelpers = global.babelHelpers = {};
 
-  babelHelpers.createRawReactElement = (function () {
+babelHelpers.createRawReactElement = (function () {
   var REACT_ELEMENT_TYPE = typeof Symbol === "function" && Symbol.for && Symbol.for("react.element") || 0xeac7;
   return function createRawReactElement(type, key, props) {
     return {
@@ -31,15 +29,15 @@
       _owner: null
     };
   };
-  })();
+})();
 
-  babelHelpers.classCallCheck = function (instance, Constructor) {
+babelHelpers.classCallCheck = function (instance, Constructor) {
   if (!(instance instanceof Constructor)) {
     throw new TypeError("Cannot call a class as a function");
   }
-  };
+};
 
-  babelHelpers.createClass = (function () {
+babelHelpers.createClass = (function () {
   function defineProperties(target, props) {
     for (var i = 0; i < props.length; i++) {
       var descriptor = props[i];
@@ -55,9 +53,9 @@
     if (staticProps) defineProperties(Constructor, staticProps);
     return Constructor;
   };
-  })();
+})();
 
-  babelHelpers.defineProperty = function (obj, key, value) {
+babelHelpers.defineProperty = function (obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -70,9 +68,9 @@
   }
 
   return obj;
-  };
+};
 
-  babelHelpers._extends = babelHelpers.extends = Object.assign || function (target) {
+babelHelpers._extends = babelHelpers.extends = Object.assign || function (target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i];
 
@@ -84,9 +82,9 @@
   }
 
   return target;
-  };
+};
 
-  babelHelpers.get = function get(object, property, receiver) {
+babelHelpers.get = function get(object, property, receiver) {
   if (object === null) object = Function.prototype;
   var desc = Object.getOwnPropertyDescriptor(object, property);
 
@@ -109,9 +107,9 @@
 
     return getter.call(receiver);
   }
-  };
+};
 
-  babelHelpers.inherits = function (subClass, superClass) {
+babelHelpers.inherits = function (subClass, superClass) {
   if (typeof superClass !== "function" && superClass !== null) {
     throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
   }
@@ -125,15 +123,15 @@
     }
   });
   if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-  };
+};
 
-  babelHelpers.interopRequireDefault = function (obj) {
+babelHelpers.interopRequireDefault = function (obj) {
   return obj && obj.__esModule ? obj : {
     default: obj
   };
-  };
+};
 
-  babelHelpers.interopRequireWildcard = function (obj) {
+babelHelpers.interopRequireWildcard = function (obj) {
   if (obj && obj.__esModule) {
     return obj;
   } else {
@@ -148,9 +146,9 @@
     newObj.default = obj;
     return newObj;
   }
-  };
+};
 
-  babelHelpers.objectWithoutProperties = function (obj, keys) {
+babelHelpers.objectWithoutProperties = function (obj, keys) {
   var target = {};
 
   for (var i in obj) {
@@ -160,17 +158,17 @@
   }
 
   return target;
-  };
+};
 
-  babelHelpers.possibleConstructorReturn = function (self, call) {
+babelHelpers.possibleConstructorReturn = function (self, call) {
   if (!self) {
     throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   }
 
   return call && (typeof call === "object" || typeof call === "function") ? call : self;
-  };
+};
 
-  babelHelpers.slicedToArray = (function () {
+babelHelpers.slicedToArray = (function () {
   function sliceIterator(arr, i) {
     var _arr = [];
     var _n = true;
@@ -206,21 +204,21 @@
       throw new TypeError("Invalid attempt to destructure non-iterable instance");
     }
   };
-  })();
+})();
 
-  babelHelpers.taggedTemplateLiteral = function (strings, raw) {
+babelHelpers.taggedTemplateLiteral = function (strings, raw) {
   return Object.freeze(Object.defineProperties(strings, {
     raw: {
       value: Object.freeze(raw)
     }
   }));
-  };
+};
 
-  babelHelpers.toArray = function (arr) {
+babelHelpers.toArray = function (arr) {
   return Array.isArray(arr) ? arr : Array.from(arr);
-  };
+};
 
-  babelHelpers.toConsumableArray = function (arr) {
+babelHelpers.toConsumableArray = function (arr) {
   if (Array.isArray(arr)) {
     for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
 
@@ -228,5 +226,4 @@
   } else {
     return Array.from(arr);
   }
-  };
-})(typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : this);
+};

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

@@ -14,10 +14,9 @@
  * @nolint
  */
 
-(function(global) {
-  'use strict';
+/* eslint-disable */
 
-  var inspect = (function() {
+var inspect = (function() {
   // Copyright Joyent, Inc. and other Node contributors.
   //
   // Permission is hereby granted, free of charge, to any person obtaining a
@@ -354,18 +353,18 @@
   }
 
   return inspect;
-  })();
+})();
 
 
-  var OBJECT_COLUMN_NAME = '(index)';
-  var LOG_LEVELS = {
+var OBJECT_COLUMN_NAME = '(index)';
+var LOG_LEVELS = {
   trace: 0,
   info: 1,
   warn: 2,
   error: 3
-  };
+};
 
-  function setupConsole(global) {
+function setupConsole(global) {
   if (!global.nativeLoggingHook) {
     return;
   }
@@ -497,12 +496,10 @@
       }
     });
   }
-  }
+}
 
-  if (typeof module !== 'undefined') {
+if (typeof module !== 'undefined') {
   module.exports = setupConsole;
-  } else {
+} else {
   setupConsole(global);
-  }
-
-})(this);
+}

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

@@ -13,9 +13,8 @@
  * before any of the modules, this ErrorUtils must be defined (and the handler
  * set) globally before requiring anything.
  */
-/* eslint global-strict:0 */
-(function(global) {
-  var ErrorUtils = {
+/* eslint strict:0 */
+var ErrorUtils = {
   _inGuard: 0,
   _globalHandler: null,
   setGlobalHandler: function(fun) {
@@ -67,20 +66,19 @@
 
     return guarded;
   }
-  };
-  global.ErrorUtils = ErrorUtils;
+};
+global.ErrorUtils = ErrorUtils;
 
-  /**
+/**
  * This is the error handler that is called when we encounter an exception
  * when loading a module. This will report any errors encountered before
  * ExceptionsManager is configured.
  */
-  function setupErrorGuard() {
+function setupErrorGuard() {
   var onError = function(e) {
     global.console.error('Error: ' + e.message + ', stack:\n' + e.stack);
   };
   global.ErrorUtils.setGlobalHandler(onError);
-  }
+}
 
-  setupErrorGuard();
-})(this);
+setupErrorGuard();

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

@@ -1,12 +1,12 @@
-/* eslint global-strict:0 */
-(global => {
-  let loadBundlesOnNative = (bundles) =>
+/* eslint strict:0 */
+
+let loadBundlesOnNative = (bundles) =>
   new Promise((resolve) =>
     require('NativeModules').RCTBundlesLoader.loadBundles(bundles, resolve));
 
-  let requestedBundles = Object.create(null);
+let requestedBundles = Object.create(null);
 
-  /**
+/**
  * Returns a promise that is fulfilled once all the indicated bundles are
  * loaded into memory and injected into the JS engine.
  * This invokation might need to go through the bridge
@@ -20,10 +20,9 @@
  *
  * Note this function should only be invoked by generated code.
  */
-  global.__loadBundles = function(bundles) {
+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) {
@@ -32,19 +31,4 @@
   }
 
   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);
-    });
-  };
-}
+};

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) {

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

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

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

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

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

@@ -1,37 +1,36 @@
 'use strict';
 
-((global) => {
-  const {ErrorUtils, __nativeRequire} = global;
-  global.require = require;
-  global.__d = define;
+const {ErrorUtils, __nativeRequire} = global;
+global.require = require;
+global.__d = define;
 
-  const modules = Object.create(null);
+const modules = Object.create(null);
 
-  const loadModule = ErrorUtils ?
+const loadModule = ErrorUtils ?
   guardedLoadModule : loadModuleImplementation;
 
-  function define(moduleId, factory) {
+function define(moduleId, factory) {
   modules[moduleId] = {
     factory,
     hasError: false,
     exports: undefined,
   };
-  }
+}
 
-  function require(moduleId) {
+function require(moduleId) {
   const module = modules[moduleId];
   return module && module.exports || loadModule(moduleId, module);
-  }
+}
 
-  function guardedLoadModule(moduleId, module) {
+function guardedLoadModule(moduleId, module) {
   try {
     return loadModuleImplementation(moduleId, module);
   } catch (e) {
     ErrorUtils.reportFatalError(e);
   }
-  }
+}
 
-  function loadModuleImplementation(moduleId, module) {
+function loadModuleImplementation(moduleId, module) {
   if (!module) {
     __nativeRequire(moduleId);
     module = modules[moduleId];
@@ -51,23 +50,21 @@
     const moduleObject = {exports};
     factory(global, require, moduleObject, exports);
     return (module.exports = moduleObject.exports);
-    } catch(e) {
+  } catch (e) {
     module.hasError = true;
     module.exports = undefined;
   }
-  }
+}
 
-  function unknownModuleError(id) {
+function unknownModuleError(id) {
   let message = 'Requiring unknown module "' + id + '".';
   if (__DEV__) {
     message +=
       'If you are sure the module is there, try restarting the packager.';
   }
   return Error(message);
-  }
+}
 
-  function moduleThrewError(id) {
+function moduleThrewError(id) {
   return Error('Requiring module "' + id + '", which threw an exception.');
-  }
-
-})(this);
+}

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

@@ -1,9 +1,8 @@
 /* eslint strict:0 */
-(function(global) {
-  var modules = Object.create(null);
-  var inGuard = false;
+var modules = Object.create(null);
+var inGuard = false;
 
-  function define(id, factory) {
+function define(id, factory) {
   modules[id] = {
     factory,
     module: {exports: {}},
@@ -21,18 +20,18 @@
       }
     });
   }
-  }
+}
 
-  function require(id) {
+function require(id) {
   var mod = modules[id];
   if (mod && mod.isInitialized) {
     return mod.module.exports;
   }
 
   return requireImpl(id);
-  }
+}
 
-  function requireImpl(id) {
+function requireImpl(id) {
   if (global.ErrorUtils && !inGuard) {
     inGuard = true;
     var returnValue;
@@ -79,22 +78,22 @@
   }
 
   return mod.module.exports;
-  }
+}
 
-  const Systrace = __DEV__ && (() => {
+const Systrace = __DEV__ && (() => {
   var _Systrace;
   try {
     _Systrace = require('Systrace');
-    } catch(e) {}
+  } catch (e) {}
 
   return _Systrace && _Systrace.beginEvent ?
     _Systrace : { beginEvent: () => {}, endEvent: () => {} };
-  });
+});
 
-  global.__d = define;
-  global.require = require;
+global.__d = define;
+global.require = require;
 
-  if (__DEV__) { // HMR
+if (__DEV__) { // HMR
   function accept(id, factory) {
     var mod = modules[id];
 
@@ -126,5 +125,4 @@
   }
 
   global.__accept = accept;
-  }
-})(this);
+}

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();`

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));