@shopify/react-native-skia 0.1.176 → 0.1.178

package/android/CMakeLists.txt

@@ -49,6 +49,8 @@ add_library(
 
         "${PROJECT_SOURCE_DIR}/cpp/jsi/JsiHostObject.cpp"
         "${PROJECT_SOURCE_DIR}/cpp/jsi/JsiValue.cpp"
+        "${PROJECT_SOURCE_DIR}/cpp/jsi/RuntimeLifecycleMonitor.cpp"
+        "${PROJECT_SOURCE_DIR}/cpp/jsi/RuntimeAwareCache.cpp"        
 
         "${PROJECT_SOURCE_DIR}/cpp/rnskia/RNSkManager.cpp"
         "${PROJECT_SOURCE_DIR}/cpp/rnskia/RNSkJsView.cpp"

package/cpp/jsi/JsiHostObject.cpp

@@ -55,12 +55,18 @@ jsi::Value JsiHostObject::get(jsi::Runtime &runtime,
                               const jsi::PropNameID &name) {
   auto nameStr = name.utf8(runtime);
 
-  // Do the happy-paths first
+  // Happy path - cached host functions are cheapest to look up
+  const JsiFunctionMap &funcs = getExportedFunctionMap();
+  auto func = funcs.find(nameStr);
 
   // Check function cache
-  auto cachedFunc = _hostFunctionCache.find(nameStr);
-  if (cachedFunc != _hostFunctionCache.end()) {
-    return cachedFunc->second.asFunction(runtime);
+  if (func != funcs.end()) {
+    std::map<std::string, jsi::Function> &runtimeCache =
+        _hostFunctionCache.get(runtime);
+    auto cachedFunc = runtimeCache.find(nameStr);
+    if (cachedFunc != runtimeCache.end()) {
+      return cachedFunc->second.asFunction(runtime);
+    }
   }
 
   // Check the static getters map
@@ -72,9 +78,9 @@ jsi::Value JsiHostObject::get(jsi::Runtime &runtime,
   }
 
   // Check the static function map
-  const JsiFunctionMap &funcs = getExportedFunctionMap();
-  auto func = funcs.find(nameStr);
   if (func != funcs.end()) {
+
+    // Create dispatcher
     auto dispatcher =
         std::bind(func->second, reinterpret_cast<JsiHostObject *>(this),
                   std::placeholders::_1, std::placeholders::_2,
@@ -82,7 +88,7 @@ jsi::Value JsiHostObject::get(jsi::Runtime &runtime,
 
     // Add to cache - it is important to cache the results from the
     // createFromHostFunction function which takes some time.
-    return _hostFunctionCache
+    return _hostFunctionCache.get(runtime)
         .emplace(nameStr, jsi::Function::createFromHostFunction(runtime, name,
                                                                 0, dispatcher))
         .first->second.asFunction(runtime);

package/cpp/jsi/JsiHostObject.h

@@ -9,6 +9,8 @@
 #include <unordered_map>
 #include <vector>
 
+#include "RuntimeAwareCache.h"
+
 #define STR_CAT_NX(A, B) A##B
 #define STR_CAT(A, B) STR_CAT_NX(A, B)
 #define STR_GET get_
@@ -363,6 +365,6 @@ private:
   std::unordered_map<std::string, jsi::HostFunctionType> _funcMap;
   std::unordered_map<std::string, JsPropertyType> _propMap;
 
-  std::map<std::string, jsi::Function> _hostFunctionCache;
+  RuntimeAwareCache<std::map<std::string, jsi::Function>> _hostFunctionCache;
 };
 } // namespace RNJsi

package/cpp/jsi/RuntimeAwareCache.cpp

@@ -0,0 +1,9 @@
+#pragma once
+
+#include "RuntimeAwareCache.h"
+
+namespace RNJsi {
+
+jsi::Runtime *BaseRuntimeAwareCache::_mainRuntime = nullptr;
+
+} // namespace RNJsi

package/cpp/jsi/RuntimeAwareCache.h

@@ -0,0 +1,101 @@
+#pragma once
+
+#include <jsi/jsi.h>
+
+#include <memory>
+#include <unordered_map>
+#include <utility>
+
+#include "RuntimeLifecycleMonitor.h"
+
+namespace RNJsi {
+
+namespace jsi = facebook::jsi;
+
+class BaseRuntimeAwareCache {
+public:
+  static void setMainJsRuntime(jsi::Runtime *rt) { _mainRuntime = rt; }
+
+protected:
+  static jsi::Runtime *getMainJsRuntime() {
+    assert(_mainRuntime != nullptr &&
+           "Expected main Javascript runtime to be set in the "
+           "BaseRuntimeAwareCache class.");
+
+    return _mainRuntime;
+  }
+
+private:
+  static jsi::Runtime *_mainRuntime;
+};
+
+/**
+ * Provides a way to keep data specific to a jsi::Runtime instance that gets
+ * cleaned up when that runtime is destroyed. This is necessary because JSI does
+ * not allow for its associated objects to be retained past the runtime
+ * lifetime. If an object (e.g. jsi::Values or jsi::Function instances) is kept
+ * after the runtime is torn down, its destructor (once it is destroyed
+ * eventually) will result in a crash (JSI objects keep a pointer to memory
+ * managed by the runtime, accessing that portion of the memory after runtime is
+ * deleted is the root cause of that crash).
+ *
+ * In order to provide an efficient implementation that does not add an overhead
+ * for the cases when only a single runtiome is used, which is the primary
+ * usecase, the following assumption has been made: Only for secondary runtimes
+ * we track destruction and clean up the store associated with that runtime. For
+ * the first runtime we assume that the object holding the store is destroyed
+ * prior to the destruction of that runtime.
+ *
+ * The above assumption makes it work without any overhead when only single
+ * runtime is in use. Specifically, we don't perform any additional operations
+ * related to tracking runtime lifecycle when only a single runtime is used.
+ */
+template <typename T>
+class RuntimeAwareCache : public BaseRuntimeAwareCache,
+                          public RuntimeLifecycleListener {
+
+public:
+  void onRuntimeDestroyed(jsi::Runtime *rt) override {
+    if (getMainJsRuntime() != rt) {
+      // We are removing a secondary runtime
+      _secondaryRuntimeCaches.erase(rt);
+    }
+  }
+
+  ~RuntimeAwareCache() {
+    for (auto &cache : _secondaryRuntimeCaches) {
+      RuntimeLifecycleMonitor::removeListener(
+          *static_cast<jsi::Runtime *>(cache.first), this);
+    }
+  }
+
+  T &get(jsi::Runtime &rt) {
+    // We check if we're accessing the main runtime - this is the happy path
+    // to avoid us having to lookup by runtime for caches that only has a single
+    // runtime
+    if (getMainJsRuntime() == &rt) {
+      return _primaryCache;
+    } else {
+      if (_secondaryRuntimeCaches.count(&rt) == 0) {
+        // we only add listener when the secondary runtime is used, this assumes
+        // that the secondary runtime is terminated first. This lets us avoid
+        // additional complexity for the majority of cases when objects are not
+        // shared between runtimes. Otherwise we'd have to register all objecrts
+        // with the RuntimeMonitor as opposed to only registering ones that are
+        // used in secondary runtime. Note that we can't register listener here
+        // with the primary runtime as it may run on a separate thread.
+        RuntimeLifecycleMonitor::addListener(rt, this);
+
+        T cache;
+        _secondaryRuntimeCaches.emplace(&rt, std::move(cache));
+      }
+    }
+    return _secondaryRuntimeCaches.at(&rt);
+  }
+
+private:
+  std::unordered_map<void *, T> _secondaryRuntimeCaches;
+  T _primaryCache;
+};
+
+} // namespace RNJsi

package/cpp/jsi/RuntimeLifecycleMonitor.cpp

@@ -0,0 +1,57 @@
+#include "RuntimeLifecycleMonitor.h"
+
+#include <unordered_map>
+#include <unordered_set>
+#include <utility>
+
+namespace RNJsi {
+
+static std::unordered_map<jsi::Runtime *,
+                          std::unordered_set<RuntimeLifecycleListener *>>
+    listeners;
+
+struct RuntimeLifecycleMonitorObject : public jsi::HostObject {
+  jsi::Runtime *_rt;
+  explicit RuntimeLifecycleMonitorObject(jsi::Runtime *rt) : _rt(rt) {}
+  ~RuntimeLifecycleMonitorObject() {
+    auto listenersSet = listeners.find(_rt);
+    if (listenersSet != listeners.end()) {
+      for (auto listener : listenersSet->second) {
+        listener->onRuntimeDestroyed(_rt);
+      }
+      listeners.erase(listenersSet);
+    }
+  }
+};
+
+void RuntimeLifecycleMonitor::addListener(jsi::Runtime &rt,
+                                          RuntimeLifecycleListener *listener) {
+  auto listenersSet = listeners.find(&rt);
+  if (listenersSet == listeners.end()) {
+    // We install a global host object in the provided runtime, this way we can
+    // use that host object destructor to get notified when the runtime is being
+    // terminated. We use a unique name for the object as it gets saved with the
+    // runtime's global object.
+    rt.global().setProperty(
+        rt, "__rnskia_rt_lifecycle_monitor",
+        jsi::Object::createFromHostObject(
+            rt, std::make_shared<RuntimeLifecycleMonitorObject>(&rt)));
+    std::unordered_set<RuntimeLifecycleListener *> newSet;
+    newSet.insert(listener);
+    listeners.emplace(&rt, std::move(newSet));
+  } else {
+    listenersSet->second.insert(listener);
+  }
+}
+
+void RuntimeLifecycleMonitor::removeListener(
+    jsi::Runtime &rt, RuntimeLifecycleListener *listener) {
+  auto listenersSet = listeners.find(&rt);
+  if (listenersSet == listeners.end()) {
+    // nothing to do here
+  } else {
+    listenersSet->second.erase(listener);
+  }
+}
+
+} // namespace RNJsi

package/cpp/jsi/RuntimeLifecycleMonitor.h

@@ -0,0 +1,32 @@
+#pragma once
+
+#include <jsi/jsi.h>
+
+#include <memory>
+
+namespace RNJsi {
+
+namespace jsi = facebook::jsi;
+
+/**
+ * Listener interface that allows for getting notified when a jsi::Runtime
+ * instance is destroyed.
+ */
+struct RuntimeLifecycleListener {
+  virtual ~RuntimeLifecycleListener() {}
+  virtual void onRuntimeDestroyed(jsi::Runtime *) = 0;
+};
+
+/**
+ * This class provides an API via static methods for registering and
+ * unregistering runtime lifecycle listeners. The listeners can be used to
+ * cleanup any data that references a given jsi::Runtime instance before it gets
+ * destroyed.
+ */
+struct RuntimeLifecycleMonitor {
+  static void addListener(jsi::Runtime &rt, RuntimeLifecycleListener *listener);
+  static void removeListener(jsi::Runtime &rt,
+                             RuntimeLifecycleListener *listener);
+};
+
+} // namespace RNJsi

package/cpp/rnskia/RNSkManager.cpp

@@ -11,6 +11,7 @@
 #include <RNSkView.h>
 
 #include <JsiDomApi.h>
+#include <RuntimeAwareCache.h>
 
 namespace RNSkia {
 namespace jsi = facebook::jsi;
@@ -23,6 +24,9 @@ RNSkManager::RNSkManager(
       _platformContext(platformContext),
       _viewApi(std::make_shared<RNSkJsiViewApi>(platformContext)) {
 
+  // Register main runtime
+  BaseRuntimeAwareCache::setMainJsRuntime(_jsRuntime);
+
   // Install bindings
   installBindings();
 }

package/cpp/rnskia/dom/base/JsiDomNode.h

@@ -73,9 +73,29 @@ public:
   }
 
   /**
-   Empty setProp implementation - compatibility with JS node
+   Updates the selected property value
    */
-  JSI_HOST_FUNCTION(setProp) { return jsi::Value::undefined(); }
+  JSI_HOST_FUNCTION(setProp) {
+    if (_propsContainer == nullptr) {
+      // TODO: we ignore individual properties updates if the initial properties
+      // hasn't been defined. It is likely an error if we reach this branch and
+      // perhaps should throw an exception but platformContext isn't available
+      // here.
+      return jsi::Value::undefined();
+    }
+    auto propName = arguments[0].asString(runtime).utf8(runtime);
+    const jsi::Value &propValue = arguments[1];
+
+    auto mappedProps = _propsContainer->getMappedProperties();
+    auto propMapIt = mappedProps.find(JsiPropId::get(propName));
+    if (propMapIt != mappedProps.end()) {
+      for (auto &prop : propMapIt->second) {
+        prop->updateValue(runtime, propValue);
+      }
+    }
+
+    return jsi::Value::undefined();
+  }
 
   /**
    JS Function to be called when the node is no longer part of the reconciler

package/lib/commonjs/external/reanimated/index.d.ts

@@ -1 +1,2 @@
 export * from "./useSharedValueEffect";
+export * from "./renderHelpers";

package/lib/commonjs/external/reanimated/index.js

@@ -16,4 +16,17 @@ Object.keys(_useSharedValueEffect).forEach(function (key) {
     }
   });
 });
+
+var _renderHelpers = require("./renderHelpers");
+
+Object.keys(_renderHelpers).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _renderHelpers[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _renderHelpers[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

package/lib/commonjs/external/reanimated/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./useSharedValueEffect\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./useSharedValueEffect\";\nexport * from \"./renderHelpers\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/lib/commonjs/external/reanimated/moduleWrapper.d.ts

@@ -0,0 +1,8 @@
+import type { SharedValueType } from "../../renderer/processors/Animations";
+export declare const HAS_REANIMATED: boolean;
+export declare function throwOnIncompatibleReanimatedVersion(): void;
+export declare const useSharedValue: any;
+export declare const startMapper: any;
+export declare const stopMapper: any;
+export declare const runOnJS: any;
+export declare const isSharedValue: <T>(value: unknown) => value is SharedValueType<T>;

package/lib/commonjs/external/reanimated/moduleWrapper.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stopMapper = exports.startMapper = exports.runOnJS = exports.isSharedValue = exports.HAS_REANIMATED = void 0;
+exports.throwOnIncompatibleReanimatedVersion = throwOnIncompatibleReanimatedVersion;
+exports.useSharedValue = void 0;
+
+var _react = require("react");
+
+var _Reanimated, _Reanimated2, _Reanimated3, _Reanimated4;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let Reanimated;
+
+try {
+  Reanimated = require("react-native-reanimated");
+} catch (e) {// Ignore
+}
+
+const HAS_REANIMATED = !!Reanimated;
+exports.HAS_REANIMATED = HAS_REANIMATED;
+
+function throwOnMissingReanimated() {
+  throw new Error("Reanimated was not found, make sure react-native-reanimated package is installed if you want to use \
+    react-naitve-skia's integration layer API.");
+}
+
+let ReanimatedVersionTested = false;
+
+function throwOnIncompatibleReanimatedVersion() {
+  if (ReanimatedVersionTested) {
+    // we avoid testing version more than once as it won't change and we throw
+    // an error when version is incompatible
+    return;
+  }
+
+  ReanimatedVersionTested = true;
+
+  const reanimatedVersion = // eslint-disable-next-line import/extensions
+  require("react-native-reanimated/package.json").version; // The first compatible version is 3.0.0 but we need to exclude 3.0.0 pre-releases
+  // as they have limited support for the used API.
+
+
+  if (!reanimatedVersion || reanimatedVersion < "3.0.0" || reanimatedVersion.includes("3.0.0-")) {
+    throw new Error(`Reanimated version ${reanimatedVersion} is not supported, please upgrade to 3.0.0 or newer.`);
+  }
+}
+
+const useSharedValue = ((_Reanimated = Reanimated) === null || _Reanimated === void 0 ? void 0 : _Reanimated.useSharedValue) || (value => (0, _react.useMemo)(() => ({
+  value
+}), [value]));
+
+exports.useSharedValue = useSharedValue;
+const startMapper = ((_Reanimated2 = Reanimated) === null || _Reanimated2 === void 0 ? void 0 : _Reanimated2.startMapper) || throwOnMissingReanimated;
+exports.startMapper = startMapper;
+const stopMapper = ((_Reanimated3 = Reanimated) === null || _Reanimated3 === void 0 ? void 0 : _Reanimated3.stopMapper) || throwOnMissingReanimated;
+exports.stopMapper = stopMapper;
+const runOnJS = ((_Reanimated4 = Reanimated) === null || _Reanimated4 === void 0 ? void 0 : _Reanimated4.runOnJS) || throwOnMissingReanimated;
+exports.runOnJS = runOnJS;
+
+const isSharedValue = value => {
+  if (!Reanimated) {
+    throwOnMissingReanimated();
+  }
+
+  return !!value && Reanimated.isSharedValue(value);
+};
+
+exports.isSharedValue = isSharedValue;
+//# sourceMappingURL=moduleWrapper.js.map

package/lib/commonjs/external/reanimated/moduleWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Reanimated","require","e","HAS_REANIMATED","throwOnMissingReanimated","Error","ReanimatedVersionTested","throwOnIncompatibleReanimatedVersion","reanimatedVersion","version","includes","useSharedValue","value","useMemo","startMapper","stopMapper","runOnJS","isSharedValue"],"sources":["moduleWrapper.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { SharedValueType } from \"../../renderer/processors/Animations\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nlet Reanimated: any;\n\ntry {\n  Reanimated = require(\"react-native-reanimated\");\n} catch (e) {\n  // Ignore\n}\n\nexport const HAS_REANIMATED = !!Reanimated;\n\nfunction throwOnMissingReanimated() {\n  throw new Error(\n    \"Reanimated was not found, make sure react-native-reanimated package is installed if you want to use \\\n    react-naitve-skia's integration layer API.\"\n  );\n}\n\nlet ReanimatedVersionTested = false;\n\nexport function throwOnIncompatibleReanimatedVersion() {\n  if (ReanimatedVersionTested) {\n    // we avoid testing version more than once as it won't change and we throw\n    // an error when version is incompatible\n    return;\n  }\n  ReanimatedVersionTested = true;\n  const reanimatedVersion =\n    // eslint-disable-next-line import/extensions\n    require(\"react-native-reanimated/package.json\").version;\n  // The first compatible version is 3.0.0 but we need to exclude 3.0.0 pre-releases\n  // as they have limited support for the used API.\n  if (\n    !reanimatedVersion ||\n    reanimatedVersion < \"3.0.0\" ||\n    reanimatedVersion.includes(\"3.0.0-\")\n  ) {\n    throw new Error(\n      `Reanimated version ${reanimatedVersion} is not supported, please upgrade to 3.0.0 or newer.`\n    );\n  }\n}\n\nexport const useSharedValue =\n  Reanimated?.useSharedValue ||\n  ((value: number) => useMemo(() => ({ value }), [value]));\n\nexport const startMapper = Reanimated?.startMapper || throwOnMissingReanimated;\nexport const stopMapper = Reanimated?.stopMapper || throwOnMissingReanimated;\nexport const runOnJS = Reanimated?.runOnJS || throwOnMissingReanimated;\nexport const isSharedValue = <T>(\n  value: unknown\n): value is SharedValueType<T> => {\n  if (!Reanimated) {\n    throwOnMissingReanimated();\n  }\n  return !!value && Reanimated.isSharedValue(value);\n};\n"],"mappings":";;;;;;;;;AAAA;;;;AAIA;AACA,IAAIA,UAAJ;;AAEA,IAAI;EACFA,UAAU,GAAGC,OAAO,CAAC,yBAAD,CAApB;AACD,CAFD,CAEE,OAAOC,CAAP,EAAU,CACV;AACD;;AAEM,MAAMC,cAAc,GAAG,CAAC,CAACH,UAAzB;;;AAEP,SAASI,wBAAT,GAAoC;EAClC,MAAM,IAAIC,KAAJ,CACJ;AACJ,+CAFQ,CAAN;AAID;;AAED,IAAIC,uBAAuB,GAAG,KAA9B;;AAEO,SAASC,oCAAT,GAAgD;EACrD,IAAID,uBAAJ,EAA6B;IAC3B;IACA;IACA;EACD;;EACDA,uBAAuB,GAAG,IAA1B;;EACA,MAAME,iBAAiB,GACrB;EACAP,OAAO,CAAC,sCAAD,CAAP,CAAgDQ,OAFlD,CAPqD,CAUrD;EACA;;;EACA,IACE,CAACD,iBAAD,IACAA,iBAAiB,GAAG,OADpB,IAEAA,iBAAiB,CAACE,QAAlB,CAA2B,QAA3B,CAHF,EAIE;IACA,MAAM,IAAIL,KAAJ,CACH,sBAAqBG,iBAAkB,sDADpC,CAAN;EAGD;AACF;;AAEM,MAAMG,cAAc,GACzB,gBAAAX,UAAU,UAAV,kDAAYW,cAAZ,MACEC,KAAD,IAAmB,IAAAC,cAAA,EAAQ,OAAO;EAAED;AAAF,CAAP,CAAR,EAA2B,CAACA,KAAD,CAA3B,CADpB,CADK;;;AAIA,MAAME,WAAW,GAAG,iBAAAd,UAAU,UAAV,oDAAYc,WAAZ,KAA2BV,wBAA/C;;AACA,MAAMW,UAAU,GAAG,iBAAAf,UAAU,UAAV,oDAAYe,UAAZ,KAA0BX,wBAA7C;;AACA,MAAMY,OAAO,GAAG,iBAAAhB,UAAU,UAAV,oDAAYgB,OAAZ,KAAuBZ,wBAAvC;;;AACA,MAAMa,aAAa,GACxBL,KAD2B,IAEK;EAChC,IAAI,CAACZ,UAAL,EAAiB;IACfI,wBAAwB;EACzB;;EACD,OAAO,CAAC,CAACQ,KAAF,IAAWZ,UAAU,CAACiB,aAAX,CAAyBL,KAAzB,CAAlB;AACD,CAPM"}

package/lib/commonjs/external/reanimated/renderHelpers.d.ts

@@ -0,0 +1,5 @@
+import type { Container } from "../../renderer/Container";
+import type { AnimatedProps } from "../../renderer/processors";
+import type { Node } from "../../dom/types";
+export declare function extractReanimatedProps(props: AnimatedProps<any>): AnimatedProps<any, never>[];
+export declare function bindReanimatedProps(container: Container, node: Node<any>, reanimatedProps: AnimatedProps<any>): void;

package/lib/commonjs/external/reanimated/renderHelpers.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.bindReanimatedProps = bindReanimatedProps;
+exports.extractReanimatedProps = extractReanimatedProps;
+
+var _moduleWrapper = require("./moduleWrapper");
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/* eslint-disable reanimated/js-function-in-worklet */
+const _bindings = new WeakMap();
+
+function extractReanimatedProps(props) {
+  if (!_moduleWrapper.HAS_REANIMATED) {
+    return [props, {}];
+  }
+
+  const reanimatedProps = {};
+  const otherProps = {};
+
+  for (const propName in props) {
+    if (propName === "children") {
+      continue;
+    }
+
+    const propValue = props[propName];
+
+    if ((0, _moduleWrapper.isSharedValue)(propValue)) {
+      reanimatedProps[propName] = propValue;
+      otherProps[propName] = propValue.value;
+    } else {
+      otherProps[propName] = propValue;
+    }
+  }
+
+  return [otherProps, reanimatedProps];
+}
+
+function bindReanimatedProps(container, node, reanimatedProps) {
+  if (!_moduleWrapper.HAS_REANIMATED) {
+    return;
+  }
+
+  if (__DEV__) {
+    (0, _moduleWrapper.throwOnIncompatibleReanimatedVersion)();
+  }
+
+  const sharedValues = Object.values(reanimatedProps);
+
+  const previousMapperId = _bindings.get(node);
+
+  if (previousMapperId !== undefined) {
+    (0, _moduleWrapper.stopMapper)(previousMapperId);
+  }
+
+  if (sharedValues.length > 0) {
+    const viewId = container.getNativeId();
+    const {
+      SkiaViewApi
+    } = global;
+    const mapperId = (0, _moduleWrapper.startMapper)(() => {
+      "worklet";
+
+      for (const propName in reanimatedProps) {
+        node && node.setProp(propName, reanimatedProps[propName].value);
+      } // On React Native we use the SkiaViewApi to redraw because it can
+      // run on the worklet thread (container.redraw can't)
+      // if SkiaViewApi is undefined, we are on web and container.redraw()
+      // can safely be invoked
+
+
+      if (SkiaViewApi) {
+        SkiaViewApi.requestRedraw(viewId);
+      } else {
+        container.redraw();
+      }
+    }, sharedValues);
+
+    _bindings.set(node, mapperId);
+  }
+}
+//# sourceMappingURL=renderHelpers.js.map

package/lib/commonjs/external/reanimated/renderHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_bindings","WeakMap","extractReanimatedProps","props","HAS_REANIMATED","reanimatedProps","otherProps","propName","propValue","isSharedValue","value","bindReanimatedProps","container","node","__DEV__","throwOnIncompatibleReanimatedVersion","sharedValues","Object","values","previousMapperId","get","undefined","stopMapper","length","viewId","getNativeId","SkiaViewApi","global","mapperId","startMapper","setProp","requestRedraw","redraw","set"],"sources":["renderHelpers.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable reanimated/js-function-in-worklet */\nimport type { Container } from \"../../renderer/Container\";\nimport type { AnimatedProps } from \"../../renderer/processors\";\nimport type { Node } from \"../../dom/types\";\n\nimport {\n  startMapper,\n  stopMapper,\n  isSharedValue,\n  throwOnIncompatibleReanimatedVersion,\n  HAS_REANIMATED,\n} from \"./moduleWrapper\";\n\nconst _bindings = new WeakMap<Node<unknown>, unknown>();\n\nexport function extractReanimatedProps(props: AnimatedProps<any>) {\n  if (!HAS_REANIMATED) {\n    return [props, {}];\n  }\n  const reanimatedProps = {} as AnimatedProps<any>;\n  const otherProps = {} as AnimatedProps<any>;\n  for (const propName in props) {\n    if (propName === \"children\") {\n      continue;\n    }\n    const propValue = props[propName];\n    if (isSharedValue(propValue)) {\n      reanimatedProps[propName] = propValue;\n      otherProps[propName] = propValue.value;\n    } else {\n      otherProps[propName] = propValue;\n    }\n  }\n  return [otherProps, reanimatedProps];\n}\n\nexport function bindReanimatedProps(\n  container: Container,\n  node: Node<any>,\n  reanimatedProps: AnimatedProps<any>\n) {\n  if (!HAS_REANIMATED) {\n    return;\n  }\n  if (__DEV__) {\n    throwOnIncompatibleReanimatedVersion();\n  }\n  const sharedValues = Object.values(reanimatedProps);\n  const previousMapperId = _bindings.get(node);\n  if (previousMapperId !== undefined) {\n    stopMapper(previousMapperId);\n  }\n  if (sharedValues.length > 0) {\n    const viewId = container.getNativeId();\n    const { SkiaViewApi } = global;\n    const mapperId = startMapper(() => {\n      \"worklet\";\n      for (const propName in reanimatedProps) {\n        node && node.setProp(propName, reanimatedProps[propName].value);\n      }\n      // On React Native we use the SkiaViewApi to redraw because it can\n      // run on the worklet thread (container.redraw can't)\n      // if SkiaViewApi is undefined, we are on web and container.redraw()\n      // can safely be invoked\n      if (SkiaViewApi) {\n        SkiaViewApi.requestRedraw(viewId);\n      } else {\n        container.redraw();\n      }\n    }, sharedValues);\n    _bindings.set(node, mapperId);\n  }\n}\n"],"mappings":";;;;;;;;AAMA;;AANA;;AACA;AAaA,MAAMA,SAAS,GAAG,IAAIC,OAAJ,EAAlB;;AAEO,SAASC,sBAAT,CAAgCC,KAAhC,EAA2D;EAChE,IAAI,CAACC,6BAAL,EAAqB;IACnB,OAAO,CAACD,KAAD,EAAQ,EAAR,CAAP;EACD;;EACD,MAAME,eAAe,GAAG,EAAxB;EACA,MAAMC,UAAU,GAAG,EAAnB;;EACA,KAAK,MAAMC,QAAX,IAAuBJ,KAAvB,EAA8B;IAC5B,IAAII,QAAQ,KAAK,UAAjB,EAA6B;MAC3B;IACD;;IACD,MAAMC,SAAS,GAAGL,KAAK,CAACI,QAAD,CAAvB;;IACA,IAAI,IAAAE,4BAAA,EAAcD,SAAd,CAAJ,EAA8B;MAC5BH,eAAe,CAACE,QAAD,CAAf,GAA4BC,SAA5B;MACAF,UAAU,CAACC,QAAD,CAAV,GAAuBC,SAAS,CAACE,KAAjC;IACD,CAHD,MAGO;MACLJ,UAAU,CAACC,QAAD,CAAV,GAAuBC,SAAvB;IACD;EACF;;EACD,OAAO,CAACF,UAAD,EAAaD,eAAb,CAAP;AACD;;AAEM,SAASM,mBAAT,CACLC,SADK,EAELC,IAFK,EAGLR,eAHK,EAIL;EACA,IAAI,CAACD,6BAAL,EAAqB;IACnB;EACD;;EACD,IAAIU,OAAJ,EAAa;IACX,IAAAC,mDAAA;EACD;;EACD,MAAMC,YAAY,GAAGC,MAAM,CAACC,MAAP,CAAcb,eAAd,CAArB;;EACA,MAAMc,gBAAgB,GAAGnB,SAAS,CAACoB,GAAV,CAAcP,IAAd,CAAzB;;EACA,IAAIM,gBAAgB,KAAKE,SAAzB,EAAoC;IAClC,IAAAC,yBAAA,EAAWH,gBAAX;EACD;;EACD,IAAIH,YAAY,CAACO,MAAb,GAAsB,CAA1B,EAA6B;IAC3B,MAAMC,MAAM,GAAGZ,SAAS,CAACa,WAAV,EAAf;IACA,MAAM;MAAEC;IAAF,IAAkBC,MAAxB;IACA,MAAMC,QAAQ,GAAG,IAAAC,0BAAA,EAAY,MAAM;MACjC;;MACA,KAAK,MAAMtB,QAAX,IAAuBF,eAAvB,EAAwC;QACtCQ,IAAI,IAAIA,IAAI,CAACiB,OAAL,CAAavB,QAAb,EAAuBF,eAAe,CAACE,QAAD,CAAf,CAA0BG,KAAjD,CAAR;MACD,CAJgC,CAKjC;MACA;MACA;MACA;;;MACA,IAAIgB,WAAJ,EAAiB;QACfA,WAAW,CAACK,aAAZ,CAA0BP,MAA1B;MACD,CAFD,MAEO;QACLZ,SAAS,CAACoB,MAAV;MACD;IACF,CAdgB,EAcdhB,YAdc,CAAjB;;IAeAhB,SAAS,CAACiC,GAAV,CAAcpB,IAAd,EAAoBe,QAApB;EACD;AACF"}

package/lib/commonjs/external/reanimated/useSharedValueEffect.d.ts

@@ -1,11 +1,8 @@
-declare type SharedValueTypeWrapper<T = number> = {
-    value: T;
-};
+import type { SharedValueType } from "../../renderer/processors/Animations";
 /**
  * Connects a shared value from reanimated to a SkiaView or Canvas
  * so whenever the shared value changes the SkiaView will redraw.
  * @param cb Callback that will be called whenever the shared value changes.
  * @param values One or more shared values to listen for.
  */
-export declare const useSharedValueEffect: <T = number>(cb: () => void, value: SharedValueTypeWrapper<T>, ...values: SharedValueTypeWrapper<T>[]) => void;
-export {};
+export declare const useSharedValueEffect: <T = number>(cb: () => void, value: SharedValueType<T>, ...values: SharedValueType<T>[]) => void;

package/lib/commonjs/external/reanimated/useSharedValueEffect.js

@@ -7,51 +7,36 @@ exports.useSharedValueEffect = void 0;
 
 var _react = require("react");
 
-var _Reanimated;
+var _moduleWrapper = require("./moduleWrapper");
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let Reanimated;
-
-try {
-  Reanimated = require("react-native-reanimated");
-} catch (e) {// Ignore
-}
-
-const useSharedValueWrapper = ((_Reanimated = Reanimated) === null || _Reanimated === void 0 ? void 0 : _Reanimated.useSharedValue) === undefined ? value => (0, _react.useMemo)(() => ({
-  value
-}), [value]) : Reanimated.useSharedValue;
 /**
  * Connects a shared value from reanimated to a SkiaView or Canvas
  * so whenever the shared value changes the SkiaView will redraw.
  * @param cb Callback that will be called whenever the shared value changes.
  * @param values One or more shared values to listen for.
  */
-
 const useSharedValueEffect = function (cb, value) {
   for (var _len = arguments.length, values = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
     values[_key - 2] = arguments[_key];
   }
 
-  const input = useSharedValueWrapper(0);
+  console.warn(`useSharedValueEffect() is now deprecated, you can use Reanimated values directly.
+Learn more at https://shopify.github.io/react-native-skia/.`);
+  const input = (0, _moduleWrapper.useSharedValue)(0);
   (0, _react.useEffect)(() => {
-    if (!Reanimated) {
+    if (!_moduleWrapper.HAS_REANIMATED) {
       console.warn("Reanimated was not found and the useSharedValueEffect hook will have no effect.");
     } else {
-      const {
-        runOnJS,
-        startMapper,
-        stopMapper
-      } = Reanimated; // Start a mapper in Reanimated
-
-      const mapperId = startMapper(() => {
+      // Start a mapper in Reanimated
+      const mapperId = (0, _moduleWrapper.startMapper)(() => {
         "worklet";
 
-        runOnJS(cb)();
+        (0, _moduleWrapper.runOnJS)(cb)();
       }, [value, ...values], [input]); // Return unregistering the mapper
 
       return () => {
-        if (stopMapper && mapperId !== undefined) {
-          stopMapper(mapperId);
+        if (_moduleWrapper.stopMapper && mapperId !== undefined) {
+          (0, _moduleWrapper.stopMapper)(mapperId);
         }
       };
     }

package/lib/commonjs/external/reanimated/useSharedValueEffect.js.map

@@ -1 +1 @@
-{"version":3,"names":["Reanimated","require","e","useSharedValueWrapper","useSharedValue","undefined","value","useMemo","useSharedValueEffect","cb","values","input","useEffect","console","warn","runOnJS","startMapper","stopMapper","mapperId"],"sources":["useSharedValueEffect.ts"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nlet Reanimated: any;\n\ntry {\n  Reanimated = require(\"react-native-reanimated\");\n} catch (e) {\n  // Ignore\n}\n\ntype SharedValueTypeWrapper<T = number> = {\n  value: T;\n};\n\nconst useSharedValueWrapper =\n  Reanimated?.useSharedValue === undefined\n    ? (value: number) => useMemo(() => ({ value }), [value])\n    : Reanimated.useSharedValue;\n\n/**\n * Connects a shared value from reanimated to a SkiaView or Canvas\n * so whenever the shared value changes the SkiaView will redraw.\n * @param cb Callback that will be called whenever the shared value changes.\n * @param values One or more shared values to listen for.\n */\nexport const useSharedValueEffect = <T = number>(\n  cb: () => void,\n  value: SharedValueTypeWrapper<T>,\n  ...values: SharedValueTypeWrapper<T>[]\n) => {\n  const input = useSharedValueWrapper(0);\n\n  useEffect(() => {\n    if (!Reanimated) {\n      console.warn(\n        \"Reanimated was not found and the useSharedValueEffect hook will have no effect.\"\n      );\n    } else {\n      const { runOnJS, startMapper, stopMapper } = Reanimated;\n\n      // Start a mapper in Reanimated\n      const mapperId = startMapper(\n        () => {\n          \"worklet\";\n          runOnJS(cb)();\n        },\n        [value, ...values],\n        [input]\n      );\n      // Return unregistering the mapper\n      return () => {\n        if (stopMapper && mapperId !== undefined) {\n          stopMapper(mapperId);\n        }\n      };\n    }\n    return () => {};\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [input, value, ...values]);\n};\n"],"mappings":";;;;;;;AAAA;;;;AAEA;AACA,IAAIA,UAAJ;;AAEA,IAAI;EACFA,UAAU,GAAGC,OAAO,CAAC,yBAAD,CAApB;AACD,CAFD,CAEE,OAAOC,CAAP,EAAU,CACV;AACD;;AAMD,MAAMC,qBAAqB,GACzB,gBAAAH,UAAU,UAAV,kDAAYI,cAAZ,MAA+BC,SAA/B,GACKC,KAAD,IAAmB,IAAAC,cAAA,EAAQ,OAAO;EAAED;AAAF,CAAP,CAAR,EAA2B,CAACA,KAAD,CAA3B,CADvB,GAEIN,UAAU,CAACI,cAHjB;AAKA;AACA;AACA;AACA;AACA;AACA;;AACO,MAAMI,oBAAoB,GAAG,UAClCC,EADkC,EAElCH,KAFkC,EAI/B;EAAA,kCADAI,MACA;IADAA,MACA;EAAA;;EACH,MAAMC,KAAK,GAAGR,qBAAqB,CAAC,CAAD,CAAnC;EAEA,IAAAS,gBAAA,EAAU,MAAM;IACd,IAAI,CAACZ,UAAL,EAAiB;MACfa,OAAO,CAACC,IAAR,CACE,iFADF;IAGD,CAJD,MAIO;MACL,MAAM;QAAEC,OAAF;QAAWC,WAAX;QAAwBC;MAAxB,IAAuCjB,UAA7C,CADK,CAGL;;MACA,MAAMkB,QAAQ,GAAGF,WAAW,CAC1B,MAAM;QACJ;;QACAD,OAAO,CAACN,EAAD,CAAP;MACD,CAJyB,EAK1B,CAACH,KAAD,EAAQ,GAAGI,MAAX,CAL0B,EAM1B,CAACC,KAAD,CAN0B,CAA5B,CAJK,CAYL;;MACA,OAAO,MAAM;QACX,IAAIM,UAAU,IAAIC,QAAQ,KAAKb,SAA/B,EAA0C;UACxCY,UAAU,CAACC,QAAD,CAAV;QACD;MACF,CAJD;IAKD;;IACD,OAAO,MAAM,CAAE,CAAf,CAxBc,CAyBd;EACD,CA1BD,EA0BG,CAACP,KAAD,EAAQL,KAAR,EAAe,GAAGI,MAAlB,CA1BH;AA2BD,CAlCM"}
+{"version":3,"names":["useSharedValueEffect","cb","value","values","console","warn","input","useSharedValue","useEffect","HAS_REANIMATED","mapperId","startMapper","runOnJS","stopMapper","undefined"],"sources":["useSharedValueEffect.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\nimport type { SharedValueType } from \"../../renderer/processors/Animations\";\n\nimport {\n  HAS_REANIMATED,\n  useSharedValue,\n  runOnJS,\n  startMapper,\n  stopMapper,\n} from \"./moduleWrapper\";\n\n/**\n * Connects a shared value from reanimated to a SkiaView or Canvas\n * so whenever the shared value changes the SkiaView will redraw.\n * @param cb Callback that will be called whenever the shared value changes.\n * @param values One or more shared values to listen for.\n */\nexport const useSharedValueEffect = <T = number>(\n  cb: () => void,\n  value: SharedValueType<T>,\n  ...values: SharedValueType<T>[]\n) => {\n  console.warn(\n    `useSharedValueEffect() is now deprecated, you can use Reanimated values directly.\nLearn more at https://shopify.github.io/react-native-skia/.`\n  );\n  const input = useSharedValue(0);\n\n  useEffect(() => {\n    if (!HAS_REANIMATED) {\n      console.warn(\n        \"Reanimated was not found and the useSharedValueEffect hook will have no effect.\"\n      );\n    } else {\n      // Start a mapper in Reanimated\n      const mapperId = startMapper(\n        () => {\n          \"worklet\";\n          runOnJS(cb)();\n        },\n        [value, ...values],\n        [input]\n      );\n      // Return unregistering the mapper\n      return () => {\n        if (stopMapper && mapperId !== undefined) {\n          stopMapper(mapperId);\n        }\n      };\n    }\n    return () => {};\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [input, value, ...values]);\n};\n"],"mappings":";;;;;;;AAAA;;AAIA;;AAQA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,oBAAoB,GAAG,UAClCC,EADkC,EAElCC,KAFkC,EAI/B;EAAA,kCADAC,MACA;IADAA,MACA;EAAA;;EACHC,OAAO,CAACC,IAAR,CACG;AACL,4DAFE;EAIA,MAAMC,KAAK,GAAG,IAAAC,6BAAA,EAAe,CAAf,CAAd;EAEA,IAAAC,gBAAA,EAAU,MAAM;IACd,IAAI,CAACC,6BAAL,EAAqB;MACnBL,OAAO,CAACC,IAAR,CACE,iFADF;IAGD,CAJD,MAIO;MACL;MACA,MAAMK,QAAQ,GAAG,IAAAC,0BAAA,EACf,MAAM;QACJ;;QACA,IAAAC,sBAAA,EAAQX,EAAR;MACD,CAJc,EAKf,CAACC,KAAD,EAAQ,GAAGC,MAAX,CALe,EAMf,CAACG,KAAD,CANe,CAAjB,CAFK,CAUL;;MACA,OAAO,MAAM;QACX,IAAIO,yBAAA,IAAcH,QAAQ,KAAKI,SAA/B,EAA0C;UACxC,IAAAD,yBAAA,EAAWH,QAAX;QACD;MACF,CAJD;IAKD;;IACD,OAAO,MAAM,CAAE,CAAf,CAtBc,CAuBd;EACD,CAxBD,EAwBG,CAACJ,KAAD,EAAQJ,KAAR,EAAe,GAAGC,MAAlB,CAxBH;AAyBD,CApCM"}

package/lib/commonjs/headless/index.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from "react";
+export * from "../renderer/components";
+export declare const draw: (element: ReactNode, width: number, height: number) => any;