feat: improve sourcemaps generation (#280)

- Generate sourcemap for TS declaration files
- Include `sourceRoot` to resolve the source file against
- Don't inline the source code to the sourcemap to reduce size of the map
- Add an option to disable source maps (e.g. if we're not publishing the source)

Closes #279

Author: satya164

README.md

@@ -147,6 +147,8 @@ By default, this will compile the code for last 2 versions of modern browsers, a
 
 If your source code is written in [Flow](http://www.typescriptlang.org/), You can also specify the `copyFlow` option to copy the source files as `.js.flow` to the output folder. If the `main` entry in `package.json` points to the `index` file in the output folder, the flow type checker will pick these files up to use for type definitions.
 
+By default, sourcemaps are generated alongside the compiled files. You can disable them by setting the `sourceMaps` option to `false`.
+
 Example:
 
 ```json

packages/react-native-builder-bob/src/targets/commonjs.ts

@@ -8,6 +8,7 @@ type Options = Input & {
   options?: {
     babelrc?: boolean | null;
     configFile?: string | false | null;
+    sourceMaps?: boolean;
     copyFlow?: boolean;
   };
 };
@@ -26,13 +27,11 @@ export default async function build({
   await del([output]);
 
   await compile({
+    ...options,
     root,
     source,
     output,
     modules: 'commonjs',
-    babelrc: options?.babelrc,
-    configFile: options?.configFile,
-    copyFlow: options?.copyFlow,
     report,
   });
 }

packages/react-native-builder-bob/src/targets/module.ts

@@ -8,6 +8,7 @@ type Options = Input & {
   options?: {
     babelrc?: boolean | null;
     configFile?: string | false | null;
+    sourceMaps?: boolean;
     copyFlow?: boolean;
   };
 };
@@ -26,13 +27,11 @@ export default async function build({
   await del([output]);
 
   await compile({
+    ...options,
     root,
     source,
     output,
     modules: false,
-    babelrc: options?.babelrc,
-    configFile: options?.configFile,
-    copyFlow: options?.copyFlow,
     report,
   });
 }

packages/react-native-builder-bob/src/targets/typescript.ts

@@ -132,6 +132,7 @@ export default async function build({
       [
         '--pretty',
         '--declaration',
+        '--declarationMap',
         '--emitDeclarationOnly',
         '--project',
         project,

packages/react-native-builder-bob/src/utils/compile.ts

@@ -7,10 +7,11 @@ import glob from 'glob';
 import type { Input } from '../types';
 
 type Options = Input & {
-  babelrc?: boolean | null | undefined;
-  configFile?: string | false | null | undefined;
+  babelrc?: boolean | null;
+  configFile?: string | false | null;
+  sourceMaps?: boolean;
+  copyFlow?: boolean;
   modules: 'commonjs' | false;
-  copyFlow: boolean | undefined;
 };
 
 export default async function compile({
@@ -21,6 +22,7 @@ export default async function compile({
   configFile = false,
   modules,
   copyFlow,
+  sourceMaps = true,
   report,
 }: Options) {
   const files = glob.sync('**/*', {
@@ -54,7 +56,8 @@ export default async function compile({
       const result = await babel.transformAsync(content, {
         babelrc: babelrc,
         configFile: configFile,
-        sourceMaps: true,
+        sourceMaps,
+        sourceRoot: path.relative(output, source),
         filename: filepath,
         ...(babelrc || configFile
           ? null
@@ -99,10 +102,14 @@ export default async function compile({
 
       let code = result.code;
 
-      if (result.map) {
+      if (sourceMaps && result.map) {
         const mapFilename = outputFilename + '.map';
+
         code += '\n//# sourceMappingURL=' + path.basename(mapFilename);
 
+        // Don't inline the source code, it can be retrieved from the source file
+        result.map.sourcesContent = undefined;
+
         fs.writeFileSync(mapFilename, JSON.stringify(result.map));
       }