fix(react): allow key attribute on components created by with

.changeset/fix-with-key-attribute.md

@@ -0,0 +1,5 @@
+---
+'@suspensive/react': patch
+---
+
+fix(react): allow the React-reserved `key` attribute on components created by `with`

packages/react/src/ClientOnly.test-d.tsx

@@ -0,0 +1,22 @@
+import { ClientOnly } from './ClientOnly'
+
+describe('<ClientOnly/>', () => {
+  describe('ClientOnly.with', () => {
+    it('should accept the React-reserved key attribute on components wrapped without props', () => {
+      const Wrapped = ClientOnly.with({ fallback: null }, () => <></>)
+
+      expectTypeOf([<Wrapped key="a" />, <Wrapped key="b" />]).toEqualTypeOf<Array<React.JSX.Element>>()
+
+      assertType(
+        // @ts-expect-error arbitrary props should still be rejected
+        <Wrapped foo="bar" />
+      )
+    })
+
+    it('should accept the key attribute along with inferred props', () => {
+      const Wrapped = ClientOnly.with({ fallback: null }, ({ text }: { text: string }) => <>{text}</>)
+
+      expectTypeOf(<Wrapped key="a" text="text" />).toEqualTypeOf<React.JSX.Element>()
+    })
+  })
+})

packages/react/src/ClientOnly.tsx

@@ -17,7 +17,7 @@ export const ClientOnly = Object.assign(
   ({ children, fallback }: ClientOnlyProps) => <>{useIsClient() ? children : fallback}</>,
   {
     displayName: 'ClientOnly',
-    with: <TProps extends ComponentProps<ComponentType> = Record<string, never>>(
+    with: <TProps extends ComponentProps<ComponentType> = Record<never, never>>(
       clientOnlyProps: PropsWithoutChildren<ClientOnlyProps>,
       Component: ComponentType<TProps>
     ) =>

packages/react/src/Delay.test-d.tsx

@@ -39,4 +39,23 @@ describe('<Delay/>', () => {
       </Delay>
     ).toEqualTypeOf<React.JSX.Element>()
   })
+
+  describe('Delay.with', () => {
+    it('should accept the React-reserved key attribute on components wrapped without props', () => {
+      const Wrapped = Delay.with({ ms: 1000 }, () => <></>)
+
+      expectTypeOf([<Wrapped key="a" />, <Wrapped key="b" />]).toEqualTypeOf<Array<React.JSX.Element>>()
+
+      assertType(
+        // @ts-expect-error arbitrary props should still be rejected
+        <Wrapped foo="bar" />
+      )
+    })
+
+    it('should accept the key attribute along with inferred props', () => {
+      const Wrapped = Delay.with({ ms: 1000 }, ({ text }: { text: string }) => <>{text}</>)
+
+      expectTypeOf(<Wrapped key="a" text="text" />).toEqualTypeOf<React.JSX.Element>()
+    })
+  })
 })

packages/react/src/Delay.tsx

@@ -49,7 +49,7 @@ export const Delay = Object.assign(
   },
   {
     displayName: 'Delay',
-    with: <TProps extends ComponentProps<ComponentType> = Record<string, never>>(
+    with: <TProps extends ComponentProps<ComponentType> = Record<never, never>>(
       delayProps: PropsWithoutChildren<DelayProps>,
       Component: ComponentType<TProps>
     ) =>

packages/react/src/ErrorBoundary.test-d.tsx

@@ -1230,4 +1230,26 @@ describe('<ErrorBoundary/>', () => {
       expectTypeOf(example).toEqualTypeOf<React.JSX.Element>()
     })
   })
+
+  describe('ErrorBoundary.with key attribute', () => {
+    it('should accept the React-reserved key attribute on components wrapped without props', () => {
+      const Wrapped = ErrorBoundary.with({ fallback: ({ error }) => <>{error.message}</> }, () => <></>)
+
+      expectTypeOf([<Wrapped key="a" />, <Wrapped key="b" />]).toEqualTypeOf<Array<React.JSX.Element>>()
+
+      assertType(
+        // @ts-expect-error arbitrary props should still be rejected
+        <Wrapped foo="bar" />
+      )
+    })
+
+    it('should accept the key attribute along with inferred props', () => {
+      const Wrapped = ErrorBoundary.with(
+        { fallback: ({ error }) => <>{error.message}</> },
+        ({ text }: { text: string }) => <>{text}</>
+      )
+
+      expectTypeOf(<Wrapped key="a" text="text" />).toEqualTypeOf<React.JSX.Element>()
+    })
+  })
 })

packages/react/src/ErrorBoundary.tsx

@@ -263,7 +263,7 @@ export const ErrorBoundary = Object.assign(
   {
     displayName: 'ErrorBoundary',
     with: <
-      TProps extends ComponentProps<ComponentType> = Record<string, never>,
+      TProps extends ComponentProps<ComponentType> = Record<never, never>,
       TShouldCatch extends ShouldCatch = ShouldCatch,
     >(
       errorBoundaryProps: PropsWithoutChildren<ErrorBoundaryProps<TShouldCatch>>,

packages/react/src/ErrorBoundaryGroup.test-d.tsx

@@ -10,4 +10,23 @@ describe('ErrorBoundaryGroup', () => {
       <ErrorBoundaryGroup.Consumer>{() => <></>}</ErrorBoundaryGroup.Consumer>
     ).not.toEqualTypeOf<ReactNode>()
   })
+
+  describe('ErrorBoundaryGroup.with', () => {
+    it('should accept the React-reserved key attribute on components wrapped without props', () => {
+      const Wrapped = ErrorBoundaryGroup.with({}, () => <></>)
+
+      expectTypeOf([<Wrapped key="a" />, <Wrapped key="b" />]).toEqualTypeOf<Array<React.JSX.Element>>()
+
+      assertType(
+        // @ts-expect-error arbitrary props should still be rejected
+        <Wrapped foo="bar" />
+      )
+    })
+
+    it('should accept the key attribute along with inferred props', () => {
+      const Wrapped = ErrorBoundaryGroup.with({}, ({ text }: { text: string }) => <>{text}</>)
+
+      expectTypeOf(<Wrapped key="a" text="text" />).toEqualTypeOf<React.JSX.Element>()
+    })
+  })
 })

packages/react/src/ErrorBoundaryGroup.tsx

@@ -54,7 +54,7 @@ export const ErrorBoundaryGroup = Object.assign(
   },
   {
     displayName: 'ErrorBoundaryGroup',
-    with: <TProps extends ComponentProps<ComponentType> = Record<string, never>>(
+    with: <TProps extends ComponentProps<ComponentType> = Record<never, never>>(
       errorBoundaryGroupProps: PropsWithoutChildren<ErrorBoundaryGroupProps>,
       Component: ComponentType<TProps>
     ) =>

packages/react/src/Suspense.test-d.tsx

@@ -0,0 +1,22 @@
+import { Suspense } from './Suspense'
+
+describe('<Suspense/>', () => {
+  describe('Suspense.with', () => {
+    it('should accept the React-reserved key attribute on components wrapped without props', () => {
+      const Wrapped = Suspense.with({ fallback: null }, () => <></>)
+
+      expectTypeOf([<Wrapped key="a" />, <Wrapped key="b" />]).toEqualTypeOf<Array<React.JSX.Element>>()
+
+      assertType(
+        // @ts-expect-error arbitrary props should still be rejected
+        <Wrapped foo="bar" />
+      )
+    })
+
+    it('should accept the key attribute along with inferred props', () => {
+      const Wrapped = Suspense.with({ fallback: null }, ({ text }: { text: string }) => <>{text}</>)
+
+      expectTypeOf(<Wrapped key="a" text="text" />).toEqualTypeOf<React.JSX.Element>()
+    })
+  })
+})

packages/react/src/Suspense.tsx

@@ -31,7 +31,7 @@ export const Suspense = Object.assign(
   },
   {
     displayName: 'Suspense',
-    with: <TProps extends ComponentProps<ComponentType> = Record<string, never>>(
+    with: <TProps extends ComponentProps<ComponentType> = Record<never, never>>(
       suspenseProps: PropsWithoutChildren<SuspenseProps>,
       Component: ComponentType<TProps>
     ) =>