refactor(benchmarks): refactor to support AOT bootstrap in G3 (#12075)

modules/benchmarks/src/bootstrap_plain.ts

@@ -20,7 +20,9 @@
     });
 
     // BOOTSTRAP the app!
-    System.import('index').then(function(m: any) { m.main(); }, console.error.bind(console));
+    System.import('index').then(function(m: any) {
+      m.main && m.main();
+    }, console.error.bind(console));
   }
 
   function writeScriptTag(scriptUrl: string, onload?: string) {

modules/benchmarks/src/largetable/baseline/index.html

@@ -22,9 +22,13 @@
   </p>
 
   <div>
-    <largetable id="root"></largetable>
+    <largetable id="root">Loading...</largetable>
   </div>
 
-  <script src="../../bootstrap_plain.js"></script>
+  <script>
+    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
+      || '../../bootstrap_plain.js';
+    document.write('<script src="' + mainUrl + '">\u003c/script>');
+  </script>
 </body>
 </html>

modules/benchmarks/src/largetable/baseline/index.ts

@@ -2,24 +2,28 @@ import {bindAction, profile} from '../../util';
 import {buildTable, emptyTable} from '../util';
 import {TableComponent} from './table';
 
-export function main() {
+var table: TableComponent;
-  var table: TableComponent;
 
-  function destroyDom() { table.data = emptyTable; }
+function destroyDom() {
-
+  table.data = emptyTable;
-  function createDom() { table.data = buildTable(); }
-
-  function noop() {}
-
-  function init() {
-    table = new TableComponent(document.querySelector('largetable'));
-
-    bindAction('#destroyDom', destroyDom);
-    bindAction('#createDom', createDom);
-
-    bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
-    bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
-  }
-
-  init();
 }
+
+function createDom() {
+  table.data = buildTable();
+}
+
+function noop() {}
+
+function init() {
+  const rootEl = document.querySelector('largetable');
+  rootEl.textContent = '';
+  table = new TableComponent(rootEl);
+
+  bindAction('#destroyDom', destroyDom);
+  bindAction('#createDom', createDom);
+
+  bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
+  bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
+}
+
+init();

modules/benchmarks/src/largetable/ng2/index.html

@@ -22,9 +22,13 @@
   </p>
 
   <div>
-    <largetable id="root"></largetable>
+    <largetable id="root">Loading...</largetable>
   </div>
 
-  <script src="../../bootstrap_ng2.js"></script>
+  <script>
+    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
+      || '../../bootstrap_ng2.js';
+    document.write('<script src="' + mainUrl + '">\u003c/script>');
+  </script>
 </body>
 </html>

modules/benchmarks/src/largetable/ng2/index.ts

@@ -1,40 +1,10 @@
-import {ApplicationRef, enableProdMode} from '@angular/core';
+import {enableProdMode} from '@angular/core';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
-import {bindAction, profile} from '../../util';
+import {init} from './init';
-import {buildTable, emptyTable} from '../util';
+import {AppModule} from './table';
-
-import {AppModule, TableComponent} from './table';
 
 export function main() {
-  var table: TableComponent;
+  enableProdMode();
-  var appRef: ApplicationRef;
+  platformBrowserDynamic().bootstrapModule(AppModule).then(init);
-
-  function destroyDom() {
-    table.data = emptyTable;
-    appRef.tick();
-  }
-
-  function createDom() {
-    table.data = buildTable();
-    appRef.tick();
-  }
-
-  function noop() {}
-
-  function init() {
-    enableProdMode();
-    platformBrowserDynamic().bootstrapModule(AppModule).then((ref) => {
-      var injector = ref.injector;
-      appRef = injector.get(ApplicationRef);
-
-      table = appRef.components[0].instance;
-      bindAction('#destroyDom', destroyDom);
-      bindAction('#createDom', createDom);
-      bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
-      bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
-    });
-  }
-
-  init();
 }

modules/benchmarks/src/largetable/ng2/init.ts

@@ -0,0 +1,32 @@
+import {ApplicationRef, NgModuleRef} from '@angular/core';
+
+import {bindAction, profile} from '../../util';
+import {buildTable, emptyTable} from '../util';
+
+import {AppModule, TableComponent} from './table';
+
+export function init(moduleRef: NgModuleRef<AppModule>) {
+  let table: TableComponent;
+  let appRef: ApplicationRef;
+
+  function destroyDom() {
+    table.data = emptyTable;
+    appRef.tick();
+  }
+
+  function createDom() {
+    table.data = buildTable();
+    appRef.tick();
+  }
+
+  function noop() {}
+
+  const injector = moduleRef.injector;
+  appRef = injector.get(ApplicationRef);
+
+  table = appRef.components[0].instance;
+  bindAction('#destroyDom', destroyDom);
+  bindAction('#createDom', createDom);
+  bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
+  bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
+}

modules/benchmarks/src/largetable/ng2_switch/index.html

@@ -22,9 +22,13 @@
   </p>
 
   <div>
-    <largetable id="root"></largetable>
+    <largetable id="root">Loading...</largetable>
   </div>
 
-  <script src="../../bootstrap_ng2.js"></script>
+  <script>
+    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
+      || '../../bootstrap_ng2.js';
+    document.write('<script src="' + mainUrl + '">\u003c/script>');
+  </script>
 </body>
 </html>

modules/benchmarks/src/largetable/ng2_switch/index.ts

@@ -1,40 +1,10 @@
-import {ApplicationRef, enableProdMode} from '@angular/core';
+import {enableProdMode} from '@angular/core';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
-import {bindAction, profile} from '../../util';
+import {init} from './init';
-import {buildTable, emptyTable} from '../util';
+import {AppModule} from './table';
-
-import {AppModule, TableComponent} from './table';
 
 export function main() {
-  var table: TableComponent;
+  enableProdMode();
-  var appRef: ApplicationRef;
+  platformBrowserDynamic().bootstrapModule(AppModule).then(init);
-
-  function destroyDom() {
-    table.data = emptyTable;
-    appRef.tick();
-  }
-
-  function createDom() {
-    table.data = buildTable();
-    appRef.tick();
-  }
-
-  function noop() {}
-
-  function init() {
-    enableProdMode();
-    platformBrowserDynamic().bootstrapModule(AppModule).then((ref) => {
-      var injector = ref.injector;
-      appRef = injector.get(ApplicationRef);
-
-      table = appRef.components[0].instance;
-      bindAction('#destroyDom', destroyDom);
-      bindAction('#createDom', createDom);
-      bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
-      bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
-    });
-  }
-
-  init();
 }

modules/benchmarks/src/largetable/ng2_switch/init.ts

@@ -0,0 +1,32 @@
+import {ApplicationRef, NgModuleRef} from '@angular/core';
+
+import {bindAction, profile} from '../../util';
+import {buildTable, emptyTable} from '../util';
+
+import {AppModule, TableComponent} from './table';
+
+export function init(moduleRef: NgModuleRef<AppModule>) {
+  let table: TableComponent;
+  let appRef: ApplicationRef;
+
+  function destroyDom() {
+    table.data = emptyTable;
+    appRef.tick();
+  }
+
+  function createDom() {
+    table.data = buildTable();
+    appRef.tick();
+  }
+
+  function noop() {}
+
+  const injector = moduleRef.injector;
+  appRef = injector.get(ApplicationRef);
+
+  table = appRef.components[0].instance;
+  bindAction('#destroyDom', destroyDom);
+  bindAction('#createDom', createDom);
+  bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
+  bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
+}

modules/benchmarks/src/tree/baseline/index.html

@@ -19,9 +19,13 @@
   </p>
 
   <div>
-    <tree id="root"></tree>
+    <tree id="root">Loading...</tree>
   </div>
 
-  <script src="../../bootstrap_plain.js"></script>
+  <script>
+    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
+      || '../../bootstrap_plain.js';
+    document.write('<script src="' + mainUrl + '">\u003c/script>');
+  </script>
 </body>
 </html>

modules/benchmarks/src/tree/baseline/index.ts

@@ -2,24 +2,28 @@ import {bindAction, profile} from '../../util';
 import {buildTree, emptyTree} from '../util';
 import {TreeComponent} from './tree';
 
-export function main() {
+var tree: TreeComponent;
-  var tree: TreeComponent;
 
-  function destroyDom() { tree.data = emptyTree; }
+function destroyDom() {
-
+  tree.data = emptyTree;
-  function createDom() { tree.data = buildTree(); }
-
-  function noop() {}
-
-  function init() {
-    tree = new TreeComponent(document.querySelector('tree'));
-
-    bindAction('#destroyDom', destroyDom);
-    bindAction('#createDom', createDom);
-
-    bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
-    bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
-  }
-
-  init();
 }
+
+function createDom() {
+  tree.data = buildTree();
+}
+
+function noop() {}
+
+function init() {
+  const rootEl = document.querySelector('tree');
+  rootEl.textContent = '';
+  tree = new TreeComponent(rootEl);
+
+  bindAction('#destroyDom', destroyDom);
+  bindAction('#createDom', createDom);
+
+  bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
+  bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
+}
+
+init();

modules/benchmarks/src/tree/ng2/index.html

@@ -19,9 +19,13 @@
   </p>
 
   <div>
-    <tree id="root"></tree>
+    <tree id="root">Loading...</tree>
   </div>
 
-  <script src="../../bootstrap_ng2.js"></script>
+  <script>
+    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
+      || '../../bootstrap_ng2.js';
+    document.write('<script src="' + mainUrl + '">\u003c/script>');
+  </script>
 </body>
 </html>

modules/benchmarks/src/tree/ng2/index.ts

@@ -1,40 +1,10 @@
-import {ApplicationRef, enableProdMode} from '@angular/core';
+import {enableProdMode} from '@angular/core';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
-import {bindAction, profile} from '../../util';
+import {init} from './init';
-import {buildTree, emptyTree} from '../util';
+import {AppModule} from './tree';
-
-import {AppModule, TreeComponent} from './tree';
 
 export function main() {
-  var tree: TreeComponent;
+  enableProdMode();
-  var appRef: ApplicationRef;
+  platformBrowserDynamic().bootstrapModule(AppModule).then(init);
-
-  function destroyDom() {
-    tree.data = emptyTree;
-    appRef.tick();
-  }
-
-  function createDom() {
-    tree.data = buildTree();
-    appRef.tick();
-  }
-
-  function noop() {}
-
-  function init() {
-    enableProdMode();
-    platformBrowserDynamic().bootstrapModule(AppModule).then((ref) => {
-      var injector = ref.injector;
-      appRef = injector.get(ApplicationRef);
-
-      tree = appRef.components[0].instance;
-      bindAction('#destroyDom', destroyDom);
-      bindAction('#createDom', createDom);
-      bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
-      bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
-    });
-  }
-
-  init();
 }

modules/benchmarks/src/tree/ng2/init.ts

@@ -0,0 +1,32 @@
+import {ApplicationRef, NgModuleRef} from '@angular/core';
+
+import {bindAction, profile} from '../../util';
+import {buildTree, emptyTree} from '../util';
+
+import {AppModule, TreeComponent} from './tree';
+
+export function init(moduleRef: NgModuleRef<AppModule>) {
+  let tree: TreeComponent;
+  let appRef: ApplicationRef;
+
+  function destroyDom() {
+    tree.data = emptyTree;
+    appRef.tick();
+  }
+
+  function createDom() {
+    tree.data = buildTree();
+    appRef.tick();
+  }
+
+  function noop() {}
+
+  const injector = moduleRef.injector;
+  appRef = injector.get(ApplicationRef);
+
+  tree = appRef.components[0].instance;
+  bindAction('#destroyDom', destroyDom);
+  bindAction('#createDom', createDom);
+  bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
+  bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
+}