feat(react): propagate additional props

.changeset/slow-students-peel.md

@@ -0,0 +1,22 @@
+---
+'@polymorphic-factory/preact': minor
+'@polymorphic-factory/react': minor
+'@polymorphic-factory/solid': minor
+---
+
+Fixed an issue where the factory options type `polymorphicFactory<P, Options>()` did not propagate
+to the factory function `poly("div", options)`. **This is possibly a breaking change for TypeScript
+users.**
+
+```tsx
+type AdditionalProps = Record<never, never>
+type Options = { 'data-custom-option': string }
+
+const poly = polymorphicFactory<AdditionalProps, Options>({
+  styled: (component, options) => (props) => {
+    const Component = props.as || component
+    return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />
+  },
+})
+const CustomDiv = poly('div', { 'data-custom-option': 'hello' })
+```

packages/preact/src/polymorphic-factory.tsx

@@ -3,20 +3,21 @@ import type { JSX } from 'preact'
 
 type DOMElements = keyof JSX.IntrinsicElements
 
-export type HTMLPolymorphicComponents = {
-  [Tag in DOMElements]: ComponentWithAs<Tag>
+export type HTMLPolymorphicComponents<
+  Props extends Record<string, unknown> = Record<never, never>,
+> = {
+  [Tag in DOMElements]: ComponentWithAs<Tag, Props>
 }
 
 export type HTMLPolymorphicProps<T extends ElementType> = Omit<PropsOf<T>, 'ref'> & {
   as?: ElementType
 }
 
-type PolymorphFactory = {
-  <
-    T extends ElementType,
-    P extends Record<string, unknown> = Record<never, never>,
-    Options = never,
-  >(
+type PolymorphFactory<
+  Props extends Record<string, unknown> = Record<never, never>,
+  Options = never,
+> = {
+  <T extends ElementType, P extends Record<string, unknown> = Props>(
     component: T,
     option?: Options,
   ): ComponentWithAs<T, P>
@@ -48,9 +49,9 @@ interface PolyFactoryParam<
  * <poly.section as="main" /> => // renders main
  */
 export function polymorphicFactory<
-  Component extends ElementType,
-  Props extends Record<string, unknown>,
+  Props extends Record<never, never>,
   Options = never,
+  Component extends ElementType = ElementType,
 >({ styled = defaultStyled }: PolyFactoryParam<Component, Props, Options> = {}) {
   const cache = new Map<Component, ComponentWithAs<Component, Props>>()
 
@@ -74,5 +75,5 @@ export function polymorphicFactory<
       }
       return cache.get(asElement)
     },
-  }) as PolymorphFactory & HTMLPolymorphicComponents
+  }) as PolymorphFactory<Props, Options> & HTMLPolymorphicComponents<Props>
 }

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

@@ -26,7 +26,7 @@ describe('Polymorphic Factory', () => {
   })
 
   describe('with custom styled function', () => {
-    const customPoly = polymorphicFactory({
+    const customPoly = polymorphicFactory<Record<never, never>, { customOption: string }>({
       styled: (component, options) => (props) => {
         const Component = props.as || component
         return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />
@@ -84,8 +84,7 @@ describe('Polymorphic Factory', () => {
 
     it('should expect required props', () => {
       // @ts-expect-error Property 'customProp' is missing
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const _unused = <CustomComponent />
+      render(<CustomComponent />)
     })
   })
 })

packages/react/src/polymorphic-factory.tsx

@@ -3,20 +3,21 @@ import { type ComponentWithAs, forwardRef, type PropsOf } from './forwardRef'
 
 type DOMElements = keyof JSX.IntrinsicElements
 
-export type HTMLPolymorphicComponents = {
-  [Tag in DOMElements]: ComponentWithAs<Tag>
+export type HTMLPolymorphicComponents<
+  Props extends Record<string, unknown> = Record<never, never>,
+> = {
+  [Tag in DOMElements]: ComponentWithAs<Tag, Props>
 }
 
 export type HTMLPolymorphicProps<T extends ElementType> = Omit<PropsOf<T>, 'ref'> & {
   as?: ElementType
 }
 
-type PolymorphFactory = {
-  <
-    T extends ElementType,
-    P extends Record<string, unknown> = Record<never, never>,
-    Options = never,
-  >(
+type PolymorphFactory<
+  Props extends Record<string, unknown> = Record<never, never>,
+  Options = never,
+> = {
+  <T extends ElementType, P extends Record<string, unknown> = Props>(
     component: T,
     option?: Options,
   ): ComponentWithAs<T, P>
@@ -48,9 +49,9 @@ interface PolyFactoryParam<
  * <poly.section as="main" /> => // renders main
  */
 export function polymorphicFactory<
-  Component extends ElementType,
-  Props extends Record<string, unknown>,
+  Props extends Record<never, never>,
   Options = never,
+  Component extends ElementType = ElementType,
 >({ styled = defaultStyled }: PolyFactoryParam<Component, Props, Options> = {}) {
   const cache = new Map<Component, ComponentWithAs<Component, Props>>()
 
@@ -74,5 +75,5 @@ export function polymorphicFactory<
       }
       return cache.get(asElement)
     },
-  }) as PolymorphFactory & HTMLPolymorphicComponents
+  }) as PolymorphFactory<Props, Options> & HTMLPolymorphicComponents<Props>
 }

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

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import { type HTMLPolymorphicProps, polymorphicFactory } from '../src'
+import { HTMLPolymorphicProps, polymorphicFactory } from '../src'
 
 describe('Polymorphic Factory', () => {
   describe('with default styled function', () => {
@@ -26,7 +26,7 @@ describe('Polymorphic Factory', () => {
   })
 
   describe('with custom styled function', () => {
-    const customPoly = polymorphicFactory({
+    const customPoly = polymorphicFactory<Record<never, never>, { customOption?: string }>({
       styled: (component, options) => (props) => {
         const Component = props.as || component
         return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />
@@ -84,8 +84,7 @@ describe('Polymorphic Factory', () => {
 
     it('should expect required props', () => {
       // @ts-expect-error Property 'customProp' is missing
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const _unused = <CustomComponent />
+      render(<CustomComponent />)
     })
   })
 })

packages/solid/src/polymorphic-factory.tsx

@@ -26,20 +26,21 @@ export type ComponentWithAs<T extends ValidComponent, Props = Record<never, neve
   Assign<Assign<ComponentProps<T>, Props>, { as?: ElementType }>
 >
 
-export type HTMLPolymorphicComponents = {
-  [Tag in DOMElements]: ComponentWithAs<Tag>
+export type HTMLPolymorphicComponents<
+  Props extends Record<string, unknown> = Record<never, never>,
+> = {
+  [Tag in DOMElements]: ComponentWithAs<Tag, Props>
 }
 
 export type HTMLPolymorphicProps<T extends ElementType> = Omit<ComponentProps<T>, 'ref'> & {
   as?: ElementType
 }
 
-type PolymorphFactory = {
-  <
-    T extends ElementType,
-    P extends Record<string, unknown> = Record<never, never>,
-    Options = never,
-  >(
+type PolymorphFactory<
+  Props extends Record<string, unknown> = Record<never, never>,
+  Options = never,
+> = {
+  <T extends ElementType, P extends Record<string, unknown> = Props>(
     component: T,
     option?: Options,
   ): ComponentWithAs<T, P>
@@ -74,9 +75,9 @@ interface PolyFactoryParam<
  * <poly.section as="main" /> => // renders main
  */
 export function polymorphicFactory<
-  Component extends ElementType,
-  Props extends Record<string, unknown>,
+  Props extends Record<never, never>,
   Options = never,
+  Component extends ElementType = ElementType,
 >({ styled = defaultStyled }: PolyFactoryParam<Component, Props, Options> = {}) {
   const cache = new Map<Component, ComponentWithAs<Component, Props>>()
 
@@ -100,5 +101,5 @@ export function polymorphicFactory<
       }
       return cache.get(asElement)
     },
-  }) as PolymorphFactory & HTMLPolymorphicComponents
+  }) as PolymorphFactory<Props, Options> & HTMLPolymorphicComponents<Props>
 }

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

@@ -28,7 +28,7 @@ describe('Polymorphic Factory', () => {
   })
 
   describe('with custom styled function', () => {
-    const customPoly = polymorphicFactory({
+    const customPoly = polymorphicFactory<Record<never, never>, { customOption: string }>({
       styled: (originalComponent, options) => (props) => {
         const [local, others] = splitProps(props, ['as'])
         const component = local.as || originalComponent
@@ -95,8 +95,7 @@ describe('Polymorphic Factory', () => {
 
     it('should expect required props', () => {
       // @ts-expect-error Property 'customProp' is missing
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const _unused = <CustomComponent />
+      render(() => <CustomComponent />)
     })
   })
 })