Merge pull request #24 from js2me/next-release

Next release

Author: js2me

.changeset/cuddly-horses-run.md

@@ -0,0 +1,11 @@
+---
+"mobx-view-model": major
+---
+
+removed all marked as deprecation properties and methods   
+
+- Removed `config` property in `ViewModelParams` interface (renamed to `vmConfig`)   
+- Removed `linkStore` method in `ViewModelSimple` interface (renamed to `attachViewModelStore`)   
+- Removed type `ComponentWithLazyViewModel` (renamed to `VMLazyComponent`)   
+- Removed type `ComponentWithViewModel` (renamed to `VMComponent`)  
+- Removed `params` property in `ViewModelBase` class (renamed to `vmParams`)   

.changeset/dry-cycles-smell.md

@@ -0,0 +1,20 @@
+---
+"mobx-view-model": major
+---
+
+modified global payload processing   
+
+Previosly `viewModelsConfig` haved the following configuration:   
+
+```ts
+  comparePayload: 'strict',
+  payloadObservable: 'ref',
+  payloadComputed: false,
+```
+So it was a bit performance overhead. Now it is:   
+```ts
+  comparePayload: false,
+  payloadComputed: 'struct',
+  payloadObservable: 'ref',
+```
+

.changeset/early-breads-fix.md

@@ -0,0 +1,5 @@
+---
+"mobx-view-model": minor
+---
+
+added default implementation for `generateId` property in global `viewModelsConfig`

.changeset/forty-icons-wash.md

@@ -0,0 +1,5 @@
+---
+"mobx-view-model": patch
+---
+
+fixed typings for `ParentViewModel` generic type argument for all interfaces/classes (support AnyViewModelSimple)

.changeset/pretty-ends-go.md

@@ -0,0 +1,26 @@
+---
+"mobx-view-model": minor
+---
+
+`id` property now is optional for implementation for `ViewModelSimple` interface   
+
+Now you can do not implement `ViewModelSimple` interface to work with this library:   
+
+```tsx
+class MyVM {
+  bar = '1'
+}
+...
+const model = useCreateViewModel(MyVM);
+return <div>{model.bar}</div>;
+```
+
+```tsx
+class MyVM {
+  foo = '1';
+}
+...
+const YouComponent = withViewModel(MyVM, ({ model }) => {
+  return <div>{model.foo}</div>
+});
+```

.changeset/tiny-geese-attack.md

@@ -0,0 +1,5 @@
+---
+"mobx-view-model": minor
+---
+
+`parentViewModel` property for `ViewModelSimple` interface

docs/.vitepress/config.mts

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

docs/api/view-models/view-model-simple.md

@@ -10,13 +10,6 @@ Use `ViewModelSimple` when:
 2. You prefer a simple, boilerplate-free class structure  
 3. Your view model does not required advanced features like [`viewModels` access](/api/view-models/base-implementation.html#viewmodels) or complex lifecycle hooks.  
 
-## Implementation  
-
-### Requirements   
-To implement `ViewModelSimple`, your class must:   
-1. Define a unique `id` property to identify the instance (used for access in `ViewModelStore`)   
-
-
 ### Example   
 ```ts
 import { ViewModelSimple } from "mobx-view-model";
@@ -41,11 +34,58 @@ export class FruitViewModel implements ViewModelSimple {
 }
 ```
 
+::: tip defining `id` property is optional
+If you do not define the `id` property, a random id will be generated from `viewModelsConfig.generateId`
+:::
+
+### Example without any implemented method from interface    
+
+```ts{4}
+import { ViewModelSimple } from "mobx-view-model";
+import { makeAutoObservable } from "mobx";
+
+export class FruitViewModel {
+  // Observable state
+  fruit = "apple";
+
+  constructor() {
+    // Initialize MobX observables
+    makeAutoObservable(this);
+  }
+
+  // Example action
+  setFruit(newFruit: string) {
+    this.fruit = newFruit;
+  }
+}
+```
+
+::: tip `implements ViewModelSimple` was removed
+Because TypeScript throws an error about not implementing at least one property or method of the `ViewModelSimple` interface.
+:::
+
 ## Usage in React  
 
-### Instance creation  
+### Usage with [`withViewModel`](/react/api/with-view-model) HOC   
 
-Create instances using the [`useCreateViewModel`](/react/api/use-create-view-model) hook. This ensures proper lifecycle management and reactivity:   
+```tsx
+import { observer } from "mobx-react-lite";
+import { withViewModel } from "mobx-view-model";
+import { FruitViewModel } from "./model";
+
+export const FruitComponent = withViewModel(FruitViewModel, ({ model }) => {
+  return (
+    <div>
+      <p>Current fruit: {model.fruit}</p>
+      <button onClick={() => model.setFruit("banana")}>
+        Change to Banana
+      </button>
+    </div>
+  );
+});
+```
+
+### Usage with [`useCreateViewModel`](/react/api/use-create-view-model) hook   
 
 ```tsx
 import { observer } from "mobx-react-lite";
@@ -67,6 +107,8 @@ export const FruitComponent = observer(() => {
 });
 ```
 
+
+
 ### Accessing Instances  
 To retrieve an existing instance elsewhere in your app:  
 1. Use the [`useViewModel`](/react/api/use-view-model) hook.  

docs/api/view-models/view-models-config.md

@@ -41,7 +41,6 @@ import { viewModelsConfig, ViewModelStoreBase } from 'mobx-view-model';
 viewModelsConfig.comparePayload = false;
 viewModelsConfig.payloadComputed = 'struct';
 viewModelsConfig.payloadObservable = 'ref';
-viewModelsConfig.wrapViewsInObserver = true;
 
 viewModelsConfig.observable.viewModels.useDecorators = true; //false
 viewModelsConfig.observable.viewModelStores.useDecorators = true; // false
@@ -181,13 +180,15 @@ viewModelsConfig.processViewComponent = (Component) => {
 ## `wrapViewsInObserver`  
 
 Wrap View components in [`observer()` MobX HOC](https://mobx.js.org/api.html#observer)  
+This property is enabled by default.   
 
-Example:    
 
+You can turn off this behaviour by setting `wrapViewsInObserver` to `false`.   
+Example:    
 ```tsx
 import { viewModelsConfig } from "mobx-view-model";
 
-viewModelsConfig.wrapViewsInObserver = true;
+viewModelsConfig.wrapViewsInObserver = false;
 ```
 
 ::: warning It works only for [`withViewModel` HOCs](/react/api/with-view-model)  

docs/introduction/usage/detailed-configuration.md

@@ -17,7 +17,7 @@ import { ViewModel as ViewModelBase } from 'mobx-view-model';
 
 export interface ViewModel<
   Payload extends AnyObject = EmptyObject,
-  ParentViewModel extends ViewModel<any> = ViewModel<any, any>,
+  ParentViewModel extends ViewModel<any, any> | null = null,
 > extends ViewModelBase<Payload, ParentViewModel> {
   trackName: string;
   getTrackTime(): Date;
@@ -33,7 +33,7 @@ import { ViewModel } from './view-model';
 
 export class ViewModelImpl<
     Payload extends AnyObject = EmptyObject,
-    ParentViewModel extends ViewModel<any> = ViewModel<any>,
+    ParentViewModel extends ViewModel<any, any> | null = null,
   >
   extends ViewModelBase<Payload, ParentViewModel>
   implements ViewModel<Payload, ParentViewModel>