fix: fix makeReactive types to accept components with props

src/__tests__/component.test.tsx

@@ -22,6 +22,28 @@ describe('makeReactive', () => {
     const content = await findByText('Test component');
     expect(content).toBeTruthy();
   });
+  it('accepts props', async () => {
+    const Tester = makeReactive(function Tester({
+      value,
+      onChange,
+    }: {
+      value: string;
+      onChange: () => void;
+    }) {
+      return (
+        <>
+          <p>{value}</p>
+          <input onChange={onChange} value={value} />
+        </>
+      );
+    });
+
+    const { findByText } = render(
+      <Tester value="Test component" onChange={() => {}} />
+    );
+    const content = await findByText('Test component');
+    expect(content).toBeTruthy();
+  });
   it('re-renders when ref changes', async () => {
     const count = ref(0);
     const Tester = makeReactive(function Tester() {

src/component.ts

@@ -43,8 +43,10 @@ const renderedComponents = new WeakMap<any, ComponentReactivity>();
  * @param component The function component to be made reactive.
  * @returns A reactive function component.
  */
-export const makeReactive = <T extends React.FC>(component: T): T => {
-  const reactiveFC = ((props, ctx) => {
+export const makeReactive = <P extends {}>(
+  component: React.FC<P>
+): React.FC<P> => {
+  const ReactiveFC: React.FC<P> = (props, ctx) => {
     const reactivityRef = useRef<ComponentReactivity | null>(null);
     const [, setTick] = useState(0);
     const rerender = () => setTick((v) => v + 1);
@@ -97,14 +99,14 @@ export const makeReactive = <T extends React.FC>(component: T): T => {
     return reactivityRef.current!.scope.run(() =>
       reactivityRef.current!.effect()
     );
-  }) as T;
-  reactiveFC.propTypes = component.propTypes;
-  reactiveFC.contextTypes = component.contextTypes;
-  reactiveFC.defaultProps = component.defaultProps;
-  reactiveFC.displayName = component.displayName;
-  Object.defineProperty(reactiveFC, 'name', {
+  };
+  ReactiveFC.propTypes = component.propTypes;
+  ReactiveFC.contextTypes = component.contextTypes;
+  ReactiveFC.defaultProps = component.defaultProps;
+  ReactiveFC.displayName = component.displayName;
+  Object.defineProperty(ReactiveFC, 'name', {
     value: component.name,
     writable: false,
   });
-  return reactiveFC;
+  return ReactiveFC;
 };