fix(build): better support for saving multiple files at a time

Author: danbucholtz

src/build.ts

@@ -1,5 +1,7 @@
-import { BuildContext, BuildState, BuildUpdateMessage } from './util/interfaces';
+import { FILE_CHANGE_EVENT, FILE_DELETE_EVENT } from './util/constants';
+import { BuildContext, BuildState, BuildUpdateMessage, ChangedFile } from './util/interfaces';
 import { BuildError } from './util/errors';
+import { readFileAsync } from './util/helpers';
 import { bundle, bundleUpdate } from './bundle';
 import { clean } from './clean';
 import { copy } from './copy';
@@ -121,7 +123,7 @@ function buildDev(context: BuildContext) {
 }
 
 
-export function buildUpdate(event: string, filePath: string, context: BuildContext) {
+export function buildUpdate(changedFiles: ChangedFile[], context: BuildContext) {
   return new Promise(resolve => {
     const logger = new Logger('build');
 
@@ -151,13 +153,20 @@ export function buildUpdate(event: string, filePath: string, context: BuildConte
           // this one is useful when only a sass changed happened
           // and the webpack only needs to livereload the css
           // but does not need to do a full page refresh
-          emit(EventType.FileChange, resolveValue.changedFile);
+          emit(EventType.FileChange, resolveValue.changedFiles);
         }
 
-        if (filePath.endsWith('.ts')) {
+        let requiresLintUpdate = false;
+        for (const changedFile of changedFiles) {
+          if (changedFile.ext === '.ts' && changedFile.event === 'ch') {
+            requiresLintUpdate = true;
+            break;
+          }
+        }
+        if (requiresLintUpdate) {
           // a ts file changed, so let's lint it too, however
           // this task should run as an after thought
-          lintUpdate(event, filePath, context);
+          lintUpdate(changedFiles, context);
         }
 
         logger.finish('green', true);
@@ -170,16 +179,16 @@ export function buildUpdate(event: string, filePath: string, context: BuildConte
 
     // kick off all the build tasks
     // and the tasks that can run parallel to all the build tasks
-    const buildTasksPromise = buildUpdateTasks(event, filePath, context);
-    const parallelTasksPromise = buildUpdateParallelTasks(event, filePath, context);
+    const buildTasksPromise = buildUpdateTasks(changedFiles, context);
+    const parallelTasksPromise = buildUpdateParallelTasks(changedFiles, context);
 
     // whether it was resolved or rejected, we need to do the same thing
     buildTasksPromise
       .then(buildTasksDone)
       .catch(() => {
         buildTasksDone({
           requiresAppReload: false,
-          changedFile: filePath
+          changedFiles: changedFiles
         });
       });
   });
@@ -189,18 +198,21 @@ export function buildUpdate(event: string, filePath: string, context: BuildConte
  * Collection of all the build tasks than need to run
  * Each task will only run if it's set with eacn BuildState.
  */
-function buildUpdateTasks(event: string, filePath: string, context: BuildContext) {
+function buildUpdateTasks(changedFiles: ChangedFile[], context: BuildContext) {
   const resolveValue: BuildTaskResolveValue = {
     requiresAppReload: false,
-    changedFile: filePath
+    changedFiles: []
   };
 
   return Promise.resolve()
+    .then(() => {
+      return loadFiles(changedFiles, context);
+    })
     .then(() => {
       // TEMPLATE
       if (context.templateState === BuildState.RequiresUpdate) {
         resolveValue.requiresAppReload = true;
-        return templateUpdate(event, filePath, context);
+        return templateUpdate(changedFiles, context);
       }
       // no template updates required
       return Promise.resolve();
@@ -213,7 +225,7 @@ function buildUpdateTasks(event: string, filePath: string, context: BuildContext
         // we've already had a successful transpile once, only do an update
         // not that we've also already started a transpile diagnostics only
         // build that only needs to be completed by the end of buildUpdate
-        return transpileUpdate(event, filePath, context);
+        return transpileUpdate(changedFiles, context);
 
       } else if (context.transpileState === BuildState.RequiresBuild) {
         // run the whole transpile
@@ -229,7 +241,7 @@ function buildUpdateTasks(event: string, filePath: string, context: BuildContext
       if (context.bundleState === BuildState.RequiresUpdate) {
         // we need to do a bundle update
         resolveValue.requiresAppReload = true;
-        return bundleUpdate(event, filePath, context);
+        return bundleUpdate(changedFiles, context);
 
       } else if (context.bundleState === BuildState.RequiresBuild) {
         // we need to do a full bundle build
@@ -244,14 +256,30 @@ function buildUpdateTasks(event: string, filePath: string, context: BuildContext
       // SASS
       if (context.sassState === BuildState.RequiresUpdate) {
         // we need to do a sass update
-        return sassUpdate(event, filePath, context).then(outputCssFile => {
-          resolveValue.changedFile = outputCssFile;
+        return sassUpdate(changedFiles, context).then(outputCssFile => {
+          const changedFile: ChangedFile = {
+            event: FILE_CHANGE_EVENT,
+            ext: '.css',
+            filePath: outputCssFile
+          };
+
+          context.fileCache.set(outputCssFile, { path: outputCssFile, content: outputCssFile});
+
+          resolveValue.changedFiles.push(changedFile);
         });
 
       } else if (context.sassState === BuildState.RequiresBuild) {
         // we need to do a full sass build
         return sass(context).then(outputCssFile => {
-          resolveValue.changedFile = outputCssFile;
+          const changedFile: ChangedFile = {
+            event: FILE_CHANGE_EVENT,
+            ext: '.css',
+            filePath: outputCssFile
+          };
+
+          context.fileCache.set(outputCssFile, { path: outputCssFile, content: outputCssFile});
+
+          resolveValue.changedFiles.push(changedFile);
         });
       }
       // no sass build required
@@ -262,17 +290,37 @@ function buildUpdateTasks(event: string, filePath: string, context: BuildContext
     });
 }
 
+function loadFiles(changedFiles: ChangedFile[], context: BuildContext) {
+  // UPDATE IN-MEMORY FILE CACHE
+  let promises: Promise<any>[] = [];
+  for (const changedFile of changedFiles) {
+    if (changedFile.event === FILE_DELETE_EVENT) {
+      // remove from the cache on delete
+      context.fileCache.remove(changedFile.filePath);
+    } else {
+      // load the latest since the file changed
+      const promise = readFileAsync(changedFile.filePath);
+      promises.push(promise);
+      promise.then((content: string) => {
+        context.fileCache.set(changedFile.filePath, { path: changedFile.filePath, content: content});
+      });
+    }
+  }
+
+  return Promise.all(promises);
+}
+
 interface BuildTaskResolveValue {
   requiresAppReload: boolean;
-  changedFile: string;
+  changedFiles: ChangedFile[];
 }
 
 /**
  * parallelTasks are for any tasks that can run parallel to the entire
  * build, but we still need to make sure they've completed before we're
  * all done, it's also possible there are no parallelTasks at all
  */
-function buildUpdateParallelTasks(event: string, filePath: string, context: BuildContext) {
+function buildUpdateParallelTasks(changedFiles: ChangedFile[], context: BuildContext) {
   const parallelTasks: Promise<any>[] = [];
 
   if (context.transpileState === BuildState.RequiresUpdate) {

src/bundle.ts

@@ -1,4 +1,4 @@
-import { BuildContext } from './util/interfaces';
+import { BuildContext, ChangedFile } from './util/interfaces';
 import { BuildError, IgnorableError } from './util/errors';
 import { generateContext, BUNDLER_ROLLUP } from './util/config';
 import { rollup, rollupUpdate, getRollupConfig, getOutputDest as rollupGetOutputDest } from './rollup';
@@ -24,15 +24,15 @@ function bundleWorker(context: BuildContext, configFile: string) {
 }
 
 
-export function bundleUpdate(event: string, filePath: string, context: BuildContext) {
+export function bundleUpdate(changedFiles: ChangedFile[], context: BuildContext) {
   if (context.bundler === BUNDLER_ROLLUP) {
-    return rollupUpdate(event, filePath, context)
+    return rollupUpdate(changedFiles, context)
       .catch(err => {
         throw new BuildError(err);
       });
   }
 
-  return webpackUpdate(event, filePath, context, null)
+  return webpackUpdate(changedFiles, context, null)
     .catch(err => {
       if (err instanceof IgnorableError) {
         throw err;

src/dev-server/live-reload.ts

@@ -1,3 +1,4 @@
+import { ChangedFile } from '../util/interfaces';
 import { hasDiagnostics } from '../logger/logger-diagnostics';
 import * as path from 'path';
 import * as tinylr from 'tiny-lr';
@@ -9,14 +10,13 @@ export function createLiveReloadServer(config: ServeConfig) {
   const liveReloadServer = tinylr();
   liveReloadServer.listen(config.liveReloadPort, config.host);
 
-  function fileChange(filePath: string | string[]) {
+  function fileChange(changedFiles: ChangedFile[]) {
     // only do a live reload if there are no diagnostics
     // the notification server takes care of showing diagnostics
     if (!hasDiagnostics(config.buildDir)) {
-      const files = Array.isArray(filePath) ? filePath : [filePath];
       liveReloadServer.changed({
         body: {
-          files: files.map(f => '/' + path.relative(config.wwwDir, f))
+          files: changedFiles.map(changedFile => '/' + path.relative(config.wwwDir, changedFile.filePath))
         }
       });
     }
@@ -25,7 +25,7 @@ export function createLiveReloadServer(config: ServeConfig) {
   events.on(events.EventType.FileChange, fileChange);
 
   events.on(events.EventType.ReloadApp, () => {
-    fileChange('index.html');
+    fileChange([{ event: 'change', ext: '.html', filePath: 'index.html'}]);
   });
 }
 

src/lint.ts

@@ -1,5 +1,5 @@
 import { access } from 'fs';
-import { BuildContext, TaskInfo } from './util/interfaces';
+import { BuildContext, ChangedFile, TaskInfo } from './util/interfaces';
 import { BuildError } from './util/errors';
 import { createProgram, findConfiguration, getFileNames } from 'tslint';
 import { generateContext, getUserConfigFile } from './util/config';
@@ -31,12 +31,13 @@ export function lintWorker(context: BuildContext, configFile: string) {
 }
 
 
-export function lintUpdate(event: string, filePath: string, context: BuildContext) {
+export function lintUpdate(changedFiles: ChangedFile[], context: BuildContext) {
+  const changedTypescriptFiles = changedFiles.filter(changedFile => changedFile.ext === '.ts');
   return new Promise(resolve => {
     // throw this in a promise for async fun, but don't let it hang anything up
     const workerConfig: LintWorkerConfig = {
       configFile: getUserConfigFile(context, taskInfo, null),
-      filePath: filePath
+      filePaths: changedTypescriptFiles.map(changedTypescriptFile => changedTypescriptFile.filePath)
     };
 
     runWorker('lint', 'lintUpdateWorker', context, workerConfig);
@@ -49,7 +50,7 @@ export function lintUpdateWorker(context: BuildContext, workerConfig: LintWorker
   return getLintConfig(context, workerConfig.configFile).then(configFile => {
     // there's a valid tslint config, let's continue (but be quiet about it!)
     const program = createProgram(configFile, context.srcDir);
-    return lintFile(context, program, workerConfig.filePath);
+    return lintFiles(context, program, workerConfig.filePaths);
   }).catch(() => {
   });
 }
@@ -66,6 +67,13 @@ function lintApp(context: BuildContext, configFile: string) {
   return Promise.all(promises);
 }
 
+function lintFiles(context: BuildContext, program: ts.Program, filePaths: string[]) {
+  const promises: Promise<void>[] = [];
+  for (const filePath of filePaths) {
+    promises.push(lintFile(context, program, filePath));
+  }
+  return Promise.all(promises);
+}
 
 function lintFile(context: BuildContext, program: ts.Program, filePath: string) {
   return new Promise((resolve) => {
@@ -162,5 +170,5 @@ const taskInfo: TaskInfo = {
 
 export interface LintWorkerConfig {
   configFile: string;
-  filePath: string;
+  filePaths: string[];
 }

src/rollup.ts

@@ -1,4 +1,4 @@
-import { BuildContext, BuildState, TaskInfo } from './util/interfaces';
+import { BuildContext, BuildState, ChangedFile, TaskInfo } from './util/interfaces';
 import { BuildError } from './util/errors';
 import { fillConfigDefaults, generateContext, getUserConfigFile, replacePathVars } from './util/config';
 import { ionCompiler } from './plugins/ion-compiler';
@@ -25,7 +25,7 @@ export function rollup(context: BuildContext, configFile: string) {
 }
 
 
-export function rollupUpdate(event: string, filePath: string, context: BuildContext) {
+export function rollupUpdate(changedFiles: ChangedFile[], context: BuildContext) {
   const logger = new Logger('rollup update');
 
   const configFile = getUserConfigFile(context, taskInfo, null);

src/sass.ts

@@ -1,5 +1,5 @@
 import { basename, dirname, join, sep } from 'path';
-import { BuildContext, BuildState, TaskInfo } from './util/interfaces';
+import { BuildContext, BuildState, ChangedFile, TaskInfo } from './util/interfaces';
 import { BuildError } from './util/errors';
 import { bundle } from './bundle';
 import { ensureDirSync, readdirSync, writeFile } from 'fs-extra';
@@ -31,7 +31,7 @@ export function sass(context?: BuildContext, configFile?: string) {
 }
 
 
-export function sassUpdate(event: string, filePath: string, context: BuildContext) {
+export function sassUpdate(changedFiles: ChangedFile[], context: BuildContext) {
   const configFile = getUserConfigFile(context, taskInfo, null);
 
   const logger = new Logger('sass update');
@@ -60,7 +60,7 @@ export function sassWorker(context: BuildContext, configFile: string) {
   return Promise.all(bundlePromise).then(() => {
     clearDiagnostics(context, DiagnosticsType.Sass);
 
-    const sassConfig: SassConfig = fillConfigDefaults(configFile, taskInfo.defaultConfigFile);
+    const sassConfig: SassConfig = getSassConfig(context, configFile);
 
     // where the final css output file is saved
     if (!sassConfig.outFile) {
@@ -88,6 +88,10 @@ export function sassWorker(context: BuildContext, configFile: string) {
   });
 }
 
+export function getSassConfig(context: BuildContext, configFile: string): SassConfig {
+  configFile = getUserConfigFile(context, taskInfo, configFile);
+  return fillConfigDefaults(configFile, taskInfo.defaultConfigFile);
+}
 
 function generateSassData(context: BuildContext, sassConfig: SassConfig) {
   /**