lavas-core-vue/dist/route-manager.js

/**
 * @file route manager
 * @author panyuqi
 * @desc generate route.js, multi entries in .lavas directory
 */

'use strict';

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

var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

var _stringify = require('babel-runtime/core-js/json/stringify');

var _stringify2 = _interopRequireDefault(_stringify);

var _assign = require('babel-runtime/core-js/object/assign');

var _assign2 = _interopRequireDefault(_assign);

var _set = require('babel-runtime/core-js/set');

var _set2 = _interopRequireDefault(_set);

var _fsExtra = require('fs-extra');

var _path = require('path');

var _crypto = require('crypto');

var _serializeJavascript = require('serialize-javascript');

var _serializeJavascript2 = _interopRequireDefault(_serializeJavascript);

var _lodash = require('lodash.template');

var _lodash2 = _interopRequireDefault(_lodash);

var _router = require('./utils/router');

var _webpack = require('./utils/webpack');

var _path2 = require('./utils/path');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const routerTemplate = (0, _path.join)(__dirname, './templates/router.tmpl');

class RouteManager {

    constructor(config = {}, env) {
        this.config = config;
        this.isDev = env === 'development';

        if (this.config.globals && this.config.globals.rootDir) {
            this.lavasDir = (0, _path.join)(this.config.globals.rootDir, './.lavas');
        }

        this.routes = [];

        this.flatRoutes = new _set2.default();

        this.errorRoute;
    }

    /**
     * rewrite route path with rules
     *
     * @param {Array} rewriteRules rewrite rules
     * @param {string} path original route path
     * @return {string} path rewrited
     */
    rewriteRoutePath(rewriteRules, path) {
        for (let i = 0; i < rewriteRules.length; i++) {
            let rule = rewriteRules[i];
            let { from, to } = rule;
            /**
             * if type of 'from' is regexp, use String.replace
             */
            if (from instanceof RegExp && from.test(path)) {
                return path.replace(from, to);
            }
            /**
             * if type of 'from' is array|string, 'to' must be a
             * single rule, just replace with it
             */
            else if (Array.isArray(from) && from.includes(path) || typeof from === 'string' && from === path) {
                    return to;
                }
        }
        return path;
    }

    /**
     * merge routes with config recursively
     *
     * @param {Array} routes routes
     * @param {Array} routesConfig config
     * @param {Array} rewriteRules rewriteRules
     * @param {Array} parentPath parentPath
     */
    mergeWithConfig(routes, routesConfig = [], rewriteRules = [], parentPath = '') {
        /**
         * In dev mode, we need to add timestamp to every route's hash as prefix.
         * otherwise when we change the code in page.vue, route's hash remains the same,
         * webpack hot middleware will throw a "Duplicate declaration" error.
         */
        let timestamp = this.isDev ? new Date().getTime() : '';
        let errorIndex;

        routes.forEach((route, index) => {
            // add to set
            this.flatRoutes.add(route);

            // rewrite route path with rules
            route.rewritePath = this.rewriteRoutePath(rewriteRules, route.path);
            route.fullPath = parentPath ? `${parentPath}/${route.path}` : route.path;

            // find error route
            if (route.fullPath === this.config.errorHandler.errorPath) {
                this.errorRoute = route;
                // add default error route alias
                this.errorRoute.alias = '*';
                errorIndex = index;
            }

            // find route in config
            let routeConfigArr = routesConfig.filter(function ({ pattern }) {
                return pattern instanceof RegExp ? pattern.test(route.fullPath) : pattern === route.fullPath;
            });

            // mixin with config, rewrites path, add lazyLoading, meta
            let routeConfig;
            if (routeConfigArr.length !== 0) {
                if (routeConfigArr.length === 1) {
                    routeConfig = routeConfigArr[0];
                } else {
                    routeConfig = {};
                    routeConfigArr.forEach(tmpRouteConfig => (0, _assign2.default)(routeConfig, tmpRouteConfig));
                }
            }

            if (routeConfig) {
                let {
                    path: routePath,
                    lazyLoading,
                    chunkname
                } = routeConfig;

                (0, _assign2.default)(route, routeConfig, {
                    rewritePath: routePath || route.rewritePath,
                    lazyLoading: lazyLoading || !!chunkname
                });
            }

            /**
             * generate hash for each route which will be used in routes.js template,
             * an underscore "_" will be added in front of each hash, because JS variables can't
             * start with numbers
             */
            route.hash = timestamp + (0, _crypto.createHash)('md5').update(route.component).digest('hex');

            /**
             * turn route fullPath into regexp
             * eg. /detail/:id => /^\/detail\/[^\/]+\/?$/
             */
            route.pathRegExp = route.rewritePath === '*' ? /^.*$/ : (0, _router.routes2Reg)(route.rewritePath);

            // merge recursively
            if (route.children && route.children.length) {
                this.mergeWithConfig(route.children, routesConfig, rewriteRules, route.fullPath);
            }
        });

        // remove errorRoute and add it to the end
        if (errorIndex !== undefined) {
            routes.splice(errorIndex, 1);
        }
    }

    /**
     * generate routes content which will be injected into routes.js
     * based on nested routes
     *
     * @param {Array} routes route list
     * @return {string} content
     */
    generateRoutesContent(routes) {
        const generate = routes => routes.map(cur => {
            // Call `this.$router.replace({name: xxx})` when path of 'xxx' contains '*' will throw error
            // see https://github.com/vuejs/vue-router/issues/724
            // Solution: write a normal path and add alias with '*'
            let route = {
                path: cur.rewritePath,
                component: `_${cur.hash}`,
                meta: cur.meta || {}
            };

            if (cur.name) {
                route.name = cur.name;
            }

            if (cur.alias) {
                route.alias = cur.alias;
            }

            if (cur.redirect) {
                route.redirect = cur.redirect;
            }

            if (cur.children) {
                route.children = generate(cur.children);
            }

            return route;
        });

        return (0, _stringify2.default)(generate(routes), undefined, 4).replace(/"component": "(_.+)"/mg, '"component": $1');
    }

    processRouterConfig(routerConfig) {
        let {
            mode = 'history',
            base = '/',
            pageTransition = { enable: false },
            scrollBehavior
        } = routerConfig;
        // set page transition, support 2 types: slide|fade
        let transitionType = pageTransition.type;
        if (transitionType === 'slide') {
            pageTransition = (0, _assign2.default)({
                enable: true,
                slideLeftClass: 'slide-left',
                slideRightClass: 'slide-right',
                alwaysBackPages: ['index'],
                alwaysForwardPages: []
            }, pageTransition);
        } else if (transitionType) {
            pageTransition = (0, _assign2.default)({
                enable: true,
                transitionClass: transitionType
            }, pageTransition);
        } else {
            console.log('[Lavas] Page transition disabled');
            pageTransition = { enable: false };
        }

        // scrollBehavior
        if (scrollBehavior) {
            scrollBehavior = (0, _serializeJavascript2.default)(scrollBehavior).replace('scrollBehavior(', 'function(');
        }

        return { mode, base, pageTransition, scrollBehavior };
    }

    /**
     * write routes.js
     *
     */
    writeRoutesSourceFile() {
        var _this = this;

        return (0, _asyncToGenerator3.default)(function* () {
            let writeFile = _this.isDev ? _webpack.writeFileInDev : _fsExtra.outputFile;
            let { mode, base, pageTransition, scrollBehavior } = _this.processRouterConfig(_this.config.router);
            // add errorRoute to the end
            _this.routes.push(_this.errorRoute);
            let routesFilePath = (0, _path.join)(_this.lavasDir, 'router.js');
            let routesContent = _this.generateRoutesContent(_this.routes);

            let routesFileContent = (0, _lodash2.default)((yield (0, _fsExtra.readFile)(routerTemplate, 'utf8')))({
                router: {
                    mode,
                    base,
                    routes: _this.flatRoutes,
                    scrollBehavior,
                    pageTransition
                },
                routesContent
            });
            yield writeFile(routesFilePath, routesFileContent);
        })();
    }

    writeRoutesJsonFile() {
        var _this2 = this;

        return (0, _asyncToGenerator3.default)(function* () {
            let generateRoutesJson = function (route) {
                let tmpRoute = {
                    path: route.rewritePath,
                    name: route.name,
                    meta: route.meta || {}
                };

                if (route.alias) {
                    tmpRoute.alias = route.alias;
                }

                if (route.children) {
                    tmpRoute.children = [];
                    route.children.forEach(function (child) {
                        return tmpRoute.children.push(generateRoutesJson(child));
                    });
                }

                return tmpRoute;
            };

            let routerConfig = _this2.config.router;
            let routesJson = {
                ssr: routerConfig.ssr,
                mode: routerConfig.mode,
                base: routerConfig.base,
                routes: []
            };

            _this2.routes.forEach(function (route) {
                return routesJson.routes.push(generateRoutesJson(route));
            });

            yield (0, _fsExtra.outputFile)((0, _path2.distLavasPath)(_this2.config.build.path, 'routes.json'), (0, _stringify2.default)(routesJson, null, 4));
        })();
    }

    /**
     * output routes.js into .lavas according to /pages
     *
     */
    buildRoutes() {
        var _this3 = this;

        return (0, _asyncToGenerator3.default)(function* () {
            const { routes: routesConfig = [], rewrite: rewriteRules = [], pathRule } = _this3.config.router;
            _this3.flatRoutes = new _set2.default();

            // generate routes according to pages dir
            _this3.routes = yield (0, _router.generateRoutes)((0, _path.join)(_this3.lavasDir, '../pages'), {
                routerOption: { pathRule }
            });

            // merge with routes' config
            _this3.mergeWithConfig(_this3.routes, routesConfig, rewriteRules);

            // write route.js
            yield _this3.writeRoutesSourceFile();

            if (!_this3.isDev) {
                // write routes.json
                yield _this3.writeRoutesJsonFile();
            }
        })();
    }
}
exports.default = RouteManager;
module.exports = exports['default'];