fix: fix hmr for platform specific files in linked plugins

demo/JavaScriptApp/webpack.config.js

@@ -5,7 +5,6 @@ const nsWebpack = require("nativescript-dev-webpack");
 const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
 const CleanWebpackPlugin = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
-const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
 const TerserPlugin = require("terser-webpack-plugin");
@@ -236,9 +235,6 @@ module.exports = env => {
             }),
             // Does IPC communication with the {N} CLI to notify events when running in watch mode.
             new nsWebpack.WatchStateLoggerPlugin(),
-            new ExtraWatchWebpackPlugin({
-                files: [`node_modules/**/*.${platform}.js`]
-            })
         ],
     };
 

demo/TypeScriptApp/webpack.config.js

@@ -6,7 +6,6 @@ const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target
 const CleanWebpackPlugin = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
 const TerserPlugin = require("terser-webpack-plugin");
@@ -267,9 +266,6 @@ module.exports = env => {
                 useTypescriptIncrementalApi: true,
                 memoryLimit: 4096
             }),
-            new ExtraWatchWebpackPlugin({
-                files: [`node_modules/**/*.${platform}.ts`]
-            })
         ],
     };
 

plugins/PlatformFSPlugin.ts

@@ -33,11 +33,11 @@ export class PlatformFSPlugin {
     public apply(compiler) {
         this.context = compiler.context;
         compiler.inputFileSystem = mapFileSystem({
-            fs: compiler.inputFileSystem,
             platform: this.platform,
             platforms: this.platforms,
             ignore: this.ignore,
-            context: this.context
+            context: this.context,
+            compiler
         });
     }
 }
@@ -46,15 +46,16 @@ export interface MapFileSystemArgs {
     /**
      * This is the underlying webpack compiler.inputFileSystem, its interface is similar to Node's fs.
      */
-    readonly fs: any;
     readonly context: string;
     readonly platform: string;
     readonly platforms: ReadonlyArray<string>;
     readonly ignore: ReadonlyArray<string>;
+    readonly compiler: any;
 }
 
 export function mapFileSystem(args: MapFileSystemArgs): any {
-    let { fs, platform, platforms, ignore, context } = args;
+    let { platform, platforms, ignore, context, compiler } = args;
+    const fs = compiler.inputFileSystem;
     ignore = args.ignore || [];
 
     const minimatchFileFilters = ignore.map(pattern => {
@@ -122,7 +123,8 @@ export function mapFileSystem(args: MapFileSystemArgs): any {
     }
 
     const platformSuffix = "." + platform + ".";
-    mappedFS.watch = function(
+    const baseWatch = compiler.watchFileSystem.watch;
+    compiler.watchFileSystem.watch = function(
         files,
         dirs,
         missing,
@@ -135,11 +137,15 @@ export function mapFileSystem(args: MapFileSystemArgs): any {
             missingModified,
             fileTimestamps,
             contextTimestamps
+        ) => void,
+        callbackUndelayed: (
+            filename,
+            timestamp
         ) => void) {
 
         const mappedFiles = listWithPlatformSpecificFiles(files);
 
-        const callbackCalled = function(
+        const newCallback = function(
                 err,
                 filesModified,
                 contextModified,
@@ -148,13 +154,17 @@ export function mapFileSystem(args: MapFileSystemArgs): any {
                 contextTimestamps) {
 
             const mappedFilesModified = filterIgnoredFilesAlienFilesAndMap(filesModified);
-
             const mappedTimestamps = new Map();
-            for(const file in fileTimestamps) {
-                const timestamp = fileTimestamps[file];
+            const fileTimestampsAsArray = Array.from(fileTimestamps);
+
+            for (const entry of fileTimestampsAsArray) {
+                const file = entry[0];
+                const timestamp = entry[1];
                 mappedTimestamps.set(file, timestamp);
+
                 const platformSuffixIndex = file.lastIndexOf(platformSuffix);
                 if (platformSuffixIndex != -1) {
+                    // file name without platform suffix
                     const mappedFile = file.substr(0, platformSuffixIndex) + file.substr(platformSuffixIndex + platformSuffix.length - 1);
                     if (!(mappedFile in fileTimestamps)) {
                         mappedTimestamps.set(mappedFile, timestamp);
@@ -165,7 +175,12 @@ export function mapFileSystem(args: MapFileSystemArgs): any {
             callback.call(this, err, mappedFilesModified, contextModified, missingModified, mappedTimestamps, contextTimestamps);
         }
 
-        fs.watch(mappedFiles, dirs, missing, startTime, watchOptions, callbackCalled);
+        const newCallbackUndelayed = function(filename, timestamp) {
+            compiler.watchFileSystem.inputFileSystem.purge(filename);
+            callbackUndelayed(filename, timestamp);
+        };
+
+        baseWatch.apply(compiler.watchFileSystem.watch, [mappedFiles, dirs, missing, startTime, watchOptions, newCallback, newCallbackUndelayed]);
     }
 
     /**

templates/webpack.javascript.js

@@ -5,7 +5,6 @@ const nsWebpack = require("nativescript-dev-webpack");
 const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
 const CleanWebpackPlugin = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
-const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
 const TerserPlugin = require("terser-webpack-plugin");
@@ -234,10 +233,7 @@ module.exports = env => {
                 platforms,
             }),
             // Does IPC communication with the {N} CLI to notify events when running in watch mode.
-            new nsWebpack.WatchStateLoggerPlugin(),
-            new ExtraWatchWebpackPlugin({
-                files: [`node_modules/**/*.${platform}.js`]
-            })
+            new nsWebpack.WatchStateLoggerPlugin()
         ],
     };
 

templates/webpack.typescript.js

@@ -6,7 +6,6 @@ const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target
 const CleanWebpackPlugin = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
 const TerserPlugin = require("terser-webpack-plugin");
@@ -265,9 +264,6 @@ module.exports = env => {
                 async: false,
                 useTypescriptIncrementalApi: true,
                 memoryLimit: 4096
-            }),
-            new ExtraWatchWebpackPlugin({
-                files: [`node_modules/**/*.${platform}.ts`]
             })
         ],
     };

templates/webpack.vue.js

@@ -3,7 +3,6 @@ const { join, relative, resolve, sep } = require("path");
 const webpack = require("webpack");
 const CleanWebpackPlugin = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
-const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 const TerserPlugin = require("terser-webpack-plugin");
 
@@ -258,10 +257,7 @@ module.exports = env => {
                 platforms,
             }),
             // Does IPC communication with the {N} CLI to notify events when running in watch mode.
-            new nsWebpack.WatchStateLoggerPlugin(),
-            new ExtraWatchWebpackPlugin({
-                files: [`node_modules/**/*.${platform}.ts`, `node_modules/**/*.${platform}.js`]
-            })
+            new nsWebpack.WatchStateLoggerPlugin()
         ],
     };