objectwatchers

Object value and prop change detection module

• Object, Array, Web Global value watcher

Install

• npm install objectwarchers

Support features:

• browser support(UMD module)

  /dist/lib.bundle.umd.js

• typescript support

  lib.d.ts

• nodejs support

  /dist/lib.bundle.prod.js

• Watch object variable change
  • RXjs Subject Support
  • windows message Support
• Watch object Propery(Key) change(added property notify)
  • RXjs Subject Support
  • windows message Support
• Watch object Propery(Key) Delete
  • RXjs Subject Support
  • windows message Support
• Watch Array variable change
  • RXjs Subject Support
  • windows message Support
• Watch Array Sort(Order) change
  • RXjs Subject Support
  • windows message Support

dependency:

• rxjs

APIs

ObjectWatcher

• Object and Array Watcher module

• Use Proxy

• Interface

  • IWatcherInfo

  {
      origin?: any;
      target: any;
      prop?: string | number;
      oldValue?: any;
      newValue?: any;
      propDepth?: propDepthType;
  }

    - origin: top parent object
    - target: target object
    - prop: property name or index
    - oldValue: old value of object[property]
    - oldValue: new value of object[property]
    - propDepth: object property depth array
        - A { 
            name: {
                sub: 'change'
            }
        }
        - if change A.name.sub
        - propDepth ['name']
        - we can 'property name' from prop
         - A { 
            name: {
                sub: {
                    sub2: 'change2'
                }
            }
        }
        - if change A.name.sub.sub2
        - propDepth ['name','sub']
        - we can 'property name' from prop
      

• Method

  • getter
    • proxy : return new proxy object
    • valueChangeSubject : return value change subject
      • subject data: IWatcherInfo
    • propChangeSubject : return property change subject
      • subject data: IWatcherInfo
    • orderChangerSubject : return new order change subject
      • subject data: changed indices array

• Window Event(browser only)

  • changeObjectValues
  • changeObjectProps
  • changeArrayOrder
  • deleteObjectProp

GlobalLiteralWatcher

• Global variable(literal) Watcher module
• Interface
  • IWatcherInfo

  {
      target: any; 
      prop?: string | number;
      oldValue?: any;
      newValue?: any;
  }

    - target: target object
    - prop: property name or index
    - oldValue: old value of object[property]
    - oldValue: new value of object[property]
      

• Method
  • getter
    • proxy : return new proxy object
    • valueChangeSubject : return value change subject
      • subject data: IWatcherInfo
  • watch(): start watch variable
  • stopWatch(): stop watch variable
• Window Event(browser only)
  • onGlobalVarChange

How to Use

• Typescript

  • Object Value and Propery change watch

  import { ObjectWatcher } from 'objectwatchers';
  
  /**
   * Object Watcher Rxjs Subject Example code
   */
  
  let testObject = {
      name: 'this is name'
  }
  
  console.log('original testObject is: ', testObject);
  
  //Make Object Watcher
  const testWatcher = new ObjectWatcher(testObject);
  //Getting proxy object, original object convert to proxy object
  testObject = testWatcher.proxy;
  
  /**
   * subscribe valueChangeSubject
   * this occur before object property value is changed
   */
  testWatcher.valueChangeSubject.subscribe((data) => {
    
  })
  
  /**
   * subscribe propChangeSubject
   * this occur before object property is added
   */
  testWatcher.propChangeSubject.subscribe((data) => {
    
  })
  
  //try change object property value
  testObject.name = 'this is name2';
  
  //try add object property
  testObject['name2'] = 'this is name2';
  

  • Array Value and Order change watch

  import { ObjectWatcher } from 'objectwatchers';
  
  /**
   * Object Watcher Rxjs Subject Example code
   */
  let testArray = [1,2,3,5,4,8,7,9];
  //Make Object Watcher
  const testArrayWatcher = new ObjectWatcher(testArray);
  
  //Getting proxy object, original object convert to proxy object
  testArray = testArrayWatcher.proxy;
  console.log(`original array is ${testArray}`);
  
  /**
   * subscribe valueChangeSubject
   * this occur before array property value is changed
   */
  testArrayWatcher.valueChangeSubject.subscribe( (data) => {
        
  });
  
  /**
   * subscribe propChangeSubject
   * this occur before array property value is changed
   */
  testArrayWatcher.propChangeSubject.subscribe( (data) => {
    
  });
  
  /**
   * subscribe propChangeSubject
   * this occur before array order is changed
   */
  testArrayWatcher.orderChangerSubject.subscribe( (data) => {
    
  });
  
  testArray = testArray.sort();
  testArray.push(100);
  

• Nodejs

  • Object Value and Propery change watch

  const ObjectWatcher = require('objectwatchers').ObjectWatcher;
  
  /**
   * Object Watcher Rxjs Subject Example code
   */
  
  let testObject = {
      name: 'this is name'
  }
  
  console.log('original testObject is: ', testObject);
  
  //Make Object Watcher
  const testWatcher = new ObjectWatcher(testObject);
  //Getting proxy object, original object convert to proxy object
  testObject = testWatcher.proxy;
  
  /**
   * subscribe valueChangeSubject
   * this occur before object property value is changed
   */
  testWatcher.valueChangeSubject.subscribe((data) => {
    
  })
  
  /**
   * subscribe propChangeSubject
   * this occur before object property is added
   */
  testWatcher.propChangeSubject.subscribe((data) => {
    
  })
  
  //try change object property value
  testObject.name = 'this is name2';
  
  //try add object property
  testObject['name2'] = 'this is name2';
  
  
  testWatcher.propDeleteSubject.subscribe( (data: any) => {
      
  });
  delete testObject['obj']['namesss2']

  • Array Value and Order change watch

   const ObjectWatcher = require('objectwatchers').ObjectWatcher;
  
  /**
   * Object Watcher Rxjs Subject Example code
   */
  let testArray = [1,2,3,5,4,8,7,9];
  //Make Object Watcher
  const testArrayWatcher = new ObjectWatcher(testArray);
  
  //Getting proxy object, original object convert to proxy object
  testArray = testArrayWatcher.proxy;
  console.log(`original array is ${testArray}`);
  
  /**
   * subscribe valueChangeSubject
   * this occur before array property value is changed
   */
  testArrayWatcher.valueChangeSubject.subscribe( (data) => {
        
  });
  
  /**
   * subscribe propChangeSubject
   * this occur before array property value is changed
   */
  testArrayWatcher.propChangeSubject.subscribe( (data) => {
    
  });
  
  /**
   * subscribe propChangeSubject
   * this occur before array order is changed
   */
  testArrayWatcher.orderChangerSubject.subscribe( (data) => {
    
  });
  
  testArray = testArray.sort();
  testArray.push(100);
  

• Global Value change watch(only for web browser)

  
  <head>
      <script src="../../dist/lib.bundle.umd.js"></script>
  </head>
  
  test = 'james.eo';
  const gWatcher = new GlobalLiteralWatcher();
        
  gWatcher.watch();
  
  gWatcher.valueChangeSubject.subscribe( (data) => {
    
  })
  
  window.addEventListener('onGlobalVarChange', (data) => {
        
  });
    
  test = 'james.eo2';