feat: recover hmr fail in preview

Author: KristianDD

lib/definitions/preview-app-livesync.d.ts

@@ -1,4 +1,5 @@
 import { FilePayload, Device, FilesPayload } from "nativescript-preview-sdk";
+import { EventEmitter } from "events";
 
 declare global {
 	interface IPreviewAppLiveSyncService {
@@ -9,7 +10,7 @@ declare global {
 
 	interface IPreviewAppLiveSyncData extends IProjectDir, IAppFilesUpdaterOptionsComposition, IEnvOptions { }
 
-	interface IPreviewSdkService {
+	interface IPreviewSdkService extends EventEmitter {
 		getQrCodeUrl(options: IHasUseHotModuleReloadOption): string;
 		connectedDevices: Device[];
 		initialize(getInitialFiles: (device: Device) => Promise<FilesPayload>): void;

lib/services/hmr-status-service.ts

@@ -4,7 +4,7 @@ import { HmrConstants } from "../common/constants";
 export class HmrStatusService implements IHmrStatusService {
 	public static HMR_STATUS_LOG_REGEX = /([a-z A-Z]*) hmr hash ([a-z0-9]*)\./;
 	public static STARTED_MESSAGE = "Checking for updates to the bundle with";
-	public static SUCCESS_MESSAGE = "Successfuly applied update with";
+	public static SUCCESS_MESSAGE = "Successfully applied update with";
 	public static FAILED_MESSAGE = "Cannot apply update with";
 	private hashOperationStatuses: IDictionary<any> = {};
 

lib/services/livesync/playground/preview-app-livesync-service.ts

@@ -2,6 +2,7 @@ import * as path from "path";
 import { FilePayload, Device, FilesPayload } from "nativescript-preview-sdk";
 import { PreviewSdkEventNames } from "./preview-app-constants";
 import { APP_FOLDER_NAME, APP_RESOURCES_FOLDER_NAME, TNS_MODULES_FOLDER_NAME } from "../../../constants";
+import { HmrConstants } from "../../../common/constants";
 const isTextOrBinary = require('istextorbinary');
 
 export class PreviewAppLiveSyncService implements IPreviewAppLiveSyncService {
@@ -19,6 +20,7 @@ export class PreviewAppLiveSyncService implements IPreviewAppLiveSyncService {
 		private $previewSdkService: IPreviewSdkService,
 		private $previewAppPluginsService: IPreviewAppPluginsService,
 		private $projectFilesManager: IProjectFilesManager,
+		private $hmrStatusService: IHmrStatusService,
 		private $projectFilesProvider: IProjectFilesProvider) { }
 
 	public async initialize(data: IPreviewAppLiveSyncData): Promise<void> {
@@ -43,19 +45,37 @@ export class PreviewAppLiveSyncService implements IPreviewAppLiveSyncService {
 
 	private async initializePreviewForDevice(data: IPreviewAppLiveSyncData, device: Device): Promise<FilesPayload> {
 		const filesToSyncMap: IDictionary<string[]> = {};
+		const hmrData: { hash: string; fallbackFiles: IDictionary<string[]> } = {
+			hash: "",
+			fallbackFiles: {}
+		};
 		let promise = Promise.resolve<FilesPayload>(null);
 		const startSyncFilesTimeout = async (platform: string) => {
 			await promise
 				.then(async () => {
 					const projectData = this.$projectDataService.getProjectData(data.projectDir);
-					promise = this.applyChanges(this.$platformsData.getPlatformData(platform, projectData), projectData, filesToSyncMap[platform]);
+					const platformData = this.$platformsData.getPlatformData(platform, projectData);
+					const currentHmrData = _.cloneDeep(hmrData);
+					const filesToSync = _.cloneDeep(filesToSyncMap[platform]);
+					promise = this.applyChanges(platformData, projectData, filesToSync, data.appFilesUpdaterOptions.useHotModuleReload);
 					await promise;
+
+					if (data.appFilesUpdaterOptions.useHotModuleReload && currentHmrData.hash) {
+						const devices = _.filter(this.$previewSdkService.connectedDevices, { platform: platform.toLowerCase() });
+						_.forEach(devices, async (previewDevice: Device) => {
+							const status = await this.$hmrStatusService.awaitHmrStatus(previewDevice.id, currentHmrData.hash);
+							if (status === HmrConstants.HMR_ERROR_STATUS) {
+								await this.applyChanges(platformData, projectData, currentHmrData.fallbackFiles[platform], false);
+							}
+						});
+					}
 				});
 			filesToSyncMap[platform] = [];
 		};
 		await this.$hooksService.executeBeforeHooks("preview-sync", {
 			hookArgs: {
 				projectData: this.$projectDataService.getProjectData(data.projectDir),
+				hmrData,
 				config: {
 					env: data.env,
 					platform: device.platform,
@@ -104,10 +124,11 @@ export class PreviewAppLiveSyncService implements IPreviewAppLiveSyncService {
 
 			let result: FilesPayload = null;
 			if (files && files.length) {
-				result = await this.applyChanges(platformData, projectData, files);
+				result = await this.applyChanges(platformData, projectData, files, data.appFilesUpdaterOptions.useHotModuleReload);
 				this.$logger.info(`Successfully synced ${result.files.map(filePayload => filePayload.file.yellow)} for platform ${platform}.`);
 			} else {
-				result = await this.getFilesPayload(platformData, projectData);
+				const hmrMode = data.appFilesUpdaterOptions.useHotModuleReload ? 1 : 0;
+				result = await this.getFilesPayload(platformData, projectData, hmrMode);
 				this.$logger.info(`Successfully synced changes for platform ${platform}.`);
 			}
 
@@ -117,14 +138,15 @@ export class PreviewAppLiveSyncService implements IPreviewAppLiveSyncService {
 		}
 	}
 
-	private async applyChanges(platformData: IPlatformData, projectData: IProjectData, files: string[]): Promise<FilesPayload> {
-		const payloads = this.getFilesPayload(platformData, projectData, _(files).uniq().value());
+	private async applyChanges(platformData: IPlatformData, projectData: IProjectData, files: string[], useHotModuleReload: Boolean, deviceId?: string): Promise<FilesPayload> {
+		const hmrMode = useHotModuleReload ? 1 : 0;
+		const payloads = this.getFilesPayload(platformData, projectData, hmrMode, _(files).uniq().value(), deviceId);
 		await this.$previewSdkService.applyChanges(payloads);
 
 		return payloads;
 	}
 
-	private getFilesPayload(platformData: IPlatformData, projectData: IProjectData, files?: string[]): FilesPayload {
+	private getFilesPayload(platformData: IPlatformData, projectData: IProjectData, hmrMode: number, files?: string[], deviceId?: string): FilesPayload {
 		const platformsAppFolderPath = path.join(platformData.appDestinationDirectoryPath, APP_FOLDER_NAME);
 
 		if (files && files.length) {
@@ -163,7 +185,7 @@ export class PreviewAppLiveSyncService implements IPreviewAppLiveSyncService {
 				return filePayload;
 			});
 
-		return { files: payloads, platform: platformData.normalizedPlatformName.toLowerCase() };
+		return { files: payloads, platform: platformData.normalizedPlatformName.toLowerCase(), hmrMode, deviceId};
 	}
 
 	private async preparePlatform(platform: string, appFilesUpdaterOptions: IAppFilesUpdaterOptions, env: Object, projectData: IProjectData): Promise<void> {

lib/services/livesync/playground/preview-sdk-service.ts

@@ -1,8 +1,10 @@
 import { MessagingService, Config, Device, DeviceConnectedMessage, SdkCallbacks, ConnectedDevices, FilesPayload } from "nativescript-preview-sdk";
 import { PubnubKeys } from "./preview-app-constants";
+import { DEVICE_LOG_EVENT_NAME } from "../../../common/constants";
+import { EventEmitter } from "events";
 const pako = require("pako");
 
-export class PreviewSdkService implements IPreviewSdkService {
+export class PreviewSdkService extends EventEmitter implements IPreviewSdkService {
 	private static MAX_FILES_UPLOAD_BYTE_LENGTH = 15 * 1024 * 1024; // In MBs
 	private messagingService: MessagingService = null;
 	private instanceId: string = null;
@@ -11,6 +13,7 @@ export class PreviewSdkService implements IPreviewSdkService {
 	constructor(private $logger: ILogger,
 		private $httpClient: Server.IHttpClient,
 		private $config: IConfiguration) {
+			super();
 	}
 
 	public getQrCodeUrl(options: IHasUseHotModuleReloadOption): string {
@@ -58,7 +61,8 @@ export class PreviewSdkService implements IPreviewSdkService {
 				this.$logger.trace("Received onLogSdkMessage message: ", log);
 			},
 			onConnectedDevicesChange: (connectedDevices: ConnectedDevices) => ({ }),
-			onLogMessage: (log: string, deviceName: string) => {
+			onLogMessage: (log: string, deviceName: string, deviceId: string) => {
+				this.emit(DEVICE_LOG_EVENT_NAME, log, deviceId);
 				this.$logger.info(`LOG from device ${deviceName}: ${log}`);
 			},
 			onRestartMessage: () => {

lib/services/log-parser-service.ts

@@ -7,7 +7,8 @@ export class LogParserService extends EventEmitter implements ILogParserService
 
 	constructor(private $deviceLogProvider: Mobile.IDeviceLogProvider,
 		private $devicesService: Mobile.IDevicesService,
-		private $errors: IErrors) {
+		private $errors: IErrors,
+		private $previewSdkService: IPreviewSdkService) {
 		super();
 	}
 
@@ -23,16 +24,16 @@ export class LogParserService extends EventEmitter implements ILogParserService
 	@cache()
 	private startParsingLogCore(): void {
 		this.$deviceLogProvider.on(DEVICE_LOG_EVENT_NAME, (message: string, deviceIdentifier: string) => this.processDeviceLogResponse(message, deviceIdentifier));
+		this.$previewSdkService.on(DEVICE_LOG_EVENT_NAME, (message: string, deviceIdentifier: string) => this.processDeviceLogResponse(message, deviceIdentifier));
 	}
 
 	private processDeviceLogResponse(message: string, deviceIdentifier: string) {
-		const device = this.$devicesService.getDeviceByIdentifier(deviceIdentifier);
-		const devicePlatform = device.deviceInfo.platform.toLowerCase();
+		const devicePlatform = this.tryGetPlatform(deviceIdentifier);
 
 		const lines = message.split("\n");
 		_.forEach(lines, line => {
 			_.forEach(this.parseRules, (parseRule) => {
-				if (!parseRule.platform || parseRule.platform.toLowerCase() === devicePlatform) {
+				if (!devicePlatform || !parseRule.platform || parseRule.platform.toLowerCase() === devicePlatform) {
 					const matches = parseRule.regex.exec(line);
 
 					if (matches) {
@@ -42,6 +43,18 @@ export class LogParserService extends EventEmitter implements ILogParserService
 			});
 		});
 	}
+
+	private tryGetPlatform (deviceIdentifier: string): string {
+		let devicePlatform;
+		try {
+			const device = this.$devicesService.getDeviceByIdentifier(deviceIdentifier);
+			devicePlatform = device.deviceInfo.platform.toLowerCase();
+		} catch (err) {
+			devicePlatform = null;
+		}
+
+		return devicePlatform;
+	}
 }
 
 $injector.register("logParserService", LogParserService);

package.json

@@ -56,7 +56,7 @@
     "mkdirp": "0.5.1",
     "mute-stream": "0.0.5",
     "nativescript-doctor": "1.5.0",
-    "nativescript-preview-sdk": "0.2.18",
+    "nativescript-preview-sdk": "0.3.0",
     "open": "0.0.5",
     "ora": "2.0.0",
     "osenv": "0.1.3",

test/services/ios-debugger-port-service.ts

@@ -38,6 +38,9 @@ function createTestInjector() {
 	injector.register("iOSProjectService", {
 		getFrameworkVersion: () => "4.1.0"
 	});
+	injector.register("previewSdkService", {
+		on: () => {}
+	});
 	injector.register("iOSSimResolver", {
 		iOSSim: () => ({})
 	});

test/services/log-parser-service.ts

@@ -21,6 +21,9 @@ class DeveiceLogProviderMock extends EventEmitter {
 function createTestInjector() {
 	const injector = new Yok();
 	injector.register("deviceLogProvider", DeveiceLogProviderMock);
+	injector.register("previewSdkService", {
+		on: () => {}
+	});
 	injector.register("devicePlatformsConstants", DevicePlatformsConstants);
 	injector.register("logParserService", LogParserService);
 	injector.register("devicesService", {

test/services/playground/preview-app-livesync-service.ts

@@ -6,6 +6,7 @@ import { PreviewAppLiveSyncService } from "../../../lib/services/livesync/playgr
 import * as chai from "chai";
 import * as path from "path";
 import { ProjectFilesManager } from "../../../lib/common/services/project-files-manager";
+import { EventEmitter } from "events";
 
 interface ITestCase {
 	name: string;
@@ -67,7 +68,7 @@ const syncFilesMockData = {
 	env: {}
 };
 
-class PreviewSdkServiceMock implements IPreviewSdkService {
+class PreviewSdkServiceMock extends EventEmitter implements IPreviewSdkService {
 	public getInitialFiles: (device: Device) => Promise<FilesPayload>;
 
 	public getQrCodeUrl(options: IHasUseHotModuleReloadOption) {
@@ -107,6 +108,7 @@ function createTestInjector(options?: {
 	injector.register("platformService", {
 		preparePlatform: async () => ({})
 	});
+	injector.register("hmrStatusService", {});
 	injector.register("errors", ErrorsStub);
 	injector.register("platformsData", {
 		getPlatformData: () => ({