From f40ee24ebf31424ec7f75b58c0d80e34b13dae29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomasz=20=C5=BBelawski?=
 <40713406+tjzel@users.noreply.github.com>
Date: Fri, 22 Dec 2023 17:56:43 +0100
Subject: [PATCH] Use relative file location in source maps with
 `relativeSourceLocation` enabled (#5464)

## Summary

This option was added back when source maps were not included in
https://github.com/software-mansion/react-native-reanimated/pull/3141.

Source map addition for better LogBox experience was added in
https://github.com/software-mansion/react-native-reanimated/pull/3846 -
but it didn't take into account `relativeSourceLocation`. This PR fixes
this and there is no more absolute location in the source map while
`relativeSourceLocation` is on.

I haven't found a way to generate the source map with relative location
out-of-the-box.

## Test plan

In `WorkletExample` see that LogBox is working as intended. Also plugin
tests maybe.
---
 __tests__/plugin.test.ts  | 19 ++++++++++++++++++-
 plugin/build/plugin.js    |  3 ++-
 plugin/src/makeWorklet.ts |  7 ++++++-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/__tests__/plugin.test.ts b/__tests__/plugin.test.ts
index f8df1a8ce8d..b9a9a43f5e1 100644
--- a/__tests__/plugin.test.ts
+++ b/__tests__/plugin.test.ts
@@ -1,6 +1,6 @@
 import { html } from 'code-tag';
 import plugin from '../plugin';
-import { TransformOptions, transformSync } from '@babel/core';
+import { BabelFileResult, TransformOptions, transformSync } from '@babel/core';
 import traverse from '@babel/traverse';
 import { strict as assert } from 'assert';
 import '../plugin/jestUtils';
@@ -97,6 +97,23 @@ describe('babel plugin', () => {
       );
     });
 
+    it('uses relative source location when `relativeSourceLocation` is set to `true`', () => {
+      process.env.REANIMATED_JEST_SHOULD_MOCK_SOURCE_MAP = '0'; // don't mock source maps
+      const input = html`<script>
+        function foo() {
+          'worklet';
+          var foo = 'bar';
+        }
+      </script>`;
+
+      const { code } = runPlugin(input, undefined, {
+        relativeSourceLocation: true,
+      });
+
+      const matches = code?.match(new RegExp(`..${MOCK_LOCATION}`, 'g'));
+      expect(matches).toHaveLength(2);
+    });
+
     it('removes comments from worklets', () => {
       const input = html`<script>
         const f = () => {
diff --git a/plugin/build/plugin.js b/plugin/build/plugin.js
index 5d735485608..40cf07a0100 100644
--- a/plugin/build/plugin.js
+++ b/plugin/build/plugin.js
@@ -333,7 +333,7 @@ var require_makeWorklet = __commonJS({
       const functionIdentifier = (0, types_1.identifier)(functionName);
       const clone = (0, types_1.cloneNode)(fun.node);
       const funExpression = (0, types_1.isBlockStatement)(clone.body) ? (0, types_1.functionExpression)(null, clone.params, clone.body) : clone;
-      const [funString, sourceMapString] = (0, buildWorkletString_1.buildWorkletString)(transformed.ast, variables, functionName, transformed.map);
+      let [funString, sourceMapString] = (0, buildWorkletString_1.buildWorkletString)(transformed.ast, variables, functionName, transformed.map);
       (0, assert_1.strict)(funString, "[Reanimated] `funString` is undefined.");
       const workletHash = hash(funString);
       let lineOffset = 1;
@@ -352,6 +352,7 @@ var require_makeWorklet = __commonJS({
         let location = state.file.opts.filename;
         if (state.opts.relativeSourceLocation) {
           location = (0, path_1.relative)(state.cwd, location);
+          sourceMapString = sourceMapString === null || sourceMapString === void 0 ? void 0 : sourceMapString.replace(state.file.opts.filename, location);
         }
         initDataObjectExpression.properties.push((0, types_1.objectProperty)((0, types_1.identifier)("location"), (0, types_1.stringLiteral)(location)));
       }
diff --git a/plugin/src/makeWorklet.ts b/plugin/src/makeWorklet.ts
index 49054eae6c0..bebc073f674 100644
--- a/plugin/src/makeWorklet.ts
+++ b/plugin/src/makeWorklet.ts
@@ -107,7 +107,7 @@ export function makeWorklet(
     ? functionExpression(null, clone.params, clone.body)
     : clone;
 
-  const [funString, sourceMapString] = buildWorkletString(
+  let [funString, sourceMapString] = buildWorkletString(
     transformed.ast,
     variables,
     functionName,
@@ -155,6 +155,11 @@ export function makeWorklet(
     let location = state.file.opts.filename;
     if (state.opts.relativeSourceLocation) {
       location = relative(state.cwd, location);
+      // It seems there is no designated option to use relative paths in generated sourceMap
+      sourceMapString = sourceMapString?.replace(
+        state.file.opts.filename,
+        location
+      );
     }
 
     initDataObjectExpression.properties.push(