refactor(dev-server): reloadStrategy config for optional pageReloads

Author: adamdbradley

src/cli/task-serve.ts

@@ -15,7 +15,7 @@ export async function taskServe(process: NodeJS.Process, config: d.Config, flags
 
   config.flags.serve = true;
   config.devServer.openBrowser = flags.open;
-  config.devServer.hotReplacement = false;
+  config.devServer.reloadStrategy = null;
   config.devServer.initialLoadUrl = '/';
   config.devServer.websocket = false;
   config.maxConcurrentWorkers = 1;

src/compiler/app-core/build-conditionals.ts

@@ -63,7 +63,7 @@ export function updateBuildConditionals(config: d.Config, b: d.Build) {
   b.isDev = !!config.devMode;
   b.lifecycleDOMEvents = !!(b.isDebug || config._isTesting);
   b.profile = !!(config.flags && config.flags.profile);
-  b.hotModuleReplacement = !!(config.devMode && config.devServer && config.devServer.hotReplacement);
+  b.hotModuleReplacement = !!(config.devMode && config.devServer && config.devServer.reloadStrategy === 'hmr');
   b.updatable = (b.updatable || b.hydrateClientSide || b.hotModuleReplacement);
   b.member = (b.member || b.updatable || b.mode || b.lifecycle);
   b.taskQueue = (b.updatable || b.mode || b.lifecycle);

src/compiler/build/build-hmr.ts

@@ -7,11 +7,18 @@ import { getScopeId } from '../style/scope-css';
 
 
 export function generateHmr(config: d.Config, compilerCtx: d.CompilerCtx, buildCtx: d.BuildCtx) {
-  if (!config.devServer || !config.devServer.hotReplacement || !buildCtx.isRebuild) {
+  if (!config.devServer || !buildCtx.isRebuild) {
     return null;
   }
 
-  const hmr: d.HotModuleReplacement = {};
+  if (config.devServer.reloadStrategy == null) {
+    return null;
+  }
+
+  const hmr: d.HotModuleReplacement = {
+    reloadStrategy: config.devServer.reloadStrategy,
+    versionId: Date.now().toString().substring(6) + '' + Math.round((Math.random() * 89999) + 10000)
+  };
 
   if (buildCtx.scriptsAdded.length > 0) {
     hmr.scriptsAdded = buildCtx.scriptsAdded.slice();
@@ -63,8 +70,6 @@ export function generateHmr(config: d.Config, compilerCtx: d.CompilerCtx, buildC
     return null;
   }
 
-  hmr.versionId = Date.now().toString().substring(6);
-
   return hmr;
 }
 

src/compiler/config/validate-dev-server.ts

@@ -1,7 +1,7 @@
 import * as d from '../../declarations';
-import { normalizePath, buildError } from '@utils';
-import { setBooleanConfig, setNumberConfig, setStringConfig } from './config-utils';
+import { buildError, normalizePath } from '@utils';
 import { isOutputTargetWww } from '../output-targets/output-utils';
+import { setBooleanConfig, setNumberConfig, setStringConfig } from './config-utils';
 import { URL } from 'url';
 
 
@@ -23,8 +23,18 @@ export function validateDevServer(config: d.Config, diagnostics: d.Diagnostic[])
     setNumberConfig(config.devServer, 'port', null, 3333);
   }
 
-  if (typeof config.devServer.hotReplacement !== 'boolean') {
-    config.devServer.hotReplacement = true;
+  if ((config.devServer as any).hotReplacement === true) {
+    // DEPRECATED: 2019-05-20
+    config.devServer.reloadStrategy = 'hmr';
+  } else if ((config.devServer as any).hotReplacement === false || (config.devServer as any).hotReplacement === null) {
+    // DEPRECATED: 2019-05-20
+    config.devServer.reloadStrategy = null;
+  } else {
+    if (config.devServer.reloadStrategy === undefined) {
+      config.devServer.reloadStrategy = 'hmr';
+    } else if (config.devServer.reloadStrategy !== 'hmr' && config.devServer.reloadStrategy !== 'pageReload' && config.devServer.reloadStrategy !== null) {
+      throw new Error(`Invalid devServer reloadStrategy "${config.devServer.reloadStrategy}". Valid configs include "hmr", "pageReload" and null.`);
+    }
   }
 
   setBooleanConfig(config.devServer, 'gzip', null, true);

src/declarations/build.ts

@@ -121,6 +121,7 @@ export interface HotModuleReplacement {
   imagesUpdated?: string[];
   indexHtmlUpdated?: boolean;
   inlineStylesUpdated?: HmrStyleUpdate[];
+  reloadStrategy: d.PageReloadStrategy;
   scriptsAdded?: string[];
   scriptsDeleted?: string[];
   serviceWorkerUpdated?: boolean;

src/declarations/dev-server.ts

@@ -17,17 +17,20 @@ export interface DevServerConfig {
   excludeHmr?: string[];
   gzip?: boolean;
   historyApiFallback?: HistoryApiFallback;
-  hotReplacement?: boolean;
   initialLoadUrl?: string;
   logRequests?: boolean;
   openBrowser?: boolean;
   port?: number;
   protocol?: 'http' | 'https';
+  reloadStrategy?: PageReloadStrategy;
   root?: string;
   websocket?: boolean;
 }
 
 
+export type PageReloadStrategy = 'hmr' | 'pageReload' | null;
+
+
 export interface DevServerStartResponse {
   browserUrl?: string;
   initialLoadUrl?: string;
@@ -44,7 +47,7 @@ export interface DevClientWindow extends Window {
 export interface DevClientConfig {
   basePath: string;
   editors: d.DevServerEditor[];
-  hmr: boolean;
+  reloadStrategy: PageReloadStrategy;
 }
 
 

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

@@ -45,6 +45,10 @@ export function appUpdate(win: d.DevClientWindow, doc: Document, config: d.DevCl
 function appHmr(win: Window, doc: Document, hmr: d.HotModuleReplacement) {
   let shouldWindowReload = false;
 
+  if (hmr.reloadStrategy === 'pageReload') {
+    shouldWindowReload = true;
+  }
+
   if (hmr.indexHtmlUpdated) {
     logReload(`Updated index.html`);
     shouldWindowReload = true;

src/dev-server/serve-dev-client.ts

@@ -47,7 +47,7 @@ async function serveDevClientScript(devServerConfig: d.DevServerConfig, fs: d.Fi
   const devClientConfig: d.DevClientConfig = {
     basePath: devServerConfig.basePath,
     editors: devServerConfig.editors,
-    hmr: devServerConfig.hotReplacement
+    reloadStrategy: devServerConfig.reloadStrategy
   };
 
   content = content.replace('__DEV_CLIENT_CONFIG__', JSON.stringify(devClientConfig));