From 623bc6f16e4fdaccc3ea4a68af7c814f66bbee4c Mon Sep 17 00:00:00 2001
From: Henry Lin <henry.ys.lin@gmail.com>
Date: Thu, 1 Jun 2023 08:19:25 +0800
Subject: [PATCH] fix: makeReactive not updating props on rerender

---
 src/__tests__/component.test.tsx | 13 +++++++++++++
 src/component.ts                 | 16 +++++++++++-----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/__tests__/component.test.tsx b/src/__tests__/component.test.tsx
index 5db5d6a..8ba89d2 100644
--- a/src/__tests__/component.test.tsx
+++ b/src/__tests__/component.test.tsx
@@ -44,6 +44,19 @@ describe('makeReactive', () => {
     const content = await findByText('Test component');
     expect(content).toBeTruthy();
   });
+  it('updates props', async () => {
+    const Tester = makeReactive(function Tester({ value }: { value: string }) {
+      return <p>{value}</p>;
+    });
+
+    const { findByText, rerender } = render(<Tester value="Test component" />);
+    const content = await findByText('Test component');
+    expect(content).toBeTruthy();
+
+    rerender(<Tester value="Test component 2" />);
+    const content2 = await findByText('Test component 2');
+    expect(content2).toBeTruthy();
+  });
   it('re-renders when ref changes', async () => {
     const count = ref(0);
     const Tester = makeReactive(function Tester() {
diff --git a/src/component.ts b/src/component.ts
index ac32a0f..913f0e9 100644
--- a/src/component.ts
+++ b/src/component.ts
@@ -10,6 +10,7 @@ import { useEffect, useRef, useState } from 'react';
 interface ComponentReactivity {
   scope: EffectScope;
   effect: ReactiveEffectRunner;
+  args: [props: any, ctx?: any];
 }
 
 const renderedComponents = new WeakMap<any, ComponentReactivity>();
@@ -46,7 +47,7 @@ const renderedComponents = new WeakMap<any, ComponentReactivity>();
 export const makeReactive = <P extends {}>(
   component: React.FC<P>
 ): React.FC<P> => {
-  const ReactiveFC: React.FC<P> = (props, ctx) => {
+  const ReactiveFC: React.FC<P> = (...args) => {
     const reactivityRef = useRef<ComponentReactivity | null>(null);
     const [, setTick] = useState(0);
     const rerender = () => setTick((v) => v + 1);
@@ -55,13 +56,17 @@ export const makeReactive = <P extends {}>(
       if (reactivityRef.current === null) {
         const scope = effectScope();
         scope.run(() => {
-          const runner = effect(() => component(props, ctx), {
-            lazy: true,
-            scheduler: rerender,
-          });
+          const runner = effect(
+            () => component(...reactivityRef.current!.args),
+            {
+              lazy: true,
+              scheduler: rerender,
+            }
+          );
           reactivityRef.current = {
             scope,
             effect: runner,
+            args,
           };
         });
         if (requiresRerender) {
@@ -96,6 +101,7 @@ export const makeReactive = <P extends {}>(
       renderedComponents.set(fiber, reactivityRef.current!);
     }
 
+    reactivityRef.current!.args = args;
     return reactivityRef.current!.scope.run(() =>
       reactivityRef.current!.effect()
     );