chore(scripts): normalize paths and include typeRoots for Windows (#11933)

Short description of what this resolves:

Allows our e2e tests to run on a Windows machine

Changes proposed in this pull request:

Normalize paths using path.join()
Add typeRoots to the root tsconfig file
Change the spawnedCommand based on the OS
Fixes: #11551

scripts/demos/copy.config.js

@@ -4,7 +4,7 @@ var path = require('path');
 module.exports = {
   copyAssets: {
     src: [path.join(path.dirname(process.env.IONIC_APP_ENTRY_POINT), '..', 'assets', '**', '*')],
-    dest: '{{WWW}}/assets'
+    dest: path.join('{{WWW}}', 'assets')
   },
   copyIndexContent: {
     src: [path.join(process.cwd(), 'scripts', 'demos', 'index.html')],
@@ -12,7 +12,7 @@ module.exports = {
   },
   copyFonts: {
     src: [`${process.cwd()}/node_modules/ionicons/dist/fonts/**/*`, `${process.cwd()}/src/fonts/**/*`],
-    dest: '{{WWW}}/assets/fonts'
+    dest: path.join('{{WWW}}', 'assets', 'fonts')
   },
   copyPolyfills: {
     src: [path.join(process.cwd(), 'dist', 'demos', 'polyfills', 'polyfills.js')],

scripts/demos/watch.config.js

@@ -1,6 +1,6 @@
 var path = require('path');
 
-var watch = require('../../node_modules/@ionic/app-scripts/dist/watch');
+var watch = require(path.join('..', '..', 'node_modules', '@ionic', 'app-scripts', 'dist', 'watch'));
 
 var entryPointDirectory = path.dirname(process.env.IONIC_APP_ENTRY_POINT)
 
@@ -9,7 +9,7 @@ module.exports = {
     paths: [path.join(entryPointDirectory, '..', '**', '*.(ts|html|s(c|a)ss)')],
     options: { ignored: [path.join(entryPointDirectory, '..', '**', '*.spec.ts'),
                   path.join(entryPointDirectory, '..', '**', '*.e2e.ts'),
-                  '**/*.DS_Store'] },
+                  path.join('**', '*.DS_Store')] },
     callback: watch.buildUpdate
   }
 }

scripts/e2e/copy.config.js

@@ -4,15 +4,15 @@ var path = require('path');
 module.exports = {
   copyAssets: {
     src: [path.join(path.dirname(process.env.IONIC_APP_ENTRY_POINT), '..', 'assets', '**', '*')],
-    dest: '{{WWW}}/assets'
+    dest: path.join('{{WWW}}', 'assets')
   },
   copyIndexContent: {
     src: [path.join(process.cwd(), 'scripts', 'e2e', 'index.html')],
     dest: '{{WWW}}'
   },
   copyFonts: {
-    src: [`${process.cwd()}/node_modules/ionicons/dist/fonts/**/*`, `${process.cwd()}/src/fonts/**/*`],
+    src: [path.join(process.cwd(), 'node_modules', 'ionicons', 'dist', 'fonts', '**', '*'), path.join(process.cwd(), 'src', 'fonts', '**', '*')],
-    dest: '{{WWW}}/assets/fonts'
+    dest: path.join('{{WWW}}', 'assets', 'fonts')
   },
   copyPolyfills: {
     src: [path.join(process.cwd(), 'dist', 'e2e', 'polyfills', 'polyfills.ng.js')],

scripts/e2e/e2e-publish.js

@@ -4,7 +4,7 @@ module.exports = function(options) {
   var fs = require('fs');
   var path = require('path');
   var request = require('request');
-  var inputDir = path.join(__dirname, '../../dist/e2e/tests');
+  var inputDir = path.join(__dirname, '..', '..' , 'dist', 'e2e', 'tests');
   var uploadQueue = [];
 
   var ignoreFiles = /(\/test\/|\/ts\/|\/q\/|\/ionic-site\/|\/docs\/|\/examples\/|\/inquirer\/|\/lodash\/|\/tooling\/|\/colors\/|\/bin\/|\.ts$|\.bin|\.map$|\.md$|\.git|\.scss$|\.yml$|\.yaml$|\.dart$|\.txt|\.npm|bower|DS_Store|LICENSE)/i;
@@ -13,15 +13,15 @@ module.exports = function(options) {
     fs.readdir(dir, function(err, list) {
 
       list.forEach(function(file) {
-        var url = urlPath + '/' + file;
+        var url = path.join(urlPath, file);
 
 
-        fs.stat(dir + '/' + file, function(err, stat) {
+        fs.stat(path.join(dir, file), function(err, stat) {
           if (stat && stat.isDirectory()) {
-            uploadFiles(dir + '/' + file, urlPath + '/' + file);
+            uploadFiles(path.join(dir, file), path.join(urlPath, file);
           } else {
             if ( shouldProcessPath (url) ){
-              uploadFile(url, dir + '/' + file);
+              uploadFile(url, path.join(dir, file));
             }
           }
         });

scripts/gulp/constants.ts

@@ -20,7 +20,7 @@ export const BUNDLES = 'bundles';
 export const SITE_NAME = 'ionic-site';
 
 // File Paths
-export const PROJECT_ROOT = join(__dirname, '../..');
+export const PROJECT_ROOT = join(__dirname, '..', '..');
 export const DEMOS_ROOT = join(PROJECT_ROOT, DEMOS_NAME);
 export const DEMOS_SRC_ROOT = join(DEMOS_ROOT, SRC_NAME);
 export const DIST_ROOT = join(PROJECT_ROOT, DIST_NAME);
@@ -45,7 +45,7 @@ export const WORKERS_SRC = join(SCRIPTS_ROOT, 'workers');
 
 // NPM
 export const NPM_VENDOR_FILES = [
-  '@angular', 'core-js/client', 'rxjs', 'systemjs/dist', 'zone.js/dist'
+  '@angular', join('core-js', 'client'), 'rxjs', join('systemjs', 'dist'), join('zone.js', 'dist')
 ];
 
 

scripts/gulp/tasks/build.ts

@@ -1,4 +1,5 @@
 import { task } from 'gulp';
+import { join } from 'path';
 import { DIST_BUILD_ROOT, DIST_BUILD_ES2015_ROOT, DIST_BUILD_UMD_ROOT, ES5, ES_2015, PROJECT_ROOT, UMD_MODULE } from '../constants';
 import { copySourceToDest, createTempTsConfig, deleteFiles, runNgc, runTsc } from '../util';
 
@@ -7,8 +8,8 @@ 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, `${PROJECT_ROOT}/tsconfig.json`, `${DIST_BUILD_UMD_ROOT}/tsconfig.json`);
+    createTempTsConfig([join('.', '**', '*.ts')], ES5, UMD_MODULE, join(PROJECT_ROOT, 'tsconfig.json'), join(DIST_BUILD_UMD_ROOT, 'tsconfig.json'));
-    runNgc(`${DIST_BUILD_UMD_ROOT}/tsconfig.json`, (err) => {
+    runNgc(join(DIST_BUILD_UMD_ROOT, 'tsconfig.json'), (err) => {
       if (err) {
         done(err);
         return;
@@ -27,8 +28,8 @@ export function buildIonicAngularUmdTsc(excludeSpec: boolean, stripDebug: boolea
   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, `${PROJECT_ROOT}/tsconfig.json`, `${DIST_BUILD_UMD_ROOT}/tsconfig.json`);
+    createTempTsConfig([join('.', '**', '*.ts')], ES5, UMD_MODULE, join(PROJECT_ROOT, 'tsconfig.json'), join(DIST_BUILD_UMD_ROOT, 'tsconfig.json'));
-    runTsc(`${DIST_BUILD_UMD_ROOT}/tsconfig.json`, (err) => {
+    runTsc(join(DIST_BUILD_UMD_ROOT, 'tsconfig.json'), (err) => {
       if (err) {
         done(err);
         return;
@@ -48,8 +49,8 @@ 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, `${PROJECT_ROOT}/tsconfig.json`, `${DIST_BUILD_ROOT}/tsconfig.json`);
+    createTempTsConfig([join('.', '**', '*.ts')], ES5, ES_2015, join(PROJECT_ROOT, 'tsconfig.json'), join(DIST_BUILD_ROOT, 'tsconfig.json'));
-    runNgc(`${DIST_BUILD_ROOT}/tsconfig.json`, (err) => {
+    runNgc(join(DIST_BUILD_ROOT, 'tsconfig.json'), (err) => {
       if (err) {
         done(err);
         return;
@@ -67,8 +68,8 @@ 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, `${PROJECT_ROOT}/tsconfig.json`, `${DIST_BUILD_ES2015_ROOT}/tsconfig.json`);
+    createTempTsConfig([join('.', '**', '*.ts')], ES_2015, ES_2015, join(PROJECT_ROOT, 'tsconfig.json'), join(DIST_BUILD_ES2015_ROOT, 'tsconfig.json'));
-    runNgc(`${DIST_BUILD_ES2015_ROOT}/tsconfig.json`, (err) => {
+    runNgc(join(DIST_BUILD_ES2015_ROOT, 'tsconfig.json'), (err) => {
       if (err) {
         done(err);
         return;

scripts/gulp/tasks/e2e.dev.ts

@@ -47,5 +47,5 @@ function serveTest(folderInfo: any) {
   const appNgModulePath = join(dirname(appEntryPoint), 'app.module.ts');
   const distDir = join(distTestRoot, 'www');
 
-  return runAppScriptsServe(folderInfo.componentName + '/' + folderInfo.componentTest, appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath, null);
+  return runAppScriptsServe(join(folderInfo.componentName, folderInfo.componentTest), appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath, null);
 }

scripts/gulp/tasks/e2e.prod.ts

@@ -21,7 +21,7 @@ task('e2e.prepare', (done: Function) => {
 
 task('e2e.prepareSass', (done: Function) => {
   const version = `E2E-${createTimestamp()}`;
-  writeFileSync(join(SRC_ROOT, 'themes/version.scss'), `$ionic-version: "${version}";`);
+  writeFileSync(join(SRC_ROOT, 'themes', 'version.scss'), `$ionic-version: "${version}";`);
   done();
 });
 
@@ -41,7 +41,7 @@ task('e2e.prod', ['e2e.prepare'], (done: Function) => {
 });
 
 function e2eComponentExists(folderInfo: any): boolean {
-  let componentPath = `${SRC_COMPONENTS_ROOT}/${folderInfo.componentName}/test/${folderInfo.componentTest}/app`;
+  let componentPath = join(SRC_COMPONENTS_ROOT, folderInfo.componentName, 'test', folderInfo.componentTest, 'app');
 
   try {
     accessSync(componentPath);
@@ -62,11 +62,11 @@ function filterE2eTestfiles() {
     const folderInfo = getFolderInfo();
     if (folderInfo && folderInfo.componentName && folderInfo.componentTest) {
       if (!e2eComponentExists(folderInfo)) {
-        console.log(`Can't find E2E test "${folderInfo.componentName}/test/${folderInfo.componentTest}". Make sure that the test exists and you are passing the correct folder.`);
+        console.log('Cannot find E2E test ', join(folderInfo.componentName, 'test', folderInfo.componentTest), '. Make sure that the test exists and you are passing the correct folder.');
         return [];
       }
       const filtered = entryPoints.filter(entryPoint => {
-        return entryPoint.indexOf(`${folderInfo.componentName}/test/${folderInfo.componentTest}`) >= 0;
+        return entryPoint.indexOf(join(folderInfo.componentName, 'test', folderInfo.componentTest)) >= 0;
       });
       return filtered;
     }
@@ -154,7 +154,7 @@ function copyProtractorTestContent(filePaths: string[]): Promise<any> {
 }
 
 function applyTemplate(filePathContent: Map<string, string>) {
-  const buildConfig = require('../../build/config');
+  const buildConfig = require(join('..', '..', 'build', 'config'));
   const templateFileContent = readFileSync(join(SCRIPTS_ROOT, 'e2e', 'e2e.template.js'));
   const templater = template(templateFileContent.toString());
   const modifiedMap = new Map<string, string>();
@@ -235,7 +235,7 @@ task('e2e.polyfill', (done: Function) => {
     return done();
   }
 
-  writePolyfills('dist/e2e/polyfills').then(() => {
+  writePolyfills(join('dist', 'e2e', 'polyfills')).then(() => {
     done();
   }).catch(err => {
     done(err);
@@ -249,9 +249,8 @@ task('e2e.openProd', (done: Function) => {
 task('e2e.open', (done: Function) => {
   const folderInfo = getFolderInfo();
   if (folderInfo && folderInfo.componentName && folderInfo.componentTest) {
-    const filePath = `${folderInfo.componentName}/test/${folderInfo.componentTest}/www/index.html`;
+    const filePath = join(DIST_E2E_COMPONENTS_ROOT, folderInfo.componentName, 'test', folderInfo.componentTest, 'www', 'index.html');
-    const fullPath = join(DIST_E2E_COMPONENTS_ROOT, filePath);
+    const spawnedCommand = spawn('open', [filePath]);
-    const spawnedCommand = spawn('open', [fullPath]);
 
     spawnedCommand.on('close', (code: number) => {
       done();

scripts/gulp/tasks/polyfill.source.ts

@@ -1,9 +1,10 @@
 import { task } from 'gulp';
 import { writePolyfills } from '../util';
+import { join } from 'path';
 
 
 task('src.polyfill', (done: Function) => {
-  writePolyfills('scripts/polyfill').then(() => {
+  writePolyfills(join('scripts', 'polyfills')).then(() => {
     done();
   }).catch(err => {
     done(err);

scripts/gulp/tasks/polyfill.ts

@@ -1,10 +1,11 @@
 import { task, src, dest } from 'gulp';
 import { writePolyfills } from '../util';
+import { join } from 'path';
 
 task('polyfill', ['polyfill.copy-readme', 'polyfill.write']);
 
 task('polyfill.write', (done: Function) => {
-  writePolyfills('dist/ionic-angular/polyfills').then(() => {
+  writePolyfills(join('dist', 'ionic-angular', 'polyfills')).then(() => {
     done();
   }).catch(err => {
     done(err);
@@ -12,6 +13,6 @@ task('polyfill.write', (done: Function) => {
 });
 
 task('polyfill.copy-readme', (done: Function) => {
-  return src('scripts/polyfill/readme.md')
+  return src(join('scripts', 'polyfill', 'readme.md'))
-    .pipe(dest('dist/ionic-angular/polyfills/'), done);
+    .pipe(dest(join('dist', 'ionic-angular', 'polyfills')), done);
 });

scripts/gulp/tasks/snapshot.ts

@@ -77,7 +77,9 @@ function protractor(callback, args, testId: string) {
 
   console.log(`Serving ${process.cwd()} on http://localhost:${buildConfig.protractorPort}`);
 
-  const child = spawn('protractor', args, {
+  let spawnCommand = process.platform === 'win32' ? 'protractor.cmd' : 'protractor';
+
+  const child = spawn(spawnCommand, args, {
     stdio: [process.stdin, process.stdout, 'pipe']
   });
 

scripts/gulp/util.ts

@@ -1,4 +1,4 @@
-import { spawn } from 'child_process';
+import { spawn } from 'cross-spawn';
 import { NODE_MODULES_ROOT, SRC_ROOT } from './constants';
 import { src, dest } from 'gulp';
 import { dirname, join } from 'path';
@@ -60,7 +60,9 @@ export function createTempTsConfig(includeGlob: string[], target: string, module
     config.compilerOptions = Object.assign(config.compilerOptions, overrideCompileOptions);
   }
 
+  // TS represents paths internally with '/' and expects the tsconfig path to be in this format
   let json = JSON.stringify(config, null, 2);
+  json = json.replace(/\\\\/g, '/');
 
   const dirToCreate = dirname(pathToWriteFile);
   ensureDirSync(dirToCreate);
@@ -217,9 +219,11 @@ export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string
   }
 
   return new Promise((resolve, reject) => {
-    const args = ['./node_modules/.bin/ionic-app-scripts'].concat(scriptArgs);
+    let pathToAppScripts = join(NODE_MODULES_ROOT, '.bin', 'ionic-app-scripts');
-    console.log(`node ${args.join(' ')}`);
+    pathToAppScripts = process.platform === 'win32' ? pathToAppScripts + '.cmd' : pathToAppScripts;
-    const spawnedCommand = spawn('node', args, {stdio: 'inherit'});
+
+    const spawnedCommand = spawn(pathToAppScripts, scriptArgs, {stdio: 'inherit'});
+    console.log(`${pathToAppScripts} ${scriptArgs.join(' ')}`);
 
     spawnedCommand.on('close', (code: number) => {
       if (code === 0) {

tsconfig.json

@@ -11,6 +11,9 @@
     "removeComments": false,
     "sourceMap": true,
     "target": "es2015",
+    "typeRoots": [
+      "./node_modules/@types"
+    ],    
     "types": ["jasmine", "systemjs"]
   },
   "include": [