@shopify/react-native-skia 2.5.2 → 2.5.4

package/src/sksg/Container.web.ts

@@ -12,6 +12,9 @@ import { Container, StaticContainer } from "./StaticContainer";
 import "../skia/NativeSetup";
 import "../views/api";
 
+// create local reference for `strictGlobal` option in Worklets
+const { SkiaViewApi } = globalThis;
+
 const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
   "worklet";
   const rec = Skia.PictureRecorder();

package/src/specs/WebGPUViewNativeComponent.ts

@@ -0,0 +1,11 @@
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
+import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
+import type { ViewProps } from "react-native";
+
+export interface NativeProps extends ViewProps {
+  contextId: Int32;
+  transparent: boolean;
+}
+
+// eslint-disable-next-line import/no-default-export
+export default codegenNativeComponent<NativeProps>("WebGPUView");

package/src/specs/WebGPUViewNativeComponent.web.ts

@@ -0,0 +1,108 @@
+import React, { useEffect, useRef } from "react";
+import { StyleSheet } from "react-native";
+import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
+import type { ViewProps } from "react-native";
+
+import { contextIdToId } from "./utils";
+
+export interface NativeProps extends ViewProps {
+  contextId: Int32;
+  transparent: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function debounce<T extends (...args: any[]) => void>(
+  func: T,
+  wait: number,
+  immediate = false
+) {
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  return function debounced(
+    this: ThisParameterType<T>,
+    ...args: Parameters<T>
+  ) {
+    const context = this;
+    const callNow = immediate && !timeout;
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      timeout = undefined;
+      if (!immediate) {
+        func.apply(context, args);
+      }
+    }, wait);
+    if (callNow) {
+      func.apply(context, args);
+    }
+  };
+}
+
+function resizeCanvas(canvas: HTMLCanvasElement | null) {
+  if (!canvas) {
+    return;
+  }
+
+  const dpr = window.devicePixelRatio || 1;
+
+  const { height, width } = canvas.getBoundingClientRect();
+  canvas.setAttribute("height", (height * dpr).toString());
+  canvas.setAttribute("width", (width * dpr).toString());
+}
+
+// eslint-disable-next-line import/no-default-export
+export default function WebGPUViewNativeComponent(
+  props: NativeProps
+): React.JSX.Element {
+  const { contextId, style, transparent, ...rest } = props;
+
+  const canvasElm = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const onResize = debounce(() => resizeCanvas(canvasElm.current), 100);
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  return React.createElement("canvas", {
+    ...rest,
+    id: contextIdToId(contextId),
+    style: {
+      ...styles.view,
+      ...styles.flex1,
+      ...(transparent === false ? { backgroundColor: "white" } : {}),
+      ...(typeof style === "object" ? style : {}),
+    },
+    ref: (ref: HTMLCanvasElement) => {
+      canvasElm.current = ref;
+      if (ref) {
+        resizeCanvas(ref);
+      }
+    },
+  });
+}
+
+const styles = StyleSheet.create({
+  flex1: {
+    flex: 1,
+  },
+  view: {
+    alignItems: "stretch",
+    backgroundColor: "transparent",
+    border: "0 solid black",
+    boxSizing: "border-box",
+    display: "flex",
+    flexBasis: "auto",
+    flexDirection: "column",
+    flexShrink: 0,
+    listStyle: "none",
+    margin: 0,
+    minHeight: 0,
+    minWidth: 0,
+    padding: 0,
+    position: "relative",
+    zIndex: 0,
+  },
+});

package/src/specs/utils.ts

@@ -0,0 +1,4 @@
+// Only used on the web
+export function contextIdToId(contextId: number) {
+  return "rnwgpu-canvas-" + contextId;
+}

package/src/views/WebGPUCanvas.tsx

@@ -0,0 +1,109 @@
+import React, { useImperativeHandle, useRef, useState } from "react";
+import type { ViewProps } from "react-native";
+import { View, Platform } from "react-native";
+
+import WebGPUNativeView from "../specs/WebGPUViewNativeComponent";
+
+let CONTEXT_COUNTER = 1;
+function generateContextId() {
+  return CONTEXT_COUNTER++;
+}
+
+declare global {
+  var RNWebGPU: {
+    gpu: GPU;
+    fabric: boolean;
+    getNativeSurface: (contextId: number) => NativeCanvas;
+    MakeWebGPUCanvasContext: (
+      contextId: number,
+      width: number,
+      height: number
+    ) => RNCanvasContext;
+  };
+}
+
+type SurfacePointer = bigint;
+
+export interface NativeCanvas {
+  surface: SurfacePointer;
+  width: number;
+  height: number;
+  clientWidth: number;
+  clientHeight: number;
+}
+
+export type RNCanvasContext = GPUCanvasContext & {
+  present: () => void;
+};
+
+export interface WebGPUCanvasRef {
+  getContextId: () => number;
+  getContext(contextName: "webgpu"): RNCanvasContext | null;
+  getNativeSurface: () => NativeCanvas;
+}
+
+interface WebGPUCanvasProps extends ViewProps {
+  transparent?: boolean;
+  ref?: React.Ref<WebGPUCanvasRef>;
+}
+
+export const WebGPUCanvas = ({
+  transparent,
+  ref,
+  ...props
+}: WebGPUCanvasProps) => {
+  const viewRef = useRef(null);
+  const [contextId] = useState(() => generateContextId());
+
+  useImperativeHandle(ref, () => ({
+    getContextId: () => contextId,
+    getNativeSurface: () => {
+      if (typeof RNWebGPU === "undefined") {
+        throw new Error(
+          "[WebGPU] RNWebGPU is not available. Make sure SK_GRAPHITE is enabled."
+        );
+      }
+      return RNWebGPU.getNativeSurface(contextId);
+    },
+    getContext(contextName: "webgpu"): RNCanvasContext | null {
+      if (contextName !== "webgpu") {
+        throw new Error(`[WebGPU] Unsupported context: ${contextName}`);
+      }
+      if (!viewRef.current) {
+        throw new Error("[WebGPU] Cannot get context before mount");
+      }
+      if (typeof RNWebGPU === "undefined") {
+        throw new Error(
+          "[WebGPU] RNWebGPU is not available. Make sure SK_GRAPHITE is enabled."
+        );
+      }
+      // getBoundingClientRect became stable in RN 0.83
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const view = viewRef.current as any;
+      const size =
+        "getBoundingClientRect" in view
+          ? view.getBoundingClientRect()
+          : view.unstable_getBoundingClientRect();
+      return RNWebGPU.MakeWebGPUCanvasContext(
+        contextId,
+        size.width,
+        size.height
+      );
+    },
+  }));
+
+  // WebGPU Canvas is not supported on web
+  if (Platform.OS === "web") {
+    return <View {...props} />;
+  }
+
+  return (
+    <View collapsable={false} ref={viewRef} {...props}>
+      <WebGPUNativeView
+        style={{ flex: 1 }}
+        contextId={contextId}
+        transparent={!!transparent}
+      />
+    </View>
+  );
+};

package/src/views/WebGPUCanvas.web.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import type { ViewProps } from "react-native";
+
+export interface NativeCanvas {
+  surface: bigint;
+  width: number;
+  height: number;
+  clientWidth: number;
+  clientHeight: number;
+}
+
+export type RNCanvasContext = GPUCanvasContext & {
+  present: () => void;
+};
+
+export interface WebGPUCanvasRef {
+  getContextId: () => number;
+  getContext(contextName: "webgpu"): RNCanvasContext | null;
+  getNativeSurface: () => NativeCanvas;
+}
+
+interface WebGPUCanvasProps extends ViewProps {
+  transparent?: boolean;
+  ref?: React.Ref<WebGPUCanvasRef>;
+}
+
+// WebGPU Canvas is not supported on web
+export const WebGPUCanvas = ({
+  transparent: _transparent,
+  ref: _ref,
+  ...props
+}: WebGPUCanvasProps) => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  return <div {...props} />;
+};

package/src/views/index.ts

@@ -1,2 +1,3 @@
 export * from "./SkiaPictureView";
 export * from "./types";
+export * from "./WebGPUCanvas";