ala-cli/command/plugins/ala-smarty-compiler.js

aladdin develop utils

/**
 * 
 * @file 编译smarty文件插件
 * @author chenrui09
 * @date 2017/5/8
 * 
 */

const fs = require('fs-extra');
const path = require('path');
const vipCompiler = require('../libs/vip-compiler');

let dirRoot = process.cwd();
let appConf = require(path.join(dirRoot, 'app.conf'));

let smartyPath = path.join(appConf.dest, appConf.build.path, appConf.modules.smarty);
let staticRoot = appConf.release.staticRoot;

fs.ensureDirSync(smartyPath);

module.exports = (content, file) => {
    let subpath = file.subpathNoExt.replace(/^\/app\//, '');
    let tmpSubpath = file.subpathNoExt.replace(/^\/app\//, '');
    let tplFile = path.join(file.dirname, 'data_modifier.tpl');
    let dmContent = fs.ensureFileSync(tplFile) || '';

    let result = vipCompiler.cache(file.subpathNoExt, content);
    let renderer = vipCompiler.getRender(file.subpathNoExt);

    let tplContent = `
{%extends "../base/result.tpl"%}
{%block name="title"%}
{%/block%}
{%block name="data_modifier"%}
${dmContent}
{%/block%}

{%block name="content"%}
    {%render_vue name="aladdin/${tmpSubpath}" data=$tplData configVar="__vue_config"%}

    <style data-merge>
        {%$styles = $__vue_config['css']%}
        {%foreach $styles as $styleContent%}
            {%$styleContent%}
        {%/foreach%}
    </style>

    <div class="c-result-content">
        {%$htmlContent = $__vue_config['html']%}
        {%$htmlContent|escape:none%}
    </div>

    <script>
        card.setup({
            data: {
                {%$props = $__vue_config['props']%}
                {%foreach $props as $prop%}
                    {%$prop%}: {%json_encode($tplData[{%$prop%}])%}{%if !$smarty.foreach.foo.last%},{%/if%}
                {%/foreach%}
            },
            selector: {%json_encode($__vue_config['selector'])%}
        });
    </script>

    <script data-merge>
        card.setup(function () {
            require.config({
                paths: {
                    ala_vue: '/se/static/${staticRoot}'
                }
            });

            var $container = $(this.container);
            var selector = this.data.selector;
            var data = this.data.data || {};

            var _module = {
                exports: null
            };
            var renderer;

            (function (module) {
                ${renderer}
            })(_module);
    
            renderer = _module.exports;

            return new Vue({
                el: selector,
                render: renderer.render,
                staticRenderFns: renderer.staticRenderFns,
                components: {
                    App: function (resolve) {
                        require(['${staticRoot + '/' + subpath}'], resolve);
                    }
                },
                data: function () {
                    return data;
                }
            });
        });
    </script>

{%/block%}`;

    let out = path.join(smartyPath, subpath.replace('/index', '/result') + '.tpl');
    let dir = path.dirname(out);

    fs.ensureDirSync(dir);
    fs.writeFile(out, tplContent);

    return content;
};