docs: add integration with RootStore recipe

Author: js2me

docs/.vitepress/config.mts

@@ -190,6 +190,7 @@ export default defineConfig({
         text: 'Recipes',
         items: [
           { text: 'Wrap in observer() all view components', link: '/recipes/observer-wrap-all-view-components' },
+          { text: 'Integration with RootStore', link: '/recipes/integration-with-root-store' },
         ]
       },
       {

docs/introduction/usage/detailed-configuration.md

@@ -8,20 +8,23 @@ This way can be helpful when:
 
 Follow the steps:   
 
-1. Make your own `ViewModel` implementation with accepting `RootStore` as `constructor` parameter   
+1. Make your own `ViewModel` implementation and interface with some customizations:  
 
-```ts
+```ts{9,10}
 // view-model.ts
 // interface for your view model
 import { ViewModel as ViewModelBase } from 'mobx-view-model';
 
 export interface ViewModel<
   Payload extends AnyObject = EmptyObject,
   ParentViewModel extends ViewModel<any> = ViewModel<any, any>,
-> extends ViewModelBase<Payload, ParentViewModel> {}
+> extends ViewModelBase<Payload, ParentViewModel> {
+  trackName: string;
+  getTrackTime(): Date;
+}
 ```
 
-```ts{15}
+```ts{5,12,14,16,17,18}
 // view-model.impl.ts
 // implementation for your interface
 import { ViewModelBase, ViewModelParams } from 'mobx-view-model';
@@ -35,26 +38,19 @@ export class ViewModelImpl<
   extends ViewModelBase<Payload, ParentViewModel>
   implements ViewModel<Payload, ParentViewModel>
 {
-  constructor(
-    protected rootStore: RootStore,
-    params: ViewModelParams<Payload, ParentViewModel>,
-  ) {
-    super(params);
-  }
+  trackName = new Date().toISOString()
 
-  // example of your custom methods
-  // and properties
-  get queryParams() {
-    return this.rootStore.router.queryParams.data;
+  getTrackTime() {
+    return new Date();
   }
 }
 
 ```
 
 
-1. Make your own `ViewModelStore` implementation with accepting `RootStore` as `constructor` parameter and overriding `createViewModel` method for transfer `rootStore`   
+1. Make your own `ViewModelStore` implementation   
 
-```ts{8,11,22,23,24}
+```ts{8,19,20,21}
 // view-model.store.impl.ts
 import {
   ViewModelParams,
@@ -65,10 +61,6 @@ import {
 import { ViewModelImpl } from "./view-model.impl.ts"
 
 export class ViewModelStoreImpl extends ViewModelStoreBase {
-  constructor(protected rootStore: RootStore) {
-    super();
-  }
-
   createViewModel<VM extends ViewModel<any, ViewModel<any, any>>>(
     config: ViewModelCreateConfig<VM>,
   ): VM {
@@ -77,7 +69,9 @@ export class ViewModelStoreImpl extends ViewModelStoreBase {
     // here is you sending rootStore as
     // first argument into VM (your view model implementation)
     if (ViewModelImpl.isPrototypeOf(VM)) {
-      return new VM(this.rootStore, config);
+      const instance = super.createViewModel(config) as unknown as ViewModelImpl;
+      console.log(intance.getTrackTime());
+      return instance;
     }
 
     // otherwise it will be default behaviour
@@ -87,22 +81,7 @@ export class ViewModelStoreImpl extends ViewModelStoreBase {
 }
 ```
 
-3. Add `ViewModelStore` into your `RootStore`   
-
-```ts{8}
-import { ViewModelStore } from 'mobx-view-model';
-import { ViewModelStoreImpl } from '@/shared/lib/mobx';
-
-export class RootStoreImpl implements RootStore {
-  viewModels: ViewModelStore;
-
-  constructor() {
-    this.viewModels = new ViewModelStoreImpl(this);
-  }
-}
-```  
-
-4. Create `View` with `ViewModel`   
+3. Create `View` with `ViewModel`   
 
 ```tsx{2,4,10}
 import { ViewModelProps, withViewModel } from 'mobx-view-model';
@@ -114,7 +93,7 @@ export class MyPageVM extends ViewModelImpl {
 
   async mount() {
     // this.isMounted = false;
-    await this.rootStore.beerApi.takeBeer();
+    console.log(this.trackName)
     super.mount(); // this.isMounted = true
   }
 
@@ -133,3 +112,5 @@ const MyPageView = observer(({ model }: ViewModelProps<MyPageVM>) => {
 
 export const MyPage = withViewModel(MyPageVM)(MyPageView);
 ```
+
+Also you may be helpful to read [**this recipe about integration with `RootStore`**](/recipes/integration-with-root-store)   

docs/introduction/usage/with-base-implementation.md

@@ -41,7 +41,7 @@ const MyPageView = observer(({ model }: ViewModelProps<MyPageVM>) => {
   return <div>{model.state}</div>;
 });
 
-export const MyPage = withViewModel(MyPageVM)(MyPageView);
+export const MyPage = withViewModel(MyPageVM, MyPageView);
 ```
 
 or you can use [`useCreateViewModel()` hook](/react/api/use-create-view-model)  

docs/recipes/integration-with-root-store.md

@@ -0,0 +1,133 @@
+# Integration with `RootStore`   
+
+This recipe may be helpful if you need to get access to your `RootStore` inside your `ViewModel` implementations   
+
+Follow the steps:   
+
+1. Make your own `ViewModel` implementation with accepting `RootStore` as `constructor` parameter   
+
+```ts
+// view-model.ts
+// interface for your view model
+import { ViewModel as ViewModelBase } from 'mobx-view-model';
+
+export interface ViewModel<
+  Payload extends AnyObject = EmptyObject,
+  ParentViewModel extends ViewModel<any> = ViewModel<any, any>,
+> extends ViewModelBase<Payload, ParentViewModel> {}
+```
+
+```ts{6,16}
+// view-model.impl.ts
+// implementation for your interface
+import { ViewModelBase, ViewModelParams } from 'mobx-view-model';
+
+import { ViewModel } from './view-model';
+import { RootStore } from "@/shared/store";
+
+export class ViewModelImpl<
+    Payload extends AnyObject = EmptyObject,
+    ParentViewModel extends ViewModel<any> = ViewModel<any>,
+  >
+  extends ViewModelBase<Payload, ParentViewModel>
+  implements ViewModel<Payload, ParentViewModel>
+{
+  constructor(
+    protected rootStore: RootStore,
+    params: ViewModelParams<Payload, ParentViewModel>,
+  ) {
+    super(params);
+  }
+
+  // example of your custom methods
+  // and properties
+  get queryParams() {
+    return this.rootStore.router.queryParams.data;
+  }
+}
+
+```
+
+
+1. Make your own `ViewModelStore` implementation with accepting `RootStore` as `constructor` parameter and overriding `createViewModel` method for transfer `rootStore`   
+
+```ts{8,9,12,23,24,25}
+// view-model.store.impl.ts
+import {
+  ViewModelParams,
+  ViewModelStoreBase,
+  ViewModel,
+  ViewModelCreateConfig,
+} from 'mobx-view-model';
+import { ViewModelImpl } from "./view-model.impl.ts"
+import { RootStore } from "@/shared/store";
+
+export class ViewModelStoreImpl extends ViewModelStoreBase {
+  constructor(protected rootStore: RootStore) {
+    super();
+  }
+
+  createViewModel<VM extends ViewModel<any, ViewModel<any, any>>>(
+    config: ViewModelCreateConfig<VM>,
+  ): VM {
+    const VM = config.VM;
+
+    // here is you sending rootStore as
+    // first argument into VM (your view model implementation)
+    if (ViewModelImpl.isPrototypeOf(VM)) {
+      return new VM(this.rootStore, config);
+    }
+
+    // otherwise it will be default behaviour
+    // of this method
+    return super.createViewModel(config);
+  }
+}
+```
+
+3. Add `ViewModelStore` into your `RootStore`   
+
+```ts{8}
+import { ViewModelStore } from 'mobx-view-model';
+import { ViewModelStoreImpl } from '@/shared/lib/mobx';
+
+export class RootStoreImpl implements RootStore {
+  viewModels: ViewModelStore;
+
+  constructor() {
+    this.viewModels = new ViewModelStoreImpl(this);
+  }
+}
+```  
+
+4. Create `View` with `ViewModel`   
+
+```tsx{2,4,10}
+import { ViewModelProps, withViewModel } from 'mobx-view-model';
+import { ViewModelImpl } from '@/shared/lib/mobx';
+
+export class MyPageVM extends ViewModelImpl {
+  @observable
+  accessor state = '';
+
+  async mount() {
+    // this.isMounted = false;
+    await this.rootStore.beerApi.takeBeer();
+    super.mount(); // this.isMounted = true
+  }
+
+  didMount() {
+    console.info('did mount');
+  }
+
+  unmount() {
+    super.unmount();
+  }
+}
+
+const MyPageView = observer(({ model }: ViewModelProps<MyPageVM>) => {
+  return <div>{model.state}</div>;
+});
+
+export const MyPage = withViewModel(MyPageVM, MyPageView);
+```