feat: forwardRef parameter better typings

Author: js2me

.changeset/fluffy-beans-spend.md

@@ -0,0 +1,5 @@
+---
+"mobx-view-model": minor
+---
+
+better typings support of `forwardedRef` prop and `ref` prop handling

package.json

@@ -57,7 +57,7 @@
   },
   "dependencies": {
     "react-simple-loadable": "^2.3.9",
-    "yummies": "^5.11.1"
+    "yummies": "^5.12.0"
   },
   "peerDependencies": {
     "mobx": "^6.12.4",
@@ -83,7 +83,7 @@
     "sborshik": "^1.0.33",
     "vite": "^7.1.10",
     "tsx": "^4.20.5",
-    "typescript": "^5.9.2",
+    "typescript": "^5.9.3",
     "vitest": "^3.1.2"
   },
   "packageManager": "[email protected]+sha512.140036830124618d624a2187b50d04289d5a087f326c9edfc0ccd733d76c4f52c3a313d4fc148794a2a9d81553016004e6742e8cf850670268a7387fc220c903"

pnpm-lock.yaml

@@ -7,7 +7,6 @@ import { type PackedAsyncModule, unpackAsyncModule } from 'yummies/imports';
 import type { Class, Maybe, MaybePromise } from 'yummies/utils/types';
 import { viewModelsConfig } from '../config/index.js';
 import type { AnyViewModel, AnyViewModelSimple } from '../view-model/index.js';
-
 import {
   type ViewModelHocConfig,
   type ViewModelSimpleHocConfig,

src/hoc/with-lazy-view-model.tsx

@@ -1609,7 +1609,32 @@ describe('withViewModel', () => {
   });
 
   describe('typings', () => {
-    it('1', async () => {
+    it('simple no props declaration (model prop infer type)', async () => {
+      class ParentMemeVM extends ViewModelBase {
+        kek = 1;
+      }
+      class MemeVM extends ViewModelBase<EmptyObject, ParentMemeVM> {
+        pek = this.parentViewModel?.kek;
+
+        getFoo() {
+          return '1';
+        }
+      }
+
+      const Meme = withViewModel(MemeVM, ({ model }) => {
+        expectTypeOf(model).toEqualTypeOf<MemeVM>();
+        return <div>{`hello ${model.pek} ${model.getFoo()}`}</div>;
+      });
+
+      const TestApp = () => {
+        return <Meme />;
+      };
+
+      const screen = await act(async () => render(<TestApp />));
+      expect(screen.getByText('hello undefined 1')).toBeDefined();
+    });
+
+    it('forwarding refs', async () => {
       type JediType = 'defender' | 'guard' | 'consul';
 
       class JediVM<TJediType extends JediType> extends ViewModelBase<{
@@ -1666,7 +1691,7 @@ describe('withViewModel', () => {
 
       await act(async () => render(<TestApp />));
     });
-    it('forwardedRef already defined (overrided) in ComponentProps', async () => {
+    it('forwardedRef already defined (overrided) in ComponentProps (number)', async () => {
       class YourVM extends ViewModelBase {}
 
       interface ComponentProps
@@ -1686,8 +1711,82 @@ describe('withViewModel', () => {
         return <Component forwardedRef={1} />;
       };
 
-      await act(async () => render(<TestApp />));
+      const screen = await act(async () => render(<TestApp />));
       expect(screen.getByText('hello 1')).toBeDefined();
     });
+    it('forwardedRef already defined (overrided) in ComponentProps (number | undefined) (no prop passed)', async () => {
+      class YourVM extends ViewModelBase {}
+
+      interface ComponentProps
+        extends Omit<ViewModelProps<YourVM>, 'forwardedRef'> {
+        forwardedRef?: number;
+      }
+
+      const Component = withViewModel(
+        YourVM,
+        ({ forwardedRef }: ComponentProps) => {
+          expectTypeOf(forwardedRef).toEqualTypeOf<number | undefined>();
+          return <div>{`hello ${forwardedRef}`}</div>;
+        },
+      );
+
+      const TestApp = () => {
+        return <Component />;
+      };
+
+      const screen = await act(async () => render(<TestApp />));
+      expect(screen.getByText('hello undefined')).toBeDefined();
+    });
+    it('forwardedRef already defined (overrided) in ComponentProps (number | undefined) (prop passed)', async () => {
+      class YourVM extends ViewModelBase {}
+
+      interface ComponentProps
+        extends Omit<ViewModelProps<YourVM>, 'forwardedRef'> {
+        forwardedRef?: number;
+      }
+
+      const Component = withViewModel(
+        YourVM,
+        ({ forwardedRef }: ComponentProps) => {
+          expectTypeOf(forwardedRef).toEqualTypeOf<number | undefined>();
+          return <div>{`hello ${forwardedRef}`}</div>;
+        },
+      );
+
+      const TestApp = () => {
+        return <Component forwardedRef={666} />;
+      };
+
+      const screen = await act(async () => render(<TestApp />));
+      expect(screen.getByText('hello 666')).toBeDefined();
+    });
+    it('ref already defined in ComponentProps', async () => {
+      class YourVM extends ViewModelBase {}
+
+      interface ComponentProps extends ViewModelProps<YourVM> {
+        ref?: React.LegacyRef<number>;
+      }
+
+      const Component = withViewModel<YourVM, ComponentProps>(
+        YourVM,
+        ({ forwardedRef }) => {
+          expectTypeOf(forwardedRef).toEqualTypeOf<
+            React.ForwardedRef<number> | undefined
+          >();
+          return <div>hello</div>;
+        },
+        {
+          forwardRef: true,
+        },
+      );
+
+      const TestApp = () => {
+        const ref = useRef(1);
+        return <Component ref={ref} />;
+      };
+
+      const screen = await act(async () => render(<TestApp />));
+      expect(screen.getByText('hello')).toBeDefined();
+    });
   });
 });