Merge pull request #3990 from NativeScript/fatme/ipp

fix: improve initial page of `tns preview` command

Author: Fatme

lib/bootstrap.ts

@@ -123,7 +123,6 @@ $injector.requireCommand("platform|clean", "./commands/platform-clean");
 $injector.require("bundleValidatorHelper", "./helpers/bundle-validator-helper");
 $injector.require("liveSyncCommandHelper", "./helpers/livesync-command-helper");
 $injector.require("deployCommandHelper", "./helpers/deploy-command-helper");
-$injector.require("previewCommandHelper", "./helpers/preview-command-helper");
 
 $injector.requirePublicClass("localBuildService", "./services/local-build-service");
 $injector.requirePublicClass("liveSyncService", "./services/livesync/livesync-service");

lib/commands/preview.ts

@@ -7,12 +7,9 @@ export class PreviewCommand implements ICommand {
 		private $networkConnectivityValidator: INetworkConnectivityValidator,
 		private $projectData: IProjectData,
 		private $options: IOptions,
-		private $playgroundQrCodeGenerator: IPlaygroundQrCodeGenerator,
-		private $previewCommandHelper: IPreviewCommandHelper) { }
-
-	public async execute(args: string[]): Promise<void> {
-		this.$previewCommandHelper.run();
+		private $playgroundQrCodeGenerator: IPlaygroundQrCodeGenerator) { }
 
+	public async execute(): Promise<void> {
 		await this.$liveSyncService.liveSync([], {
 			syncToPreviewApp: true,
 			projectDir: this.$projectData.projectDir,
@@ -26,7 +23,7 @@ export class PreviewCommand implements ICommand {
 			useHotModuleReload: this.$options.hmr
 		});
 
-		await this.$playgroundQrCodeGenerator.generateQrCodeForCurrentApp({ useHotModuleReload: this.$options.hmr });
+		await this.$playgroundQrCodeGenerator.generateQrCode({ useHotModuleReload: this.$options.hmr, link: this.$options.link });
 	}
 
 	public async canExecute(args: string[]): Promise<boolean> {

lib/declarations.d.ts

@@ -523,7 +523,7 @@ interface IOptions extends IRelease, IDeviceIdentifier, IJustLaunch, IAvd, IAvai
 	inspector: boolean; // the counterpart to --chrome
 	background: string;
 	hmr: boolean;
-
+	link: boolean;
 }
 
 interface IEnvOptions {

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

@@ -23,13 +23,15 @@ declare global {
 		getExternalPlugins(device: Device): string[];
 	}
 
-	interface IPreviewCommandHelper {
-		run(): void;
+	interface IPlaygroundQrCodeGenerator {
+		generateQrCode(options: IGenerateQrCodeOptions): Promise<void>;
 	}
 
-	interface IPlaygroundQrCodeGenerator {
-		generateQrCodeForiOS(): Promise<void>;
-		generateQrCodeForAndroid(): Promise<void>;
-		generateQrCodeForCurrentApp(options: IHasUseHotModuleReloadOption): Promise<void>;
+	interface IGenerateQrCodeOptions extends IHasUseHotModuleReloadOption {
+		/**
+		 * If set to true, a link will be shown on console instead of QR code
+		 * Default value is false.
+		 */
+		link: boolean;
 	}
 }

lib/definitions/qr-code.d.ts

@@ -1,3 +1,3 @@
 interface IQrCodeTerminalService {
-	generate(url: string, message: string): void;
+	generate(url: string): void;
 }

lib/helpers/preview-command-helper.ts

@@ -113,7 +113,8 @@ export class Options {
 			var: { type: OptionType.Object },
 			default: { type: OptionType.Boolean },
 			count: { type: OptionType.Number },
-			hooks: { type: OptionType.Boolean, default: true }
+			hooks: { type: OptionType.Boolean, default: true },
+			link: { type: OptionType.Boolean, default: false }
 		};
 	}
 

lib/options.ts

@@ -1,6 +1,6 @@
-import { PlaygroundStoreUrls } from "./preview-app-constants";
 import * as util from "util";
-const chalk = require("chalk");
+import { EOL } from "os";
+import { PlaygroundStoreUrls } from "./preview-app-constants";
 
 export class PlaygroundQrCodeGenerator implements IPlaygroundQrCodeGenerator {
 	constructor(private $previewSdkService: IPreviewSdkService,
@@ -10,27 +10,8 @@ export class PlaygroundQrCodeGenerator implements IPlaygroundQrCodeGenerator {
 		private $logger: ILogger) {
 	}
 
-	public async generateQrCodeForiOS(): Promise<void> {
-		const message = `Scan the QR code below to install ${"NativeScript Playground app".underline.bold} on your ${"iOS".underline.bold} device or get it from ${PlaygroundStoreUrls.APP_STORE_URL.underline.bold}.`;
-		await this.generateQrCode(PlaygroundStoreUrls.APP_STORE_URL, message);
-	}
-
-	public async generateQrCodeForAndroid(): Promise<void> {
-		const message = `Scan the QR code below to install ${"NativeScript Playground app".underline.bold} on your ${"Android".underline.bold} device or get it from ${PlaygroundStoreUrls.GOOGLE_PLAY_URL.underline.bold}.`;
-		await this.generateQrCode(PlaygroundStoreUrls.GOOGLE_PLAY_URL, message);
-	}
-
-	public async generateQrCodeForCurrentApp(options: IHasUseHotModuleReloadOption): Promise<void> {
-		const message = `Use ${"NativeScript Playground app".underline.bold} and scan the QR code below to preview the application on your device.`;
-		await this.generateQrCode(this.$previewSdkService.getQrCodeUrl(options), message);
-	}
-
-	private async generateQrCode(url: string, message: string): Promise<void> {
-		await this.generateQrCodeCore(url, message);
-		this.printUsage();
-	}
-
-	private async generateQrCodeCore(url: string, message: string): Promise<void> {
+	public async generateQrCode(options: IGenerateQrCodeOptions): Promise<void> {
+		let url = this.$previewSdkService.getQrCodeUrl(options);
 		const shortenUrlEndpoint = util.format(this.$config.SHORTEN_URL_ENDPOINT, encodeURIComponent(url));
 		try {
 			const response = await this.$httpClient.httpRequest(shortenUrlEndpoint);
@@ -40,20 +21,22 @@ export class PlaygroundQrCodeGenerator implements IPlaygroundQrCodeGenerator {
 			// use the longUrl
 		}
 
-		this.$qrCodeTerminalService.generate(url, message);
-	}
-
-	private printUsage(): void {
-		this.$logger.info(`
--> Press ${this.underlineBoldCyan("a")} to get a link to NativeScript Playground app for ${this.underlineBoldCyan("Android")} on Google Play
--> Press ${this.underlineBoldCyan("i")} to get a link to NativeScript Playground app for ${this.underlineBoldCyan("iOS")} on the App Store
--> Press ${this.underlineBoldCyan("c")} to show the QR code of ${this.underlineBoldCyan("your application")}
-		`);
-	}
-
-	private underlineBoldCyan(str: string) {
-		const { bold, underline, cyan } = chalk;
-		return underline(bold(cyan(str)));
+		this.$logger.info();
+		const message = `${EOL} Generating qrcode for url ${url}.`;
+		this.$logger.trace(message);
+
+		if (options.link) {
+			this.$logger.printMarkdown(message);
+		} else {
+			this.$qrCodeTerminalService.generate(url);
+
+			this.$logger.info();
+			this.$logger.printMarkdown(`# Use \`NativeScript Playground app\` and scan the \`QR code\` below to preview the application on your device.`);
+			this.$logger.printMarkdown(`
+To scan the QR code and deploy your app on a device, you need to have the \`NativeScript Playground app\`:
+	App Store (iOS): ${PlaygroundStoreUrls.APP_STORE_URL}
+	Google Play (Android): ${PlaygroundStoreUrls.GOOGLE_PLAY_URL}`);
+		}
 	}
 }
 $injector.register("playgroundQrCodeGenerator", PlaygroundQrCodeGenerator);

lib/services/livesync/playground/qr-code-generator.ts

@@ -15,11 +15,6 @@ export class PlatformEnvironmentRequirements implements IPlatformEnvironmentRequ
 		private $injector: IInjector,
 		private $playgroundQrCodeGenerator: IPlaygroundQrCodeGenerator) { }
 
-	@cache()
-	private get $previewCommandHelper(): IPreviewCommandHelper {
-		return this.$injector.resolve("previewCommandHelper");
-	}
-
 	@cache()
 	private get $liveSyncService(): ILiveSyncService {
 		return this.$injector.resolve("liveSyncService");
@@ -186,7 +181,6 @@ export class PlatformEnvironmentRequirements implements IPlatformEnvironmentRequ
 				this.$errors.failWithoutHelp(`No project found. In order to sync to playground you need to go to project directory or specify --path option.`);
 			}
 
-			this.$previewCommandHelper.run();
 			await this.$liveSyncService.liveSync([], {
 				syncToPreviewApp: true,
 				projectDir,
@@ -200,7 +194,7 @@ export class PlatformEnvironmentRequirements implements IPlatformEnvironmentRequ
 				useHotModuleReload: options.hmr
 			});
 
-			await this.$playgroundQrCodeGenerator.generateQrCodeForCurrentApp({ useHotModuleReload: options.hmr });
+			await this.$playgroundQrCodeGenerator.generateQrCode({ useHotModuleReload: options.hmr, link: options.link });
 		}
 	}
 

lib/services/platform-environment-requirements.ts

@@ -1,14 +1,9 @@
-import { EOL } from "os";
-
 const qrcode = require("qrcode-terminal");
 
 export class QrCodeTerminalService implements IQrCodeTerminalService {
 	constructor(private $logger: ILogger) { }
 
-	public generate(url: string, message: string): void {
-		this.$logger.info(`${EOL} ${message.blue}`);
-		this.$logger.info(`${EOL} Generating qrcode for url ${url}.`);
-
+	public generate(url: string): void {
 		try {
 			qrcode.generate(url);
 		} catch (err) {