@shopify/react-native-skia 2.10.0 → 2.11.0-next.1

package/src/specs/WebGPUViewNativeComponent.web.ts

@@ -1,110 +0,0 @@
-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",
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    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

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

package/src/views/WebGPUCanvas.tsx

@@ -1,125 +0,0 @@
-import React, { useEffect, 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;
-    // Retires a canvas context; called by the Canvas on unmount (the Canvas
-    // owns the native registry entry for its contextId).
-    destroyContext: (contextId: number) => void;
-  };
-}
-
-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());
-
-  // Retire the native registry entry for this contextId on unmount. When a
-  // native surface is still attached, this is a no-op and the native view's
-  // own teardown retires the entry instead — which keeps StrictMode's
-  // simulated unmount (which re-runs effects without unmounting native views)
-  // from orphaning a live surface.
-  useEffect(() => {
-    return () => {
-      if (typeof RNWebGPU !== "undefined") {
-        RNWebGPU.destroyContext(contextId);
-      }
-    };
-  }, [contextId]);
-
-  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

@@ -1,36 +0,0 @@
-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} />;
-};