@shopify/react-native-skia 2.5.2 → 2.5.3

package/android/CMakeLists.txt

@@ -128,6 +128,7 @@ if(SK_GRAPHITE)
         "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUAdapter.cpp"
         "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUBindGroup.cpp"
         "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUBuffer.cpp"
+        "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUCanvasContext.cpp"
         "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUCommandEncoder.cpp"
         "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUComputePassEncoder.cpp"
         "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUComputePipeline.cpp"
@@ -141,6 +142,9 @@ if(SK_GRAPHITE)
         "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUShaderModule.cpp"
         "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUSupportedLimits.cpp"
         "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUTexture.cpp"
+
+        # WebGPU Canvas JNI bindings
+        "${PROJECT_SOURCE_DIR}/cpp/jni/JniWebGPUView.cpp"
     )
 endif()
 

package/android/cpp/jni/JniWebGPUView.cpp

@@ -0,0 +1,67 @@
+#include <jni.h>
+#include <android/native_window_jni.h>
+
+#ifdef SK_GRAPHITE
+#include "webgpu/webgpu_cpp.h"
+#include "rnwgpu/SurfaceRegistry.h"
+#include "rnskia/RNDawnContext.h"
+#endif
+
+extern "C" JNIEXPORT void JNICALL
+Java_com_shopify_reactnative_skia_WebGPUView_onSurfaceCreate(
+    JNIEnv *env, jobject thiz, jobject jSurface, jint contextId, jfloat width,
+    jfloat height) {
+#ifdef SK_GRAPHITE
+  auto window = ANativeWindow_fromSurface(env, jSurface);
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  auto &dawnContext = RNSkia::DawnContext::getInstance();
+  auto gpu = dawnContext.getWGPUInstance();
+
+  // Create surface from ANativeWindow
+  wgpu::SurfaceDescriptorFromAndroidNativeWindow androidSurfaceDesc;
+  androidSurfaceDesc.window = window;
+  wgpu::SurfaceDescriptor surfaceDescriptor;
+  surfaceDescriptor.nextInChain = &androidSurfaceDesc;
+  auto surface = gpu.CreateSurface(&surfaceDescriptor);
+
+  registry
+      .getSurfaceInfoOrCreate(contextId, gpu, static_cast<int>(width),
+                              static_cast<int>(height))
+      ->switchToOnscreen(window, surface);
+#endif
+}
+
+extern "C" JNIEXPORT void JNICALL
+Java_com_shopify_reactnative_skia_WebGPUView_onSurfaceChanged(
+    JNIEnv *env, jobject thiz, jobject surface, jint contextId, jfloat width,
+    jfloat height) {
+#ifdef SK_GRAPHITE
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  auto surfaceInfo = registry.getSurfaceInfo(contextId);
+  if (surfaceInfo) {
+    surfaceInfo->resize(static_cast<int>(width), static_cast<int>(height));
+  }
+#endif
+}
+
+extern "C" JNIEXPORT void JNICALL
+Java_com_shopify_reactnative_skia_WebGPUView_switchToOffscreenSurface(
+    JNIEnv *env, jobject thiz, jint contextId) {
+#ifdef SK_GRAPHITE
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  auto surfaceInfo = registry.getSurfaceInfo(contextId);
+  if (surfaceInfo) {
+    surfaceInfo->switchToOffscreen();
+  }
+#endif
+}
+
+extern "C" JNIEXPORT void JNICALL
+Java_com_shopify_reactnative_skia_WebGPUView_onSurfaceDestroy(JNIEnv *env,
+                                                              jobject thiz,
+                                                              jint contextId) {
+#ifdef SK_GRAPHITE
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  registry.removeSurfaceInfo(contextId);
+#endif
+}

package/android/cpp/rnskia-android/SkiaPlatformContext.h

@@ -0,0 +1,26 @@
+#pragma once
+
+#ifdef SK_GRAPHITE
+
+#include "rnwgpu/PlatformContext.h"
+
+namespace rnwgpu {
+
+class SkiaPlatformContext : public PlatformContext {
+public:
+  SkiaPlatformContext() = default;
+  ~SkiaPlatformContext() = default;
+
+  wgpu::Surface makeSurface(wgpu::Instance instance, void *surface, int width,
+                            int height) override {
+    wgpu::SurfaceDescriptorFromAndroidNativeWindow androidSurfaceDesc;
+    androidSurfaceDesc.window = surface;
+    wgpu::SurfaceDescriptor surfaceDescriptor;
+    surfaceDescriptor.nextInChain = &androidSurfaceDesc;
+    return instance.CreateSurface(&surfaceDescriptor);
+  }
+};
+
+} // namespace rnwgpu
+
+#endif // SK_GRAPHITE

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

@@ -42,7 +42,10 @@ public class RNSkiaPackage extends TurboReactPackage {
 
     @Override
     public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-        return Arrays.<ViewManager>asList(new SkiaPictureViewManager());
+        return Arrays.<ViewManager>asList(
+            new SkiaPictureViewManager(),
+            new WebGPUViewManager()
+        );
     }
 
     @Override

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

@@ -0,0 +1,41 @@
+package com.shopify.reactnative.skia;
+
+import android.annotation.SuppressLint;
+import android.content.Context;
+import android.view.SurfaceHolder;
+import android.view.SurfaceView;
+
+import androidx.annotation.NonNull;
+
+@SuppressLint("ViewConstructor")
+public class WebGPUSurfaceView extends SurfaceView implements SurfaceHolder.Callback {
+
+  WebGPUViewAPI mApi;
+
+  public WebGPUSurfaceView(Context context, WebGPUViewAPI api) {
+    super(context);
+    mApi = api;
+    getHolder().addCallback(this);
+  }
+
+  @Override
+  protected void onDetachedFromWindow() {
+    super.onDetachedFromWindow();
+    mApi.surfaceDestroyed();
+  }
+
+  @Override
+  public void surfaceCreated(@NonNull SurfaceHolder holder) {
+    mApi.surfaceCreated(holder.getSurface());
+  }
+
+  @Override
+  public void surfaceChanged(@NonNull SurfaceHolder holder, int format, int width, int height) {
+    mApi.surfaceChanged(holder.getSurface());
+  }
+
+  @Override
+  public void surfaceDestroyed(@NonNull SurfaceHolder holder) {
+    mApi.surfaceOffscreen();
+  }
+}

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

@@ -0,0 +1,44 @@
+package com.shopify.reactnative.skia;
+
+import android.annotation.SuppressLint;
+import android.content.Context;
+import android.graphics.SurfaceTexture;
+import android.view.Surface;
+import android.view.TextureView;
+import androidx.annotation.NonNull;
+
+@SuppressLint("ViewConstructor")
+public class WebGPUTextureView extends TextureView implements TextureView.SurfaceTextureListener {
+
+  WebGPUViewAPI mApi;
+
+  public WebGPUTextureView(Context context, WebGPUViewAPI api) {
+    super(context);
+    mApi = api;
+    setOpaque(false);
+    setSurfaceTextureListener(this);
+  }
+
+  @Override
+  public void onSurfaceTextureAvailable(@NonNull SurfaceTexture surfaceTexture, int width, int height) {
+    Surface surface = new Surface(surfaceTexture);
+    mApi.surfaceCreated(surface);
+  }
+
+  @Override
+  public void onSurfaceTextureSizeChanged(@NonNull SurfaceTexture surfaceTexture, int width, int height) {
+    Surface surface = new Surface(surfaceTexture);
+    mApi.surfaceChanged(surface);
+  }
+
+  @Override
+  public boolean onSurfaceTextureDestroyed(@NonNull SurfaceTexture surfaceTexture) {
+    mApi.surfaceDestroyed();
+    return true;
+  }
+
+  @Override
+  public void onSurfaceTextureUpdated(@NonNull SurfaceTexture surfaceTexture) {
+    // No implementation needed
+  }
+}

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

@@ -0,0 +1,95 @@
+package com.shopify.reactnative.skia;
+
+import android.content.Context;
+import android.view.Surface;
+import android.view.View;
+
+import com.facebook.proguard.annotations.DoNotStrip;
+import com.facebook.react.views.view.ReactViewGroup;
+
+public class WebGPUView extends ReactViewGroup implements WebGPUViewAPI {
+
+  private int mContextId;
+  private boolean mTransparent = false;
+  private View mView = null;
+
+  WebGPUView(Context context) {
+    super(context);
+  }
+
+  public void setContextId(int contextId) {
+    mContextId = contextId;
+  }
+
+  public void setTransparent(boolean value) {
+    Context ctx = getContext();
+    if (value != mTransparent || mView == null) {
+      if (mView != null) {
+        removeView(mView);
+      }
+      mTransparent = value;
+      if (mTransparent) {
+        mView = new WebGPUTextureView(ctx, this);
+      } else {
+        mView = new WebGPUSurfaceView(ctx, this);
+      }
+      addView(mView);
+    }
+  }
+
+  @Override
+  protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
+    super.onLayout(changed, left, top, right, bottom);
+    if (mView != null) {
+      mView.layout(0, 0, this.getMeasuredWidth(), this.getMeasuredHeight());
+    }
+  }
+
+  @Override
+  public void surfaceCreated(Surface surface) {
+    float density = getResources().getDisplayMetrics().density;
+    float width = getWidth() / density;
+    float height = getHeight() / density;
+    onSurfaceCreate(surface, mContextId, width, height);
+  }
+
+  @Override
+  public void surfaceChanged(Surface surface) {
+    float density = getResources().getDisplayMetrics().density;
+    float width = getWidth() / density;
+    float height = getHeight() / density;
+    onSurfaceChanged(surface, mContextId, width, height);
+  }
+
+  @Override
+  public void surfaceDestroyed() {
+    onSurfaceDestroy(mContextId);
+  }
+
+  @Override
+  public void surfaceOffscreen() {
+    switchToOffscreenSurface(mContextId);
+  }
+
+  @DoNotStrip
+  private native void onSurfaceCreate(
+    Surface surface,
+    int contextId,
+    float width,
+    float height
+  );
+
+  @DoNotStrip
+  private native void onSurfaceChanged(
+    Surface surface,
+    int contextId,
+    float width,
+    float height
+  );
+
+  @DoNotStrip
+  private native void onSurfaceDestroy(int contextId);
+
+  @DoNotStrip
+  private native void switchToOffscreenSurface(int contextId);
+}

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

@@ -0,0 +1,14 @@
+package com.shopify.reactnative.skia;
+
+import android.view.Surface;
+
+public interface WebGPUViewAPI {
+
+  void surfaceCreated(Surface surface);
+
+  void surfaceChanged(Surface surface);
+
+  void surfaceDestroyed();
+
+  void surfaceOffscreen();
+}

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

@@ -0,0 +1,58 @@
+package com.shopify.reactnative.skia;
+
+import com.facebook.react.module.annotations.ReactModule;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import com.facebook.react.views.view.ReactViewGroup;
+import com.facebook.react.views.view.ReactViewManager;
+import com.facebook.react.viewmanagers.WebGPUViewManagerDelegate;
+import com.facebook.react.viewmanagers.WebGPUViewManagerInterface;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+@ReactModule(name = WebGPUViewManager.NAME)
+public class WebGPUViewManager extends ReactViewManager implements WebGPUViewManagerInterface<WebGPUView> {
+
+  public static final String NAME = "WebGPUView";
+
+  protected WebGPUViewManagerDelegate mDelegate;
+
+  public WebGPUViewManager() {
+    mDelegate = new WebGPUViewManagerDelegate(this);
+  }
+
+  protected WebGPUViewManagerDelegate getDelegate() {
+    return mDelegate;
+  }
+
+  @NonNull
+  @Override
+  public String getName() {
+    return NAME;
+  }
+
+  @NonNull
+  @Override
+  public WebGPUView createViewInstance(@NonNull ThemedReactContext context) {
+    return new WebGPUView(context);
+  }
+
+  @Override
+  @ReactProp(name = "transparent")
+  public void setTransparent(WebGPUView view, boolean value) {
+    view.setTransparent(value);
+  }
+
+  @Override
+  @ReactProp(name = "contextId")
+  public void setContextId(WebGPUView view, int value) {
+    view.setContextId(value);
+  }
+
+  @Override
+  public void onDropViewInstance(@NonNull ReactViewGroup view) {
+    super.onDropViewInstance(view);
+    ((WebGPUView) view).surfaceDestroyed();
+  }
+}

package/apple/RNSkUIKit.h

@@ -0,0 +1,13 @@
+#pragma once
+
+#if !TARGET_OS_OSX
+#import <UIKit/UIKit.h>
+#else
+#import <Appkit/Appkit.h>
+#endif
+
+#if !TARGET_OS_OSX
+typedef UIView RNSkPlatformView;
+#else
+typedef NSView RNSkPlatformView;
+#endif

package/apple/SkiaPlatformContext.h

@@ -0,0 +1,20 @@
+#pragma once
+
+#ifdef SK_GRAPHITE
+
+#include "rnwgpu/PlatformContext.h"
+
+namespace rnwgpu {
+
+class SkiaPlatformContext : public PlatformContext {
+public:
+  SkiaPlatformContext() = default;
+  ~SkiaPlatformContext() = default;
+
+  wgpu::Surface makeSurface(wgpu::Instance instance, void *surface, int width,
+                            int height) override;
+};
+
+} // namespace rnwgpu
+
+#endif // SK_GRAPHITE

package/apple/SkiaPlatformContext.mm

@@ -0,0 +1,21 @@
+#ifdef SK_GRAPHITE
+
+#include "SkiaPlatformContext.h"
+
+#include <TargetConditionals.h>
+
+namespace rnwgpu {
+
+wgpu::Surface SkiaPlatformContext::makeSurface(wgpu::Instance instance,
+                                                void *surface, int width,
+                                                int height) {
+  wgpu::SurfaceSourceMetalLayer metalSurfaceDesc;
+  metalSurfaceDesc.layer = surface;
+  wgpu::SurfaceDescriptor surfaceDescriptor;
+  surfaceDescriptor.nextInChain = &metalSurfaceDesc;
+  return instance.CreateSurface(&surfaceDescriptor);
+}
+
+} // namespace rnwgpu
+
+#endif // SK_GRAPHITE

package/apple/WebGPUMetalView.h

@@ -0,0 +1,12 @@
+#pragma once
+
+#import "RNSkUIKit.h"
+
+@interface WebGPUMetalView : RNSkPlatformView
+
+@property (nonatomic, strong) NSNumber *contextId;
+
+- (void)configure;
+- (void)update;
+
+@end

package/apple/WebGPUMetalView.mm

@@ -0,0 +1,93 @@
+#import "WebGPUMetalView.h"
+
+#ifdef SK_GRAPHITE
+
+#import "webgpu/webgpu_cpp.h"
+#import <QuartzCore/CAMetalLayer.h>
+
+#import "rnwgpu/SurfaceRegistry.h"
+#import "rnskia/RNDawnContext.h"
+
+@implementation WebGPUMetalView {
+  BOOL _isConfigured;
+}
+
+#if !TARGET_OS_OSX
++ (Class)layerClass {
+  return [CAMetalLayer class];
+}
+#else  // !TARGET_OS_OSX
+- (instancetype)init {
+  self = [super init];
+  if (self) {
+    self.wantsLayer = true;
+    self.layer = [CAMetalLayer layer];
+  }
+  return self;
+}
+#endif // !TARGET_OS_OSX
+
+- (void)configure {
+  auto size = self.frame.size;
+  void *nativeSurface = (__bridge void *)self.layer;
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  auto &dawnContext = RNSkia::DawnContext::getInstance();
+  auto gpu = dawnContext.getWGPUInstance();
+
+  // Create the surface using Dawn's API directly
+  wgpu::SurfaceSourceMetalLayer metalSurfaceDesc;
+  metalSurfaceDesc.layer = nativeSurface;
+  wgpu::SurfaceDescriptor surfaceDescriptor;
+  surfaceDescriptor.nextInChain = &metalSurfaceDesc;
+  auto surface = gpu.CreateSurface(&surfaceDescriptor);
+
+  registry
+      .getSurfaceInfoOrCreate([_contextId intValue], gpu, size.width,
+                              size.height)
+      ->switchToOnscreen(nativeSurface, surface);
+}
+
+- (void)update {
+  auto size = self.frame.size;
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  auto surfaceInfo = registry.getSurfaceInfo([_contextId intValue]);
+  if (surfaceInfo) {
+    surfaceInfo->resize(size.width, size.height);
+  }
+}
+
+- (void)dealloc {
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  // Remove the surface info from the registry
+  registry.removeSurfaceInfo([_contextId intValue]);
+}
+
+@end
+
+#else // SK_GRAPHITE
+
+// Stub implementation when GRAPHITE is not enabled
+@implementation WebGPUMetalView
+
+#if !TARGET_OS_OSX
++ (Class)layerClass {
+  return [CAMetalLayer class];
+}
+#else  // !TARGET_OS_OSX
+- (instancetype)init {
+  self = [super init];
+  return self;
+}
+#endif // !TARGET_OS_OSX
+
+- (void)configure {
+  // No-op when GRAPHITE is not enabled
+}
+
+- (void)update {
+  // No-op when GRAPHITE is not enabled
+}
+
+@end
+
+#endif // SK_GRAPHITE

package/apple/WebGPUView.h

@@ -0,0 +1,20 @@
+#pragma once
+
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#import "WebGPUMetalView.h"
+#import <React/RCTViewComponentView.h>
+#if !TARGET_OS_OSX
+#import <UIKit/UIKit.h>
+#else
+#import <AppKit/AppKit.h>
+#endif
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface WebGPUView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif // RCT_NEW_ARCH_ENABLED

package/apple/WebGPUView.mm

@@ -0,0 +1,77 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#import "WebGPUView.h"
+
+#import <react/renderer/components/rnskia/ComponentDescriptors.h>
+#import <react/renderer/components/rnskia/EventEmitters.h>
+#import <react/renderer/components/rnskia/Props.h>
+#import <react/renderer/components/rnskia/RCTComponentViewHelpers.h>
+
+#import "WebGPUMetalView.h"
+#import "RCTFabricComponentsPlugins.h"
+
+using namespace facebook::react;
+
+@implementation WebGPUView
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const WebGPUViewProps>();
+    _props = defaultProps;
+  }
+  return self;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<WebGPUViewComponentDescriptor>();
+}
+
+- (void)prepareForRecycle {
+  [super prepareForRecycle];
+  /*
+    It's important to destroy the Metal Layer before releasing a view
+    to the recycled pool to prevent displaying outdated content from
+    the last usage in the new context.
+  */
+  self.contentView = nil;
+}
+
+- (WebGPUMetalView *)getContentView {
+  if (!self.contentView) {
+    self.contentView = [WebGPUMetalView new];
+  }
+  return (WebGPUMetalView *)self.contentView;
+}
+
+- (void)updateProps:(const Props::Shared &)props
+           oldProps:(const Props::Shared &)oldProps {
+  const auto &oldViewProps =
+      *std::static_pointer_cast<const WebGPUViewProps>(_props);
+  const auto &newViewProps =
+      *std::static_pointer_cast<const WebGPUViewProps>(props);
+
+  if (newViewProps.contextId != oldViewProps.contextId) {
+    /*
+      The context is set only once during mounting the component
+      and never changes because it isn't available for users to modify.
+    */
+    WebGPUMetalView *metalView = [WebGPUMetalView new];
+    self.contentView = metalView;
+    [metalView setContextId:@(newViewProps.contextId)];
+    [metalView configure];
+  }
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+- (void)updateLayoutMetrics:(const LayoutMetrics &)layoutMetrics
+           oldLayoutMetrics:(const LayoutMetrics &)oldLayoutMetrics {
+  [super updateLayoutMetrics:layoutMetrics oldLayoutMetrics:oldLayoutMetrics];
+  [(WebGPUMetalView *)self.contentView update];
+}
+
+@end
+
+Class<RCTComponentViewProtocol> WebGPUViewCls(void) { return WebGPUView.class; }
+
+#endif // RCT_NEW_ARCH_ENABLED

package/cpp/jsi2/JSIConverter.h

@@ -238,6 +238,17 @@ template <> struct JSIConverter<rnwgpu::async::AsyncTaskHandle> {
 };
 #endif
 
+// jsi::Function <> Function
+template <> struct JSIConverter<jsi::Function> {
+  static jsi::Function fromJSI(jsi::Runtime &runtime, const jsi::Value &arg,
+                                bool outOfBound) {
+    return arg.asObject(runtime).asFunction(runtime);
+  }
+  static jsi::Value toJSI(jsi::Runtime &runtime, jsi::Function &&arg) {
+    return std::move(arg);
+  }
+};
+
 // std::map<std::string, T> <> Record<string, T>
 template <typename ValueType>
 struct JSIConverter<std::map<std::string, ValueType>> {