@vue-async/resource-manager/lib/ability/Suspense.js

Resource Manager.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.has = exports.add = exports.del = exports.COMPONENT_NAME = exports.REJECTED = exports.RESOLVED = void 0;
var vue_1 = __importDefault(require("vue"));
var warning_1 = __importDefault(require("warning"));
var currentInstance_1 = require("./currentInstance");
exports.RESOLVED = 'resolved';
exports.REJECTED = 'rejected';
exports.COMPONENT_NAME = 'VueSuspense';
var del = function (asyncFactory, error) {
    var suspIns = asyncFactory.suspenseInstance;
    if (!suspIns) {
        return error(process.env.NODE_ENV === 'production', 'No Suspense instance');
    }
    var asyncFactorys = suspIns.asyncFactorys;
    if (error) {
        suspIns.$emit(exports.REJECTED, error);
        return;
    }
    asyncFactorys.delete(asyncFactory);
    if (asyncFactorys.size === 0) {
        suspIns.$emit(exports.RESOLVED);
    }
};
exports.del = del;
var add = function (asyncFactory) {
    var suspIns = currentInstance_1.currentSuspenseInstance || asyncFactory.suspenseInstance;
    if (!suspIns) {
        return (0, warning_1.default)(process.env.NODE_ENV === 'production', 'No Suspense instance');
    }
    var asyncFactorys = suspIns.asyncFactorys || (suspIns.asyncFactorys = new Set());
    if (suspIns.resolved) {
        suspIns.resolved = false;
        suspIns.setupLoading();
    }
    asyncFactorys.add(asyncFactory);
};
exports.add = add;
var has = function (asyncFactory) {
    var suspIns = currentInstance_1.currentSuspenseInstance || asyncFactory.suspenseInstance;
    if (!suspIns) {
        return (0, warning_1.default)(process.env.NODE_ENV === 'production', 'No Suspense instance');
    }
    return suspIns.asyncFactorys && suspIns.asyncFactorys.has(asyncFactory);
};
exports.has = has;
exports.default = vue_1.default.extend({
    name: exports.COMPONENT_NAME,
    props: {
        delay: {
            type: Number,
            default: 0,
        },
    },
    data: function () {
        return {
            resolved: false,
            rejected: false,
            displayLoading: false,
        };
    },
    methods: {
        setupLoading: function () {
            var _this = this;
            if (this.delay > 0) {
                this._time = setTimeout(function () {
                    _this.displayLoading = true;
                }, this.delay);
            }
            else {
                this.displayLoading = true;
            }
        },
        destoryLoading: function () {
            if (this._time) {
                clearTimeout(this._time);
                this._time = null;
            }
            this.displayLoading = false;
        },
    },
    created: function () {
        var _this = this;
        (0, currentInstance_1.pushSuspenseInstance)(this);
        this.promiser = new Promise(function (reslove, reject) {
            _this.$on(exports.RESOLVED, function () {
                _this.destoryLoading();
                _this.resolved = true;
                reslove(null);
            });
            _this.$on(exports.REJECTED, function (err) {
                _this.destoryLoading();
                _this.rejected = true;
                reject(err);
            });
        });
        // start loading
        this.setupLoading();
    },
    mounted: function () {
        if (!this.asyncFactorys) {
            this.$emit(exports.RESOLVED);
        }
    },
    updated: function () {
        if (!this.resolved)
            return;
        (0, currentInstance_1.popSuspenseInstance)();
    },
    render: function (h) {
        var _a;
        var isVisible = ((_a = this.$options.suspense) === null || _a === void 0 ? void 0 : _a.mode) === 'visible';
        var emptyVNode = this._e();
        var fallback = this.displayLoading ? this.$slots.fallback || [emptyVNode] : [emptyVNode];
        // The `children` is the real content to be rendered
        var children = this.$slots.default || [emptyVNode];
        var rendered;
        if (this.rejected && this.$slots.error) {
            rendered = createWrapper(h, this.$slots.error);
        }
        else {
            rendered = isVisible
                ? createWrapper(h, this.resolved ? children : children.concat(fallback))
                : createWrapper(h, [
                    // We need to render the children, but we should not show the rendered content.
                    createHiddenWrapper(h, children, this.resolved),
                    fallback,
                ]);
        }
        return rendered;
    },
});
function createWrapper(h, children) {
    return h('div', {
        class: { 'vue-suspense-wrapper': true },
    }, children);
}
function createHiddenWrapper(h, tree, display) {
    return h('div', {
        style: { display: display ? 'block' : 'none' },
        class: { 'vue-suspense-hidden-wrapper': true },
    }, tree);
}
//# sourceMappingURL=Suspense.js.map