fix: initial sync on Preview app (Android) leads to loop

When `tns preview` command is executed and the QR code is scanned with Android device, the Preview app on this device asks for initial sync of the files. At this point CLI starts preparing the project and once the files are prepared, it sends them to device.
However, this operation may take some time, especially for code sharing projects, which have a lot of dependencies and webpack is used. Meanwhile the Preview app on device sees that it had not received the files within 10 seconds and sends a new message to get the initial files.
So CLI starts another process of preparation and trying to sync the changes. Based on the time required, this may become an indefinite loop.
Fix this by caching the promise for initial sync and in case device asks again, CLI will use the already pending promise.

Also fix the case where another device from the same platform is used to scan the QR code at some point. Currently we've not passed device identifier to pubnub and the initial sync was sending the files to all devices in the mentioned scenario.

Author: rosen-vladimirov

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

@@ -7,6 +7,7 @@ const isTextOrBinary = require('istextorbinary');
 export class PreviewAppLiveSyncService implements IPreviewAppLiveSyncService {
 	private excludedFileExtensions = [".ts", ".sass", ".scss", ".less"];
 	private excludedFiles = [".DS_Store"];
+	private deviceInitializationPromise: IDictionary<Promise<FilesPayload>> = {};
 
 	constructor(private $fs: IFileSystem,
 		private $errors: IErrors,
@@ -26,37 +27,51 @@ export class PreviewAppLiveSyncService implements IPreviewAppLiveSyncService {
 				this.$errors.failWithoutHelp("Sending initial preview files without a specified device is not supported.");
 			}
 
-			const filesToSyncMap: IDictionary<string[]> = {};
-			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]);
-						await promise;
-					});
-				filesToSyncMap[platform] = [];
-			};
-			await this.$hooksService.executeBeforeHooks("preview-sync", {
-				hookArgs: {
-					projectData: this.$projectDataService.getProjectData(data.projectDir),
-					config: {
-						env: data.env,
-						platform: device.platform,
-						appFilesUpdaterOptions: data.appFilesUpdaterOptions,
-					},
-					externals: this.$previewAppPluginsService.getExternalPlugins(device),
-					filesToSyncMap,
-					startSyncFilesTimeout: startSyncFilesTimeout.bind(this)
-				}
-			});
-			await this.$previewAppPluginsService.comparePluginsOnDevice(data, device);
-			const payloads = await this.syncFilesForPlatformSafe(data, device.platform);
+			if (this.deviceInitializationPromise[device.id]) {
+				return this.deviceInitializationPromise[device.id];
+			}
 
-			return payloads;
+			this.deviceInitializationPromise[device.id] = this.initializePreviewForDevice(data, device);
+			try {
+				const payloads = await this.deviceInitializationPromise[device.id];
+				return payloads;
+			} finally {
+				this.deviceInitializationPromise[device.id] = null;
+			}
 		});
 	}
 
+	private async initializePreviewForDevice(data: IPreviewAppLiveSyncData, device: Device): Promise<FilesPayload> {
+		const filesToSyncMap: IDictionary<string[]> = {};
+		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]);
+					await promise;
+				});
+			filesToSyncMap[platform] = [];
+		};
+		await this.$hooksService.executeBeforeHooks("preview-sync", {
+			hookArgs: {
+				projectData: this.$projectDataService.getProjectData(data.projectDir),
+				config: {
+					env: data.env,
+					platform: device.platform,
+					appFilesUpdaterOptions: data.appFilesUpdaterOptions,
+				},
+				externals: this.$previewAppPluginsService.getExternalPlugins(device),
+				filesToSyncMap,
+				startSyncFilesTimeout: startSyncFilesTimeout.bind(this)
+			}
+		});
+		await this.$previewAppPluginsService.comparePluginsOnDevice(data, device);
+		const payloads = await this.syncFilesForPlatformSafe(data, device.platform);
+		payloads.deviceId = device.id;
+		return payloads;
+	}
+
 	public async syncFiles(data: IPreviewAppLiveSyncData, files?: string[]): Promise<void> {
 		this.showWarningsForNativeFiles(files);