react-native/Libraries/Utilities/HMRClient.js

/**
 * 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.
 *
 * @providesModule HMRClient
 */
'use strict';

const Platform = require('Platform');
const invariant = require('invariant');
const processColor = require('processColor');

/**
 * HMR Client that receives from the server HMR updates and propagates them
 * runtime to reflects those changes.
 */
const HMRClient = {
  enable(platform, bundleEntry, host, port) {
    invariant(platform, 'Missing required parameter `platform`');
    invariant(bundleEntry, 'Missing required paramenter `bundleEntry`');
    invariant(host, 'Missing required paramenter `host`');

    // need to require WebSocket inside of `enable` function because
    // this module is defined as a `polyfillGlobal`.
    // See `InitializeJavascriptAppEngine.js`
    const WebSocket = require('WebSocket');

    const wsHostPort = port !== null && port !== ''
      ? `${host}:${port}`
      : host;

    // Build the websocket url
    const wsUrl = `ws://${wsHostPort}/hot?` +
      `platform=${platform}&` +
      `bundleEntry=${bundleEntry.replace('.bundle', '.js')}`;

    const activeWS = new WebSocket(wsUrl);
    activeWS.onerror = (e) => {
      throw new Error(
`Hot loading isn't working because it cannot connect to the development server.

Ensure the following:
- Node server is running and available on the same network
- run 'npm start' from react-native root
- Node server URL is correctly set in AppDelegate

URL: ${host}:${port}

Error: ${e.message}`
      );
    };
    activeWS.onmessage = ({data}) => {
      let DevLoadingView = require('NativeModules').DevLoadingView;
      if (!DevLoadingView) {
        DevLoadingView = {
          showMessage() {},
          hide() {},
        };
      }
      data = JSON.parse(data);

      switch (data.type) {
        case 'update-start': {
          DevLoadingView.showMessage(
            'Hot Loading...',
            processColor('#000000'),
            processColor('#aaaaaa'),
          );
          break;
        }
        case 'update': {
          const {
            modules,
            sourceMappingURLs,
            sourceURLs,
            inverseDependencies,
          } = data.body;

          if (Platform.OS === 'ios') {
            const RCTRedBox = require('NativeModules').RedBox;
            RCTRedBox && RCTRedBox.dismiss && RCTRedBox.dismiss();
          } else {
            const RCTExceptionsManager = require('NativeModules').ExceptionsManager;
            RCTExceptionsManager && RCTExceptionsManager.dismissRedbox && RCTExceptionsManager.dismissRedbox();
          }

          modules.forEach(({name, code}, i) => {
            code = code + '\n\n' + sourceMappingURLs[i];

            require('SourceMapsCache').fetch({
              text: code,
              url: sourceURLs[i],
              sourceMappingURL: sourceMappingURLs[i],
            });

            // on JSC we need to inject from native for sourcemaps to work
            // (Safari doesn't support `sourceMappingURL` nor any variant when
            // evaluating code) but on Chrome we can simply use eval
            const injectFunction = typeof global.nativeInjectHMRUpdate === 'function'
              ? global.nativeInjectHMRUpdate
              : eval;

            // TODO: (martinb) yellow box if cannot accept module
            code = `
              __accept(
                ${name},
                function(global, require, module, exports) {
                  ${code}
                },
                ${JSON.stringify(inverseDependencies)}
              );`;

            injectFunction(code, sourceURLs[i]);
          });

          DevLoadingView.hide();
          break;
        }
        case 'update-done': {
          DevLoadingView.hide();
          break;
        }
        case 'error': {
          DevLoadingView.hide();
          throw new Error(data.body.type + ' ' + data.body.description);
        }
        default: {
          throw new Error(`Unexpected message: ${data}`);
        }
      }
    };
  },
};

module.exports = HMRClient;