react-rails-mounter/dist/index.js

Mounting react components in Rails off of the asset pipeline

'use strict';

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

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

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

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

var defaultConfig = {
  CLASS_NAME_ATTR: 'data-react-class',
  PROPS_ATTR: 'data-react-props'
};

var ReactRailsMounter = function () {
  function ReactRailsMounter() {
    _classCallCheck(this, ReactRailsMounter);
  }

  _createClass(ReactRailsMounter, null, [{
    key: 'mount',
    value: function mount() {
      var components = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];

      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
          _ref$selector = _ref.selector,
          selector = _ref$selector === undefined ? undefined : _ref$selector,
          _ref$configs = _ref.configs,
          configs = _ref$configs === undefined ? {} : _ref$configs;

      var mergedConfigs = Object.assign({}, defaultConfig, configs);
      var nodes = this.findDOMNodes(selector, mergedConfigs);

      var _iteratorNormalCompletion = true;
      var _didIteratorError = false;
      var _iteratorError = undefined;

      try {
        for (var _iterator = nodes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
          var node = _step.value;

          var name = node.getAttribute(mergedConfigs.CLASS_NAME_ATTR);
          var component = components[name];
          var props = JSON.parse(node.getAttribute(mergedConfigs.PROPS_ATTR) || null);

          if (typeof component === 'undefined') {
            var message = 'Cannot find component: \'' + name + '\'';
            if (console && console.log) {
              console.log('%c[react-rails-mounter] %c' + message + ' for element', "font-weight: bold", "", node);
            }
            throw new Error('[react-rails-mounter] ' + message);
          } else {
            _reactDom2.default.render(_react2.default.createElement(component, props), node);
          }
        }
      } catch (err) {
        _didIteratorError = true;
        _iteratorError = err;
      } finally {
        try {
          if (!_iteratorNormalCompletion && _iterator.return) {
            _iterator.return();
          }
        } finally {
          if (_didIteratorError) {
            throw _iteratorError;
          }
        }
      }
    }
  }, {
    key: 'unmount',
    value: function unmount(searchSelector, _ref2) {
      var _ref2$configs = _ref2.configs,
          configs = _ref2$configs === undefined ? {} : _ref2$configs;

      var mergedConfigs = Object.assign({}, defaultConfig, configs);
      var nodes = this.findDOMNodes(searchSelector, mergedConfigs);

      var _iteratorNormalCompletion2 = true;
      var _didIteratorError2 = false;
      var _iteratorError2 = undefined;

      try {
        for (var _iterator2 = nodes[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
          var node = _step2.value;

          _reactDom2.default.unmountComponentAtNode(node);
        }
      } catch (err) {
        _didIteratorError2 = true;
        _iteratorError2 = err;
      } finally {
        try {
          if (!_iteratorNormalCompletion2 && _iterator2.return) {
            _iterator2.return();
          }
        } finally {
          if (_didIteratorError2) {
            throw _iteratorError2;
          }
        }
      }
    }

    /*
     -- Helper methods --
     */

  }, {
    key: 'findDOMNodes',
    value: function findDOMNodes(searchSelector, configs) {
      var selector = void 0,
          parent = void 0;

      switch (typeof searchSelector === 'undefined' ? 'undefined' : _typeof(searchSelector)) {
        case 'undefined':
          selector = '[' + configs.CLASS_NAME_ATTR + ']';
          parent = document;
          break;
        case 'object':
          selector = '[' + configs.CLASS_NAME_ATTR + ']';
          parent = selector;
          break;
        case 'string':
          selector = selector + '[' + configs.CLASS_NAME_ATTR + '], ' + selector + ' [' + configs.CLASS_NAME_ATTR + ']';
          parent = document;
          break;
        default:
          break;
      }

      return parent.querySelectorAll(selector);
    }
  }]);

  return ReactRailsMounter;
}();

exports.default = ReactRailsMounter;
;