@turbox3d/reactivity-react
Version:
Large-scale reactive state management library for react
147 lines (146 loc) • 7.75 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Reactive = Reactive;
exports.TURBOX_PREFIX = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _shared = require("@turbox3d/shared");
var _reactivity = require("@turbox3d/reactivity");
var React = _interopRequireWildcard(require("react"));
var _ErrorBoundary = _interopRequireDefault(require("./ErrorBoundary"));
var _index = require("../utils/index");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @typescript-eslint/no-this-alias */
var TURBOX_PREFIX = exports.TURBOX_PREFIX = '@@TURBOX__';
var IS_INNER = "".concat(TURBOX_PREFIX, "isInner");
function Reactive(arg) {
var decorator = function decorator(Target) {
var displayName = Target.displayName || Target.name || '<TURBOX_COMPONENT>';
var _this;
if (typeof Target === 'function' && (!Target.prototype || !Target.prototype.render) && (!Target.prototype || !Target.prototype.isReactClass) && !React.Component.isPrototypeOf(Target)) {
// Function component do not have this context
var ObservableTarget = function ObservableTarget(props) {
var result;
try {
_reactivity.depCollector.start(_this);
var fn = Target;
// target component don't use react.memo
result = fn(props);
_reactivity.depCollector.end();
} catch (error) {
if (!_this[IS_INNER]) {
throw error;
}
return null;
}
return result;
};
var Wrapper = /*#__PURE__*/function (_React$Component) {
function Wrapper() {
(0, _classCallCheck2["default"])(this, Wrapper);
return _callSuper(this, Wrapper, arguments);
}
(0, _inherits2["default"])(Wrapper, _React$Component);
return (0, _createClass2["default"])(Wrapper, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
if (!_reactivity.store) {
(0, _shared.fail)('store is not ready, please init first.');
}
this.unsubscribeHandler = _reactivity.store.subscribe(function (isInner) {
_this[IS_INNER] = isInner;
_this2.forceUpdate();
}, this, _index.IdCustomType);
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.unsubscribeHandler !== void 0) {
this.unsubscribeHandler();
}
_reactivity.depCollector.clear(this);
}
}, {
key: "render",
value: function render() {
_this = this;
_this[_reactivity.REACTIVE_COMPONENT_NAME] = displayName;
return React.createElement(_ErrorBoundary["default"], null, React.createElement(ObservableTarget, _objectSpread({}, this.props)));
}
}]);
}(React.Component);
(0, _index.copyStaticProperties)(Target, Wrapper);
return Wrapper;
}
// class component
var target = Target.prototype || Target;
var baseRender = target.render;
var baseComponentDidMount = target.componentDidMount;
var baseComponentWillUnmount = target.componentWillUnmount;
target.render = function () {
var result;
try {
_reactivity.depCollector.start(this);
result = baseRender.call(this);
_reactivity.depCollector.end();
} catch (error) {
if (!this[IS_INNER]) {
throw error;
}
return null;
}
return result;
};
target.componentDidMount = function () {
var _this3 = this;
baseComponentDidMount && baseComponentDidMount.call(this);
if (!_reactivity.store) {
(0, _shared.fail)('store is not ready, please init first.');
}
this[_reactivity.UNSUBSCRIBE_HANDLER] = _reactivity.store.subscribe(function (isInner) {
_this3[IS_INNER] = isInner;
_this3.forceUpdate();
}, this, _index.IdCustomType);
};
target.componentWillUnmount = function () {
if (this[_reactivity.UNSUBSCRIBE_HANDLER] !== void 0) {
this[_reactivity.UNSUBSCRIBE_HANDLER]();
}
_reactivity.depCollector.clear(this);
baseComponentWillUnmount && baseComponentWillUnmount.call(this);
};
var ObservableTargetComponent = /*#__PURE__*/function (_React$Component2) {
function ObservableTargetComponent() {
(0, _classCallCheck2["default"])(this, ObservableTargetComponent);
return _callSuper(this, ObservableTargetComponent, arguments);
}
(0, _inherits2["default"])(ObservableTargetComponent, _React$Component2);
return (0, _createClass2["default"])(ObservableTargetComponent, [{
key: "render",
value: function render() {
return React.createElement(_ErrorBoundary["default"], null, React.createElement(Target, _objectSpread({}, this.props)));
}
}]);
}(React.Component);
(0, _index.copyStaticProperties)(Target, ObservableTargetComponent);
return ObservableTargetComponent;
};
if (arg === void 0) {
// @reactive()
return decorator;
}
// @reactive
return decorator.call(null, arg);
}