feat(Worklets): Worklet Runtime ios fetch

.yarn/patches/react-native-npm-0.82.0-228ad0ffa7.patch

@@ -749,9 +749,18 @@ index d6552a8a978..ca4e72ac488 100644
 
    void callFunctionOnModule(
 diff --git a/ReactCommon/react/nativemodule/core/ReactCommon/TurboModule.h b/ReactCommon/react/nativemodule/core/ReactCommon/TurboModule.h
-index 9ef16f4cc5c..5c0622ad990 100644
+index 9ef16f4..94afa4e 100644
 --- a/ReactCommon/react/nativemodule/core/ReactCommon/TurboModule.h
 +++ b/ReactCommon/react/nativemodule/core/ReactCommon/TurboModule.h
+@@ -61,7 +61,7 @@ class JSI_EXPORT TurboModule : public jsi::HostObject {
+     // If we have a JS wrapper, cache the result of this lookup
+     // We don't cache misses, to allow for methodMap_ to dynamically be
+     // extended
+-    if (jsRepresentation_ && !prop.isUndefined()) {
++    if (jsRepresentation_ && !prop.isUndefined() && &runtime == representationRuntime_) {
+       jsRepresentation_->lock(runtime).asObject(runtime).setProperty(
+           runtime, propName, prop);
+     }
 @@ -150,6 +150,7 @@ class JSI_EXPORT TurboModule : public jsi::HostObject {
   private:
    friend class TurboModuleBinding;

apps/common-app/package.json

@@ -28,6 +28,7 @@
     "@react-navigation/native-stack": "7.3.27",
     "@react-navigation/stack": "7.4.9",
     "@shopify/flash-list": "2.1.0",
+    "axios": "1.10.0",
     "d3-shape": "3.2.0",
     "fuse.js": "patch:fuse.js@npm%3A7.1.0#~/.yarn/patches/fuse.js-npm-7.1.0-5dcae892a6.patch",
     "react": "19.1.1",

apps/common-app/src/apps/reanimated/examples/EmptyExample.tsx

@@ -1,10 +1,163 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View, Button } from 'react-native';
+import {
+  createWorkletRuntime,
+  scheduleOnRuntime,
+  type WorkletRuntime,
+} from 'react-native-worklets';
+import axios from 'axios';
 
-export default function EmptyExample() {
+const mydloRuntime = createWorkletRuntime({
+  name: 'mydlo',
+});
+
+const widloRuntime = createWorkletRuntime({
+  name: 'widlo',
+});
+
+const powidloRuntime = createWorkletRuntime({
+  name: 'powidlo',
+});
+
+function testXHR(
+  readystateHandler: boolean,
+  progressHandler: boolean,
+  arraybuffer: boolean,
+  chunked: boolean
+) {
+  'worklet';
+  const xhr = new globalThis.XMLHttpRequest();
+
+  const state = {
+    readystateHandler,
+    progressHandler,
+    arraybuffer,
+    chunked,
+    downloading: false,
+    contentLength: 1,
+    responseLength: 0,
+    progressTotal: 1,
+    progressLoaded: 0,
+    cancelled: false,
+  };
+
+  const onreadystatechange = () => {
+    if (xhr.readyState === xhr.HEADERS_RECEIVED) {
+      const contentLength = parseInt(
+        xhr.getResponseHeader('Content-Length')!,
+        10
+      );
+      state.contentLength = contentLength;
+      state.responseLength = 0;
+    } else if (xhr.readyState === xhr.LOADING && xhr.response) {
+      state.responseLength = xhr.response.length;
+    }
+  };
+  const onprogress = (event: ProgressEvent) => {
+    state.progressTotal = event.total;
+    state.progressLoaded = event.loaded;
+  };
+  const onerror = (event: ProgressEvent) => {
+    state.downloading = false;
+    throw new Error(
+      `XHR error: ${event.type} - ${xhr.status} - ${xhr.responseText} - ${event.toString()}`
+    );
+  };
+
+  if (state.readystateHandler) {
+    xhr.onreadystatechange = onreadystatechange;
+  }
+  if (state.progressHandler) {
+    xhr.onprogress = onprogress;
+  }
+  if (state.arraybuffer) {
+    xhr.responseType = 'arraybuffer';
+  }
+  xhr.onerror = onerror;
+  xhr.onload = () => {
+    // this.setState({ downloading: false });
+    state.downloading = false;
+    if (state.cancelled) {
+      state.cancelled = false;
+      return;
+    }
+    if (xhr.status === 200) {
+      let responseType = `Response is a string, ${xhr.response.length} characters long.`;
+      if (xhr.response instanceof ArrayBuffer) {
+        responseType = `Response is an ArrayBuffer, ${xhr.response.byteLength} bytes long.`;
+      }
+      console.log('Download complete!', responseType);
+    } else if (xhr.status !== 0) {
+      console.error(
+        `Server returned HTTP status of ${xhr.status}: ${xhr.responseText}`
+      );
+    } else {
+      console.error(xhr.responseText);
+    }
+  };
+  if (state.chunked) {
+    xhr.open(
+      'GET',
+      'https://filesamples.com/samples/ebook/azw3/Around%20the%20World%20in%2028%20Languages.azw3'
+    );
+  } else {
+    xhr.open('GET', 'https://filesamples.com/samples/document/txt/sample3.txt');
+    // Avoid gzip so we can actually show progress
+    xhr.setRequestHeader('Accept-Encoding', '');
+  }
+  xhr.send();
+
+  state.downloading = true;
+}
+
+function callback(runtime: WorkletRuntime, count: number) {
+  'worklet';
+  axios({
+    method: 'get',
+    url: 'https://tomekzaw.pl',
+  })
+    .then((response) => {
+      console.log(`Received ${count} response on ${runtime.name}`);
+      console.log(response.data);
+    })
+    .catch((error) => {
+      console.error('Axios error:', error);
+    });
+  if (count > 32) {
+    return;
+  }
+
+  const nextRuntime =
+    runtime.name === mydloRuntime.name
+      ? widloRuntime
+      : runtime.name === widloRuntime.name
+        ? powidloRuntime
+        : mydloRuntime;
+
+  setTimeout(() => {
+    scheduleOnRuntime(nextRuntime, callback, nextRuntime, count + 1);
+  }, 100);
+}
+
+export default function App() {
   return (
     <View style={styles.container}>
-      <Text>Hello world!</Text>
+      <Button
+        title="UNLEASH THE FETCH"
+        onPress={() => {
+          scheduleOnRuntime(mydloRuntime, callback, mydloRuntime, 0);
+        }}
+      />
+      <Button
+        title="Test XHR"
+        onPress={() => {
+          scheduleOnRuntime(mydloRuntime, testXHR, false, false, false, false);
+          scheduleOnRuntime(widloRuntime, testXHR, true, false, false, false);
+          scheduleOnRuntime(powidloRuntime, testXHR, true, true, false, false);
+          scheduleOnRuntime(mydloRuntime, testXHR, true, true, true, false);
+          scheduleOnRuntime(widloRuntime, testXHR, true, true, true, true);
+        }}
+      />
     </View>
   );
 }

apps/fabric-example/babel.config.js

@@ -7,6 +7,7 @@ module.exports = {
       {
         // Uncomment the next line to enable bundle mode.
         // bundleMode: true,
+        // workletizableModules: ['react-native/Libraries/Core/setUpXHR', 'axios'],
       },
     ],
     [

packages/react-native-worklets/Common/cpp/worklets/AnimationFrameQueue/AnimationFrameBatchinator.cpp

@@ -1,6 +1,7 @@
 #include <jsi/jsi.h>
 #include <worklets/AnimationFrameQueue/AnimationFrameBatchinator.h>
 #include <worklets/SharedItems/Serializable.h>
+#include <worklets/WorkletRuntime/RuntimeBindings.h>
 
 #include <atomic>
 #include <functional>
@@ -63,9 +64,7 @@ AnimationFrameBatchinator::pullCallbacks() {
 
 AnimationFrameBatchinator::AnimationFrameBatchinator(
     facebook::jsi::Runtime &uiRuntime,
-    std::function<void(std::function<void(const double)>)>
-        &&forwardedRequestAnimationFrame)
-    : uiRuntime_(&uiRuntime),
-      requestAnimationFrame_(std::move(forwardedRequestAnimationFrame)) {}
+    RuntimeBindings::RequestAnimationFrame requestAnimationFrame)
+    : uiRuntime_(&uiRuntime), requestAnimationFrame_(requestAnimationFrame) {}
 
 } // namespace worklets

packages/react-native-worklets/Common/cpp/worklets/AnimationFrameQueue/AnimationFrameBatchinator.h

@@ -2,6 +2,8 @@
 
 #include <jsi/jsi.h>
 #include <worklets/SharedItems/Serializable.h>
+#include <worklets/WorkletRuntime/RuntimeBindings.h>
+
 #include <atomic>
 #include <functional>
 #include <memory>
@@ -21,8 +23,7 @@ class AnimationFrameBatchinator
 
   AnimationFrameBatchinator(
       facebook::jsi::Runtime &uiRuntime,
-      std::function<void(std::function<void(const double)>)>
-          &&forwardedRequestAnimationFrame);
+      RuntimeBindings::RequestAnimationFrame requestAnimationFrame);
 
  private:
   void flush();

packages/react-native-worklets/Common/cpp/worklets/NativeModules/JSIWorkletsModuleProxy.cpp

@@ -135,7 +135,8 @@ JSIWorkletsModuleProxy::JSIWorkletsModuleProxy(
     const std::shared_ptr<JSScheduler> &jsScheduler,
     const std::shared_ptr<UIScheduler> &uiScheduler,
     const std::shared_ptr<RuntimeManager> &runtimeManager,
-    const std::weak_ptr<WorkletRuntime> &uiWorkletRuntime)
+    const std::weak_ptr<WorkletRuntime> &uiWorkletRuntime,
+    RuntimeBindings runtimeBindings)
     : jsi::HostObject(),
       isDevBundle_(isDevBundle),
       script_(script),
@@ -144,7 +145,8 @@ JSIWorkletsModuleProxy::JSIWorkletsModuleProxy(
       jsScheduler_(jsScheduler),
       uiScheduler_(uiScheduler),
       runtimeManager_(runtimeManager),
-      uiWorkletRuntime_(uiWorkletRuntime) {}
+      uiWorkletRuntime_(uiWorkletRuntime),
+      runtimeBindings_(runtimeBindings) {}
 
 JSIWorkletsModuleProxy::JSIWorkletsModuleProxy(
     const JSIWorkletsModuleProxy &other)
@@ -156,7 +158,8 @@ JSIWorkletsModuleProxy::JSIWorkletsModuleProxy(
       jsScheduler_(other.jsScheduler_),
       uiScheduler_(other.uiScheduler_),
       runtimeManager_(other.runtimeManager_),
-      uiWorkletRuntime_(other.uiWorkletRuntime_) {}
+      uiWorkletRuntime_(other.uiWorkletRuntime_),
+      runtimeBindings_(other.runtimeBindings_) {}
 
 JSIWorkletsModuleProxy::~JSIWorkletsModuleProxy() = default;
 

packages/react-native-worklets/Common/cpp/worklets/NativeModules/JSIWorkletsModuleProxy.h

@@ -7,6 +7,7 @@
 
 #include <worklets/SharedItems/Serializable.h>
 #include <worklets/Tools/Defs.h>
+#include <worklets/WorkletRuntime/RuntimeBindings.h>
 #include <worklets/WorkletRuntime/RuntimeManager.h>
 #include <worklets/WorkletRuntime/UIRuntimeDecorator.h>
 
@@ -36,7 +37,8 @@ class JSIWorkletsModuleProxy : public jsi::HostObject {
       const std::shared_ptr<JSScheduler> &jsScheduler,
       const std::shared_ptr<UIScheduler> &uiScheduler,
       const std::shared_ptr<RuntimeManager> &runtimeManager,
-      const std::weak_ptr<WorkletRuntime> &uiWorkletRuntime);
+      const std::weak_ptr<WorkletRuntime> &uiWorkletRuntime,
+      RuntimeBindings runtimeBindings);
 
   JSIWorkletsModuleProxy(const JSIWorkletsModuleProxy &other);
 
@@ -74,6 +76,10 @@ class JSIWorkletsModuleProxy : public jsi::HostObject {
     return runtimeManager_;
   }
 
+  [[nodiscard]] inline RuntimeBindings getRuntimeBindings() const {
+    return runtimeBindings_;
+  }
+
  private:
   const bool isDevBundle_;
   const std::shared_ptr<const BigStringBuffer> script_;
@@ -83,6 +89,7 @@ class JSIWorkletsModuleProxy : public jsi::HostObject {
   const std::shared_ptr<UIScheduler> uiScheduler_;
   const std::shared_ptr<RuntimeManager> runtimeManager_;
   const std::weak_ptr<WorkletRuntime> uiWorkletRuntime_;
+  const RuntimeBindings runtimeBindings_;
 };
 
 } // namespace worklets

packages/react-native-worklets/Common/cpp/worklets/NativeModules/WorkletsModuleProxy.cpp

@@ -5,6 +5,7 @@
 #include <worklets/RunLoop/AsyncQueueImpl.h>
 #include <worklets/SharedItems/Serializable.h>
 #include <worklets/Tools/Defs.h>
+#include <worklets/WorkletRuntime/RuntimeBindings.h>
 #include <worklets/WorkletRuntime/UIRuntimeDecorator.h>
 
 #ifdef __ANDROID__
@@ -26,8 +27,8 @@ WorkletsModuleProxy::WorkletsModuleProxy(
     const std::shared_ptr<CallInvoker> &jsCallInvoker,
     const std::shared_ptr<UIScheduler> &uiScheduler,
     std::function<bool()> &&isJavaScriptThread,
-    std::function<void(std::function<void(const double)>)>
-        &&forwardedRequestAnimationFrame,
+    RuntimeBindings runtimeBindings,
+    const std::shared_ptr<RuntimeManager> &runtimeManager,
     const std::shared_ptr<const BigStringBuffer> &script,
     const std::string &sourceUrl)
     : isDevBundle_(isDevBundleFromRNRuntime(rnRuntime)),
@@ -38,9 +39,10 @@ WorkletsModuleProxy::WorkletsModuleProxy(
           std::move(isJavaScriptThread))),
       uiScheduler_(uiScheduler),
       jsLogger_(std::make_shared<JSLogger>(jsScheduler_)),
+      runtimeBindings_(runtimeBindings),
+      runtimeManager_(runtimeManager),
       script_(script),
       sourceUrl_(sourceUrl),
-      runtimeManager_(std::make_shared<RuntimeManager>()),
       uiWorkletRuntime_(runtimeManager_->createUninitializedUIRuntime(
           jsQueue_,
           std::make_shared<AsyncQueueUI>(uiScheduler_))) {
@@ -52,7 +54,7 @@ WorkletsModuleProxy::WorkletsModuleProxy(
 
   animationFrameBatchinator_ = std::make_shared<AnimationFrameBatchinator>(
       uiWorkletRuntime_->getJSIRuntime(),
-      std::move(forwardedRequestAnimationFrame));
+      runtimeBindings_.requestAnimationFrame);
 
   UIRuntimeDecorator::decorate(
       uiWorkletRuntime_->getJSIRuntime(),
@@ -72,7 +74,8 @@ WorkletsModuleProxy::createJSIWorkletsModuleProxy() const {
       jsScheduler_,
       uiScheduler_,
       runtimeManager_,
-      uiWorkletRuntime_);
+      uiWorkletRuntime_,
+      runtimeBindings_);
 }
 
 WorkletsModuleProxy::~WorkletsModuleProxy() {

packages/react-native-worklets/Common/cpp/worklets/NativeModules/WorkletsModuleProxy.h

@@ -26,8 +26,8 @@ class WorkletsModuleProxy
       const std::shared_ptr<CallInvoker> &jsCallInvoker,
       const std::shared_ptr<UIScheduler> &uiScheduler,
       std::function<bool()> &&isJavaScriptQueue,
-      std::function<void(std::function<void(const double)>)>
-          &&forwardedRequestAnimationFrame,
+      RuntimeBindings runtimeBindings,
+      const std::shared_ptr<RuntimeManager> &runtimeManager,
       const std::shared_ptr<const BigStringBuffer> &script,
       const std::string &sourceUrl);
 
@@ -54,6 +54,11 @@ class WorkletsModuleProxy
     return uiWorkletRuntime_;
   }
 
+  [[nodiscard]] inline std::shared_ptr<RuntimeManager> getRuntimeManager()
+      const {
+    return runtimeManager_;
+  }
+
   [[nodiscard]] std::shared_ptr<JSIWorkletsModuleProxy>
   createJSIWorkletsModuleProxy() const;
 
@@ -67,9 +72,10 @@ class WorkletsModuleProxy
   const std::shared_ptr<JSScheduler> jsScheduler_;
   const std::shared_ptr<UIScheduler> uiScheduler_;
   const std::shared_ptr<JSLogger> jsLogger_;
+  const RuntimeBindings runtimeBindings_;
+  const std::shared_ptr<RuntimeManager> runtimeManager_;
   const std::shared_ptr<const BigStringBuffer> script_;
   const std::string sourceUrl_;
-  const std::shared_ptr<RuntimeManager> runtimeManager_;
   std::shared_ptr<WorkletRuntime> uiWorkletRuntime_;
   std::shared_ptr<AnimationFrameBatchinator> animationFrameBatchinator_;
 #ifndef NDEBUG