mobx-vue/lib/observer.js

Vue bindings for MobX

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/**
 * @author Kuitos
 * @homepage https://github.com/kuitos/
 * @since 2018-05-22 16:39
 */
var mobx_1 = require("mobx");
var vue_1 = tslib_1.__importDefault(require("vue"));
var collectData_1 = tslib_1.__importDefault(require("./collectData"));
// @formatter:off
// tslint:disable-next-line
var noop = function () { };
function observer(Component) {
    var name = Component.name || Component._componentTag || (Component.constructor && Component.constructor.name) || '<component>';
    var originalOptions = typeof Component === 'object' ? Component : Component.options;
    // while parameter was component options, we could use it directly
    // otherwise we only use its data definition
    // we couldn't merge the options when Component was a VueClass, that will merge the lifecycle twice after we called Component.extend
    var dataDefinition = originalOptions.data;
    var options = tslib_1.__assign({}, typeof Component === 'object' ? Component : {}, { name: name, data: function (vm) { return collectData_1.default(vm, dataDefinition); } });
    // remove the parent data definition to avoid reduplicate invocation
    originalOptions.data = {};
    var Super = (typeof Component === 'function' && Component.prototype instanceof vue_1.default) ? Component : vue_1.default;
    var ExtendedComponent = Super.extend(options);
    var dispose = noop;
    var _a = ExtendedComponent.prototype, $mount = _a.$mount, $destroy = _a.$destroy;
    ExtendedComponent.prototype.$mount = function () {
        var _this = this;
        var args = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            args[_i] = arguments[_i];
        }
        var mounted = false;
        var originalRender;
        var reactiveRender = function () {
            reaction.track(function () {
                if (!mounted) {
                    $mount.apply(_this, args);
                    mounted = true;
                    // rewrite the render method to avoid losing track when component updated by vue watcher
                    originalRender = _this._watcher.getter;
                    _this._watcher.getter = reactiveRender;
                }
                else {
                    originalRender.call(_this, _this);
                }
            });
            return _this;
        };
        var reaction = new mobx_1.Reaction(name + ".render()", reactiveRender);
        dispose = reaction.getDisposer();
        return reactiveRender();
    };
    ExtendedComponent.prototype.$destroy = function () {
        var args = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            args[_i] = arguments[_i];
        }
        dispose();
        $destroy.apply(this, args);
    };
    Object.defineProperty(ExtendedComponent, 'name', {
        writable: false,
        value: name,
        enumerable: false,
        configurable: false,
    });
    return ExtendedComponent;
}
exports.observer = observer;
exports.Observer = observer;
//# sourceMappingURL=observer.js.map