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

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
+  };
+}