Move HMR to internal transform

Summary:
public

We want to support Hot Loading on the packager itself instead of on the transformer. This will allow us to enable it on OSS (and for any scripting language, yay!).

For now to enable Hot Loading the packager's internals transforms need to be manually enabled (start packager with `--enable-internal-transforms`). I think the internal pipeline should always be enabled as it doesn't affect performance if there're no transforms and the user can disable Hot Loading through the setting on the app though. I'll tweak this on a follow up commit.

Reviewed By: vjeux

Differential Revision: D2801343

fb-gh-sync-id: 563984d77b10c3925fda6fd5616b814cdbea2c66

Author: martinbigio

local-cli/server/runServer.js

@@ -68,7 +68,6 @@ function getAppMiddleware(args, config) {
     cacheVersion: '3',
     getTransformOptionsModulePath: config.getTransformOptionsModulePath,
     transformModulePath: transformerPath,
-    enableInternalTransforms: args['enable-internal-transforms'],
     assetRoots: args.assetRoots,
     assetExts: ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp'],
     resetCache: args.resetCache || args['reset-cache'],

local-cli/server/server.js

@@ -53,10 +53,6 @@ function _server(argv, config, resolve, reject) {
     type: 'string',
     default: require.resolve('../../packager/transformer'),
     description: 'Specify a custom transformer to be used (absolute path)'
-  }, {
-    command: 'enable-internal-transforms',
-    type: 'boolean',
-    default: false
   }, {
     command: 'resetCache',
     description: 'Removes cached files',

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

@@ -56,10 +56,6 @@ const validateOpts = declareOpts({
     type:'string',
     required: false,
   },
-  enableInternalTransforms: {
-    type: 'boolean',
-    default: false,
-  },
   nonPersistent: {
     type: 'boolean',
     default: false,
@@ -135,7 +131,6 @@ class Bundler {
       blacklistRE: opts.blacklistRE,
       cache: this._cache,
       transformModulePath: opts.transformModulePath,
-      enableInternalTransforms: opts.enableInternalTransforms,
     });
 
     this._projectRoots = opts.projectRoots;

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

@@ -53,10 +53,6 @@ const validateOpts = declareOpts({
     type: 'number',
     default: DEFAULT_MAX_CALL_TIME,
   },
-  enableInternalTransforms: {
-    type: 'boolean',
-    default: false,
-  },
 });
 
 class Transformer {
@@ -65,7 +61,6 @@ class Transformer {
 
     this._cache = opts.cache;
     this._transformModulePath = opts.transformModulePath;
-    this._enableInternalTransforms = opts.enableInternalTransforms;
 
     if (opts.transformModulePath != null) {
       this._workers = workerFarm({
@@ -111,7 +106,6 @@ class Transformer {
             options: {
               ...options,
               externalTransformModulePath: this._transformModulePath,
-              enableInternalTransforms: this._enableInternalTransforms,
             },
           }).then(res => {
             if (res.error) {

packager/react-packager/src/JSTransformer/worker.js

@@ -22,7 +22,7 @@ function internalTransforms(sourceCode, filename, options) {
     filename: filename,
     sourceFileName: filename,
     sourceMaps: false,
-    plugins: Transforms.getAll()
+    plugins: Transforms.getAll(options)
   });
 
   return {
@@ -37,16 +37,11 @@ function onExternalTransformDone(data, callback, error, externalOutput) {
     return;
   }
 
-  var result;
-  if (data.options.enableInternalTransforms) {
-    result = internalTransforms(
-      externalOutput.code,
-      externalOutput.filename,
-      data.options
-    );
-  } else {
-    result = externalOutput;
-  }
+  var result = internalTransforms(
+    externalOutput.code,
+    externalOutput.filename,
+    data.options
+  );
 
   callback(null, result);
 }

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

@@ -52,10 +52,6 @@ const validateOpts = declareOpts({
     type: 'boolean',
     default: false,
   },
-  enableInternalTransforms: {
-    type: 'boolean',
-    default: false,
-  },
   assetRoots: {
     type: 'array',
     required: false,

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

@@ -8,9 +8,26 @@
  */
 'use strict';
 
-exports.getAll = function() {
-  return [
-    require('./babel-plugin-system-import'),
-  ];
+exports.getAll = function(options) {
+  var plugins = [];
+  if (options.hot) {
+    plugins = plugins.concat([
+      [
+        'react-transform',
+        {
+          transforms: [{
+            transform: 'react-transform-hmr/lib/index.js',
+            imports: ['React'],
+            locals: ['module'],
+          }]
+        },
+      ],
+      'transform-es2015-block-scoping',
+      'transform-es2015-constants',
+      ['transform-es2015-modules-commonjs', {strict: false, allowTopLevelThis: true}],
+    ]);
+  }
+
+  return plugins;
 };
 

packager/transformer.js

@@ -54,8 +54,6 @@ function transform(src, filename, options) {
     return plugin;
   });
 
-  config.plugins = config.plugins.concat(ReactPackager.getTransforms());
-
   const result = babel.transform(src, Object.assign({}, babelRC, config));
 
   return {