clam/lib/compile.js

var debug = require('debug')('clam:compile');
var fs = require('fs');
var path = require('path');
var isUtf8 = require('is-utf8');
var _ = require('underscore');
var iconv = require('iconv-lite');
var util = require('util');
var config = require('./config.js');
var proxy = require("./proxy.js");
var assetUrl = require('./asseturl.js');

var J = require("juicer");
J.register('stringify', JSON.stringify);
J.register("random", function(){ return (new Date()).valueOf(); });

var mocker = require('./mocker.js');
var assetsTool = require('./assetsTool');

var scriptExtern = /<script[^>]*? src=['"]([^"']*?)['"].*?><\/script>/g;
var styleExtern = /<link[^>]*? href=['"]([^"']*?)['"].*>/g;
var assetsToolExtern = /\$assetsTool.(use|require|injectScript|injectStyle)\((['"][^\s^\$]*['"]\s*,?\s*){0,2}\)/g;
var recoverAssetsToolExtern = /\{\{__assetsTool__\d*\}\}/g;
var assetsToolPrefix = '__assetsTool__';

/**
 * 从一段文本中抽离Assets
 * @param pageContent
 * @returns {{scripts: Array, styles: Array, pageContent: XML}}
 */
function takeOutAssets(pageContent) {
    pageContent = pageContent.replace(/\<\!\-\-^#.*\-\-\>/g, '');
    var head_scripts = [], tail_scripts = [];
    var styles = [];
    var movetoReg = /clam-moveto=['"]([^"']*?)['"]/;
    pageContent = pageContent.replace(scriptExtern, function (mm) {
        var m = mm.match(movetoReg);
        mm = mm.replace(movetoReg, '');
        if (m && typeof m[1] != "undefined") {
            if (m[1] == "head") {
                head_scripts.push(mm);
                return '';
            }
            else if (m[1] == "tail") {
                tail_scripts.push(mm);
                return '';
            }
            else {
                return mm;
            }
        }
        else {
            head_scripts.push(mm);
            return '';
        }
    });
    pageContent = pageContent.replace(styleExtern, function ($1) {
        if ($1.match(/rel\s{0,}=\s{0,}[\'\"]stylesheet[\"\']/) || $1.match(/type\s{0,}=\s{0,}[\'\"]text\/css[\"\']/)) {
            styles.push($1);
            return '';
        }
        else {
            return $1;
        }
    });
    head_scripts = _.uniq(head_scripts);
    tail_scripts = _.uniq(tail_scripts);
    styles = _.uniq(styles);
    return {head_scripts: head_scripts, tail_scripts: tail_scripts, styles: styles, pageContent: pageContent};
}
/**
 * 解析assetsTool内容
 * @param content 
 * @returns content
 */
function parseAssetsTool(content){
    var assetsToolPositionCount = -1;
    var assetsMap = [];
    var pageContent = content.replace(assetsToolExtern, function ($1, $2, $3) {
        saveAssetsMap(assetsMap,$1,++assetsToolPositionCount);
        return '{{'+assetsToolPrefix + assetsToolPositionCount + '}}';
    });
    return recoverAssetsTool(pageContent,assetsMap);
}
/**
 * 生成assetsTool的模块列表
 */
function saveAssetsMap(root,content,pos){
    root.push({
        express:content,
        id:pos
    });
}
/**
 * 复原assetsTool
 * @param content
 * @returns content
 */
function recoverAssetsTool(content,map){
    // 对map排序，将injectStyle和injectStyle排到最后执行
    var requireMap = [];
    var placeholderMap = [];

    assetsTool.clearCacheMod();

    map.forEach(function(i) {
        /\$assetsTool.inject(Script|Style).*/g.test(i.express) ?
            placeholderMap.push(i):
            requireMap.push(i);
    });

    map = requireMap.concat(placeholderMap);
    var assetsResult = assetsTool.feLoader(map);

    function getAssets(id){
        var ret = '';
        assetsResult.forEach(function(i){
            if(i.id == id){
                ret = i.express;
                return;
            }
        });
        return ret;
    }
    content = content.replace(recoverAssetsToolExtern, function ($1, $2, $3) {
        return getAssets(parseInt($1.split(assetsToolPrefix)[1]));
    });
    return content;
}
/**
 * 解析页面内容
 * @param page 页面路径
 * @param url  对应url(用于替换js和css引用)
 * @param libs 库路径
 * @param rootContent 页面路径对应的内容。如果有，则无需从页面路径获取内容
 * @return {Object}
 */
function parseInfo(page, libs, cdnPath, rootContent, url) {
    debug('--------parseInfo--------%s',url);
    var pageContent = ssi(page, libs, cdnPath, null, rootContent, url);
    var asset = takeOutAssets(pageContent);
    var head_scripts = asset.head_scripts, tail_scripts = asset.tail_scripts;
    var styles = asset.styles;
    pageContent = asset.pageContent;
    var headTail = pageContent.indexOf('</head>');
    var bodyContent = headTail!=-1 ? pageContent.slice(headTail) : '';

    return {file: page, pageContent: pageContent, headTail: headTail, bodyContent: bodyContent, head_scripts: head_scripts, tail_scripts: tail_scripts, styles: styles};
}

/**
 * 渲染一个页面为最终样式。js和css提到头部。
 * @param page
 * @param url
 * @param libs
 * @param rootContent 页面路径对应的内容。如果有，则无需从页面路径获取内容
 * @return {*}
 */
var render = function(page, libs, cdnPath, rootContent, url) {
    debug('--------render--------%s',url);
    var ret = parseInfo(page, libs, cdnPath, rootContent, url);
    var pageContent = ret.pageContent;
    var headTail = ret.headTail;
    var bodyContent = ret.bodyContent;
    var head_scripts = ret.head_scripts, tail_scripts = ret.tail_scripts;
    var styles = ret.styles;

    var headArea = pageContent.slice(0, headTail);
    var bodyTail = bodyContent.indexOf('</body>');
    var bodyArea = bodyContent.slice(0, bodyTail);
    var bodyTailArea = bodyContent.slice(bodyTail);
    
    var head_scriptArea = '';
    head_scripts.forEach(function (s) {
        head_scriptArea += '\n' + s;
    });
    var tail_scriptArea = '';
    tail_scripts.forEach(function (s) {
        tail_scriptArea += '\n' + s;
    });

    var styleArea = '';
    styles.forEach(function (s) {
        styleArea += '\n' + s;
    });

    if (headTail == -1) {
        pageContent = '<html><head><meta charset="'+config.get('project').charset[0]+'"><meta name="viewport" content="initial-scale=1" />' + styleArea + head_scriptArea + '$assetsTool.injectStyle()</head><body>' + pageContent + tail_scriptArea + '$assetsTool.injectScript("foot")</body></html>';    }
    else {
        pageContent = headArea + styleArea + head_scriptArea + bodyArea + tail_scriptArea + bodyTailArea;
    }

    pageContent = pageContent.replace(/\$CLAM_VER\$[\/]?/g, '');
    return pageContent;
}

/**
 * 获取自定义配置
 * @param content
 * @param reg
 */
function parseParam(content, reg) {
    var matched = content.match(reg);
    var ret = {};
    if (matched && matched[1]) {
        matched[1].replace(/[\n\r]/g, '');
        try {
            ret = JSON.parse(matched[1]);
        } catch (e) {
            console.log('格式错误的模板变量:%s', matched[1]);
            return {};
        }
        return ret;
    }
    return ret;
}

function parsePageParam(content) {
    return parseParam(content, /<\!--#def([\s\S]*?)-->/);
}

function parseTmsParam(content) {
    return parseParam(content, /<\!--#tms([\s\S]*?)-->/);
}

function delPageParamArea(content){
    return content.replace(/<\!--#def([\s\S]*?)-->/, '');
}

/**
 * 返回携带内容携带真正线上资源路径的内容
 * 处理相对资源引用等
 * @param rootContent 文本内容，如果没有，则从page所指向的路径中获取
 * @param page 文件路径，如果rootContent指定，则失效
 * @param cdnPath 项目assets上线后的路径前缀
 * @returns 处理完毕后的页面/模块内容
 */
function textWithOnlineAssetsUrl(rootContent, page, cdnPath) {
    var pageContent = null;
    if (rootContent) {
        pageContent = rootContent;
    }
    else {
        pageContent = fs.readFileSync(page);
        pageContent = isUtf8(pageContent) ? pageContent.toString() : iconv.decode(pageContent, 'gbk');
    }

    //获取当前页面到源代码根目录的相对路径
    var srcRoot = path.join(config.root(), 'src');
    var urlDir = path.relative(srcRoot, path.dirname(page));
    debug('引用文件相对路径:%s', urlDir);
    pageContent = assetUrl.toAbsolutePath(pageContent, urlDir);
    return pageContent;
}

/**
 * 混合模块定义和内容
 * 根据modefs中定义的偏移量，替换内容信息，重组content
 * @param modDefs
 * @param pageContent
 * @returns {string}
 */
function mixContentAndModules(modDefs, pageContent) {
    var snippets = [];
    var i;
    for (i = 0; i < modDefs.length; i++) {
        if (i === 0) {
            snippets.push(pageContent.slice(0, modDefs[i].begin));
            continue;
        }
        snippets.push(pageContent.slice(modDefs[i - 1].end, modDefs[i].begin));
    }
    snippets.push(pageContent.slice(modDefs[modDefs.length - 1].end, pageContent.length));

    var output = "";
    for (i = 0; i < modDefs.length; i++) {
        output = output + snippets[i] + (modDefs[i].content ? modDefs[i].content : '');
        if (i === modDefs.length - 1) {
            output += snippets[i + 1];
        }
    }
    return output;
}

/**
 * 按照SSI解析输出html
 * 解析html时会依次遍历所有模块
 * 改函数处理所有与相对路径有关的内容替换，如根据相对路径替换其中的资源路径
 *
 * @param page  页面或者模块文件名的绝对路径
 * @param libs  其他模块搜索目录
 * @param cdnPath 最终assets上线后所在的cdn域名+路径前缀
 * @param parentParam 父级容器传递给当然页面片段的变量
 *                    变量使用优先级
 *                    网络>本地http接口模拟>if接口>文件中即时定义的变量
 * @param rootContent 页面路径对应的内容。如果有，则无需从页面路径获取内容
 * @param url     页面访问url,如果该渲染请求由网络请求触发，则为请求url
 *                如果渲染请求由本地触发，则为到src目录的相对路径
 * @return {*}
 */
var ssi = function(page, libs, cdnPath, parentParam, rootContent, url) {
    debug('开始渲染, 文件:%s,库目录:%s', page, util.inspect(libs));
    debug('--------ssi--------%s',url);
    //页面不存在，返回空内容
    if (!fs.existsSync(page)) {
        return '';
    }
    //处理cdnpath中最后一个'/'符号。如果有，去掉。
    if (cdnPath[cdnPath.length - 1] === '/') {
        cdnPath = cdnPath.slice(0, cdnPath.length - 1);
    }

    var pageContent = rootContent;
    if (!rootContent) {
        pageContent = fs.readFileSync(page);
        pageContent = isUtf8(pageContent) ? pageContent.toString() : iconv.decode(pageContent, 'gbk');

    }
    var pageParam = parsePageParam(pageContent);

    var param = {};
    debug('getMixedMockDate1%s', util.inspect(param));
    //本地参数覆盖外部参数
    if (parentParam) {
        for (var attr in pageParam) { parentParam[attr] = pageParam[attr]; }
        param = parentParam;
    }
    else {
        debug('内部获取参数%s', util.inspect(pageParam));
        for (var attr in pageParam) {
            if(attr[0] === '#'){
                var attrFixed = attr.slice(1, attr.length);
                param[attrFixed] = pageParam[attr];
                continue;
            }
            param[attr] = pageParam[attr];
        }
    }
    debug('getMixedMockDate2%s', util.inspect(param));
    param = mocker.getMixedMockDate(param, url, (!!rootContent));
    debug('真实运作的参数%s', util.inspect(param));

    try {
        pageContent = J(pageContent, param);
    }
    catch (e) {
        debug('Juicer出错%s\n 对象:%s', pageContent, util.inspect(param));
    }

    pageContent = textWithOnlineAssetsUrl(pageContent, page, cdnPath);
    pageContent = delPageParamArea(pageContent);

    //获得模块及其起始位置信息
    var modDefs = getModuleDefs(pageContent);
    if (modDefs.length === 0) {
        return pageContent;
    }

    //获取子模块内容
    var i = 0, j = 0, k = 0, d = 0,
        modFile = '';
    for (; i < modDefs.length; i++) {
        //在当前目录寻找子模块，当前目录有可能是页面目录，也有可能在模块目录中
        modFile = modDefs[i].file;
        if (modDefs[i].tms.match(/^\d+\:/)) {
            modDefs[i].content = "<!--#tms file=\""+modDefs[i].tms.replace(/^\d+\:/, '')+"\"-->";
        }
        else if (modFile) {
            var modPath = path.join(path.dirname(page), modFile);
            var modExist = fs.existsSync(modPath);
            debug('模块%s, 路径%s,在页面库中%s', modFile, modPath, modExist);

            //当前目录没找到，到模块库中寻找
            if (!modExist) {
                for (j = 0; j < libs.length && !modExist; j++) {
                    modPath = path.join(libs[j], modFile);
                    modExist = fs.existsSync(modPath);
                    if (modExist) {
                        break;
                    }
                }
            }

            //模块库中仍然没找到，令内容为空，处理其他模块
            if (!modExist) {
                modDefs[i].content = '';
                continue;
            }

            //处理模块传参
            var paramAttr = modDefs[i].param, passedParam = null;
            if (param) {
                if (paramAttr) {
                    if (paramAttr.match(/\:/)) {
                        paramAttr = paramAttr.replace(/\s{0,}([\:\,])\s{0,}/g, function(a,b) {return b;});
                        try {
                            var arr = paramAttr.split(","), m = [], deep = [], pp = {};
                            passedParam = {};
                            for (k=0; k<arr.length; k++) {
                                m = arr[k].match(/(.+)\:(.+)/);
                                if (m && typeof m[1] != "undefined" && typeof m[2] != "undefined") {
                                    if (m[2].match(/^\$(.+)/)) {
                                        deep = m[2].replace(/^\$/,'').split('.');
                                        pp = param;
                                        for (d= 0; d<deep.length; d++)    pp = pp[deep[d]];
                                        passedParam[m[1]] = pp;
                                    }
                                    else {
                                        passedParam[m[1]] = m[2];
                                    }
                                }
                            }
                        }
                        catch (e) {console.log(e);}
                    }
                    else {
                        passedParam = param[paramAttr];
                    }
                }
                else {
                    passedParam = param;
                }
            }

            debug('传递的参数是%s', util.inspect(passedParam));
            //渲染所有子模块内容
            modDefs[i].content = ssi(modPath, libs, cdnPath, passedParam, null, url ? url : page);
        }
    }

    var output = mixContentAndModules(modDefs, pageContent);
    return output;
}

/**
 *
 * 返回一个Pagelet集合，一个Pagelet以数组的型式记录了以下信息
 * {
 *   file     :   文件名=>eachFile,
 *   begin    :   在内容中的开始位置=>itBegin,
 *   end      :   在内容中的结束位置=>itEnd
 *   content  :   Pagelet的内容
 * }
 * @param c
 * @return {Array}
 */
var getModuleDefs = function(c) {
    var file2offset = [], itBegin = 0, itEnd = 0, itFile='', itParam='', itTMS='',
        it = 0, line = '', file_args = [], file = [], args = [], tms = [];

    while( (it = c.indexOf('<!--#include', it) ) !== -1) {
        itTMS = itFile = itParam = '';

        itBegin = it;
        it = it + 12;
        while(c[it]  === ' ') it++;
        itEnd = c.indexOf('-->', it);
        itEnd = (itEnd === -1) ? (c.length-1) : (itEnd+3);

        // 区分简写和完整写法
        line = c.slice(it, itEnd-3);
        if (c[it].match(/["']/)) {
            file_args = line
                .replace(/(^\s{0,}["']\s{0,})|(\s{0,}["']\s{0,}$)/g, '')
                .split(/\s{0,}["']\s+["']\s{0,}/g);
            itFile  = file_args[0];
            if (itFile.match(/^tms\:\d+\:/)) {
                itTMS = itFile.replace(/^tms\:/, '');
                itFile = '';
            }
            itParam = file_args[1] ? file_args[1] : '';
        }
        else {
            file = line.match(/file\s{0,}=\s{0,}["']\s{0,}([^"']*?)\s{0,}["']/);
            args = line.match(/data\s{0,}=\s{0,}["']\s{0,}([^"']*?)\s{0,}["']/);
            tms  = line.match(/tms\s{0,}=\s{0,}["']\s{0,}([^"']*?)\s{0,}["']/);
            itFile  = (file && file[1]) ? file[1] : '';
            itParam = (args && args[1]) ? args[1] : '';
            itTMS   = (tms  && tms[1])  ? tms[1]  : '';
        }

        file2offset.push({file: itFile, begin: itBegin, end: itEnd, content:'', param: itParam, tms:itTMS});
        it = itEnd;
    }

    return file2offset;
}

exports.render = render;
exports.ssi = ssi;
exports.parseInfo = parseInfo;
exports.textWithOnlineAssetsUrl = textWithOnlineAssetsUrl;
exports.getModuleDefs = getModuleDefs;
exports.mixContentAndModules = mixContentAndModules;
exports.takeOutAssets = takeOutAssets;
exports.parsePageParam = parsePageParam;
exports.parseTmsParam = parseTmsParam;
exports.parseAssetsTool = parseAssetsTool;