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

在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无论是在点燃本身还是在测试库中？我已经搜索过，但没有找到。

执行结果包含html strings and 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')))

你可以测试一下操场 https://lit.dev/playground/#project=W3sibmFtZSI6InNpbXBsZS1ncmVldGluZy50cyIsImNvbnRlbnQiOiJpbXBvcnQge2h0bWwsIGNzcywgTGl0RWxlbWVudH0gZnJvbSAnbGl0JztcblxuZnVuY3Rpb24gcmVuZGVyTWUobXNnKSB7XG4gICAgcmV0dXJuIGh0bWxgPGRpdj5IZWxsbyAke21zZ30hPC9kaXY-YDtcbn1cblxuY29uc3QgZ2V0UmVuZGVyU3RyaW5nID0gKGRhdGEpID0-IHtcbiAgY29uc3Qge3N0cmluZ3MsIHZhbHVlc30gPSBkYXRhO1xuICBjb25zdCB2ID0gWy4uLnZhbHVlcywgJyddIC8vICsgbGFzdCBlbXRwdHkgcGFydFxuICByZXR1cm4gc3RyaW5ncy5yZWR1Y2UoKGFjYyxzLCBpKSA9PiBhY2MgKyBzICsgdltpXSwgJycpXG59XG5cbmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdvdXRwdXQnKS50ZXh0Q29udGVudCA9IGdldFJlbmRlclN0cmluZyhyZW5kZXJNZSgnU08nKSkgIFxuXG5cbiJ9LHsibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPCFET0NUWVBFIGh0bWw-XG48aGVhZD5cbiAgPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwiLi9zaW1wbGUtZ3JlZXRpbmcuanNcIj48L3NjcmlwdD5cbjwvaGVhZD5cbjxib2R5PlxuICA8cCBpZD1cIm91dHB1dFwiPjwvcD5cbjwvYm9keT5cbiJ9LHsibmFtZSI6InBhY2thZ2UuanNvbiIsImNvbnRlbnQiOiJ7XG4gIFwiZGVwZW5kZW5jaWVzXCI6IHtcbiAgICBcImxpdFwiOiBcIl4yLjAuMFwiLFxuICAgIFwiQGxpdC9yZWFjdGl2ZS1lbGVtZW50XCI6IFwiXjEuMC4wXCIsXG4gICAgXCJsaXQtZWxlbWVudFwiOiBcIl4zLjAuMFwiLFxuICAgIFwibGl0LWh0bWxcIjogXCJeMi4wLjBcIlxuICB9XG59IiwiaGlkZGVuIjp0cnVlfV0

And the 递归的 https://lit.dev/playground/#project=W3sibmFtZSI6InNpbXBsZS1ncmVldGluZy50cyIsImNvbnRlbnQiOiJpbXBvcnQge2h0bWwsIGNzcywgTGl0RWxlbWVudH0gZnJvbSAnbGl0JztcblxuZnVuY3Rpb24gcmVuZGVyTWUobXNnKSB7XG4gICAgcmV0dXJuIGh0bWxgPHA-SGVsbG8gJHttc2d9ITwvcD5gO1xufVxuXG5mdW5jdGlvbiByZW5kZXJCbG9jayhtc2cpIHtcbiAgICByZXR1cm4gaHRtbGA8ZGl2PiR7cmVuZGVyTWUobXNnKX08L2Rpdj5gO1xufVxuXG5jb25zdCBnZXRSZW5kZXJTdHJpbmcgPSAoZGF0YSkgPT4ge1xuICBjb25zdCB7c3RyaW5ncywgdmFsdWVzfSA9IGRhdGE7XG4gIGNvbnN0IHYgPSBbLi4udmFsdWVzLCAnJ10ubWFwKGUgPT4gdHlwZW9mIGUgPT09ICdvYmplY3QnID8gZ2V0UmVuZGVyU3RyaW5nKGUpIDogZSApICAgICAgXG4gIHJldHVybiBzdHJpbmdzLnJlZHVjZSgoYWNjLHMsIGkpID0-IGFjYyArIHMgKyB2W2ldLCAnJylcbn1cblxuZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ291dHB1dCcpLnRleHRDb250ZW50ID0gZ2V0UmVuZGVyU3RyaW5nKHJlbmRlckJsb2NrKCdTTycpKSAgXG5cblxuIn0seyJuYW1lIjoiaW5kZXguaHRtbCIsImNvbnRlbnQiOiI8IURPQ1RZUEUgaHRtbD5cbjxoZWFkPlxuICA8c2NyaXB0IHR5cGU9XCJtb2R1bGVcIiBzcmM9XCIuL3NpbXBsZS1ncmVldGluZy5qc1wiPjwvc2NyaXB0PlxuPC9oZWFkPlxuPGJvZHk-XG4gIDxwIGlkPVwib3V0cHV0XCI-PC9wPlxuPC9ib2R5PlxuIn0seyJuYW1lIjoicGFja2FnZS5qc29uIiwiY29udGVudCI6IntcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwibGl0XCI6IFwiXjIuMC4wXCIsXG4gICAgXCJAbGl0L3JlYWN0aXZlLWVsZW1lbnRcIjogXCJeMS4wLjBcIixcbiAgICBcImxpdC1lbGVtZW50XCI6IFwiXjMuMC4wXCIsXG4gICAgXCJsaXQtaHRtbFwiOiBcIl4yLjAuMFwiXG4gIH1cbn0iLCJoaWRkZW4iOnRydWV9XQ version

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