Angular2: NgProbe Design

example.ts

// https://gist.github.com/mhevery/4b1bdb59a8c16f9cbe76


/// <reference path="probe.d.ts" />

///////////////////////
/// WORK IN PROGRESS //
///////////////////////

var appRef: ApplicationRef = ng.platform.applications[0];

// To force Change Detection
appRef.tick();

// To get a hold of spcefic component

var settings: Probe = appRef.probe('app-cmp > settings');
var user: BindingSet = settings.binding('user');

probe.d.ts

// https://gist.github.com/mhevery/4b1bdb59a8c16f9cbe76

///////////////////////
/// WORK IN PROGRESS //
///////////////////////


declare module ng {
  var platform: Platform;  
}

interface Platform {
  applications: ApplicationRef[];
}

interface ApplicationRef {
  tick(): void;
  
  /**
   * selector is a simple CSS selector combined with
   * concatinators which allows easy traversal of the 
   * View tree.
   * 
   * NOTE: this selects over logical components not over  
   * (some CSS langugae which would be easy to implement
   * and allows us to walk the tree)
   * 
   * concatinators
   * - ' ' (space) recursive content/view descendant
   * - `>` direct content/view descendant
   * - `:view` direct view
   * 
   * # examples
   * 
   * `app-comp calendar:view`
   * 
   */
  probe(selector: string): Probe;
}

interface Probe {
  binding(selector: string): BindingSet;
}

interface BindingSet {
  value: any[];
}

requirements.md

Constraints

latest gist

WebWorkers

The API must be on the web-worker side, and must not depend on DOM. It is not even clear if there even is a DOM, in the case of Native UI.

Shadow DOM & Selectors

Shadow DOM and selectors are tricky since they can not be used with querySelector. (It does not pierce shadow DOM boundries) For this reason it is better not to rely on the querySelector at all and have a query mechanism of a tree. A custom query mechanism would be compatible with Native UI / WebWorkers.