将lit /lit呈现为字符串

Question

在lit/lit/like中，标准组件是TemplateResult (通常是HTMLTemplateResult)，创建如下：

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

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

但是，为了测试上面的renderMe()函数，可以将返回值看作标准字符串，如：

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

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

在lit本身或测试库中是否有类似于RENDER_AS_STRING的函数？我找过了却没有找到。

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的答案如果参数是字符串的话效果很好，但是如果它们本身可能是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;
}