docs(cookbook/graphql): add a post-rollup script to copy statis assets

Author: Urigo

public/docs/_examples/heroes-graphql/ts/aot/bs-config.json

@@ -19,4 +19,4 @@
     <my-app>Loading...</my-app>
   </body>
   <script src="dist/build.js"></script>
-</html>
+</html>

public/docs/_examples/heroes-graphql/ts/aot/index.html

@@ -0,0 +1,116 @@
+/* #docregion , quickstart, toh */
+/* Master Styles */
+h1 {
+  color: #369;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 250%;
+}
+h2, h3 {
+  color: #444;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: lighter;
+}
+body {
+  margin: 2em;
+}
+/* #enddocregion quickstart */
+body, input[text], button {
+  color: #888;
+  font-family: Cambria, Georgia;
+}
+/* #enddocregion toh */
+a {
+  cursor: pointer;
+  cursor: hand;
+}
+button {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
+button:disabled {
+  background-color: #eee;
+  color: #aaa;
+  cursor: auto;
+}
+
+/* Navigation link styles */
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-right: 10px;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
+}
+nav a:visited, a:link {
+  color: #607D8B;
+}
+nav a:hover {
+  color: #039be5;
+  background-color: #CFD8DC;
+}
+nav a.active {
+  color: #039be5;
+}
+
+/* items class */
+.items {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 24em;
+}
+.items li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+.items li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+.items li.selected {
+  background-color: #CFD8DC;
+  color: white;
+}
+.items li.selected:hover {
+  background-color: #BBD8DC;
+}
+.items .text {
+  position: relative;
+  top: -3px;
+}
+.items .badge {
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0 0.7em;
+  background-color: #607D8B;
+  line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
+/* #docregion toh */
+/* everywhere else */
+* {
+  font-family: Arial, Helvetica, sans-serif;
+}

public/docs/_examples/heroes-graphql/ts/aot/styles.css

@@ -0,0 +1,14 @@
+{
+  "open": false,
+  "logLevel": "silent",
+  "port": 8080,
+  "server": {
+    "baseDir": "aot",
+    "routes": {
+      "/node_modules": "node_modules"
+    },
+    "middleware": {
+      "0": null
+    }
+  }
+}

public/docs/_examples/heroes-graphql/ts/bs-config.aot.json

@@ -1,10 +1,11 @@
 {
   "description": "Tour of Heroes: GraphQL",
+  "basePath": "src/",
   "files":[
     "!**/*.d.ts",
     "!**/*.js",
     "!**/*.[1,2].*",
     "systemjs.config.extras.js"
   ],
   "tags": ["tutorial", "tour", "heroes", "http", "GraphQL"]
-}
+}

public/docs/_examples/heroes-graphql/ts/plnkr.json

@@ -6,14 +6,24 @@ import uglify      from 'rollup-plugin-uglify'
 
 import builtins from 'rollup-plugin-node-builtins';
 import globals from 'rollup-plugin-node-globals';
-
 //paths are relative to the execution path
 export default {
-  entry: 'app/main-aot.js',
+  entry: 'src/main-aot.js',
   dest: 'aot/dist/build.js', // output a single application bundle
   sourceMap: true,
   sourceMapFile: 'aot/dist/build.js.map',
   format: 'iife',
+  onwarn: function(warning) {
+    // Skip certain warnings
+
+    // should intercept ... but doesn't in some rollup versions
+    if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
+    // intercepts in some rollup versions
+    if ( warning.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1 ) { return; }
+
+    // console.warn everything else
+    console.warn( warning.message );
+  },
   plugins: [
     nodeResolve({jsnext: true, module: true, browser: true}),
     commonjs({
@@ -41,4 +51,4 @@ export default {
     builtins(),
     uglify()
   ]
-}
+}

public/docs/_examples/heroes-graphql/ts/rollup-config.js

@@ -2,7 +2,7 @@
 import { Component, OnInit } from '@angular/core';
 
 // #docregion import-apollo
-import { Angular2Apollo } from 'apollo-angular';
+import { Apollo } from 'apollo-angular';
 // #enddocregion import-apollo
 // #docregion import-graphql-tag
 import gql from 'graphql-tag';
@@ -22,7 +22,7 @@ export class DashboardComponent implements OnInit {
   heroes: Hero[];
   // #enddocregion this-heroes
   // #docregion inject-apollo
-  constructor(private apollo: Angular2Apollo) { }
+  constructor(private apollo: Apollo) { }
   // #enddocregion inject-apollo
 
   // #docregion query-heroes

public/docs/_examples/heroes-graphql/ts/app/app-routing.module.ts renamed to public/docs/_examples/heroes-graphql/ts/src/app/app-routing.module.ts

@@ -3,7 +3,7 @@ import { Component, OnInit }      from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Location }               from '@angular/common';
 
-import { Angular2Apollo, ApolloQueryObservable } from 'apollo-angular';
+import { Apollo, ApolloQueryObservable } from 'apollo-angular';
 import { Subscription } from 'rxjs/Subscription';
 import gql from 'graphql-tag';
 
@@ -24,7 +24,7 @@ export class HeroDetailComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private location: Location,
-    private apollo: Angular2Apollo
+    private apollo: Apollo
   ) {}
 
   ngOnInit(): void {
@@ -47,7 +47,7 @@ export class HeroDetailComponent implements OnInit {
       // #enddocregion graphql-query-new-field
 
       this.heroSubscription = this.heroObservable.subscribe(({data}) => {
-        this.hero = data.hero;
+        this.hero = Object.assign({}, data.hero);
       });
     });
   }

public/docs/_examples/heroes-graphql/ts/app/app.component.css renamed to public/docs/_examples/heroes-graphql/ts/src/app/app.component.css

@@ -3,7 +3,7 @@ import { Component, OnInit }      from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Location }               from '@angular/common';
 
-import { Angular2Apollo, ApolloQueryObservable } from 'apollo-angular';
+import { Apollo, ApolloQueryObservable } from 'apollo-angular';
 import { Subscription } from 'rxjs/Subscription';
 import gql from 'graphql-tag';
 
@@ -25,7 +25,7 @@ export class HeroDetailComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private location: Location,
-    private apollo: Angular2Apollo
+    private apollo: Apollo
   ) {}
 
   // #docregion service-fetch-by-id
@@ -47,7 +47,7 @@ export class HeroDetailComponent implements OnInit {
       });
 
       this.heroSubscription = this.heroObservable.subscribe(({data}) => {
-        this.hero = data.hero;
+        this.hero = Object.assign({}, data.hero);
       });
       // #enddocregion graphql-query
     });
@@ -56,7 +56,6 @@ export class HeroDetailComponent implements OnInit {
 
   // #docregion save
   save(): void {
-
     this.apollo.mutate({
       mutation: gql`
         mutation updateHero($id: Int!, $name: String!) {

public/docs/_examples/heroes-graphql/ts/app/app.component.ts renamed to public/docs/_examples/heroes-graphql/ts/src/app/app.component.ts

@@ -17,7 +17,7 @@ import 'rxjs/add/operator/distinctUntilChanged';
 
 import { Hero } from './hero';
 
-import { Angular2Apollo, ApolloQueryObservable } from 'apollo-angular';
+import { Apollo, ApolloQueryObservable } from 'apollo-angular';
 import gql from 'graphql-tag';
 
 @Component({
@@ -35,7 +35,7 @@ export class HeroSearchComponent implements OnInit {
   // #enddocregion searchTerms
 
   constructor(
-    private apollo: Angular2Apollo,
+    private apollo: Apollo,
     private router: Router) {}
   // #docregion searchTerms
 

public/docs/_examples/heroes-graphql/ts/app/app.module.ts renamed to public/docs/_examples/heroes-graphql/ts/src/app/app.module.ts

@@ -1,4 +1,3 @@
-// #docregion
 export class Hero {
   id: number;
   name: string;

public/docs/_examples/heroes-graphql/ts/app/client.1.ts renamed to public/docs/_examples/heroes-graphql/ts/src/app/client.1.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 import { Router }            from '@angular/router';
 
 // #docregion import-apollo
-import { Angular2Apollo } from 'apollo-angular';
+import { Apollo } from 'apollo-angular';
 // #enddocregion import-apollo
 // #docregion import-graphql-tag
 import gql from 'graphql-tag';
@@ -25,7 +25,7 @@ export class HeroesComponent implements OnInit {
 
 // #docregion inject-apollo
   constructor(
-    private apollo: Angular2Apollo,
+    private apollo: Apollo,
     private router: Router) { }
   // #enddocregion inject-apollo
 

public/docs/_examples/heroes-graphql/ts/app/client.2.ts renamed to public/docs/_examples/heroes-graphql/ts/src/app/client.2.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 import { Router }            from '@angular/router';
 
 // #docregion import-apollo
-import { Angular2Apollo } from 'apollo-angular';
+import { Apollo } from 'apollo-angular';
 // #enddocregion import-apollo
 // #docregion import-graphql-tag
 import gql from 'graphql-tag';
@@ -25,7 +25,7 @@ export class HeroesComponent implements OnInit {
 
 // #docregion inject-apollo
   constructor(
-    private apollo: Angular2Apollo,
+    private apollo: Apollo,
     private router: Router) { }
   // #enddocregion inject-apollo
 

public/docs/_examples/heroes-graphql/ts/app/client.ts renamed to public/docs/_examples/heroes-graphql/ts/src/app/client.ts

@@ -8,21 +8,20 @@
 
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfills for older browsers -->
+    <!-- Polyfills -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.js"></script>
     <script src="systemjs.config.extras.js"></script>
-
     <script>
-      System.import('app').catch(function(err){ console.error(err); });
+      System.import('main.js').catch(function(err){ console.error(err); });
     </script>
   </head>
 
   <body>
     <my-app>Loading...</my-app>
   </body>
-</html>
+</html>

public/docs/_examples/heroes-graphql/ts/app/dashboard.component.css renamed to public/docs/_examples/heroes-graphql/ts/src/app/dashboard.component.css

@@ -1,6 +1,6 @@
 // #docregion
 import { platformBrowser }    from '@angular/platform-browser';
 
-import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';
+import { AppModuleNgFactory } from '../aot/src/app/app.module.ngfactory';
 
 platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

public/docs/_examples/heroes-graphql/ts/app/dashboard.component.html renamed to public/docs/_examples/heroes-graphql/ts/src/app/dashboard.component.html

@@ -1,6 +1,6 @@
 // #docregion
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app.module';
+import { AppModule } from './app/app.module';
 
 platformBrowserDynamic().bootstrapModule(AppModule);