ES6 Proxies , Observable , change tracking , deep / plain

es6Proxies_TypeScript_labs.ts

export class ProxyWrapperBase {
        constructor() {
        }
        onChange(target: Object, key: PropertyKey, newValue: any, oldValue: any){

        }
}


export class Vector extends ProxyWrapperBase{
        x:number
        y:number
        z: number
        constructor(x,y,z){
                super();
                this.x = x;
                this.y = y;
                this.z = z;
        }

        private getCoods():any{
                        return {
                                x: this.x, y: this.y, z: this.z
                        }
        }

        onChange(target: any, key, newValue, oldValue){
                         console.log("coods is = ",this.getCoods())
        }
        
}

export class MyTest extends ProxyWrapperBase  {
        public x: number
        public y: number
        public name: string;
        public skills: Array<string>;
        public coord: Vector

        constructor() {
                super();
                this.x = 1;
                this.skills = new Array<string>();
                this.skills.push("foo");
                this.coord = new Vector(-1,-1,-1);
               

        }
        public sum() {
                return this.x + this.y;
        }

         onChange(target: any, key, newValue, oldValue){
                          console.log(key + "=" + newValue + ", old was " + oldValue);
                 }

       
}



export class ProxyWrapperHandler<T> implements ProxyHandler<T>{
        constructor() {
        }
}

export class ProxyWrapper<T extends ProxyWrapperBase> {
        private proxyHandler: ProxyHandler<T>;
        constructor(private instance) {
                this.proxyHandler = new ProxyWrapperHandler<T>()
                this.proxyHandler.set = (target:T, key:PropertyKey, value:any, receiver:any) => {
                        const oldValue = Reflect.get(target, key, receiver)
                        if(Reflect.has(target,"onChange"))
                         target.onChange(target, key, value, oldValue);
                        return Reflect.set(target, key, value, receiver)
                }
                this.proxyHandler.get = (target:T, key:PropertyKey, receiver:any) => {
                        const result = Reflect.get(target, key, receiver)
                        if(result instanceof Object){
                                let wrapper =  new ProxyWrapper(result);
                                return wrapper.getNew();
                        }
                        return result;
                }
        }
        getNew(): T {
                return new Proxy<T>(this.instance, this.proxyHandler);
        }
}

let proxyWrapper = new ProxyWrapper<MyTest>(new MyTest());
let instance = proxyWrapper.getNew();


instance.x = 100;

instance.skills.push("bar");

console.log("skills len = ", instance.skills.length);



instance.coord.x = 1000;


console.log(JSON.stringify(instance));

// let random = () => {
//         return Math.random().toString(36);
// }

// console.time("foo Random");
// for(var i = 0; i < 200;i++){
//         let rnd = random();
      
//         instance.x = i;
//         instance.y = i;
//         console.log(instance.sum());
//      //   console.log(instance.foo);

// }
// console.log("\n");
// console.timeEnd("foo Random");


// console.log("\n");
// console.log("numOfChanges=" + numOfChanges);
// console.log("\n");
// console.log(instance.sum());


// instance.sum();



//instance.likes = new Array<string>();

//instance.foo = "bar";

//console.log(instance.foo);


//instance.att.push("foo");instance.att.push("bar");

// let a = instance.sum();

// console.log("instance .sum() = ",a);



//console.log("serialized",JSON.stringify(instance));