escaped HTML entities in markdown content are not being honored when prerendering Light DOM HTML

[thescientist13]

Type of Change

Bug

Summary

It was observed in ProjectEvergreen/www.greenwoodjs.dev#120 (comment) that if creating markdown content as follows

# Server Rendering

<app-ctc-block variant="snippet" heading="src/pages/users.js">

  ```js
  export async function getBody(compilation, page, request) {
    const timestamp = new Date().getTime();

    return `
      <h1>Hello from the server rendered users page! 👋</h1>
      <table>
        <tr>
          <th>Name</th>
          <th>Image</th>
        </tr>
      </table>
      <h6>Last Updated: ${timestamp}</h6>
    `;
  }
  ```

</app-ctc-block>

While the output from unified is correct and properly escaped

<h1>Server Rendering</h1>
<app-ctc-block variant="snippet" heading="src/pages/users.js">
    <pre><code class="language-js">export async function getBody(compilation, page, request) {
      const timestamp = new Date().getTime();
    
      return `
        &#x3C;h1>Hello from the server rendered users page! 👋&#x3C;/h1>
        &#x3C;table>
          &#x3C;tr>
            &#x3C;th&gt;Name&#x3C;;/th>
            &#x3C;th&gt;Image&#x3C;/th>
          &#x3C;/tr>
        &#x3C;/table>
        &#x3C;h6>Last Updated: ${timestamp}&#x3C;/h6>
      `;
    }
    </code></pre>
</app-ctc-block>

The output from WCC / parse5 has all the HTML entities converted back to HTML

<h1>Server Rendering</h1>
<app-ctc-block variant="snippet" heading="src/pages/users.js">
  <pre><code class="language-js">
    export async function getBody(compilation, page, request) {
      const timestamp = new Date().getTime();
    
      return `
        <h1>Hello from the server rendered users page! 👋</h1>
        <table>
          <tbody><tr>
            <th>Name</th>
            <th>Image</th>
          </tr>
        </tbody></table>
        <h6>Last Updated: ${timestamp}</h6>
      `;
    }
  </code></pre>
</app-ctc-block>

This means that instead of rendering as text

The HTML is rendered literally, breaking the output

Details

The main issue seems to be in WCC (parse5 specifically), in that parse5 will convert HTML entities automatically when accessing the "raw" value of a node

Which means that when building the HTML back out, instead of getting something like </h1>Some text</h1> to do innerHTML work in WCC, we end up getting the literal HTML </h1>Some text</h1> which does seem to be the expected behavior as they state, meaning it will be up to application consumers to manage this preservation, unfortunately.

A seemingly simple solution would be to just manually escape < when parsing innerHTML in WCC, though I'm not sure if this is the best solution, or more likely, the best place?

 } else if (nodeName === '#text') {
    // escape < brackets
    innerHTML += value.replace(/</g, '&lt;');
  }

The challenge is that as far as Greenwood is concerned, the input to WCC is correct, so how would we know where to do the substitution on the way out? Per reading through similar issues in the parse5 repo, we would have to double parse and convert based on locations, and from what i understand, adding location markers is a pretty significant performance overhead.

---

• Here's a simplified reproduction repo - https://github.com/thescientist13/parse5-html-entities
• naive implementation PR in WCC - bug/preserve light dom html entities in text nodes wcc#182

[thescientist13]

Another complication is that parse5 will also seem to encode entities even if they aren't part of HTML, which makes this work around in WCC even more unpredictable :/
ProjectEvergreen/wcc#182

{
  value: '\n' +
    '          <h1>Hello from the server rendered users < page! 👋</h1>\n' +
    '        '
}
{
  html: '\n' +
    '        <x-ctc>\n' +
    '          <h1>Hello from the server rendered users &lt; page! 👋</h1>\n' +
    '        </x-ctc>\n' +
    '        '
}

Wonder if we'll have to do something from the Greenwood side, e.g.
https://github.com/ProjectEvergreen/greenwood/blob/v0.31.0-alpha.2/packages/cli/src/lifecycles/prerender.js#L98

body = await new Promise((resolve, reject) => {
  pool.runTask({
    executeModuleUrl: workerPrerender.executeModuleUrl.href,
    modulePath: null,
    compilation: JSON.stringify(compilation),
    page: JSON.stringify(page),
    prerender: true,
    htmlContents: body.replace(/</g, 'custom-left-bracket')
    scripts: JSON.stringify(scripts)
  }, (err, result) => {
    if (err) {
      return reject(err);
    }

    return resolve(result.html);
  });
});

body = body.replace(/custom-left-bracket/g, '<')