@shopify/react-native-skia 0.1.241 → 1.0.2

package/android/CMakeLists.txt

@@ -73,6 +73,8 @@ target_include_directories(
         "${NODE_MODULES_DIR}/react-native/ReactCommon/jsi"
         "${NODE_MODULES_DIR}/react-native/ReactCommon"
         "${NODE_MODULES_DIR}/react-native/ReactCommon/react/nativemodule/core"
+        "${NODE_MODULES_DIR}/react-native/ReactCommon/runtimeexecutor"
+        "${NODE_MODULES_DIR}/react-native/ReactAndroid/src/main/jni"
         "${NODE_MODULES_DIR}/react-native/ReactAndroid/src/main/java/com/facebook/react/turbomodule/core/jni"
 
         cpp/jni/include
@@ -178,6 +180,34 @@ else()
 endif()
 message("-- FBJNI   : " ${FBJNI_LIBRARY})
 
+unset(REACTNATIVEJNI_LIB CACHE)
+if(${REACT_NATIVE_VERSION} GREATER_EQUAL 71)
+    # RN 0.71 distributes prebuilt binaries.
+    set (REACTNATIVEJNI_LIB "ReactAndroid::reactnativejni")
+else()
+    find_library(
+            REACTNATIVEJNI_LIB
+            reactnativejni
+            PATHS ${LIBRN_DIR}
+            NO_CMAKE_FIND_ROOT_PATH
+    )
+endif()
+message("-- REACTNATIVEJNI   : " ${REACTNATIVEJNI_LIB})
+
+unset(RUNTIMEEXECUTOR_LIB CACHE)
+if(${REACT_NATIVE_VERSION} GREATER_EQUAL 71)
+    # RN 0.71 distributes prebuilt binaries.
+    set (RUNTIMEEXECUTOR_LIB "ReactAndroid::runtimeexecutor")
+else()
+    find_library(
+            RUNTIMEEXECUTOR_LIB
+            runtimeexecutor
+            PATHS ${LIBRN_DIR}
+            NO_CMAKE_FIND_ROOT_PATH
+    )
+endif()
+message("-- RUNTIMEEXECUTOR   : " ${RUNTIMEEXECUTOR_LIB})
+
 unset(TURBOMODULES_LIB CACHE)
 if(${REACT_NATIVE_VERSION} GREATER_EQUAL 71)
     # RN 0.71 distributes prebuilt binaries.
@@ -199,6 +229,8 @@ target_link_libraries(
         ${FBJNI_LIBRARY}
         ${REACT_LIB}
         ${JSI_LIB}
+        ${REACTNATIVEJNI_LIB}
+        ${RUNTIMEEXECUTOR_LIB}
         ${TURBOMODULES_LIB}
         ${SKIA_SVG_LIB}
         ${SKIA_SKSHAPER_LIB}

package/android/build.gradle

@@ -167,6 +167,16 @@ android {
                     "src/paper/java",
                 ]
             }
+
+            if (REACT_NATIVE_VERSION >= 74) {
+                srcDirs += [
+                    "src/reactnative74/java"
+                ]
+            } else {
+                srcDirs += [
+                    "src/reactnative69/java"
+                ]
+            }
         }
     }
 
@@ -182,6 +192,8 @@ android {
              "**/libfbjni.so",
              "**/libjsi.so",
              "**/libreact_nativemodule_core.so",
+             "**/libreactnativejni.so",
+             "**/libruntimeexecutor.so",
              "**/libturbomodulejsijni.so",
              "META-INF/**"
         ]

package/android/cpp/jni/JniSkiaManager.cpp

@@ -7,6 +7,36 @@
 
 #include <RNSkManager.h>
 
+namespace {
+
+// For bridgeless mode, currently we don't have a way to get the JSCallInvoker
+// from Java. Workaround to use RuntimeExecutor to simulate the behavior of
+// JSCallInvoker. In the future when bridgeless mode is a standard and no more
+// backward compatible to be considered, we could just use RuntimeExecutor to
+// run task on JS thread.
+class BridgelessJSCallInvoker : public facebook::react::CallInvoker {
+public:
+  explicit BridgelessJSCallInvoker(
+      facebook::react::RuntimeExecutor runtimeExecutor)
+      : runtimeExecutor_(std::move(runtimeExecutor)) {}
+
+  void invokeAsync(std::function<void()> &&func) noexcept override {
+    runtimeExecutor_(
+        [func = std::move(func)](facebook::jsi::Runtime &runtime) { func(); });
+  }
+
+  void invokeSync(std::function<void()> &&func) override {
+    throw std::runtime_error(
+        "Synchronous native -> JS calls are currently not supported.");
+  }
+
+private:
+  facebook::react::RuntimeExecutor runtimeExecutor_;
+
+}; // class BridgelessJSCallInvoker
+
+} // namespace
+
 namespace RNSkia {
 
 namespace jsi = facebook::jsi;
@@ -22,14 +52,17 @@ void JniSkiaManager::registerNatives() {
 
 // JNI init
 jni::local_ref<jni::HybridClass<JniSkiaManager>::jhybriddata>
-JniSkiaManager::initHybrid(jni::alias_ref<jhybridobject> jThis, jlong jsContext,
-                           JSCallInvokerHolder jsCallInvokerHolder,
-                           JavaPlatformContext skiaContext) {
+JniSkiaManager::initHybrid(
+    jni::alias_ref<jhybridobject> jThis, jlong jsContext,
+    jni::alias_ref<facebook::react::JRuntimeExecutor::javaobject>
+        jRuntimeExecutor,
+    JavaPlatformContext skiaContext) {
 
+  auto jsCallInvoker = std::make_shared<BridgelessJSCallInvoker>(
+      jRuntimeExecutor->cthis()->get());
   // cast from JNI hybrid objects to C++ instances
   return makeCxxInstance(jThis, reinterpret_cast<jsi::Runtime *>(jsContext),
-                         jsCallInvokerHolder->cthis()->getCallInvoker(),
-                         skiaContext->cthis());
+                         jsCallInvoker, skiaContext->cthis());
 }
 
 void JniSkiaManager::initializeRuntime() {

package/android/cpp/jni/include/JniPlatformContext.h

@@ -1,6 +1,5 @@
 #pragma once
 
-#include <ReactCommon/CallInvokerHolder.h>
 #include <fbjni/fbjni.h>
 
 #include <exception>
@@ -18,9 +17,6 @@ namespace RNSkia {
 namespace jsi = facebook::jsi;
 namespace jni = facebook::jni;
 
-using JSCallInvokerHolder =
-    jni::alias_ref<facebook::react::CallInvokerHolder::javaobject>;
-
 class JniPlatformContext : public jni::HybridClass<JniPlatformContext> {
 public:
   static auto constexpr kJavaDescriptor =

package/android/cpp/jni/include/JniSkiaManager.h

@@ -5,6 +5,7 @@
 #include <fbjni/fbjni.h>
 #include <jsi/jsi.h>
 #include <memory>
+#include <react/jni/JRuntimeExecutor.h>
 
 #include <JniPlatformContext.h>
 #include <RNSkAndroidPlatformContext.h>
@@ -17,9 +18,6 @@ class RNSkManager;
 
 namespace jsi = facebook::jsi;
 
-using JSCallInvokerHolder =
-    jni::alias_ref<facebook::react::CallInvokerHolder::javaobject>;
-
 using JavaPlatformContext = jni::alias_ref<JniPlatformContext::javaobject>;
 
 class JniSkiaManager : public jni::HybridClass<JniSkiaManager> {
@@ -30,7 +28,8 @@ public:
 
   static jni::local_ref<jni::HybridClass<JniSkiaManager>::jhybriddata>
   initHybrid(jni::alias_ref<jhybridobject> jThis, jlong jsContext,
-             JSCallInvokerHolder jsCallInvokerHolder,
+             jni::alias_ref<facebook::react::JRuntimeExecutor::javaobject>
+                 jRuntimeExecutor,
              JavaPlatformContext platformContext);
 
   static void registerNatives();

package/android/src/main/java/com/shopify/reactnative/skia/SkiaDomView.java

@@ -5,14 +5,15 @@ import android.content.Context;
 import com.facebook.jni.HybridData;
 import com.facebook.jni.annotations.DoNotStrip;
 import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.uimanager.ThemedReactContext;
 
 public class SkiaDomView extends SkiaBaseView {
     @DoNotStrip
     private HybridData mHybridData;
 
-    public SkiaDomView(Context context) {
+    public SkiaDomView(ThemedReactContext context) {
         super(context);
-        RNSkiaModule skiaModule = ((ReactContext) context).getNativeModule(RNSkiaModule.class);
+        RNSkiaModule skiaModule = context.getReactApplicationContext().getNativeModule(RNSkiaModule.class);
         mHybridData = initHybrid(skiaModule.getSkiaManager());
     }
 

package/android/src/main/java/com/shopify/reactnative/skia/SkiaManager.java

@@ -3,7 +3,7 @@ package com.shopify.reactnative.skia;
 import com.facebook.jni.HybridData;
 import com.facebook.proguard.annotations.DoNotStrip;
 import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.turbomodule.core.CallInvokerHolderImpl;
+import com.facebook.react.bridge.RuntimeExecutor;
 
 @DoNotStrip
 public class SkiaManager {
@@ -22,11 +22,11 @@ public class SkiaManager {
         super();
         mContext = context;
 
-        CallInvokerHolderImpl holder = (CallInvokerHolderImpl) context.getCatalystInstance().getJSCallInvokerHolder();
+        RuntimeExecutor runtimeExecutor = ReactNativeCompatible.getRuntimeExecutor(context);
 
         mPlatformContext = new PlatformContext(context);
 
-        mHybridData = initHybrid(context.getJavaScriptContextHolder().get(), holder, mPlatformContext);
+        mHybridData = initHybrid(context.getJavaScriptContextHolder().get(), runtimeExecutor, mPlatformContext);
 
         initializeRuntime();
     }
@@ -48,7 +48,7 @@ public class SkiaManager {
     public void onHostPause() {  mPlatformContext.onPause(); }
 
     // private C++ functions
-    private native HybridData initHybrid(long jsContext, CallInvokerHolderImpl jsCallInvokerHolder,
+    private native HybridData initHybrid(long jsContext, RuntimeExecutor runtimeExecutor,
             PlatformContext platformContext);
 
     private native void initializeRuntime();

package/android/src/reactnative69/java/com/shopify/reactnative/skia/ReactNativeCompatible.java

@@ -0,0 +1,11 @@
+package com.shopify.reactnative.skia;
+
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.RuntimeExecutor;
+
+/* package */ final class ReactNativeCompatible {
+    public static RuntimeExecutor getRuntimeExecutor(ReactContext context) {
+        return context.getCatalystInstance().getRuntimeExecutor();
+    }
+}
+

package/android/src/reactnative74/java/com/shopify/reactnative/skia/ReactNativeCompatible.java

@@ -0,0 +1,14 @@
+package com.shopify.reactnative.skia;
+
+import androidx.annotation.OptIn;
+
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.RuntimeExecutor;
+import com.facebook.react.common.annotations.FrameworkAPI;
+
+/* package */ final class ReactNativeCompatible {
+    @OptIn(markerClass = FrameworkAPI.class)
+    public static RuntimeExecutor getRuntimeExecutor(ReactContext context) {
+        return context.getRuntimeExecutor();
+    }
+}

package/lib/commonjs/renderer/Offscreen.js

@@ -42,8 +42,8 @@ const drawAsImageFromPicture = (picture, size) => {
   canvas.drawPicture(picture);
   surface.flush();
   const image = surface.makeImageSnapshot();
-  // If we are not on the main thread, we need to make the image non-texture.
-  if (!isOnMainThread()) {
+  // If we are not on the main thread or if we are on Web, we need to make the image non-texture.
+  if (!isOnMainThread() || _Platform.Platform.OS === "web") {
     return image.makeNonTextureImage();
   } else {
     return image;

package/lib/commonjs/renderer/Offscreen.js.map

@@ -1 +1 @@
-{"version":3,"names":["_types","require","_skia","_Platform","_Reconciler","isOnMainThread","_WORKLET","Platform","OS","exports","drawAsPicture","element","recorder","Skia","PictureRecorder","canvas","beginRecording","root","SkiaRoot","render","ctx","JsiDrawingContext","dom","picture","finishRecordingAsPicture","drawAsImage","size","drawAsImageFromPicture","pd","surface","Surface","MakeOffscreen","width","height","getCanvas","scale","drawPicture","flush","image","makeImageSnapshot","makeNonTextureImage"],"sources":["Offscreen.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\nimport { JsiDrawingContext } from \"../dom/types\";\nimport type { SkPicture, SkSize } from \"../skia/types\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\n\nimport { SkiaRoot } from \"./Reconciler\";\n\n// We call it main thread because on web main is JS thread\nexport const isOnMainThread = () => {\n  \"worklet\";\n  return (\n    (typeof _WORKLET !== \"undefined\" && _WORKLET === true) ||\n    Platform.OS === \"web\"\n  );\n};\n\nexport const drawAsPicture = (element: ReactElement) => {\n  const recorder = Skia.PictureRecorder();\n  const canvas = recorder.beginRecording();\n  const root = new SkiaRoot(Skia, false);\n  root.render(element);\n  const ctx = new JsiDrawingContext(Skia, canvas);\n  root.dom.render(ctx);\n  const picture = recorder.finishRecordingAsPicture();\n  return picture;\n};\n\nexport const drawAsImage = (element: ReactElement, size: SkSize) => {\n  return drawAsImageFromPicture(drawAsPicture(element), size);\n};\n\n// TODO: We're not sure yet why PixelRatio is not needed here.\nconst pd = 1;\nexport const drawAsImageFromPicture = (picture: SkPicture, size: SkSize) => {\n  \"worklet\";\n  const surface = Skia.Surface.MakeOffscreen(\n    size.width * pd,\n    size.height * pd\n  )!;\n  const canvas = surface.getCanvas();\n  canvas.scale(pd, pd);\n  canvas.drawPicture(picture);\n  surface.flush();\n  const image = surface.makeImageSnapshot();\n  // If we are not on the main thread, we need to make the image non-texture.\n  if (!isOnMainThread()) {\n    return image.makeNonTextureImage();\n  } else {\n    return image;\n  }\n};\n"],"mappings":";;;;;;AAEA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AAEA,IAAAG,WAAA,GAAAH,OAAA;AAEA;AACO,MAAMI,cAAc,GAAGA,CAAA,KAAM;EAClC,SAAS;;EACT,OACG,OAAOC,QAAQ,KAAK,WAAW,IAAIA,QAAQ,KAAK,IAAI,IACrDC,kBAAQ,CAACC,EAAE,KAAK,KAAK;AAEzB,CAAC;AAACC,OAAA,CAAAJ,cAAA,GAAAA,cAAA;AAEK,MAAMK,aAAa,GAAIC,OAAqB,IAAK;EACtD,MAAMC,QAAQ,GAAGC,UAAI,CAACC,eAAe,CAAC,CAAC;EACvC,MAAMC,MAAM,GAAGH,QAAQ,CAACI,cAAc,CAAC,CAAC;EACxC,MAAMC,IAAI,GAAG,IAAIC,oBAAQ,CAACL,UAAI,EAAE,KAAK,CAAC;EACtCI,IAAI,CAACE,MAAM,CAACR,OAAO,CAAC;EACpB,MAAMS,GAAG,GAAG,IAAIC,wBAAiB,CAACR,UAAI,EAAEE,MAAM,CAAC;EAC/CE,IAAI,CAACK,GAAG,CAACH,MAAM,CAACC,GAAG,CAAC;EACpB,MAAMG,OAAO,GAAGX,QAAQ,CAACY,wBAAwB,CAAC,CAAC;EACnD,OAAOD,OAAO;AAChB,CAAC;AAACd,OAAA,CAAAC,aAAA,GAAAA,aAAA;AAEK,MAAMe,WAAW,GAAGA,CAACd,OAAqB,EAAEe,IAAY,KAAK;EAClE,OAAOC,sBAAsB,CAACjB,aAAa,CAACC,OAAO,CAAC,EAAEe,IAAI,CAAC;AAC7D,CAAC;;AAED;AAAAjB,OAAA,CAAAgB,WAAA,GAAAA,WAAA;AACA,MAAMG,EAAE,GAAG,CAAC;AACL,MAAMD,sBAAsB,GAAGA,CAACJ,OAAkB,EAAEG,IAAY,KAAK;EAC1E,SAAS;;EACT,MAAMG,OAAO,GAAGhB,UAAI,CAACiB,OAAO,CAACC,aAAa,CACxCL,IAAI,CAACM,KAAK,GAAGJ,EAAE,EACfF,IAAI,CAACO,MAAM,GAAGL,EAChB,CAAE;EACF,MAAMb,MAAM,GAAGc,OAAO,CAACK,SAAS,CAAC,CAAC;EAClCnB,MAAM,CAACoB,KAAK,CAACP,EAAE,EAAEA,EAAE,CAAC;EACpBb,MAAM,CAACqB,WAAW,CAACb,OAAO,CAAC;EAC3BM,OAAO,CAACQ,KAAK,CAAC,CAAC;EACf,MAAMC,KAAK,GAAGT,OAAO,CAACU,iBAAiB,CAAC,CAAC;EACzC;EACA,IAAI,CAAClC,cAAc,CAAC,CAAC,EAAE;IACrB,OAAOiC,KAAK,CAACE,mBAAmB,CAAC,CAAC;EACpC,CAAC,MAAM;IACL,OAAOF,KAAK;EACd;AACF,CAAC;AAAC7B,OAAA,CAAAkB,sBAAA,GAAAA,sBAAA"}
+{"version":3,"names":["_types","require","_skia","_Platform","_Reconciler","isOnMainThread","_WORKLET","Platform","OS","exports","drawAsPicture","element","recorder","Skia","PictureRecorder","canvas","beginRecording","root","SkiaRoot","render","ctx","JsiDrawingContext","dom","picture","finishRecordingAsPicture","drawAsImage","size","drawAsImageFromPicture","pd","surface","Surface","MakeOffscreen","width","height","getCanvas","scale","drawPicture","flush","image","makeImageSnapshot","makeNonTextureImage"],"sources":["Offscreen.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\nimport { JsiDrawingContext } from \"../dom/types\";\nimport type { SkPicture, SkSize } from \"../skia/types\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\n\nimport { SkiaRoot } from \"./Reconciler\";\n\n// We call it main thread because on web main is JS thread\nexport const isOnMainThread = () => {\n  \"worklet\";\n  return (\n    (typeof _WORKLET !== \"undefined\" && _WORKLET === true) ||\n    Platform.OS === \"web\"\n  );\n};\n\nexport const drawAsPicture = (element: ReactElement) => {\n  const recorder = Skia.PictureRecorder();\n  const canvas = recorder.beginRecording();\n  const root = new SkiaRoot(Skia, false);\n  root.render(element);\n  const ctx = new JsiDrawingContext(Skia, canvas);\n  root.dom.render(ctx);\n  const picture = recorder.finishRecordingAsPicture();\n  return picture;\n};\n\nexport const drawAsImage = (element: ReactElement, size: SkSize) => {\n  return drawAsImageFromPicture(drawAsPicture(element), size);\n};\n\n// TODO: We're not sure yet why PixelRatio is not needed here.\nconst pd = 1;\nexport const drawAsImageFromPicture = (picture: SkPicture, size: SkSize) => {\n  \"worklet\";\n  const surface = Skia.Surface.MakeOffscreen(\n    size.width * pd,\n    size.height * pd\n  )!;\n  const canvas = surface.getCanvas();\n  canvas.scale(pd, pd);\n  canvas.drawPicture(picture);\n  surface.flush();\n  const image = surface.makeImageSnapshot();\n  // If we are not on the main thread or if we are on Web, we need to make the image non-texture.\n  if (!isOnMainThread() || Platform.OS === \"web\") {\n    return image.makeNonTextureImage();\n  } else {\n    return image;\n  }\n};\n"],"mappings":";;;;;;AAEA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AAEA,IAAAG,WAAA,GAAAH,OAAA;AAEA;AACO,MAAMI,cAAc,GAAGA,CAAA,KAAM;EAClC,SAAS;;EACT,OACG,OAAOC,QAAQ,KAAK,WAAW,IAAIA,QAAQ,KAAK,IAAI,IACrDC,kBAAQ,CAACC,EAAE,KAAK,KAAK;AAEzB,CAAC;AAACC,OAAA,CAAAJ,cAAA,GAAAA,cAAA;AAEK,MAAMK,aAAa,GAAIC,OAAqB,IAAK;EACtD,MAAMC,QAAQ,GAAGC,UAAI,CAACC,eAAe,CAAC,CAAC;EACvC,MAAMC,MAAM,GAAGH,QAAQ,CAACI,cAAc,CAAC,CAAC;EACxC,MAAMC,IAAI,GAAG,IAAIC,oBAAQ,CAACL,UAAI,EAAE,KAAK,CAAC;EACtCI,IAAI,CAACE,MAAM,CAACR,OAAO,CAAC;EACpB,MAAMS,GAAG,GAAG,IAAIC,wBAAiB,CAACR,UAAI,EAAEE,MAAM,CAAC;EAC/CE,IAAI,CAACK,GAAG,CAACH,MAAM,CAACC,GAAG,CAAC;EACpB,MAAMG,OAAO,GAAGX,QAAQ,CAACY,wBAAwB,CAAC,CAAC;EACnD,OAAOD,OAAO;AAChB,CAAC;AAACd,OAAA,CAAAC,aAAA,GAAAA,aAAA;AAEK,MAAMe,WAAW,GAAGA,CAACd,OAAqB,EAAEe,IAAY,KAAK;EAClE,OAAOC,sBAAsB,CAACjB,aAAa,CAACC,OAAO,CAAC,EAAEe,IAAI,CAAC;AAC7D,CAAC;;AAED;AAAAjB,OAAA,CAAAgB,WAAA,GAAAA,WAAA;AACA,MAAMG,EAAE,GAAG,CAAC;AACL,MAAMD,sBAAsB,GAAGA,CAACJ,OAAkB,EAAEG,IAAY,KAAK;EAC1E,SAAS;;EACT,MAAMG,OAAO,GAAGhB,UAAI,CAACiB,OAAO,CAACC,aAAa,CACxCL,IAAI,CAACM,KAAK,GAAGJ,EAAE,EACfF,IAAI,CAACO,MAAM,GAAGL,EAChB,CAAE;EACF,MAAMb,MAAM,GAAGc,OAAO,CAACK,SAAS,CAAC,CAAC;EAClCnB,MAAM,CAACoB,KAAK,CAACP,EAAE,EAAEA,EAAE,CAAC;EACpBb,MAAM,CAACqB,WAAW,CAACb,OAAO,CAAC;EAC3BM,OAAO,CAACQ,KAAK,CAAC,CAAC;EACf,MAAMC,KAAK,GAAGT,OAAO,CAACU,iBAAiB,CAAC,CAAC;EACzC;EACA,IAAI,CAAClC,cAAc,CAAC,CAAC,IAAIE,kBAAQ,CAACC,EAAE,KAAK,KAAK,EAAE;IAC9C,OAAO8B,KAAK,CAACE,mBAAmB,CAAC,CAAC;EACpC,CAAC,MAAM;IACL,OAAOF,KAAK;EACd;AACF,CAAC;AAAC7B,OAAA,CAAAkB,sBAAA,GAAAA,sBAAA"}

package/lib/module/renderer/Offscreen.js

@@ -34,8 +34,8 @@ export const drawAsImageFromPicture = (picture, size) => {
   canvas.drawPicture(picture);
   surface.flush();
   const image = surface.makeImageSnapshot();
-  // If we are not on the main thread, we need to make the image non-texture.
-  if (!isOnMainThread()) {
+  // If we are not on the main thread or if we are on Web, we need to make the image non-texture.
+  if (!isOnMainThread() || Platform.OS === "web") {
     return image.makeNonTextureImage();
   } else {
     return image;

package/lib/module/renderer/Offscreen.js.map

@@ -1 +1 @@
-{"version":3,"names":["JsiDrawingContext","Skia","Platform","SkiaRoot","isOnMainThread","_WORKLET","OS","drawAsPicture","element","recorder","PictureRecorder","canvas","beginRecording","root","render","ctx","dom","picture","finishRecordingAsPicture","drawAsImage","size","drawAsImageFromPicture","pd","surface","Surface","MakeOffscreen","width","height","getCanvas","scale","drawPicture","flush","image","makeImageSnapshot","makeNonTextureImage"],"sources":["Offscreen.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\nimport { JsiDrawingContext } from \"../dom/types\";\nimport type { SkPicture, SkSize } from \"../skia/types\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\n\nimport { SkiaRoot } from \"./Reconciler\";\n\n// We call it main thread because on web main is JS thread\nexport const isOnMainThread = () => {\n  \"worklet\";\n  return (\n    (typeof _WORKLET !== \"undefined\" && _WORKLET === true) ||\n    Platform.OS === \"web\"\n  );\n};\n\nexport const drawAsPicture = (element: ReactElement) => {\n  const recorder = Skia.PictureRecorder();\n  const canvas = recorder.beginRecording();\n  const root = new SkiaRoot(Skia, false);\n  root.render(element);\n  const ctx = new JsiDrawingContext(Skia, canvas);\n  root.dom.render(ctx);\n  const picture = recorder.finishRecordingAsPicture();\n  return picture;\n};\n\nexport const drawAsImage = (element: ReactElement, size: SkSize) => {\n  return drawAsImageFromPicture(drawAsPicture(element), size);\n};\n\n// TODO: We're not sure yet why PixelRatio is not needed here.\nconst pd = 1;\nexport const drawAsImageFromPicture = (picture: SkPicture, size: SkSize) => {\n  \"worklet\";\n  const surface = Skia.Surface.MakeOffscreen(\n    size.width * pd,\n    size.height * pd\n  )!;\n  const canvas = surface.getCanvas();\n  canvas.scale(pd, pd);\n  canvas.drawPicture(picture);\n  surface.flush();\n  const image = surface.makeImageSnapshot();\n  // If we are not on the main thread, we need to make the image non-texture.\n  if (!isOnMainThread()) {\n    return image.makeNonTextureImage();\n  } else {\n    return image;\n  }\n};\n"],"mappings":"AAEA,SAASA,iBAAiB,QAAQ,cAAc;AAEhD,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,QAAQ,QAAQ,aAAa;AAEtC,SAASC,QAAQ,QAAQ,cAAc;;AAEvC;AACA,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAClC,SAAS;;EACT,OACG,OAAOC,QAAQ,KAAK,WAAW,IAAIA,QAAQ,KAAK,IAAI,IACrDH,QAAQ,CAACI,EAAE,KAAK,KAAK;AAEzB,CAAC;AAED,OAAO,MAAMC,aAAa,GAAIC,OAAqB,IAAK;EACtD,MAAMC,QAAQ,GAAGR,IAAI,CAACS,eAAe,CAAC,CAAC;EACvC,MAAMC,MAAM,GAAGF,QAAQ,CAACG,cAAc,CAAC,CAAC;EACxC,MAAMC,IAAI,GAAG,IAAIV,QAAQ,CAACF,IAAI,EAAE,KAAK,CAAC;EACtCY,IAAI,CAACC,MAAM,CAACN,OAAO,CAAC;EACpB,MAAMO,GAAG,GAAG,IAAIf,iBAAiB,CAACC,IAAI,EAAEU,MAAM,CAAC;EAC/CE,IAAI,CAACG,GAAG,CAACF,MAAM,CAACC,GAAG,CAAC;EACpB,MAAME,OAAO,GAAGR,QAAQ,CAACS,wBAAwB,CAAC,CAAC;EACnD,OAAOD,OAAO;AAChB,CAAC;AAED,OAAO,MAAME,WAAW,GAAGA,CAACX,OAAqB,EAAEY,IAAY,KAAK;EAClE,OAAOC,sBAAsB,CAACd,aAAa,CAACC,OAAO,CAAC,EAAEY,IAAI,CAAC;AAC7D,CAAC;;AAED;AACA,MAAME,EAAE,GAAG,CAAC;AACZ,OAAO,MAAMD,sBAAsB,GAAGA,CAACJ,OAAkB,EAAEG,IAAY,KAAK;EAC1E,SAAS;;EACT,MAAMG,OAAO,GAAGtB,IAAI,CAACuB,OAAO,CAACC,aAAa,CACxCL,IAAI,CAACM,KAAK,GAAGJ,EAAE,EACfF,IAAI,CAACO,MAAM,GAAGL,EAChB,CAAE;EACF,MAAMX,MAAM,GAAGY,OAAO,CAACK,SAAS,CAAC,CAAC;EAClCjB,MAAM,CAACkB,KAAK,CAACP,EAAE,EAAEA,EAAE,CAAC;EACpBX,MAAM,CAACmB,WAAW,CAACb,OAAO,CAAC;EAC3BM,OAAO,CAACQ,KAAK,CAAC,CAAC;EACf,MAAMC,KAAK,GAAGT,OAAO,CAACU,iBAAiB,CAAC,CAAC;EACzC;EACA,IAAI,CAAC7B,cAAc,CAAC,CAAC,EAAE;IACrB,OAAO4B,KAAK,CAACE,mBAAmB,CAAC,CAAC;EACpC,CAAC,MAAM;IACL,OAAOF,KAAK;EACd;AACF,CAAC"}
+{"version":3,"names":["JsiDrawingContext","Skia","Platform","SkiaRoot","isOnMainThread","_WORKLET","OS","drawAsPicture","element","recorder","PictureRecorder","canvas","beginRecording","root","render","ctx","dom","picture","finishRecordingAsPicture","drawAsImage","size","drawAsImageFromPicture","pd","surface","Surface","MakeOffscreen","width","height","getCanvas","scale","drawPicture","flush","image","makeImageSnapshot","makeNonTextureImage"],"sources":["Offscreen.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\nimport { JsiDrawingContext } from \"../dom/types\";\nimport type { SkPicture, SkSize } from \"../skia/types\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\n\nimport { SkiaRoot } from \"./Reconciler\";\n\n// We call it main thread because on web main is JS thread\nexport const isOnMainThread = () => {\n  \"worklet\";\n  return (\n    (typeof _WORKLET !== \"undefined\" && _WORKLET === true) ||\n    Platform.OS === \"web\"\n  );\n};\n\nexport const drawAsPicture = (element: ReactElement) => {\n  const recorder = Skia.PictureRecorder();\n  const canvas = recorder.beginRecording();\n  const root = new SkiaRoot(Skia, false);\n  root.render(element);\n  const ctx = new JsiDrawingContext(Skia, canvas);\n  root.dom.render(ctx);\n  const picture = recorder.finishRecordingAsPicture();\n  return picture;\n};\n\nexport const drawAsImage = (element: ReactElement, size: SkSize) => {\n  return drawAsImageFromPicture(drawAsPicture(element), size);\n};\n\n// TODO: We're not sure yet why PixelRatio is not needed here.\nconst pd = 1;\nexport const drawAsImageFromPicture = (picture: SkPicture, size: SkSize) => {\n  \"worklet\";\n  const surface = Skia.Surface.MakeOffscreen(\n    size.width * pd,\n    size.height * pd\n  )!;\n  const canvas = surface.getCanvas();\n  canvas.scale(pd, pd);\n  canvas.drawPicture(picture);\n  surface.flush();\n  const image = surface.makeImageSnapshot();\n  // If we are not on the main thread or if we are on Web, we need to make the image non-texture.\n  if (!isOnMainThread() || Platform.OS === \"web\") {\n    return image.makeNonTextureImage();\n  } else {\n    return image;\n  }\n};\n"],"mappings":"AAEA,SAASA,iBAAiB,QAAQ,cAAc;AAEhD,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,QAAQ,QAAQ,aAAa;AAEtC,SAASC,QAAQ,QAAQ,cAAc;;AAEvC;AACA,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAClC,SAAS;;EACT,OACG,OAAOC,QAAQ,KAAK,WAAW,IAAIA,QAAQ,KAAK,IAAI,IACrDH,QAAQ,CAACI,EAAE,KAAK,KAAK;AAEzB,CAAC;AAED,OAAO,MAAMC,aAAa,GAAIC,OAAqB,IAAK;EACtD,MAAMC,QAAQ,GAAGR,IAAI,CAACS,eAAe,CAAC,CAAC;EACvC,MAAMC,MAAM,GAAGF,QAAQ,CAACG,cAAc,CAAC,CAAC;EACxC,MAAMC,IAAI,GAAG,IAAIV,QAAQ,CAACF,IAAI,EAAE,KAAK,CAAC;EACtCY,IAAI,CAACC,MAAM,CAACN,OAAO,CAAC;EACpB,MAAMO,GAAG,GAAG,IAAIf,iBAAiB,CAACC,IAAI,EAAEU,MAAM,CAAC;EAC/CE,IAAI,CAACG,GAAG,CAACF,MAAM,CAACC,GAAG,CAAC;EACpB,MAAME,OAAO,GAAGR,QAAQ,CAACS,wBAAwB,CAAC,CAAC;EACnD,OAAOD,OAAO;AAChB,CAAC;AAED,OAAO,MAAME,WAAW,GAAGA,CAACX,OAAqB,EAAEY,IAAY,KAAK;EAClE,OAAOC,sBAAsB,CAACd,aAAa,CAACC,OAAO,CAAC,EAAEY,IAAI,CAAC;AAC7D,CAAC;;AAED;AACA,MAAME,EAAE,GAAG,CAAC;AACZ,OAAO,MAAMD,sBAAsB,GAAGA,CAACJ,OAAkB,EAAEG,IAAY,KAAK;EAC1E,SAAS;;EACT,MAAMG,OAAO,GAAGtB,IAAI,CAACuB,OAAO,CAACC,aAAa,CACxCL,IAAI,CAACM,KAAK,GAAGJ,EAAE,EACfF,IAAI,CAACO,MAAM,GAAGL,EAChB,CAAE;EACF,MAAMX,MAAM,GAAGY,OAAO,CAACK,SAAS,CAAC,CAAC;EAClCjB,MAAM,CAACkB,KAAK,CAACP,EAAE,EAAEA,EAAE,CAAC;EACpBX,MAAM,CAACmB,WAAW,CAACb,OAAO,CAAC;EAC3BM,OAAO,CAACQ,KAAK,CAAC,CAAC;EACf,MAAMC,KAAK,GAAGT,OAAO,CAACU,iBAAiB,CAAC,CAAC;EACzC;EACA,IAAI,CAAC7B,cAAc,CAAC,CAAC,IAAIF,QAAQ,CAACI,EAAE,KAAK,KAAK,EAAE;IAC9C,OAAO0B,KAAK,CAACE,mBAAmB,CAAC,CAAC;EACpC,CAAC,MAAM;IACL,OAAOF,KAAK;EACd;AACF,CAAC"}

package/package.json

@@ -7,9 +7,12 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.241",
+  "version": "1.0.2",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
+  "react-native": "src/index.ts",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/index.d.ts",
   "files": [
     "src",
     "lib",
@@ -45,7 +48,8 @@
     "lint": "eslint . --ext .ts,.tsx  --max-warnings 0 --cache",
     "test": "jest",
     "e2e": "E2E=true yarn test -i e2e",
-    "build": "bob build && merge-dirs lib/typescript/src lib/commonjs && merge-dirs lib/typescript/src lib/module"
+    "build": "bob build && merge-dirs lib/typescript/src lib/commonjs && merge-dirs lib/typescript/src lib/module",
+    "release": "standard-version"
   },
   "repository": {
     "type": "git",
@@ -102,6 +106,7 @@
     "react-native": "0.72.6",
     "react-native-builder-bob": "0.18.2",
     "react-native-reanimated": "3.6.2",
+    "standard-version": "^9.5.0",
     "ts-jest": "29.1.1",
     "typescript": "5.1.6",
     "ws": "8.11.0"
@@ -139,8 +144,5 @@
   "resolutions": {
     "@typescript-eslint/eslint-plugin": "6.10.0",
     "@typescript-eslint/parser": "6.10.0"
-  },
-  "types": "lib/typescript/index.d.ts",
-  "module": "lib/module/index.js",
-  "react-native": "src/index.ts"
-}
+  }
+}

package/src/renderer/Offscreen.tsx

@@ -44,8 +44,8 @@ export const drawAsImageFromPicture = (picture: SkPicture, size: SkSize) => {
   canvas.drawPicture(picture);
   surface.flush();
   const image = surface.makeImageSnapshot();
-  // If we are not on the main thread, we need to make the image non-texture.
-  if (!isOnMainThread()) {
+  // If we are not on the main thread or if we are on Web, we need to make the image non-texture.
+  if (!isOnMainThread() || Platform.OS === "web") {
     return image.makeNonTextureImage();
   } else {
     return image;