fix: typescript source maps are containing javascript code (#857)

* fix: avoid losing the source map in some loader

* fix: generate TypeScript source maps

Author: Dimitar Tachev

android-app-components-loader.js

@@ -1,6 +1,6 @@
 const { convertSlashesInPath } = require("./projectHelpers");
 
-module.exports = function (source) {
+module.exports = function (source, map) {
     this.cacheable();
     const { modules } = this.query;
     const imports = modules.map(convertSlashesInPath)
@@ -14,5 +14,5 @@ module.exports = function (source) {
         ${source}
     `;
 
-    this.callback(null, augmentedSource);
+    this.callback(null, augmentedSource, map);
 };

apply-css-loader.js

@@ -1,4 +1,4 @@
-module.exports = function(content) {
+module.exports = function (content, map) {
     if (this.request.match(/\/app\.(css|scss|less|sass)$/)) {
         return content;
     }
@@ -14,5 +14,5 @@ module.exports = function(content) {
     });
     `;
 
-    return content;
+    this.callback(null, content, map);
 }

bundle-config-loader.js

@@ -1,6 +1,6 @@
 const unitTestingConfigLoader = require("./unit-testing-config-loader");
 
-module.exports = function (source) {
+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;
 
@@ -66,5 +66,5 @@ module.exports = function (source) {
         `;
     }
 
-    this.callback(null, source);
+    this.callback(null, source, map);
 };

css2json-loader.js

@@ -1,15 +1,15 @@
 const parse = require("tns-core-modules/css").parse;
 const nl = "\n";
 
-module.exports = function(content) {
+module.exports = function (content, map) {
     const ast = parse(content);
     const dependencies = getImportsFrom(ast)
         .map(mapURI)
-        .reduce((dependencies, {uri, requireURI}) =>
+        .reduce((dependencies, { uri, requireURI }) =>
             dependencies + `global.registerModule(${uri}, () => require(${requireURI}));${nl}`, "");
 
     const str = JSON.stringify(ast, (k, v) => k === "position" ? undefined : v);
-    return `${dependencies}module.exports = ${str};`;
+    this.callback(null, `${dependencies}module.exports = ${str};`, map);
 }
 
 function getImportsFrom(ast) {

markup-hot-loader.js

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

script-hot-loader.js

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

style-hot-loader.js

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

templates/webpack.typescript.js

@@ -8,7 +8,7 @@ const CopyWebpackPlugin = require("copy-webpack-plugin");
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
 const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
-const hashSalt =  Date.now().toString();
+const hashSalt = Date.now().toString();
 
 module.exports = env => {
     // Add your custom Activities, Services and other Android app components here.
@@ -115,7 +115,7 @@ module.exports = env => {
                         test: (module, chunks) => {
                             const moduleName = module.nameForCondition ? module.nameForCondition() : '';
                             return /[\\/]node_modules[\\/]/.test(moduleName) ||
-                                    appComponents.some(comp => comp === moduleName);
+                                appComponents.some(comp => comp === moduleName);
 
                         },
                         enforce: true,
@@ -179,7 +179,7 @@ module.exports = env => {
                     use: "nativescript-dev-webpack/markup-hot-loader"
                 },
 
-                { test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader"},
+                { test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader" },
 
                 {
                     test: /\.css$/,
@@ -201,6 +201,9 @@ module.exports = env => {
                         options: {
                             configFile: "tsconfig.tns.json",
                             allowTsInNodeModules: true,
+                            compilerOptions: {
+                                sourceMap
+                            }
                         },
                     }
                 },
@@ -213,7 +216,7 @@ module.exports = env => {
                 "process": undefined,
             }),
             // Remove all files from the out dir.
-            new CleanWebpackPlugin([ `${dist}/**/*` ]),
+            new CleanWebpackPlugin([`${dist}/**/*`]),
             // Copy assets to out dir. Add your own globs as needed.
             new CopyWebpackPlugin([
                 { from: { glob: "fonts/**" } },
@@ -226,10 +229,10 @@ module.exports = env => {
                 // configures the WebPack runtime to be generated inside the snapshot
                 // module and no `runtime.js` module exist.
                 (snapshot ? [] : ["./runtime"])
-                .concat([
-                    "./vendor",
-                    "./bundle",
-              ])
+                    .concat([
+                        "./vendor",
+                        "./bundle",
+                    ])
             ),
             // For instructions on how to set up workers with webpack
             // check out https://github.com/nativescript/worker-loader

xml-namespace-loader.js

@@ -2,7 +2,7 @@ const { parse, relative, join, basename, extname } = require("path");
 const { promisify } = require('util');
 const { convertSlashesInPath } = require("./projectHelpers");
 
-module.exports = function (source) {
+module.exports = function (source, map) {
     this.value = source;
     const { ignore } = this.query;
     const callback = this.async();
@@ -41,14 +41,14 @@ module.exports = function (source) {
                             this.addDependency(xml);
                             namespaces.push({ name: `${moduleName}.xml`, path: xml });
                         })
-                        .catch((err) => {}),
+                        .catch((err) => { }),
 
                     resolvePromise(this.context, `${noExtFilename}.css`)
                         .then((css) => {
                             this.addDependency(css);
                             namespaces.push({ name: `${moduleName}.css`, path: css });
                         })
-                        .catch((err) => {})
+                        .catch((err) => { })
                 ]);
             };
 
@@ -75,7 +75,7 @@ module.exports = function (source) {
                                         namespaces.push({ name: `${moduleName}.css`, path: css });
                                         this.addDependency(css);
                                     })
-                                    .catch(() => {})
+                                    .catch(() => { })
                             ]);
 
                         });
@@ -102,7 +102,7 @@ module.exports = function (source) {
 
         const wrapped = `${moduleRegisters}\nmodule.exports = ${json}`;
 
-        callback(null, wrapped);
+        callback(null, wrapped, map);
     }).catch((err) => {
         callback(err);
     })