Multicolored component

Component

function* Example() {
  yield HTML`<h1>Hello!</h1>`;
  yield HTML`<nav>`;
  yield Link("/", "Home");
  yield Link("/about", "About us");
  yield Link("/terms", "Terms");
  yield HTML`</nav>`;
  yield HTML`<p>This is HTML</p>`;
  yield RemoteImage("https://images.unsplash.com/photo-1530281700549-e82e7bf110d6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80", "dog playing at the seaside");
  yield RemoteImage("https://i.imgur.com/GleAY3fl.jpg", "a tiger cub and its parent");
  yield CSS("p", "color: red;");
  yield CSS("p:after", "color: deepskyblue; content: ' and this is CSS';");
}

Output Preview

Hello!

This is HTML

Output

const htmlOutput = processRichHTML(Example);
const cssOutput = processCSS(Example);
const links = Array.from(allLinks(Example));
const invalidLinks = Array.from(validateLinks(links));

HTML Output

<h1>Hello!</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About us</a>
<a href="/terms">Terms</a>
</nav>
<p>This is HTML</p>
<img src="https://images.unsplash.com/photo-1530281700549-e82e7bf110d6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" alt="dog playing at the seaside">
<img src="https://i.imgur.com/GleAY3fl.jpg" alt="a tiger cub and its parent">

HTML: 408 bytes

CSS Output

output p {color: red;}
output p:after {color: deepskyblue; content: ' and this is CSS';}

CSS: 89 bytes

All Links

[
  "/",
  "/about",
  "/terms"
]

Invalid Links

function validateLinks(links) {
  const knowLinks = new Set([
    "/",
    "/about",
    "/hiring",
    "/privacy",
    "/blog",
    "/features"
  ]);
  const invalidLinks = new Set();
  for (const link of links) {
    if (knowLinks.has(link))
      continue;
    invalidLinks.add(link);
  }
  return invalidLinks;
}

[
  "/terms"
]

Meta Links HTML

function* allLoadedOrigins(generator) {
  for (const message of generator()) {
    if (message.type === identifiers.remoteImage) {
      const url = new URL(message.url);
      yield url.origin;
    }
  }
}

function* processMetaLinkHTML(generator) {
  for (const origin of allLoadedOrigins(generator)) {
    yield HTML`<link rel="dns-prefetch" href="${origin}">`;
  }
}

[
  "https://images.unsplash.com",
  "https://i.imgur.com"
]

<link rel="dns-prefetch" href="https://images.unsplash.com">
<link rel="dns-prefetch" href="https://i.imgur.com">

const toString = (iter) => Array.from(iter).join("");

const htmlOutput = toString(processRichHTML(Example));
const cssOutput = toString(processCSS(Example));
const links = Array.from(allLinks(Example));