mume-with-litvis/out/src/render-enhancers/fenced-diagrams.js

Fork of mume with added http://litvis.org/

"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
Object.defineProperty(exports, "__esModule", { value: true });
// tslint:disable:ban-types no-var-requires
const block_attributes_1 = require("block-attributes");
const YAML = require("yamljs");
const ditaa_1 = require("../ditaa");
const compute_checksum_1 = require("../lib/compute-checksum");
const puml_1 = require("../puml");
const utility_1 = require("../utility");
const vega_1 = require("../vega");
const vega_lite_1 = require("../vega-lite");
const viz_1 = require("../viz");
const ensureClassInAttributes = (attributes, className) => {
    const existingClassNames = attributes["class"] || "";
    if (existingClassNames.split(" ").indexOf(className) === -1) {
        return Object.assign(Object.assign({}, attributes), { ["class"]: `${existingClassNames} ${className}`.trim() });
    }
};
// same order as in docs
const supportedLanguages = [
    "flow",
    "sequence",
    "mermaid",
    "puml",
    "plantuml",
    "zenuml",
    "seq",
    "sequence-diagram",
    "wavedrom",
    "graphviz",
    "viz",
    "dot",
    "vega",
    "vega-lite",
    "ditaa",
];
/**
 * This function resolves image paths and render code blocks
 * @param html the html string that we will analyze
 * @return html
 */
function enhance($, graphsCache, fileDirectoryPath, imageDirectoryPath, plantumlServer) {
    return __awaiter(this, void 0, void 0, function* () {
        const asyncFunctions = [];
        $('[data-role="codeBlock"]').each((i, container) => {
            const $container = $(container);
            if ($container.data("executor")) {
                return;
            }
            const normalizedInfo = $container.data("normalizedInfo");
            if (normalizedInfo.attributes["literate"] === false ||
                normalizedInfo.attributes["cmd"] === false ||
                supportedLanguages.indexOf(normalizedInfo.language) === -1) {
                return;
            }
            $container.data("executor", "fenced-diagrams");
            if (normalizedInfo.attributes["literate"] === false) {
                return;
            }
            asyncFunctions.push(renderDiagram($container, normalizedInfo, $, graphsCache, fileDirectoryPath, imageDirectoryPath, plantumlServer));
        });
        yield Promise.all(asyncFunctions);
    });
}
exports.default = enhance;
function renderDiagram($container, normalizedInfo, $, graphsCache, fileDirectoryPath, imageDirectoryPath, plantumlServer) {
    return __awaiter(this, void 0, void 0, function* () {
        let $output = null;
        const code = $container.text();
        const checksum = (0, compute_checksum_1.default)(JSON.stringify(normalizedInfo) + code);
        const diagramInCache = graphsCache[checksum];
        try {
            switch (normalizedInfo.language) {
                case "flow":
                case "sequence":
                case "mermaid": {
                    // these diagrams are rendered on the client
                    $output = `<div ${(0, block_attributes_1.stringifyBlockAttributes)(ensureClassInAttributes(normalizedInfo.attributes, normalizedInfo.language))}>${(0, utility_1.escapeString)(code)}</div>`;
                    break;
                }
                case "zenuml":
                case "seq":
                case "sequence-diagram": {
                    // sequence-diagram is a web-component, so we just need to add this tag
                    $output = `<div ${(0, block_attributes_1.stringifyBlockAttributes)(ensureClassInAttributes(normalizedInfo.attributes, normalizedInfo.language))}><sequence-diagram>${code}</sequence-diagram></div>`;
                    break;
                }
                case "wavedrom": {
                    // wavedrom is also rendered on the client, but using <script>
                    $output = `<div ${(0, block_attributes_1.stringifyBlockAttributes)(ensureClassInAttributes(normalizedInfo.attributes, normalizedInfo.language))}><script type="WaveDrom">${code}</script></div>`;
                    break;
                }
                case "puml":
                case "plantuml": {
                    let svg = diagramInCache;
                    if (!svg) {
                        svg = yield (0, puml_1.render)(code, fileDirectoryPath, plantumlServer);
                        graphsCache[checksum] = svg; // store to new cache
                    }
                    $output = `<p ${(0, block_attributes_1.stringifyBlockAttributes)(normalizedInfo.attributes)}>${svg}</p>`;
                    break;
                }
                case "graphviz":
                case "viz":
                case "dot": {
                    let svg = diagramInCache;
                    if (!svg) {
                        const engine = normalizedInfo.attributes["engine"] || "dot";
                        svg = yield (0, viz_1.Viz)(code, { engine });
                        graphsCache[checksum] = svg; // store to new cache
                    }
                    $output = `<p ${(0, block_attributes_1.stringifyBlockAttributes)(normalizedInfo.attributes)}>${svg}</p>`;
                    break;
                }
                case "vega":
                case "vega-lite": {
                    if (normalizedInfo.attributes["interactive"] === true) {
                        const rawSpec = code.trim();
                        let spec;
                        if (rawSpec[0] !== "{") {
                            // yaml
                            spec = YAML.parse(rawSpec);
                        }
                        else {
                            // json
                            spec = JSON.parse(rawSpec);
                        }
                        $output = hiddenCode(JSON.stringify(spec).replace("<", "&lt;"), normalizedInfo.attributes, normalizedInfo.language);
                    }
                    else {
                        let svg = diagramInCache;
                        if (!svg) {
                            const vegaFunctionToCall = normalizedInfo.language === "vega" ? vega_1.toSVG : vega_lite_1.toSVG;
                            svg = yield vegaFunctionToCall(code, fileDirectoryPath);
                            graphsCache[checksum] = svg; // store to new cache
                        }
                        $output = `<p ${(0, block_attributes_1.stringifyBlockAttributes)(normalizedInfo.attributes)}>${svg}</p>`;
                    }
                    break;
                }
                case "ditaa": {
                    // historically, ditaa worked only when cmd=true.
                    // Leaving this peculiarity till the next major version
                    // for backwards-compatibility.
                    if (!normalizedInfo.attributes["cmd"]) {
                        break;
                    }
                    // ditaa diagram
                    const args = normalizedInfo.attributes["args"] || [];
                    const svg = yield (0, ditaa_1.render)(code, args);
                    $output = `<p ${(0, block_attributes_1.stringifyBlockAttributes)(normalizedInfo.attributes)}>${svg}</p>`;
                    break;
                }
            }
        }
        catch (error) {
            $output = $(`<pre class="language-text">${error.toString()}</pre>`);
        }
        normalizedInfo.attributes["output_first"] === true
            ? $container.before($output)
            : $container.after($output);
        if (normalizedInfo.attributes["hide"] !== false &&
            normalizedInfo.attributes["code_block"] !== true) {
            $container.data("hiddenByEnhancer", true);
        }
    });
}
const hiddenCode = (code, attributes, language) => `<p ${(0, block_attributes_1.stringifyBlockAttributes)(ensureClassInAttributes(attributes, language))}><span style="display: none">${code}</span></p>`;
//# sourceMappingURL=fenced-diagrams.js.map