refactor: HMR and webpack improvements

.gitignore

@@ -2,34 +2,34 @@
 node_modules
 *.tgz
 package-lock.json
+*.js.map
 
 plugins/NativeScriptAngularCompilerPlugin.d.ts
 plugins/NativeScriptAngularCompilerPlugin.js
-plugins/NativeScriptAngularCompilerPlugin.js.map
 
 transformers/*.d.ts
 transformers/*.js
-transformers/*.js.map
 
 utils/*.d.ts
 utils/*.js
-utils/*.js.map
+
+hmr/*.d.ts
+hmr/*.js
 
 plugins/PlatformFSPlugin.d.ts
 plugins/PlatformFSPlugin.js
-plugins/PlatformFSPlugin.js.map
 
 plugins/WatchStateLoggerPlugin.d.ts
 plugins/WatchStateLoggerPlugin.js
-plugins/WatchStateLoggerPlugin.js.map
 
 host/resolver.d.ts
 host/resolver.js
-host/resolver.js.map
 
 jasmine-config/reporter.d.ts
 jasmine-config/reporter.js
-jasmine-config/reporter.js.map
+
+bundle-config-loader.d.ts
+bundle-config-loader.js
 
 **/*.spec.js*
 **/*.spec.d.ts*

.vscode/launch.json

@@ -19,6 +19,16 @@
             "args": [ "--env.android", "--env.aot" ],
             "runtimeArgs": [ "--preserve-symlinks" ],
             "stopOnEntry": true,
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "TypeScriptApp Webpack",
+            "cwd": "${workspaceFolder}/demo/TypeScriptApp",
+            "program": "${workspaceFolder}/demo/TypeScriptApp/node_modules/.bin/webpack",
+            "args": [ "--env.android" ],
+            "stopOnEntry": true,
+            "preLaunchTask": "npm:tsc"
         }
     ]
 }

.vscode/tasks.json

@@ -0,0 +1,13 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558 
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label":"npm:tsc",
+            "type": "npm",
+            "script": "tsc",
+            "problemMatcher": []
+        }
+    ]
+}

bundle-config-loader.js → bundle-config-loader.ts

@@ -1,8 +1,19 @@
-const unitTestingConfigLoader = require("./unit-testing-config-loader");
+import unitTestingConfigLoader from "./unit-testing-config-loader";
+import { loader } from "webpack";
+import { getOptions } from "loader-utils";
 
-module.exports = function (source, map) {
-    this.cacheable();
-    const { angular = false, loadCss = true, unitTesting, projectRoot, appFullPath, registerModules = /(root|page)\.(xml|css|js|ts|scss)$/ } = this.query;
+// Matches all source, markup and style files that are not in App_Resources
+const defaultMatch = /(?<!App_Resources.*)\.(xml|css|js|(?<!d\.)ts|scss)$/;
+
+const loader: loader.Loader = function (source, map) {
+    const {
+        angular = false,
+        loadCss = true,
+        unitTesting,
+        projectRoot,
+        appFullPath,
+        registerModules = defaultMatch,
+    } = getOptions(this);
 
     if (unitTesting) {
         source = unitTestingConfigLoader({ appFullPath, projectRoot, angular, rootPagesRegExp: registerModules });
@@ -68,3 +79,6 @@ module.exports = function (source, map) {
 
     this.callback(null, source, map);
 };
+
+
+export default loader;

demo/AngularApp/webpack.config.js

@@ -33,7 +33,6 @@ module.exports = env => {
 
     // Default destination inside platforms/<platform>/...
     const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
-    const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS";
 
     const {
         // The 'appPath' and 'appResourcesPath' values are fetched from

demo/JavaScriptApp/webpack.config.js

@@ -28,7 +28,6 @@ module.exports = env => {
 
     // Default destination inside platforms/<platform>/...
     const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
-    const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS";
 
     const {
         // The 'appPath' and 'appResourcesPath' values are fetched from
@@ -103,7 +102,7 @@ module.exports = env => {
                 '~': appFullPath
             },
             // don't resolve symlinks to symlinked modules
-            symlinks: false
+            symlinks: true
         },
         resolveLoader: {
             // don't resolve symlinks to symlinked loaders
@@ -174,24 +173,15 @@ module.exports = env => {
                                 unitTesting,
                                 appFullPath,
                                 projectRoot,
+                                registerModules: /(?<!App_Resources.*)(?<!\.\/application)(?<!\.\/activity)\.(xml|css|js|(?<!d\.)ts|scss)$/
                             }
                         },
                     ].filter(loader => !!loader)
                 },
 
                 {
-                    test: /-page\.js$/,
-                    use: "nativescript-dev-webpack/script-hot-loader"
-                },
-
-                {
-                    test: /\.(css|scss)$/,
-                    use: "nativescript-dev-webpack/style-hot-loader"
-                },
-
-                {
-                    test: /\.(html|xml)$/,
-                    use: "nativescript-dev-webpack/markup-hot-loader"
+                    test: /\.(js|css|scss|html|xml)$/,
+                    use: "nativescript-dev-webpack/hmr/hot-loader"
                 },
 
                 { test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader" },
@@ -234,7 +224,7 @@ module.exports = env => {
                 platforms,
             }),
             // Does IPC communication with the {N} CLI to notify events when running in watch mode.
-            new nsWebpack.WatchStateLoggerPlugin(),
+            new nsWebpack.WatchStateLoggerPlugin()
         ],
     };
 

demo/TypeScriptApp/webpack.config.js

@@ -29,7 +29,6 @@ module.exports = env => {
 
     // Default destination inside platforms/<platform>/...
     const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
-    const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS";
 
     const {
         // The 'appPath' and 'appResourcesPath' values are fetched from
@@ -180,24 +179,15 @@ module.exports = env => {
                                 unitTesting,
                                 appFullPath,
                                 projectRoot,
+                                registerModules: /(?<!App_Resources.*)(?<!\.\/application)(?<!\.\/activity)\.(xml|css|js|(?<!d\.)ts|scss)$/
                             }
                         },
                     ].filter(loader => !!loader)
                 },
 
                 {
-                    test: /-page\.ts$/,
-                    use: "nativescript-dev-webpack/script-hot-loader"
-                },
-
-                {
-                    test: /\.(css|scss)$/,
-                    use: "nativescript-dev-webpack/style-hot-loader"
-                },
-
-                {
-                    test: /\.(html|xml)$/,
-                    use: "nativescript-dev-webpack/markup-hot-loader"
+                    test: /\.(ts|css|scss|html|xml)$/,
+                    use: "nativescript-dev-webpack/hmr/hot-loader"
                 },
 
                 { test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader" },
@@ -265,7 +255,7 @@ module.exports = env => {
                 async: false,
                 useTypescriptIncrementalApi: true,
                 memoryLimit: 4096
-            }),
+            })
         ],
     };
 

hmr/hmr-update.ts

@@ -0,0 +1,10 @@
+import update from "../hot";
+import { knownFolders } from "tns-core-modules/file-system";
+
+declare const __webpack_require__: any;
+
+export function hmrUpdate() {
+    const applicationFiles = knownFolders.currentApp();
+    const latestHash = __webpack_require__["h"]();
+    return update(latestHash, filename => applicationFiles.getFile(filename));
+}

hmr/hot-loader.ts

@@ -0,0 +1,44 @@
+import { loader } from "webpack";
+import { convertToUnixPath } from "../lib/utils";
+import { extname } from "path";
+import { getOptions } from "loader-utils";
+
+const extMap = {
+    ".css": "style",
+    ".scss": "style",
+    ".less": "style",
+    ".js": "script",
+    ".ts": "script",
+    ".xml": "markup",
+    ".html": "markup",
+}
+
+const loader: loader.Loader = function (source, map) {
+    const moduleRelativePath = this.resourcePath.replace(this.rootContext, ".");
+    const modulePath = convertToUnixPath(moduleRelativePath);
+    const ext = extname(modulePath).toLowerCase();
+    const moduleType = extMap[ext] || "unknown";
+
+    const options = getOptions(this) || {};
+    const alwaysSelfAccept = options.alwaysSelfAccept;
+    const trace = options.trace;
+
+    const shouldAutoAcceptCheck = `&& global._isModuleLoadedForUI && global._isModuleLoadedForUI("${modulePath}")`;
+    const traceCode = `console.log("[hot-loader]: Self-accept module: ${modulePath}");`;
+
+    const hotCode = `
+if (module.hot ${alwaysSelfAccept ? "" : shouldAutoAcceptCheck} ) {
+    ${trace ? traceCode : ""}
+    module.hot.accept();
+    module.hot.dispose(() => {
+        global.hmrRefresh({ type: "${moduleType}", path: "${modulePath}" });
+    });
+}`;
+
+    this.callback(null, `${source}; ${hotCode} `, map);
+};
+
+export default loader;
+
+
+

hmr/index.ts

@@ -0,0 +1 @@
+export { hmrUpdate } from "./hmr-update";

jasmine-config/jasmine.json

@@ -1,7 +1,8 @@
 {
   "spec_dir": ".",
   "spec_files": [
-	"./!(node_modules)/**/*.spec.js",
+	"!node_modules/**/*.spec.js",
+	"!demo/**/*.spec.js",
 	"./*.spec.js"
   ],
   "helpers": [

package.json

@@ -28,10 +28,11 @@
     "url": "https://github.com/NativeScript/nativescript-dev-webpack.git"
   },
   "scripts": {
+    "tsc": "tsc",
     "postinstall": "node postinstall.js",
     "preuninstall": "node preuninstall.js",
     "postpack": "rm -rf node_modules",
-    "prepare": "tsc && npm run jasmine",
+    "prepare": "npm run tsc && npm run jasmine",
     "test": "npm run prepare && npm run jasmine",
     "jasmine": "jasmine --config=jasmine-config/jasmine.json",
     "version": "rm package-lock.json && conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"
@@ -49,8 +50,8 @@
     "clean-webpack-plugin": "~1.0.0",
     "copy-webpack-plugin": "~4.6.0",
     "css-loader": "~2.1.1",
-    "fork-ts-checker-webpack-plugin": "1.3.0",
     "extra-watch-webpack-plugin": "1.0.3",
+    "fork-ts-checker-webpack-plugin": "1.3.0",
     "global-modules-path": "2.0.0",
     "minimatch": "3.0.4",
     "nativescript-hook": "0.2.4",
@@ -77,13 +78,17 @@
     "@angular/compiler-cli": "8.0.0",
     "@ngtools/webpack": "8.0.0",
     "@types/jasmine": "^3.3.7",
+    "@types/loader-utils": "^1.1.3",
     "@types/node": "^10.12.12",
     "@types/proxyquire": "1.3.28",
     "@types/semver": "^6.0.0",
+    "@types/webpack": "^4.4.34",
     "conventional-changelog-cli": "^1.3.22",
     "jasmine": "^3.2.0",
     "jasmine-spec-reporter": "^4.2.1",
+    "loader-utils": "^1.2.3",
     "proxyquire": "2.1.0",
+    "tns-core-modules": "next",
     "typescript": "~3.4.0"
   }
 }

templates/webpack.angular.js

@@ -32,7 +32,6 @@ module.exports = env => {
 
     // Default destination inside platforms/<platform>/...
     const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
-    const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS";
 
     const {
         // The 'appPath' and 'appResourcesPath' values are fetched from

templates/webpack.javascript.js

@@ -27,7 +27,6 @@ module.exports = env => {
 
     // Default destination inside platforms/<platform>/...
     const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
-    const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS";
 
     const {
         // The 'appPath' and 'appResourcesPath' values are fetched from
@@ -179,18 +178,8 @@ module.exports = env => {
                 },
 
                 {
-                    test: /-page\.js$/,
-                    use: "nativescript-dev-webpack/script-hot-loader"
-                },
-
-                {
-                    test: /\.(css|scss)$/,
-                    use: "nativescript-dev-webpack/style-hot-loader"
-                },
-
-                {
-                    test: /\.(html|xml)$/,
-                    use: "nativescript-dev-webpack/markup-hot-loader"
+                    test: /\.(js|css|scss|html|xml)$/,
+                    use: "nativescript-dev-webpack/hmr/hot-loader"
                 },
 
                 { test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader" },