docs: update docs for modern approach of withViewModel HOC

Author: js2me

docs/.vitepress/theme/style.css

@@ -161,4 +161,12 @@ html.dark {
 }
 p:has(>em:first-child:last-child) + div[class*=language-] {
     margin-top: -10px;
+}
+
+.vp-doc strong a {
+    font-weight: bold;
+}
+
+.vp-doc strong code {
+    font-weight: bold;
 }

docs/introduction/getting-started.md

@@ -4,7 +4,8 @@ The `mobx-view-model` source code is written on TypeScript and compiled into Nod
 
 ## Requirements  
 
-- [`MobX`](https://mobx.js.org) **6+**  
+- [`MobX`](https://mobx.js.org) **^6**  
+- [`React`](https://reactjs.org) **^18** optional    
 
 ## Installation
 
@@ -14,14 +15,14 @@ The `mobx-view-model` source code is written on TypeScript and compiled into Nod
 npm install {packageJson.name}
 ```
 
-```bash [yarn]
-yarn add {packageJson.name}
-```
-
 ```bash [pnpm]
 pnpm add {packageJson.name}
 ```
 
+```bash [yarn]
+yarn add {packageJson.name}
+```
+
 :::
 
 ## Writing first ViewModels
@@ -48,8 +49,7 @@ import { observer } from "mobx-react-lite";
 import { withViewModel, ViewModelProps } from "mobx-view-model";
 import { PetCardVM } from "./model";
 
-const PetCardView = observer(({ model }: ViewModelProps<PetCardVM>) => {
-
+export const PetCard = withViewModel(PetCardVM, ({ model }) => {
   return (
     <div className="p-10 flex flex-col gap-3">
       <span>{`Pet name: ${model.petName}`}</span>
@@ -64,8 +64,6 @@ const PetCardView = observer(({ model }: ViewModelProps<PetCardVM>) => {
   )
 })
 
-export const PetCard = withViewModel(PetCardVM)(PetCardView)
-
 ...
 <PetCard />
 ```

docs/introduction/usage/detailed-configuration.md

@@ -8,7 +8,7 @@ This way can be helpful when:
 
 Follow the steps:   
 
-1. Make your own `ViewModel` implementation and interface with some customizations:  
+##### 1. Make your own `ViewModel` implementation and interface with some customizations:  
 
 ```ts{9,10}
 // view-model.ts
@@ -48,7 +48,7 @@ export class ViewModelImpl<
 ```
 
 
-1. Make your own `ViewModelStore` implementation   
+##### 2. Make your own `ViewModelStore` implementation   
 
 ```ts{8,19,20,21}
 // view-model.store.impl.ts
@@ -81,7 +81,7 @@ export class ViewModelStoreImpl extends ViewModelStoreBase {
 }
 ```
 
-3. Create `View` with `ViewModel`   
+##### 3. Create `View` with `ViewModel`   
 
 ```tsx{2,4,10}
 import { ViewModelProps, withViewModel } from 'mobx-view-model';
@@ -106,11 +106,9 @@ export class MyPageVM extends ViewModelImpl {
   }
 }
 
-const MyPageView = observer(({ model }: ViewModelProps<MyPageVM>) => {
+export const MyPage = withViewModel(MyPageVM, ({ model }) => {
   return <div>{model.state}</div>;
 });
-
-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/simple.md

@@ -2,15 +2,16 @@
 
 The most simplest way to make integration with this library is to use [`ViewModelSimple` interface](/api/view-models/view-model-simple)  
 
-Steps:  
+Follow the steps:  
 
-1. Implement [`ViewModelSimple` interface](/api/view-models/view-model-simple)  
+##### 1. Create class or implement [`ViewModelSimple` interface](/api/view-models/view-model-simple)  
 
 ```tsx
 import { ViewModelSimple } from 'mobx-view-model';
 import { makeAutoObservable } from 'mobx';
 
-export class MyPageVM implements ViewModelSimple {
+// export class MyPageVM implements ViewModelSimple {
+export class MyPageVM {
   state = '';
 
   constructor() {
@@ -23,20 +24,18 @@ export class MyPageVM implements ViewModelSimple {
 }
 ```
 
-2. Create instance of your ViewModel using [`useCreateViewModel()` hook](/react/api/use-create-view-model)  
+##### 2. Create instance of your `ViewModel` using [`withViewModel()` HOC](/react/api/with-view-model)   
 
 ```tsx
 import { observer } from 'mobx-react-lite';
 import { ViewModelPayload, useCreateViewModel } from 'mobx-view-model';
 
-const MyPageView = observer(() => {
-  const model = useCreateViewModel(MyPageVM);
-
+const MyPage = withViewModel(MyPageVM, ({ model }) => {
   return <div>{model.state}</div>;
 });
 ```
 
-3. Use it  
+##### 3. Use it  
 
 ```tsx
 <MyPage />

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

@@ -2,9 +2,9 @@
 
 Another simplest usage is to work with [base implementation](/api/view-models/base-implementation) of the [`ViewModel` interface](/api/view-models/interface)  
 
-Steps:  
+Follow the steps:  
 
-1. Create your [`ViewModel`](/api/view-models/overview) class using [`ViewModelBase`](/api/view-models/base-implementation) (base implementation of [`ViewModel` package interface](/api/view-models/interface))   
+##### **1.** Create your [`ViewModel`](/api/view-models/overview) class using [`ViewModelBase`](/api/view-models/base-implementation) (base implementation of [`ViewModel` package interface](/api/view-models/interface))   
 
 ```tsx
 import {
@@ -31,17 +31,15 @@ export class MyPageVM extends ViewModelBase<{ payloadA: string }> {
 }
 ```
 
-2. Create view component using [HOC `withViewModel()`](/react/api/with-view-model)  
+##### **2.** Create view component using [HOC `withViewModel()`](/react/api/with-view-model)  
 
 ```tsx
 import { observer } from 'mobx-react-lite';
 import { withViewModel } from 'mobx-view-model';
 
-const MyPageView = observer(({ model }: ViewModelProps<MyPageVM>) => {
+export const MyPage = withViewModel(MyPageVM, ({ model }) => {
   return <div>{model.state}</div>;
 });
-
-export const MyPage = withViewModel(MyPageVM, MyPageView);
 ```
 
 or you can use [`useCreateViewModel()` hook](/react/api/use-create-view-model)  
@@ -50,16 +48,18 @@ or you can use [`useCreateViewModel()` hook](/react/api/use-create-view-model)
 import { observer } from 'mobx-react-lite';
 import { ViewModelPayload, useCreateViewModel } from 'mobx-view-model';
 
-const MyPageView = observer(
+export const MyPage = observer(
   ({ payload }: { payload: ViewModelPayload<MyPageVM> }) => {
     const model = useCreateViewModel(MyPageVM, payload);
 
     return <div>{model.state}</div>;
   },
 );
-```
+```  
+::: tip don't forget to use the [`observer()` hoc](https://mobx.js.org/react-integration.html#react-integration)   
+:::
 
-3. Use it  
+##### **3.** Use it  
 
 ```tsx
 <MyPage payload={{ payloadA: '1' }} />

docs/introduction/usage/with-view-model-store.md

@@ -3,29 +3,29 @@
 View Model store allows you to get access to your view model instances from everywhere and give you more control of the creating view model instances.  
 Follow the simplest way of how to add view model store into your application:  
 
-1. Create a class implementing the [ViewModelStore interface](/api/view-model-store/interface) or use [basic library implementation (ViewModelStoreBase)](/api/view-model-store/base-implementation).  
+##### **1.** Create a class implementing the [ViewModelStore interface](/api/view-model-store/interface) or use [basic library implementation (ViewModelStoreBase)](/api/view-model-store/base-implementation).  
 
 ```tsx title="/src/shared/lib/mobx/view-model-store.ts"
 import { ViewModelStoreBase } from "mobx-view-model";
 
 class MyViewModelStore extends ViewModelStoreBase {}
 ```
 
-2. Create instance of the [ViewModelStore](/api/view-model-store/overview)  
+##### **2.** Create instance of the [ViewModelStore](/api/view-model-store/overview)  
 
 ```ts
 const viewModelStore = new MyViewModelStore() // or new ViewModelStoreBase
 ```
 
-3. Integrate with [React](https://react.dev/) using [`ViewModelsProvider`](/react/api/view-models-provider) somewhere in root of your application  
+##### **3.** Integrate with [React](https://react.dev/) using [`ViewModelsProvider`](/react/api/view-models-provider) somewhere in root of your application  
 
 ```tsx
-<ViewModelsProviders value={viewModelStore}>
+<ViewModelsProvider value={viewModelStore}>
 ...
-</ViewModelsProviders>
+</ViewModelsProvider>
 ```
 
-4. Get access to `ViewModelStore` inside your `ViewModels`   
+##### **4.** Get access to `ViewModelStore` inside your `ViewModels`   
 
 ```ts
 import { ViewModelBase } from "mobx-view-model";
@@ -50,4 +50,3 @@ export class YourVM extends ViewModelBase {
 
 
 
-

docs/other/vite-plugin.md

@@ -10,14 +10,14 @@ This library has a `Vite` plugin that **can** improve DX when using the library.
 npm install mobx-view-model-vite-plugin
 ```
 
-```bash [yarn]
-yarn add mobx-view-model-vite-plugin
-```
-
 ```bash [pnpm]
 pnpm add mobx-view-model-vite-plugin
 ```
 
+```bash [yarn]
+yarn add mobx-view-model-vite-plugin
+```
+
 :::
 
 

docs/react/integration.md

@@ -18,7 +18,7 @@ To achieve this you can use:
 
 ## 2. Render in React tree   
 
-#### If you are using [withViewModel() HOC](/react/api/with-view-model)  
+#### use [withViewModel() HOC](/react/api/with-view-model)  
 Then you should render component returned from this function  
 
 ```tsx
@@ -27,15 +27,16 @@ import { observer } from "mobx-react-lite";
 
 class YourComponentVM extends ViewModelBase {}
 
-const YourComponentView = observer(({ model }: ViewModelProps<YourComponentVM>) => {
-  return (
-    <div>
-      {model.id}
-    </div>
-  )
-})
+export interface YourComponentProps extends ViewModelProps<YourComponentVM> {
+  yourProp?: string;
+}
 
-const YourComponent = withViewModel(YourComponent)(YourComponentView)
+const YourComponent = withViewModel(
+  YourComponent,
+  ({ model, yourProp }: YourComponentProps) => {
+    return <div>{model.id}</div>;
+  },
+);
 
 const YourApp = () => {
   return (
@@ -44,10 +45,8 @@ const YourApp = () => {
 }
 ```
 
-_wrapping into [`observer` HOC](https://mobx.js.org/api.html#observer) is optional if you are not using MobX observables_
-
 
-#### If you are using [`useCreateViewModel()` hook](/react/api/use-create-view-model)  
+#### use [`useCreateViewModel()` hook](/react/api/use-create-view-model)  
 Then you should render your React components with using this hook  
 
 ```tsx
@@ -74,7 +73,7 @@ const YourApp = () => {
 ```
 
 
-## 3. _[Optional]_ Using [ViewModelStore](/api/view-model-store/interface)  
+## 3. _\[Optional\]_ Use [ViewModelStore](/api/view-model-store/interface)  
 [ViewModelStore](/api/view-model-store/interface) is very powerful thing which allows you to lookup and get access to your view model instances everywhere.  
 To use this store:
   1. Create instance of `ViewModelStore`