feat: passing props from original component to ViewModelBase

Author: js2me

.changeset/cute-humans-change.md

@@ -0,0 +1,5 @@
+---
+"mobx-view-model": minor
+---
+
+passing props to `ViewModelBase` as ref

src/components/only-view-model.tsx

@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react-lite';
 import { ReactNode } from 'react';
-import { AllPropertiesOptional, Class } from 'yummies/utils/types';
+import { Class, IsPartial } from 'yummies/utils/types';
 
 import {
   useCreateViewModel,
@@ -11,7 +11,7 @@ import { AnyViewModel } from '../view-model/index.js';
 export type OnlyViewModelProps<TViewModel extends AnyViewModel> = {
   model: Class<TViewModel>;
   children?: ReactNode | ((model: TViewModel) => ReactNode);
-} & (AllPropertiesOptional<TViewModel['payload']> extends true
+} & (IsPartial<TViewModel['payload']> extends true
   ? {
       payload?: TViewModel['payload'];
       config?: UseCreateViewModelConfig<TViewModel>;

src/hoc/with-view-model.tsx

@@ -13,10 +13,10 @@ import {
   UseCreateViewModelConfig,
 } from '../hooks/use-create-view-model.js';
 import {
-  AllPropertiesOptional,
   AnyObject,
   Class,
   EmptyObject,
+  IsPartial,
   Maybe,
 } from '../utils/types.js';
 import {
@@ -44,7 +44,7 @@ export type ViewModelInputProps<VM extends AnyViewModel | AnyViewModelSimple> =
   VM extends ViewModel<infer TPayload, any>
     ? TPayload extends EmptyObject
       ? AnyObject
-      : AllPropertiesOptional<TPayload> extends true
+      : IsPartial<TPayload> extends true
         ? {
             payload?: TPayload;
           }
@@ -54,7 +54,7 @@ export type ViewModelInputProps<VM extends AnyViewModel | AnyViewModelSimple> =
     : VM extends ViewModelSimple<infer TPayload>
       ? TPayload extends EmptyObject
         ? AnyObject
-        : AllPropertiesOptional<TPayload> extends true
+        : IsPartial<TPayload> extends true
           ? {
               payload?: TPayload;
             }
@@ -273,7 +273,7 @@ const withViewModelWrapper = (
     const model = useCreateViewModel(VM, payload, {
       ...config,
       component: ConnectedViewModel,
-      componentProps,
+      props: componentProps,
     }) as unknown as AnyViewModel | AnyViewModelSimple;
 
     const isRenderAllowedByStore =

src/hooks/use-create-view-model.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable react-hooks/rules-of-hooks */
 import { useContext, useLayoutEffect } from 'react';
-import { Class, AllPropertiesOptional, Maybe } from 'yummies/utils/types';
+import { Class, Maybe, IsPartial } from 'yummies/utils/types';
 
 import { viewModelsConfig } from '../config/global-config.js';
 import {
@@ -24,7 +24,7 @@ import {
 export interface UseCreateViewModelConfig<TViewModel extends AnyViewModel>
   extends Pick<
     ViewModelCreateConfig<TViewModel>,
-    'vmConfig' | 'config' | 'ctx' | 'component' | 'componentProps'
+    'vmConfig' | 'config' | 'ctx' | 'component' | 'props'
   > {
   /**
    * Unique identifier for the view
@@ -49,7 +49,7 @@ export interface UseCreateViewModelConfig<TViewModel extends AnyViewModel>
  */
 export function useCreateViewModel<TViewModel extends AnyViewModel>(
   VM: Class<TViewModel>,
-  ...args: AllPropertiesOptional<TViewModel['payload']> extends true
+  ...args: IsPartial<TViewModel['payload']> extends true
     ? [
         payload?: TViewModel['payload'],
         config?: UseCreateViewModelConfig<TViewModel>,
@@ -68,7 +68,7 @@ export function useCreateViewModel<TViewModel extends AnyViewModel>(
 export function useCreateViewModel<TViewModelSimple extends ViewModelSimple>(
   VM: Class<TViewModelSimple>,
   ...args: TViewModelSimple extends ViewModelSimple<infer TPayload>
-    ? AllPropertiesOptional<TPayload> extends true
+    ? IsPartial<TPayload> extends true
       ? [payload?: TPayload]
       : [payload: TPayload]
     : []

src/view-model/view-model.base.ts

@@ -24,6 +24,7 @@ declare const process: { env: { NODE_ENV?: string } };
 export class ViewModelBase<
   Payload extends AnyObject = EmptyObject,
   ParentViewModel extends AnyViewModel | null = null,
+  ComponentProps extends AnyObject = AnyObject,
 > implements ViewModel<Payload, ParentViewModel>
 {
   private abortController: AbortController;
@@ -46,9 +47,15 @@ export class ViewModelBase<
    * @deprecated use `vmParams`. This property will be removed in next major release
    * Reason: this word is very useful for users, so `vmParams` is more library-targered naming
    */
-  protected params: ViewModelParams<Payload, ParentViewModel>;
-
-  constructor(protected vmParams: ViewModelParams<Payload, ParentViewModel>) {
+  protected params: ViewModelParams<Payload, ParentViewModel, ComponentProps>;
+
+  constructor(
+    protected vmParams: ViewModelParams<
+      Payload,
+      ParentViewModel,
+      ComponentProps
+    >,
+  ) {
     this.params = vmParams;
     this.id = vmParams.id;
     this.vmConfig = mergeVMConfigs(vmParams.config ?? vmParams.vmConfig);

src/view-model/view-model.store.types.ts

@@ -30,7 +30,7 @@ export interface ViewModelCreateConfig<VM extends AnyViewModel>
   VM: Class<VM>;
   fallback?: ComponentType;
   component?: VMComponent<AnyViewModel, any>;
-  componentProps?: AnyObject;
+  props?: AnyObject;
 }
 
 /**

src/view-model/view-model.types.ts

@@ -23,6 +23,7 @@ export type ViewModelParent<TViewModel extends AnyViewModel> =
 export interface ViewModelParams<
   Payload extends AnyObject = EmptyObject,
   ParentViewModel extends AnyViewModel | null = null,
+  ComponentProps extends AnyObject = AnyObject,
 > {
   /**
    * Unique identifier for the view
@@ -50,4 +51,8 @@ export interface ViewModelParams<
    * @deprecated use `vmConfig` instead. Will be removed in next major release
    */
   config?: ViewModelsRawConfig;
+  /**
+   * Original component props
+   */
+  props?: ComponentProps;
 }