Polymorphic components

[NicholasBoll]

Problem

All of our components created with createComponent, createContainer, and createSubcomponent are polymorphic. This means the rendered element/component can be changed via the as prop.

For example:

// change rendered button of a modal target to a `PrimaryButton`
<Modal.Target as={PrimaryButton}>Open</Modal.Target>

// change element of the Box component to the paragraph tag
<Box as="p">Paragraph text</Box>

Polymorphism isn't a strong suit of Typescript. Currently, we achieve this polymorphism via a function overloading. Function overloading means Typescript will check for an overload without the as prop and one with the as prop when checking props. Function overloads are quite fast, so real-time type checking is responsive. The problem is that function overloads give type errors for each overload:

Expand for the full text of the error

No overload matches this call.
  Overload 1 of 2, '(props: Pick<PropsWithoutAs<PrimaryButtonProps, "button">, "form" | "slot" | "style" | "title" | "hidden" | "id" | "top" | "bottom" | "right" | ... 350 more ... | "type"> & { ...; } & PropsWithModel<...> & { ...; }): Element', gave the following error.
    Type '{ children: string; as: ElementComponent<"button", PrimaryButtonProps>; nonExistingProp: boolean; }' is not assignable to type 'IntrinsicAttributes & Pick<PropsWithoutAs<PrimaryButtonProps, "button">, "form" | "slot" | "style" | "title" | ... 355 more ... | "type"> & { ...; } & PropsWithModel<...> & { ...; }'.
      Property 'nonExistingProp' does not exist on type 'IntrinsicAttributes & Pick<PropsWithoutAs<PrimaryButtonProps, "button">, "form" | "slot" | "style" | "title" | ... 355 more ... | "type"> & { ...; } & PropsWithModel<...> & { ...; }'.
  Overload 2 of 2, '(props: Pick<PropsWithoutAs<SecondaryButtonProps, "button">, "form" | "slot" | "style" | "title" | "hidden" | "id" | "top" | "bottom" | "right" | ... 350 more ... | "type"> & { ...; } & PropsWithModel<...>): Element', gave the following error.
    Type '{ children: string; as: ElementComponent<"button", PrimaryButtonProps>; nonExistingProp: boolean; }' is not assignable to type 'IntrinsicAttributes & Pick<PropsWithoutAs<SecondaryButtonProps, "button">, "form" | "slot" | "style" | "title" | ... 355 more ... | "type"> & { ...; } & PropsWithModel<...>'.
      Property 'as' does not exist on type 'IntrinsicAttributes & Pick<PropsWithoutAs<SecondaryButtonProps, "button">, "form" | "slot" | "style" | "title" | ... 355 more ... | "type"> & { ...; } & PropsWithModel<...>'.

Also notice from the screenshot, the whole Modal.Target JSX component is underlined. This is because Typescript doesn't know how to narrow it down. According to Typescript, the error is "No overload matches this call" and not "nonExistantProp does not exist on Modal.Target". A user can parse the overload errors to understand the issue, but it is very difficult to parse. Also the underline doesn't narrow down the issue.

Ideally, this is the error we get:

Expand for the full text of the error

Type '{ children: string; as: ElementComponent<"button", DeleteButtonProps>; nonExistingProp: boolean; }' is not assignable to type 'IntrinsicAttributes & { ref?: Ref<HTMLButtonElement>; as?: ElementComponent<"button", DeleteButtonProps>; } & PopupTargetProps & DeleteButtonProps & ButtonHTMLAttributes<...> & PropsWithModel<...>'.

Property 'nonExistingProp' does not exist on type 'IntrinsicAttributes & { ref?: Ref<HTMLButtonElement>; as?: ElementComponent<"button", DeleteButtonProps>; } & PopupTargetProps & DeleteButtonProps & ButtonHTMLAttributes<...> & PropsWithModel<...>'.
Translation: You're trying to access nonExistingProp on an object that doesn't contain it.

Solutions

Solution 1

Remove the overload. This is what I did for the screenshot. The problem I ran into was crashing the Typescript compiler. Typescript is trying to resolve an overload type. For example:

interface ElementComponent<E, P> {
  <EOverride = E>(props: {
    ref?: ExtractRef<EOverride>;
    as?: EOverride;
  } & ExtractProps<EOverride, P>): JSX.Element
}

The problem is Typescript tries to resolve EOverride all at once instead of only when as is defined: (ref?: ExtractRef<EOverride>, as?: EOverride, and ExtractProps<EOverride, P>). ExtractProps tries to determine the type of EOverride to decide what prop interface should be returned (P & ExtractHTMLAttributes<E> if as is not defined and P & Omit<React.ComponentProps<EOverride, 'as' | keyof P>> & ExtractHTMLAttributes<EOverride> if as is defined). This complexity causes Typescript to fail with an error code 137 (out of memory or timeout).

I can get Typescript to respond if I limit the allowable types of as to only element strings or another ElementComponent (Currently, any React component is allowed). This works, but is much slower than the overloads.

Typescript error no overload:
Typescript error no overload.webm

Typescript error with overload:
Typescript error with overload.webm

The videos show the overload recognizing the error almost immediately (there's a small delay in both videos where Typescript is waiting for the user to stop inputting). The non-overload takes about 2 seconds. The non-overload also has a wider compute time, decreasing the editor's responsiveness. I have a very fast machine and my editor feels sluggish with this change.

Solution 2

Change polymorphism. Radix changed from an as prop to asChild.

Twitter thread: https://twitter.com/jjenzz/status/1499301618843586562
Pull Request: radix-ui/primitives#835

The change still gets the per-prop error message. The benefit is Typescript resolves types very quickly - there is no complicated inference to process.

// Before
<Modal.Target as={DeleteButton}>Delete</Modal.Target>

// After
<Modal.Target asChild>
  <DeleteButton>Delete</DeleteButton>
</Modal.Target>

This approach works by using React.cloneElement on the immediate child if asChild is present.

The downside to this approach is loss of type checking between the host interface (Modal.Target) and the rendered component (DeleteButton). This is most likely not much of a problem in practice. One thing that is a little confusing is where extra props go.

// Before
<Modal.Target as={PrimaryButton} model={model} aria-label="Open" icon={dropdownIcon} />

// After
<Modal.Target model={model} aria-label="Open" icon={dropdownIcon}>
  <PrimaryButton />
</Modal.Target>
// or
<Modal.Target model={model} asChild>
  <PrimaryButton aria-label="Open" icon={dropdownIcon} />
</Modal.Target>

It is a little unclear where props go. This could be worse if the default component a host component represents needs a required property.

<MadeUpComponent requiredProp="foo" asChild>
  <CustomComponent requiredProp="foo" />
</MadeUpComponent>

I don't think this would happen much in practice. Almost none of our components have required props that would be an issue, but it could be unexpected.

Radix does not have style prop primitives like Canvas Kit does. The current solution of a paragraph with BoxProps would look like this:

// Before
<Box as="p">Paragraph text</Box>

// After
<Box asChild>
  <p>Paragraph text</p>
</Box>

This wouldn't work since Box is actually a styled component. The as prop would still need to be supported, but would fall back to a HTML tag only or not make the interface polymorphic. In order to support the as prop for these instances and still keep the performance, the as would need to not change the prop interface. This is a little strange:

<Button onClick={e => e}> // e is `React.MouseEventHandler<HTMLButtonElement>`

<Button as="a" onClick={e => e}> // e is `React.MouseEventHandler<HTMLButtonElement>`

The current polymorphic as changes e to React.MouseEventHandler<HTMLAnchorElement>. This update would need to leave the interface alone which can cause problems when people pass refs and event handlers. They have to pass a button interface even though an anchor is rendered.

[mannycarrera4]

This is a great write up Just had a question if we do use the asChild in this example:

<Modal.Target model={model}>
  <PrimaryButton aria-label="Open" icon={dropdownIcon} />
</Modal.Target>

Would the target need asChild and then all the props live on the actual PrimaryButton?

[NicholasBoll]

Yes, the example needs the asChild. I've updated the discussion to include asChild where necessary. It makes the most sense to put extra props on the PrimaryButton component in this case, but adding them to Modal.Target yields the same result. The props can stay on the Modal.Target for smaller diffs.

   return (
     <Modal>
       <Modal.Target onClick={handleClick} marginBottom="zero">
-        Open License
+        <PrimaryButton>
+          Open License
+        </PrimaryButton>
       </Modal.Target>
       <Modal.Overlay>
         <Modal.Card>
           <Modal.CloseIcon aria-label="Close" />

vs

   return (
     <Modal>
-      <Modal.Target onClick={handleClick} marginBottom="zero">
-        Open License
+     <Modal.Target>
+       <PrimaryButton onClick={handleClick} marginBottom="zero">
+         Open License
+       </PrimaryButton>
      </Modal.Target>
       <Modal.Overlay>
         <Modal.Card>
           <Modal.CloseIcon aria-label="Close" />

[alanbsmith]

The more I think about this, the more I like the asChild + Slots approach. this feels like an elegant solution to a relatively complex problem:

Example from the Radix docs.

import React from 'react';
import { Slot } from '@radix-ui/react-slot';

function Button({ asChild, ...props }) {
  const Comp = asChild ? Slot : 'button';
  return <Comp {...props} />;
}

// usage
  <Button asChild>
    <a href="/contact">Contact</a>
  </Button>