将 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_STRING是否有类似lit 本身或测试库中的函数？我已经搜索过，但没有找到。

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'))