Possible way to improve tagged template usability for components

tagged-template.js

import { html, innerHTML } from 'diffhtml';

// Import arbitrary template engine...
import combyne from 'combyne';

// Create the combyne template instance and set context to be the component's props.
const combyneProcessor = props => text => combyne(text).render(props);

// Experimental stateful components.
class MyComponent {
  render(props) {
    const processAsTemplate = combyneProcessor(props);

    // Experimental feature that allows you to pre-process the flattened text
    // template contents before tagged template interpolation.
    return html.pre(processAsTemplate)`
      <h1>{{message}}</h1>

      {%if friends.length%}
      <ul>
        {%each friends as friend%}
        <li>{{friend|toTitleCase}}</li>
        {%endeach%}
      </ul>
      {%endif%}
    `;
  }
}

const friends = ['Fred', 'Ted', 'Gary'];

innerHTML(document.body, html`<${MyComponent} message="Hello world" friends=${friends} />`);