@hsui/core
Version:
Hundsun frontend runtime core framework
211 lines (209 loc) • 7.03 kB
JavaScript
import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import { Model, Router } from '../core';
/**
* Find which layout the component should render.
* If the component is not specified layout name, `default` is used.
* Otherwise return undefined.
*/
function resolveLayoutName(matched) {
var defaultName = 'default';
var last = matched[matched.length - 1];
if (!last) {
return;
}
var Component = last.components.default;
if (!Component) {
return;
}
var isAsync = typeof Component === 'function' && !Component.options;
if (isAsync) {
return;
}
return getLayoutName(Component) || defaultName;
}
function getLayoutName(Component /* ComponentOptions | VueConstructor */) {
var isCtor = typeof Component === 'function' && Component.options;
var options = isCtor ? Component.options : Component;
if (options.layout) {
return options.layout;
} else {
// Retrieve super component and mixins
var mixins = (options.mixins || []).slice().reverse();
var extend = options.extends || [];
return mixins.concat(extend).reduce(function (acc, c) {
return acc || getLayoutName(c);
}, undefined);
}
}
export function loadAsyncComponents(route) {
var promises = [];
route.matched.forEach(function (record) {
Object.keys(record.components).forEach(function (key) {
var component = record.components[key];
var isAsync = typeof component === 'function' && !component.options;
if (isAsync) {
promises.push(component().then(function (loaded) {
var isEsModule = loaded.__esModule || typeof Symbol !== 'undefined' && loaded[Symbol.toStringTag] === 'Module';
record.components[key] = isEsModule ? loaded.default : loaded;
}));
}
});
});
return Promise.all(promises);
}
/*!
* vue-router-layout v0.1.5
* Lightweight layout resolver for Vue Router.
* https://github.com/ktsn/vue-router-layout
*
* @license
* Copyright (c) 2018 katashin
* Released under the MIT license
* https://github.com/ktsn/vue-router-layout/blob/master/LICENSE
*/
export default function initRouterLayout(resolve) {
Model.use(Router);
Model.mixin({
inject: {
$_routerLayout_notifyRouteUpdate: {
default: null
}
},
beforeRouteUpdate: function beforeRouteUpdate(to, _from, next) {
var _this = this;
return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
var notify;
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
notify = _this.$_routerLayout_notifyRouteUpdate;
if (!notify) {
_context.next = 4;
break;
}
_context.next = 4;
return notify(to);
case 4:
next();
case 5:
case "end":
return _context.stop();
}
}, _callee);
}))();
}
});
return Model.extend({
name: 'RouterLayout',
data: function data() {
return {
layoutName: undefined,
layouts: Object.create(null)
};
},
watch: {
layoutName: function layoutName(name) {
if (!this.layouts[name]) {
this.$set(this.layouts, name, function () {
return resolve(name);
});
}
}
},
provide: function provide() {
var _this2 = this;
return {
$_routerLayout_notifyRouteUpdate: function () {
var _$_routerLayout_notifyRouteUpdate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(to) {
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
_context2.next = 2;
return loadAsyncComponents(to);
case 2:
_this2.layoutName = resolveLayoutName(to.matched) || _this2.layoutName;
case 3:
case "end":
return _context2.stop();
}
}, _callee2);
}));
function $_routerLayout_notifyRouteUpdate(_x) {
return _$_routerLayout_notifyRouteUpdate.apply(this, arguments);
}
return $_routerLayout_notifyRouteUpdate;
}()
};
},
/**
* Somehow, app can't be rendered when navigate back under micro app framework without this hook
*/
mounted: function mounted() {
var _this3 = this;
return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
return _regeneratorRuntime().wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
if (!_this3.$router) {
_context3.next = 4;
break;
}
_context3.next = 3;
return loadAsyncComponents(_this3.$route);
case 3:
_this3.layoutName = resolveLayoutName(_this3.$route.matched) || _this3.layoutName;
case 4:
case "end":
return _context3.stop();
}
}, _callee3);
}))();
},
beforeRouteEnter: function beforeRouteEnter(to, _from, next) {
return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
return _regeneratorRuntime().wrap(function _callee4$(_context4) {
while (1) switch (_context4.prev = _context4.next) {
case 0:
_context4.next = 2;
return loadAsyncComponents(to);
case 2:
next(function (vm) {
vm.layoutName = resolveLayoutName(to.matched) || vm.layoutName;
});
case 3:
case "end":
return _context4.stop();
}
}, _callee4);
}))();
},
beforeRouteUpdate: function beforeRouteUpdate(to, _from, next) {
var _this4 = this;
return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
return _regeneratorRuntime().wrap(function _callee5$(_context5) {
while (1) switch (_context5.prev = _context5.next) {
case 0:
_context5.next = 2;
return loadAsyncComponents(to);
case 2:
_this4.layoutName = resolveLayoutName(to.matched) || _this4.layoutName;
next();
case 4:
case "end":
return _context5.stop();
}
}, _callee5);
}))();
},
render: function render(h) {
var layout = this.layoutName && this.layouts[this.layoutName];
if (!layout) {
return h();
}
return h(layout, {
key: this.layoutName
});
}
});
}