lit-html - 将 lit / lit-html TemplateResult 渲染为字符串

Question

在 lit/lit-html/lit-element 中，标准组件是 TemplateResult（通常是 HTMLTemplateResult），创建如下：

function renderMe(msg) {
    return html`<div>Hello ${msg}!</div>`;
}

当然，库的强大和效率在于后续调用将重用相同的<div>元素，并且只替换更改的片段。

但是，为了测试renderMe()上面的函数，能够将返回值视为标准字符串会很有帮助，例如：

assert.equal(RENDER_AS_STRING(renderMe('kimiko')), '<div>Hello kimiko!</div>');

并在测试它如何呈现到浏览器本身之前修复函数中的任何错误。

是否有类似RENDER_AS_STRINGlit 本身或测试库中的功能？我已经搜索并没有找到一个。

Answer 1

执行的结果包含html strings和values那个交替：

我们可以按相同的顺序组合它们：

function renderMe(msg) {
    return html`<div>Hello ${msg}!</div>`;
}

const getRenderString = (data) => {
  const {strings, values} = data;
  const v = [...values, ''] // + last emtpty part
  return strings.reduce((acc,s, i) => acc + s + v[i], '')
}

console.log(getRenderString(renderMe('SO')))

你可以在操场上测试它

和递归版本

import {html, css, LitElement} from 'lit';

function renderMe(msg) {
    return html`<p>Hello ${msg}!</p>`;
}

function renderBlock(msg) {
    return html`<div>${renderMe(msg)}</div>`;
}

const getRenderString = (data) => {
  const {strings, values} = data;
  const v = [...values, ''].map(e => typeof e === 'object' ? getRenderString(e) : e )      
  return strings.reduce((acc,s, i) => acc + s + v[i], '')
}

document.getElementById('output').textContent = getRenderString(renderBlock('SO')) 

Answer 2

如果参数是字符串，@Daniil Loban 的答案效果很好，但如果它们本身可能是 TemplateResults 或 TemplateResults 数组（规范都允许），它需要一个更复杂的答案：

export function template_as_string(data) {
    const {strings, values} = data;
    const value_list = [...values, ''];  // + last empty part
    let output = '';
    for (let i = 0; i < strings.length; i++) {
        let v = value_list[i];
        if (v._$litType$ !== undefined) {
            v = template_as_string(v);  // embedded Template
        } else if (v instanceof Array) {
            // array of strings or templates.
            let new_v = '';
            for (const inner_v of [...v]) {
                new_v += template_as_string(inner_v);
            }
            v = new_v;
        }
        output += strings[i] + v;
    }
    return output;
}