feat: default impl for factory (viewModelsConfig property);docs: improved

Author: js2me

.changeset/silly-moons-matter.md

@@ -0,0 +1,5 @@
+---
+"mobx-view-model": minor
+---
+
+Added default implementation of `factory` property in `viewModelsConfig` global config object

.changeset/solid-games-invite.md

@@ -0,0 +1,5 @@
+---
+"mobx-view-model": patch
+---
+
+update documentation for all view models, add more links to source code

docs/.vitepress/theme/style.css

@@ -133,11 +133,13 @@ html.dark {
 
 :root {
   --vp-custom-block-tip-border: transparent;
-  --vp-custom-block-tip-text: var(--vp-c-text-1);
-  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
-  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+    --vp-custom-block-tip-bg: #dbebfdc2;
 }
 
+ html.dark {
+  --vp-custom-block-tip-bg: #273646c2;
+ }
+
 .i-logos\:mobx-icon {
   background: url(/mobx.svg) no-repeat;
   background-size: 100% 100%;
@@ -153,3 +155,10 @@ html.dark {
 .DocSearch {
   --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
+
+.custom-block > .custom-block-title:first-child:last-child {
+    margin-top: -8px;
+}
+p:has(>em:first-child:last-child) + div[class*=language-] {
+    margin-top: -10px;
+}

docs/api/other/view-model-lookup.md

@@ -8,8 +8,8 @@ It can be:
   - `ViewModel class reference`  
   - [`React`](https://react.dev) component created with [`withViewModel()`](/react/api/with-view-model) or [`withLazyViewModel()`](/react/api/with-lazy-view-model)  
 
-[Reference to source code type](/src/view-model/view-model.store.types.ts#L35)  
-[Reference to source code with internal usage of this value](/src/view-model/view-model.store.base.ts#L149)  
+[Reference to source code type](/src/view-model/view-model.store.types.ts#L42)  
+[Reference to source code with internal usage of this value](/src/view-model/view-model.store.base.ts#L220)  
 
 # Example   
 

docs/api/view-model-store/interface.md

@@ -6,10 +6,11 @@ title: View Model Store interface
 
 Interface represeting a store for managing [`ViewModels`](/api/view-models/interface)  
 
-::: tip
-Not required entity for targeted usage of this package, but can be helpful for accessing [ViewModel](/api/view-models/overview)s from everywhere by [ViewModel](/api/view-models/overview) id or [ViewModel](/api/view-models/overview) class name.   
+::: tip OPTIONAL USE
+This is not required for targeted usage of this package, but can be helpful for accessing [ViewModels](/api/view-models/overview) from everywhere by [ViewModelLookup](api/other/view-model-lookup)  
 :::
 
+[Reference to source code](/src/view-model/view-model.store.ts)  
 
 ## Method and properties  
 

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

@@ -1,7 +1,9 @@
-# ViewModelSimple  
+# `ViewModelSimple`  
 
 `ViewModelSimple` is a minimalistic implementation of the [ViewModel interface](/api/view-models/interface), designed for lightweight state management with **MobX**. It simplifies reactive state initialization using `makeAutoObservable` while enforcing a consistent instance lifecycle in React applications.  
 
+[Reference to source code](/src/view-model/view-model-simple.ts)  
+
 ## When to Use  
 Use `ViewModelSimple` when:   
 1. You need `direct control over MobX observability` (e.g., using `makeAutoObservable`)  
@@ -43,7 +45,7 @@ export class FruitViewModel implements ViewModelSimple {
 
 ### Instance creation  
 
-**Recommend** (but not required) to create instances using the [`useCreateViewModel`](/react/api/use-create-view-model) hook. This ensures proper lifecycle management and reactivity:   
+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";

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

@@ -27,7 +27,25 @@ new ViewModelStoreBase({
 })
 ```
 
+[Reference to source code](/src/config/global-config.ts#L9)  
 
+## Recommendations  
+
+These are the recommended settings for the global configuration `viewModelsConfig`,
+which contain the most optimal values.
+
+```ts
+import { loadableDefaultConfig } from '@one-web/uikit-7';
+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
+```
 
 ## `startViewTransitions`  
 Indicates whether to enable transitions for the start view.  
@@ -64,12 +82,13 @@ Indicates type of observable for `ViewModel` payload.
 ## `generateId()`  
 Generates an unique identifier for a [`ViewModel`](/api/view-models/interface).   
 
-Default library implementation is [here](/src/utils/create-vm-id-generator.ts#L16)  
+::: tip This property has default implementation [here](/src/utils/create-vm-id-generator.ts#L16)
+:::
 
 #### Example 
 
-
-```ts
+_Using `crypto.randomUUID()` to generate view model ids_
+```ts{3}
 import { viewModelsConfig } from "mobx-view-model";
 
 viewModelsConfig.generateId = () => crypto.randomUUID();
@@ -80,10 +99,16 @@ Factory function for creating [`ViewModel`](/api/view-models/interface) instance
 
 Can be helpful if you want to add some constructor arguments for your own [`ViewModel`](/api/view-models/interface) implementation  
 
+
+::: tip This property has default implementation [here](/src/config/global-config.ts#L25) 
+:::
+
 #### Example  
 
-```ts
+_Passing `RootStore` as first constructor parameter_
+```ts{2,6}
 import { viewModelsConfig } from "mobx-view-model";
+import { rootStore } from "@/shared/store";
 
 viewModelsConfig.factory = (config) => {
   const { VM } = config;
@@ -150,7 +175,7 @@ viewModelsConfig.processViewComponent = (Component) => {
   }
 }
 ```
-::: tip It works only for [`withViewModel` HOCs](/react/api/with-view-model)  
+::: warning It works only for [`withViewModel` HOCs](/react/api/with-view-model)  
 :::
 
 ## `wrapViewsInObserver`  
@@ -165,7 +190,7 @@ import { viewModelsConfig } from "mobx-view-model";
 viewModelsConfig.wrapViewsInObserver = true;
 ```
 
-::: tip It works only for [`withViewModel` HOCs](/react/api/with-view-model)  
+::: warning It works only for [`withViewModel` HOCs](/react/api/with-view-model)  
 :::
 
 ## `observable`  
@@ -180,7 +205,8 @@ This is removes `makeObservable(this, annotations)`/`makeObservable(this)` calls
 This is change style of marking `MobX` annotations from "decorators style" to "non decorators style".   
 Very helpful if you want to write code with "non decorators style".   
 
-**default value is `true`**  
+::: tip This property has default value - `true` 
+:::
 
 Example:   
 ```ts

src/config/global-config.ts

@@ -1,6 +1,7 @@
 import { createGlobalConfig } from 'yummies/complex';
 
 import { ViewModelsConfig } from './types.js';
+import { mergeVMConfigs } from './utils/merge-vm-configs.js';
 
 /**
  * Global configuration options for view models
@@ -21,4 +22,11 @@ export const viewModelsConfig = createGlobalConfig<ViewModelsConfig>({
       useDecorators: true,
     },
   },
+  factory: (config) => {
+    const VM = config.VM;
+    return new VM({
+      ...config,
+      vmConfig: mergeVMConfigs(config.config ?? config.vmConfig),
+    });
+  },
 });

src/config/types.ts

@@ -28,6 +28,12 @@ export interface ViewModelObservableConfig {
   ) => void;
 }
 
+export type GenerateViewModelIdFn = (ctx: AnyObject) => string;
+
+export type CreateViewModelFactoryFn<
+  TViewModel extends AnyViewModel = AnyViewModel,
+> = (config: ViewModelCreateConfig<TViewModel>) => TViewModel;
+
 /**
  * Configuration options for view models.
  * [**Documentation**](https://js2me.github.io/mobx-view-model/api/view-models/view-models-config)
@@ -46,9 +52,9 @@ export interface ViewModelsConfig {
   /** [**Documentation**](https://js2me.github.io/mobx-view-model/api/view-models/view-models-config#payloadcomputed) */
   payloadComputed?: 'struct' | boolean | ((a: any, b: any) => boolean);
   /** [**Documentation**](https://js2me.github.io/mobx-view-model/api/view-models/view-models-config#generateid) */
-  generateId?: (ctx: AnyObject) => string;
+  generateId?: GenerateViewModelIdFn;
   /** [**Documentation**](https://js2me.github.io/mobx-view-model/api/view-models/view-models-config#factory) */
-  factory?: (config: ViewModelCreateConfig<AnyViewModel>) => AnyViewModel;
+  factory: CreateViewModelFactoryFn<AnyViewModel>;
   /** [**Documentation**](https://js2me.github.io/mobx-view-model/api/view-models/view-models-config#fallbackcomponent) */
   fallbackComponent?: ComponentType;
   /** [**Documentation**](https://js2me.github.io/mobx-view-model/api/view-models/view-models-config#onmount) */
@@ -75,10 +81,11 @@ export interface ViewModelsConfig {
  */
 export type ViewModelsRawConfig = Omit<
   ViewModelsConfig,
-  'startViewTransitions' | 'observable'
+  'startViewTransitions' | 'observable' | 'factory'
 > & {
   startViewTransitions?:
     | DeepPartial<ViewModelsConfig['startViewTransitions']>
     | boolean;
   observable?: DeepPartial<ViewModelsConfig['observable']>;
+  factory?: ViewModelsConfig['factory'];
 };

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

@@ -1,24 +1,19 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { useContext, useLayoutEffect, useRef, useState } from 'react';
-import {
-  AnyObject,
-  Class,
-  AllPropertiesOptional,
-  Maybe,
-} from 'yummies/utils/types';
+import { Class, AllPropertiesOptional, Maybe } from 'yummies/utils/types';
 
 import { viewModelsConfig } from '../config/global-config.js';
-import { mergeVMConfigs } from '../config/index.js';
+import {
+  CreateViewModelFactoryFn,
+  GenerateViewModelIdFn,
+} from '../config/index.js';
 import { ActiveViewModelContext } from '../contexts/active-view-context.js';
 import { ViewModelsContext } from '../contexts/view-models-context.js';
 import { useIsomorphicLayoutEffect } from '../lib/hooks/use-isomorphic-layout-effect.js';
 import { generateVMId } from '../utils/create-vm-id-generator.js';
-import { ViewModelSimple } from '../view-model/view-model.js';
+import { ViewModelSimple } from '../view-model/view-model-simple.js';
 import { ViewModelCreateConfig } from '../view-model/view-model.store.types.js';
-import {
-  AnyViewModel,
-  ViewModelParams,
-} from '../view-model/view-model.types.js';
+import { AnyViewModel } from '../view-model/view-model.types.js';
 
 export interface UseCreateViewModelConfig<TViewModel extends AnyViewModel>
   extends Pick<
@@ -33,12 +28,12 @@ export interface UseCreateViewModelConfig<TViewModel extends AnyViewModel>
   /**
    * Function to generate an identifier for the view model
    */
-  generateId?: (ctx: AnyObject) => string;
+  generateId?: GenerateViewModelIdFn;
 
   /**
    * Function to create an instance of the VM class
    */
-  factory?: (config: ViewModelCreateConfig<TViewModel>) => TViewModel;
+  factory?: CreateViewModelFactoryFn<TViewModel>;
 }
 
 const useCreateViewModelSimple = (
@@ -55,8 +50,9 @@ const useCreateViewModelSimple = (
 
     const instance = new VM();
     viewModels?.markToBeAttached(instance);
-    if (viewModels) {
-      instance.linkStore?.(viewModels);
+
+    if (viewModels && instance.linkStore) {
+      instance.linkStore(viewModels);
     }
     return instance;
   });
@@ -182,13 +178,7 @@ export function useCreateViewModel(VM: Class<any>, ...args: any[]) {
       const instance: AnyViewModel =
         config?.factory?.(configCreate) ??
         viewModels?.createViewModel<any>(configCreate) ??
-        viewModelsConfig.factory?.(configCreate) ??
-        new VM({
-          ...configCreate,
-          vmConfig: mergeVMConfigs(
-            configCreate.config ?? configCreate.vmConfig,
-          ),
-        } satisfies ViewModelParams<any>);
+        viewModelsConfig.factory(configCreate);
 
       instanceRef.current = instance;