Streaming template literals

const areThey = 'Yes';
console.log(`${areThey}, they are`); 
// Logs: Yes, they are

function strongValues(strings, ...values) {
  return strings.reduce((totalStr, str, i) => {
    totalStr += str;
    if (i in values) totalStr += `<strong>${values[i]}</strong>`;
    return totalStr;
  }, '');
}

const areThey = 'Yes';
console.log(strongValues`${areThey}, they are`);
// Logs: <strong>Yes</strong>, they are

function daftTag() {
  return [1, 2, 3];
}

console.log(daftTag`WHY ARE YOU IGNORING ME?`);
// Logs: [1, 2, 3]

<h1>Title</h1>
…content…

const stream = new ReadableStream({
  start(controller) {
    const encoder = new TextEncoder();
    // Promise for the title
    const titlePromise = fetch('/get-metadata')
      .then(r => r.json()).then(data => data.title);
    // Promise for the content stream
    const contentPromise = fetch('/get-content')
      .then(r => r.body);

    // Tie them all together
    pushString('<h1>');
    titlePromise
      .then(pushString)
      .then(() => pushString('</h1>\n'))
      .then(() => contentPromise)
      .then(pushStream)
      .then(() => controller.close());

    // Helper functions
    function pushString(str) {
      controller.enqueue(encoder.encode(str));
    }

    function pushStream(stream) {
      // Get a lock on the stream
      var reader = stream.getReader();

      return reader.read().then(function process(result) {
        if (result.done) return;
        // Push the value to the combined stream
        controller.enqueue(result.value);
        // Read more & process
        return reader.read().then(process);
      });
    }
  }
});

// Promise for the title
const title = fetch('/get-metadata')
  .then(r => r.json()).then(data => data.title);
// Promise for the content stream
const content = fetch('/get-content').then(r => r.body);

const stream = templateStream`
  <h1>${title}</h1>
  ${content}
`;