feat: add support for fallbackFiles + hmr mode

Author: Fatme

.vscode/launch.json

@@ -15,7 +15,7 @@
 			"program": "${workspaceRoot}/lib/nativescript-cli.js",
 
 			// example commands
-			"args": [ "run", "ios", "--path", "${workspaceRoot}/scratch/webpackApp", "--bundle", "--env.sourceMap"]
+			"args": [ "run", "ios", "--path", "${workspaceRoot}/scratch/webpackApp", "--hmr"]
 			// "args": [ "test", "android", "--justlaunch"]
 			// "args": [ "platform", "add", "android@1.3.0", "--path", "cliapp"]
 			// "args": [ "platform", "remove", "android", "--path", "cliapp"]

lib/controllers/run-on-devices-controller.ts

@@ -7,6 +7,7 @@ import { LiveSyncServiceResolver } from "../resolvers/livesync-service-resolver"
 import { RunOnDevicesDataService } from "../services/run-on-devices-data-service";
 import { RunOnDevicesEmitter } from "../run-on-devices-emitter";
 import { WorkflowDataService } from "../services/workflow/workflow-data-service";
+import { HmrConstants } from "../common/constants";
 
 export class RunOnDevicesController extends EventEmitter {
 	constructor(
@@ -15,6 +16,7 @@ export class RunOnDevicesController extends EventEmitter {
 		private $deviceInstallAppService: DeviceInstallAppService,
 		private $deviceRefreshAppService: DeviceRefreshAppService,
 		private $devicesService: Mobile.IDevicesService,
+		private $hmrStatusService: IHmrStatusService,
 		public $hooksService: IHooksService,
 		private $liveSyncServiceResolver: LiveSyncServiceResolver,
 		private $logger: ILogger,
@@ -65,7 +67,7 @@ export class RunOnDevicesController extends EventEmitter {
 			});
 
 			if (liveSyncResultInfo && deviceDescriptor.debugggingEnabled) {
-				await this.$deviceDebugAppService.refreshApplicationWithDebug(projectData, deviceDescriptor, refreshInfo);
+				await this.$deviceDebugAppService.enableDebugging(projectData, deviceDescriptor, refreshInfo);
 			}
 
 			this.$logger.info(`Successfully synced application ${liveSyncResultInfo.deviceAppData.appIdentifier} on device ${liveSyncResultInfo.deviceAppData.device.deviceInfo.identifier}.`);
@@ -89,28 +91,36 @@ export class RunOnDevicesController extends EventEmitter {
 				await this.$buildPlatformService.buildPlatform(nativePlatformData, projectData, buildPlatformData);
 			}
 
+			const isInHMRMode = liveSyncInfo.useHotModuleReload && data.hmrData && data.hmrData.hash;
+			if (isInHMRMode) {
+				this.$hmrStatusService.watchHmrStatus(device.deviceInfo.identifier, data.hmrData.hash);
+			}
+
 			const platformLiveSyncService = this.$liveSyncServiceResolver.resolveLiveSyncService(device.deviceInfo.platform);
-			const liveSyncResultInfo = await platformLiveSyncService.liveSyncWatchAction(device, {
+			const watchInfo = {
 				liveSyncDeviceInfo: deviceDescriptor,
 				projectData,
-				filesToRemove: [],
+				filesToRemove: <any>[],
 				filesToSync: data.files,
 				isReinstalled: false,
-				hmrData: null, // platformHmrData,
+				hmrData: data.hmrData,
 				useHotModuleReload: liveSyncInfo.useHotModuleReload,
 				force: liveSyncInfo.force,
 				connectTimeout: 1000
-			});
-
-			const refreshInfo = await this.$deviceRefreshAppService.refreshApplicationWithoutDebug(projectData, liveSyncResultInfo, deviceDescriptor);
-
-			this.$runOnDevicesEmitter.emitRunOnDeviceExecutedEvent(projectData, liveSyncResultInfo.deviceAppData.device, {
-				syncedFiles: liveSyncResultInfo.modifiedFilesData.map(m => m.getLocalPath()),
-				isFullSync: liveSyncResultInfo.isFullSync
-			});
-
-			if (liveSyncResultInfo && deviceDescriptor.debugggingEnabled) {
-				await this.$deviceDebugAppService.refreshApplicationWithDebug(projectData, deviceDescriptor, refreshInfo);
+			};
+			let liveSyncResultInfo = await platformLiveSyncService.liveSyncWatchAction(device, watchInfo);
+
+			await this.refreshApplication(projectData, liveSyncResultInfo, deviceDescriptor);
+
+			if (!liveSyncResultInfo.didRecover && isInHMRMode) {
+				const status = await this.$hmrStatusService.getHmrStatus(device.deviceInfo.identifier, data.hmrData.hash);
+				if (status === HmrConstants.HMR_ERROR_STATUS) {
+					watchInfo.filesToSync = data.hmrData.fallbackFiles;
+					liveSyncResultInfo = await platformLiveSyncService.liveSyncWatchAction(device, watchInfo);
+					// We want to force a restart of the application.
+					liveSyncResultInfo.isFullSync = true;
+					await this.refreshApplication(projectData, liveSyncResultInfo, deviceDescriptor);
+				}
 			}
 
 			this.$logger.info(`Successfully synced application ${liveSyncResultInfo.deviceAppData.appIdentifier} on device ${liveSyncResultInfo.deviceAppData.device.deviceInfo.identifier}.`);
@@ -126,6 +136,19 @@ export class RunOnDevicesController extends EventEmitter {
 		}
 	}
 
+	private async refreshApplication(projectData: IProjectData, liveSyncResultInfo: ILiveSyncResultInfo, deviceDescriptor: ILiveSyncDeviceInfo) {
+		const refreshInfo = await this.$deviceRefreshAppService.refreshApplicationWithoutDebug(projectData, liveSyncResultInfo, deviceDescriptor);
+
+		this.$runOnDevicesEmitter.emitRunOnDeviceExecutedEvent(projectData, liveSyncResultInfo.deviceAppData.device, {
+			syncedFiles: liveSyncResultInfo.modifiedFilesData.map(m => m.getLocalPath()),
+			isFullSync: liveSyncResultInfo.isFullSync
+		});
+
+		if (liveSyncResultInfo && deviceDescriptor.debugggingEnabled) {
+			await this.$deviceDebugAppService.enableDebugging(projectData, deviceDescriptor, refreshInfo);
+		}
+	}
+
 	private async addActionToChain<T>(projectDir: string, action: () => Promise<T>): Promise<T> {
 		const liveSyncInfo = this.$runOnDevicesDataService.getData(projectDir);
 		if (liveSyncInfo) {

lib/services/device/device-debug-app-service.ts

@@ -14,7 +14,7 @@ export class DeviceDebugAppService {
 	) { }
 
 	@performanceLog()
-	public async refreshApplicationWithDebug(projectData: IProjectData, deviceDescriptor: ILiveSyncDeviceInfo, refreshInfo: IRestartApplicationInfo): Promise<IDebugInformation> {
+	public async enableDebugging(projectData: IProjectData, deviceDescriptor: ILiveSyncDeviceInfo, refreshInfo: IRestartApplicationInfo): Promise<IDebugInformation> {
 		const { debugOptions } = deviceDescriptor;
 		// we do not stop the application when debugBrk is false, so we need to attach, instead of launch
 		// if we try to send the launch request, the debugger port will not be printed and the command will timeout

lib/services/platform/platform-watcher-service.ts

@@ -44,8 +44,8 @@ export class PlatformWatcherService extends EventEmitter implements IPlatformWat
 
 	private async startJSWatcherWithPrepare(platformData: IPlatformData, projectData: IProjectData, config: IWebpackCompilerConfig): Promise<void> {
 		if (!this.watchersData[projectData.projectDir][platformData.platformNameLowerCase].webpackCompilerProcess) {
-			this.$webpackCompilerService.on("webpackEmittedFiles", files => {
-				this.emitFilesChangeEvent({ files, hasNativeChanges: false, platform: platformData.platformNameLowerCase });
+			this.$webpackCompilerService.on("webpackEmittedFiles", data => {
+				this.emitFilesChangeEvent({ ...data, hasNativeChanges: false, platform: platformData.platformNameLowerCase });
 			});
 
 			const childProcess = await this.$webpackCompilerService.compileWithWatch(platformData, projectData, config);
@@ -75,7 +75,7 @@ export class PlatformWatcherService extends EventEmitter implements IPlatformWat
 			.on("all", async (event: string, filePath: string) => {
 				filePath = path.join(projectData.projectDir, filePath);
 				this.$logger.trace(`Chokidar raised event ${event} for ${filePath}.`);
-				this.emitFilesChangeEvent({ files: [], hasNativeChanges: true, platform: platformData.platformNameLowerCase });
+				this.emitFilesChangeEvent({ files: [], hmrData: null, hasNativeChanges: true, platform: platformData.platformNameLowerCase });
 			});
 
 		this.watchersData[projectData.projectDir][platformData.platformNameLowerCase].nativeFilesWatcher = watcher;

lib/services/webpack/webpack-compiler-service.ts

@@ -35,7 +35,18 @@ export class WebpackCompilerService extends EventEmitter implements IWebpackComp
 					const files = message.emittedFiles
 						.filter((file: string) => file.indexOf("App_Resources") === -1)
 						.map((file: string) => path.join(platformData.appDestinationDirectoryPath, "app", file));
-					this.emit("webpackEmittedFiles", files);
+
+					const result = this.getUpdatedEmittedFiles(message.emittedFiles);
+
+					const data = {
+						files,
+						hmrData: {
+							hash: result.hash,
+							fallbackFiles: result.fallbackFiles
+						}
+					};
+
+					this.emit("webpackEmittedFiles", data);
 				}
 			});
 
@@ -143,5 +154,34 @@ export class WebpackCompilerService extends EventEmitter implements IWebpackComp
 
 		return args;
 	}
+
+	private getUpdatedEmittedFiles(emittedFiles: string[]) {
+		let fallbackFiles: string[] = [];
+		let hotHash;
+		if (emittedFiles.some(x => x.endsWith('.hot-update.json'))) {
+			let result = emittedFiles.slice();
+			const hotUpdateScripts = emittedFiles.filter(x => x.endsWith('.hot-update.js'));
+			hotUpdateScripts.forEach(hotUpdateScript => {
+				const { name, hash } = this.parseHotUpdateChunkName(hotUpdateScript);
+				hotHash = hash;
+				// remove bundle/vendor.js files if there's a bundle.XXX.hot-update.js or vendor.XXX.hot-update.js
+				result = result.filter(file => file !== `${name}.js`);
+			});
+			//if applying of hot update fails, we must fallback to the full files
+			fallbackFiles = emittedFiles.filter(file => result.indexOf(file) === -1);
+			return { emittedFiles: result, fallbackFiles, hash: hotHash };
+		}
+
+		return { emittedFiles, fallbackFiles };
+	}
+
+	private parseHotUpdateChunkName(name: string) {
+		const matcher = /^(.+)\.(.+)\.hot-update/gm;
+		const matches = matcher.exec(name);
+		return {
+			name: matches[1] || "",
+			hash: matches[2] || "",
+		};
+	}
 }
 $injector.register("webpackCompilerService", WebpackCompilerService);

lib/services/webpack/webpack.d.ts

@@ -32,6 +32,7 @@ declare global {
 	interface IFilesChangeEventData {
 		platform: string;
 		files: string[];
+		hmrData: IPlatformHmrData;
 		hasNativeChanges: boolean;
 	}
 

lib/services/workflow/workflow-data-service.ts

@@ -39,28 +39,34 @@ export class WorkflowDataService {
 	}
 
 	private getAddPlatformData(platform: string, options: IOptions | any) {
-		return {
+		const result = {
 			frameworkPath: options.frameworkPath,
 			nativePrepare: options.nativePrepare,
 			platformParam: options.platformParam || platform,
 		};
+
+		return result;
 	}
 
 	private getPreparePlatformData(options: IOptions | any) {
-		return {
-			env: options.env,
+		const result = {
+			env: { ...options.env, hmr: options.hmr || options.useHotModuleReload },
 			release: options.release,
 			nativePrepare: options.nativePrepare
 		};
+
+		return result;
 	}
 
 	private getIOSPrepareData(options: IOptions | any) {
-		return {
+		const result =  {
 			...this.getPreparePlatformData(options),
 			teamId: options.teamId,
 			provision: options.provision,
 			mobileProvisionData: options.mobileProvisionData
 		};
+
+		return result;
 	}
 }
 $injector.register("workflowDataService", WorkflowDataService);