fix(HMR): modulePath on Windows to apply changes in app styles at runtime (#807)

* fix(HMR): modulePath on Windows

Replace backslashes with forward slashes.

* refactor: rename a method

Author: vchimev

lib/utils.js

@@ -1,10 +1,8 @@
 const os = require("os");
-const path = require("path");
 
 const {
     getAppPathFromProjectData,
     getAppResourcesPathFromProjectData,
-    getProjectDir,
     isAndroid,
 } = require("../projectHelpers");
 
@@ -92,12 +90,17 @@ function removeListener(eventEmitter, name) {
     }
 }
 
+function convertToUnixPath(relativePath) {
+    return relativePath.replace(/\\/g, "/");
+}
+
 module.exports = {
     buildEnvData,
     debuggingEnabled,
     shouldSnapshot,
     getUpdatedEmittedFiles,
     parseHotUpdateChunkName,
     addListener,
-    removeListener
+    removeListener,
+    convertToUnixPath
 };

markup-hot-loader.js

@@ -1,7 +1,9 @@
 const { reload } = require("./hot-loader-helper");
+const { convertToUnixPath } = require("./lib/utils");
 
 module.exports = function (source) {
     const typeMarkup = "markup";
-    const modulePath = this.resourcePath.replace(this.rootContext, ".");
+    const moduleRelativePath = this.resourcePath.replace(this.rootContext, ".");
+    const modulePath = convertToUnixPath(moduleRelativePath);
     return `${source};${reload({ type: typeMarkup, path: modulePath })}`;
 };

script-hot-loader.js

@@ -1,7 +1,9 @@
 const { reload } = require("./hot-loader-helper");
+const { convertToUnixPath } = require("./lib/utils");
 
 module.exports = function (source) {
     const typeScript = "script";
-    const modulePath = this.resourcePath.replace(this.rootContext, ".");
+    const moduleRelativePath = this.resourcePath.replace(this.rootContext, ".");
+    const modulePath = convertToUnixPath(moduleRelativePath);
     return `${source};${reload({ type: typeScript, path: modulePath })}`;
 };

style-hot-loader.js

@@ -1,7 +1,9 @@
 const { reload } = require("./hot-loader-helper");
+const { convertToUnixPath } = require("./lib/utils");
 
 module.exports = function (source) {
     const typeStyle = "style";
-    const modulePath = this.resourcePath.replace(this.rootContext, ".");
+    const moduleRelativePath = this.resourcePath.replace(this.rootContext, ".");
+    const modulePath = convertToUnixPath(moduleRelativePath);
     return `${source};${reload({ type: typeStyle, path: modulePath })}`;
 };