feat(livesync): enable webpack with watch

Plug into NativeScript CLI's LiveSync pipeline in order to enable incremental webpacking with watch. Includes: * Instruct CLI to watch `App_Resources` directory only * Launch `webpack` with `--watch` on before-watch hook * Do not launch multiple `webpack` processes
NativeScript · Feb 7, 2018 · d30bd90 · d30bd90
1 parent 07ba1ae
commit d30bd90
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 10 deletions.
diff --git a/lib/before-prepareJS.js b/lib/before-prepareJS.js
@@ -8,7 +8,7 @@ module.exports = function ($mobileHelper, $projectData, hookArgs) {
 		env,
 		platform,
 		bundle: appFilesUpdaterOptions.bundle,
-		watch: false // TODO: Read from CLI options...
+		watch: false
 	};
 	const result = config.bundle && runWebpackCompiler.bind(runWebpackCompiler, config, $mobileHelper, $projectData, hookArgs);
 	return result;

diff --git a/lib/before-watch.js b/lib/before-watch.js
@@ -0,0 +1,21 @@
+const { runWebpackCompiler } = require("./compiler");
+
+module.exports = function ($mobileHelper, $projectData, hookArgs) {
+	if (hookArgs.config) {
+		const appFilesUpdaterOptions = hookArgs.config.appFilesUpdaterOptions;
+		if (appFilesUpdaterOptions.bundle) {
+			const platforms = hookArgs.config.platforms;
+			platforms.forEach(platform => {
+				const env = hookArgs.config.env || {};
+				const config = {
+					env,
+					platform,
+					bundle: appFilesUpdaterOptions.bundle,
+					watch: true
+				};
+
+				runWebpackCompiler(config, $mobileHelper, $projectData, hookArgs);
+			});
+		}
+	}
+}
diff --git a/lib/before-watchPatterns.js b/lib/before-watchPatterns.js
@@ -0,0 +1,20 @@
+module.exports = function (hookArgs) {
+	if (hookArgs.liveSyncData && hookArgs.liveSyncData.bundle) {
+		const appDirectoryLocation = "app"; // Might need to get this from config file in the future
+		const appResourcesDirectoryLocation = "app/App_Resources"; // Might need to get this from config file in the future
+		return (args, originalMethod) => {
+			return originalMethod().then(originalPatterns => {
+				const appDirectoryLocationIndex = originalPatterns.indexOf(appDirectoryLocation);
+				if (appDirectoryLocationIndex !== -1) {
+					originalPatterns.splice(appDirectoryLocationIndex, 1);
+				}
+
+				if (originalPatterns.indexOf(appResourcesDirectoryLocation) === -1) {
+					originalPatterns.push(appResourcesDirectoryLocation);
+				}
+
+				return originalPatterns;
+			});
+		};
+	}
+}
diff --git a/lib/compiler.js b/lib/compiler.js
@@ -4,6 +4,7 @@ const { join, resolve: pathResolve } = require("path");
 const { existsSync } = require("fs");
 const readline = require("readline");
 const { messages } = require("../plugins/WatchStateLoggerPlugin");
+const ProjectSnapshotGenerator = require("../snapshot/android/project-snapshot-generator");
 
 let hasBeenInvoked = false;
 
@@ -16,6 +17,10 @@ exports.getWebpackProcess = function getWebpackProcess() {
 exports.runWebpackCompiler = function runWebpackCompiler(config, $mobileHelper, $projectData, hookArgs, originalArgs, originalMethod) {
     if (config.bundle) {
         return new Promise(function (resolveBase, rejectBase) {
+            if (webpackProcess) {
+                return resolveBase();
+            }
+
             if (hookArgs && hookArgs.config && hookArgs.config.changesInfo) {
                 hookArgs.config.changesInfo.nativeChanged = true;
             }
@@ -24,17 +29,11 @@ exports.runWebpackCompiler = function runWebpackCompiler(config, $mobileHelper,
             function resolve() {
                 if (isResolved) return;
                 isResolved = true;
-                if (childProcess) {
-                    childProcess.removeListener("message", resolveOnWebpackCompilationComplete);
-                }
                 resolveBase();
             }
             function reject(error) {
                 if (isResolved) return;
                 isResolved = true;
-                if (childProcess) {
-                    childProcess.removeListener("message", resolveOnWebpackCompilationComplete);
-                }
                 rejectBase(error);
             }
 
@@ -75,11 +74,25 @@ exports.runWebpackCompiler = function runWebpackCompiler(config, $mobileHelper,
                 cwd: $projectData.projectDir
             });
 
+            let isFirstWebpackWatchCompilation = true;
             function resolveOnWebpackCompilationComplete(message) {
                 if (message === messages.compilationComplete) {
-                    console.log("Initial webpack build done!");
+                    console.log("Webpack build done!");
                     resolve();
                 }
+
+                if (message.emittedFiles) {
+                    if (isFirstWebpackWatchCompilation) {
+                        isFirstWebpackWatchCompilation = false;
+                        return;
+                    }
+
+                    if (hookArgs.filesToSync && hookArgs.startSyncFilesTimeou) {
+                        // TODO: Might need to get the "app" constant from config file in the future
+                        hookArgs.filesToSync.push(...message.emittedFiles.map(emittedFile => join("app", emittedFile)));
+                        hookArgs.startSyncFilesTimeout();
+                    }
+                }
             }
 
             if (config.watch) {

diff --git a/package.json b/package.json
@@ -15,6 +15,16 @@
         "script": "lib/before-prepareJS.js",
         "inject": true
       },
+      {
+        "type": "before-watch",
+        "script": "lib/before-watch.js",
+        "inject": true
+      },
+      {
+        "type": "before-watchPatterns",
+        "script": "lib/before-watchPatterns.js",
+        "inject": true
+      },
       {
         "type": "after-prepare",
         "script": "lib/after-prepare.js",

diff --git a/plugins/WatchStateLoggerPlugin.ts b/plugins/WatchStateLoggerPlugin.ts
@@ -13,22 +13,29 @@ export class WatchStateLoggerPlugin {
     isRunningWatching: boolean;
     apply(compiler) {
         const plugin = this;
-        compiler.plugin("watch-run", function(compiler, callback) {
+        compiler.plugin("watch-run", function (compiler, callback) {
             plugin.isRunningWatching = true;
             if (plugin.isRunningWatching) {
                 console.log(messages.changeDetected);
             }
             process.send && process.send(messages.changeDetected, error => null);
             callback();
         });
-        compiler.plugin("after-emit", function(compilation, callback) {
+        compiler.plugin("after-emit", function (compilation, callback) {
             callback();
             if (plugin.isRunningWatching) {
                 console.log(messages.startWatching);
             } else {
                 console.log(messages.compilationComplete);
             }
+
+            const emittedFiles = Object
+                .keys(compilation.assets)
+                .filter(assetKey => compilation.assets[assetKey].emitted);
+
             process.send && process.send(messages.compilationComplete, error => null);
+            // Send emitted files so they can be LiveSynced if need be
+            process.send && process.send({ emittedFiles }, error => null);
         });
     }
 }
diff --git a/templates/webpack.angular.js b/templates/webpack.angular.js
@@ -20,6 +20,9 @@ module.exports = env => {
 
     const config = {
         context: resolve("./app"),
+        watchOptions: {
+            ignored: resolve("./app/App_Resources")
+        },
         target: nativescriptTarget,
         entry: {
             bundle: aot ? "./main.aot.ts" : "./main.ts",

diff --git a/templates/webpack.javascript.js b/templates/webpack.javascript.js
@@ -18,6 +18,9 @@ module.exports = env => {
 
     const config = {
         context: resolve("./app"),
+        watchOptions: {
+            ignored: resolve("./app/App_Resources")
+        },
         target: nativescriptTarget,
         entry: {
             bundle: `./${nsWebpack.getEntryModule()}`,

diff --git a/templates/webpack.typescript.js b/templates/webpack.typescript.js
@@ -18,6 +18,9 @@ module.exports = env => {
 
     const config = {
         context: resolve("./app"),
+        watchOptions: {
+            ignored: resolve("./app/App_Resources")
+        },
         target: nativescriptTarget,
         entry: {
             bundle: `./${nsWebpack.getEntryModule()}`,