feat: add hook for preview command (#649)

Fatme · sis0k0 · commit 529b2bf218fd · 2018-09-28T11:08:30.000+03:00
`tns preview` command works without platform argument, so {N} CLI needs to start iOS webpack process when QR code is scanned with iOS device and android webpack process when QR code is scanned with Android device. Actually we need to have two separate webpack processes simultaneously. In order to do that we need to persist webpack process per platform. When `tns preview --bundle` command is executed and QR code is scanned for example with Android device, {N} CLI starts a webpack process in watch mode for Android platform. If the webpack process for Android is already started, {N} CLI doesn't do anything. In order to archive the above things, a new hook is introduced - "before-preview-sync". This hook is used only from `tns preview` command. ## PR Checklist - [x] The PR title follows our guidelines: https://github.com/NativeScript/NativeScript/blob/master/CONTRIBUTING.md#commit-messages. - [ ] There is an issue for the bug/feature this PR is for. To avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it. - [ ] You have signed the [CLA]. - [ ] All existing tests are passing: https://github.com/NativeScript/nativescript-dev-webpack/blob/master/CONTRIBUTING.md#testing-locally-by-running-e2e-tests - [ ] Tests for the changes are included. ## What is the current behavior? When `tns run --bundle` command is executed, the following error message is shown: "Bundling doesn't work with multiple platforms. Please specify platform to the run command." ## What is the new behavior? When `tns run --bundle` command is executed and for example the user has connected both iOS and Android devices, two webpack processes are started (one for Android and one for iOS). When the user makes some change in code, the changes are applied both on iOS and Android devices. NOTE: When a platform specific file is changed - for example `myfile.ios.js` only iOS webpack is started and the changes are applied only on iOS devices. When for example some iOS device is disconnected, we check if there are more connected iOS devices. If no more iOS devices are connected, we stopped the webpack process for iOS platform. We did it by adding an event handler for "liveSyncStopped" event. Implements: #457 Rel: NativeScript/nativescript-cli#3853 BREAKING CHANGES: The breaking changes are only for commands for which no platform argument is provided.
diff --git a/lib/after-watch.js b/lib/after-watch.js
@@ -1,8 +1,6 @@
-const compiler = require('./compiler');
+const { stopWebpackCompiler } = require('./compiler');
+
 module.exports = function($logger) {
-    const webpackProcess = compiler.getWebpackProcess();
-    if (webpackProcess) {
-        $logger.info("Stopping webpack watch");
-        webpackProcess.kill("SIGINT");
-    }
+    $logger.info("Stopping webpack watch");
+    stopWebpackCompiler();
 }
diff --git a/lib/before-cleanApp.js b/lib/before-cleanApp.js
@@ -1,13 +1,14 @@
 const { cleanSnapshotArtefacts } = require("../snapshot/android/project-snapshot-generator");
 const { isAndroid } = require("../projectHelpers");
-const { getWebpackProcess } = require("./compiler");
+const { getWebpackProcesses } = require("./compiler");
 
 module.exports = function (hookArgs) {
     return (args, originalMethod) => {
-        const webpackProcess = getWebpackProcess();
-        const promise = webpackProcess ? Promise.resolve() : originalMethod(...args);
+        const platform = hookArgs.platformInfo.platform;
+        const webpackProcesses = getWebpackProcesses();
+        const promise = webpackProcesses[platform] ? Promise.resolve() : originalMethod(...args);
         return promise.then(() => {
-            if (isAndroid(hookArgs.platformInfo.platform)) {
+            if (isAndroid(platform)) {
                 cleanSnapshotArtefacts(hookArgs.platformInfo.projectData.projectDir);
              }
         });
diff --git a/lib/before-preview-sync.js b/lib/before-preview-sync.js
@@ -0,0 +1,21 @@
+const { runWebpackCompiler } = require("./compiler");
+
+module.exports = function($logger, $liveSyncService, hookArgs) {
+	const { config } = hookArgs;
+	const bundle = config && config.appFilesUpdaterOptions && config.appFilesUpdaterOptions.bundle;
+	if (bundle) {
+		const env = config.env || {};
+		const platform = config.platform;
+		const release = config && config.appFilesUpdaterOptions && config.appFilesUpdaterOptions.release;
+		const compilerConfig = {
+			env,
+			platform,
+			bundle,
+			release,
+			watch: true
+		};
+
+		return runWebpackCompiler(compilerConfig, hookArgs.projectData, $logger, $liveSyncService, hookArgs);
+	}
+}
+
diff --git a/lib/before-watch.js b/lib/before-watch.js
@@ -1,23 +1,33 @@
-const { runWebpackCompiler } = require("./compiler");
+const { getWebpackProcesses, runWebpackCompiler, stopWebpackCompiler } = require("./compiler");
 
-module.exports = function ($logger, $liveSyncService, $options, hookArgs) {
-    if (hookArgs.config) {
-        const appFilesUpdaterOptions = hookArgs.config.appFilesUpdaterOptions;
-        if (appFilesUpdaterOptions.bundle) {
-            const platforms = hookArgs.config.platforms;
-            return Promise.all(platforms.map(platform => {
-                const env = hookArgs.config.env || {};
-                env.hmr = !!$options.hmr;
-                const config = {
-                    env,
-                    platform,
-                    bundle: appFilesUpdaterOptions.bundle,
-                    release: appFilesUpdaterOptions.release,
-                    watch: true
-                };
+module.exports = function ($logger, $liveSyncService, $options, $devicesService, hookArgs) {
+	if (hookArgs.config) {
+		const appFilesUpdaterOptions = hookArgs.config.appFilesUpdaterOptions;
+		if (appFilesUpdaterOptions.bundle) {
+			$liveSyncService.on("liveSyncStopped", data => {
+				const webpackProcesses = getWebpackProcesses();
+				Object.keys(webpackProcesses).forEach(platform => {
+					const devices = $devicesService.getDevicesForPlatform(platform);
+					if (!devices || !devices.length) {
+						stopWebpackCompiler(platform);
+					}
+				});
+			});
 
-                return runWebpackCompiler(config, hookArgs.projectData, $logger, $liveSyncService, hookArgs);
-            }));
-        }
-    }
+			const platforms = hookArgs.config.platforms;
+			return Promise.all(platforms.map(platform => {
+				const env = hookArgs.config.env || {};
+				env.hmr = !!$options.hmr;
+				const config = {
+					env,
+					platform,
+					bundle: appFilesUpdaterOptions.bundle,
+					release: appFilesUpdaterOptions.release,
+					watch: true
+				};
+
+				return runWebpackCompiler(config, hookArgs.projectData, $logger, $liveSyncService, hookArgs);
+			}));
+		}
+	}
 }
diff --git a/lib/compiler.js b/lib/compiler.js
@@ -9,17 +9,17 @@ const { buildEnvData, debuggingEnabled } = require("./utils");
 
 let hasBeenInvoked = false;
 
-let webpackProcess = null;
+let webpackProcesses = {};
 let hasLoggedSnapshotWarningMessage = false;
 
-exports.getWebpackProcess = function getWebpackProcess() {
-    return webpackProcess;
+exports.getWebpackProcesses = function getWebpackProcess() {
+    return webpackProcesses;
 }
 
 exports.runWebpackCompiler = function runWebpackCompiler(config, $projectData, $logger, $liveSyncService, hookArgs) {
     if (config.bundle) {
         return new Promise(function (resolveBase, rejectBase) {
-            if (webpackProcess) {
+            if (webpackProcesses[config.platform]) {
                 return resolveBase();
             }
 
@@ -43,6 +43,11 @@ exports.runWebpackCompiler = function runWebpackCompiler(config, $projectData, $
                 env["sourceMap"] = true;
             }
 
+            // Currently externals param is passed only from before-preview-sync hook. This hook is triggered only when `tns preview --bundle` command is executed
+            if (hookArgs && hookArgs.externals) {
+                env.externals = hookArgs.externals;
+            }
+
             const envData = buildEnvData($projectData, platform, env);
             const envParams = buildEnvCommandLineParams(config, envData, $logger);
 
@@ -77,22 +82,27 @@ exports.runWebpackCompiler = function runWebpackCompiler(config, $projectData, $
 
                     if (hookArgs.filesToSync && hookArgs.startSyncFilesTimeout) {
                         hookArgs.filesToSync.push(...message.emittedFiles);
-                        hookArgs.startSyncFilesTimeout();
+                        hookArgs.startSyncFilesTimeout(platform);
+                    }
+
+                    if (hookArgs.filesToSyncMap && hookArgs.startSyncFilesTimeout) {
+                        hookArgs.filesToSyncMap[platform] = message.emittedFiles;
+                        hookArgs.startSyncFilesTimeout(platform);
                     }
                 }
             }
 
             if (config.watch) {
                 childProcess.on("message", resolveOnWebpackCompilationComplete);
-                if (webpackProcess) {
+                if (webpackProcesses[platform]) {
                     throw new Error("Webpack process already spawned.");
                 }
-                webpackProcess = childProcess;
+                webpackProcesses[platform] = childProcess;
             }
 
             childProcess.on("close", code => {
-                if (webpackProcess == childProcess) {
-                    webpackProcess = null;
+                if (webpackProcesses[platform] === childProcess) {
+                    delete webpackProcesses[platform];
                 }
                 if (code === 0) {
                     resolve();
@@ -106,6 +116,14 @@ exports.runWebpackCompiler = function runWebpackCompiler(config, $projectData, $
     }
 }
 
+exports.stopWebpackCompiler = function stopWebpackCompiler(platform) {
+    if (platform) {
+        stopWebpackForPlatform(platform);
+    } else {
+        Object.keys(webpackProcesses).forEach(platform => stopWebpackForPlatform(platform));
+    }
+}
+
 function buildEnvCommandLineParams(config, envData, $logger) {
     const envFlagNames = Object.keys(envData);
     const snapshotEnvIndex = envFlagNames.indexOf("snapshot");
@@ -136,3 +154,9 @@ function logSnapshotWarningMessage($logger) {
     }
 }
 
+function stopWebpackForPlatform(platform) {
+    const webpackProcess = webpackProcesses[platform];
+    webpackProcess.kill("SIGINT");
+    delete webpackProcesses[platform];
+}
+
diff --git a/package.json b/package.json
@@ -44,6 +44,11 @@
         "type": "after-prepare",
         "script": "lib/after-prepare.js",
         "inject": true
+      },
+      {
+        "type": "before-preview-sync",
+        "script": "lib/before-preview-sync",
+        "inject": true
       }
     ]
   },
diff --git a/templates/webpack.angular.js b/templates/webpack.angular.js
@@ -42,8 +42,11 @@ module.exports = env => {
         uglify, // --env.uglify
         report, // --env.report
         sourceMap, // --env.sourceMap
-        hmr, // --env.hmr
+        hmr, // --env.hmr,
     } = env;
+    const externals = (env.externals || []).map((e) => { // --env.externals
+        return new RegExp(e + ".*");
+    });
 
     const appFullPath = resolve(projectRoot, appPath);
     const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
@@ -63,6 +66,7 @@ module.exports = env => {
     const config = {
         mode: uglify ? "production" : "development",
         context: appFullPath,
+        externals,
         watchOptions: {
             ignored: [
                 appResourcesFullPath,
diff --git a/templates/webpack.javascript.js b/templates/webpack.javascript.js
@@ -40,8 +40,11 @@ module.exports = env => {
         uglify, // --env.uglify
         report, // --env.report
         sourceMap, // --env.sourceMap
-        hmr, // --env.hmr
+        hmr, // --env.hmr,
     } = env;
+    const externals = (env.externals || []).map((e) => { // --env.externals
+        return new RegExp(e + ".*");
+    });
 
     const appFullPath = resolve(projectRoot, appPath);
     const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
@@ -52,6 +55,7 @@ module.exports = env => {
     const config = {
         mode: uglify ? "production" : "development",
         context: appFullPath,
+        externals,
         watchOptions: {
             ignored: [
                 appResourcesFullPath,
diff --git a/templates/webpack.typescript.js b/templates/webpack.typescript.js
@@ -40,8 +40,11 @@ module.exports = env => {
         uglify, // --env.uglify
         report, // --env.report
         sourceMap, // --env.sourceMap
-        hmr, // --env.hmr
+        hmr, // --env.hmr,
     } = env;
+    const externals = (env.externals || []).map((e) => { // --env.externals
+        return new RegExp(e + ".*");
+    });
 
     const appFullPath = resolve(projectRoot, appPath);
     const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
@@ -52,6 +55,7 @@ module.exports = env => {
     const config = {
         mode: uglify ? "production" : "development",
         context: appFullPath,
+        externals,
         watchOptions: {
             ignored: [
                 appResourcesFullPath,

Original file line number	Diff line number	Diff line change
`@@ -44,6 +44,11 @@`
`44`	`44`	`"type": "after-prepare",`
`45`	`45`	`"script": "lib/after-prepare.js",`
`46`	`46`	`"inject": true`
	`47`	`+ },`
	`48`	`+ {`
	`49`	`+ "type": "before-preview-sync",`
	`50`	`+ "script": "lib/before-preview-sync",`
	`51`	`+ "inject": true`
`47`	`52`	`}`
`48`	`53`	`]`
`49`	`54`	`},`