JiaLiPassion

var zoneA = Zone.current.fork({name: 'zoneA'});

function callback() {
  // Javascript engine context 2
  // Zone Context: zoneA
  
  // we can access the async execution context by call Zone.current
  console.log('ctx', Zone.current.name); // will be zoneA 
}

JiaLiPassion

Zone.prototype.wrap = function(callback) {
  var zone = Zone.current; // keep zone context
  return function() {
    return zone.run(callback, this, arguments); // zone.run will make sure callback run into zone
  }
}

JiaLiPassion

var zoneA = Zone.current.fork({name: 'zoneA'});

function callback() {
  console.log('callback is invoked in context', Zone.current.name); 
}

zoneA.run(function() {
  console.log('I am in context', Zone.current.name); 
  setTimeout(zoneA.wrap(callback), 100);
});

JiaLiPassion

var currentZoneFrame = {zone: root, parent: null};
class Zone {
  static get current() {
    return currentZoneFrame.zone; 
  }

  run(callback, applyThis, applyArgs) {
    _currentZoneFrame = {parent: _currentZoneFrame, zone: this};
    try {
      return callback.apply(applyThis, applyArgs);

JiaLiPassion

var zoneA = Zone.current.fork({name: 'zoneA'});

function callback() {
  // _currentZoneFrame: {zone: zoneA, parent: rootZoneFrame}
  console.log('callback is invoked in context', Zone.current.name); 
}

// _currentZoneFrame = rootZoneFrame = {zone: root, parent: null}
zoneA.run(function() {
  // _currentZoneFrame: {zone: zoneA, parent: rootZoneFrame}

JiaLiPassion

var originalDelegate = window.setTimeout;
window.setTimeout = function(callback, delay) {
  var zone = Zone.current;
  originalDelegate.call(window, function() {
    zone.run(callback);
  }, delay);
}

JiaLiPassion

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @Output() highlight = new EventEmitter<string>();
  click() {
    this.highlight.emit('highlight');
  }

JiaLiPassion

async function detect() { }
const r = detect();
const nativeThen = r.__proto__.then;
r.__proto__.then = function () {
  console.log('promise.then');
  return nativeThen.apply(this, arguments);
}

async function test1() {
  console.log('before await');

JiaLiPassion

var zone = Zone.current.fork({
  name: 'hook',
  onScheduleTask(delegate, current, target, task) {
    console.log('schedule ZoneTask', task.type, task.source);
    return delegate.scheduleTask(target, task);
  },
  onInvokeTask(delegate, current, target, task, applyThis, applyArgs) {
    console.log('invoke ZoneTask', task.type, task.source);
    return delegate.invokeTask(target, task, applyThis, applyArgs);
  },

JiaLiPassion

var originalDelegate = window.setTimeout;
window.setTimeout = function(callback, delay) {
  var zone = Zone.current;
  var task = {
    zone: zone,
    type: 'macroTask',
    source: 'setTimeout',
    data: {
      delay: delay
    },