feat(dev-server): improve dev-server status/progress

src/compiler/build/build-ctx.ts

@@ -64,6 +64,13 @@ export class BuildContext implements d.BuildCtx {
     // print out a good message
     const msg = `${this.isRebuild ? 'rebuild' : 'build'}, ${this.config.fsNamespace}, ${this.config.devMode ? 'dev' : 'prod'} mode, started`;
 
+    const buildLog: d.BuildLog = {
+      buildId: this.buildId,
+      messages: [],
+      progress: 0
+    };
+    this.compilerCtx.events.emit('buildLog', buildLog);
+
     // create a timespan for this build
     this.timeSpan = this.createTimeSpan(msg);
 
@@ -85,6 +92,7 @@ export class BuildContext implements d.BuildCtx {
 
       if (!debug && this.compilerCtx.events) {
         const buildLog: d.BuildLog = {
+          buildId: this.buildId,
           messages: this.buildMessages,
           progress: getProgress(this.completedTasks)
         };
@@ -106,10 +114,12 @@ export class BuildContext implements d.BuildCtx {
             timeSpan.finish(finishedMsg, color, bold, newLineSuffix);
 
             if (!debug) {
-              this.compilerCtx.events.emit('buildLog', {
+              const buildLog: d.BuildLog = {
+                buildId: this.buildId,
                 messages: this.buildMessages.slice(),
-                progress: 1
-              } as d.BuildLog);
+                progress: getProgress(this.completedTasks)
+              };
+              this.compilerCtx.events.emit('buildLog', buildLog);
             }
           }
           return timeSpan.duration();
@@ -144,7 +154,16 @@ export class BuildContext implements d.BuildCtx {
   }
 
   async finish() {
-    return buildFinish(this.config, this.compilerCtx, this as any, false);
+    const results = await buildFinish(this.config, this.compilerCtx, this as any, false);
+
+    const buildLog: d.BuildLog = {
+      buildId: this.buildId,
+      messages: this.buildMessages.slice(),
+      progress: 1
+    };
+    this.compilerCtx.events.emit('buildLog', buildLog);
+
+    return results;
   }
 
   progress(t: d.BuildTask) {
@@ -205,11 +224,10 @@ function getProgress(completedTasks: d.BuildTask[]) {
 }
 
 export const ProgressTask = {
+  emptyOutputTargets: {},
   transpileApp: {},
-  generateEntryModules: {},
   generateStyles: {},
   generateOutputTargets: {},
   validateTypesBuild: {},
   writeBuildFiles: {},
-  completed: {}
 };

src/compiler/build/build.ts

@@ -31,6 +31,8 @@ export async function build(config: d.Config, compilerCtx: d.CompilerCtx, buildC
     await emptyOutputTargets(config, compilerCtx, buildCtx);
     if (buildCtx.hasError) return buildCtx.abort();
 
+    buildCtx.progress(ProgressTask.emptyOutputTargets);
+
     // async scan the src directory for ts files
     // then transpile them all in one go
     // buildCtx.moduleFiles is populated here
@@ -52,8 +54,6 @@ export async function build(config: d.Config, compilerCtx: d.CompilerCtx, buildC
     generateEntryModules(config, buildCtx);
     if (buildCtx.hasError) return buildCtx.abort();
 
-    buildCtx.progress(ProgressTask.generateEntryModules);
-
     // start copy tasks from the config.copy and component assets
     // but don't wait right now (running in worker)
     buildCtx.skipAssetsCopy = canSkipAssetsCopy(config, compilerCtx, buildCtx.entryModules, buildCtx.filesChanged);
@@ -62,7 +62,7 @@ export async function build(config: d.Config, compilerCtx: d.CompilerCtx, buildC
     buildCtx.stylesPromise = generateStyles(config, compilerCtx, buildCtx);
     if (buildCtx.hasError) return buildCtx.abort();
 
-    buildCtx.progress(ProgressTask.transpileApp);
+    buildCtx.progress(ProgressTask.generateStyles);
 
     // generate the core app files
     await generateOutputTargets(config, compilerCtx, buildCtx);
@@ -90,7 +90,7 @@ export async function build(config: d.Config, compilerCtx: d.CompilerCtx, buildC
     await writeBuildFiles(config, compilerCtx, buildCtx);
     if (buildCtx.hasError) return buildCtx.abort();
 
-    buildCtx.progress(ProgressTask.validateTypesBuild);
+    buildCtx.progress(ProgressTask.writeBuildFiles);
 
   } catch (e) {
     // ¯\_(ツ)_/¯

src/compiler/compiler.ts

@@ -116,11 +116,6 @@ export class Compiler implements d.Compiler {
       this.ctx.activeFilesUpdated.length = 0;
 
       // Run Build
-      this.ctx.events.emit('buildLog', {
-        messages: [],
-        progress: 0
-      } as d.BuildLog);
-
       buildResults = await build(this.config, this.ctx, buildCtx);
       didError = buildResults.hasError;
 

src/compiler/output-targets/index.ts

@@ -1,4 +1,5 @@
 import * as d from '../../declarations';
+import { canSkipAppCoreBuild } from './output-utils';
 import { outputApp } from './output-app';
 import { outputCollections } from './output-collection';
 import { outputHydrate } from './output-hydrate';
@@ -9,9 +10,6 @@ import { outputWww } from './output-www';
 import { outputDocs } from './output-docs';
 import { outputAngular } from './output-angular';
 
-import { canSkipAppCoreBuild } from './output-utils';
-
-
 
 export async function generateOutputTargets(config: d.Config, compilerCtx: d.CompilerCtx, buildCtx: d.BuildCtx) {
   if (canSkipAppCoreBuild(buildCtx)) {
@@ -35,6 +33,7 @@ export async function generateOutputTargets(config: d.Config, compilerCtx: d.Com
   await outputTypes(config, compilerCtx, buildCtx);
 }
 
+
 async function outputModulesApp(config: d.Config, compilerCtx: d.CompilerCtx, buildCtx: d.BuildCtx) {
   await outputModule(config, compilerCtx, buildCtx);
   await outputApp(config, compilerCtx, buildCtx, 'webComponentsModule');

src/declarations/build.ts

@@ -86,6 +86,7 @@ export interface BuildStyleUpdate {
 export type BuildTask = any;
 
 export interface BuildLog {
+  buildId: number;
   messages: string[];
   progress: number;
 }
@@ -113,6 +114,7 @@ export interface BuildResults {
   transpileBuildCount: number;
 }
 
+export type BuildStatus = 'pending' | 'error' | 'disabled' | 'default';
 
 export interface HotModuleReplacement {
   componentsUpdated?: string[];

src/dev-server/dev-client/app-error.ts

@@ -1,10 +1,10 @@
 import * as d from '../../declarations';
 import { DEV_SERVER_URL, OPEN_IN_EDITOR_URL } from '../dev-server-utils';
+import { emitBuildStatus } from './build-events';
 import { logDiagnostic } from './logger';
-import { updateBuildStatus } from './build-status';
 
 
-export function appError(win: Window, doc: Document, config: d.DevClientConfig, buildResults: d.BuildResults) {
+export function appError(win: d.DevClientWindow, doc: Document, config: d.DevClientConfig, buildResults: d.BuildResults) {
   if (!Array.isArray(buildResults.diagnostics)) {
     return;
   }
@@ -22,7 +22,7 @@ export function appError(win: Window, doc: Document, config: d.DevClientConfig,
     appendDiagnostic(win, doc, config, modal, diagnostic);
   });
 
-  updateBuildStatus(doc, 'error');
+  emitBuildStatus(win, 'error');
 }
 
 

src/dev-server/dev-client/app-update.ts

@@ -5,9 +5,17 @@ import { hmrExternalStyles } from './hmr-external-styles';
 import { hmrImages } from './hmr-images';
 import { hmrInlineStyles } from './hmr-inline-styles';
 import { logBuild, logReload } from './logger';
+import { onBuildResults } from './build-events';
 
 
-export function appUpdate(win: d.DevClientWindow, doc: Document, config: d.DevClientConfig, buildResults: d.BuildResults) {
+export function initAppUpdate(win: d.DevClientWindow, doc: Document, config: d.DevClientConfig) {
+  onBuildResults(win, buildResults => {
+    appUpdate(win, doc, config, buildResults);
+  });
+}
+
+
+function appUpdate(win: d.DevClientWindow, doc: Document, config: d.DevClientConfig, buildResults: d.BuildResults) {
   try {
     // remove any app errors that may already be showing
     clearDevServerModal(doc);

src/dev-server/dev-client/build-events.ts

@@ -0,0 +1,42 @@
+import * as d from '../../declarations';
+
+
+export function emitBuildLog(win: d.DevClientWindow, buildLog: d.BuildLog) {
+  win.dispatchEvent(new CustomEvent(BUILD_LOG, { detail: buildLog }));
+}
+
+
+export function emitBuildResults(win: d.DevClientWindow, buildResults: d.BuildResults) {
+  win.dispatchEvent(new CustomEvent(BUILD_RESULTS, { detail: buildResults }));
+}
+
+
+export function emitBuildStatus(win: d.DevClientWindow, buildStatus: d.BuildStatus) {
+  win.dispatchEvent(new CustomEvent(BUILD_STATUS, { detail: buildStatus }));
+}
+
+
+export function onBuildLog(win: d.DevClientWindow, cb: (buildLog: d.BuildLog) => void) {
+  win.addEventListener(BUILD_LOG, (ev: any) => {
+    cb(ev.detail);
+  });
+}
+
+
+export function onBuildResults(win: d.DevClientWindow, cb: (buildResults: d.BuildResults) => void) {
+  win.addEventListener(BUILD_RESULTS, (ev: any) => {
+    cb(ev.detail);
+  });
+}
+
+
+export function onBuildStatus(win: d.DevClientWindow, cb: (buildStatus: d.BuildStatus) => void) {
+  win.addEventListener(BUILD_STATUS, (ev: any) => {
+    cb(ev.detail);
+  });
+}
+
+
+const BUILD_LOG = `devserver:buildlog`;
+const BUILD_RESULTS = `devserver:buildresults`;
+const BUILD_STATUS = `devserver:buildstatus`;

src/dev-server/dev-client/build-progress.ts

@@ -1,15 +1,16 @@
 import * as d from '../../declarations';
+import { onBuildLog, onBuildResults } from './build-events';
 
 
-export function initBuildProgress(win: Window, doc: Document) {
+export function initBuildProgress(win: d.DevClientWindow, doc: Document) {
   const PROGRESS_BAR_ID = `dev-server-progress`;
+  const barColor = `#5851ff`;
+  const errorColor = `#b70c19`;
   let removeTimerId: any;
   let opacityTimerId: any;
   let incIntervalId: any;
   let progressIncrease: number;
   let currentProgress = 0;
-  let lastProgress = 0;
-  let lastUpdate: number;
 
   function update() {
     clearTimeout(opacityTimerId);
@@ -26,43 +27,40 @@ export function initBuildProgress(win: Window, doc: Document) {
       progressBar.style.width = `100%`;
       progressBar.style.height = `2px`;
       progressBar.style.transform = `scaleX(0)`;
-      progressBar.style.background = `#5851ff`;
+      progressBar.style.opacity = `1`;
+      progressBar.style.background = barColor;
       progressBar.style.transformOrigin = `left center`;
-      progressBar.style.transition = `transform .2s ease-in-out, opacity .5s ease-in`;
+      progressBar.style.transition = `transform .1s ease-in-out, opacity .5s ease-in`;
       (progressBar.style as any).contain = `strict`;
       doc.body.appendChild(progressBar);
+      requestAnimationFrame(update);
+      return;
     }
+    progressBar.style.background = barColor;
     progressBar.style.opacity = `1`;
-
-    if (Date.now() > lastUpdate + 800 && displayProgress() > lastProgress + 0.05) {
-      progressBar.style.transform = `scaleX(${Math.min(1, displayProgress())})`;
-      lastUpdate = Date.now();
-      lastProgress = displayProgress();
-    }
+    progressBar.style.transform = `scaleX(${Math.min(1, displayProgress())})`;
 
     if (incIntervalId == null) {
       incIntervalId = setInterval(() => {
-        progressIncrease += 0.02;
-        if (displayProgress() < 0.8) {
+        progressIncrease += (Math.random() * 0.05) + 0.01;
+        if (displayProgress() < 0.9) {
           update();
         } else {
           clearInterval(incIntervalId);
         }
-      }, 200);
+      }, 800);
     }
   }
 
   function reset() {
-    lastUpdate = 0;
-    lastProgress = 0;
     clearInterval(incIntervalId);
-    progressIncrease = 0.02;
+    progressIncrease = 0.05;
     incIntervalId = null;
     clearTimeout(opacityTimerId);
     clearTimeout(removeTimerId);
 
     const progressBar = doc.getElementById(PROGRESS_BAR_ID);
-    if (progressBar && progressBar.parentNode) {
+    if (progressBar) {
       if (currentProgress >= 1) {
         progressBar.style.transform = `scaleX(1)`;
       }
@@ -71,13 +69,13 @@ export function initBuildProgress(win: Window, doc: Document) {
         try {
           progressBar.style.opacity = `0`;
         } catch (e) {}
-      }, 250);
+      }, 150);
 
       removeTimerId = setTimeout(() => {
         try {
           progressBar.parentNode.removeChild(progressBar);
         } catch (e) {}
-      }, 2000);
+      }, 1000);
     }
   }
 
@@ -88,8 +86,7 @@ export function initBuildProgress(win: Window, doc: Document) {
 
   reset();
 
-  win.addEventListener('buildLog', (ev: any) => {
-    const buildLog: d.BuildLog = ev.detail;
+  onBuildLog(win, buildLog => {
     currentProgress = buildLog.progress;
 
     if (currentProgress >= 0 && currentProgress < 1) {
@@ -98,4 +95,19 @@ export function initBuildProgress(win: Window, doc: Document) {
       reset();
     }
   });
+
+  onBuildResults(win, buildResults => {
+    if (buildResults.hasError) {
+      const progressBar = doc.getElementById(PROGRESS_BAR_ID);
+      if (progressBar) {
+        progressBar.style.transform = `scaleX(1)`;
+        progressBar.style.background = errorColor;
+      }
+    }
+    reset();
+  });
+
+  if (doc.head.dataset.tmpl === 'tmpl-initial-load') {
+    update();
+  }
 }