@inkline/paper/react/h.mjs

Paper is a unified interface for defining components for Vue and React using a single code base.

import { createElement } from "react";
import { capitalizeFirst } from "./helpers/index.mjs";
export const h = (type, props, ...children) => {
  if (props?.class) {
    const { class: className, ...properties } = props;
    props = properties;
    props.className = className;
  }
  if (typeof type !== "string" && typeof children[0] === "object" && !Array.isArray(children[0]) && !children[0].$$typeof) {
    const slots = children[0];
    const slotKeys = Object.keys(slots);
    if (slotKeys.length === 1 && slotKeys[0] === "default") {
      children = [slots.default()].flat();
    } else {
      children = slotKeys.map((slotKey) => {
        const slotName = capitalizeFirst(slotKey);
        const slotComponent = type[slotName];
        return h(slotComponent, { key: slotName }, slots[slotKey]());
      });
    }
  }
  return createElement(type, props, ...children);
};