feat(cli): Option to inline JS source maps during sync

cli/src/index.ts

@@ -83,12 +83,17 @@ export function runProgram(config: Config): void {
       '--deployment',
       "Optional: if provided, Podfile.lock won't be deleted and pod install will use --deployment option",
     )
+    .option(
+      '--inline',
+      'Optional: if true, all source maps will be inlined for easier debugging on mobile devices',
+      false,
+    )
     .action(
       wrapAction(
-        telemetryAction(config, async (platform, { deployment }) => {
+        telemetryAction(config, async (platform, { deployment, inline }) => {
           checkExternalConfig(config.app);
           const { syncCommand } = await import('./tasks/sync');
-          await syncCommand(config, platform, deployment);
+          await syncCommand(config, platform, deployment, inline);
         }),
       ),
     );

cli/src/tasks/add.ts

@@ -104,7 +104,7 @@ export async function addCommand(
       await editPlatforms(config, platformName);
 
       if (await pathExists(config.app.webDirAbs)) {
-        await sync(config, platformName, false);
+        await sync(config, platformName, false, false);
         if (platformName === config.android.name) {
           await runTask('Syncing Gradle', async () => {
             return createLocalProperties(config.android.platformDirAbs);

cli/src/tasks/run.ts

@@ -80,7 +80,7 @@ export async function runCommand(
 
     try {
       if (options.sync) {
-        await sync(config, platformName, false);
+        await sync(config, platformName, false, true);
       }
 
       await run(config, platformName, options);

cli/src/tasks/sourcemaps.ts

@@ -0,0 +1,64 @@
+import {
+  readdirSync,
+  existsSync,
+  readFileSync,
+  writeFileSync,
+  unlinkSync,
+} from '@ionic/utils-fs';
+import { join, extname } from 'path';
+
+import type { Config } from '../definitions';
+import { logger } from '../log';
+
+function findJSAssetsDir(buildDir: string): string {
+  const reactJSDir = '/static/js';
+  const vueJSDir = '/js';
+
+  if (existsSync(buildDir + reactJSDir)) {
+    return reactJSDir;
+  }
+
+  if (existsSync(buildDir + vueJSDir)) {
+    return vueJSDir;
+  }
+
+  return '/';
+}
+
+export async function inlineSourceMaps(
+  config: Config,
+  platformName: string,
+): Promise<void> {
+  let buildDir = '';
+
+  if (platformName == config.ios.name) {
+    buildDir = await config.ios.webDirAbs;
+  }
+
+  if (platformName == config.android.name) {
+    buildDir = await config.android.webDirAbs;
+  }
+
+  if (buildDir) {
+    logger.info('Inlining sourcemaps');
+    const jsAssetsDir = findJSAssetsDir(buildDir);
+    buildDir += jsAssetsDir;
+
+    const files = readdirSync(buildDir);
+    files.forEach(file => {
+      const mapFile = join(buildDir, `${file}.map`);
+      if (extname(file) === '.js' && existsSync(mapFile)) {
+        const targetFile = join(buildDir, file);
+        const bufMap = readFileSync(mapFile).toString('base64');
+        const bufFile = readFileSync(targetFile, 'utf8');
+        const result = bufFile.replace(
+          `sourceMappingURL=${file}.map`,
+          'sourceMappingURL=data:application/json;charset=utf-8;base64,' +
+            bufMap,
+        );
+        writeFileSync(targetFile, result);
+        unlinkSync(mapFile);
+      }
+    });
+  }
+}

cli/src/tasks/sync.ts

@@ -12,6 +12,7 @@ import { logger } from '../log';
 import { allSerial } from '../util/promise';
 
 import { copy, copyCommand } from './copy';
+import { inlineSourceMaps } from './sourcemaps';
 import { update, updateChecks, updateCommand } from './update';
 
 /**
@@ -21,6 +22,7 @@ export async function syncCommand(
   config: Config,
   selectedPlatformName: string,
   deployment: boolean,
+  inline: boolean,
 ): Promise<void> {
   if (selectedPlatformName && !(await isValidPlatform(selectedPlatformName))) {
     try {
@@ -40,7 +42,7 @@ export async function syncCommand(
       ]);
       await allSerial(
         platforms.map(
-          platformName => () => sync(config, platformName, deployment),
+          platformName => () => sync(config, platformName, deployment, inline),
         ),
       );
       const now = +new Date();
@@ -60,6 +62,7 @@ export async function sync(
   config: Config,
   platformName: string,
   deployment: boolean,
+  inline: boolean,
 ): Promise<void> {
   await runPlatformHook(
     config,
@@ -70,6 +73,9 @@ export async function sync(
 
   try {
     await copy(config, platformName);
+    if (inline) {
+      await inlineSourceMaps(config, platformName);
+    }
   } catch (e) {
     logger.error(e.stack ?? e);
   }