@rs-x/state-manager 0.4.11 → 0.4.13

package/readme.md

@@ -7,9 +7,9 @@ A context can be an object, and an index can be a property name — but it is no
 
 Examples of state indexes:
 
-- Object property or field → index = property or field name  
-- Array item → index = numeric position  
-- Map item → index = map key  
+- Object property or field → index = property or field name
+- Array item → index = numeric position
+- Map item → index = map key
 
 The State Manager does **not** automatically know how to detect changes for every state value data type, nor how to patch the corresponding state setter. Therefore, it relies on two services:
 
@@ -19,45 +19,38 @@ The State Manager does **not** automatically know how to detect changes for ever
 - A service implementing `IIndexValueAccessor`  
   Responsible for retrieving the current value.
 
-
 The **State Manager** has the followng interface:
+
 ```ts
 export interface IStateManager {
-    readonly changed: Observable<IStateChange>;
-    readonly contextChanged: Observable<IContextChanged>;
-    readonly startChangeCycle: Observable<void>;
-    readonly endChangeCycle: Observable<void>;
-
-    isWatched(
-        context: unknown,
-        index: unknown,
-        mustProxify: MustProxify
-    ): boolean;
-
-    watchState(
-        context: unknown, 
-        index: unknown, 
-        mustProxify?: MustProxify
-    ): unknown;
-
-    releaseState(
-        oontext: unknown, 
-        index: unknown, 
-        mustProxify?: MustProxify
-    ): void;
-
-    getState<T>(
-        context: unknown, 
-        index: unknown
-    ): T;
-
-    setState<T>(
-        context: unknown, 
-        index: unknown, 
-        value: T
-    ): void;
-
-    clear(): void;
+  readonly changed: Observable<IStateChange>;
+  readonly contextChanged: Observable<IContextChanged>;
+  readonly startChangeCycle: Observable<void>;
+  readonly endChangeCycle: Observable<void>;
+
+  isWatched(
+    context: unknown,
+    index: unknown,
+    mustProxify: MustProxify,
+  ): boolean;
+
+  watchState(
+    context: unknown,
+    index: unknown,
+    mustProxify?: MustProxify,
+  ): unknown;
+
+  releaseState(
+    oontext: unknown,
+    index: unknown,
+    mustProxify?: MustProxify,
+  ): void;
+
+  getState<T>(context: unknown, index: unknown): T;
+
+  setState<T>(context: unknown, index: unknown, value: T): void;
+
+  clear(): void;
 }
 ```
 
@@ -66,12 +59,14 @@ export interface IStateManager {
 ## Members
 
 ### **changed**
+
 **Type:** `Observable<IStateChange>`  
 Emits whenever a state item value changes.
 
 ---
 
 ### **contextChanged**
+
 **Type:** `Observable<IContextChanged>`  
 Emits whenever an entire context is replaced.  
 This happens, for example, when a nested object is replaced.
@@ -79,38 +74,42 @@ This happens, for example, when a nested object is replaced.
 ---
 
 ### **startChangeCycle**
+
 **Type:** `Observable<void>`  
 Emits at the start of processing a state item change.
 
 ---
 
 ### **endChangeCycle**
+
 **Type:** `Observable<void>`  
 Emits at the end of processing a state item change.
 
 ---
 
 ### **isWatched(context, index, mustProxify)**
+
 Returns whether the state item identified by the `(context, index, mustProxify)` triplet is currently being watched.
 
-| Parameter       | Type                       | Description                                                     |
-| --------------- | -------------------------- | --------------------------------------------------------------- |
-| **context**     | `unknown`                  | The context to which the state index belongs.                   |
-| **index**       | `unknown`                  | The index identifying the state on the given context.           |
-| **mustProxify** | `MustProxify` *(optional)* | Predicate determining whether a nested state value must be proxified. It should be the same predicate that was passed to `watchState`.               |
+| Parameter       | Type                       | Description                                                                                                                            |
+| --------------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| **context**     | `unknown`                  | The context to which the state index belongs.                                                                                          |
+| **index**       | `unknown`                  | The index identifying the state on the given context.                                                                                  |
+| **mustProxify** | `MustProxify` _(optional)_ | Predicate determining whether a nested state value must be proxified. It should be the same predicate that was passed to `watchState`. |
 
 **Returns:** `boolean`
 
 ---
 
 ### **watchState(context, index, mustProxify?)**
+
 Watches a state item identified by the `(context, index, mustProxify)` triplet so that its value is proxified and tracked.
 
-| Parameter       | Type                       | Description                                                     |
-| --------------- | -------------------------- | --------------------------------------------------------------- |
-| **context**     | `unknown`                  | The state context.                                              |
-| **index**       | `unknown`                  | The index identifying the state on the given context.           |
-| **mustProxify** | `MustProxify` *(optional)* | Predicate determining whether a nested state value must be proxified.|
+| Parameter       | Type                       | Description                                                           |
+| --------------- | -------------------------- | --------------------------------------------------------------------- |
+| **context**     | `unknown`                  | The state context.                                                    |
+| **index**       | `unknown`                  | The index identifying the state on the given context.                 |
+| **mustProxify** | `MustProxify` _(optional)_ | Predicate determining whether a nested state value must be proxified. |
 
 **Returns:**  
 `unknown` — the state item value if it was already being watched; otherwise `undefined`.
@@ -118,46 +117,50 @@ Watches a state item identified by the `(context, index, mustProxify)` triplet s
 ---
 
 ### **releaseState(context, index, mustProxify?)**
+
 Releases the state item identified by the `(context, index, mustProxify)` triplet.  
 Each call to `watchState` should have a corresponding `releaseState` call to ensure the state item is released when it is no longer needed.
 
-| Parameter       | Type                       | Description                                                     |
-| --------------- | -------------------------- | --------------------------------------------------------------- |
-| **context**     | `unknown`                  | The state context.                                              |
-| **index**       | `unknown`                  | The index identifying the state on the given context.           |
-| **mustProxify** | `MustProxify` *(optional)* | Predicate determining whether a nested state value must be proxified. It should be the same predicate that was passed to `watchState`. .              |
+| Parameter       | Type                       | Description                                                                                                                              |
+| --------------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| **context**     | `unknown`                  | The state context.                                                                                                                       |
+| **index**       | `unknown`                  | The index identifying the state on the given context.                                                                                    |
+| **mustProxify** | `MustProxify` _(optional)_ | Predicate determining whether a nested state value must be proxified. It should be the same predicate that was passed to `watchState`. . |
 
 **Returns:** `void`
 
 ---
 
 ### **getState(context, index)**
+
 Retrieves the current state item value identified by the `(context, index)` pair.
 
-| Parameter   | Type      | Description                                                     |
-| ----------- | --------- | --------------------------------------------------------------- |
-| **context** | `unknown` | The state context.                                              |
-| **index**   | `unknown` | The index identifying the state on the given context.           |
+| Parameter   | Type      | Description                                           |
+| ----------- | --------- | ----------------------------------------------------- |
+| **context** | `unknown` | The state context.                                    |
+| **index**   | `unknown` | The index identifying the state on the given context. |
 
 **Returns:** `unknown`
 
 ---
 
 ### **setState(context, index, value)**
+
 Sets the value of the state item identified by the `(context, index)` pair.
 
 Unlike `watchState`, `setState` does **not** track changes. It does not patch setters or proxify values.  
 A change event is emitted on the first `setState` call and again whenever the value changes in subsequent calls.
 
-| Parameter   | Type      | Description                                                     |
-| ----------- | --------- | --------------------------------------------------------------- |
-| **context** | `unknown` | The state context.                                              |
-| **index**   | `unknown` | The index identifying the state on the given context.           |
-| **value**   | `unknown` | The state value.                                                |
+| Parameter   | Type      | Description                                           |
+| ----------- | --------- | ----------------------------------------------------- |
+| **context** | `unknown` | The state context.                                    |
+| **index**   | `unknown` | The index identifying the state on the given context. |
+| **value**   | `unknown` | The state value.                                      |
 
 ---
 
 ### **clear()**
+
 Releases all registered state items.
 
 **Returns:** `void`
@@ -183,10 +186,13 @@ There are two ways to get an instance:
 
 ```ts
 import { InjectionContainer } from '@rs-x/core';
-import { IIStateManager, RsXStateManagerInjectionTokens } from '@rs-x/state-manager';
+import {
+  IIStateManager,
+  RsXStateManagerInjectionTokens,
+} from '@rs-x/state-manager';
 
 const stateManager: IIStateManager = InjectionContainer.get(
-    RsXStateManagerInjectionTokens.IStateManager
+  RsXStateManagerInjectionTokens.IStateManager,
 );
 ```
 
@@ -194,14 +200,16 @@ const stateManager: IIStateManager = InjectionContainer.get(
 
 ```ts
 import { Inject } from '@rs-x/core';
-import { IIStateManager, RsXStateManagerInjectionTokens } from '@rs-x/state-manager';
+import {
+  IIStateManager,
+  RsXStateManagerInjectionTokens,
+} from '@rs-x/state-manager';
 
 export class MyClass {
-
-    constructor(
-        @Inject(RsXStateManagerInjectionTokens.IStateManager)
-        private readonly _stateManager: IIStateManager
-    ) {}
+  constructor(
+    @Inject(RsXStateManagerInjectionTokens.IStateManager)
+    private readonly _stateManager: IIStateManager,
+  ) {}
 }
 ```
 
@@ -211,60 +219,61 @@ export class MyClass {
 
 There are two variants:
 
-### Non-recursive  
+### Non-recursive
+
 Monitors only assignment of a **new value** to the index.
 
 ```ts
 import { InjectionContainer, printValue } from '@rs-x/core';
 import {
-    IStateChange,
-    IStateManager,
-    RsXStateManagerInjectionTokens,
-    RsXStateManagerModule
+  type IStateChange,
+  type IStateManager,
+  RsXStateManagerInjectionTokens,
+  RsXStateManagerModule,
 } from '@rs-x/state-manager';
 
 // Load the state manager module into the injection container
 InjectionContainer.load(RsXStateManagerModule);
 
 export const run = (() => {
-    const stateManager: IStateManager = InjectionContainer.get(
-        RsXStateManagerInjectionTokens.IStateManager
-    );
-
-    const stateContext = {
-        x: { y: 10 }
+  const stateManager: IStateManager = InjectionContainer.get(
+    RsXStateManagerInjectionTokens.IStateManager,
+  );
+
+  const model = {
+    x: { y: 10 },
+  };
+
+  // This will emit a change event with the initial (current) value.
+  console.log('Initial value:');
+  const changedSubsription = stateManager.changed.subscribe(
+    (change: IStateChange) => {
+      printValue(change.newValue);
+    },
+  );
+
+  try {
+    // This will emit the new value { y: 10 }
+    stateManager.watchState(model, 'x');
+
+    console.log('Changed value:');
+    // This will emit the new value { y: 10 }
+    model.x = {
+      y: 20,
     };
 
-    // This will emit a change event with the initial (current) value.
-    console.log('Initial value:');
-    const changedSubsription = stateManager.changed.subscribe((change: IStateChange) => {
-        printValue(change.newValue);
-    });
-
-    try {
-        // This will emit the new value { y: 10 }
-        stateManager.watchState(stateContext, 'x');
-
-        console.log('Changed value:');
-        // This will emit the new value { y: 10 }
-        stateContext.x = {
-            y: 20
-        };
-
-        console.log(`Latest value:`);
-        printValue(stateManager.getState(stateContext, '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;
-
-    } finally {
-        changedSubsription.unsubscribe();
-        // Always release the state when it is no longer needed.
-        stateManager.releaseState(stateContext, 'x');
-    }
+    console.log(`Latest value:`);
+    printValue(stateManager.getState(model, 'x'));
+
+    // This will emit no change because the state is not recursive.
+    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(model, 'x');
+  }
 })();
-
 ```
 
 **Output:**
@@ -290,61 +299,64 @@ stateContext.x.y = 30 will not emit any change:
 
 ---
 
-### Recursive  
-Monitors assignments **and** changes *inside* the value.  
+### Recursive
+
+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,
-    RsXStateManagerInjectionTokens,
-    RsXStateManagerModule
+  type IStateChange,
+  type IStateManager,
+  RsXStateManagerInjectionTokens,
+  RsXStateManagerModule,
+  watchIndexRecursiveRule,
 } from '@rs-x/state-manager';
 
 // Load the state manager module into the injection container
 InjectionContainer.load(RsXStateManagerModule);
 
 export const run = (() => {
-    const stateManager: IStateManager = InjectionContainer.get(
-        RsXStateManagerInjectionTokens.IStateManager
-    );
-    const stateContext = {
-        x: { y: 10 }
+  const stateManager: IStateManager = InjectionContainer.get(
+    RsXStateManagerInjectionTokens.IStateManager,
+  );
+  const model = {
+    x: { y: 10 },
+  };
+  const changedSubscription = stateManager.changed.subscribe(
+    (change: IStateChange) => {
+      printValue(change.newValue);
+    },
+  );
+
+  try {
+    // We register recursive state by passing
+    // a predicate as the third argument.
+    // In this case, we want to watch the entire value,
+    // so we pass a predicate that always returns true.
+    // This will emit an initial value { y: 10 }
+    console.log('Initial value:');
+    stateManager.watchState(model, 'x', watchIndexRecursiveRule);
+
+    console.log('Changed value:');
+    // This will emit the new value { y: 10 }
+    model.x = {
+      y: 20,
     };
-    const changedSubscription = stateManager.changed.subscribe((change: IStateChange) => {
-        printValue(change.newValue)
-    });
 
-    try {
-        // We register recursive state by passing
-        // a predicate as the third argument.
-        // In this case, we want to watch the entire value,
-        // 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);
-
-        console.log('Changed value:');
-        // This will emit the new value { y: 10 }
-        stateContext.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;
-
-        console.log(`Latest value:`);
-        printValue(stateManager.getState(stateContext, 'x'));
-
-    } finally {
-        changedSubscription.unsubscribe();
-         // Always release the state when it is no longer needed.
-        stateManager.releaseState(stateContext, 'x', truePredicate);
-    }
+    console.log('Changed (recursive) value:');
+    // This will emit the new value { y: 30 } because x
+    // is registered as a recursive state.
+    model.x.y = 30;
+
+    console.log(`Latest value:`);
+    printValue(stateManager.getState(model, 'x'));
+  } finally {
+    changedSubscription.unsubscribe();
+    // Always release the state when it is no longer needed.
+    stateManager.releaseState(model, 'x', watchIndexRecursiveRule);
+  }
 })();
 ```
 
@@ -370,82 +382,87 @@ Besides that you can register a watched stated (calling `watchedState`) you can
 ```ts
 import { InjectionContainer, printValue } from '@rs-x/core';
 import {
-    IStateChange,
-    IStateManager,
-    RsXStateManagerInjectionTokens,
-    RsXStateManagerModule
+  type IStateChange,
+  type IStateManager,
+  RsXStateManagerInjectionTokens,
+  RsXStateManagerModule,
 } from '@rs-x/state-manager';
 
 // Load the state manager module into the injection container
 InjectionContainer.load(RsXStateManagerModule);
 
 export const run = (() => {
-    const stateManager: IStateManager = InjectionContainer.get(
-        RsXStateManagerInjectionTokens.IStateManager
-    );
+  const stateManager: IStateManager = InjectionContainer.get(
+    RsXStateManagerInjectionTokens.IStateManager,
+  );
 
-    class StateContext {
-        private readonly _aPlusBId = 'a+b';
-        private _a = 10;
-        private _b = 20;
+  class MyModel {
+    private readonly _aPlusBId = 'a+b';
+    private _a = 10;
+    private _b = 20;
 
-        constructor() {
-            this.setAPlusB();
-        }
-
-        public dispose(): void {
-            return stateManager.releaseState(this, this._aPlusBId);
-        }
+    constructor() {
+      this.setAPlusB();
+    }
 
-        public get aPlusB(): number {
-            return stateManager.getState(this, this._aPlusBId);
-        }
+    public dispose(): void {
+      return stateManager.releaseState(this, this._aPlusBId);
+    }
 
-        public get a(): number {
-            return this._a;
-        }
+    public get aPlusB(): number {
+      return stateManager.getState(this, this._aPlusBId);
+    }
 
-        public set a(value: number) {
-            this._a = value;
-            this.setAPlusB();
-        }
+    public get a(): number {
+      return this._a;
+    }
 
-        public get b(): number {
-            return this._b;
-        }
+    public set a(value: number) {
+      this._a = value;
+      this.setAPlusB();
+    }
 
-        public set b(value: number) {
-            this._b = value;
-            this.setAPlusB();
-        }
+    public get b(): number {
+      return this._b;
+    }
 
-        private setAPlusB(): void {
-            stateManager.setState(this, this._aPlusBId, this._a + this._b)
-        }
+    public set b(value: number) {
+      this._b = value;
+      this.setAPlusB();
     }
 
-    const stateContext = new StateContext();
-    const changeSubscription = stateManager.changed.subscribe((change: IStateChange) => {
-        printValue(change.newValue);
-    });
+    private setAPlusB(): void {
+      stateManager.setState(this, this._aPlusBId, this._a + this._b);
+    }
+  }
 
-    try {
-        console.log(`Initial value for readonly property 'aPlusB':`);
-        console.log(stateContext.aPlusB);
+  const model = new MyModel();
+  const changeSubscription = stateManager.changed.subscribe(
+    (change: IStateChange) => {
+      printValue(change.newValue);
+    },
+  );
 
-        console.log(`set 'stateContext.a' to '100' will emit a change event for readonly property 'aPlusB'`);
-        console.log(`Changed value for readonly property 'aPlusB':`);
-        stateContext.a = 100;
+  try {
+    console.log(`Initial value for readonly property 'aPlusB':`);
+    console.log(model.aPlusB);
 
-        console.log(`set 'stateContext.b' to '200' will emit a change event for readonly property 'aPlusB'`);
-        console.log(`Changed value for readonly property 'aPlusB':`);
-        stateContext.b = 200;
+    console.log(
+      `set 'model.a' to '100' will emit a change event for readonly property 'aPlusB'`,
+    );
+    console.log(`Changed value for readonly property 'aPlusB':`);
+    model.a = 100;
 
-    } finally {
-        changeSubscription.unsubscribe();
-        // Always release the state when it is no longer needed.
-        stateContext.dispose();
-    }
+    console.log(
+      `set 'model.b' to '200' will emit a change event for readonly property 'aPlusB'`,
+    );
+    console.log(`Changed value for readonly property 'aPlusB':`);
+    model.b = 200;
+  } finally {
+    changeSubscription.unsubscribe();
+    // Always release the state when it is no longer needed.
+    model.dispose();
+  }
 })();
 ```
 
@@ -476,52 +493,57 @@ When done, release the state:
 ```ts
 import { InjectionContainer, printValue } from '@rs-x/core';
 import {
-    IStateChange,
-    IStateManager,
-    RsXStateManagerInjectionTokens,
-    RsXStateManagerModule
+  type IStateChange,
+  type IStateManager,
+  RsXStateManagerInjectionTokens,
+  RsXStateManagerModule,
 } from '@rs-x/state-manager';
 
 // Load the state manager module into the injection container
 InjectionContainer.load(RsXStateManagerModule);
 
 export const run = (() => {
-    const stateManager: IStateManager = InjectionContainer.get(
-        RsXStateManagerInjectionTokens.IStateManager
-    );
-    const stateContext = {
-        x: { y: 10 }
-    };
-    const changedSubscription = stateManager.changed.subscribe((change: IStateChange) => {
-        printValue(change.newValue);
-    });
-
-    try {
-        // 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');
-
-        console.log('Changed value:');
-        stateContext.x = { y: 20 };
+  const stateManager: IStateManager = InjectionContainer.get(
+    RsXStateManagerInjectionTokens.IStateManager,
+  );
+  const model = {
+    x: { y: 10 },
+  };
+  const changedSubscription = stateManager.changed.subscribe(
+    (change: IStateChange) => {
+      printValue(change.newValue);
+    },
+  );
+
+  try {
+    // 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(model, 'x');
+    stateManager.watchState(model, 'x');
 
-        stateManager.releaseState(stateContext, 'x');
+    console.log('Changed value:');
+    model.x = { y: 20 };
 
-        console.log('Changed event is still emitted after unregister because one observer remains.');
-        console.log('Changed value:');
-        stateContext.x = { y: 30 };
+    stateManager.releaseState(model, 'x');
 
-        stateManager.releaseState(stateContext, 'x');
+    console.log(
+      'Changed event is still emitted after unregister because one observer remains.',
+    );
+    console.log('Changed value:');
+    model.x = { y: 30 };
 
-        console.log('Changed event is no longer emitted after the last observer unregisters.');
-        console.log('Changed value:');
-        console.log('---');
-        stateContext.x = { y: 30 };
+    stateManager.releaseState(model, 'x');
 
-    } finally {
-        changedSubscription.unsubscribe();
-    }
+    console.log(
+      'Changed event is no longer emitted after the last observer unregisters.',
+    );
+    console.log('Changed value:');
+    console.log('---');
+    model.x = { y: 30 };
+  } finally {
+    changedSubscription.unsubscribe();
+  }
 })();
 ```
 
@@ -560,7 +582,7 @@ You can override this factory list by providing your own custom provider service
 | Observable  | Not indexable                                                                                                                                                                | Subscribe              | [example](#observable)           |
 | Custom type | user defined                                                                                                                                                                 | user defined           | [example](#customtype)           |
 
-State item is identified by a **context**,  **index** and **mustProxify** predicate for a recursive state item
+State item is identified by a **context**, **index** and **mustProxify** predicate for a recursive state item
 The manager checks each observer factory to determine support based on the **context** and **index**.
 
 Behavior:
@@ -571,86 +593,92 @@ Behavior:
 The following example illustrates the different state types:
 
 ### Object property/field
+
 **Example**
+
 ```ts
-import { InjectionContainer, printValue, truePredicate } from '@rs-x/core';
+import { InjectionContainer, printValue, Type } from '@rs-x/core';
 import {
-    IStateChange,
-    IStateManager,
-    RsXStateManagerInjectionTokens,
-    RsXStateManagerModule
+  type IStateChange,
+  type IStateManager,
+  RsXStateManagerInjectionTokens,
+  RsXStateManagerModule,
+  watchIndexRecursiveRule,
 } from '@rs-x/state-manager';
 
 // Load the state manager module into the injection container
 InjectionContainer.load(RsXStateManagerModule);
 
 interface INestStateConext {
-    a: number;
-    nested?: INestStateConext;
+  a: number;
+  nested?: INestStateConext;
 }
 
-class StateContext {
-    private _b: INestStateConext = {
-        a: 10,
+class MyModel {
+  private _b: INestStateConext = {
+    a: 10,
+    nested: {
+      a: 20,
+      nested: {
+        a: 30,
         nested: {
-            a: 20,
-            nested: {
-                a: 30,
-                nested: {
-                    a: 40
-                }
-            }
-        }
-    };
-
-    public get b(): INestStateConext {
-        return this._b;
-    }
-
-    public set b(value: INestStateConext) {
-        this._b = value;
-    }
+          a: 40,
+        },
+      },
+    },
+  };
+
+  public get b(): INestStateConext {
+    return this._b;
+  }
+
+  public set b(value: INestStateConext) {
+    this._b = value;
+  }
 }
 
 export const run = (() => {
-    const stateManager: IStateManager = InjectionContainer.get(
-        RsXStateManagerInjectionTokens.IStateManager
-    );
+  const stateManager: IStateManager = InjectionContainer.get(
+    RsXStateManagerInjectionTokens.IStateManager,
+  );
 
-    const stateContext = new StateContext();
+  const model = new MyModel();
 
-    const changeSubscription = stateManager.changed.subscribe((change: IStateChange) => {
-        printValue(change.newValue);
-    });
+  const changeSubscription = stateManager.changed.subscribe(
+    (change: IStateChange) => {
+      printValue(change.newValue);
+    },
+  );
 
-    try {
-        // Observe property `b` recursively.
-        // Otherwise, only assigning a new value to stateContext.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);
+  try {
+    // Observe property `b` recursively.
+    // 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(model, 'b', watchIndexRecursiveRule);
 
-        console.log('\nReplacing stateContext.b.nested.nested will emit a change event');
-        console.log('Changed value:');
+    console.log('\nReplacing model.b.nested.nested will emit a change event');
+    console.log('Changed value:');
 
-        stateContext.b.nested.nested = {
-            a: -30,
-            nested: {
-                a: -40
-            }
-        };
-
-        console.log(`Latest value:`);
-        printValue(stateManager.getState(stateContext, 'b'));
+    (Type.toObject(model.b.nested) ?? {}).nested = {
+      a: -30,
+      nested: {
+        a: -40,
+      },
+    };
 
-    } finally {
-        changeSubscription.unsubscribe();
-        // Always release the state when it is no longer needed.
-        stateManager.releaseState(stateContext, 'b', truePredicate);
-    }
+    console.log(`Latest value:`);
+    printValue(stateManager.getState(model, 'b'));
+  } finally {
+    changeSubscription.unsubscribe();
+    // Always release the state when it is no longer needed.
+    stateManager.releaseState(model, 'b', watchIndexRecursiveRule);
+  }
 })();
 ```
+
 **Output:**
+
 ```console
 Running demo: /Users/robertsanders/projects/rs-x/demo/src/rs-x-state-manager/register-property.ts
 Initial value:
@@ -697,86 +725,98 @@ Latest value:
 ```
 
 ### Date
+
 **Example**
+
 ```ts
-import { InjectionContainer, truePredicate, utCDate } from '@rs-x/core';
+import { InjectionContainer, utCDate } from '@rs-x/core';
 import {
-    IProxyRegistry,
-    IStateChange,
-    IStateManager,
-    RsXStateManagerInjectionTokens,
-    RsXStateManagerModule
+  type IProxyRegistry,
+  type IStateChange,
+  type IStateManager,
+  RsXStateManagerInjectionTokens,
+  RsXStateManagerModule,
+  watchIndexRecursiveRule,
 } from '@rs-x/state-manager';
 
 // Load the state manager module into the injection container
 InjectionContainer.load(RsXStateManagerModule);
 
 function watchDate(stateManager: IStateManager) {
-    console.log('\n******************************************');
-    console.log('* Watching date');
-    console.log('******************************************\n');
+  console.log('\n******************************************');
+  console.log('* Watching date');
+  console.log('******************************************\n');
+
+  const model = {
+    date: utCDate(2021, 2, 5),
+  };
+  const changeSubscription = stateManager.changed.subscribe(
+    (change: IStateChange) => {
+      console.log(
+        `${change.index}: ${(change.newValue as Date).toUTCString()}`,
+      );
+    },
+  );
+  try {
+    console.log('Initial value:');
+    stateManager.watchState(model, 'date', watchIndexRecursiveRule);
 
-    const stateContext = {
-        date: utCDate(2021, 2, 5)
-    };
-    const changeSubscription = stateManager.changed.subscribe((change: IStateChange) => {
-        console.log(`${change.key}: ${(change.newValue as Date).toUTCString()}`);
-    });
-    try {
-        console.log('Initial value:');
-        stateManager.watchState(stateContext, 'date', truePredicate);
-
-        console.log('Changed value:');
-        stateContext.date.setFullYear(2023);
-
-        console.log('Set value:');
-        stateContext.date = new Date(2024, 5, 6);
-
-        console.log('Latest value:');
-        console.log(stateManager.getState<Date>(stateContext, 'date').toUTCString());
-    } finally {
-        changeSubscription.unsubscribe();
-        // Always release the state when it is no longer needed.
-        stateManager.releaseState(stateContext, 'date', truePredicate);
-    }
+    console.log('Changed value:');
+    model.date.setFullYear(2023);
+
+    console.log('Set value:');
+    model.date = new Date(2024, 5, 6);
+
+    console.log('Latest value:');
+    console.log(stateManager.getState<Date>(model, 'date').toUTCString());
+  } finally {
+    changeSubscription.unsubscribe();
+    // Always release the state when it is no longer needed.
+    stateManager.releaseState(model, 'date', watchIndexRecursiveRule);
+  }
 }
 
 function watchDateProperty(stateManager: IStateManager) {
-    console.log('\n******************************************');
-    console.log('* Watching year');
-    console.log('******************************************\n');
-    const date = utCDate(2021, 2, 5);
-    const changeSubscription = stateManager.changed.subscribe((change: IStateChange) => {
-        console.log(change.newValue);
-    });
-    try {
-        // This will emit a change event with the initial (current) value.
-        console.log('Initial value:');
-        stateManager.watchState(date, 'year');
-
-        const proxyRegister: IProxyRegistry = InjectionContainer.get(RsXStateManagerInjectionTokens.IProxyRegistry);
-        const dateProxy = proxyRegister.getProxy<Date>(date);
-        console.log('Changed value:');
-        dateProxy.setFullYear(2023);
-
-        console.log('Latest value:');
-        console.log(stateManager.getState(date, 'year'));
-
-    } finally {
-        changeSubscription.unsubscribe();
-        stateManager.releaseState(date, 'year');
-    }
+  console.log('\n******************************************');
+  console.log('* Watching year');
+  console.log('******************************************\n');
+  const date = utCDate(2021, 2, 5);
+  const changeSubscription = stateManager.changed.subscribe(
+    (change: IStateChange) => {
+      console.log(change.newValue);
+    },
+  );
+  try {
+    // This will emit a change event with the initial (current) value.
+    console.log('Initial value:');
+    stateManager.watchState(date, 'year');
+
+    const proxyRegister: IProxyRegistry = InjectionContainer.get(
+      RsXStateManagerInjectionTokens.IProxyRegistry,
+    );
+    const dateProxy = proxyRegister.getProxy<Date>(date);
+    console.log('Changed value:');
+    dateProxy.setFullYear(2023);
+
+    console.log('Latest value:');
+    console.log(stateManager.getState(date, 'year'));
+  } finally {
+    changeSubscription.unsubscribe();
+    stateManager.releaseState(date, 'year');
+  }
 }
 
 export const run = (() => {
-    const stateManager: IStateManager = InjectionContainer.get(
-        RsXStateManagerInjectionTokens.IStateManager
-    );
-    watchDate(stateManager);
-    watchDateProperty(stateManager);
+  const stateManager: IStateManager = InjectionContainer.get(
+    RsXStateManagerInjectionTokens.IStateManager,
+  );
+  watchDate(stateManager);
+  watchDateProperty(stateManager);
 })();
 ```
+
 **Output:**
+
 ```console
 Running demo: demo/src/rs-x-state-manager/register-date.ts
 
@@ -806,54 +846,60 @@ Latest value:
 ```
 
 ### Array
+
 **Example**
+
 ```ts
-import { InjectionContainer, printValue, truePredicate } from '@rs-x/core';
+import { InjectionContainer, printValue } from '@rs-x/core';
 import {
-    IStateChange,
-    IStateManager,
-    RsXStateManagerInjectionTokens,
-    RsXStateManagerModule
+  type IStateChange,
+  type IStateManager,
+  RsXStateManagerInjectionTokens,
+  RsXStateManagerModule,
+  watchIndexRecursiveRule,
 } from '@rs-x/state-manager';
 
 // Load the state manager module into the injection container
 InjectionContainer.load(RsXStateManagerModule);
 
 export const run = (() => {
-    const stateManager: IStateManager = InjectionContainer.get(
-        RsXStateManagerInjectionTokens.IStateManager
-    );
-
-    const stateContext = {
-        array: [
-            [1, 2],
-            [3, 4]
-        ]
-    };
-
-    const changeSubscription = stateManager.changed.subscribe((change: IStateChange) => {
-        printValue(change.newValue);
-    });
-
-    try {
-        // This will emit a change event with the initial (current) value.
-        console.log('Initial value:');
-        stateManager.watchState(stateContext, 'array', truePredicate);
-
-        console.log('Changed value:');
-        stateContext.array[1].push(5);
+  const stateManager: IStateManager = InjectionContainer.get(
+    RsXStateManagerInjectionTokens.IStateManager,
+  );
+
+  const model = {
+    array: [
+      [1, 2],
+      [3, 4],
+    ],
+  };
 
-        console.log('Latest value:');
-        printValue(stateManager.getState(stateContext, 'array'));
+  const changeSubscription = stateManager.changed.subscribe(
+    (change: IStateChange) => {
+      printValue(change.newValue);
+    },
+  );
 
-    } finally {
-        changeSubscription.unsubscribe();
-        // Always release the state when it is no longer needed.
-        stateManager.releaseState(stateContext, 'array', truePredicate);
-    }
+  try {
+    // This will emit a change event with the initial (current) value.
+    console.log('Initial value:');
+    stateManager.watchState(model, 'array', watchIndexRecursiveRule);
+
+    console.log('Changed value:');
+    model.array[1].push(5);
+
+    console.log('Latest value:');
+    printValue(stateManager.getState(model, 'array'));
+  } finally {
+    changeSubscription.unsubscribe();
+    // Always release the state when it is no longer needed.
+    stateManager.releaseState(model, 'array', watchIndexRecursiveRule);
+  }
 })();
 ```
+
 **Output:**
+
 ```console
 Running demo: /Users/robertsanders/projects/rs-x/demo/src/rs-x-state-manager/register-array.ts
 Initial value:
@@ -894,54 +940,60 @@ Latest value:
 ```
 
 ### Map
+
 **Example**
+
 ```ts
-import { InjectionContainer, printValue, truePredicate } from '@rs-x/core';
+import { InjectionContainer, printValue } from '@rs-x/core';
 import {
-    IStateChange,
-    IStateManager,
-    RsXStateManagerInjectionTokens,
-    RsXStateManagerModule
+  type IStateChange,
+  type IStateManager,
+  RsXStateManagerInjectionTokens,
+  RsXStateManagerModule,
+  watchIndexRecursiveRule,
 } from '@rs-x/state-manager';
 
 // Load the state manager module into the injection container
 InjectionContainer.load(RsXStateManagerModule);
 
 const stateManager: IStateManager = InjectionContainer.get(
-    RsXStateManagerInjectionTokens.IStateManager
+  RsXStateManagerInjectionTokens.IStateManager,
 );
 
 export const run = (() => {
-    const stateContext = {
-        map: new Map([
-            ['a', [1, 2]],
-            ['b', [3, 4]]
-        ])
-    };
-
-    const changeSubscription = stateManager.changed.subscribe((change: IStateChange) => {
-        printValue(change.newValue);
-    });
-
-    try {
-        // This will emit a change event with the initial (current) value.
-        console.log('Initial value:');
-        stateManager.watchState(stateContext, 'map', truePredicate);
-
-        console.log('Changed value:');
-        stateContext.map.get('b').push(5);
-
-        console.log('Latest value:');
-        printValue(stateManager.getState(stateContext, 'map'))
-
-    } finally {
-        changeSubscription.unsubscribe();
-        // Always release the state when it is no longer needed.
-        stateManager.releaseState(stateContext, 'array', truePredicate);
-    }
+  const model = {
+    map: new Map([
+      ['a', [1, 2]],
+      ['b', [3, 4]],
+    ]),
+  };
+
+  const changeSubscription = stateManager.changed.subscribe(
+    (change: IStateChange) => {
+      printValue(change.newValue);
+    },
+  );
+
+  try {
+    // This will emit a change event with the initial (current) value.
+    console.log('Initial value:');
+    stateManager.watchState(model, 'map', watchIndexRecursiveRule);
+
+    console.log('Changed value:');
+    model.map.get('b')?.push(5);
+
+    console.log('Latest value:');
+    printValue(stateManager.getState(model, 'map'));
+  } finally {
+    changeSubscription.unsubscribe();
+    // Always release the state when it is no longer needed.
+    stateManager.releaseState(model, 'array', watchIndexRecursiveRule);
+  }
 })();
 ```
+
 **Output:**
+
 ```console
 Running demo: /Users/robertsanders/projects/rs-x/demo/src/rs-x-state-manager/register-map.ts
 Initial value:
@@ -1000,53 +1052,61 @@ Latest value:
 ```
 
 ### Set
+
 **Example**
+
 ```ts
-import { InjectionContainer, printValue, truePredicate } from '@rs-x/core';
+import { InjectionContainer, printValue } from '@rs-x/core';
 import {
-    IProxyRegistry,
-    IStateChange,
-    IStateManager,
-    RsXStateManagerInjectionTokens,
-    RsXStateManagerModule
+  type IProxyRegistry,
+  type IStateChange,
+  type IStateManager,
+  RsXStateManagerInjectionTokens,
+  RsXStateManagerModule,
+  watchIndexRecursiveRule,
 } from '@rs-x/state-manager';
 
 // Load the state manager module into the injection container
 InjectionContainer.load(RsXStateManagerModule);
 
 export const run = (() => {
-    const stateManager: IStateManager = InjectionContainer.get(
-        RsXStateManagerInjectionTokens.IStateManager
-    );
-    const item1 = [1, 2];
-    const item2 = [3, 4];
-    const stateContext = {
-        set: new Set([item1, item2])
-    };
-    const changeSubscription = stateManager.changed.subscribe((change: IStateChange) => {
-        printValue(change.newValue);
-    });
-
-    try {
-        // This will emit a change event with the initial (current) value.
-        console.log('Initial value:');
-        stateManager.watchState(stateContext, 'set', truePredicate);
-
-        console.log('Changed value:');
-        const proxyRegister: IProxyRegistry = InjectionContainer.get(RsXStateManagerInjectionTokens.IProxyRegistry);
-        proxyRegister.getProxy<number[]>(item2).push(5);
-
-        console.log('Latest value:');
-        printValue(stateManager.getState(stateContext, 'set'));
+  const stateManager: IStateManager = InjectionContainer.get(
+    RsXStateManagerInjectionTokens.IStateManager,
+  );
+  const item1 = [1, 2];
+  const item2 = [3, 4];
+  const model = {
+    set: new Set([item1, item2]),
+  };
+  const changeSubscription = stateManager.changed.subscribe(
+    (change: IStateChange) => {
+      printValue(change.newValue);
+    },
+  );
+
+  try {
+    // This will emit a change event with the initial (current) value.
+    console.log('Initial value:');
+    stateManager.watchState(model, 'set', watchIndexRecursiveRule);
 
-    } finally {
-        changeSubscription.unsubscribe();
-        // Always release the state when it is no longer needed.
-        stateManager.releaseState(stateContext, 'set', truePredicate);
-    }
+    console.log('Changed value:');
+    const proxyRegister: IProxyRegistry = InjectionContainer.get(
+      RsXStateManagerInjectionTokens.IProxyRegistry,
+    );
+    proxyRegister.getProxy<number[]>(item2).push(5);
+
+    console.log('Latest value:');
+    printValue(stateManager.getState(model, 'set'));
+  } finally {
+    changeSubscription.unsubscribe();
+    // Always release the state when it is no longer needed.
+    stateManager.releaseState(model, 'set', watchIndexRecursiveRule);
+  }
 })();
 ```
+
 **Output:**
+
 ```console
 Running demo: /Users/robertsanders/projects/rs-x/demo/src/rs-x-state-manager/register-set.ts
 Initial value:
@@ -1087,54 +1147,64 @@ Latest value:
 ```
 
 ### Promise
+
 **Example**
+
 ```ts
 import { InjectionContainer, WaitForEvent } from '@rs-x/core';
 import {
-    IStateChange,
-    IStateManager,
-    RsXStateManagerInjectionTokens,
-    RsXStateManagerModule
+  type IStateChange,
+  type IStateManager,
+  RsXStateManagerInjectionTokens,
+  RsXStateManagerModule,
 } from '@rs-x/state-manager';
 
 // Load the state manager module into the injection container
 InjectionContainer.load(RsXStateManagerModule);
 
 export const run = (async () => {
-    const stateManager: IStateManager = InjectionContainer.get(
-        RsXStateManagerInjectionTokens.IStateManager
-    );
-
-    const stateContext = {
-        promise: Promise.resolve(10)
-    };
-    const changeSubscription = stateManager.changed.subscribe((change: IStateChange) => {
-        console.log(change.newValue);
+  const stateManager: IStateManager = InjectionContainer.get(
+    RsXStateManagerInjectionTokens.IStateManager,
+  );
+
+  const model = {
+    promise: Promise.resolve(10),
+  };
+  const changeSubscription = stateManager.changed.subscribe(
+    (change: IStateChange) => {
+      console.log(change.newValue);
+    },
+  );
+
+  try {
+    await new WaitForEvent(stateManager, 'changed').wait(() => {
+      // This will emit a change event with the initial (current) value.
+      console.log('Initial value:');
+      stateManager.watchState(model, 'promise');
     });
 
-    try {
-        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');
-        });
+    await new WaitForEvent(stateManager, 'changed').wait(() => {
+      console.log('Changed value:');
+      let resolveHandler!: (value: number) => void;
 
-        await new WaitForEvent(stateManager, 'changed').wait(() => {
-            console.log('Changed value:');
-            let resolveHandler: (value: number) => void;
-            stateContext.promise = new Promise((resolve) => { resolveHandler = resolve; });
-            resolveHandler(30);
-        });
+      model.promise = new Promise<number>((resolve) => {
+        resolveHandler = resolve;
+      });
 
-        console.log(`Latest value: ${stateManager.getState(stateContext, 'promise')}`);
-    } finally {
-        changeSubscription.unsubscribe();
-        // Always release the state when it is no longer needed.
-        stateManager.releaseState(stateContext, 'promise');
-    }
+      resolveHandler(30);
+    });
+
+    console.log(`Latest value: ${stateManager.getState(model, 'promise')}`);
+  } finally {
+    changeSubscription.unsubscribe();
+    // Always release the state when it is no longer needed.
+    stateManager.releaseState(model, 'promise');
+  }
 })();
 ```
+
 **Output:**
+
 ```console
 Running demo: /Users/robertsanders/projects/rs-x/demo/src/rs-x-state-manager/register-promise.ts
 Initial value:
@@ -1145,59 +1215,65 @@ Latest value: 30
 ```
 
 ### Observable
+
 **Example**
+
 ```ts
+import { of, Subject } from 'rxjs';
+
 import { InjectionContainer, WaitForEvent } from '@rs-x/core';
 import {
-    IStateChange,
-    IStateManager,
-    RsXStateManagerInjectionTokens,
-    RsXStateManagerModule
+  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);
 
 export const run = (async () => {
-    const stateManager: IStateManager = InjectionContainer.get(
-        RsXStateManagerInjectionTokens.IStateManager
-    );
-
-    const stateContext = {
-        observable: of(10)
-    };
-
-    const changeSubscription = stateManager.changed.subscribe((change: IStateChange) => {
-        console.log(change.newValue);
+  const stateManager: IStateManager = InjectionContainer.get(
+    RsXStateManagerInjectionTokens.IStateManager,
+  );
+
+  const model = {
+    observable: of(10),
+  };
+
+  const changeSubscription = stateManager.changed.subscribe(
+    (change: IStateChange) => {
+      console.log(change.newValue);
+    },
+  );
+
+  try {
+    // We need to wait here until the event is emitted,
+    // otherwise the demo will exit before the change event occurs.
+    await new WaitForEvent(stateManager, 'changed').wait(() => {
+      // This will emit a change event with the initial (current) value.
+      console.log('Initial value:');
+      stateManager.watchState(model, 'observable');
     });
 
-    try {
-        // We need to wait here until the event is emitted,
-        // otherwise the demo will exit before the change event occurs.
-        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');
-        });
-
-        await new WaitForEvent(stateManager, 'changed').wait(() => {
-            console.log('Changed value:');
-            const subject = new Subject<number>();
-            stateContext.observable = subject
-            subject.next(30);
-        });
-
-        console.log(`Latest value: ${stateManager.getState(stateContext, 'observable')}`);
+    await new WaitForEvent(stateManager, 'changed').wait(() => {
+      console.log('Changed value:');
+      const subject = new Subject<number>();
+      model.observable = subject;
+      subject.next(30);
+    });
 
-    } finally {
-        changeSubscription.unsubscribe();
-        // Always release the state when it is no longer needed.
-        stateManager.releaseState(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(model, 'observable');
+  }
 })();
 ```
+
 **Output:**
+
 ```console
 Running demo: /Users/robertsanders/projects/rs-x/demo/src/rs-x-state-manager/register-observable.ts
 Initial value:
@@ -1208,511 +1284,601 @@ Latest value: 30
 ```
 
 ### Custom type
-1. Create an accessor to retrieve index values on your type.  
-2. Create a factory to create an observer for your data type.  
+
+1. Create an accessor to retrieve index values on your type.
+2. Create a factory to create an observer for your data type.
 3. Create a factory to create an observer for an index on your data instance.
 
 The following example demonstrates adding support for a custom `TextDocument` class:
 
 **Example**
-```ts
+
+````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();
-    }
-
-    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 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;
-    }
+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);
+  }
+
+  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 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();
-    }
-
-    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)
-            }
-        );
-    }
+class TextDocumentObserverManager extends SingletonFactory<
+  TextDocument,
+  TextDocument,
+  TextDocumentObserver
+> {
+  constructor(
+    @Inject(RsXStateManagerInjectionTokens.IProxyRegistry)
+    private readonly _proxyRegister: IProxyRegistry,
+  ) {
+    super();
+  }
+
+  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 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;
-    }
-
-    protected override createId(textDocument: TextDocument): TextDocument {
-        return textDocument;
-    }
-
-    protected override createInstance(
-        textDocument: TextDocument
-    ): IndexForTextDocumentxObserverManager {
-
-        return new IndexForTextDocumentxObserverManager(textDocument, this._textDocumentObserverManager, () => this.release(textDocument));
-    }
+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;
+  }
+
+  protected override createId(textDocument: TextDocument): TextDocument {
+    return 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();
-    }
-
-    // Indicate whether the value is async. For example when the value is a Promise
-    public isAsync(_context: TextDocument, _index: ITextDocumentIndex): boolean {
-        return false;
-    }
-
-    // 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);
-    }
-
-    public getValue(context: TextDocument, index: ITextDocumentIndex): string {
-        return context.getLine(index);
-    }
-
-    public setValue(context: TextDocument, index: ITextDocumentIndex, value: string): void {
-        context.setLine(index, value);
-    }
-
-    public applies(context: unknown, _index: ITextDocumentIndex): boolean {
-        return context instanceof TextDocument;
-    }
+export class TextDocumentIndexAccessor implements IIndexValueAccessor<
+  TextDocument,
+  ITextDocumentIndex
+> {
+  public readonly priority!: 200;
+
+  public hasValue(
+    textDocument: TextDocument,
+    index: ITextDocumentIndex,
+  ): boolean {
+    return textDocument.getLine(index) !== undefined;
+  }
+
+  // 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(
+    textDocument: TextDocument,
+    index: ITextDocumentIndex,
+  ): string | undefined {
+    return this.getValue(textDocument, index);
+  }
+
+  public getValue(
+    textDocument: TextDocument,
+    index: ITextDocumentIndex,
+  ): string | undefined {
+    return textDocument.getLine(index);
+  }
+
+  public setValue(
+    textDocument: TextDocument,
+    index: ITextDocumentIndex,
+    value: string,
+  ): void {
+    textDocument.setLine(index, value);
+  }
+
+  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
-        );
-    }
-
-    public applies(object: unknown, propertyInfo: IPropertyInfo): boolean {
-        const documentKey = propertyInfo.key as ITextDocumentIndex;
-        return object instanceof TextDocument && documentKey?.lineIndex >= 0 && documentKey?.pageIndex >= 0;
-    }
+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.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;
+
+  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;
-    }
+  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);
-            });
-        });
-    }
+  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[] = [];
+  public toString(): string {
+    const pages: string[] = [];
 
-        // Sort pages by pageIndex
-        const sortedPageIndexes = Array.from(this._pages.keys()).sort((a, b) => a - b);
+    // Sort pages by pageIndex
+    const sortedPageIndexes = Array.from(this._pages.keys()).sort(
+      (a, b) => a - b,
+    );
 
-        for (const pageIndex of sortedPageIndexes) {
-            const page = this._pages.get(pageIndex);
-            if (!page) {
-                continue;
-            }
+    for (const pageIndex of sortedPageIndexes) {
+      const page = this._pages.get(pageIndex);
+      if (!page) {
+        continue;
+      }
 
-            // Sort lines by lineIndex
-            const sortedLineIndexes = Array.from(page.keys()).sort((a, b) => a - b);
+      // Sort lines by lineIndex
+      const sortedLineIndexes = Array.from(page.keys()).sort((a, b) => a - b);
 
-            const lines = sortedLineIndexes.map(lineIndex => `  ${lineIndex}: ${page.get(lineIndex)}`);
-            pages.push(`Page ${pageIndex}:\n${lines.join('\n')}`);
-        }
-
-        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);
+  }
 
-class TextDocumentIndexObserver extends AbstractObserver<TextDocument, string, ITextDocumentIndex> {
-    private readonly _changeSubscription: Subscription;
+  public getLine(index: ITextDocumentIndex): string | undefined {
+    const { pageIndex, lineIndex } = index;
+    return this._pages.get(pageIndex)?.get(lineIndex);
+  }
+}
 
-    constructor(
-        owner: IDisposableOwner,
-        private readonly _observer: TextDocumentObserver,
-        index: ITextDocumentIndex,
+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);
+  }
+
+  protected override disposeInternal(): void {
+    this._changeSubscription.unsubscribe();
+    this._observer.dispose();
+  }
+
+  private readonly onChange = (change: IPropertyChange) => {
+    const changeIndex = change.index as ITextDocumentIndex;
+    if (
+      changeIndex.lineIndex === this.id?.lineIndex &&
+      changeIndex.pageIndex === this.id?.pageIndex
     ) {
-        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();
-    }
-
-    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);
-        }
+      this.emitChange(change);
     }
+  };
 }
 
 class TextDocumentObserver extends AbstractObserver<TextDocument> {
-    constructor(
-        textDocument: TextDocument,
-        private readonly _proxyRegister: IProxyRegistry,
-        owner?: IDisposableOwner,) {
-        super(owner, null, textDocument);
-
-        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);
-    }
-
-    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);
-        }
+  constructor(
+    textDocument: TextDocument,
+    private readonly _proxyRegister: IProxyRegistry,
+    owner?: IDisposableOwner,
+  ) {
+    super(owner, Type.cast(undefined), textDocument);
+
+    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);
+  }
+
+  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: [],
+          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());
-    });
-
-    // 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();
-    }
+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(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
-
-        console.log('\n***********************************************');
-        console.log("Start watching line 3 on page 1\n");
-        stateManager.watchState(stateContext.myBook, line3OnPage1Index);
-
-        const proxRegistry: IProxyRegistry = InjectionContainer.get(RsXStateManagerInjectionTokens.IProxyRegistry);
-        const bookProxy: TextDocument = proxRegistry.getProxy(stateContext.myBook);
-
-        bookProxy.setLine(line3OnPage1Index, 'a prince was born');
-
-        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(stateContext.myBook, line3OnPage1Index);
-        lineSubscription.unsubscribe();
-    }
+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());
+    },
+  );
+
+  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
+
+    console.log('\n***********************************************');
+    console.log('Start watching line 3 on page 1\n');
+    stateManager.watchState(model.myBook, line3OnPage1Index);
+
+    const proxRegistry: IProxyRegistry = InjectionContainer.get(
+      RsXStateManagerInjectionTokens.IProxyRegistry,
+    );
+    const bookProxy: TextDocument = proxRegistry.getProxy(model.myBook);
+
+    bookProxy.setLine(line3OnPage1Index, 'a prince was born');
+
+    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 %}
-```
+````
+
 **Output:**
+
 ```console
 Running demo: /Users/robertsanders/projects/rs-x/demo/src/rs-x-state-manager/state-manager-customize.ts
 
@@ -1762,4 +1928,3 @@ Page 1:
 Changing line 1 on page 1 does not emit change:
 ---
 ```
-