How to use the new polymorphic API with components that build on Kobalte components?

[marbemac]

Hi @fabien-ml, I'm exploring the new polymorphism API and am struggling to figure out how to make it work.

Consider the following Button component - it's a stripped down version of the Button component we're using with Kobalte 0.6. This simplified version wraps the Kobalte Button primitive component to add the option to render an icon inside of the component.

import { Button as ButtonBase } from '@kobalte/core';
import type { OverrideComponentProps } from '@kobalte/utils';
import { Show, splitProps } from 'solid-js';

import type { IconProps } from '../Icon/index.js';
import { Icon } from '../Icon/index.js';

export interface ButtonOpts extends ButtonBase.ButtonRootOptions {
  /** If added, the button will show an icon before the button's content. */
  leftIcon?: IconProps['icon'];
}

export type ButtonProps = OverrideComponentProps<'button', ButtonOpts>;

export function Button(props: ButtonProps) {
  const [local, others] = splitProps(props, ['leftIcon', 'children']);

  return (
    <ButtonBase.Root {...others}>
      <Show when={local.leftIcon}>
        <Icon icon={local.leftIcon!} />
      </Show>

      <Show when={local.children}>
        <div class="px-2">{local.children}</div>
      </Show>
    </ButtonBase.Root>
  );
}

Before the new polymorphic API, I'm using this Button component like so:

<Button as={Link} href="/" leftIcon="arrow-left">
  Go Home
</Button>

With the new polymorphic API, I've updated to this:

<Button leftIcon="arrow-left" asChild>
  <As component={Link} href="/">
    Go Home
  </As>
</Button>

However, I immediately run into the "[kobalte]: Component is expected to render asChild but no children As component was found." error, because my Button component doesn't render the children prop at the root.

Building on the base Kobalte components, while maintaining the polymorphic behavior for cases like the above, feels like an important use case. Any suggestions on how to approach this? How are you planning to tackle it with HopeUI?

Thanks!

[fabien-ml]

Hi, the downside of the asChild pattern like in Radix UI is that <As> need to be rendered a the root of the component to make it works.

In your case with tailwind you can try to do:

    <ButtonBase.Root class="space-x-2" {...others}>
      <Show when={local.leftIcon}>
        <Icon icon={local.leftIcon!} />
      </Show>
      {local.children}
    </ButtonBase.Root>

Or use the gap property if your button root uses flexbox.

But yeah now with the new polymorphic API you can't conditionnaly show <As>.

[marbemac]

Hmm, this was a simplified example - in reality the button component is has more features (more along the lines of hope-ui button component). I might be able to keep children at the root, will give it a go in this button component and the other components where this is an issue. Might also play around with alternative polymorphic abstractions. Will let ya know!

[marbemac]

Curious, would something along the lines of the below pseudocode maintain the typing performance improvements of asChild + the nice separation of props, but without the downsides?

interface AsChildProp<T extends ValidComponent, P = ComponentProps<T>> {
  as?: T;
  asProps?: P;
}

// Example usage
<Button leftIcon="arrow-left" as={Link} asProps={{ href: "/" }}>Go Home</Button>

// Or a tuple, as one potential alternative api if it's easier to keep things in a single prop
<Button leftIcon="arrow-left" as={[Link, { href: "/" }]}>Go Home</Button>

// Simplified Polymorphic component under the hood, maintaining the same combineProps behavior
function Polymorphic<T extends ValidComponent>(props: PolymorphicProps<T>) {
  const [local, others] = splitProps(props as PolymorphicProps<ValidComponent>, ['as', 'asProps', 'fallback']);

  return <Dynamic component={local.as || local.fallback} {...combineProps(others, local.asProps ?? {})} />;
}

[fabien-ml]

In theory it may works, the type inference of the extra props is on the asProps and not the button itself, so the button type will stay simple i guess.

[fabien-ml]

With the current API for Hope UI i've decided that almost all components will not be polymorphic.

For the case like yours i've created a LinkButton component which render an <a> by default and looks like a button.
In my API this one is polymorphic because we need to be able to replace <a> by solidjs router link and i was able to do it because to content is simpler than Button.