@rs-x/state-manager 0.4.12 → 0.4.13

package/readme.md

@@ -226,8 +226,8 @@ Monitors only assignment of a **new value** to the index.
 ```ts
 import { InjectionContainer, printValue } from '@rs-x/core';
 import {
-  IStateChange,
-  IStateManager,
+  type IStateChange,
+  type IStateManager,
   RsXStateManagerInjectionTokens,
   RsXStateManagerModule,
 } from '@rs-x/state-manager';
@@ -240,7 +240,7 @@ export const run = (() => {
     RsXStateManagerInjectionTokens.IStateManager,
   );
 
-  const stateContext = {
+  const model = {
     x: { y: 10 },
   };
 
@@ -254,24 +254,24 @@ export const run = (() => {
 
   try {
     // This will emit the new value { y: 10 }
-    stateManager.watchState(stateContext, 'x');
+    stateManager.watchState(model, 'x');
 
     console.log('Changed value:');
     // This will emit the new value { y: 10 }
-    stateContext.x = {
+    model.x = {
       y: 20,
     };
 
     console.log(`Latest value:`);
-    printValue(stateManager.getState(stateContext, 'x'));
+    printValue(stateManager.getState(model, 'x'));
 
     // This will emit no change because the state is not recursive.
-    console.log('\nstateContext.x.y = 30 will not emit any change:\n---\n');
-    stateContext.x.y = 30;
+    console.log('\nmodel.x.y = 30 will not emit any change:\n---\n');
+    model.x.y = 30;
   } finally {
     changedSubsription.unsubscribe();
     // Always release the state when it is no longer needed.
-    stateManager.releaseState(stateContext, 'x');
+    stateManager.releaseState(model, 'x');
   }
 })();
 ```
@@ -305,12 +305,13 @@ Monitors assignments **and** changes _inside_ the value.
 Example: if the value is an object, internal object changes are also observed. You can make a state item recursive by passing in a **mustProxify** predicate to a **watchState** call. The mustProxify will be called for every nested index. If you return true it will watch the index otherwise not.
 
 ```ts
-import { InjectionContainer, printValue, truePredicate } from '@rs-x/core';
+import { InjectionContainer, printValue } from '@rs-x/core';
 import {
-  IStateChange,
-  IStateManager,
+  type IStateChange,
+  type IStateManager,
   RsXStateManagerInjectionTokens,
   RsXStateManagerModule,
+  watchIndexRecursiveRule,
 } from '@rs-x/state-manager';
 
 // Load the state manager module into the injection container
@@ -320,7 +321,7 @@ export const run = (() => {
   const stateManager: IStateManager = InjectionContainer.get(
     RsXStateManagerInjectionTokens.IStateManager,
   );
-  const stateContext = {
+  const model = {
     x: { y: 10 },
   };
   const changedSubscription = stateManager.changed.subscribe(
@@ -336,25 +337,25 @@ export const run = (() => {
     // so we pass a predicate that always returns true.
     // This will emit an initial value { y: 10 }
     console.log('Initial value:');
-    stateManager.watchState(stateContext, 'x', truePredicate);
+    stateManager.watchState(model, 'x', watchIndexRecursiveRule);
 
     console.log('Changed value:');
     // This will emit the new value { y: 10 }
-    stateContext.x = {
+    model.x = {
       y: 20,
     };
 
     console.log('Changed (recursive) value:');
     // This will emit the new value { y: 30 } because x
     // is registered as a recursive state.
-    stateContext.x.y = 30;
+    model.x.y = 30;
 
     console.log(`Latest value:`);
-    printValue(stateManager.getState(stateContext, 'x'));
+    printValue(stateManager.getState(model, 'x'));
   } finally {
     changedSubscription.unsubscribe();
     // Always release the state when it is no longer needed.
-    stateManager.releaseState(stateContext, 'x', truePredicate);
+    stateManager.releaseState(model, 'x', watchIndexRecursiveRule);
   }
 })();
 ```
@@ -381,8 +382,8 @@ Besides that you can register a watched stated (calling `watchedState`) you can
 ```ts
 import { InjectionContainer, printValue } from '@rs-x/core';
 import {
-  IStateChange,
-  IStateManager,
+  type IStateChange,
+  type IStateManager,
   RsXStateManagerInjectionTokens,
   RsXStateManagerModule,
 } from '@rs-x/state-manager';
@@ -395,7 +396,7 @@ export const run = (() => {
     RsXStateManagerInjectionTokens.IStateManager,
   );
 
-  class StateContext {
+  class MyModel {
     private readonly _aPlusBId = 'a+b';
     private _a = 10;
     private _b = 20;
@@ -435,7 +436,7 @@ export const run = (() => {
     }
   }
 
-  const stateContext = new StateContext();
+  const model = new MyModel();
   const changeSubscription = stateManager.changed.subscribe(
     (change: IStateChange) => {
       printValue(change.newValue);
@@ -444,23 +445,23 @@ export const run = (() => {
 
   try {
     console.log(`Initial value for readonly property 'aPlusB':`);
-    console.log(stateContext.aPlusB);
+    console.log(model.aPlusB);
 
     console.log(
-      `set 'stateContext.a' to '100' will emit a change event for readonly property 'aPlusB'`,
+      `set 'model.a' to '100' will emit a change event for readonly property 'aPlusB'`,
     );
     console.log(`Changed value for readonly property 'aPlusB':`);
-    stateContext.a = 100;
+    model.a = 100;
 
     console.log(
-      `set 'stateContext.b' to '200' will emit a change event for readonly property 'aPlusB'`,
+      `set 'model.b' to '200' will emit a change event for readonly property 'aPlusB'`,
     );
     console.log(`Changed value for readonly property 'aPlusB':`);
-    stateContext.b = 200;
+    model.b = 200;
   } finally {
     changeSubscription.unsubscribe();
     // Always release the state when it is no longer needed.
-    stateContext.dispose();
+    model.dispose();
   }
 })();
 ```
@@ -492,8 +493,8 @@ When done, release the state:
 ```ts
 import { InjectionContainer, printValue } from '@rs-x/core';
 import {
-  IStateChange,
-  IStateManager,
+  type IStateChange,
+  type IStateManager,
   RsXStateManagerInjectionTokens,
   RsXStateManagerModule,
 } from '@rs-x/state-manager';
@@ -505,7 +506,7 @@ export const run = (() => {
   const stateManager: IStateManager = InjectionContainer.get(
     RsXStateManagerInjectionTokens.IStateManager,
   );
-  const stateContext = {
+  const model = {
     x: { y: 10 },
   };
   const changedSubscription = stateManager.changed.subscribe(
@@ -518,28 +519,28 @@ export const run = (() => {
     // Register is idempotent: you can register the same state multiple times.
     // For every register call, make sure you call unregister when you're done.
     console.log('Initial value:');
-    stateManager.watchState(stateContext, 'x');
-    stateManager.watchState(stateContext, 'x');
+    stateManager.watchState(model, 'x');
+    stateManager.watchState(model, 'x');
 
     console.log('Changed value:');
-    stateContext.x = { y: 20 };
+    model.x = { y: 20 };
 
-    stateManager.releaseState(stateContext, 'x');
+    stateManager.releaseState(model, 'x');
 
     console.log(
       'Changed event is still emitted after unregister because one observer remains.',
     );
     console.log('Changed value:');
-    stateContext.x = { y: 30 };
+    model.x = { y: 30 };
 
-    stateManager.releaseState(stateContext, 'x');
+    stateManager.releaseState(model, 'x');
 
     console.log(
       'Changed event is no longer emitted after the last observer unregisters.',
     );
     console.log('Changed value:');
     console.log('---');
-    stateContext.x = { y: 30 };
+    model.x = { y: 30 };
   } finally {
     changedSubscription.unsubscribe();
   }
@@ -596,12 +597,13 @@ The following example illustrates the different state types:
 **Example**
 
 ```ts
-import { InjectionContainer, printValue, truePredicate } from '@rs-x/core';
+import { InjectionContainer, printValue, Type } from '@rs-x/core';
 import {
-  IStateChange,
-  IStateManager,
+  type IStateChange,
+  type IStateManager,
   RsXStateManagerInjectionTokens,
   RsXStateManagerModule,
+  watchIndexRecursiveRule,
 } from '@rs-x/state-manager';
 
 // Load the state manager module into the injection container
@@ -612,7 +614,7 @@ interface INestStateConext {
   nested?: INestStateConext;
 }
 
-class StateContext {
+class MyModel {
   private _b: INestStateConext = {
     a: 10,
     nested: {
@@ -640,7 +642,7 @@ export const run = (() => {
     RsXStateManagerInjectionTokens.IStateManager,
   );
 
-  const stateContext = new StateContext();
+  const model = new MyModel();
 
   const changeSubscription = stateManager.changed.subscribe(
     (change: IStateChange) => {
@@ -650,17 +652,15 @@ export const run = (() => {
 
   try {
     // Observe property `b` recursively.
-    // Otherwise, only assigning a new value to stateContext.b would emit a change event.
+    // Otherwise, only assigning a new value to model.b would emit a change event.
     // This will emit a change event with the initial (current) value.
     console.log('Initial value:');
-    stateManager.watchState(stateContext, 'b', truePredicate);
+    stateManager.watchState(model, 'b', watchIndexRecursiveRule);
 
-    console.log(
-      '\nReplacing stateContext.b.nested.nested will emit a change event',
-    );
+    console.log('\nReplacing model.b.nested.nested will emit a change event');
     console.log('Changed value:');
 
-    stateContext.b.nested.nested = {
+    (Type.toObject(model.b.nested) ?? {}).nested = {
       a: -30,
       nested: {
         a: -40,
@@ -668,11 +668,11 @@ export const run = (() => {
     };
 
     console.log(`Latest value:`);
-    printValue(stateManager.getState(stateContext, 'b'));
+    printValue(stateManager.getState(model, 'b'));
   } finally {
     changeSubscription.unsubscribe();
     // Always release the state when it is no longer needed.
-    stateManager.releaseState(stateContext, 'b', truePredicate);
+    stateManager.releaseState(model, 'b', watchIndexRecursiveRule);
   }
 })();
 ```
@@ -729,13 +729,14 @@ Latest value:
 **Example**
 
 ```ts
-import { InjectionContainer, truePredicate, utCDate } from '@rs-x/core';
+import { InjectionContainer, utCDate } from '@rs-x/core';
 import {
-  IProxyRegistry,
-  IStateChange,
-  IStateManager,
+  type IProxyRegistry,
+  type IStateChange,
+  type IStateManager,
   RsXStateManagerInjectionTokens,
   RsXStateManagerModule,
+  watchIndexRecursiveRule,
 } from '@rs-x/state-manager';
 
 // Load the state manager module into the injection container
@@ -746,32 +747,32 @@ function watchDate(stateManager: IStateManager) {
   console.log('* Watching date');
   console.log('******************************************\n');
 
-  const stateContext = {
+  const model = {
     date: utCDate(2021, 2, 5),
   };
   const changeSubscription = stateManager.changed.subscribe(
     (change: IStateChange) => {
-      console.log(`${change.key}: ${(change.newValue as Date).toUTCString()}`);
+      console.log(
+        `${change.index}: ${(change.newValue as Date).toUTCString()}`,
+      );
     },
   );
   try {
     console.log('Initial value:');
-    stateManager.watchState(stateContext, 'date', truePredicate);
+    stateManager.watchState(model, 'date', watchIndexRecursiveRule);
 
     console.log('Changed value:');
-    stateContext.date.setFullYear(2023);
+    model.date.setFullYear(2023);
 
     console.log('Set value:');
-    stateContext.date = new Date(2024, 5, 6);
+    model.date = new Date(2024, 5, 6);
 
     console.log('Latest value:');
-    console.log(
-      stateManager.getState<Date>(stateContext, 'date').toUTCString(),
-    );
+    console.log(stateManager.getState<Date>(model, 'date').toUTCString());
   } finally {
     changeSubscription.unsubscribe();
     // Always release the state when it is no longer needed.
-    stateManager.releaseState(stateContext, 'date', truePredicate);
+    stateManager.releaseState(model, 'date', watchIndexRecursiveRule);
   }
 }
 
@@ -849,12 +850,13 @@ Latest value:
 **Example**
 
 ```ts
-import { InjectionContainer, printValue, truePredicate } from '@rs-x/core';
+import { InjectionContainer, printValue } from '@rs-x/core';
 import {
-  IStateChange,
-  IStateManager,
+  type IStateChange,
+  type IStateManager,
   RsXStateManagerInjectionTokens,
   RsXStateManagerModule,
+  watchIndexRecursiveRule,
 } from '@rs-x/state-manager';
 
 // Load the state manager module into the injection container
@@ -865,7 +867,7 @@ export const run = (() => {
     RsXStateManagerInjectionTokens.IStateManager,
   );
 
-  const stateContext = {
+  const model = {
     array: [
       [1, 2],
       [3, 4],
@@ -881,17 +883,17 @@ export const run = (() => {
   try {
     // This will emit a change event with the initial (current) value.
     console.log('Initial value:');
-    stateManager.watchState(stateContext, 'array', truePredicate);
+    stateManager.watchState(model, 'array', watchIndexRecursiveRule);
 
     console.log('Changed value:');
-    stateContext.array[1].push(5);
+    model.array[1].push(5);
 
     console.log('Latest value:');
-    printValue(stateManager.getState(stateContext, 'array'));
+    printValue(stateManager.getState(model, 'array'));
   } finally {
     changeSubscription.unsubscribe();
     // Always release the state when it is no longer needed.
-    stateManager.releaseState(stateContext, 'array', truePredicate);
+    stateManager.releaseState(model, 'array', watchIndexRecursiveRule);
   }
 })();
 ```
@@ -942,12 +944,13 @@ Latest value:
 **Example**
 
 ```ts
-import { InjectionContainer, printValue, truePredicate } from '@rs-x/core';
+import { InjectionContainer, printValue } from '@rs-x/core';
 import {
-  IStateChange,
-  IStateManager,
+  type IStateChange,
+  type IStateManager,
   RsXStateManagerInjectionTokens,
   RsXStateManagerModule,
+  watchIndexRecursiveRule,
 } from '@rs-x/state-manager';
 
 // Load the state manager module into the injection container
@@ -958,7 +961,7 @@ const stateManager: IStateManager = InjectionContainer.get(
 );
 
 export const run = (() => {
-  const stateContext = {
+  const model = {
     map: new Map([
       ['a', [1, 2]],
       ['b', [3, 4]],
@@ -974,17 +977,17 @@ export const run = (() => {
   try {
     // This will emit a change event with the initial (current) value.
     console.log('Initial value:');
-    stateManager.watchState(stateContext, 'map', truePredicate);
+    stateManager.watchState(model, 'map', watchIndexRecursiveRule);
 
     console.log('Changed value:');
-    stateContext.map.get('b').push(5);
+    model.map.get('b')?.push(5);
 
     console.log('Latest value:');
-    printValue(stateManager.getState(stateContext, 'map'));
+    printValue(stateManager.getState(model, 'map'));
   } finally {
     changeSubscription.unsubscribe();
     // Always release the state when it is no longer needed.
-    stateManager.releaseState(stateContext, 'array', truePredicate);
+    stateManager.releaseState(model, 'array', watchIndexRecursiveRule);
   }
 })();
 ```
@@ -1053,13 +1056,14 @@ Latest value:
 **Example**
 
 ```ts
-import { InjectionContainer, printValue, truePredicate } from '@rs-x/core';
+import { InjectionContainer, printValue } from '@rs-x/core';
 import {
-  IProxyRegistry,
-  IStateChange,
-  IStateManager,
+  type IProxyRegistry,
+  type IStateChange,
+  type IStateManager,
   RsXStateManagerInjectionTokens,
   RsXStateManagerModule,
+  watchIndexRecursiveRule,
 } from '@rs-x/state-manager';
 
 // Load the state manager module into the injection container
@@ -1071,7 +1075,7 @@ export const run = (() => {
   );
   const item1 = [1, 2];
   const item2 = [3, 4];
-  const stateContext = {
+  const model = {
     set: new Set([item1, item2]),
   };
   const changeSubscription = stateManager.changed.subscribe(
@@ -1083,7 +1087,7 @@ export const run = (() => {
   try {
     // This will emit a change event with the initial (current) value.
     console.log('Initial value:');
-    stateManager.watchState(stateContext, 'set', truePredicate);
+    stateManager.watchState(model, 'set', watchIndexRecursiveRule);
 
     console.log('Changed value:');
     const proxyRegister: IProxyRegistry = InjectionContainer.get(
@@ -1092,11 +1096,11 @@ export const run = (() => {
     proxyRegister.getProxy<number[]>(item2).push(5);
 
     console.log('Latest value:');
-    printValue(stateManager.getState(stateContext, 'set'));
+    printValue(stateManager.getState(model, 'set'));
   } finally {
     changeSubscription.unsubscribe();
     // Always release the state when it is no longer needed.
-    stateManager.releaseState(stateContext, 'set', truePredicate);
+    stateManager.releaseState(model, 'set', watchIndexRecursiveRule);
   }
 })();
 ```
@@ -1149,8 +1153,8 @@ Latest value:
 ```ts
 import { InjectionContainer, WaitForEvent } from '@rs-x/core';
 import {
-  IStateChange,
-  IStateManager,
+  type IStateChange,
+  type IStateManager,
   RsXStateManagerInjectionTokens,
   RsXStateManagerModule,
 } from '@rs-x/state-manager';
@@ -1163,7 +1167,7 @@ export const run = (async () => {
     RsXStateManagerInjectionTokens.IStateManager,
   );
 
-  const stateContext = {
+  const model = {
     promise: Promise.resolve(10),
   };
   const changeSubscription = stateManager.changed.subscribe(
@@ -1176,25 +1180,25 @@ export const run = (async () => {
     await new WaitForEvent(stateManager, 'changed').wait(() => {
       // This will emit a change event with the initial (current) value.
       console.log('Initial value:');
-      stateManager.watchState(stateContext, 'promise');
+      stateManager.watchState(model, 'promise');
     });
 
     await new WaitForEvent(stateManager, 'changed').wait(() => {
       console.log('Changed value:');
-      let resolveHandler: (value: number) => void;
-      stateContext.promise = new Promise((resolve) => {
+      let resolveHandler!: (value: number) => void;
+
+      model.promise = new Promise<number>((resolve) => {
         resolveHandler = resolve;
       });
+
       resolveHandler(30);
     });
 
-    console.log(
-      `Latest value: ${stateManager.getState(stateContext, 'promise')}`,
-    );
+    console.log(`Latest value: ${stateManager.getState(model, 'promise')}`);
   } finally {
     changeSubscription.unsubscribe();
     // Always release the state when it is no longer needed.
-    stateManager.releaseState(stateContext, 'promise');
+    stateManager.releaseState(model, 'promise');
   }
 })();
 ```
@@ -1215,14 +1219,15 @@ Latest value: 30
 **Example**
 
 ```ts
+import { of, Subject } from 'rxjs';
+
 import { InjectionContainer, WaitForEvent } from '@rs-x/core';
 import {
-  IStateChange,
-  IStateManager,
+  type IStateChange,
+  type IStateManager,
   RsXStateManagerInjectionTokens,
   RsXStateManagerModule,
 } from '@rs-x/state-manager';
-import { of, Subject } from 'rxjs';
 
 // Load the state manager module into the injection container
 InjectionContainer.load(RsXStateManagerModule);
@@ -1232,7 +1237,7 @@ export const run = (async () => {
     RsXStateManagerInjectionTokens.IStateManager,
   );
 
-  const stateContext = {
+  const model = {
     observable: of(10),
   };
 
@@ -1248,23 +1253,21 @@ export const run = (async () => {
     await new WaitForEvent(stateManager, 'changed').wait(() => {
       // This will emit a change event with the initial (current) value.
       console.log('Initial value:');
-      stateManager.watchState(stateContext, 'observable');
+      stateManager.watchState(model, 'observable');
     });
 
     await new WaitForEvent(stateManager, 'changed').wait(() => {
       console.log('Changed value:');
       const subject = new Subject<number>();
-      stateContext.observable = subject;
+      model.observable = subject;
       subject.next(30);
     });
 
-    console.log(
-      `Latest value: ${stateManager.getState(stateContext, 'observable')}`,
-    );
+    console.log(`Latest value: ${stateManager.getState(model, 'observable')}`);
   } finally {
     changeSubscription.unsubscribe();
     // Always release the state when it is no longer needed.
-    stateManager.releaseState(stateContext, 'observable');
+    stateManager.releaseState(model, 'observable');
   }
 })();
 ```
@@ -1291,500 +1294,586 @@ The following example demonstrates adding support for a custom `TextDocument` cl
 **Example**
 
 ````ts
+import { ReplaySubject, Subscription } from 'rxjs';
+
 import {
-    ContainerModule,
-    defaultIndexValueAccessorList,
-    IDisposableOwner,
-    IErrorLog,
-    IGuidFactory,
-    IIndexValueAccessor,
-    Inject,
-    Injectable,
-    InjectionContainer,
-    IPropertyChange,
-    overrideMultiInjectServices,
-    RsXCoreInjectionTokens,
-    SingletonFactory,
-    truePredicate
+  ContainerModule,
+  defaultIndexValueAccessorList,
+  type IDisposableOwner,
+  type IErrorLog,
+  type IGuidFactory,
+  type IIndexValueAccessor,
+  Inject,
+  Injectable,
+  InjectionContainer,
+  type IPropertyChange,
+  type IValueMetadata,
+  overrideMultiInjectServices,
+  RsXCoreInjectionTokens,
+  SingletonFactory,
+  Type,
 } from '@rs-x/core';
 import {
-    AbstractObserver,
-    defaultObjectObserverProxyPairFactoryList,
-    defaultPropertyObserverProxyPairFactoryList,
-    IIndexObserverInfo,
-    IndexObserverProxyPairFactory,
-    IObjectObserverProxyPairFactory,
-    IObjectObserverProxyPairManager,
-    IObserverProxyPair,
-    IPropertyInfo,
-    IProxyRegistry,
-    IProxyTarget,
-    IStateChange,
-    IStateManager,
-    RsXStateManagerInjectionTokens,
-    RsXStateManagerModule
+  AbstractObserver,
+  defaultObjectObserverProxyPairFactoryList,
+  defaultPropertyObserverProxyPairFactoryList,
+  type IIndexObserverInfo,
+  IndexObserverProxyPairFactory,
+  type IObjectObserverProxyPairFactory,
+  type IObjectObserverProxyPairManager,
+  type IObserverProxyPair,
+  type IPropertyInfo,
+  type IProxyRegistry,
+  type IProxyTarget,
+  type IStateChange,
+  type IStateManager,
+  RsXStateManagerInjectionTokens,
+  RsXStateManagerModule,
+  watchIndexRecursiveRule,
 } from '@rs-x/state-manager';
-import { ReplaySubject, Subscription } from 'rxjs';
 
 const MyInjectTokens = {
-    TextDocumentObserverManager: Symbol('TextDocumentObserverManager'),
-    TextDocumenIndexObserverManager: Symbol('TextDocumenIndexObserverManager'),
-    TextDocumentIndexAccessor: Symbol('TextDocumentIndexAccessor'),
-    TextDocumentObserverProxyPairFactory: Symbol('TextDocumentObserverProxyPairFactory'),
-    TextDocumentInxdexObserverProxyPairFactory: Symbol('TextDocumentInxdexObserverProxyPairFactory')
-
+  TextDocumentObserverManager: Symbol('TextDocumentObserverManager'),
+  TextDocumenIndexObserverManager: Symbol('TextDocumenIndexObserverManager'),
+  TextDocumentIndexAccessor: Symbol('TextDocumentIndexAccessor'),
+  TextDocumentObserverProxyPairFactory: Symbol(
+    'TextDocumentObserverProxyPairFactory',
+  ),
+  TextDocumentInxdexObserverProxyPairFactory: Symbol(
+    'TextDocumentInxdexObserverProxyPairFactory',
+  ),
 };
 
-class IndexForTextDocumentxObserverManager
-    extends SingletonFactory<
-        number,
-        IIndexObserverInfo<ITextDocumentIndex>,
-        TextDocumentIndexObserver> {
-    constructor(
-        private readonly _textDocument: TextDocument,
-        private readonly _textDocumentObserverManager: TextDocumentObserverManager,
-        private readonly releaseOwner: () => void
-    ) {
-        super();
-    }
+class IndexForTextDocumentxObserverManager extends SingletonFactory<
+  number,
+  IIndexObserverInfo<ITextDocumentIndex>,
+  TextDocumentIndexObserver
+> {
+  constructor(
+    private readonly _textDocument: TextDocument,
+    private readonly _textDocumentObserverManager: TextDocumentObserverManager,
+    private readonly releaseOwner: () => void,
+  ) {
+    super();
+  }
 
-    public override getId(indexObserverInfo: IIndexObserverInfo<ITextDocumentIndex>): number {
-        return this.createId(indexObserverInfo);
-    }
+  public override getId(
+    indexObserverInfo: IIndexObserverInfo<ITextDocumentIndex>,
+  ): number {
+    return this.createId(indexObserverInfo);
+  }
 
-    protected override createInstance(indexObserverInfo: IIndexObserverInfo<ITextDocumentIndex>, id: number): TextDocumentIndexObserver {
-        const textDocumentObserver = this._textDocumentObserverManager.create(this._textDocument).instance;
-        return new TextDocumentIndexObserver(
-            {
-                canDispose: () => this.getReferenceCount(id) === 1,
-                release: () => {
-                    textDocumentObserver.dispose();
-                    this.release(id);
-                },
-            },
-            textDocumentObserver, indexObserverInfo.index
-        );
-    }
+  protected override createInstance(
+    indexObserverInfo: IIndexObserverInfo<ITextDocumentIndex>,
+    id: number,
+  ): TextDocumentIndexObserver {
+    const textDocumentObserver = this._textDocumentObserverManager.create(
+      this._textDocument,
+    ).instance;
+    return new TextDocumentIndexObserver(
+      {
+        canDispose: () => this.getReferenceCount(id) === 1,
+        release: () => {
+          textDocumentObserver.dispose();
+          this.release(id);
+        },
+      },
+      textDocumentObserver,
+      indexObserverInfo.index,
+    );
+  }
 
-    protected override createId(indexObserverInfo: IIndexObserverInfo<ITextDocumentIndex>): number {
-        // Using Cantor pairing to create a unique id from page and line index
-        const { pageIndex, lineIndex } = indexObserverInfo.index;
-        return ((pageIndex + lineIndex) * (pageIndex + lineIndex + 1)) / 2 + lineIndex;
-    }
+  protected override createId(
+    indexObserverInfo: IIndexObserverInfo<ITextDocumentIndex>,
+  ): number {
+    // Using Cantor pairing to create a unique id from page and line index
+    const { pageIndex, lineIndex } = indexObserverInfo.index;
+    return (
+      ((pageIndex + lineIndex) * (pageIndex + lineIndex + 1)) / 2 + lineIndex
+    );
+  }
 
-    protected override onReleased(): void {
-        if (this.isEmpty) {
-            this.releaseOwner();
-        }
+  protected override onReleased(): void {
+    if (this.isEmpty) {
+      this.releaseOwner();
     }
+  }
 }
 
 // We want to ensure that for the same TextDocument we always have the same observer
 @Injectable()
-class TextDocumentObserverManager extends SingletonFactory<TextDocument, TextDocument, TextDocumentObserver> {
-    constructor(
-        @Inject(RsXStateManagerInjectionTokens.IProxyRegistry)
-        private readonly _proxyRegister: IProxyRegistry) {
-        super();
-    }
+class TextDocumentObserverManager extends SingletonFactory<
+  TextDocument,
+  TextDocument,
+  TextDocumentObserver
+> {
+  constructor(
+    @Inject(RsXStateManagerInjectionTokens.IProxyRegistry)
+    private readonly _proxyRegister: IProxyRegistry,
+  ) {
+    super();
+  }
 
-    public override getId(textDocument: TextDocument): TextDocument {
-        return textDocument;
-    }
+  public override getId(textDocument: TextDocument): TextDocument {
+    return textDocument;
+  }
 
-    protected override createInstance(textDocument: TextDocument, id: TextDocument): TextDocumentObserver {
-        return new TextDocumentObserver(
-            textDocument,
-            this._proxyRegister,
-            {
-                canDispose: () => this.getReferenceCount(id) === 1,
-                release: () => this.release(id)
-            }
-        );
-    }
+  protected override createInstance(
+    textDocument: TextDocument,
+    id: TextDocument,
+  ): TextDocumentObserver {
+    return new TextDocumentObserver(textDocument, this._proxyRegister, {
+      canDispose: () => this.getReferenceCount(id) === 1,
+      release: () => this.release(id),
+    });
+  }
 
-    protected override createId(textDocument: TextDocument): TextDocument {
-        return textDocument;
-    }
+  protected override createId(textDocument: TextDocument): TextDocument {
+    return textDocument;
+  }
 }
 
 // We want to ensure we create only one index-manager per TextDocument
 @Injectable()
-export class TextDocumenIndexObserverManager
-    extends SingletonFactory<
-        TextDocument,
-        TextDocument,
-        IndexForTextDocumentxObserverManager
-    > {
-    constructor(
-        @Inject(MyInjectTokens.TextDocumentObserverManager)
-        private readonly _textDocumentObserverManager: TextDocumentObserverManager,
-    ) {
-        super();
-    }
-
-    public override getId(textDocument: TextDocument): TextDocument {
-        return textDocument;
-    }
+export class TextDocumenIndexObserverManager extends SingletonFactory<
+  TextDocument,
+  TextDocument,
+  IndexForTextDocumentxObserverManager
+> {
+  constructor(
+    @Inject(MyInjectTokens.TextDocumentObserverManager)
+    private readonly _textDocumentObserverManager: TextDocumentObserverManager,
+  ) {
+    super();
+  }
 
-    protected override createId(textDocument: TextDocument): TextDocument {
-        return textDocument;
-    }
+  public override getId(textDocument: TextDocument): TextDocument {
+    return textDocument;
+  }
 
-    protected override createInstance(
-        textDocument: TextDocument
-    ): IndexForTextDocumentxObserverManager {
+  protected override createId(textDocument: TextDocument): TextDocument {
+    return textDocument;
+  }
 
-        return new IndexForTextDocumentxObserverManager(textDocument, this._textDocumentObserverManager, () => this.release(textDocument));
-    }
+  protected override createInstance(
+    textDocument: TextDocument,
+  ): IndexForTextDocumentxObserverManager {
+    return new IndexForTextDocumentxObserverManager(
+      textDocument,
+      this._textDocumentObserverManager,
+      () => this.release(textDocument),
+    );
+  }
 
-    protected override releaseInstance(
-        indexForTextDocumentxObserverManager: IndexForTextDocumentxObserverManager
-    ): void {
-        indexForTextDocumentxObserverManager.dispose();
-    }
+  protected override releaseInstance(
+    indexForTextDocumentxObserverManager: IndexForTextDocumentxObserverManager,
+  ): void {
+    indexForTextDocumentxObserverManager.dispose();
+  }
 }
 
-
-
-
 @Injectable()
-export class TextDocumentIndexAccessor implements IIndexValueAccessor<TextDocument, ITextDocumentIndex> {
-    public readonly priority: 200;
-
-    public hasValue(context: TextDocument, index: ITextDocumentIndex): boolean {
-        return context.getLine(index) !== undefined;
-    }
-
-    // We don’t have any properties that can be iterated through.
-    public getIndexes(_context: TextDocument, _index?: ITextDocumentIndex): IterableIterator<ITextDocumentIndex> {
-        return [].values();
-    }
+export class TextDocumentIndexAccessor implements IIndexValueAccessor<
+  TextDocument,
+  ITextDocumentIndex
+> {
+  public readonly priority!: 200;
+
+  public hasValue(
+    textDocument: TextDocument,
+    index: ITextDocumentIndex,
+  ): boolean {
+    return textDocument.getLine(index) !== undefined;
+  }
 
-    // Indicate whether the value is async. For example when the value is a Promise
-    public isAsync(_context: TextDocument, _index: ITextDocumentIndex): boolean {
-        return false;
-    }
+  // We don’t have any properties that can be iterated through.
+  public getIndexes(): IterableIterator<ITextDocumentIndex> {
+    return [].values();
+  }
 
-    // Here it is the same as getValue.
-    // For example, for a Promise accessor getValue returns the promise
-    // and getResolvedValue returns the resolved promise value
-    public getResolvedValue(context: TextDocument, index: ITextDocumentIndex): string {
-        return this.getValue(context, index);
-    }
+  // Here it is the same as getValue.
+  // For example, for a Promise accessor getValue returns the promise
+  // and getResolvedValue returns the resolved promise value
+  public getResolvedValue(
+    textDocument: TextDocument,
+    index: ITextDocumentIndex,
+  ): string | undefined {
+    return this.getValue(textDocument, index);
+  }
 
-    public getValue(context: TextDocument, index: ITextDocumentIndex): string {
-        return context.getLine(index);
-    }
+  public getValue(
+    textDocument: TextDocument,
+    index: ITextDocumentIndex,
+  ): string | undefined {
+    return textDocument.getLine(index);
+  }
 
-    public setValue(context: TextDocument, index: ITextDocumentIndex, value: string): void {
-        context.setLine(index, value);
-    }
+  public setValue(
+    textDocument: TextDocument,
+    index: ITextDocumentIndex,
+    value: string,
+  ): void {
+    textDocument.setLine(index, value);
+  }
 
-    public applies(context: unknown, _index: ITextDocumentIndex): boolean {
-        return context instanceof TextDocument;
-    }
+  public applies(textDocument: unknown, _index: ITextDocumentIndex): boolean {
+    return textDocument instanceof TextDocument;
+  }
 }
 
 @Injectable()
-export class TextDocumentInxdexObserverProxyPairFactory extends IndexObserverProxyPairFactory<TextDocument, unknown> {
-    constructor(
-        @Inject(RsXStateManagerInjectionTokens.IObjectObserverProxyPairManager)
-        objectObserverManager: IObjectObserverProxyPairManager,
-        @Inject( MyInjectTokens.TextDocumenIndexObserverManager)
-        textDocumenIndexObserverManager: TextDocumenIndexObserverManager,
-        @Inject(RsXCoreInjectionTokens.IErrorLog)
-        errorLog: IErrorLog,
-        @Inject(RsXCoreInjectionTokens.IGuidFactory)
-        guidFactory: IGuidFactory,
-        @Inject(RsXCoreInjectionTokens.IIndexValueAccessor)
-        indexValueAccessor: IIndexValueAccessor,
-        @Inject(RsXStateManagerInjectionTokens.IProxyRegistry)
-        proxyRegister: IProxyRegistry
-    ) {
-        super(
-            objectObserverManager,
-            textDocumenIndexObserverManager,
-            errorLog,
-            guidFactory,
-            indexValueAccessor,
-            proxyRegister
-        );
-    }
+export class TextDocumentInxdexObserverProxyPairFactory extends IndexObserverProxyPairFactory<
+  TextDocument,
+  unknown
+> {
+  constructor(
+    @Inject(RsXStateManagerInjectionTokens.IObjectObserverProxyPairManager)
+    objectObserverManager: IObjectObserverProxyPairManager,
+    @Inject(MyInjectTokens.TextDocumenIndexObserverManager)
+    textDocumenIndexObserverManager: TextDocumenIndexObserverManager,
+    @Inject(RsXCoreInjectionTokens.IErrorLog)
+    errorLog: IErrorLog,
+    @Inject(RsXCoreInjectionTokens.IGuidFactory)
+    guidFactory: IGuidFactory,
+    @Inject(RsXCoreInjectionTokens.IIndexValueAccessor)
+    indexValueAccessor: IIndexValueAccessor,
+    @Inject(RsXStateManagerInjectionTokens.IProxyRegistry)
+    proxyRegister: IProxyRegistry,
+    @Inject(RsXCoreInjectionTokens.IValueMetadata)
+    valueMetadata: IValueMetadata,
+  ) {
+    super(
+      objectObserverManager,
+      Type.cast(textDocumenIndexObserverManager),
+      errorLog,
+      guidFactory,
+      indexValueAccessor,
+      proxyRegister,
+      valueMetadata,
+    );
+  }
 
-    public applies(object: unknown, propertyInfo: IPropertyInfo): boolean {
-        const documentKey = propertyInfo.key as ITextDocumentIndex;
-        return object instanceof TextDocument && documentKey?.lineIndex >= 0 && documentKey?.pageIndex >= 0;
-    }
+  public applies(object: unknown, propertyInfo: IPropertyInfo): boolean {
+    const documentKey = propertyInfo.index as ITextDocumentIndex;
+    return (
+      object instanceof TextDocument &&
+      documentKey?.lineIndex >= 0 &&
+      documentKey?.pageIndex >= 0
+    );
+  }
 }
 
 @Injectable()
 export class TextDocumentObserverProxyPairFactory implements IObjectObserverProxyPairFactory {
-    public readonly priority = 100;
-
-    constructor(
-        @Inject( MyInjectTokens.TextDocumentObserverManager)
-        private readonly _textDocumentObserverManager: TextDocumentObserverManager) { }
-
-    public create(
-        _: IDisposableOwner,
-        proxyTarget: IProxyTarget<TextDocument>): IObserverProxyPair<TextDocument> {
-
-        const observer = this._textDocumentObserverManager.create(proxyTarget.target).instance;
-        return {
-            observer,
-            proxy: observer.target as TextDocument,
-            proxyTarget: proxyTarget.target,
-        };
-    }
+  public readonly priority = 100;
 
-    public applies(object: unknown): boolean {
-        return object instanceof TextDocument;
-    }
+  constructor(
+    @Inject(MyInjectTokens.TextDocumentObserverManager)
+    private readonly _textDocumentObserverManager: TextDocumentObserverManager,
+  ) {}
+
+  public create(
+    _: IDisposableOwner,
+    proxyTarget: IProxyTarget<TextDocument>,
+  ): IObserverProxyPair<TextDocument> {
+    const observer = this._textDocumentObserverManager.create(
+      proxyTarget.target,
+    ).instance;
+    return {
+      observer,
+      proxy: observer.target as TextDocument,
+      proxyTarget: proxyTarget.target,
+    };
+  }
+
+  public applies(object: unknown): boolean {
+    return object instanceof TextDocument;
+  }
 }
 
 interface ITextDocumentIndex {
-    pageIndex: number;
-    lineIndex: number;
+  pageIndex: number;
+  lineIndex: number;
 }
 
 class TextDocument {
-    private readonly _pages = new Map<number, Map<number, string>>();
-    constructor(
-        pages?: string[][],
-    ) {
-
-        pages?.forEach((page, pageIndex) => {
-            const pageText = new Map<number, string>();
-
-            this._pages.set(pageIndex, pageText);
-            page.forEach((lineText, lineIndex) => {
-                pageText.set(lineIndex, lineText);
-            });
-        });
-    }
-
-    public toString(): string {
-        const pages: string[] = [];
+  private readonly _pages = new Map<number, Map<number, string>>();
+  constructor(pages?: string[][]) {
+    pages?.forEach((page, pageIndex) => {
+      const pageText = new Map<number, string>();
+
+      this._pages.set(pageIndex, pageText);
+      page.forEach((lineText, lineIndex) => {
+        pageText.set(lineIndex, lineText);
+      });
+    });
+  }
 
-        // Sort pages by pageIndex
-        const sortedPageIndexes = Array.from(this._pages.keys()).sort((a, b) => a - b);
+  public toString(): string {
+    const pages: string[] = [];
 
-        for (const pageIndex of sortedPageIndexes) {
-            const page = this._pages.get(pageIndex);
-            if (!page) {
-                continue;
-            }
+    // Sort pages by pageIndex
+    const sortedPageIndexes = Array.from(this._pages.keys()).sort(
+      (a, b) => a - b,
+    );
 
-            // Sort lines by lineIndex
-            const sortedLineIndexes = Array.from(page.keys()).sort((a, b) => a - b);
+    for (const pageIndex of sortedPageIndexes) {
+      const page = this._pages.get(pageIndex);
+      if (!page) {
+        continue;
+      }
 
-            const lines = sortedLineIndexes.map(lineIndex => `  ${lineIndex}: ${page.get(lineIndex)}`);
-            pages.push(`Page ${pageIndex}:\n${lines.join('\n')}`);
-        }
+      // Sort lines by lineIndex
+      const sortedLineIndexes = Array.from(page.keys()).sort((a, b) => a - b);
 
-        return pages.join('\n\n');
+      const lines = sortedLineIndexes.map(
+        (lineIndex) => `  ${lineIndex}: ${page.get(lineIndex)}`,
+      );
+      pages.push(`Page ${pageIndex}:\n${lines.join('\n')}`);
     }
 
-    public setLine(index: ITextDocumentIndex, text: string): void {
-        const { pageIndex, lineIndex } = index;
-        let page = this._pages.get(pageIndex);
-        if (!page) {
-            page = new Map();
-            this._pages.set(pageIndex, page);
-        }
+    return pages.join('\n\n');
+  }
 
-        page.set(lineIndex, text);
+  public setLine(index: ITextDocumentIndex, text: string): void {
+    const { pageIndex, lineIndex } = index;
+    let page = this._pages.get(pageIndex);
+    if (!page) {
+      page = new Map();
+      this._pages.set(pageIndex, page);
     }
 
-    public getLine(index: ITextDocumentIndex): string {
-        const { pageIndex, lineIndex } = index;
-        return this._pages.get(pageIndex)?.get(lineIndex);
-    }
+    page.set(lineIndex, text);
+  }
+
+  public getLine(index: ITextDocumentIndex): string | undefined {
+    const { pageIndex, lineIndex } = index;
+    return this._pages.get(pageIndex)?.get(lineIndex);
+  }
 }
 
-class TextDocumentIndexObserver extends AbstractObserver<TextDocument, string, ITextDocumentIndex> {
-    private readonly _changeSubscription: Subscription;
+class TextDocumentIndexObserver extends AbstractObserver<
+  TextDocument,
+  string,
+  ITextDocumentIndex
+> {
+  private readonly _changeSubscription: Subscription;
 
-    constructor(
-        owner: IDisposableOwner,
-        private readonly _observer: TextDocumentObserver,
-        index: ITextDocumentIndex,
-    ) {
-        super(owner, _observer.target, _observer.target.getLine(index), new ReplaySubject(), index);
-        this._changeSubscription = _observer.changed.subscribe(this.onChange);
-    }
+  constructor(
+    owner: IDisposableOwner,
+    private readonly _observer: TextDocumentObserver,
+    index: ITextDocumentIndex,
+  ) {
+    super(
+      owner,
+      _observer.target,
+      _observer.target.getLine(index),
+      new ReplaySubject(),
+      index,
+    );
+    this._changeSubscription = _observer.changed.subscribe(this.onChange);
+  }
 
-    protected override disposeInternal(): void {
-        this._changeSubscription.unsubscribe();
-        this._observer.dispose();
-    }
+  protected override disposeInternal(): void {
+    this._changeSubscription.unsubscribe();
+    this._observer.dispose();
+  }
 
-    private readonly onChange = (change: IPropertyChange) => {
-        const changeIndex = change.id as ITextDocumentIndex;
-        if (changeIndex.lineIndex === this.id.lineIndex && changeIndex.pageIndex === this.id.pageIndex) {
-            this.emitChange(change);
-        }
+  private readonly onChange = (change: IPropertyChange) => {
+    const changeIndex = change.index as ITextDocumentIndex;
+    if (
+      changeIndex.lineIndex === this.id?.lineIndex &&
+      changeIndex.pageIndex === this.id?.pageIndex
+    ) {
+      this.emitChange(change);
     }
+  };
 }
 
 class TextDocumentObserver extends AbstractObserver<TextDocument> {
-    constructor(
-        textDocument: TextDocument,
-        private readonly _proxyRegister: IProxyRegistry,
-        owner?: IDisposableOwner,) {
-        super(owner, null, textDocument);
+  constructor(
+    textDocument: TextDocument,
+    private readonly _proxyRegister: IProxyRegistry,
+    owner?: IDisposableOwner,
+  ) {
+    super(owner, Type.cast(undefined), textDocument);
 
-        this.target = new Proxy(textDocument, this);
+    this.target = new Proxy(textDocument, this);
 
-        // Always register a proxy at the proxy registry
-        // so we can determine if an instance is a proxy or not.
-        this._proxyRegister.register(textDocument, this.target);
-    }
+    // Always register a proxy at the proxy registry
+    // so we can determine if an instance is a proxy or not.
+    this._proxyRegister.register(textDocument, this.target);
+  }
 
-    protected override disposeInternal(): void {
-        this._proxyRegister.unregister(this.value);
-    }
+  protected override disposeInternal(): void {
+    this._proxyRegister.unregister(this.value);
+  }
 
-    public get(
-        textDocument: TextDocument,
-        property: PropertyKey,
-        receiver: unknown
-    ): unknown {
-        if (property == 'setLine') {
-            return (index: ITextDocumentIndex, text: string) => {
-                textDocument.setLine(index, text);
-                this.emitChange({
-                    arguments: [],
-                    id: index,
-                    target: textDocument,
-                    newValue: text,
-                });
-            };
-
-        } else {
-            return Reflect.get(textDocument, property, receiver);
-        }
+  public get(
+    textDocument: TextDocument,
+    property: PropertyKey,
+    receiver: unknown,
+  ): unknown {
+    if (property == 'setLine') {
+      return (index: ITextDocumentIndex, text: string) => {
+        textDocument.setLine(index, text);
+        this.emitChange({
+          arguments: [],
+          index: index,
+          target: textDocument,
+          newValue: text,
+        });
+      };
+    } else {
+      return Reflect.get(textDocument, property, receiver);
     }
+  }
 }
 
 // Load the state manager module into the injection container
 InjectionContainer.load(RsXStateManagerModule);
 
 const MyModule = new ContainerModule((options) => {
-    options
-        .bind<TextDocumentObserverManager>(
-            MyInjectTokens.TextDocumentObserverManager
-        )
-        .to(TextDocumentObserverManager)
-        .inSingletonScope();
-
-    options
-        .bind<TextDocumenIndexObserverManager>(
-            MyInjectTokens.TextDocumenIndexObserverManager
-        )
-        .to(TextDocumenIndexObserverManager)
-        .inSingletonScope();
-
-
-    overrideMultiInjectServices(options, RsXCoreInjectionTokens.IIndexValueAccessorList, [
-        { target: TextDocumentIndexAccessor, token: MyInjectTokens.TextDocumentIndexAccessor },
-        ...defaultIndexValueAccessorList
-    ]);
-
-    overrideMultiInjectServices(options, RsXStateManagerInjectionTokens.IObjectObserverProxyPairFactoryList, [
-        { target: TextDocumentObserverProxyPairFactory, token: MyInjectTokens.TextDocumentObserverProxyPairFactory },
-        ...defaultObjectObserverProxyPairFactoryList
-    ]);
-
-    overrideMultiInjectServices(options,RsXStateManagerInjectionTokens.IPropertyObserverProxyPairFactoryList, [
-        { target: TextDocumentInxdexObserverProxyPairFactory, token: MyInjectTokens.TextDocumentInxdexObserverProxyPairFactory },
-        ...defaultPropertyObserverProxyPairFactoryList
-    ]);
+  options
+    .bind<TextDocumentObserverManager>(
+      MyInjectTokens.TextDocumentObserverManager,
+    )
+    .to(TextDocumentObserverManager)
+    .inSingletonScope();
+
+  options
+    .bind<TextDocumenIndexObserverManager>(
+      MyInjectTokens.TextDocumenIndexObserverManager,
+    )
+    .to(TextDocumenIndexObserverManager)
+    .inSingletonScope();
+
+  overrideMultiInjectServices(
+    options,
+    RsXCoreInjectionTokens.IIndexValueAccessorList,
+    [
+      {
+        target: TextDocumentIndexAccessor,
+        token: MyInjectTokens.TextDocumentIndexAccessor,
+      },
+      ...defaultIndexValueAccessorList,
+    ],
+  );
+
+  overrideMultiInjectServices(
+    options,
+    RsXStateManagerInjectionTokens.IObjectObserverProxyPairFactoryList,
+    [
+      {
+        target: TextDocumentObserverProxyPairFactory,
+        token: MyInjectTokens.TextDocumentObserverProxyPairFactory,
+      },
+      ...defaultObjectObserverProxyPairFactoryList,
+    ],
+  );
+
+  overrideMultiInjectServices(
+    options,
+    RsXStateManagerInjectionTokens.IPropertyObserverProxyPairFactoryList,
+    [
+      {
+        target: TextDocumentInxdexObserverProxyPairFactory,
+        token: MyInjectTokens.TextDocumentInxdexObserverProxyPairFactory,
+      },
+      ...defaultPropertyObserverProxyPairFactoryList,
+    ],
+  );
 });
 
 InjectionContainer.load(MyModule);
 
-function testMonitorTextDocument(stateManager: IStateManager, stateContext: { myBook: TextDocument }): void {
-    const bookSubscription = stateManager.changed.subscribe(() => {
-        console.log(stateContext.myBook.toString());
-    });
+function testMonitorTextDocument(
+  stateManager: IStateManager,
+  model: { myBook: TextDocument },
+): void {
+  const bookSubscription = stateManager.changed.subscribe(() => {
+    console.log(model.myBook.toString());
+  });
 
-    // We observe the whole book
-    // This will use TextDocumentObserverProxyPairFactory
-    try {
-        console.log('\n***********************************************');
-        console.log("Start watching the whole book\n");
-        console.log('My initial book:\n');
-        stateManager.watchState(stateContext, 'myBook', truePredicate);
-
-        console.log('\nUpdate second line on the first page:\n');
-        console.log('My book after change:\n');
-        stateContext.myBook.setLine({ pageIndex: 0, lineIndex: 1 }, 'In a far far away land');
-
-    } finally {
-        // Stop monitoring the whole book
-        stateManager.releaseState(stateContext, 'myBook', truePredicate);
-        bookSubscription.unsubscribe();
-    }
+  // We observe the whole book
+  // This will use TextDocumentObserverProxyPairFactory
+  try {
+    console.log('\n***********************************************');
+    console.log('Start watching the whole book\n');
+    console.log('My initial book:\n');
+    stateManager.watchState(model, 'myBook', watchIndexRecursiveRule);
+
+    console.log('\nUpdate second line on the first page:\n');
+    console.log('My book after change:\n');
+    model.myBook.setLine(
+      { pageIndex: 0, lineIndex: 1 },
+      'In a far far away land',
+    );
+  } finally {
+    // Stop monitoring the whole book
+    stateManager.releaseState(model, 'myBook', watchIndexRecursiveRule);
+    bookSubscription.unsubscribe();
+  }
 }
 
-function testMonitoreSpecificLineInDocument(stateManager: IStateManager, stateContext: { myBook: TextDocument }): void {
-    const line3OnPage1Index = { pageIndex: 0, lineIndex: 2 };
-    const lineSubscription = stateManager.changed.subscribe((change: IStateChange) => {
-        const documentIndex = change.key as ITextDocumentIndex;
-        console.log(`Line ${documentIndex.lineIndex + 1} on page ${documentIndex.pageIndex + 1} has changed to '${change.newValue}'`);
-        console.log('My book after change:\n');
-        console.log(stateContext.myBook.toString());
-    });
-
-    try {
-        // Here we only watch line 3 on page 1.
-        // Notice that the line does not have to exist yet.
-        // The initial book does not have a line 3 on page 1.
-        //
-        // TextDocumentInxdexObserverProxyPairFactory is used here
+function testMonitoreSpecificLineInDocument(
+  stateManager: IStateManager,
+  model: { myBook: TextDocument },
+): void {
+  const line3OnPage1Index = { pageIndex: 0, lineIndex: 2 };
+  const lineSubscription = stateManager.changed.subscribe(
+    (change: IStateChange) => {
+      const documentIndex = change.index as ITextDocumentIndex;
+      console.log(
+        `Line ${documentIndex.lineIndex + 1} on page ${documentIndex.pageIndex + 1} has changed to '${change.newValue}'`,
+      );
+      console.log('My book after change:\n');
+      console.log(model.myBook.toString());
+    },
+  );
 
-        console.log('\n***********************************************');
-        console.log("Start watching line 3 on page 1\n");
-        stateManager.watchState(stateContext.myBook, line3OnPage1Index);
+  try {
+    // Here we only watch line 3 on page 1.
+    // Notice that the line does not have to exist yet.
+    // The initial book does not have a line 3 on page 1.
+    //
+    // TextDocumentInxdexObserverProxyPairFactory is used here
 
-        const proxRegistry: IProxyRegistry = InjectionContainer.get(RsXStateManagerInjectionTokens.IProxyRegistry);
-        const bookProxy: TextDocument = proxRegistry.getProxy(stateContext.myBook);
+    console.log('\n***********************************************');
+    console.log('Start watching line 3 on page 1\n');
+    stateManager.watchState(model.myBook, line3OnPage1Index);
 
-        bookProxy.setLine(line3OnPage1Index, 'a prince was born');
+    const proxRegistry: IProxyRegistry = InjectionContainer.get(
+      RsXStateManagerInjectionTokens.IProxyRegistry,
+    );
+    const bookProxy: TextDocument = proxRegistry.getProxy(model.myBook);
 
-        console.log('\nChanging line 1 on page 1 does not emit change:');
-        console.log('---');
-        bookProxy.setLine({ pageIndex: 0, lineIndex: 0 }, 'a troll was born');
+    bookProxy.setLine(line3OnPage1Index, 'a prince was born');
 
-    } finally {
-        // Stop monitoring line 3 on page 1.
-        stateManager.releaseState(stateContext.myBook, line3OnPage1Index);
-        lineSubscription.unsubscribe();
-    }
+    console.log('\nChanging line 1 on page 1 does not emit change:');
+    console.log('---');
+    bookProxy.setLine({ pageIndex: 0, lineIndex: 0 }, 'a troll was born');
+  } finally {
+    // Stop monitoring line 3 on page 1.
+    stateManager.releaseState(model.myBook, line3OnPage1Index);
+    lineSubscription.unsubscribe();
+  }
 }
 
 export const run = (() => {
-    const stateManager: IStateManager = InjectionContainer.get(
-        RsXStateManagerInjectionTokens.IStateManager
-    );
-    const stateContext = {
-        myBook: new TextDocument([
-            [
-                'Once upon a time',
-                'bla bla'
-            ],
-            [
-                'bla bla',
-                'They lived happily ever after.',
-                'The end'
-            ]
-        ])
-    };
-    testMonitorTextDocument(stateManager, stateContext);
-    testMonitoreSpecificLineInDocument(stateManager, stateContext);
+  const stateManager: IStateManager = InjectionContainer.get(
+    RsXStateManagerInjectionTokens.IStateManager,
+  );
+  const model = {
+    myBook: new TextDocument([
+      ['Once upon a time', 'bla bla'],
+      ['bla bla', 'They lived happily ever after.', 'The end'],
+    ]),
+  };
+  testMonitorTextDocument(stateManager, model);
+  testMonitoreSpecificLineInDocument(stateManager, model);
 })();
+
 ```nclude_relative ../demo/src/rs-x-state-manager/register-set.ts %}
 ````