[WIP] docs(inheritance): sample

public/docs/_examples/inheritance/ts/.gitignore

@@ -0,0 +1,7 @@
+**/*.ngfactory.ts
+**/*.ngsummary.json
+**/*.metadata.json
+**/*.shim.ngstyle.ts
+dist
+!app/tsconfig.json
+!rollup-config.js

public/docs/_examples/inheritance/ts/README.md

@@ -0,0 +1,40 @@
+# Angular Inheritance Sample (draft)
+
+The AOT Cookbook sample was the starting point.  
+This sample runs in both JIT and AOT
+
+With AOT you have to re-build after each change.
+With JIT you can develop on the fly as we usually do.
+
+## Inheritance experiments
+Look at `sub.component.ts` to see the experiments in metadata inheritance.
+
+
+## Building it
+
+The original source is in https://github.com/angular/angular.io/pull/3096 along with 
+tools and configs to build it in JIT and AOT.
+You'll need knowledge of the Angular docs sample development practices to do it.
+
+Commands to run:
+
+```
+# compile with AOT, then rollup. Noisy.
+npm run build:aot
+
+# start server and JIT/TS watching as usual
+npm start
+```
+The browser displays the JIT version (`index.html`) by default.
+You can tell by looking at the browser tab (it says "JIT:..."), in the console, and in the page header.
+
+To see the AOT version, put `index-aot.html` in the address bar.
+You can tell by looking at the browser tab (it says "AOT:..."), in the console, and in the page header.
+
+## Running it
+
+I like to have two console windows open:
+
+1. Running `npm start` (after once having run `npm run build:aot`)
+
+1. Where I periodically re-run either `npm run tsc` or `npm run build:aot` after a change that works in JIT

public/docs/_examples/inheritance/ts/app/app.component.html

@@ -0,0 +1,5 @@
+<!-- #docregion -->
+<h1>Angular Inheritance ({{buildMode}})</h1>
+<base-comp speaker="Paul"></base-comp>
+<sub-comp  speaker="Helen"></sub-comp>
+

public/docs/_examples/inheritance/ts/app/app.component.ts

@@ -0,0 +1,12 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'my-app',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+  buildMode = document['aot'] ? 'AOT' : 'JIT';
+}
+

public/docs/_examples/inheritance/ts/app/app.module.ts

@@ -0,0 +1,18 @@
+// #docregion
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent }  from './app.component';
+import { BaseComponent } from './base.component';
+import { SubComponent }  from './sub.component';
+
+@NgModule({
+  imports:      [ BrowserModule ],
+  declarations: [
+    AppComponent,
+    BaseComponent,
+    SubComponent
+  ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule { }

public/docs/_examples/inheritance/ts/app/base.component.css

@@ -0,0 +1 @@
+#speak { font-style: italic;  color: blue; }

public/docs/_examples/inheritance/ts/app/base.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input, Injectable } from '@angular/core';
+
+@Injectable()
+export class ServiceA {
+  name = 'Service A';
+}
+
+@Injectable()
+export class ServiceB {
+  name = 'Service B';
+}
+
+export const BASE_PROVIDERS = [ ServiceA, ServiceB ];
+
+export const BASE_METADATA = {
+  moduleId: module.id,
+  selector: 'base-comp',
+  template: `
+    <h3>{{speaker}} sez:</h3>
+    <p id="speak">I am the base component. Koo-koo-ka-choo.</p>
+    <p>{{services}}</p>
+  `,
+  styleUrls: [ './base.component.css'] ,
+  providers: [BASE_PROVIDERS]
+};
+
+@Component(BASE_METADATA)
+export class BaseComponent {
+  @Input() speaker: string;
+  services: string;
+
+  constructor(private a: ServiceA, private b: ServiceB) {
+    this.services = `ServiceA is ${a.name}; Service B is ${b.name}`;
+  }
+}

public/docs/_examples/inheritance/ts/app/main-aot.ts

@@ -0,0 +1,7 @@
+// #docregion
+import { platformBrowser }    from '@angular/platform-browser';
+import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';
+
+console.log('Running AOT version');
+document['aot'] = true;
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

public/docs/_examples/inheritance/ts/app/main.ts

@@ -0,0 +1,7 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule }              from './app.module';
+
+console.log('Running JIT version');
+document['aot'] = false;
+platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/inheritance/ts/app/sub.component.ts

@@ -0,0 +1,69 @@
+import { Component, Injectable } from '@angular/core';
+
+import { BaseComponent, BASE_METADATA, BASE_PROVIDERS, ServiceA } from './base.component';
+
+///////// SubComponent service substitution ////
+@Injectable()
+export class ServiceASub {
+  name = 'A-sub';
+}
+
+///////// SubComponent Metadata Trials ////
+
+// The intended, fully specified SubComponent metadat. We know this works
+const subMeta = {
+  moduleId: module.id,
+  selector: 'sub-comp',
+  template: `
+    <h3>{{speaker}} sez:</h3>
+    <p id="speak">I am the SUB component. Hear me roar.</p>
+    <p>{{services}}</p>
+  `,
+  styleUrls: [ './base.component.css'] ,
+  providers: [
+    BASE_PROVIDERS,
+    {provide: ServiceA, useClass: ServiceASub}
+  ]
+};
+
+////////////////////
+// This works in JIT but not AOT
+export function blendMetadata() {
+  return Object.assign({}, BASE_METADATA, subMeta);
+}
+
+//////////////////////////
+// Manual inheritance
+const inheritMetadata = {
+  // inherit (silly)
+  moduleId: BASE_METADATA.moduleId,
+
+  // Override
+  selector: 'sub-comp',
+  template: `
+    <h3>{{speaker}} sez:</h3>
+    <p id="speak">I am the SUB component. Hear me roar.</p>
+    <p>{{services}}</p>
+  `,
+
+  // Extend providers (actually overrides)
+  providers: [
+    BASE_METADATA.providers,   // inherit
+    {provide: ServiceA, useClass: ServiceASub}
+  ],
+
+  // Inherit
+  styleUrls: BASE_METADATA.styleUrls   // inherit
+};
+
+////////////// SubComponent ////////////////////////
+
+// This works in JIT and AOT
+// @Component(subMeta)
+
+// This works in JIT but not AOT
+// @Component(blendMetadata())
+
+// This works in JIT and AOT
+@Component(inheritMetadata)
+export class SubComponent extends BaseComponent { }

public/docs/_examples/inheritance/ts/example-config.json

@@ -0,0 +1,4 @@
+{
+  "build": "build:aot",  
+  "run": "http-server:e2e" 
+}

public/docs/_examples/inheritance/ts/index-aot.html

@@ -0,0 +1,24 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>AOT: Angular Inheritance</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <!-- #docregion moduleId -->
+    <script>window.module = 'aot';</script>
+    <!-- #enddocregion moduleId -->
+  </head>
+
+  <!-- #docregion bundle -->
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+
+  <script src="dist/build.js"></script>
+  <!-- #enddocregion bundle -->
+</html>

public/docs/_examples/inheritance/ts/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>JIT: Angular Inheritance</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- Polyfills for older browsers -->
+    <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>
+      System.import('app').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <my-app>Loading AppComponent content here ...</my-app>
+  </body>
+
+</html>

public/docs/_examples/inheritance/ts/plnkr.json

@@ -0,0 +1,10 @@
+{
+  "description": "App",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!app/main-aot.ts",
+    "!README.md"
+  ],
+  "tags": ["inheritance"]
+}

public/docs/_examples/inheritance/ts/rollup-config.js

@@ -0,0 +1,36 @@
+// #docregion
+import rollup      from 'rollup'
+import nodeResolve from 'rollup-plugin-node-resolve'
+import commonjs    from 'rollup-plugin-commonjs';
+import uglify      from 'rollup-plugin-uglify'
+
+// #docregion config
+export default {
+  entry: 'app/main-aot.js',
+  dest: 'dist/build.js', // output a single application bundle
+  sourceMap: false,
+  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}),
+      // #docregion commonjs
+      commonjs({
+        include: 'node_modules/rxjs/**',
+      }),
+      // #enddocregion commonjs
+      // #docregion uglify
+      uglify()
+      // #enddocregion uglify
+  ]
+}
+// #enddocregion config

public/docs/_examples/inheritance/ts/tsconfig-aot.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": ["es2015", "dom"],
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true
+  },
+
+  "files": [
+    "app/app.module.ts",
+    "app/main-aot.ts"
+  ],
+
+  "angularCompilerOptions": {
+   "genDir": "aot",
+   "skipMetadataEmit" : true
+ }
+}