@tacky/store/lib/components/reactive.js

State management framework based on react

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var React = _interopRequireWildcard(require("react"));

var _ErrorBoundary = _interopRequireDefault(require("./ErrorBoundary"));

var _store = require("../core/store");

var _collector = require("../core/collector");

function _createSuper(Derived) { return function () { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

/**
 * Returns a high order component with auto refresh feature.
 */
function reactive(arg) {
  var decorator = function decorator(Target) {
    // const displayName: string = Target.displayName || Target.name || '<TACKY_COMPONENT>';
    var _this; // Function component with do not have this context


    var ObservableTarget = function ObservableTarget(props) {
      _collector.depCollector.start(_this);

      var fn = Target; // target component don't use react.memo

      var result = fn(props);

      _collector.depCollector.end();

      return result;
    };

    if (typeof Target === 'function' && (!Target.prototype || !Target.prototype.render) && !Target.prototype.isReactClass && !React.Component.isPrototypeOf(Target)) {
      var Wrapper = /*#__PURE__*/function (_React$PureComponent) {
        (0, _inherits2["default"])(Wrapper, _React$PureComponent);

        var _super = _createSuper(Wrapper);

        function Wrapper() {
          (0, _classCallCheck2["default"])(this, Wrapper);
          return _super.apply(this, arguments);
        }

        (0, _createClass2["default"])(Wrapper, [{
          key: "componentDidMount",
          value: function componentDidMount() {
            var _this2 = this;

            this.unsubscribeHandler = _store.store.subscribe(function () {
              _this2.forceUpdate();
            }, _this);
          }
        }, {
          key: "componentWillUnmount",
          value: function componentWillUnmount() {
            if (this.unsubscribeHandler !== void 0) {
              this.unsubscribeHandler();
            }
          }
        }, {
          key: "render",
          value: function render() {
            return React.createElement(_ErrorBoundary["default"], null, React.createElement(ObservableTarget, Object.assign({}, this.props)));
          }
        }]);
        return Wrapper;
      }(React.PureComponent);

      var _baseRender = Wrapper.prototype.render;

      Wrapper.prototype.render = function () {
        _this = this;
        return _baseRender.call(this);
      };

      copyStaticProperties(Target, Wrapper);
      return Wrapper;
    } // class component


    var target = Target.prototype || Target;
    var baseRender = target.render;
    var callback;

    function refreshChildComponentView() {
      var _this3 = this;

      return function () {
        return React.Component.prototype.forceUpdate.call(_this3);
      };
    }

    target.render = function () {
      _this = this;
      callback = refreshChildComponentView.call(this);

      _collector.depCollector.start(this);

      var result = baseRender.call(this);

      _collector.depCollector.end();

      return result;
    };

    var ObservableTargetComponent = /*#__PURE__*/function (_React$PureComponent2) {
      (0, _inherits2["default"])(ObservableTargetComponent, _React$PureComponent2);

      var _super2 = _createSuper(ObservableTargetComponent);

      function ObservableTargetComponent() {
        (0, _classCallCheck2["default"])(this, ObservableTargetComponent);
        return _super2.apply(this, arguments);
      }

      (0, _createClass2["default"])(ObservableTargetComponent, [{
        key: "componentDidMount",
        value: function componentDidMount() {
          this.unsubscribeHandler = _store.store.subscribe(function () {
            callback();
          }, _this);
        }
      }, {
        key: "componentWillUnmount",
        value: function componentWillUnmount() {
          if (this.unsubscribeHandler !== void 0) {
            this.unsubscribeHandler();
          }
        }
      }, {
        key: "render",
        value: function render() {
          return React.createElement(_ErrorBoundary["default"], null, React.createElement(Target, Object.assign({}, this.props)));
        }
      }]);
      return ObservableTargetComponent;
    }(React.PureComponent);

    copyStaticProperties(Target, ObservableTargetComponent);
    return ObservableTargetComponent;
  };

  if (arg === void 0) {
    // @reactive()
    return decorator;
  } // @reactive


  return decorator.call(null, arg);
} // based on https://github.com/mridgway/hoist-non-react-statics/blob/master/src/index.js


var hoistBlackList = {
  $$typeof: true,
  render: true,
  compare: true,
  type: true
};

function copyStaticProperties(base, target) {
  var keys = Object.keys(base);

  for (var index = 0; index < keys.length; index++) {
    var key = keys[index];

    if (hoistBlackList[key] === void 0) {
      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(base, key));
    }
  }
}