react-native-reanimated 3.0.0-rc.2 → 3.0.0-rc.3

package/Common/cpp/AnimatedSensor/AnimatedSensorModule.cpp

@@ -2,6 +2,9 @@
 #include "MutableValue.h"
 #include "ValueWrapper.h"
 
+#include <memory>
+#include <utility>
+
 namespace reanimated {
 
 AnimatedSensorModule::AnimatedSensorModule(

package/Common/cpp/Fabric/FabricUtils.cpp

@@ -1,6 +1,6 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 
-#if RNVERSION < 69
+#if REACT_NATIVE_MINOR_VERSION < 69
 #error \
     "Reanimated 3 does not support React Native 0.68.x when Fabric is enabled. Please upgrade to React Native 0.69.0 or newer if you want to use Reanimated with the new architecture."
 #endif

package/Common/cpp/Fabric/ReanimatedUIManagerBinding.cpp

@@ -4,6 +4,8 @@
 #include "FabricUtils.h"
 #include "NewestShadowNodesRegistry.h"
 
+#include <utility>
+
 using namespace facebook;
 using namespace react;
 

package/Common/cpp/{headers/Fabric → Fabric}/ShadowTreeCloner.h

@@ -31,8 +31,8 @@ class ShadowTreeCloner {
   void updateYogaChildren();
 
  private:
-  PropsParserContext propsParserContext_;
   std::shared_ptr<NewestShadowNodesRegistry> newestShadowNodesRegistry_;
+  PropsParserContext propsParserContext_;
   std::set<ShadowNode *> yogaChildrenUpdates_;
 };
 

package/Common/cpp/LayoutAnimations/LayoutAnimationsProxy.cpp

@@ -4,6 +4,8 @@
 #include "ShareableValue.h"
 #include "ValueWrapper.h"
 
+#include <utility>
+
 namespace reanimated {
 
 const long long idOffset = 1e9;

package/Common/cpp/NativeModules/NativeReanimatedModule.cpp

@@ -8,6 +8,7 @@
 #include <functional>
 #include <memory>
 #include <thread>
+#include <unordered_map>
 
 #ifdef RCT_NEW_ARCH_ENABLED
 #include "FabricUtils.h"

package/Common/cpp/{headers/NativeModules → NativeModules}/NativeReanimatedModule.h

@@ -19,6 +19,7 @@
 #include "RuntimeDecorator.h"
 #include "RuntimeManager.h"
 #include "Scheduler.h"
+#include "SingleInstanceChecker.h"
 
 namespace reanimated {
 
@@ -182,6 +183,10 @@ class NativeReanimatedModule : public NativeReanimatedModuleSpec,
 
   KeyboardEventSubscribeFunction subscribeForKeyboardEventsFunction;
   KeyboardEventUnsubscribeFunction unsubscribeFromKeyboardEventsFunction;
+
+#ifdef DEBUG
+  SingleInstanceChecker<NativeReanimatedModule> singleInstanceChecker_;
+#endif
 };
 
 } // namespace reanimated

package/Common/cpp/NativeModules/NativeReanimatedModuleSpec.cpp

@@ -1,5 +1,7 @@
 #include "NativeReanimatedModuleSpec.h"
 
+#include <utility>
+
 #define SPEC_PREFIX(FN_NAME) __hostFunction_NativeReanimatedModuleSpec_##FN_NAME
 
 namespace reanimated {

package/Common/cpp/{headers/NativeModules → NativeModules}/NativeReanimatedModuleSpec.h

@@ -4,7 +4,7 @@
 #include <string>
 #include <vector>
 
-#ifdef ONANDROID
+#ifdef ANDROID
 #include "TurboModule.h"
 #else
 #include <ReactCommon/TurboModule.h>

package/Common/cpp/ReanimatedRuntime/ReanimatedHermesRuntime.cpp

@@ -0,0 +1,93 @@
+#include "ReanimatedHermesRuntime.h"
+
+// Only include this file in Hermes-enabled builds as some platforms (like tvOS)
+// don't support hermes and it causes the compilation to fail.
+#if JS_RUNTIME_HERMES
+
+#include <cxxreact/MessageQueueThread.h>
+#include <jsi/decorator.h>
+#include <jsi/jsi.h>
+
+#include <memory>
+#include <utility>
+
+#if __has_include(<reacthermes/HermesExecutorFactory.h>)
+#include <reacthermes/HermesExecutorFactory.h>
+#else // __has_include(<hermes/hermes.h>) || ANDROID
+#include <hermes/hermes.h>
+#endif
+
+#include <hermes/inspector/RuntimeAdapter.h>
+#include <hermes/inspector/chrome/Registration.h>
+
+namespace reanimated {
+
+using namespace facebook;
+using namespace react;
+
+#if HERMES_ENABLE_DEBUGGER
+
+class HermesExecutorRuntimeAdapter
+    : public facebook::hermes::inspector::RuntimeAdapter {
+ public:
+  HermesExecutorRuntimeAdapter(
+      facebook::hermes::HermesRuntime &hermesRuntime,
+      std::shared_ptr<MessageQueueThread> thread)
+      : hermesRuntime_(hermesRuntime), thread_(std::move(thread)) {}
+
+  virtual ~HermesExecutorRuntimeAdapter() {
+    // This is required by iOS, because there is an assertion in the destructor
+    // that the thread was indeed `quit` before
+    thread_->quitSynchronous();
+  }
+
+  facebook::jsi::Runtime &getRuntime() override {
+    return hermesRuntime_;
+  }
+
+  facebook::hermes::debugger::Debugger &getDebugger() override {
+    return hermesRuntime_.getDebugger();
+  }
+
+  // This is not empty in the original implementation, but we decided to tickle
+  // the runtime by running a small piece of code on every frame as using this
+  // required us to hold a refernce to the runtime inside this adapter which
+  // caused issues while reloading the app.
+  void tickleJs() override {}
+
+ public:
+  facebook::hermes::HermesRuntime &hermesRuntime_;
+  std::shared_ptr<MessageQueueThread> thread_;
+};
+
+#endif // HERMES_ENABLE_DEBUGGER
+
+ReanimatedHermesRuntime::ReanimatedHermesRuntime(
+    std::unique_ptr<facebook::hermes::HermesRuntime> runtime,
+    std::shared_ptr<MessageQueueThread> jsQueue)
+    : jsi::WithRuntimeDecorator<ReanimatedReentrancyCheck>(
+          *runtime,
+          reentrancyCheck_),
+      runtime_(std::move(runtime)) {
+#if HERMES_ENABLE_DEBUGGER
+  auto adapter =
+      std::make_unique<HermesExecutorRuntimeAdapter>(*runtime_, jsQueue);
+  facebook::hermes::inspector::chrome::enableDebugging(
+      std::move(adapter), "Reanimated Runtime");
+#else
+  // This is required by iOS, because there is an assertion in the destructor
+  // that the thread was indeed `quit` before
+  jsQueue->quitSynchronous();
+#endif
+}
+
+ReanimatedHermesRuntime::~ReanimatedHermesRuntime() {
+#if HERMES_ENABLE_DEBUGGER
+  // We have to disable debugging before the runtime is destroyed.
+  facebook::hermes::inspector::chrome::disableDebugging(*runtime_);
+#endif
+}
+
+} // namespace reanimated
+
+#endif // JS_RUNTIME_HERMES

package/Common/cpp/ReanimatedRuntime/ReanimatedHermesRuntime.h

@@ -0,0 +1,125 @@
+#pragma once
+
+// JS_RUNTIME_HERMES is only set on Android so we have to check __has_include
+// on iOS.
+#if __APPLE__ &&    \
+    (__has_include( \
+        <reacthermes/HermesExecutorFactory.h>) || __has_include(<hermes/hermes.h>))
+#define JS_RUNTIME_HERMES 1
+#endif
+
+// Only include this file in Hermes-enabled builds as some platforms (like tvOS)
+// don't support hermes and it causes the compilation to fail.
+#if JS_RUNTIME_HERMES
+
+#include <cxxreact/MessageQueueThread.h>
+#include <jsi/decorator.h>
+#include <jsi/jsi.h>
+
+#include <memory>
+#include <thread>
+
+#if __has_include(<reacthermes/HermesExecutorFactory.h>)
+#include <reacthermes/HermesExecutorFactory.h>
+#else // __has_include(<hermes/hermes.h>) || ANDROID
+#include <hermes/hermes.h>
+#endif
+
+namespace reanimated {
+
+using namespace facebook;
+using namespace react;
+
+// ReentrancyCheck is copied from React Native
+// from ReactCommon/hermes/executor/HermesExecutorFactory.cpp
+// https://github.com/facebook/react-native/blob/main/ReactCommon/hermes/executor/HermesExecutorFactory.cpp
+struct ReanimatedReentrancyCheck {
+// This is effectively a very subtle and complex assert, so only
+// include it in builds which would include asserts.
+#ifndef NDEBUG
+  ReanimatedReentrancyCheck() : tid(std::thread::id()), depth(0) {}
+
+  void before() {
+    std::thread::id this_id = std::this_thread::get_id();
+    std::thread::id expected = std::thread::id();
+
+    // A note on memory ordering: the main purpose of these checks is
+    // to observe a before/before race, without an intervening after.
+    // This will be detected by the compare_exchange_strong atomicity
+    // properties, regardless of memory order.
+    //
+    // For everything else, it is easiest to think of 'depth' as a
+    // proxy for any access made inside the VM.  If access to depth
+    // are reordered incorrectly, the same could be true of any other
+    // operation made by the VM.  In fact, using acquire/release
+    // memory ordering could create barriers which mask a programmer
+    // error.  So, we use relaxed memory order, to avoid masking
+    // actual ordering errors.  Although, in practice, ordering errors
+    // of this sort would be surprising, because the decorator would
+    // need to call after() without before().
+
+    if (tid.compare_exchange_strong(
+            expected, this_id, std::memory_order_relaxed)) {
+      // Returns true if tid and expected were the same.  If they
+      // were, then the stored tid referred to no thread, and we
+      // atomically saved this thread's tid.  Now increment depth.
+      assert(depth == 0 && "No thread id, but depth != 0");
+      ++depth;
+    } else if (expected == this_id) {
+      // If the stored tid referred to a thread, expected was set to
+      // that value.  If that value is this thread's tid, that's ok,
+      // just increment depth again.
+      assert(depth != 0 && "Thread id was set, but depth == 0");
+      ++depth;
+    } else {
+      // The stored tid was some other thread.  This indicates a bad
+      // programmer error, where VM methods were called on two
+      // different threads unsafely.  Fail fast (and hard) so the
+      // crash can be analyzed.
+      __builtin_trap();
+    }
+  }
+
+  void after() {
+    assert(
+        tid.load(std::memory_order_relaxed) == std::this_thread::get_id() &&
+        "No thread id in after()");
+    if (--depth == 0) {
+      // If we decremented depth to zero, store no-thread into tid.
+      std::thread::id expected = std::this_thread::get_id();
+      bool didWrite = tid.compare_exchange_strong(
+          expected, std::thread::id(), std::memory_order_relaxed);
+      assert(didWrite && "Decremented to zero, but no tid write");
+    }
+  }
+
+  std::atomic<std::thread::id> tid;
+  // This is not atomic, as it is only written or read from the owning
+  // thread.
+  unsigned int depth;
+#endif // NDEBUG
+};
+
+// This is in fact a subclass of jsi::Runtime! WithRuntimeDecorator is a
+// template class that is a subclass of DecoratedRuntime which is also a
+// template class that then inherits its template, which in this case is
+// jsi::Runtime. So the inheritance is: ReanimatedHermesRuntime ->
+// WithRuntimeDecorator -> DecoratedRuntime -> jsi::Runtime You can find out
+// more about this in ReactCommon/jsi/jsi/Decorator.h or by following this link:
+// https://github.com/facebook/react-native/blob/main/ReactCommon/jsi/jsi/decorator.h
+class ReanimatedHermesRuntime
+    : public jsi::WithRuntimeDecorator<ReanimatedReentrancyCheck> {
+ public:
+  ReanimatedHermesRuntime(
+      std::unique_ptr<facebook::hermes::HermesRuntime> runtime,
+      std::shared_ptr<MessageQueueThread> jsQueue);
+  ~ReanimatedHermesRuntime();
+
+ private:
+  std::shared_ptr<facebook::hermes::HermesRuntime> runtime_;
+  ReanimatedReentrancyCheck reentrancyCheck_;
+};
+
+} // namespace reanimated
+
+#endif // JS_RUNTIME_HERMES

package/Common/cpp/ReanimatedRuntime/ReanimatedRuntime.cpp

@@ -0,0 +1,50 @@
+#include "ReanimatedRuntime.h"
+
+#include <cxxreact/MessageQueueThread.h>
+#include <jsi/jsi.h>
+
+#include <memory>
+#include <utility>
+
+#if JS_RUNTIME_HERMES
+#include "ReanimatedHermesRuntime.h"
+#elif JS_RUNTIME_V8
+#include <v8runtime/V8RuntimeFactory.h>
+#else
+#include <jsi/JSCRuntime.h>
+#endif
+
+namespace reanimated {
+
+using namespace facebook;
+using namespace react;
+
+std::shared_ptr<jsi::Runtime> ReanimatedRuntime::make(
+    std::shared_ptr<MessageQueueThread> jsQueue) {
+#if JS_RUNTIME_HERMES
+  std::unique_ptr<facebook::hermes::HermesRuntime> runtime =
+      facebook::hermes::makeHermesRuntime();
+
+  // We don't call `jsQueue->quitSynchronous()` here, since it will be done
+  // later in ReanimatedHermesRuntime
+
+  return std::make_shared<ReanimatedHermesRuntime>(std::move(runtime), jsQueue);
+#elif JS_RUNTIME_V8
+  // This is required by iOS, because there is an assertion in the destructor
+  // that the thread was indeed `quit` before.
+  jsQueue->quitSynchronous();
+
+  auto config = std::make_unique<rnv8::V8RuntimeConfig>();
+  config->enableInspector = false;
+  config->appName = "reanimated";
+  return rnv8::createSharedV8Runtime(runtime_, std::move(config));
+#else
+  // This is required by iOS, because there is an assertion in the destructor
+  // that the thread was indeed `quit` before
+  jsQueue->quitSynchronous();
+
+  return facebook::jsc::makeJSCRuntime();
+#endif
+}
+
+} // namespace reanimated

package/Common/cpp/ReanimatedRuntime/ReanimatedRuntime.h

@@ -0,0 +1,27 @@
+#pragma once
+
+// JS_RUNTIME_HERMES is only set on Android so we have to check __has_include
+// on iOS.
+#if __APPLE__ &&    \
+    (__has_include( \
+        <reacthermes/HermesExecutorFactory.h>) || __has_include(<hermes/hermes.h>))
+#define JS_RUNTIME_HERMES 1
+#endif
+
+#include <cxxreact/MessageQueueThread.h>
+#include <jsi/jsi.h>
+
+#include <memory>
+
+namespace reanimated {
+
+using namespace facebook;
+using namespace react;
+
+class ReanimatedRuntime {
+ public:
+  static std::shared_ptr<jsi::Runtime> make(
+      std::shared_ptr<MessageQueueThread> jsQueue);
+};
+
+} // namespace reanimated

package/Common/cpp/ReanimatedRuntime/RuntimeInitialization.md

@@ -0,0 +1,194 @@
+# Hermes Runtime initialization
+
+_Last updated_: 13/09/2022 by @Kwasow
+
+This document describes the current way of initializing Hermes and connecting
+it to the debugger. The work I did was mainly based on
+[HermesExecutorFactory.cpp](https://github.com/facebook/react-native/blob/main/ReactCommon/hermes/executor/HermesExecutorFactory.cpp)
+from React Native.
+
+## Runtime initalization
+
+If you take a look at `NativeProxy` (both on Android and iOS) you'll find
+that it only makes a call to `ReanimatedRuntime::make(jsQueue)`. This
+static function will return the correct runtime based on the user's configuration.
+
+The initialization process is pretty simple and has only been moved out of
+`NativeProxy` into `ReanimatedRuntime` without any major changes.
+
+## Hermes runtime debugging
+
+To enable debugging on the Hermes runtime we need to do two things:
+
+1. Include source maps in JavaScript files
+
+This part is done purely in JavaScript via the Babel plugin. The `makeWorklet`
+function received an AST tree, which is aware of the modifications it made to
+the code and therefore can generate the necessary source maps. It is important
+that when we want to create a string from the AST we use the `generate` function
+and enable source map generation so line mappings are not lost. Then when
+transforming that code (ex. with `transformSync`) we have to pass the source
+map as input so it can be updated.
+
+Source map settings should always be set to `inline` so they are automatically
+appended to the source code. The generated source map will be a base64 encoded
+json.
+
+A workletized function would look like this (after formattings):
+```js
+function _f(number) {
+  console.log(_WORKLET, number);
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IkFBYXNCLFNBQUNBLEVBQUQsQ0FBQ0EsTUFBRCxFQUFvQjtBQUV0Q0MsU0FBTyxDQUFDQyxHQUFSRCxDQUFZRSxRQUFaRixFQUFzQkQsTUFBdEJDO0FBRmtCIiwibmFtZXMiOlsibnVtYmVyIiwiY29uc29sZSIsImxvZyIsIl9XT1JLTEVUIl0sInNvdXJjZXMiOlsiL1VzZXJzL2thcm9sL0dpdC9yZWFjdC1uYXRpdmUtcmVhbmltYXRlZC9GYWJyaWNFeGFtcGxlL3NyYy9Xb3JrbGV0RXhhbXBsZS50c3giXSwic291cmNlc0NvbnRlbnQiOlsiLyogZ2xvYmFsIF9XT1JLTEVUICovXG5pbXBvcnQgeyBCdXR0b24sIFZpZXcsIFN0eWxlU2hlZXQgfSBmcm9tICdyZWFjdC1uYXRpdmUnO1xuaW1wb3J0IHtcbiAgcnVuT25KUyxcbiAgcnVuT25VSSxcbiAgdXNlRGVyaXZlZFZhbHVlLFxuICB1c2VTaGFyZWRWYWx1ZSxcbn0gZnJvbSAncmVhY3QtbmF0aXZlLXJlYW5pbWF0ZWQnO1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBXb3JrbGV0RXhhbXBsZSgpIHtcbiAgLy8gcnVuT25VSSBkZW1vXG4gIGNvbnN0IHNvbWVXb3JrbGV0ID0gKG51bWJlcjogbnVtYmVyKSA9PiB7XG4gICAgJ3dvcmtsZXQnO1xuICAgIGNvbnNvbGUubG9nKF9XT1JLTEVULCBudW1iZXIpOyAvLyBfV09SS0xFVCBzaG91bGQgYmUgdHJ1ZVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZVByZXNzMSA9ICgpID0+IHtcbiAgICBydW5PblVJKHNvbWVXb3JrbGV0KShNYXRoLnJhbmRvbSgpKTtcbiAgfTtcblxuICAvLyBydW5PbkpTIGRlbW9cbiAgY29uc3QgeCA9IHVzZVNoYXJlZFZhbHVlKDApO1xuXG4gIGNvbnN0IHNvbWVGdW5jdGlvbiA9IChudW1iZXI6IG51bWJlcikgPT4ge1xuICAgIGNvbnNvbGUubG9nKF9XT1JLTEVULCBudW1iZXIpOyAvLyBfV09SS0xFVCBzaG91bGQgYmUgZmFsc2VcbiAgfTtcblxuICB1c2VEZXJpdmVkVmFsdWUoKCkgPT4ge1xuICAgIHJ1bk9uSlMoc29tZUZ1bmN0aW9uKSh4LnZhbHVlKTtcbiAgfSk7XG5cbiAgY29uc3QgaGFuZGxlUHJlc3MyID0gKCkgPT4ge1xuICAgIHgudmFsdWUgPSBNYXRoLnJhbmRvbSgpO1xuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPFZpZXcgc3R5bGU9e3N0eWxlcy5jb250YWluZXJ9PlxuICAgICAgPEJ1dHRvbiBvblByZXNzPXtoYW5kbGVQcmVzczF9IHRpdGxlPVwicnVuT25VSSBkZW1vXCIgLz5cbiAgICAgIDxCdXR0b24gb25QcmVzcz17aGFuZGxlUHJlc3MyfSB0aXRsZT1cInJ1bk9uSlMgZGVtb1wiIC8+XG4gICAgPC9WaWV3PlxuICApO1xufVxuXG5jb25zdCBzdHlsZXMgPSBTdHlsZVNoZWV0LmNyZWF0ZSh7XG4gIGNvbnRhaW5lcjoge1xuICAgIGZsZXg6IDEsXG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAganVzdGlmeUNvbnRlbnQ6ICdjZW50ZXInLFxuICB9LFxufSk7XG4iXX0=
+```
+
+And the base64 string after decoding is:
+
+```json
+{
+  "version": 3,
+  "mappings": "AAasB,SAACA,EAAD,CAACA,MAAD,EAAoB;AAEtCC,SAAO,CAACC,GAARD,CAAYE,QAAZF,EAAsBD,MAAtBC;AAFkB",
+  "names": [
+    "number",
+    "console",
+    "log",
+    "_WORKLET"
+  ],
+  "sources": [
+    "/Users/karol/Git/react-native-reanimated/FabricExample/src/WorkletExample.tsx"
+  ],
+  "sourcesContent": [
+    "/* global _WORKLET */\nimport { Button, View, StyleSheet } from 'react-native';\nimport {\n  runOnJS,\n  runOnUI,\n  useDerivedValue,\n  useSharedValue,\n} from 'react-native-reanimated';\n\nimport React from 'react';\n\nexport default function WorkletExample() {\n  // runOnUI demo\n  const someWorklet = (number: number) => {\n    'worklet';\n    console.log(_WORKLET, number); // _WORKLET should be true\n  };\n\n  const handlePress1 = () => {\n    runOnUI(someWorklet)(Math.random());\n  };\n\n  // runOnJS demo\n  const x = useSharedValue(0);\n\n  const someFunction = (number: number) => {\n    console.log(_WORKLET, number); // _WORKLET should be false\n  };\n\n  useDerivedValue(() => {\n    runOnJS(someFunction)(x.value);\n  });\n\n  const handlePress2 = () => {\n    x.value = Math.random();\n  };\n\n  return (\n    <View style={styles.container}>\n      <Button onPress={handlePress1} title=\"runOnUI demo\" />\n      <Button onPress={handlePress2} title=\"runOnJS demo\" />\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n"
+  ]
+}
+```
+
+We run jest tests in release mode, because source maps will contain absolute
+paths, which will be different on every machine and therefore would also alter
+worklet hashes. Running in release mode prevents this.
+
+2. Enable debugging on the runtime object
+
+This is done by creating an adapter (`HermesExecutorRuntimeAdapter` inside of
+`ReanimatedHermesRuntime.cpp`) which holds the runtime and allows the debugger
+to communicate with it. The adapter is managed by a `Connection` (`ConnectionDemux`)
+object, but this is not important in our case. We just have to make a call
+to `facebook::hermes::inspector::chrome::enableDebugging()` and pass the adapter
+and runtime name as parameters.
+
+It is important to also `disableDebugging()` before the runtime is destroyed.
+Failing to do so will probably crash the app as the debugger will try to
+connect to a non-existent runtime.
+
+The runtime should also be destroyed before the Reanimated module, because
+otherwise there might be weird BAD_ACCESS errors when the gc gets it
+hand on the runtime.
+
+## Metro endpoint
+
+Flipper and Chrome DevTools in general use the `localhost:8081/json` (where `8081`
+is the port metro is running on) endpoint of metro to get the list of debuggable
+targets (runtimes). For a normal React Native app the output would look something
+like this:
+
+```json
+[
+  {
+    "id": "0-1",
+    "description": "org.reactjs.native.example.FabricExample",
+    "title": "Hermes React Native",
+    "faviconUrl": "https://reactjs.org/favicon.ico",
+    "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=%5B%3A%3A1%5D%3A8081%2Finspector%2Fdebug%3Fdevice%3D0%26page%3D1",
+    "type": "node",
+    "webSocketDebuggerUrl": "ws://[::1]:8081/inspector/debug?device=0&page=1",
+    "vm": "Hermes"
+  },
+  {
+    "id": "0--1",
+    "description": "org.reactjs.native.example.FabricExample",
+    "title": "React Native Experimental (Improved Chrome Reloads)",
+    "faviconUrl": "https://reactjs.org/favicon.ico",
+    "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=%5B%3A%3A1%5D%3A8081%2Finspector%2Fdebug%3Fdevice%3D0%26page%3D-1",
+    "type": "node",
+    "webSocketDebuggerUrl": "ws://[::1]:8081/inspector/debug?device=0&page=-1",
+    "vm": "don't use"
+  }
+]
+```
+
+For an Android app with Reanimated it should include the Reanimated runtime like
+this:
+
+```json
+[
+  {
+    "id": "0-2",
+    "description": "com.fabricexample",
+    "title": "Reanimated Runtime",
+    "faviconUrl": "https://reactjs.org/favicon.ico",
+    "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=%5B%3A%3A1%5D%3A8081%2Finspector%2Fdebug%3Fdevice%3D0%26page%3D3",
+    "type": "node",
+    "webSocketDebuggerUrl": "ws://[::1]:8081/inspector/debug?device=1&page=2",
+    "vm": "Hermes"
+  },
+  {
+    "id": "0-1",
+    "description": "com.fabricexample",
+    "title": "Hermes React Native",
+    "faviconUrl": "https://reactjs.org/favicon.ico",
+    "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=%5B%3A%3A1%5D%3A8081%2Finspector%2Fdebug%3Fdevice%3D0%26page%3D2",
+    "type": "node",
+    "webSocketDebuggerUrl": "ws://[::1]:8081/inspector/debug?device=1&page=1",
+    "vm": "Hermes"
+  },
+  {
+    "id": "0--1",
+    "description": "com.fabricexample",
+    "title": "React Native Experimental (Improved Chrome Reloads)",
+    "faviconUrl": "https://reactjs.org/favicon.ico",
+    "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=%5B%3A%3A1%5D%3A8081%2Finspector%2Fdebug%3Fdevice%3D0%26page%3D-1",
+    "type": "node",
+    "webSocketDebuggerUrl": "ws://[::1]:8081/inspector/debug?device=1&page=-1",
+    "vm": "don't use"
+  },
+  {
+    "id": "0--2",
+    "description": "com.fabricexample",
+    "title": "Reanimated Runtime Experimental (Improved Chrome Reloads)",
+    "faviconUrl": "https://reactjs.org/favicon.ico",
+    "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=%5B%3A%3A1%5D%3A8081%2Finspector%2Fdebug%3Fdevice%3D0%26page%3D-2",
+    "type": "node",
+    "webSocketDebuggerUrl": "ws://[::1]:8081/inspector/debug?device=1&page=-2",
+    "vm": "don't use"
+  }
+]
+```
+
+Runtimes with negative IDs are 'virtual' - they are just references to the real
+runtimes but their IDs don't change after a reload. If we were to connect to
+the normal runtime and reload the app it would crash, as the debugger would try
+to communicate with a non-existent runtime. These 'virtual' runtimes are made
+and managed by metro (PR: [facebook/metro#864](https://github.com/facebook/metro/pull/864)).
+
+## Known issues
+
+**IFrame sandboxing**
+
+Source maps always define a `sources` array, which contain names of files used
+to generate the source map. For Chrome DevTools this is sufficient as it will
+read files from disk, but the `IFrame` interface used by Flipper is sandboxed
+and doesn't allow filesystem access. Therefore we also need to include the files
+content in the `sourcesContent` array.
+
+**Chrome version 105.0.5195.102 doesn't load source maps**
+
+This version of Chrome introduced a regression into DevTools that broke source
+maps loading for node.js apps. This issue is not caused by Reanimated in any
+way and should be fixed by Chrome developers in later versions.
+
+The issue was tracked here: https://bugs.chromium.org/p/chromium/issues/detail?id=1358497
+
+**App reloads don't work**
+
+On iOS the app will crash on every reload if a debugger is connected to the runtime.
+On Android it will also crash but only after a few reloads.

package/Common/cpp/Registries/MapperRegistry.cpp

@@ -1,8 +1,10 @@
 #include "MapperRegistry.h"
+#include "Mapper.h"
+
 #include <array>
 #include <map>
 #include <set>
-#include "Mapper.h"
+#include <utility>
 
 namespace reanimated {
 

package/Common/cpp/Registries/WorkletsCache.cpp

@@ -2,6 +2,9 @@
 #include "FrozenObject.h"
 #include "ShareableValue.h"
 
+#include <string>
+#include <utility>
+
 using namespace facebook;
 
 namespace reanimated {
@@ -20,10 +23,14 @@ std::shared_ptr<jsi::Function> WorkletsCache::getFunction(
   long long workletHash =
       ValueWrapper::asNumber(frozenObj->map["__workletHash"]->valueContainer);
   if (worklets.count(workletHash) == 0) {
+    // We need to add a newline before the closing bracket, because in debug
+    // builds the last line will be a source map, which is a comment and that
+    // would make the bracket part of the comment and cause an error due to a
+    // missing closing bracket.
     auto codeBuffer = std::make_shared<const jsi::StringBuffer>(
         "(" +
         ValueWrapper::asString(frozenObj->map["asString"]->valueContainer) +
-        ")");
+        "\n)");
     auto func = rt.evaluateJavaScript(
                       codeBuffer,
                       ValueWrapper::asString(

package/Common/cpp/SharedItems/MutableValue.cpp

@@ -4,6 +4,8 @@
 #include "ShareableValue.h"
 #include "SharedParent.h"
 
+#include <string>
+
 namespace reanimated {
 
 void MutableValue::setValue(jsi::Runtime &rt, const jsi::Value &newValue) {