chore(demos): update demos build task to use app-scripts (#9830)

* chore(build): WIP getting ionic working with app-scripts

the tsconfig file change is just for testing, this will need to be
undone

* chore(demos): update tsconfig and gitignore for demos

update tsconfig and gitinogre for demos

* chore(build): WIP check in progress with building with app-scripts

this only works with demos/action-sheet currently

* refactor(demos): add custom copy config

add custom copy config

* chore(tsconfig): revert root tsconfig

* chore(demos): change import paths

* chore(demos): move sass config, add new tsconfig, update template

* chore(scripts): update demos tasks to use app scripts with folder name

tweak the createTempTsConfig function to include a path to read from,
move getFolderInfo into util to share

at this point you should be able to run `gulp demos.prod` with a folder
e.g. `--f=alert` and open the index of that test to see it. Doesn’t
work yet with all of the tests at once. Need to have ran `gulp
release.prepareReleasePackage` first.

* chore(build): WIP working on getting all of the demos building

* chore(demos): update demos task for app-scripts build

* chore(demos): fix tslint errors thrown by app-scripts

* chore(demos): get the demos working with fonts and variable file

* chore(demos): add watch task to the new prod task

* chore(demos): remove old demos.prod file and rename new one to it

* chore(npm): remove build npm script

* chore(demos): only log component name in url if one was passed

.gitignore

@@ -34,7 +34,8 @@ demos/node_modules
 demos/polyfills
 demos/css
 demos/fonts
-demos/src/**/*.js*
+demos/src/**/*.js
+demos/src/**/*.map
 demos/src/**/*.ngfactory.ts
 demos/src/**/*.d.ts
 demos/src/**/*.metadata.json

demos/src/action-sheet/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { ActionSheetController, IonicApp, IonicModule, Platform } from '../';
+import { ActionSheetController, IonicApp, IonicModule, Platform } from '../../ionic-angular';
 
 
 @Component({

demos/src/alert/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { AlertController, IonicApp, IonicModule } from '../';
+import { AlertController, IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({

demos/src/button/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({

demos/src/checkbox/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({

demos/src/chip/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({

demos/src/config/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule, Platform, NavController } from '../';
+import { IonicApp, IonicModule, Platform, NavController } from '../../ionic-angular';
 
 if (!window.localStorage) {
   Object.defineProperty(window, 'localStorage', new (function () {

demos/src/datetime/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({

demos/src/events/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule, ViewChild } from '@angular/core';
-import { Events, IonicApp, IonicModule, Nav } from '../';
+import { Events, IonicApp, IonicModule, Nav } from '../../ionic-angular';
 
 
 @Component({

demos/src/fab/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { FabContainer, IonicApp, IonicModule } from '../';
+import { FabContainer, IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({

demos/src/icon/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({

demos/src/infinite-scroll/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, Injectable, NgModule } from '@angular/core';
-import { InfiniteScroll, IonicApp, IonicModule } from '../';
+import { InfiniteScroll, IonicApp, IonicModule } from '../../ionic-angular';
 
 
 /**

demos/src/input/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({

demos/src/item-reorder/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule, ViewEncapsulation } from '@angular/core';
-import { IonicApp, IonicModule, NavController, reorderArray } from '../';
+import { IonicApp, IonicModule, NavController, reorderArray } from '../../ionic-angular';
 
 
 @Component({

demos/src/item-sliding/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule, ViewEncapsulation } from '@angular/core';
-import { IonicApp, IonicModule, ItemSliding, ToastController } from '../';
+import { IonicApp, IonicModule, ItemSliding, ToastController } from '../../ionic-angular';
 
 
 @Component({

demos/src/item/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({

demos/src/label/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({

demos/src/list/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({

demos/src/loading/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule, LoadingController, NavController } from '../';
+import { IonicApp, IonicModule, LoadingController, NavController } from '../../ionic-angular';
 
 
 @Component({

demos/src/menu/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule, MenuController } from '../';
+import { IonicApp, IonicModule, MenuController } from '../../ionic-angular';
 
 
 @Component({

demos/src/modal/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule, ModalController, NavParams, ViewController } from '../';
+import { IonicApp, IonicModule, ModalController, NavParams, ViewController } from '../../ionic-angular';
 
 
 @Component({

demos/src/nav-params/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule, NavController, NavParams } from '../';
+import { IonicApp, IonicModule, NavController, NavParams } from '../../ionic-angular';
 
 
 @Component({

demos/src/navbar/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 // Use the toolbar demo but pass in the demo name to change the title

demos/src/navigation/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule, NavController } from '../';
+import { IonicApp, IonicModule, NavController } from '../../ionic-angular';
 
 
 let pageNum = 2;

demos/src/platform/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule, Platform } from '../';
+import { IonicApp, IonicModule, Platform } from '../../ionic-angular';
 
 
 @Component({

demos/src/popover/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, ElementRef, NgModule, ViewChild } from '@angular/core';
-import { IonicApp, IonicModule, NavParams, PopoverController } from '../';
+import { IonicApp, IonicModule, NavParams, PopoverController } from '../../ionic-angular';
 
 
 @Component({

demos/src/radio/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({

demos/src/range/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({

demos/src/refresher/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, Injectable, NgModule } from '@angular/core';
-import { IonicApp, IonicModule, Refresher } from '../';
+import { IonicApp, IonicModule, Refresher } from '../../ionic-angular';
 
 
 /**

demos/src/scroll/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({

demos/src/searchbar/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({

demos/src/segment/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({

demos/src/select/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({

demos/src/show-when/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({

demos/src/slides/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({

demos/src/tabs/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule, ViewEncapsulation } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({

demos/src/textarea/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({
@@ -30,4 +30,4 @@ export class ApiDemoApp {
     ApiDemoPage
   ]
 })
-export class AppModule {}
+export class AppModule {}

demos/src/title/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 // Use the toolbar demo but pass in the demo name to change the title
@@ -35,4 +35,4 @@ export class ApiDemoApp {
     ApiDemoPage
   ]
 })
-export class AppModule {}
+export class AppModule {}

demos/src/toast/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule, ToastController } from '../';
+import { IonicApp, IonicModule, ToastController } from '../../ionic-angular';
 
 
 @Component({
@@ -76,4 +76,4 @@ export class ApiDemoApp {
     ApiDemoPage
   ]
 })
-export class AppModule {}
+export class AppModule {}

demos/src/toggle/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({
@@ -43,4 +43,4 @@ export class ApiDemoApp {
     ApiDemoPage
   ]
 })
-export class AppModule {}
+export class AppModule {}

demos/src/toolbar/app.module.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule } from '../';
+import { IonicApp, IonicModule } from '../../ionic-angular';
 
 
 @Component({
@@ -32,4 +32,4 @@ export class ApiDemoApp {
     ApiDemoPage
   ]
 })
-export class AppModule {}
+export class AppModule {}

demos/src/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "allowUnreachableCode": false,
+    "declaration": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "dom",
+      "es2015"
+    ],
+    "module": "es2015",
+    "moduleResolution": "node",
+    "noImplicitAny": false,
+    "removeComments": false,
+    "sourceMap": true,
+    "target": "es5",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "./**/*.ts"
+  ],
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "atom": {
+    "rewriteTsconfig": false
+  }
+}

package.json

@@ -39,6 +39,7 @@
     "zone.js": "~0.6.26"
   },
   "devDependencies": {
+    "@ionic/app-scripts": "0.0.48-201612291559",
     "@ionic/commit-hooks": "1.0.3",
     "@types/connect": "3.4.30",
     "@types/del": "2.2.31",
@@ -122,17 +123,18 @@
     "ts-node": "1.3.0",
     "tslint": "3.15.1",
     "tslint-ionic-rules": "0.0.7",
-    "typescript": "2.0.9",
+    "typescript": "~2.0.10",
     "vinyl": "1.2.0",
-    "webpack": "2.1.0-beta.26",
+    "webpack": "^2.1.0-beta.27",
     "yargs": "5.0.0"
   },
   "config": {
     "commitizen": {
       "path": "node_modules/ionic-cz-conventional-changelog"
-    }
+    },
+    "ionic_copy": "./scripts/demos/copy.config.js"
   },
   "pre-push#master": [
     "test"
   ]
-}
+}

scripts/demos/copy.config.js

@@ -0,0 +1,7 @@
+// we don't want to run copy for the demos, so just override the config for now
+module.exports = {
+  copyAssets: { },
+  copyIndexContent: { },
+  copyFonts: { },
+  copyPolyfills: { }
+}

scripts/demos/demos.template.prod.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <meta name="apple-mobile-web-app-capable" content="yes">
 
-  <link id="ionicLink" href="../css/ionic.css" rel="stylesheet">
+  <link id="ionicLink" href="./build/main.css" rel="stylesheet">
 	<link href="../css/demos.shared.css" rel="stylesheet">
 </head>
 <body>
@@ -14,6 +14,6 @@
   <ion-app></ion-app>
 
   <script src="../polyfills/polyfills.ng.js"></script>
-  <script src="./app.bundle.js"></script>
+  <script src="./build/main.js"></script>
 </body>
 </html>

scripts/demos/entry.ts

@@ -1,6 +0,0 @@
-import { platformBrowser } from '@angular/platform-browser';
-import { enableProdMode } from '@angular/core';
-import { AppModuleNgFactory } from './app.module.ngfactory';
-
-enableProdMode();
-platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

scripts/demos/main.ts

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

scripts/demos/sass.config.js

@@ -0,0 +1,103 @@
+
+// https://www.npmjs.com/package/node-sass
+
+module.exports = {
+
+  /**
+   * outputFilename: The filename of the saved CSS file
+   * from the sass build. The directory which it is saved in
+   * is set within the "buildDir" config options.
+   */
+  outputFilename: process.env.IONIC_OUTPUT_CSS_FILE_NAME,
+
+  /**
+   * sourceMap: If source map should be built or not.
+   */
+  sourceMap: false,
+
+  /**
+   * outputStyle: How node-sass should output the css file.
+   */
+  outputStyle: 'expanded',
+
+  /**
+   * autoprefixer: The config options for autoprefixer.
+   * Excluding this config will skip applying autoprefixer.
+   * https://www.npmjs.com/package/autoprefixer
+   */
+  autoprefixer: {
+    browsers: [
+      'last 2 versions',
+      'iOS >= 8',
+      'Android >= 4.4',
+      'Explorer >= 11',
+      'ExplorerMobile >= 11'
+    ],
+    cascade: false
+  },
+
+  /**
+   * includePaths: Used by node-sass for additional
+   * paths to search for sass imports by just name.
+   */
+  includePaths: [
+    'src/themes',
+    'node_modules/ionicons/dist/scss',
+    'src/fonts'
+  ],
+
+  /**
+   * includeFiles: An array of regex patterns to search for
+   * sass files in the same directory as the component module.
+   * If a file matches both include and exclude patterns, then
+   * the file will be excluded.
+   */
+  includeFiles: [
+    /\.(s(c|a)ss)$/i
+  ],
+
+  /**
+   * excludeFiles: An array of regex patterns for files which
+   * should be excluded. If a file matches both include and exclude
+   * patterns, then the file will be excluded.
+   */
+  excludeFiles: [
+    /*  /\.(wp).(scss)$/i  */
+  ],
+
+  /**
+   * variableSassFiles: Lists out the files which include
+   * only sass variables. These variables are the first sass files
+   * to be imported so their values override default variables.
+   */
+  variableSassFiles: [
+    './scripts/demos/variables.scss'
+  ],
+
+  /**
+   * directoryMaps: Compiled JS modules may be within a different
+   * directory than its source file and sibling component sass files.
+   * For example, NGC places it's files within the .tmp directory
+   * but doesn't copy over its sass files. This is useful so sass
+   * also checks the JavaScript's source directory for sass files.
+   */
+  directoryMaps: {
+    '{{TMP}}': '{{SRC}}'
+  },
+
+  /**
+   * excludeModules: Used just as a way to skip over
+   * modules which we know wouldn't have any sass to be
+   * bundled. "excludeModules" isn't necessary, but is a
+   * good way to speed up build times by skipping modules.
+   */
+  excludeModules: [
+    '@angular',
+    'commonjs-proxy',
+    'core-js',
+    'ionic-native',
+    'rxjs',
+    'zone.js'
+  ]
+
+};

scripts/demos/variables.scss

@@ -0,0 +1,77 @@
+// Ionic Variables and Theming. For more info, please see:
+// http://ionicframework.com/docs/v2/theming/
+
+// Font path is used to include ionicons,
+// roboto, and noto sans fonts
+$font-path: "../../fonts";
+
+@import "ionic.globals";
+
+
+// Shared Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Sass variables found in Ionic's source scss files.
+// To view all the possible Ionic variables, see:
+// http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/
+
+
+// Named Color Variables
+// --------------------------------------------------
+// Named colors makes it easy to reuse colors on various components.
+// It's highly recommended to change the default colors
+// to match your app's branding. Ionic uses a Sass map of
+// colors so you can add, rename and remove colors as needed.
+// The "primary" color is the only required color in the map.
+
+$colors: (
+  primary:    #327eff,
+  secondary:  #32db64,
+  danger:     #f53d3d,
+  light:      #f4f4f4,
+  dark:       #222,
+);
+
+
+// App iOS Variables
+// --------------------------------------------------
+// iOS only Sass variables can go here
+
+
+
+// App Material Design Variables
+// --------------------------------------------------
+// Material Design only Sass variables can go here
+
+
+// App Windows Variables
+// --------------------------------------------------
+// Windows only Sass variables can go here
+
+
+
+// App Theme
+// --------------------------------------------------
+// Ionic apps can have different themes applied, which can
+// then be future customized. This import comes last
+// so that the above variables are used and Ionic's
+// default are overridden.
+
+@import "ionic.theme.default";
+
+
+// Ionicons
+// --------------------------------------------------
+// The premium icon font for Ionic. For more info, please see:
+// http://ionicframework.com/docs/v2/ionicons/
+
+@import "ionicons";
+
+
+// Fonts
+// --------------------------------------------------
+// Roboto font is used by default for Material Design. Noto sans
+// is used by default for Windows.
+
+@import "roboto";
+@import "noto-sans";

scripts/gulp/tasks/build.ts

@@ -1,5 +1,5 @@
 import { task } from 'gulp';
-import { DIST_BUILD_ROOT, DIST_BUILD_ES2015_ROOT, DIST_BUILD_UMD_ROOT, ES5, ES_2015, UMD_MODULE } from '../constants';
+import { DIST_BUILD_ROOT, DIST_BUILD_ES2015_ROOT, DIST_BUILD_UMD_ROOT, ES5, ES_2015, PROJECT_ROOT, UMD_MODULE } from '../constants';
 import { copySourceToDest, copySwiperToPath, createTempTsConfig, deleteFiles, runNgc } from '../util';
 
 
@@ -7,7 +7,7 @@ export function buildIonicAngularUmd(excludeSpec: boolean, stripDebug: boolean,
   const stream = copySourceToDest(DIST_BUILD_UMD_ROOT, excludeSpec, true, stripDebug);
   stream.on('end', () => {
     // the source files are copied, copy over a tsconfig from
-    createTempTsConfig(['./**/*.ts'], ES5, UMD_MODULE, `${DIST_BUILD_UMD_ROOT}/tsconfig.json`);
+    createTempTsConfig(['./**/*.ts'], ES5, UMD_MODULE, `${PROJECT_ROOT}/tsconfig.json`, `${DIST_BUILD_UMD_ROOT}/tsconfig.json`);
     runNgc(`${DIST_BUILD_UMD_ROOT}/tsconfig.json`, (err) => {
       if (err) {
         done(err);
@@ -28,7 +28,7 @@ export function buildIonicAngularEsm(stripDebug: boolean, done: Function) {
   const stream = copySourceToDest(DIST_BUILD_ROOT, true, true, stripDebug);
   stream.on('end', () => {
     // the source files are copied, copy over a tsconfig from
-    createTempTsConfig(['./**/*.ts'], ES5, ES_2015, `${DIST_BUILD_ROOT}/tsconfig.json`);
+    createTempTsConfig(['./**/*.ts'], ES5, ES_2015, `${PROJECT_ROOT}/tsconfig.json`, `${DIST_BUILD_ROOT}/tsconfig.json`);
     runNgc(`${DIST_BUILD_ROOT}/tsconfig.json`, (err) => {
       if (err) {
         done(err);
@@ -48,7 +48,7 @@ export function buildIonicPureEs6(stripDebug: boolean, done: Function) {
   const stream = copySourceToDest(DIST_BUILD_ES2015_ROOT, true, true, stripDebug);
   stream.on('end', () => {
     // the source files are copied, copy over a tsconfig from
-    createTempTsConfig(['./**/*.ts'], ES_2015, ES_2015, `${DIST_BUILD_ES2015_ROOT}/tsconfig.json`);
+    createTempTsConfig(['./**/*.ts'], ES_2015, ES_2015, `${PROJECT_ROOT}/tsconfig.json`, `${DIST_BUILD_ES2015_ROOT}/tsconfig.json`);
     runNgc(`${DIST_BUILD_ES2015_ROOT}/tsconfig.json`, (err) => {
       if (err) {
         done(err);

scripts/gulp/tasks/demos.prod.ts

@@ -1,38 +1,44 @@
-import { accessSync, F_OK, readFileSync, writeFileSync } from 'fs';
+import { spawnSync } from 'child_process';
+import { accessSync, F_OK, readdirSync, readFileSync, stat, statSync } from 'fs';
 import { dirname, join } from 'path';
 
-import * as glob from 'glob';
 import { dest, src, start, task } from 'gulp';
 import * as gulpif from 'gulp-if';
 import * as watch from 'gulp-watch';
-import * as rollup from 'rollup';
-import * as nodeResolve from 'rollup-plugin-node-resolve';
-import * as commonjs from 'rollup-plugin-commonjs';
 import * as runSequence from 'run-sequence';
 import { obj } from 'through2';
 import * as VinylFile from 'vinyl';
-import { argv } from 'yargs';
 
-import { DEMOS_SRC_ROOT, DIST_DEMOS_COMPONENTS_ROOT, DIST_DEMOS_ROOT, DIST_NAME, DEMOS_NAME, ES5, ES_2015, LOCAL_SERVER_PORT, PROJECT_ROOT, SCRIPTS_ROOT, SRC_COMPONENTS_ROOT, SRC_ROOT } from '../constants';
-import { createTempTsConfig, deleteFiles, runNgc } from '../util';
+import { DEMOS_SRC_ROOT, DIST_DEMOS_ROOT, DIST_NAME, DEMOS_NAME, ES5, ES_2015, LOCAL_SERVER_PORT, SCRIPTS_ROOT } from '../constants';
+import { createTempTsConfig, getFolderInfo } from '../util';
 
 task('demos.prod', demosBuild);
 
 function demosBuild(done: (err: any) => void) {
   runSequence(
+    'demos.copyIonic',
     'demos.clean',
     'demos.polyfill',
     'demos.copySource',
-    'demos.compileTests',
     'demos.copyExternalDependencies',
     'demos.sass',
     'demos.fonts',
-    'demos.bundleProd',
+    'demos.compileTests',
     done);
 }
 
+task('demos.copyIonic', (done: (err: any) => void) => {
+  runSequence(
+    'compile.release',
+    'release.compileSass',
+    'release.fonts',
+    'release.sass',
+    'release.createUmdBundle',
+    done);
+});
+
 task('demos.copySource', (done: Function) => {
-  const stream = src([`${SRC_ROOT}/**/*`, `!${SRC_ROOT}/components/*/test{,/**/*}`, `${DEMOS_SRC_ROOT}/**/*`])
+  const stream = src([`${DEMOS_SRC_ROOT}/**/*`])
     .pipe(gulpif(/app.module.ts$/, createIndexHTML()))
     .pipe(dest(DIST_DEMOS_ROOT));
 
@@ -40,7 +46,7 @@ task('demos.copySource', (done: Function) => {
 
   function createIndexHTML() {
     const indexTemplate = readFileSync(`${SCRIPTS_ROOT}/${DEMOS_NAME}/demos.template.prod.html`);
-    const indexTs = readFileSync(`${SCRIPTS_ROOT}/${DEMOS_NAME}/entry.ts`);
+    const indexTs = readFileSync(`${SCRIPTS_ROOT}/${DEMOS_NAME}/main.ts`);
 
     return obj(function (file, enc, next) {
       this.push(new VinylFile({
@@ -51,7 +57,7 @@ task('demos.copySource', (done: Function) => {
       this.push(new VinylFile({
         base: file.base,
         contents: new Buffer(indexTs),
-        path: join(dirname(file.path), 'entry.ts'),
+        path: join(dirname(file.path), 'main.ts'),
       }));
       next(null, file);
     });
@@ -60,104 +66,82 @@ task('demos.copySource', (done: Function) => {
 
 task('demos.compileTests', (done: Function) => {
   let folderInfo = getFolderInfo();
-  buildDemoTests(folderInfo, done);
-});
 
-function buildDemoTests(folderInfo: any, done: Function) {
-  let includeGlob = ['./*/app.module.ts', './*/entry.ts'];
   if (folderInfo.componentName && folderInfo.componentTest) {
-    includeGlob = [
-      `./${folderInfo.componentName}/app.module.ts`,
-      `./${folderInfo.componentName}/entry.ts`,
-    ];
-  }
-
-  createTempTsConfig(includeGlob, ES5, ES_2015, `${DIST_DEMOS_ROOT}/tsconfig.json`);
-  runNgc(`${DIST_DEMOS_ROOT}/tsconfig.json`, (err) => {
-    if (err) {
-      done(err);
-      return;
-    }
-    // clean up any .ts files that remain
-    deleteFiles([`${DIST_DEMOS_ROOT}/**/*.ts`, `!${DIST_DEMOS_ROOT}/**/*.ngfactory.ts`, `!${DIST_DEMOS_ROOT}/**/*.d.ts`], done);
-  });
-}
-
-task('demos.bundleProd', (done) => {
-  let includeGlob = `${DIST_DEMOS_ROOT}/*/entry.js`;
-  let folderInfo = getFolderInfo();
-  if (folderInfo.componentName && folderInfo.componentTest) {
-    includeGlob = `${DIST_DEMOS_ROOT}/${folderInfo.componentName}/entry.js`;
-  }
-  glob(includeGlob, {}, function (er, files) {
-    var directories = files.map(function (file) {
-      return dirname(file);
-    });
-
-    let indexFileContents = directories.map(function (dir) {
-      let testName = dir.replace(`${DIST_DEMOS_ROOT}/`, '');
-      let fileName = dir.replace(`${PROJECT_ROOT}`, '');
-      return `<p><a href="${fileName}">${testName}</a></p>`;
-    }, []);
-
-    writeFileSync(`${DIST_DEMOS_ROOT}/index.html`,
-      '<!DOCTYPE html><html lang="en"><head></head><body style="width: 500px; margin: 100px auto">\n' +
-      indexFileContents.join('\n') +
-      '</center></body></html>'
-    );
-
-    createBundles(files).then(() => {
-      done();
-    }).catch(err => {
-      done(err);
-    });
-  });
-});
-
-function createBundles(files: string[]) {
-  let start;
-  if (!files) {
-    return Promise.reject(new Error('list of files is null'));
-  } else if (files.length === 0) {
-    return Promise.resolve();
+    buildTest(folderInfo.componentName);
   } else {
-    const outputFileName = join(dirname(files[0]), 'app.bundle.js');
-    start = Date.now();
-    return bundle(files[0], outputFileName).then(() => {
-      const end = Date.now();
-      const seconds = (end - start) / 1000;
-      console.log(`Took ${seconds} seconds to process ${files[0]}`);
-      const remainingFiles = files.concat();
-      remainingFiles.shift();
-      return createBundles(remainingFiles);
-    }).catch(err => {
-      return Promise.reject(err);
-    });
+    buildAllTests(done);
   }
+});
+
+function buildTest(folderName: string) {
+  let includeGlob = [`./dist/demos/${folderName}/*.ts`];
+  let pathToWriteFile = `${DIST_DEMOS_ROOT}/${folderName}/tsconfig.json`;
+
+  createTempTsConfig(includeGlob, ES5, ES_2015, `${DEMOS_SRC_ROOT}/tsconfig.json`, pathToWriteFile);
+  return runAppScripts(folderName);
 }
 
-function bundle(inputFile: string, outputFile: string): Promise<any> {
-  console.log(`Starting rollup on ${inputFile} ... writing to ${outputFile}`);
-  return rollup.rollup({
-    entry: inputFile,
-    plugins: [
-      commonjs(),
-      nodeResolve({
-        module: true,
-        jsnext: true,
-        main: true,
-        extensions: ['.js']
-      })
-    ]
-  }).then(bundle => {
-    return bundle.write({
-      format: 'iife',
-      dest: outputFile,
+function buildAllTests(done: Function) {
+  let folders = getFolders('./dist/demos/');
+  let promises: Promise<any>[] = [];
+
+  folders.forEach(folder => {
+    stat(`./dist/demos/${folder}/app.module.ts`, function(err, stat) {
+      if (err == null) {
+        const promise = buildTest(folder);
+        promises.push(promise);
+      }
     });
   });
+
+  Promise.all(promises).then(() => {
+    done();
+  }).catch(err => {
+    done(err);
+  });
 }
 
-task('demos.watchProd', ['demos.copyExternalDependencies', 'demos.sass', 'demos.fonts'], (done: Function) => {
+function runAppScripts(folderName: string) {
+  console.log('Running app scripts with', folderName);
+
+  let sassConfigPath = 'scripts/demos/sass.config.js';
+
+  let appEntryPoint = `dist/demos/${folderName}/main.ts`;
+  let distDir = `dist/demos/${folderName}/`;
+
+  let tsConfig = distDir + 'tsconfig.json';
+
+  try {
+    const scriptsCmd = spawnSync('ionic-app-scripts',
+      ['build',
+      '--prod',
+      '--sass', sassConfigPath,
+      '--appEntryPoint', appEntryPoint,
+      '--srcDir', distDir,
+      '--wwwDir', distDir,
+      '--tsconfig', tsConfig
+      ]);
+
+    if (scriptsCmd.status !== 0) {
+      return Promise.reject(scriptsCmd.stderr.toString());
+    }
+
+    console.log(scriptsCmd.output.toString());
+    return Promise.resolve();
+  } catch (ex) {
+    return Promise.reject(ex);
+  }
+}
+
+function getFolders(dir) {
+  return readdirSync(dir)
+    .filter(function(file) {
+      return statSync(join(dir, file)).isDirectory();
+    });
+}
+
+task('demos.watchProd', (done: Function) => {
   const folderInfo = getFolderInfo();
   let demoTestPath = DEMOS_SRC_ROOT;
 
@@ -172,13 +156,13 @@ task('demos.watchProd', ['demos.copyExternalDependencies', 'demos.sass', 'demos.
     return;
   }
 
-  if (demosComponentsExists()) {
+  if (demosComponentsExists(folderInfo)) {
     // already generated the demos directory
     demosWatch(folderInfo.componentName, folderInfo.componentTest);
 
   } else {
     // generate the demos directory
-    console.log('Generated demos builds first...');
+    console.log('Generate demo builds first...');
     demosBuild(() => {
       demosWatch(folderInfo.componentName, folderInfo.componentTest);
     });
@@ -212,31 +196,27 @@ function demosWatch(componentName: string, componentTest: string) {
     start('demos.sass');
   });
 
-  console.log(`http://localhost:${LOCAL_SERVER_PORT}/${DIST_NAME}/${DEMOS_NAME}/${componentName}`);
+  let serverUrl = `http://localhost:${LOCAL_SERVER_PORT}/${DIST_NAME}/${DEMOS_NAME}`;
+  if (componentName) {
+    serverUrl += `/${componentName}`;
+  }
+
+  console.log(serverUrl);
 
   start('demos.serve');
 }
 
-function demosComponentsExists(): boolean {
+function demosComponentsExists(folderInfo: any): boolean {
+  let componentPath = DIST_DEMOS_ROOT;
+
+  if (folderInfo.componentName && folderInfo.componentTest) {
+    componentPath += `/${folderInfo.componentName}/build`;
+  }
+
   try {
-    accessSync(DIST_DEMOS_COMPONENTS_ROOT, F_OK);
+    accessSync(componentPath, F_OK);
   } catch (e) {
     return false;
   }
   return true;
 }
-
-function getFolderInfo() {
-  let componentName: string = null;
-  let componentTest: string = null;
-  const folder: string = argv.folder || argv.f;
-  if (folder && folder.length) {
-    const folderSplit = folder.split('/');
-    componentName = folderSplit[0];
-    componentTest = (folderSplit.length > 1 ? folderSplit[1] : 'basic');
-  }
-  return {
-    componentName: componentName,
-    componentTest: componentTest
-  };
-}

scripts/gulp/tasks/e2e.prod.ts

@@ -12,10 +12,9 @@ import * as commonjs from 'rollup-plugin-commonjs';
 import * as runSequence from 'run-sequence';
 import { obj } from 'through2';
 import * as VinylFile from 'vinyl';
-import { argv } from 'yargs';
 
 import { DIST_E2E_COMPONENTS_ROOT, DIST_E2E_ROOT, DIST_NAME, E2E_NAME, ES5, ES_2015, LOCAL_SERVER_PORT, PROJECT_ROOT, SCRIPTS_ROOT, SRC_COMPONENTS_ROOT, SRC_ROOT } from '../constants';
-import { createTempTsConfig, deleteFiles, runNgc } from '../util';
+import { createTempTsConfig, deleteFiles, getFolderInfo, runNgc } from '../util';
 
 task('e2e.prod', e2eBuild);
 
@@ -109,7 +108,7 @@ function buildE2ETests(folderInfo: any, done: Function) {
       `./components/${folderInfo.componentName}/test/${folderInfo.componentTest}/entry.ts`,
     ];
   }
-  createTempTsConfig(includeGlob, ES5, ES_2015, `${DIST_E2E_ROOT}/tsconfig.json`);
+  createTempTsConfig(includeGlob, ES5, ES_2015, `${PROJECT_ROOT}/tsconfig.json`, `${DIST_E2E_ROOT}/tsconfig.json`);
   runNgc(`${DIST_E2E_ROOT}/tsconfig.json`, (err) => {
     if (err) {
       done(err);
@@ -261,19 +260,4 @@ function e2eComponentsExists(): boolean {
     return false;
   }
   return true;
-}
-
-function getFolderInfo() {
-  let componentName: string = null;
-  let componentTest: string = null;
-  const folder: string = argv.folder || argv.f;
-  if (folder && folder.length) {
-    const folderSplit = folder.split('/');
-    componentName = folderSplit[0];
-    componentTest = (folderSplit.length > 1 ? folderSplit[1] : 'basic');
-  }
-  return {
-    componentName: componentName,
-    componentTest: componentTest
-  };
 }

scripts/gulp/util.ts

@@ -9,6 +9,7 @@ import * as multiEntry from 'rollup-plugin-multi-entry';
 import * as nodeResolve from 'rollup-plugin-node-resolve';
 import * as through from 'through2';
 import * as uglifyPlugin from 'rollup-plugin-uglify';
+import { argv } from 'yargs';
 
 export function mergeObjects(obj1: any, obj2: any ) {
   if (! obj1) {
@@ -27,15 +28,15 @@ export function mergeObjects(obj1: any, obj2: any ) {
   return obj3;
 }
 
-function getRootTsConfig(): any {
-  const json = fs.readFileSync(`${PROJECT_ROOT}/tsconfig.json`);
+function getRootTsConfig(pathToReadFile): any {
+  const json = fs.readFileSync(pathToReadFile);
 
   let tsConfig = JSON.parse(json.toString());
   return tsConfig;
 }
 
-export function createTempTsConfig(includeGlob: string[], target: string, moduleType: string, pathToWriteFile: string): any {
-  let config = getRootTsConfig();
+export function createTempTsConfig(includeGlob: string[], target: string, moduleType: string, pathToReadFile: string, pathToWriteFile: string): any {
+  let config = getRootTsConfig(pathToReadFile);
   if (!config.compilerOptions) {
     config.compilerOptions = {};
   }
@@ -272,3 +273,18 @@ function bundlePolyfill(pathsToIncludeInPolyfill: string[], outputPath: string)
     });
   });
 }
+
+export function getFolderInfo() {
+  let componentName: string = null;
+  let componentTest: string = null;
+  const folder: string = argv.folder || argv.f;
+  if (folder && folder.length) {
+    const folderSplit = folder.split('/');
+    componentName = folderSplit[0];
+    componentTest = (folderSplit.length > 1 ? folderSplit[1] : 'basic');
+  }
+  return {
+    componentName: componentName,
+    componentTest: componentTest
+  };
+}

tsconfig.json

@@ -22,4 +22,4 @@
   "atom": {
     "rewriteTsconfig": false
   }
-}
+}