將 lit / lit-html TemplateResult 渲染為字符串

Question

在 lit/lit-html/lit-element 中，標准組件是 TemplateResult（通常是 HTMLTemplateResult），創建如下：

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

當然，庫的強大和高效在於后續調用將重用相同的<div>元素，並且只替換更改的片段。

但是，為了測試上面的renderMe() function，能夠將返回值視為標准字符串會很有幫助，例如：

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

並修復 function 中的任何錯誤，然后再測試它如何呈現到瀏覽器本身。

是否有像 RENDER_AS_STRING 這樣的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')))

你可以在操場上測試它

Answer 2

如果 arguments 是字符串，@Daniil Loban 的答案效果很好，但如果它們本身可能是 TemplateResults 的 TemplateResults 或 arrays （規范都允許），它需要一個更復雜的答案：

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;
}