@startupjs/react-sharedb/lib/subscribe.js

'use strict';

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

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _promise = require('babel-runtime/core-js/promise');

var _promise2 = _interopRequireDefault(_promise);

var _typeof2 = require('babel-runtime/helpers/typeof');

var _typeof3 = _interopRequireDefault(_typeof2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _extends3 = require('babel-runtime/helpers/extends');

var _extends4 = _interopRequireDefault(_extends3);

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _getIterator2 = require('babel-runtime/core-js/get-iterator');

var _getIterator3 = _interopRequireDefault(_getIterator2);

var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _get2 = require('babel-runtime/helpers/get');

var _get3 = _interopRequireDefault(_get2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

exports.default = subscribe;

var _isArray = require('lodash/isArray');

var _isArray2 = _interopRequireDefault(_isArray);

var _uniq = require('lodash/uniq');

var _uniq2 = _interopRequireDefault(_uniq);

var _union = require('lodash/union');

var _union2 = _interopRequireDefault(_union);

var _keys2 = require('lodash/keys');

var _keys3 = _interopRequireDefault(_keys2);

var _isEqual = require('lodash/isEqual');

var _isEqual2 = _interopRequireDefault(_isEqual);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _hoistNonReactStatics = require('hoist-non-react-statics');

var _hoistNonReactStatics2 = _interopRequireDefault(_hoistNonReactStatics);

var _model2 = require('@startupjs/model');

var _model3 = _interopRequireDefault(_model2);

var _Doc = require('./types/Doc');

var _Doc2 = _interopRequireDefault(_Doc);

var _Query = require('./types/Query');

var _Query2 = _interopRequireDefault(_Query);

var _QueryExtra = require('./types/QueryExtra');

var _QueryExtra2 = _interopRequireDefault(_QueryExtra);

var _Local = require('./types/Local');

var _Local2 = _interopRequireDefault(_Local);

var _Value = require('./types/Value');

var _Value2 = _interopRequireDefault(_Value);

var _Api = require('./types/Api');

var _Api2 = _interopRequireDefault(_Api);

var _batching = require('../batching');

var _batching2 = _interopRequireDefault(_batching);

var _semaphore = require('./semaphore');

var _semaphore2 = _interopRequireDefault(_semaphore);

var _isExtraQuery = require('./isExtraQuery');

var _observerUtil = require('@nx-js/observer-util');

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

var STORE = 'store';
// import debounce from 'lodash/debounce'

var STORE_DEPRECATED = 'scope';
var $STORE = '$' + STORE;
var $STORE_DEPRECATED = '$' + STORE_DEPRECATED;
var DEFAULT_COLLECTION = '$components';
var SUBSCRIBE_COMPUTATION_NAME = '__subscribeComputation';
var HELPER_METHODS_TO_BIND = ['get', 'at'];
var DUMMY_STATE = {};

function subscribe(fn) {
  return function decorateTarget(Component) {
    var isStateless = !(Component.prototype && Component.prototype.isReactComponent);
    var AutorunComponent = Component.__isSubscription ? Component : getAutorunComponent(Component, isStateless);
    var SubscriptionsContainer = getSubscriptionsContainer(AutorunComponent, fn ? [fn] : []);
    return (0, _hoistNonReactStatics2.default)(SubscriptionsContainer, AutorunComponent);
  };
}

var getAutorunComponent = function getAutorunComponent(Component, isStateless) {
  var AutorunHOC = function (_ref) {
    (0, _inherits3.default)(AutorunHOC, _ref);

    function AutorunHOC(props) {
      var _ref2;

      (0, _classCallCheck3.default)(this, AutorunHOC);

      for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        args[_key - 1] = arguments[_key];
      }

      // Mark subscription as used.
      // This is needed to track in later @subscribe's whether
      // to create a new $STORE or use the one received from props
      // (in case when the outer component is @subscribe)
      var _this = (0, _possibleConstructorReturn3.default)(this, (_ref2 = AutorunHOC.__proto__ || (0, _getPrototypeOf2.default)(AutorunHOC)).call.apply(_ref2, [this, props].concat(args)));

      props[$STORE].__used = true;

      // let fn = debounce(() => {
      //   if (this.unmounted) return
      //   this.setState(DUMMY_STATE)
      // })

      var updateFn = function updateFn() {
        if (_this.unmounted) return;
        _this.setState(DUMMY_STATE);
      };
      _this.update = function () {
        return _batching2.default.add(updateFn);
      };

      // let fn = () => batchedUpdate(() => {
      //   if (this.unmounted) return
      //   this.setState(DUMMY_STATE)
      // })

      // create a reactive render for the component
      // run a dummy setState to schedule a new reactive render, avoid forceUpdate
      _this.render = (0, _observerUtil.observe)(_this.render, {
        scheduler: _this.update,
        lazy: true
      });
      return _this;
    }

    (0, _createClass3.default)(AutorunHOC, [{
      key: 'render',
      value: function render() {
        return isStateless ? Component(this.props, this.context) : (0, _get3.default)(AutorunHOC.prototype.__proto__ || (0, _getPrototypeOf2.default)(AutorunHOC.prototype), 'render', this).call(this);
      }
    }, {
      key: 'componentWillUnmount',
      value: function componentWillUnmount() {
        this.unmounted = true;
        // stop autorun
        (0, _observerUtil.unobserve)(this.render);
        // call user defined componentWillUnmount
        if ((0, _get3.default)(AutorunHOC.prototype.__proto__ || (0, _getPrototypeOf2.default)(AutorunHOC.prototype), 'componentWillUnmount', this)) (0, _get3.default)(AutorunHOC.prototype.__proto__ || (0, _getPrototypeOf2.default)(AutorunHOC.prototype), 'componentWillUnmount', this).call(this);
      }
    }]);
    return AutorunHOC;
  }(isStateless ? _react2.default.Component : Component);

  AutorunHOC.displayName = 'AutorunHOC(' + (Component.displayName || Component.name || 'Component') + ')';
  return AutorunHOC;
};

var getSubscriptionsContainer = function getSubscriptionsContainer(DecoratedComponent, fns) {
  var _class, _temp;

  return _temp = _class = function (_React$Component) {
    (0, _inherits3.default)(SubscriptionsContainer, _React$Component);

    function SubscriptionsContainer() {
      (0, _classCallCheck3.default)(this, SubscriptionsContainer);
      return (0, _possibleConstructorReturn3.default)(this, (SubscriptionsContainer.__proto__ || (0, _getPrototypeOf2.default)(SubscriptionsContainer)).apply(this, arguments));
    }

    (0, _createClass3.default)(SubscriptionsContainer, [{
      key: 'UNSAFE_componentWillMount',


      // eslint-disable-next-line camelcase
      value: function UNSAFE_componentWillMount() {
        this.model = this.getOrCreateModel();
        this.models = {};
        // pipe the local model into props as $STORE
        this.models[$STORE] = this.model;
        this.models[$STORE_DEPRECATED] = this.model; // TODO: DEPRECATED
        this[STORE] = this.model.get();
        this.autorunSubscriptions();
      }

      // TODO: Implement queueing
      // eslint-disable-next-line camelcase

      // eslint-disable-next-line

    }, {
      key: 'UNSAFE_componentWillReceiveProps',
      value: function () {
        var _ref3 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee() {
          for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
            args[_key2] = arguments[_key2];
          }

          var nextProps, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, dataFn;

          return _regenerator2.default.wrap(function _callee$(_context) {
            while (1) {
              switch (_context.prev = _context.next) {
                case 0:
                  nextProps = args[0];
                  _iteratorNormalCompletion = true;
                  _didIteratorError = false;
                  _iteratorError = undefined;
                  _context.prev = 4;
                  _iterator = (0, _getIterator3.default)(this.dataFns);

                case 6:
                  if (_iteratorNormalCompletion = (_step = _iterator.next()).done) {
                    _context.next = 16;
                    break;
                  }

                  dataFn = _step.value;
                  _context.next = 10;
                  return dataFn(nextProps);

                case 10:
                  if (!this.unmounted) {
                    _context.next = 12;
                    break;
                  }

                  return _context.abrupt('return');

                case 12:
                  if (this.doForceUpdate) {
                    this.doForceUpdate = false;
                    this.setState(DUMMY_STATE);
                  }

                case 13:
                  _iteratorNormalCompletion = true;
                  _context.next = 6;
                  break;

                case 16:
                  _context.next = 22;
                  break;

                case 18:
                  _context.prev = 18;
                  _context.t0 = _context['catch'](4);
                  _didIteratorError = true;
                  _iteratorError = _context.t0;

                case 22:
                  _context.prev = 22;
                  _context.prev = 23;

                  if (!_iteratorNormalCompletion && _iterator.return) {
                    _iterator.return();
                  }

                case 25:
                  _context.prev = 25;

                  if (!_didIteratorError) {
                    _context.next = 28;
                    break;
                  }

                  throw _iteratorError;

                case 28:
                  return _context.finish(25);

                case 29:
                  return _context.finish(22);

                case 30:
                case 'end':
                  return _context.stop();
              }
            }
          }, _callee, this, [[4, 18, 22, 30], [23,, 25, 29]]);
        }));

        function UNSAFE_componentWillReceiveProps() {
          return _ref3.apply(this, arguments);
        }

        return UNSAFE_componentWillReceiveProps;
      }()

      // TODO: Maybe throw an error when passing used $STORE to new @subscribe

    }, {
      key: 'getOrCreateModel',
      value: function getOrCreateModel() {
        if (this.props[$STORE] && !this.props[$STORE].__used) {
          return this.props[$STORE];
        } else {
          var _model = generateScopedModel();
          _semaphore2.default.allowComponentSetter = true;
          _model.set('', (0, _observerUtil.observable)({})); // Initially set empty object for observable
          _semaphore2.default.allowComponentSetter = false;
          bindMethods(_model, HELPER_METHODS_TO_BIND);
          return _model;
        }
      }
    }, {
      key: 'componentWillUnmount',
      value: function componentWillUnmount() {
        this.unmounted = true;

        // Stop all subscription params computations
        for (var index = 0; index < this.dataFns.length; index++) {
          var computationName = getComputationName(index);
          this.comps[computationName] && (0, _observerUtil.unobserve)(this.comps[computationName]);
          delete this.comps[computationName];
        }
        delete this.dataFns;

        // Destroy whole model before destroying items one by one.
        // This prevents model.on() and model.start() from firing
        // extra times
        _semaphore2.default.allowComponentSetter = true;
        this.model.destroy();
        _semaphore2.default.allowComponentSetter = false;

        // Destroy all subscription items
        for (var key in this.items) {
          this.destroyItem(key, true, true);
        }

        for (var _key3 in this.models) {
          delete this.models[_key3];
        }
        delete this.models;
        delete this[STORE];
        delete this.model; // delete the actual model
      }
    }, {
      key: 'render',
      value: function render() {
        var _this3 = this;

        this.rendered = true;
        if (this.loaded) {
          var _extends2;

          return _react2.default.createElement(DecoratedComponent, (0, _extends4.default)({}, this.props, (_extends2 = {}, (0, _defineProperty3.default)(_extends2, STORE, this[STORE]), (0, _defineProperty3.default)(_extends2, STORE_DEPRECATED, this[STORE]), _extends2), this.models, {
            ref: function ref() {
              if (!DecoratedComponent.__isSubscription) {
                var _props;

                if (_this3.props.innerRef) (_props = _this3.props).innerRef.apply(_props, arguments);
              }
            }
          }));
        } else {
          // When in React Native env, don't use any loading spinner
          if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
            return null;
          } else {
            return _react2.default.createElement('div', { className: 'Loading' });
          }
        }
      }

      // TODO: When we change subscription params quickly, we are going to
      //       receive a race condition when earlier subscription result might
      //       take longer to process compared to the same newer subscription.
      //       Implement Queue.

    }, {
      key: 'autorunSubscriptions',
      value: function () {
        var _ref4 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee3() {
          var _this4 = this;

          var _loop, index, _ret;

          return _regenerator2.default.wrap(function _callee3$(_context4) {
            while (1) {
              switch (_context4.prev = _context4.next) {
                case 0:
                  this.items = {};
                  this.comps = {};
                  this.dataFns = [];
                  _loop = /*#__PURE__*/_regenerator2.default.mark(function _loop(index) {
                    var fn, subscriptions, dataFn;
                    return _regenerator2.default.wrap(function _loop$(_context3) {
                      while (1) {
                        switch (_context3.prev = _context3.next) {
                          case 0:
                            fn = fns[index];
                            subscriptions = {};

                            dataFn = function () {
                              var _ref5 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee2(props) {
                                var prevSubscriptions, computationName, subscribeFn, keys, promises;
                                return _regenerator2.default.wrap(function _callee2$(_context2) {
                                  while (1) {
                                    switch (_context2.prev = _context2.next) {
                                      case 0:
                                        if (_this4.model.get()) {
                                          _context2.next = 2;
                                          break;
                                        }

                                        return _context2.abrupt('return');

                                      case 2:
                                        prevSubscriptions = subscriptions || {};
                                        computationName = getComputationName(index);

                                        subscribeFn = function subscribeFn() {
                                          subscriptions = fn.call(_this4, typeof props === 'function' ? _this4.props : props);
                                        };

                                        _this4.comps[computationName] && (0, _observerUtil.unobserve)(_this4.comps[computationName]);
                                        _this4.comps[computationName] = (0, _observerUtil.observe)(subscribeFn, {
                                          scheduler: dataFn
                                        });

                                        keys = (0, _union2.default)((0, _keys3.default)(prevSubscriptions), (0, _keys3.default)(subscriptions));

                                        keys = (0, _uniq2.default)(keys);
                                        promises = [];

                                        _batching2.default.batch(function () {
                                          var _iteratorNormalCompletion2 = true;
                                          var _didIteratorError2 = false;
                                          var _iteratorError2 = undefined;

                                          try {
                                            for (var _iterator2 = (0, _getIterator3.default)(keys), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
                                              var key = _step2.value;

                                              if (!(0, _isEqual2.default)(subscriptions[key], prevSubscriptions[key])) {
                                                if (subscriptions[key]) {
                                                  promises.push(_this4.initItem(key, subscriptions[key]));
                                                } else {
                                                  _this4.destroyItem(key, true);
                                                }
                                              }
                                            }
                                          } catch (err) {
                                            _didIteratorError2 = true;
                                            _iteratorError2 = err;
                                          } finally {
                                            try {
                                              if (!_iteratorNormalCompletion2 && _iterator2.return) {
                                                _iterator2.return();
                                              }
                                            } finally {
                                              if (_didIteratorError2) {
                                                throw _iteratorError2;
                                              }
                                            }
                                          }
                                        });
                                        _context2.next = 13;
                                        return _promise2.default.all(promises);

                                      case 13:
                                      case 'end':
                                        return _context2.stop();
                                    }
                                  }
                                }, _callee2, _this4);
                              }));

                              return function dataFn(_x) {
                                return _ref5.apply(this, arguments);
                              };
                            }();

                            _this4.dataFns.push(dataFn);
                            _context3.next = 6;
                            return dataFn(_this4.props);

                          case 6:
                            if (!_this4.unmounted) {
                              _context3.next = 8;
                              break;
                            }

                            return _context3.abrupt('return', {
                              v: void 0
                            });

                          case 8:
                          case 'end':
                            return _context3.stop();
                        }
                      }
                    }, _loop, _this4);
                  });
                  index = 0;

                case 5:
                  if (!(index < fns.length)) {
                    _context4.next = 13;
                    break;
                  }

                  return _context4.delegateYield(_loop(index), 't0', 7);

                case 7:
                  _ret = _context4.t0;

                  if (!((typeof _ret === 'undefined' ? 'undefined' : (0, _typeof3.default)(_ret)) === "object")) {
                    _context4.next = 10;
                    break;
                  }

                  return _context4.abrupt('return', _ret.v);

                case 10:
                  index++;
                  _context4.next = 5;
                  break;

                case 13:
                  // Reset force update since we are doing the initial rendering anyways
                  this.doForceUpdate = false;
                  this.loaded = true;
                  // Sometimes all the subscriptions might go through synchronously
                  // (for example if we are only subscribing to local data).
                  // In this case we don't need to manually trigger update
                  // since render will execute on its own later in the lifecycle.
                  if (this.rendered) this.setState(DUMMY_STATE);

                case 16:
                case 'end':
                  return _context4.stop();
              }
            }
          }, _callee3, this);
        }));

        function autorunSubscriptions() {
          return _ref4.apply(this, arguments);
        }

        return autorunSubscriptions;
      }()

      // TODO: Maybe implement queueing. Research if race condition is present.

    }, {
      key: 'initItem',
      value: function initItem(key, params) {
        var _this5 = this;

        var constructor = void 0,
            subscriptionParams = void 0;
        var explicitType = params && params.__subscriptionType;
        if (explicitType) {
          subscriptionParams = params.params;
          constructor = getItemConstructor(explicitType);
        } else {
          subscriptionParams = params;
          constructor = getItemConstructorFromParams(params);
        }
        var item = new constructor(this.model, key, subscriptionParams);
        // We have to use promises directly here rather than async/await,
        // because we have to prevent async execution of init() if it is not present.
        // But defining the function as `async` will make it run in the next event loop.
        var finishInit = function finishInit() {
          if (_this5.unmounted) return item.destroy();
          _batching2.default.batch(function () {
            if (_this5.items[key]) _this5.destroyItem(key);
            item.refModel();
            _this5.items[key] = item;
            // Expose scoped model under the same name with prepended $
            var keyModelName = getScopedModelName(key);
            if (!_this5.models[keyModelName]) {
              _this5.models[keyModelName] = _this5.model.at(key);
              _this5.doForceUpdate = true;
            }
          });
        };
        if (item.init) {
          var initRes = item.init();

          if (!initRes) {
            finishInit();
            return _promise2.default.resolve();
          }
          return initRes.then(finishInit).catch(function (err) {
            console.warn("[react-sharedb] Warning. Item couldn't initialize. " + 'This might be normal if several resubscriptions happened ' + 'quickly one after another. Error:', err);
            // Ignore the .init() error
            return _promise2.default.resolve();
          });
        } else {
          finishInit();
          return _promise2.default.resolve();
        }
      }

      // TODO: Refactor to use 3 different facade methods

    }, {
      key: 'destroyItem',
      value: function destroyItem(key, terminate, modelDestroyed) {
        var _this6 = this;

        if (!this.items[key]) return console.error('Trying to destroy', key);
        _batching2.default.batch(function () {
          if (!modelDestroyed) _this6.items[key].unrefModel();
          var keyModelName = getScopedModelName(key);
          if (terminate) {
            delete _this6[keyModelName];
            _this6.doForceUpdate = true;
          }
          _this6.items[key].destroy();
        });
        delete this.items[key];
      }
    }]);
    return SubscriptionsContainer;
  }(_react2.default.Component), _class.__isSubscription = true, _temp;
};

function generateScopedModel() {
  var path = DEFAULT_COLLECTION + '.' + _model3.default.id();
  return _model3.default.scope(path);
}

function getItemConstructor(type) {
  switch (type) {
    case 'Local':
      return _Local2.default;
    case 'Doc':
      return _Doc2.default;
    case 'Query':
      return _Query2.default;
    case 'QueryExtra':
      return _QueryExtra2.default;
    case 'Value':
      return _Value2.default;
    case 'Api':
      return _Api2.default;
    default:
      throw new Error('Unsupported subscription type: ' + type);
  }
}

// TODO: DEPRECATED
function getItemConstructorFromParams(params) {
  console.warn('\n    [react-sharedb] Implicit auto-guessing of subscription type is DEPRECATED and will be removed in a future version.\n    Please use explicit `sub*()` functions:\n      - subDoc(collection, docId)\n      - subQuery(collection, query)\n      - subLocal(localPath)\n      - subValue(value)\n  ');
  if (typeof params === 'string') return _Local2.default;
  if ((0, _isArray2.default)(params)) {
    var _params = (0, _slicedToArray3.default)(params, 2),
        queryOrId = _params[1];

    return typeof queryOrId === 'string' || !queryOrId ? _Doc2.default : (0, _isExtraQuery.isExtraQuery)(queryOrId) ? _QueryExtra2.default : _Query2.default;
  }
  throw new Error("Can't automatically determine subscription type from params: " + params);
}

function getComputationName(index) {
  return '' + SUBSCRIBE_COMPUTATION_NAME + index;
}

function bindMethods(object, methodsToBind) {
  var _iteratorNormalCompletion3 = true;
  var _didIteratorError3 = false;
  var _iteratorError3 = undefined;

  try {
    for (var _iterator3 = (0, _getIterator3.default)(methodsToBind), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
      var method = _step3.value;

      object[method] = object[method].bind(object);
    }
  } catch (err) {
    _didIteratorError3 = true;
    _iteratorError3 = err;
  } finally {
    try {
      if (!_iteratorNormalCompletion3 && _iterator3.return) {
        _iterator3.return();
      }
    } finally {
      if (_didIteratorError3) {
        throw _iteratorError3;
      }
    }
  }
}

function getScopedModelName(key) {
  return '$' + key;
}
module.exports = exports['default'];