build: separate demo-app in its own directory. (#451)

* build: separate demo-app in its own directory.

* chore: replace gulp-inline-resources with a script

This also improves upon the relative path problem. All template paths
now should be relative. Also, we can now include double-quotes in
CSS/HTML.

.gitignore

@@ -25,6 +25,7 @@
 /.idea
 
 # misc
+.DS_Store
 /.sass-cache
 /connect.lock
 /coverage/*

angular-cli-build.js

@@ -5,16 +5,56 @@ const path = require('path');
 // Import the require hook. Enables us to require TS files natively.
 require('ts-node/register');
 
-
 const Angular2App = require('angular-cli/lib/broccoli/angular2-app');
 const Funnel = require('broccoli-funnel');
 const MergeTree = require('broccoli-merge-trees');
 const autoPrefixerTree = require('broccoli-autoprefixer');
 
 
 module.exports = function(defaults) {
-  var angularAppTree = new Angular2App(defaults, {
-    sourceDir: 'src/',
+  // The Angular Application tree.
+  const appTree = _buildAppTree(defaults);
+
+  // The CSS tree that is auto prefixed with browser support.
+  const cssAutoprefixed = autoPrefixerTree(new Funnel(appTree, {
+    include: [ '**/*.css' ]
+  }));
+
+  return new MergeTree([appTree, cssAutoprefixed], { overwrite: true });
+};
+
+
+/**
+ * Build the Broccoli Tree containing all the files used as the input to the Angular2App.
+ */
+function _buildDemoAppInputTree() {
+  return new MergeTree([
+    new Funnel('typings', {
+      destDir: 'typings'
+    }),
+    new Funnel('src', {
+      include: ['components/**/*', 'core/**/*'],
+      destDir: 'src/demo-app'
+    }),
+    new Funnel('src/demo-app', {
+      destDir: 'src/demo-app'
+    })
+  ]);
+}
+
+/**
+ * Build the Broccoli Tree that contains the Angular2 App. This picks between E2E, Example or Demo
+ * app.
+ * @param defaults The default objects from AngularCLI (deprecated).
+ * @returns {Angular2App}
+ */
+function _buildAppTree(defaults) {
+  let inputNode = _buildDemoAppInputTree();
+
+  return new Angular2App(defaults, inputNode, {
+    sourceDir: 'src/demo-app',
+    tsCompiler: {
+    },
     sassCompiler: {
       includePaths: [
         'src/core/style'
@@ -27,17 +67,7 @@ module.exports = function(defaults) {
       'es6-shim/es6-shim.js',
       'reflect-metadata/*.js',
       'rxjs/**/*.js',
-      '@angular/**/*.js',
+      '@angular/**/*.js'
     ]
   });
-
-  const cssAutoprefixed = autoPrefixerTree(new Funnel(angularAppTree, {
-    include: [ '**/*.css' ]
-  }));
-
-  return new MergeTree([
-    new Funnel('src', { include: ['**/*.scss']}),
-    angularAppTree,
-    cssAutoprefixed,
-  ], { overwrite: true });
-};
+}

config/environment.dev.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: false
+};

config/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

package.json

@@ -16,7 +16,7 @@
     "typings": "typings install --ambient",
     "postinstall": "npm run typings",
     "e2e": "protractor test/protractor.conf.js",
-    "inline-resources": "gulp inline-resources",
+    "inline-resources": "node ./scripts/release/inline-resources.js ./dist/components",
     "deploy": "firebase deploy"
   },
   "version": "2.0.0-alpha.4",
@@ -41,7 +41,7 @@
   },
   "devDependencies": {
     "add-stream": "^1.0.0",
-    "angular-cli": "0.0.37",
+    "angular-cli": "^1.0.0-beta.4",
     "broccoli-autoprefixer": "^4.1.0",
     "broccoli-funnel": "^1.0.1",
     "broccoli-merge-trees": "^1.1.1",
@@ -51,8 +51,6 @@
     "firebase-tools": "^2.2.1",
     "fs-extra": "^0.26.5",
     "glob": "^6.0.4",
-    "gulp": "^3.9.1",
-    "gulp-inline-ng2-template": "^1.1.2",
     "jasmine-core": "^2.4.1",
     "js-yaml": "^3.5.2",
     "karma": "^0.13.15",
@@ -68,7 +66,7 @@
     "symlink-or-copy": "^1.0.1",
     "ts-node": "^0.5.5",
     "tslint": "^3.5.0",
-    "typescript": "^1.8.0",
+    "typescript": "^1.9.0-dev",
     "typings": "^0.8.1",
     "which": "^1.2.4"
   }

scripts/release/inline-resources.js

@@ -0,0 +1,98 @@
+#!/usr/bin/env node
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+
+/**
+ * Simple Promiseify function that takes a Node API and return a version that supports promises.
+ * We use promises instead of synchronized functions to make the process less I/O bound and
+ * faster. It also simplify the code.
+ */
+function promiseify(fn) {
+  return function() {
+    const args = [].slice.call(arguments, 0);
+    return new Promise((resolve, reject) => {
+      fn.apply(this, args.concat([function (err, value) {
+        if (err) {
+          reject(err);
+        } else {
+          resolve(value);
+        }
+      }]));
+    });
+  };
+}
+
+const readFile = promiseify(fs.readFile);
+const writeFile = promiseify(fs.writeFile);
+
+
+/**
+ * For every argument, inline the templates and styles under it and write the new file.
+ */
+for (let arg of process.argv.slice(2)) {
+  if (arg.indexOf('*') < 0) {
+    // Argument is a directory target, add glob patterns to include every files.
+    arg = path.join(arg, '**', '*');
+  }
+
+  const files = glob.sync(arg, {})
+    .filter(name => /\.js$/.test(name));  // Matches only JavaScript files.
+
+  // Generate all files content with inlined templates.
+  files.forEach(filePath => {
+    readFile(filePath, 'utf-8')
+      .then(content => inlineTemplate(filePath, content))
+      .then(content => inlineStyle(filePath, content))
+      .then(content => writeFile(filePath, content))
+      .catch(err => {
+        console.error('An error occured: ', err);
+      });
+  });
+}
+
+
+/**
+ * Inline the templates for a source file. Simply search for instances of `templateUrl: ...` and
+ * replace with `template: ...` (with the content of the file included).
+ * @param filePath {string} The path of the source file.
+ * @param content {string} The source file's content.
+ * @return {string} The content with all templates inlined.
+ */
+function inlineTemplate(filePath, content) {
+  return content.replace(/templateUrl:\s*'([^']+\.html)'/g, function(m, templateUrl) {
+    const templateFile = path.join(path.dirname(filePath), templateUrl);
+    const templateContent = fs.readFileSync(templateFile, 'utf-8');
+    const shortenedTemplate = templateContent
+      .replace(/([\n\r]\s*)+/gm, ' ')
+      .replace(/"/g, '\\"');
+    return `template: "${shortenedTemplate}"`;
+  });
+}
+
+
+/**
+ * Inline the styles for a source file. Simply search for instances of `styleUrls: [...]` and
+ * replace with `styles: [...]` (with the content of the file included).
+ * @param filePath {string} The path of the source file.
+ * @param content {string} The source file's content.
+ * @return {string} The content with all styles inlined.
+ */
+function inlineStyle(filePath, content) {
+  return content.replace(/styleUrls:\s*(\[[\s\S]*?\])/gm, function(m, styleUrls) {
+    const urls = eval(styleUrls);
+    return 'styles: ['
+      + urls.map(styleUrl => {
+          const styleFile = path.join(path.dirname(filePath), styleUrl);
+          const styleContent = fs.readFileSync(styleFile, 'utf-8');
+          const shortenedStyle = styleContent
+            .replace(/([\n\r]\s*)+/gm, ' ')
+            .replace(/"/g, '\\"');
+          return `"${shortenedStyle}"`;
+        })
+        .join(',\n')
+      + ']';
+  });
+}

src/components/button/button.ts

@@ -14,6 +14,7 @@ import {
 
 
 @Component({
+  moduleId: module.id,
   selector: 'button[md-button], button[md-raised-button], button[md-icon-button], ' +
             'button[md-fab], button[md-mini-fab]',
   inputs: ['color'],
@@ -23,8 +24,8 @@ import {
     '(focus)': 'setKeyboardFocus()',
     '(blur)': 'removeKeyboardFocus()',
   },
-  templateUrl: './components/button/button.html',
-  styleUrls: ['./components/button/button.css'],
+  templateUrl: 'button.html',
+  styleUrls: ['button.css'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -81,6 +82,7 @@ export class MdButton {
 }
 
 @Component({
+  moduleId: module.id,
   selector: 'a[md-button], a[md-raised-button], a[md-icon-button], a[md-fab], a[md-mini-fab]',
   inputs: ['color'],
   host: {
@@ -90,8 +92,8 @@ export class MdButton {
     '(blur)': 'removeKeyboardFocus()',
     '(click)': 'haltDisabledEvents($event)',
   },
-  templateUrl: './components/button/button.html',
-  styleUrls: ['./components/button/button.css'],
+  templateUrl: 'button.html',
+  styleUrls: ['button.css'],
   encapsulation: ViewEncapsulation.None
 })
 export class MdAnchor extends MdButton {

src/components/card/card.ts

@@ -21,9 +21,10 @@ it also provides a number of preset styles for common card sections, including:
 */
 
 @Component({
+  moduleId: module.id,
   selector: 'md-card',
-  templateUrl: './components/card/card.html',
-  styleUrls: ['./components/card/card.css'],
+  templateUrl: 'card.html',
+  styleUrls: ['card.css'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -45,8 +46,9 @@ TODO(kara): update link to demo site when it exists
 */
 
 @Component({
+  moduleId: module.id,
   selector: 'md-card-header',
-  templateUrl: './components/card/card-header.html',
+  templateUrl: 'card-header.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -64,8 +66,9 @@ TODO(kara): update link to demo site when it exists
 */
 
 @Component({
+  moduleId: module.id,
   selector: 'md-card-title-group',
-  templateUrl: './components/card/card-title-group.html',
+  templateUrl: 'card-title-group.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/components/checkbox/checkbox.spec.ts

@@ -4,7 +4,7 @@ import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing'
 import {Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MdCheckbox} from './checkbox';
-import {PromiseCompleter} from '../../core/async/promise-completer';
+import {PromiseCompleter} from '@angular2-material/core/async/promise-completer';
 
 // TODO: Implement E2E tests for spacebar/click behavior for checking/unchecking
 

src/components/checkbox/checkbox.ts

@@ -53,9 +53,10 @@ enum TransitionCheckState {
  * See: https://www.google.com/design/spec/components/selection-controls.html
  */
 @Component({
+  moduleId: module.id,
   selector: 'md-checkbox',
-  templateUrl: './components/checkbox/checkbox.html',
-  styleUrls: ['./components/checkbox/checkbox.css'],
+  templateUrl: 'checkbox.html',
+  styleUrls: ['checkbox.css'],
   host: {
     '[class.md-checkbox-indeterminate]': 'indeterminate',
     '[class.md-checkbox-checked]': 'checked',

src/components/grid-list/grid-list-errors.ts

@@ -1,4 +1,4 @@
-import {MdError} from '../../core/errors/error';
+import {MdError} from '@angular2-material/core/errors/error';
 
 /**
  * Exception thrown when cols property is missing from grid-list

src/components/grid-list/grid-list.ts

@@ -18,7 +18,7 @@ import {
     FixedTileStyler
 } from './tile-styler';
 import {MdGridListColsError} from './grid-list-errors';
-import {Dir} from '../../core/rtl/dir';
+import {Dir} from '@angular2-material/core/rtl/dir';
 
 // TODO(kara): Conditional (responsive) column count / row size.
 // TODO(kara): Re-layout on window resize / media change (debounced).
@@ -27,10 +27,10 @@ import {Dir} from '../../core/rtl/dir';
 const MD_FIT_MODE = 'fit';
 
 @Component({
+  moduleId: module.id,
   selector: 'md-grid-list',
-  host: { 'role': 'list' },
-  templateUrl: './components/grid-list/grid-list.html',
-  styleUrls: ['./components/grid-list/grid-list.css'],
+  templateUrl: 'grid-list.html',
+  styleUrls: ['grid-list.css'],
   encapsulation: ViewEncapsulation.None,
 })
 export class MdGridList implements OnInit, AfterContentChecked {

src/components/grid-list/grid-tile.ts

@@ -9,10 +9,11 @@ import {
 import {coerceToNumber} from './grid-list';
 
 @Component({
+  moduleId: module.id,
   selector: 'md-grid-tile',
   host: { 'role': 'listitem' },
-  templateUrl: './components/grid-list/grid-tile.html',
-  styleUrls: ['./components/grid-list/grid-list.css'],
+  templateUrl: 'grid-tile.html',
+  styleUrls: ['grid-list.css'],
   encapsulation: ViewEncapsulation.None,
 })
 export class MdGridTile {

src/components/grid-list/tile-styler.ts

@@ -1,7 +1,7 @@
 import {MdGridTile} from './grid-tile';
 import {TileCoordinator} from './tile-coordinator';
 import {MdGridListBadRatioError} from './grid-list-errors';
-import {Dir} from '../../core/rtl/dir';
+import {Dir} from '@angular2-material/core/rtl/dir';
 
 /* Sets the style properties for an individual tile, given the position calculated by the
 * Tile Coordinator. */