HTML Renderer

HTML Component

Component Source

function* HTMLComponent2() {
  yield HTML`<h1>Hello!</h1>`;
  yield HTML`<ul>`;
  yield HTML`<li>Some`;
  yield HTML`<li>list`;
  yield HTML`<li>items`;
  yield HTML`</ul>`;
}

HTML Output

55 bytes

<h1>Hello!</h1>
<ul>
<li>Some
<li>list
<li>items
</ul>

Hello!

  • Some
  • list
  • items

HTML Processor

function* processHTML2(generator) {
  for (const message of generator()) {
    if (message.type === identifiers.html) {
      yield message.raw;
      yield "\n";
    }
  }
}

Convert to a single string

const generator = processHTML(HTMLComponent);
const htmlString = Array.from(generator).join("");

Convert to readable stream

const generator = processHTML(HTMLComponent);
const stream = new ReadableStream({
  pull(controller) {
    const { value, done } = generator.next();

    if (done) {
      controller.close();
    } else {
      controller.enqueue(value);
    }
  }
});
const response = new Response(stream, {
  headers: { "Content-Type": "text/html" }
});