## Monkey patching common browser APIs

Here is an example of how browser APIs could be patched to take advantage of Zone propagation.

### `setTimeout`

Ideally we would not need to do this, since the browser would do this for us.

```javascript
window.setTimeout = ((delegate) => {
  return function (fn, delay, var_args) {
     arguments[0] = Zone.current.wrap(fn, 'setTimeout');
     return delegate.apply(this, arguments);
  };
})(window.setTimeout);
```


### `Promise.prototype.then`

Ideally we would not need to do this, since the Promise would do this for us. It could do this
more efficiently by storing the `Zone`, and then invoking the callback using `zone.run(...)`

```javascript
window.Promise.prototype.then = ((then) => {
  return function (onResolve, onError) {
     // Wrap callbacks without error handling.
     arguments[0] = Zone.current.wrap(onResolve, 'Promise.then.onResolve', false);
     arguments[0] = Zone.current.wrap(onError, 'Promise.then.onError', false);
     return then.apply(this, arguments);
  };
})(window.Promise.prototype.then);
```


### `addEventListener`

Ideally we would not need to do this, since the browser would do this for us.

```javascript
window.EventTarget.prototype.addEventListener = ((addEventListener) => {
  return function (eventName, handler, capture) {
     // Wrap callbacks without error handling.
     arguments[1] = Zone.current.wrap(handler, 'EventTarget.addEventListener');
     return addEventListener.apply(this, arguments);
  };
})(window.EventTarget.prototype.addEventListener);
```


## Framework auto rendering

(Assuming that the browser / Promises propagate Zones)

In this example we have two applications on a page written with two frameworks, and we want to make
sure that the right framework gets notified when the correct operation happens.

```javascript
var frameworkAZone = Zone.current.fork({
  name: 'frameworkA',
  onInvoke: (self, parent, zone, callback, applyThis, applyArgs) => {
    try {
      return parent.invoke(callback, applyThis, applyArgs);
    } finally {
      frameworkAMayNeedRendering();
    }
  }
})

var frameworkBZone = Zone.current.fork({
  name: 'frameworkB',
  onInvoke: (self, parent, zone, callback, applyThis, applyArgs) => {
    try {
      return parent.invoke(callback, applyThis, applyArgs);
    } finally {
      frameworkBMayNeedRendering();
    }
  }
})

frameworkAZone.run(() => {
  bootstrapApplicationA();
});


frameworkAZone.run(() => {
  bootstrapApplicationB();
});

setInterval(() => {
  expect(Zone.current.name, '<root>');
  updateSomeThingNotPartOfApplication();
}, 100);


function bootstrapApplicationA() {
  expect(Zone.current, frameworkAZone);
  someDiv.addEventListener('click', (event) => {
    expect(Zone.current, frameworkAZone);
    setTimeout(() => {
      expect(Zone.current, frameworkAZone);
      new Promise().then(
        expect(Zone.current, frameworkAZone);
        // Set some value
        model.someProperty = 'New Value';
        // Expect that framework A will get notified of rendering.
      )
    }, 100);
  });
}

function bootstrapApplicationB() {
  expect(Zone.current, frameworkBZone);
  someDiv.addEventListener('click', (event) => {
    expect(Zone.current, frameworkBZone);
    setTimeout(() => {
      expect(Zone.current, frameworkBZone);
      new Promise().then(
        expect(Zone.current, frameworkBZone);
        // Set some value
        model.someProperty = 'New Value';
        // Expect that framework B will get notified of rendering.
      )
    }, 100);
  });
}


```