How to properly type a component where you pass the html tag as a string that it should be rendered with

[cauboy]

Hi,

I'm struggling to properly type a component in Preact. I want to pass the HTML tag the component should be rendered with as a string.

Here's some code to explain myself (and here's a playground on Stackblitz: https://stackblitz.com/edit/preact-tsx-starter-hbjjaq?file=App.tsx):

type ComponentProps = "???" // How to properly define the type?
function MyComponent({ as: Tag = 'button', ...props }: ComponentProps) {
  return (
    <Tag {...props}>Hello World</Tag>
  )
}

function App() {
  return (
    <>
      <MyComponent as="a" href="https://www.example.com" />
      <MyComponent type="button" />
      <MyComponent href="https://www.example.com" /> // <-- This should show an error b/c <button> doesn't have  href attribute
    </>
  )
}

[657KB]

you need to mix type, like this:

import { JSX } from 'preact'

type ComponentProps = { /* your custom prop */ } & JSX.HTMLAttributes<HTMLButtonElement>

const MyComponent = (props: ComponentProps) => {
  return <button {...props}>Hello World</button>
}

[cauboy]

Thanks for your response @kuyermqi.

Unfortunately, that doesn't satisfy my needs yet.

The goal is to have a generic solution. What I need is a Polymorphic component, see e.g. https://docs.astro.build/en/guides/typescript/#polymorphic-type or https://blog.logrocket.com/build-strongly-typed-polymorphic-components-react-typescript/.

However, I cannot make them work with preact.

import { JSX } from 'preact'

type HTMLAttributesOfElement<T> = ??? // How to implement this type?

type Props<T extends JSX.ElementType> = {
  as: T
} & HTMLAttributesOfElement<T>

function MyComponent({ as: Tag, ...props }: Props) {
  return <Tag {...props}>Hello World</Tag>
}

Any help is appreciated

[rschristian]

You can just copy Astro's Polymorphic type if it's what you're after?

https://github.com/withastro/astro/blob/e0ca0d8c8a01ad73b711a9639b854b3f52900750/packages/astro/types.d.ts#L12-L17

[predaytor]

Did the same thing using the source code from the Kobalte library (Solid.js), which is fantastic btw. There are some gotchas, like Preact's JSX.HTMLAttributes interface is the same for all elements (things like href are available for all elements) and the handlers don't infer the event type for some reason. How to use these types described here.

https://github.com/kobaltedev/kobalte/blob/main/packages/core/src/polymorphic/polymorphic.tsx

// credits: https://github.com/kobaltedev/kobalte/blob/main/packages/utils/src/props.ts
import { ComponentProps, JSX } from 'preact';

/**
 * Allows for extending a set of props (`Source`) by an overriding set of props (`Override`),
 * ensuring that any duplicates are overridden by the overriding set of props.
 */
export type OverrideProps<Source = {}, Override = {}> = Omit<Source, keyof Override> & Override;

/**
 * Allows for extending a set of `ComponentProps` by an overriding set of props,
 * ensuring that any duplicates are overridden by the overriding set of props.
 */
export type OverrideComponentProps<T extends JSX.ElementType, P> = OverrideProps<ComponentProps<T>, P>;

// credits: https://github.com/kobaltedev/kobalte/blob/main/packages/core/src/polymorphic/polymorphic.tsx
import { ComponentProps, JSX } from 'preact';
import { ForwardedRef, forwardRef } from 'preact/compat';
import { OverrideProps } from '~/utils/props.ts';
import { forwardRefType } from './utils.ts';

export type ElementOf<T> = T extends HTMLElement ? T : T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : any;

/**
 * Polymorphic attribute.
 */
export interface PolymorphicAttributes<T extends JSX.ElementType> {
    as?: T | keyof JSX.IntrinsicElements;
}

/**
 * Props used by a polymorphic component.
 */
export type PolymorphicProps<T extends JSX.ElementType, Props extends {} = {}> = OverrideProps<
    ComponentProps<T>,
    Props & PolymorphicAttributes<T>
>;

/**
 * Helper type to get the exact props in Polymnorphic `as` callback.
 */
export type PolymorphicCallbackProps<CustomProps extends {}, Options extends {}, RenderProps extends {}> =
    & Omit<CustomProps, keyof Options | keyof RenderProps>
    & RenderProps;

/**
 * A utility component that render its `as` prop.
 */
function Polymorphic<RenderProps>(
	props: RenderProps & PolymorphicAttributes<JSX.ElementType>,
	ref: ForwardedRef<HTMLElement>,
): JSX.Element {
	const { as: Component, ...rest } = props;

	if (!Component) {
		throw new Error('Polymorphic is missing the required `as` prop.');
	}

	return <Component ref={ref} {...rest} />;
}

const _Polymorphic = (forwardRef as forwardRefType)(Polymorphic);
export { _Polymorphic as Polymorphic };

// Override forwardRef types so generics work.
declare function forwardRef<T, P = {}>(
	render: (props: P, ref: React.Ref<T>) => React.ReactElement | null,
): (props: P & React.RefAttributes<T>) => React.ReactElement | null;

export type forwardRefType = typeof forwardRef;

[predaytor]

You can see the details by checking the source code of the library, for example <Button> component.