Angular AOT Build

package.json

@@ -72,21 +72,24 @@
     "crypto": "0.0.3",
     "d3": "4.5.0",
     "immutable": "3.7.6",
-    "ramda": "0.24.1",
+    "ramda": "0.25.0",
     "redux": "3.7.2",
     "redux-logger": "3.0.6",
     "redux-observable": "0.17.0",
     "rxjs": "5.5.5",
     "zone.js": "0.8.18"
   },
   "devDependencies": {
+    "@angular/compiler-cli": "5.1.2",
+    "@ngtools/webpack": "1.10.2",
     "@types/chrome": "0.0.38",
     "@types/clone": "0.1.30",
     "@types/d3": "4.4.1",
     "@types/d3-hierarchy": "1.0.4",
     "@types/d3-selection": "1.0.9",
     "@types/d3-shape": "1.0.7",
     "@types/node": "7.0.5",
+    "@types/ramda": "0.25.21",
     "@types/redux-logger": "3.0.0",
     "@types/tape": "4.2.28",
     "autoprefixer": "6.3.6",
@@ -101,7 +104,7 @@
     "es6-promise": "4.0.5",
     "es6-shim": "0.35.0",
     "file-loader": "1.1.11",
-    "merge-jsons-webpack-plugin": "^1.0.12",
+    "merge-jsons-webpack-plugin": "1.0.14",
     "msgpack-lite": "0.1.20",
     "postcss-cssnext": "2.5.2",
     "postcss-import": "9.1.0",
@@ -118,7 +121,7 @@
     "ts-loader": "4.2.0",
     "tslint": "5.4.3",
     "tslint-loader": "3.6.0",
-    "typescript": "2.3.4",
+    "typescript": "2.4.2",
     "url-loader": "1.0.1",
     "webpack": "4.5.0",
     "webpack-bundle-analyzer": "^2.11.1",

src/backend/indirect-connection.ts

@@ -2,13 +2,13 @@ import {
   Message,
   MessageFactory,
   messageJumpContext,
+  DispatchHandler,
   browserSubscribeResponse,
 } from '../communication';
 
 export const send = <Response, T>(message: Message<T>): Promise<Response> => {
   return new Promise((resolve, reject) => {
-    browserSubscribeResponse(message.messageId, response => resolve(response));
+    browserSubscribeResponse(message.messageId, <DispatchHandler>(response => resolve(<any>response)));
     messageJumpContext(MessageFactory.dispatchWrapper(message));
   });
 };
-

src/communication/message-dispatch.ts

@@ -52,7 +52,7 @@ export const browserSubscribeOnce = (messageType: MessageType, handler: Dispatch
     }
   };
 
-  const subscription = browserSubscribe(messageHandler);
+  const subscription = browserSubscribe(<DispatchHandler>messageHandler);
 };
 
 export const browserSubscribeResponse = (messageId: string, handler: DispatchHandler) => {
@@ -70,7 +70,7 @@ export const browserSubscribeResponse = (messageId: string, handler: DispatchHan
     }
   };
 
-  const subscription = browserSubscribe(messageHandler);
+  const subscription = browserSubscribe(<DispatchHandler>messageHandler);
 };
 
 export const browserUnsubscribe = (handler: DispatchHandler) =>
@@ -117,4 +117,3 @@ window.addEventListener('message',
       browserDispatch(event.data);
     }
   });
-

src/content-script.ts

@@ -2,6 +2,7 @@ import {
   Message,
   MessageFactory,
   MessageType,
+  DispatchHandler,
   messageJumpContext,
   browserSubscribeDispatch,
   browserSubscribeOnce,
@@ -45,7 +46,7 @@ export const injectSettings = (options: SimpleOptions) => {
 
 if (document instanceof HTMLDocument) {
   browserSubscribeOnce(MessageType.FrameworkLoaded,
-    () => {
+    <DispatchHandler>(() => {
       loadOptions().then(options => {
         // We want to load the tree rendering options that the UI has saved
         // because that allows us to send the correct tree immediately upon
@@ -60,9 +61,9 @@ if (document instanceof HTMLDocument) {
       });
 
       return true;
-    });
+    }));
 
-  browserSubscribeDispatch((message: any) => {
+  browserSubscribeDispatch(<DispatchHandler>((message: any) => {
     if (message.messageType === MessageType.DispatchWrapper) {
       send(message.content)
         .then(response => {
@@ -72,7 +73,7 @@ if (document instanceof HTMLDocument) {
           messageJumpContext(MessageFactory.response(message, error, false));
         });
     }
-  });
+  }));
 
   subscribe((message: Message<any>) => messageJumpContext(message));
 
@@ -86,9 +87,9 @@ if (document instanceof HTMLDocument) {
 
   const propertyKey = '$$el';
   const warningText = `$$el will only be set in the 'top' execution context, \
-which you can select via the dropdown in the console pane \
-(https://developers.google.com/web/tools/chrome-devtools/console/\
-#execution-context).`;
+    which you can select via the dropdown in the console pane \
+    (https://developers.google.com/web/tools/chrome-devtools/console/\
+    #execution-context).`;
 
   Object.defineProperty(window, propertyKey, {value: warningText});
 }

src/frontend/app.ts

@@ -41,6 +41,7 @@ import {
   Path,
   deserializeChangePath,
   serializePath,
+  InstanceWithMetadata,
 } from '../tree';
 
 import {createTree} from '../tree/mutable-tree-factory';
@@ -55,8 +56,8 @@ require('!style!css!postcss!../styles/app.css');
 
 @Component({
   selector: 'bt-app',
-  template: require('./app.html'),
-  styles: [require('to-string!./app.css')],
+  templateUrl: './app.html',
+  styleUrls: ['./app.css'],
 })
 export class App {
   private Theme = Theme;
@@ -110,7 +111,7 @@ export class App {
 
   }
 
-  private hasContent() {
+  hasContent() {
     return this.tree &&
       this.tree.roots &&
       this.tree.roots.length > 0;
@@ -286,7 +287,7 @@ export class App {
           componentMetadata,
         } = response;
 
-        return {
+        return <InstanceWithMetadata>{
           instance,
           providers,
           metadata: new Map(metadata),

src/frontend/channel/connection.ts

@@ -23,7 +23,7 @@ const post = <T>(message: Message<T>) =>
       tabId: chrome.devtools.inspectedWindow.tabId,
     }));
 
-export const reconnect = (): Promise<void> => {
+export const reconnect = (): Promise<Response> => {
   if (connection) {
     return Promise.resolve(void 0);
   }
@@ -76,7 +76,7 @@ export const reconnect = (): Promise<void> => {
     catch (e) {}
   };
 
-  return new Promise<void>(resolve => {
+  return new Promise<Response>(resolve => {
     try {
       connect(resolve);
       return;
@@ -122,7 +122,7 @@ export const send = <Response, T>(message: Message<T>): Promise<Response> => {
 
 @Injectable()
 export class Connection {
-  reconnect(): Promise<void> {
+  reconnect(): Promise<Response> {
     if (connection == null) { // disconnected?
       return reconnect();
     }
@@ -134,11 +134,10 @@ export class Connection {
   }
 
   send<Response, T>(message: Message<T>): Promise<Response> {
-    return reconnect().then(() => send(message));
+    return reconnect().then(() => <Promise<Response>>send(message));
   }
 
   close() {
     subscriptions.clear();
   }
 }
-

src/frontend/components/accordion/accordion.ts

@@ -2,22 +2,22 @@ import {Component, Input} from '@angular/core';
 
 @Component({
   selector: 'accordion',
-  template: require('./accordion.html'),
+  templateUrl: './accordion.html',
 })
 export class Accordion {
-  @Input() private sectionTitle: string;
+  @Input() sectionTitle: string;
   @Input() private defaultExpanded: boolean;
 
-  private expansionState: boolean = null;
+  expansionState: boolean = null;
 
-  private get expanded(): boolean {
+  get expanded(): boolean {
     if (this.expansionState == null) {
       return this.defaultExpanded;
     }
     return this.expansionState;
   }
 
-  private set expanded(v: boolean) {
+  set expanded(v: boolean) {
     this.expansionState = v;
   }
 }

src/frontend/components/analytics-popup/analytics-popup.ts

@@ -14,15 +14,15 @@ import {
 
 @Component({
   selector: 'bt-analytics-popup',
-  template: require('./analytics-popup.html'),
+  templateUrl: './analytics-popup.html',
 })
 export class AnalyticsPopup {
-  private AnalyticsConsent = AnalyticsConsent;
+  AnalyticsConsent = AnalyticsConsent;
   @Input() private options: Options;
 
   @Output() private hideComponent = new EventEmitter<void>();
 
-  private onAnalyticsConsentChange = (analyticsConsent: AnalyticsConsent) => {
+  onAnalyticsConsentChange = (analyticsConsent: AnalyticsConsent) => {
     this.options.analyticsConsent = analyticsConsent;
     this.hideComponent.emit();
   }

src/frontend/components/app-trees/app-trees.ts

@@ -24,7 +24,7 @@ type Node = any;
 
 @Component({
   selector: 'bt-app-trees',
-  template: require('./app-trees.html'),
+  templateUrl: './app-trees.html',
   host: {
     '(document:click)': 'resetIfSettingOpened($event)'
   },
@@ -39,43 +39,43 @@ type Node = any;
 })
 export class AppTrees {
   private ComponentView = ComponentView;
-  private Tab = Tab;
+  Tab = Tab;
   private Theme = Theme;
   private AnalyticsConsent = AnalyticsConsent;
 
-  @Input() private ngVersion: String;
-  @Input() private componentState: ComponentInstanceState;
+  @Input() ngVersion: String;
+  @Input() componentState: ComponentInstanceState;
   @Input() private options: Options;
-  @Input() private routerTree: Array<Route>;
-  @Input() private tree: Array<Node>;
-  @Input() private ngModules: {[key: string]: any};
+  @Input() routerTree: Array<Route>;
+  @Input() tree: Array<Node>;
+  @Input() ngModules: {[key: string]: any};
 
-  @Input() private selectedNode: Node;
+  @Input() selectedNode: Node;
   @Input() private selectedRoute: Route;
-  @Input() private selectedTab: Tab;
-  @Input() private selectedComponentsSubTab: StateTab;
-  @Input() private domSelectionActive: boolean;
-
-  @Output() private collapseChildren = new EventEmitter<Node>();
-  @Output() private expandChildren = new EventEmitter<Node>();
-  @Output() private inspectElement = new EventEmitter<Node>();
-  @Output() private selectNode = new EventEmitter<Node>();
+  @Input() selectedTab: Tab;
+  @Input() selectedComponentsSubTab: StateTab;
+  @Input() domSelectionActive: boolean;
+
+  @Output() collapseChildren = new EventEmitter<Node>();
+  @Output() expandChildren = new EventEmitter<Node>();
+  @Output() inspectElement = new EventEmitter<Node>();
+  @Output() selectNode = new EventEmitter<Node>();
   @Output() private tabChange = new EventEmitter<Tab>();
-  @Output() private componentsSubTabMenuChange = new EventEmitter<StateTab>();
+  @Output() componentsSubTabMenuChange = new EventEmitter<StateTab>();
 
   @Output() private domSelectionActiveChange = new EventEmitter<boolean>();
 
-  @Output() private emitValue = new EventEmitter<{path: Path, data: any}>();
-  @Output() private updateProperty = new EventEmitter<{path: Path, newValue: any}>();
+  @Output() emitValue = new EventEmitter<{path: Path, data: any}>();
+  @Output() updateProperty = new EventEmitter<{path: Path, newValue: any}>();
 
   @ViewChild('splitPane') private splitPane;
   @ViewChild('menuButtonElement') private menuButtonElement;
   @ViewChild('menuElement') private menuElement;
 
-  private settingOpened: boolean = false;
-  private showAnalyticsConsent: boolean = false;
+  settingOpened: boolean = false;
+  showAnalyticsConsent: boolean = false;
 
-  private tabs: Array<TabDescription> = [{
+  tabs: Array<TabDescription> = [{
     title: 'Component Tree',
     tab: Tab.ComponentTree,
   }, {
@@ -115,7 +115,7 @@ export class AppTrees {
     }
   }
 
-  private onOpenSettings = () => {
+  onOpenSettings = () => {
     this.settingOpened = !this.settingOpened;
   }
 

src/frontend/components/component-info/component-info.ts

@@ -24,10 +24,10 @@ import {UserActions} from '../../actions/user-actions/user-actions';
 
 @Component({
   selector: 'bt-component-info',
-  template: require('./component-info.html'),
+  templateUrl: './component-info.html',
 })
 export class ComponentInfo {
-  @Input() private node: Node;
+  @Input() node: Node;
   @Input() private tree: MutableTree;
   @Input() private state;
   @Input() private providers: Array<any>;
@@ -53,27 +53,27 @@ export class ComponentInfo {
     }
   }
 
-  private get hasState() {
+  get hasState() {
     if (this.node == null || this.state == null) {
       return false;
     }
 
     return Object.keys(this.state).length > 0;
   }
 
-  private get hasDirectives() {
+  get hasDirectives() {
     return this.node &&
       this.node.directives &&
       this.node.directives.length > 0;
   }
 
-  private get hasDependencies() {
+  get hasDependencies() {
     return this.node &&
       this.node.dependencies &&
       this.node.dependencies.length > 0;
   }
 
-  private get hasInstanceProviders() {
+  get hasInstanceProviders() {
     return this.providers && this.providers.length > 0;
   }