Use h() instead of htm for components

[pastelmind]

htm allows us to write JSX-like code within tagged template literals, removing the need for JSX transpilation. Unfortunately, it does not support TypeScript very well. I cannot use TypeScript to verify the props and return types of my custom components.

function MyComponent(props) {
  // propA, propB are not type-checked
  return html`
    <div class="my-component">
      <${InnerComponent} propA="foo" propB=${bar} />
    </div>
  `;
}

The h() function is properly typed. Maybe I could use it instead?

Some options:

Write JSX and transpile with TypeScript

No-go, since one of this project's major goal is to write JS code that just runs with no transpilation.

Write everything with h()

function MyComponent(props) {
  return h(
    "div",
    { class: "my-component" },
    h(InnerComponent, { propA: "foo", propB: bar })
  );
}

Perfect for typing, but too verbose.

Write HTML with htm, but insert custom components with h()

function MyComponent(props) {
  return html`
    <div class="my-component">
      ${h(InnerComponent, { propA: "foo", propB: bar })}
    </div>
  `;
}

This looks like a good middle ground, but I'm not sure if it would work.