Function defineWidget

packages/core/src/widgets/composition.ts:299–332

(
  render: (props: Props, ctx: WidgetContext<State>) => VNode,
  options?: DefineWidgetOptions,
)

 * ```
 */
export function defineWidget<Props extends WidgetPropsBase, State = void>(
  render: (props: Props, ctx: WidgetContext<State>) => VNode,
  options?: DefineWidgetOptions,
): WidgetFactory<Props> {
  const widgetKey = generateWidgetKey(options?.name);
  const wrapperKind = options?.wrapper ?? "fragment";

  return function widgetFactory(props: Props): VNode {
    // Store render function and props for later execution
    const renderFn = (ctx: WidgetContext<unknown>) => {
      return render(props, ctx as WidgetContext<State>);
    };

    // Create a composite VNode that the runtime will detect and handle
    // Use a container wrapper so runtime can reconcile the rendered child.
    const baseVNode: VNode = {
      kind: wrapperKind,
      props: props.key !== undefined ? { key: props.key } : {},
      children: [],
    };

    const compositeVNode: CompositeVNode = {
      ...baseVNode,
      __composite: Object.freeze({
        widgetKey,
        render: renderFn,
        props,
        key: props.key,
      }),
    };

    return compositeVNode;
  };
}

/* ========== Instance ID Scoping ========== */