Make HMR compatible with numeric IDs

Summary:We recently refactor the packager to transform the module names into numeric IDs but we forgot to update the HMR call site. As a consequence, HMR doesn't work the first time a file is saved but the second one.

This is affecting master as of 3/20. If we don't land this before v0.23 is cut we'll have to cherry pick it. This rev does *not* need to be picked on v0.22.

Reviewed By: bestander

Differential Revision: D3075192

fb-gh-sync-id: 410e4bf8f937c0cdb8f2b462dd36f928a24e8aa8
shipit-source-id: 410e4bf8f937c0cdb8f2b462dd36f928a24e8aa8

Libraries/Utilities/HMRClient.js

@@ -98,7 +98,7 @@ Error: ${e.message}`
             RCTExceptionsManager && RCTExceptionsManager.dismissRedbox && RCTExceptionsManager.dismissRedbox();
           }
 
-          modules.forEach(({name, code}, i) => {
+          modules.forEach(({id, code}, i) => {
             code = code + '\n\n' + sourceMappingURLs[i];
 
             require('SourceMapsCache').fetch({
@@ -116,7 +116,7 @@ Error: ${e.message}`
 
             code = [
               `__accept(`,
-                `${name},`,
+                `${id},`,
                 `function(global,require,module,exports){`,
                   `${code}`,
                 '\n},',

local-cli/server/util/attachHMRServer.js

@@ -252,7 +252,7 @@ function attachHMRServer({httpServer, path, packagerServer}) {
                 return JSON.stringify({
                   type: 'update',
                   body: {
-                    modules: bundle.getModulesNamesAndCode(),
+                    modules: bundle.getModulesIdsAndCode(),
                     inverseDependencies: client.inverseDependenciesCache,
                     sourceURLs: bundle.getSourceURLs(),
                     sourceMappingURLs: bundle.getSourceMappingURLs(),

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

@@ -34,10 +34,10 @@ class HMRBundle extends BundleBase {
     return Promise.resolve();
   }
 
-  getModulesNamesAndCode() {
+  getModulesIdsAndCode() {
     return this._modules.map(module => {
       return {
-        name: JSON.stringify(module.name),
+        id: JSON.stringify(module.id),
         code: module.code,
       };
     });