type safe preact template rendering

example.ts

import { view } from "./view.ts";

const ListItem = ({ done, task }: { done: boolean; task: string }) => {
  return (
    <li class={done ? "done" : ""}>
      <input type="checkbox" checked={done} />
      <span>{task}</span>
      <button type="button" class="delete">
        Delete
      </button>
    </li>
  );
};

const List = () => {
  return (
    <ul>
      <ListItem done={false} task="Task 1" />
      <ListItem done task="Task 2" />
      <ListItem done={false} task="Task 3" />
    </ul>
  );
};

export const TodoView = view({
  ListItem,
  SomeComponent,
});

TodoView("ListItem") // ERROR: missing props
TodoView("ListItem",  { task: todo, done: false }) // OK
TodoView("List") // OK

view.ts

import { type ComponentType, h } from "preact";
import { renderToString } from "preact-render-to-string"

type PropsOf<C> = C extends ComponentType<infer P> ? P : never;

export function view<T extends Record<string, ComponentType<any>>>(components: T): {
  <K extends keyof T>(
    key: K,
    ...args: PropsOf<T[K]> extends object ? [PropsOf<T[K]>] : []
  ): string;
} {
  return ((key, ...props) => {
    return renderToString(h(components[key], props[0] ?? null));
  });
}