lavas-core-vue/dist/renderer.js

'use strict';

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

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

var _stringify2 = _interopRequireDefault(_stringify);

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

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

var _promise = require('babel-runtime/core-js/promise');

var _promise2 = _interopRequireDefault(_promise);

var _path = require('path');

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

var _lodash = require('lodash');

var _vueServerRenderer = require('vue-server-renderer');

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

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

var _template = require('./utils/template');

var _template2 = _interopRequireDefault(_template);

var _logger = require('./utils/logger');

var _logger2 = _interopRequireDefault(_logger);

var _constants = require('./constants');

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

let templateName; /**
                   * @file ssr renderer
                   * @author *__ author __*{% if: *__ email __* %}(*__ email __*){% /if %}
                   */

class Renderer {
    constructor(core) {
        this.isProd = core.isProd;
        this.config = core.config;
        this.rootDir = this.config.globals && this.config.globals.rootDir;
        this.cwd = core.cwd;
        this.renderer = null;
        this.serverBundle = null;
        this.clientManifest = null;
        this.template = null;
        this.resolve = null;
        this.readyPromise = new _promise2.default(r => this.resolve = r);
    }

    /**
     * get template name
     *
     * @param {boolean} fromDist from dist dir
     * @return {string} template path
     */
    getTemplateName(fromDist) {
        if (fromDist) {
            if ((0, _fsExtra.pathExistsSync)((0, _path.join)(this.rootDir, 'lavas', _constants.SSR_TEMPLATE_HTML))) {
                return _constants.SSR_TEMPLATE_HTML;
            }

            return _constants.TEMPLATE_HTML;
        }

        if (templateName) {
            return templateName;
        }

        return (0, _path.basename)(this.getTemplatePath());
    }

    /**
     * get template path
     *
     * @param {?string} entryName entryName when MPA, undefined when SPA & SSR
     * @return {string} template path
     */
    getTemplatePath() {
        if (templateName) {
            return (0, _path.join)(this.rootDir, `core/${templateName}`);
        }

        // core/ssr.html.tmpl
        let tempPath = (0, _path.join)(this.rootDir, `core/${_constants.SSR_TEMPLATE_HTML}`);
        if (!(0, _fsExtra.pathExistsSync)(tempPath)) {
            // core/index.html.tmpl
            tempPath = (0, _path.join)(this.rootDir, `core/${_constants.TEMPLATE_HTML}`);
        }

        if (!(0, _fsExtra.pathExistsSync)(tempPath)) {
            throw new Error(`${_constants.SSR_TEMPLATE_HTML} or ${_constants.TEMPLATE_HTML} required`);
        }

        templateName = (0, _path.basename)(tempPath);
        return tempPath;
    }

    /**
     * return SSR template content
     *
     * @param {string} base base url
     * @return {string} templateContent
     */
    getTemplate(base = '/') {
        var _this = this;

        return (0, _asyncToGenerator3.default)(function* () {
            let templatePath = _this.getTemplatePath();

            return _template2.default.server((yield (0, _fsExtra.readFile)(templatePath, 'utf8')), base);
        })();
    }

    /**
     * create renderer with built serverBundle & clientManifest in production mode
     */
    createWithBundle() {
        var _this2 = this;

        return (0, _asyncToGenerator3.default)(function* () {
            _this2.serverBundle = yield (0, _fsExtra.readJson)((0, _path2.distLavasPath)(_this2.cwd, _constants.SERVER_BUNDLE));

            let templatePath = (0, _path2.distLavasPath)(_this2.cwd, _this2.getTemplateName(true));
            let manifestPath = (0, _path2.distLavasPath)(_this2.cwd, _constants.CLIENT_MANIFEST);
            if (_this2.config.build.ssr) {
                _this2.template = yield (0, _fsExtra.readFile)(templatePath, 'utf-8');
                _this2.clientManifest = yield (0, _fsExtra.readJson)(manifestPath);
            }

            yield _this2.createRenderer();
        })();
    }

    buildProd() {
        var _this3 = this;

        return (0, _asyncToGenerator3.default)(function* () {
            let { ssr, path, stats } = _this3.config.build;

            // start to build client & server configs
            yield (0, _webpack.webpackCompile)([_this3.clientConfig, _this3.serverConfig], stats);

            // copy index.template.html to dist/lavas/
            if (ssr) {
                let templateContent = yield _this3.getTemplate(_this3.config.router.base);
                let distTemplatePath = (0, _path2.distLavasPath)(path, _this3.getTemplateName());

                yield (0, _fsExtra.outputFile)(distTemplatePath, templateContent);
            }
        })();
    }

    buildDev() {
        var _this4 = this;

        return (0, _asyncToGenerator3.default)(function* () {
            // add watcher for each template
            let templatePath = _this4.getTemplatePath();
            _this4.addWatcher(templatePath, 'change', (0, _asyncToGenerator3.default)(function* () {
                yield _this4.refreshFiles();
            }));
        })();
    }

    /**
     * if any of clientManifest, serverBundle and template changed, refresh them and
     * create new renderer
     */
    refreshFiles() {
        var _this5 = this;

        return (0, _asyncToGenerator3.default)(function* () {
            _logger2.default.info('build', 'refresh ssr bundle & manifest');

            let changed = false;
            let templateChanged = false;

            let clientManifestPath = (0, _path2.distLavasPath)(_this5.clientConfig.output.path, _constants.CLIENT_MANIFEST);
            if (_this5.clientMFS.existsSync(clientManifestPath)) {
                let clientManifestContent = _this5.clientMFS.readFileSync(clientManifestPath, 'utf-8');
                if (_this5.clientManifest && (0, _stringify2.default)(_this5.clientManifest) !== clientManifestContent) {
                    changed = true;
                }
                _this5.clientManifest = JSON.parse(clientManifestContent);
            }

            let serverBundlePath = (0, _path2.distLavasPath)(_this5.serverConfig.output.path, _constants.SERVER_BUNDLE);
            if (_this5.serverMFS.existsSync(serverBundlePath)) {
                let serverBundleContent = _this5.serverMFS.readFileSync(serverBundlePath, 'utf8');
                if (_this5.serverBundle && (0, _stringify2.default)(_this5.serverBundle) !== serverBundleContent) {
                    changed = true;
                }
                _this5.serverBundle = JSON.parse(serverBundleContent);
            }

            let templateContent = yield _this5.getTemplate(_this5.config.router.base);
            if (_this5.template !== templateContent) {
                changed = true;
                templateChanged = true;
            }
            _this5.template = templateContent;

            if (changed) {
                yield _this5.createRenderer();

                // if we detect template changed, publish reload event to client
                if (templateChanged) {
                    _this5.reloadClient();
                }
            }
        })();
    }

    /**
     * only called in SSR mode
     *
     * @param {Object} clientConfig client webpack config
     * @param {Object} serverConfig server webpack config
     */
    build(clientConfig, serverConfig) {
        var _this6 = this;

        return (0, _asyncToGenerator3.default)(function* () {
            _this6.clientConfig = clientConfig;
            _this6.serverConfig = serverConfig;

            if (_this6.isProd) {
                yield _this6.buildProd();
            } else {
                yield _this6.buildDev();
            }
        })();
    }

    /**
     * create renderer
     */
    createRenderer() {
        var _this7 = this;

        return (0, _asyncToGenerator3.default)(function* () {
            if (_this7.serverBundle && _this7.clientManifest) {
                let isFirstTime = !_this7.renderer;
                let inject = !/\{\{\{\s*render/.test(_this7.template);
                _this7.renderer = (0, _vueServerRenderer.createBundleRenderer)(_this7.serverBundle, {
                    template: _this7.template,
                    clientManifest: _this7.clientManifest,
                    shouldPrefetch: function (file, type) {
                        if (type === 'script') {
                            // exclude the workbox files in /static copied by copy-webpack-plugin
                            return !/(workbox-v\d+\.\d+\.\d+.*)|(sw-register\.js)|(precache-manifest\.)/.test(file);
                        }
                        return true;
                    },
                    runInNewContext: false,
                    inject
                });

                // If this is the first time, use resolve
                if (isFirstTime) {
                    _this7.resolve(_this7.renderer);
                }
            }
        })();
    }

    render(context = {}) {
        var _this8 = this;

        return (0, _asyncToGenerator3.default)(function* () {
            let ctx = {};

            // merge with default context
            (0, _lodash.merge)(ctx, {
                title: 'Lavas', // default title
                config: _this8.config // mount config to ctx which will be used when rendering template
            }, context);

            let renderer = yield _this8.renderer ? _promise2.default.resolve(_this8.renderer) : _this8.readyPromise;

            // render to string
            return new _promise2.default(function (resolve) {
                renderer.renderToString(ctx, function (err, html) {
                    return resolve({ err, html });
                });
            });
        })();
    }
}
exports.default = Renderer;
module.exports = exports['default'];