html-flavors/src/stringifyReactComponent.js

HTML conversion tools

module.exports = function stringifyReactComponent(tree) {
    // TODO move code for merged components (e.g. ++variableCounter or allClassesSame)
    // to separate functions, which will be injected to this function.

    function identity(v) {
        return v;
    }

    var variableCounter = 0;
    function visit(node) {
        if (node.type === 'text') {
            if (typeof node.text === 'string') return node.text;
            return '{ props.var' + ++variableCounter + ' }';
        }
        var tag = typeof node.tag === 'string' ? node.tag : 'props.var' + ++variableCounter;
        var classes = node.classes ? node.classes.filter(identity) : [];
        var allClassesSame = !classes.filter(function (cls) {
            return cls.type === 'optional';
        }).length;
        var attrs = [
            {name: 'className', value: classes.join(' ')}
        ];
        //var sattrs = allClassesSame ? classes.length ? 'className="' + classes.join(' ') + '"' : '' : 'className={ props.var' + ++variableCounter + ' }';
        var sattrs = attrs.filter(function nonEmpty(attr) {return attr.value;})
            .map(function (attr) {
                var sepBegin = attr.sepBegin || '"';
                var sepEnd = attr.sepEnd || '"';
                return attr.name + "=" + sepBegin + attr.value + sepEnd;
            }).join(' ');
        var left = '<' + tag + (sattrs.length? ' ' + sattrs : '') + '>';
        var right = '</' + tag + '>';
        var children = (node.children || []).map(visit).join('');
        return left + children + right;
    }

    var beginning = 'function Merged (props) {\n    return (';
    var end = ');\n}';

    return beginning + visit(tree) + end;
};