feat: relax the typings when the as prop is not used to enhance autocomplete

Author: TimKolberger

.changeset/gentle-shoes-tell.md

@@ -0,0 +1,5 @@
+---
+'@polymorphic-factory/solid': patch
+---
+
+Fixed an issue where the typings for the as prop where to restrictive.

.changeset/purple-seahorses-matter.md

@@ -0,0 +1,6 @@
+---
+'@polymorphic-factory/preact': patch
+'@polymorphic-factory/react': patch
+---
+
+Slightly relax the typings for the `as` prop when it is not used.

packages/preact/src/forwardRef.tsx

@@ -50,7 +50,7 @@ type MergeWithAs<
        * overriding props but also because somehow it is needed to get the props correctly,
        * Merge does clone the first object so that might have something to do with it.
        */
-      | Assign<DefaultProps, PermanentProps & { as?: Default }>
+      | Assign<DefaultProps, PermanentProps & { as?: Default | ElementType }>
         | Assign<ComponentProps, PermanentProps & { as?: Component }>
     : never
 

packages/preact/test/forward-ref.test.tsx

@@ -1,5 +1,5 @@
 import { createRef } from 'preact'
-import type { HTMLPolymorphicProps } from '../src'
+import type { ComponentWithAs, HTMLPolymorphicProps } from '../src'
 import { polymorphicFactory, forwardRef } from '../src'
 import { render } from '@testing-library/preact'
 
@@ -25,4 +25,11 @@ describe('forwardRef', () => {
     render(<ComponentUnderTest as="form" ref={ref} />)
     expect(ref.current).toBeInstanceOf(HTMLFormElement)
   })
+
+  it('should allow arbitrary components for the as prop', () => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const Comp = (_props: Record<never, never>) => null
+    const CustomComp: ComponentWithAs<typeof Comp> = (props) => <poly.div as={Comp} {...props} />
+    render(<CustomComp />)
+  })
 })

packages/react/src/forwardRef.tsx

@@ -55,7 +55,7 @@ type MergeWithAs<
        * overriding props but also because somehow it is needed to get the props correctly,
        * Merge does clone the first object so that might have something to do with it.
        */
-      | Assign<DefaultProps, PermanentProps & { as?: Default }>
+      | Assign<DefaultProps, PermanentProps & { as?: Default | ElementType }>
         | Assign<ComponentProps, PermanentProps & { as?: Component }>
     : never
 

packages/react/test/forward-ref.test.tsx

@@ -1,5 +1,5 @@
 import { createRef } from 'react'
-import type { HTMLPolymorphicProps } from '../src'
+import type { ComponentWithAs, HTMLPolymorphicProps } from '../src'
 import { polymorphicFactory, forwardRef } from '../src'
 import { render } from '@testing-library/react'
 
@@ -25,4 +25,11 @@ describe('forwardRef', () => {
     render(<ComponentUnderTest as="form" ref={ref} />)
     expect(ref.current).toBeInstanceOf(HTMLFormElement)
   })
+
+  it('should allow arbitrary components for the as prop', () => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const Comp = (_props: Record<never, never>) => null
+    const CustomComp: ComponentWithAs<typeof Comp> = (props) => <poly.div as={Comp} {...props} />
+    render(<CustomComp />)
+  })
 })

packages/solid/src/polymorphic-factory.tsx

@@ -1,10 +1,4 @@
-import {
-  type ValidComponent,
-  type Component,
-  type JSX,
-  type ComponentProps,
-  splitProps,
-} from 'solid-js'
+import { type Component, type JSX, type ComponentProps, splitProps } from 'solid-js'
 import { Dynamic } from 'solid-js/web'
 
 type DOMElements = keyof JSX.IntrinsicElements
@@ -29,8 +23,8 @@ type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : nev
 export type Assign<A, B> = DistributiveOmit<A, keyof B> & B
 
 type MergeWithAs<
-  Default extends ValidComponent,
-  Component extends ValidComponent,
+  Default extends ElementType,
+  Component extends ElementType,
   PermanentProps extends Record<never, never>,
   DefaultProps extends Record<never, never>,
   ComponentProps extends Record<never, never>,
@@ -57,15 +51,15 @@ type MergeWithAs<
        * overriding props but also because somehow it is needed to get the props correctly,
        * Merge does clone the first object so that might have something to do with it.
        */
-      | Assign<DefaultProps, PermanentProps & { as?: Default }>
+      | Assign<DefaultProps, PermanentProps & { as?: Default | ElementType }>
         | Assign<ComponentProps, PermanentProps & { as?: Component }>
     : never
 
 export type ComponentWithAs<
-  Component extends ValidComponent,
+  Component extends ElementType,
   Props extends Record<never, never> = Record<never, never>,
 > = {
-  <AsComponent extends ValidComponent = Component>(
+  <AsComponent extends ElementType = Component>(
     props: MergeWithAs<
       Component,
       AsComponent,
@@ -80,21 +74,21 @@ export type HTMLPolymorphicComponents<Props extends Record<never, never> = Recor
   [Tag in DOMElements]: ComponentWithAs<Tag, Props>
 }
 
-export type HTMLPolymorphicProps<T extends ValidComponent> = Omit<ComponentProps<T>, 'ref'> & {
-  as?: ValidComponent
+export type HTMLPolymorphicProps<T extends ElementType> = Omit<ComponentProps<T>, 'ref'> & {
+  as?: ElementType
 }
 
 type PolymorphFactory<
   Props extends Record<never, never> = Record<never, never>,
   Options = never,
 > = {
-  <T extends ValidComponent, P extends Record<never, never> = Props>(
+  <T extends ElementType, P extends Record<never, never> = Props>(
     component: T,
     option?: Options,
   ): ComponentWithAs<T, P>
 }
 
-function defaultStyled(originalComponent: ValidComponent) {
+function defaultStyled(originalComponent: ElementType) {
   // any is required for the import('solid/web').ValidComponent typings:
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return (props: ComponentProps<ComponentWithAs<any>>) => {
@@ -106,7 +100,7 @@ function defaultStyled(originalComponent: ValidComponent) {
 }
 
 interface PolyFactoryParam<
-  Component extends ValidComponent,
+  Component extends ElementType,
   Props extends Record<never, never>,
   Options,
 > {
@@ -125,7 +119,7 @@ interface PolyFactoryParam<
 export function polymorphicFactory<
   Props extends Record<never, never>,
   Options = never,
-  Component extends ValidComponent = ValidComponent,
+  Component extends ElementType = ElementType,
 >({ styled = defaultStyled }: PolyFactoryParam<Component, Props, Options> = {}) {
   const cache = new Map<Component, ComponentWithAs<Component, Props>>()
 

packages/solid/test/polymorphic-factory.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from 'solid-testing-library'
-import { type HTMLPolymorphicProps, polymorphicFactory } from '../src'
+import { type ComponentWithAs, type HTMLPolymorphicProps, polymorphicFactory } from '../src'
 import { splitProps } from 'solid-js'
 import { Dynamic } from 'solid-js/web'
 
@@ -97,5 +97,12 @@ describe('Polymorphic Factory', () => {
       // @ts-expect-error Property 'customProp' is missing
       render(() => <CustomComponent />)
     })
+
+    it('should allow arbitrary components for the as prop', () => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const Comp = (_props: Record<never, never>) => null
+      const CustomComp: ComponentWithAs<typeof Comp> = (props) => <poly.div as={Comp} {...props} />
+      render(() => <CustomComp />)
+    })
   })
 })