chore: remove moduleId from examples (#3362)

* chore: remove moduleId from examples

* add support for testing and plunkers

* delete component-relative cookbook

* latest touches

* ward teaks and travis fixes

* fix typo in style-guide

Author: Foxandxss

gulpfile.js

@@ -86,6 +86,7 @@ var _excludeMatchers = _excludePatterns.map(function(excludePattern){
 var _exampleBoilerplateFiles = [
   'src/styles.css',
   'src/systemjs.config.js',
+  'src/systemjs-angular-loader.js',
   'src/tsconfig.json',
   'bs-config.json',
   'bs-config.e2e.json',

public/docs/_examples/.gitignore

@@ -1,6 +1,7 @@
 # _boilerplate files
 !_boilerplate/*
 */*/src/styles.css
+*/*/src/systemjs-angular-loader.js
 */*/src/systemjs.config.js
 */*/src/tsconfig.json
 */*/bs-config.e2e.json

public/docs/_examples/_boilerplate/src/systemjs-angular-loader.js

@@ -0,0 +1,43 @@
+var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
+var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
+var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;
+
+module.exports.translate = function(load){
+
+  var url = new URL(load.address);
+
+  var basePathParts = url.pathname.split('/');
+
+  if (url.href.indexOf('plnkr') != -1) {
+    basePathParts.shift();
+    basePathParts.shift();
+  }
+
+  basePathParts.pop();
+  var basePath = basePathParts.join('/');
+  load.source = load.source
+    .replace(templateUrlRegex, function(match, quote, url){
+      let resolvedUrl = url;
+
+      if (url.startsWith('.')) {
+        resolvedUrl = basePath + url.substr(1);
+      }
+
+      return `templateUrl: '${resolvedUrl}'`;
+    })
+    .replace(stylesRegex, function(match, relativeUrls) {
+      var urls = [];
+
+      while ((match = stringRegex.exec(relativeUrls)) !== null) {
+        if (match[2].startsWith('.')) {
+          urls.push(`'${basePath.substr(1)}${match[2].substr(1)}'`);
+        } else {
+          urls.push(`'${match[2]}'`);
+        }
+      }
+
+      return "styleUrls: [" + urls.join(', ') + "]";
+    });
+
+  return load;
+};

public/docs/_examples/_boilerplate/src/systemjs.config.js

@@ -11,7 +11,7 @@
     // map tells the System loader where to look for things
     map: {
       // our app is within the app folder
-      app: 'app',
+      'app': 'app',
 
       // angular bundles
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
@@ -32,7 +32,12 @@
     packages: {
       app: {
         main: './main.js',
-        defaultExtension: 'js'
+        defaultExtension: 'js',
+        meta: {
+          './*.js': {
+            loader: 'systemjs-angular-loader.js'
+          }
+        }
       },
       rxjs: {
         defaultExtension: 'js'

public/docs/_examples/_boilerplate/src/systemjs.config.web.build.js

@@ -34,8 +34,9 @@
     },
     // map tells the System loader where to look for things
     map: {
+      'ng-loader': './systemjs-angular-loader.js',
       // our app is within the app folder
-      app: 'app',
+      'app': 'app',
 
       // angular bundles
       '@angular/core': 'ng:core-builds/master/bundles/core.umd.js',
@@ -71,7 +72,12 @@
     packages: {
       app: {
         main: './main.ts',
-        defaultExtension: 'ts'
+        defaultExtension: 'ts',
+        meta: {
+          './*.ts': {
+            loader: 'ng-loader'
+          }
+        }
       },
       rxjs: {
         defaultExtension: 'js'

public/docs/_examples/_boilerplate/src/systemjs.config.web.js

@@ -31,8 +31,9 @@
     },
     // map tells the System loader where to look for things
     map: {
+      'ng-loader': './systemjs-angular-loader.js',
       // our app is within the app folder
-      app: 'app',
+      'app': 'app',
 
       // angular bundles
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
@@ -58,7 +59,12 @@
     packages: {
       app: {
         main: './main.ts',
-        defaultExtension: 'ts'
+        defaultExtension: 'ts',
+        meta: {
+          './*.ts': {
+            loader: 'ng-loader'
+          }
+        }
       },
       rxjs: {
         defaultExtension: 'js'

public/docs/_examples/animations/ts/src/app/hero-list-auto.component.ts

@@ -11,7 +11,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-auto',
   // #docregion template
   template: `

public/docs/_examples/animations/ts/src/app/hero-list-basic.component.ts

@@ -15,7 +15,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-basic',
   // #enddocregion
   /* The click event calls hero.toggleState(), which

public/docs/_examples/animations/ts/src/app/hero-list-combined-transitions.component.ts

@@ -14,7 +14,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
- moduleId: module.id,
  selector: 'hero-list-combined-transitions',
  // #docregion template
  template: `

public/docs/_examples/animations/ts/src/app/hero-list-enter-leave-states.component.ts

@@ -11,7 +11,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-enter-leave-states',
   // #docregion template
   template: `

public/docs/_examples/animations/ts/src/app/hero-list-enter-leave.component.ts

@@ -11,7 +11,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-enter-leave',
   // #docregion template
   template: `

public/docs/_examples/animations/ts/src/app/hero-list-groups.component.ts

@@ -12,7 +12,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-groups',
   template: `
     <ul>

public/docs/_examples/animations/ts/src/app/hero-list-inline-styles.component.ts

@@ -13,7 +13,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
- moduleId: module.id,
  selector: 'hero-list-inline-styles',
  // #docregion template
  template: `

public/docs/_examples/animations/ts/src/app/hero-list-multistep.component.ts

@@ -13,7 +13,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-multistep',
   // #docregion template
   template: `

public/docs/_examples/animations/ts/src/app/hero-list-timings.component.ts

@@ -11,7 +11,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-timings',
   template: `
     <ul>

public/docs/_examples/animations/ts/src/app/hero-list-twoway.component.ts

@@ -14,7 +14,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
- moduleId: module.id,
  selector: 'hero-list-twoway',
  // #docregion template
  template: `

public/docs/_examples/architecture/ts/src/app/hero-detail.component.ts

@@ -3,7 +3,6 @@ import { Component, Input } from '@angular/core';
 import { Hero } from './hero';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-detail',
   templateUrl: './hero-detail.component.html'
 })

public/docs/_examples/architecture/ts/src/app/hero-list.component.ts

@@ -5,7 +5,6 @@ import { HeroService }         from './hero.service';
 
 // #docregion metadata, providers
 @Component({
-  moduleId: module.id,
   selector:    'hero-list',
   templateUrl: './hero-list.component.html',
   providers:  [ HeroService ]

public/docs/_examples/attribute-directives/ts/src/app/app.component.1.ts

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.1.html'
 })

public/docs/_examples/attribute-directives/ts/src/app/app.component.ts

@@ -2,7 +2,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
 })

public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.component.ts

@@ -4,7 +4,6 @@ import { MovieService } from './movie.service';
 import { IMovie } from './movie';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ],

public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.ts

@@ -8,7 +8,6 @@ import { MovieService } from './movie.service';
 
 // #docregion component
 @Component({
-  moduleId: module.id,
   selector: 'movie-list',
   templateUrl: './movie-list.component.html',
 // #docregion style-url

public/docs/_examples/cb-aot-compiler/ts/src/app/app.component.ts

@@ -2,7 +2,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
 })

public/docs/_examples/cb-aot-compiler/ts/src/index.html

@@ -10,9 +10,6 @@
 
     <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>
   <body>
     <my-app>Loading...</my-app>

public/docs/_examples/cb-component-communication/ts/src/app/app.component.ts

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
 })