armo-breadboard/lib/BreadboardMountpoint.js

Edit a live React component's source in real time.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _class, _temp;

var _exenv = require('exenv');

var _exenv2 = _interopRequireDefault(_exenv);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _armoUtil = require('armo-util');

var _BreadboardBuilder = require('./BreadboardBuilder');

var _BreadboardBuilder2 = _interopRequireDefault(_BreadboardBuilder);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(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; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var BreadboardMountpoint = (_temp = _class = function (_Component) {
  _inherits(BreadboardMountpoint, _Component);

  function BreadboardMountpoint(props) {
    _classCallCheck(this, BreadboardMountpoint);

    var _this = _possibleConstructorReturn(this, (BreadboardMountpoint.__proto__ || Object.getPrototypeOf(BreadboardMountpoint)).call(this, props));

    _this.id = _this.constructor.nextId++;
    _this.initialized = false;

    _this.receiveNode = _this.receiveNode.bind(_this);
    _this.handleMessage = _this.handleMessage.bind(_this);
    return _this;
  }

  _createClass(BreadboardMountpoint, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      // We need to add this event handler here, as the message may arrive
      // before `componentDidMount` is executed. And since this component may be
      // used server-side, we need to check if we can use the DOM.
      if (_exenv2.default.canUseDOM) {
        window.addEventListener("message", this.handleMessage, false);
      }
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (this.initialized) {
        // - if source has changed and we're on IE, need to refresh iframe
        // - if location, paused or console have changed, need post message
      }
    }
  }, {
    key: 'shouldComponentUpdate',
    value: function shouldComponentUpdate(nextProps) {
      // Updating the component, even with the same sources, causes a re-render
      // due to the data URL. Because of this, we need to ensure there are no
      // unnecessary re-renders.
      return !(nextProps.className !== this.props.className && (0, _armoUtil.shallowCompare)(nextProps.style, this.props.style) && (0, _armoUtil.shallowCompare)(nextProps.sources, this.props.sources) && (0, _armoUtil.shallowCompare)(nextProps.history.location, this.props.history.location) && nextProps.isPaused === this.props.isPaused);
    }
  }, {
    key: 'componentWillUpdate',
    value: function componentWillUpdate() {
      // TODO:
      // when script sources changed, need to cause a manual refresh
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          sources = _props.sources,
          history = _props.history,
          isPaused = _props.isPaused,
          consoleController = _props.consoleController,
          hostPageURL = _props.hostPageURL,
          other = _objectWithoutProperties(_props, ['sources', 'history', 'isPaused', 'consoleController', 'hostPageURL']);

      var source = this.getPageSource().replace('<!--BREADBOARD_SETTINGS-->', '<script>const __BREADBOARD_SETTINGS = ' + JSON.stringify(this.getSettings()) + '</script>');

      // TODO: for IE, use `hostPageURL`
      var srcDataURL = 'data:text/html;charset=utf-8;base64,' + btoa(source);

      // TODO: add sandbox
      return _react2.default.createElement('iframe', _extends({}, other, {
        ref: this.receiveNode,
        src: srcDataURL
      }));
    }
  }, {
    key: 'getPageSource',
    value: function getPageSource() {
      var _props2 = this.props,
          history = _props2.history,
          sources = _props2.sources;

      var pathname = history.location.pathname;
      var source = pathname === '/' ? sources['/index.html'] : sources[pathname];
      var replacedSource = source.replace(/<!--breadboardscript:\/\/(\/[\w\.]+)-->/g, function (match, pathname) {
        var i = sources[pathname].indexOf('//# source');
        var source = void 0,
            map = void 0;
        if (i > -1) {
          source = sources[pathname].slice(0, i);
          map = sources[pathname].slice(i);
        } else {
          source = sources[pathname];
          map = '';
        }
        var wrappedSource = '(function(window, location) {' + source + '})(__BREADBOARD.window, __BREADBOARD.location)' + map;
        return '<script>' + wrappedSource + '<\/script>';
      }).replace(/<!--breadboardstyle:\/\/(\/[\w\.]+)-->/g, function (match, pathname) {
        return '<link type="text/css" rel="stylesheet" href="data:text/css;charset=utf-8;base64,' + btoa(sources[pathname]) + '" />';
      });
      return replacedSource;
    }
  }, {
    key: 'getSettings',
    value: function getSettings() {
      return {
        mountpointId: this.id,
        location: this.props.history.location,
        isPaused: this.props.isPaused
      };
    }
  }, {
    key: 'handleMessage',
    value: function handleMessage(event) {
      var data = event.data;

      if (!data || !/^breadboard-host\/[\w-]+$/.test(data.type) || data.mountpointId !== this.id) {
        return;
      }

      var type = data.type.replace(/^breadboard-host\//, '');
      switch (type) {
        case 'source-required':
          this.node.contentWindow.postMessage({
            type: 'breadboard-mountpoint/source',
            settings: this.getSettings(),
            source: this.getPageSource()
          }, '*');
          break;

        case 'load':
          break;

        case 'init':
          this.initialized = true;
          this.props.consoleController.get().actions.clear();
          break;

        case 'console':
          this.props.consoleController.get().actions.log(data.level, data.file, data.args);
          break;

        // - history events
      }
    }
  }, {
    key: 'receiveNode',
    value: function receiveNode(node) {
      this.node = node;
    }
  }]);

  return BreadboardMountpoint;
}(_react.Component), _class.nextId = 1, _class.propTypes = {
  history: _propTypes2.default.object.isRequired,
  hostPageURL: _propTypes2.default.string,
  isPaused: _propTypes2.default.bool,
  consoleController: _propTypes2.default.object,
  sources: _propTypes2.default.objectOf(_propTypes2.default.string).isRequired
}, _temp);
exports.default = BreadboardMountpoint;