Make Hot Loading work on OSS

martinbigio · facebook-github-bot-9 · commit bba35f0415fa · 2016-01-14T19:33:42.000-08:00
Summary:
public

- Tweak OSS server to enable the HMR connection
- Remove client gating code.
- Resolve internal transforms plugins

After this diff, Hot Loading should work on OSS.

Reviewed By: javache

Differential Revision: D2803620

fb-gh-sync-id: b678180c884d2bfaf454edf9e7abe6b3b3b32ebe
diff --git a/local-cli/server/runServer.js b/local-cli/server/runServer.js
@@ -8,6 +8,7 @@
  */
 'use strict';
 
+const attachHMRServer = require('./util/attachHMRServer');
 const connect = require('connect');
 const cpuProfilerMiddleware = require('./middleware/cpuProfilerMiddleware');
 const getDevToolsMiddleware = require('./middleware/getDevToolsMiddleware');
@@ -23,6 +24,7 @@ const webSocketProxy = require('./util/webSocketProxy.js');
 
 function runServer(args, config, readyCallback) {
   var wsProxy = null;
+  const packagerServer = getPackagerServer(args, config);
   const app = connect()
     .use(loadRawBodyMiddleware)
     .use(connect.compress())
@@ -33,7 +35,7 @@ function runServer(args, config, readyCallback) {
     .use(cpuProfilerMiddleware)
     // Temporarily disable flow check until it's more stable
     //.use(getFlowTypeCheckMiddleware(args))
-    .use(getAppMiddleware(args, config));
+    .use(packagerServer.processRequest.bind(packagerServer));
 
   args.projectRoots.forEach(root => app.use(connect.static(root)));
 
@@ -44,6 +46,12 @@ function runServer(args, config, readyCallback) {
     args.port,
     '::',
     function() {
+      attachHMRServer({
+        httpServer: serverInstance,
+        path: '/hot',
+        packagerServer,
+      });
+
       wsProxy = webSocketProxy.attachToServer(serverInstance, '/debugger-proxy');
       webSocketProxy.attachToServer(serverInstance, '/devtools');
       readyCallback();
@@ -55,13 +63,13 @@ function runServer(args, config, readyCallback) {
   serverInstance.timeout = 0;
 }
 
-function getAppMiddleware(args, config) {
+function getPackagerServer(args, config) {
   let transformerPath = args.transformer;
   if (!isAbsolutePath(transformerPath)) {
     transformerPath = path.resolve(process.cwd(), transformerPath);
   }
 
-  return ReactPackager.middleware({
+  return ReactPackager.createServer({
     nonPersistent: args.nonPersistent,
     projectRoots: args.projectRoots,
     blacklistRE: config.getBlacklistRE(),
diff --git a/packager/react-packager/src/JSTransformer/resolvePlugins.js b/packager/react-packager/src/JSTransformer/resolvePlugins.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+'use strict';
+
+/**
+ * Manually resolve all default Babel plugins.
+ * `babel.transform` will attempt to resolve all base plugins relative to
+ * the file it's compiling. This makes sure that we're using the plugins
+ * installed in the react-native package.
+ */
+function resolvePlugins(plugins) {
+  return plugins.map(function(plugin) {
+    // Normalise plugin to an array.
+    if (!Array.isArray(plugin)) {
+      plugin = [plugin];
+    }
+    // Only resolve the plugin if it's a string reference.
+    if (typeof plugin[0] === 'string') {
+      plugin[0] = require('babel-plugin-' + plugin[0]);
+      plugin[0] = plugin[0].__esModule ? plugin[0].default : plugin[0];
+    }
+    return plugin;
+  });
+}
+
+module.exports = resolvePlugins;
diff --git a/packager/react-packager/src/JSTransformer/worker.js b/packager/react-packager/src/JSTransformer/worker.js
@@ -9,13 +9,14 @@
 'use strict';
 
 var babel = require('babel-core');
+var resolvePlugins = require('./resolvePlugins');
 var Transforms = require('../transforms');
 
 // Runs internal transforms on the given sourceCode. Note that internal
 // transforms should be run after the external ones to ensure that they run on
 // Javascript code
 function internalTransforms(sourceCode, filename, options) {
-  var plugins = Transforms.getAll(options);
+  var plugins = resolvePlugins(Transforms.getAll(options));
   if (plugins.length === 0) {
     return {
       code: sourceCode,
diff --git a/packager/transformer.js b/packager/transformer.js
@@ -16,6 +16,7 @@ const inlineRequires = require('fbjs-scripts/babel-6/inline-requires');
 const json5 = require('json5');
 const path = require('path');
 const ReactPackager = require('./react-packager');
+const resolvePlugins = require('./react-packager/src/JSTransformer/resolvePlugins');
 
 const babelRC =
   json5.parse(
@@ -36,23 +37,7 @@ function transform(src, filename, options) {
   if (options.inlineRequires) {
     extraPlugins.push(inlineRequires);
   }
-  config.plugins = extraPlugins.concat(config.plugins);
-
-  // Manually resolve all default Babel plugins. babel.transform will attempt to resolve
-  // all base plugins relative to the file it's compiling. This makes sure that we're
-  // using the plugins installed in the react-native package.
-  config.plugins = config.plugins.map(function(plugin) {
-    // Normalise plugin to an array.
-    if (!Array.isArray(plugin)) {
-      plugin = [plugin];
-    }
-    // Only resolve the plugin if it's a string reference.
-    if (typeof plugin[0] === 'string') {
-      plugin[0] = require(`babel-plugin-${plugin[0]}`);
-      plugin[0] = plugin[0].__esModule ? plugin[0].default : plugin[0];
-    }
-    return plugin;
-  });
+  config.plugins = resolvePlugins(extraPlugins.concat(config.plugins));
 
   const result = babel.transform(src, Object.assign({}, babelRC, config));
 
