react-native-wgpu 0.5.11 → 0.5.14

package/src/WebGPUViewNativeComponent.web.ts

@@ -1,113 +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>();
-
-  useEffect(() => {
-    const onResize = debounce(
-      () => resizeCanvas(canvasElm.current ?? null),
-      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/WebPolyfillGPUModule.ts

@@ -1,53 +0,0 @@
-import { contextIdToId } from "./utils";
-
-const fabric = true;
-
-function getNativeSurface(contextId: number) {
-  const canvas = document.getElementById(
-    contextIdToId(contextId),
-  ) as HTMLCanvasElement;
-
-  const { height, width } = canvas.getBoundingClientRect()!;
-
-  return {
-    surface: BigInt(contextId),
-    height,
-    width,
-    clientHeight: height,
-    clientWidth: width,
-  };
-}
-
-function makeWebGPUCanvasContext(
-  contextId: number,
-  width: number,
-  height: number,
-) {
-  const canvas = document.getElementById(
-    contextIdToId(contextId),
-  ) as HTMLCanvasElement;
-
-  const dpr = window.devicePixelRatio || 1;
-  const pixelWidth = (width * dpr).toString();
-  const pixelHeight = (height * dpr).toString();
-
-  if (
-    canvas.getAttribute("width") !== pixelWidth ||
-    canvas.getAttribute("height") !== pixelHeight
-  ) {
-    canvas.setAttribute("width", pixelWidth);
-    canvas.setAttribute("height", pixelHeight);
-  }
-
-  const context = canvas.getContext("webgpu")!;
-  return Object.assign(context, {
-    present: () => {},
-  });
-}
-
-// @ts-expect-error - polyfill for RNWebGPU native module
-window.RNWebGPU = {
-  getNativeSurface,
-  MakeWebGPUCanvasContext: makeWebGPUCanvasContext,
-  fabric,
-};

package/src/external/ModuleProxy.ts

@@ -1,30 +0,0 @@
-// https://github.com/mrousavy/react-native-vision-camera/blob/main/package/src/dependencies/ModuleProxy.ts
-type ImportType = ReturnType<typeof require>;
-
-/**
- * Create a lazily-imported module proxy.
- * This is useful for lazily requiring optional dependencies.
- */
-export const createModuleProxy = <TModule>(
-  getModule: () => ImportType,
-): TModule => {
-  const holder: { module: TModule | undefined } = { module: undefined };
-
-  const proxy = new Proxy(holder, {
-    get: (target, property) => {
-      if (target.module == null) {
-        // lazy initialize module via require()
-        // caller needs to make sure the require() call is wrapped in a try/catch
-        target.module = getModule() as TModule;
-      }
-      return target.module[property as keyof typeof holder.module];
-    },
-  });
-  return proxy as unknown as TModule;
-};
-
-export class OptionalDependencyNotInstalledError extends Error {
-  constructor(name: string) {
-    super(`${name} is not installed!`);
-  }
-}

package/src/external/index.ts

@@ -1 +0,0 @@
-export * from "./reanimated";

package/src/external/reanimated/ReanimatedProxy.ts

@@ -1,19 +0,0 @@
-import type * as ReanimatedT from "react-native-reanimated";
-
-import {
-  OptionalDependencyNotInstalledError,
-  createModuleProxy,
-} from "../ModuleProxy";
-
-type TReanimated = typeof ReanimatedT;
-
-const Reanimated = createModuleProxy<TReanimated>(() => {
-  try {
-    return require("react-native-reanimated");
-  } catch (e) {
-    throw new OptionalDependencyNotInstalledError("react-native-reanimated");
-  }
-});
-
-// eslint-disable-next-line import/no-default-export
-export default Reanimated;

package/src/external/reanimated/index.ts

@@ -1,2 +0,0 @@
-export { registerWebGPUForReanimated } from "./registerWebGPUForReanimated";
-export { default as Reanimated } from "./ReanimatedProxy";

package/src/external/reanimated/registerWebGPUForReanimated.ts

@@ -1,43 +0,0 @@
-// Declare global WebGPU worklet helper functions (installed by native module)
-declare function __webgpuIsWebGPUObject(obj: unknown): boolean;
-declare function __webgpuBox(obj: object): {
-  unbox: () => object;
-  __boxedWebGPU: true;
-};
-
-let isRegistered = false;
-
-/**
- * Register WebGPU objects for Worklets serialization.
- * This allows GPUDevice, GPUCanvasContext, etc. to be passed to worklets.
- *
- * This is called automatically when the module loads if react-native-worklets is installed.
- */
-export const registerWebGPUForReanimated = () => {
-  if (isRegistered) {
-    return;
-  }
-  isRegistered = true;
-
-  try {
-    const { registerCustomSerializable } = require("react-native-worklets");
-
-    registerCustomSerializable({
-      name: "WebGPU",
-      determine: (value: object): value is object => {
-        "worklet";
-        return __webgpuIsWebGPUObject(value);
-      },
-      pack: (value: object) => {
-        "worklet";
-        return __webgpuBox(value);
-      },
-      unpack: (boxed: { unbox: () => object }) => {
-        "worklet";
-        return boxed.unbox();
-      },
-    });
-  } catch {
-    // react-native-worklets not installed, skip registration
-  }
-};

package/src/hooks.tsx

@@ -1,93 +0,0 @@
-import React, {
-  createContext,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
-import type { ReactNode } from "react";
-
-import type { CanvasRef, NativeCanvas } from "./Canvas";
-
-export const warnIfNotHardwareAccelerated = (adapter: GPUAdapter) => {
-  // Check if adapter is a fallback adapter using the new GPUAdapterInfo API
-  // Note: isFallbackAdapter was moved from GPUAdapter to GPUAdapterInfo in Chrome 140
-  if (adapter.info && adapter.info.isFallbackAdapter) {
-    console.warn(
-      "GPUAdapter is not hardware accelerated. This is common on Android emulators. Rendering will be slow. Some features may be unavailable.",
-    );
-  }
-};
-
-interface DeviceContext {
-  device: GPUDevice | null;
-  adapter: GPUAdapter | null;
-}
-
-const DeviceContext = createContext<DeviceContext | null>(null);
-
-interface DeviceProviderProps {
-  children?: ReactNode | ReactNode[];
-  adapterOptions?: GPURequestAdapterOptions;
-  deviceDescriptor?: GPUDeviceDescriptor;
-}
-
-export const GPUDeviceProvider = ({
-  children,
-  adapterOptions,
-  deviceDescriptor,
-}: DeviceProviderProps) => {
-  const state = useDevice(adapterOptions, deviceDescriptor);
-  if (!state.device) {
-    return null;
-  }
-  return (
-    <DeviceContext.Provider value={state}>{children}</DeviceContext.Provider>
-  );
-};
-
-export const useSurface = () => {
-  const ref = useRef<CanvasRef>(null);
-  const [surface, setSurface] = useState<NativeCanvas | null>(null);
-  useLayoutEffect(() => {
-    const sur = ref.current!.getNativeSurface();
-    setSurface(sur);
-  }, []);
-  return { ref, surface };
-};
-
-export const useMainDevice = () => {
-  const ctx = useContext(DeviceContext);
-  if (!ctx) {
-    throw new Error("No DeviceContext found.");
-  }
-  return ctx;
-};
-
-export const useCanvasRef = () => useRef<CanvasRef>(null);
-
-export const useDevice = (
-  adapterOptions?: GPURequestAdapterOptions,
-  deviceDescriptor?: GPUDeviceDescriptor,
-) => {
-  const [state, setState] = useState<DeviceContext | null>(null);
-  useEffect(() => {
-    (async () => {
-      if (!state) {
-        const adapter = await navigator.gpu.requestAdapter(adapterOptions);
-        if (!adapter) {
-          throw new Error("No appropriate GPUAdapter found.");
-        }
-        warnIfNotHardwareAccelerated(adapter);
-        const device = await adapter.requestDevice(deviceDescriptor);
-        if (!device) {
-          throw new Error("No appropriate GPUDevice found.");
-        }
-        setState({ adapter, device });
-        return;
-      }
-    })();
-  }, [adapterOptions, deviceDescriptor, state]);
-  return { adapter: state?.adapter ?? null, device: state?.device ?? null };
-};

package/src/index.tsx

@@ -1,31 +0,0 @@
-/// <reference types="@webgpu/types" />
-
-import type { NativeCanvas, RNCanvasContext } from "./types";
-
-export * from "./main";
-
-declare global {
-  interface Navigator {
-    gpu: GPU;
-  }
-
-  var navigator: Navigator;
-
-  var RNWebGPU: {
-    gpu: GPU;
-    fabric: boolean;
-    getNativeSurface: (contextId: number) => NativeCanvas;
-    MakeWebGPUCanvasContext: (
-      contextId: number,
-      width: number,
-      height: number,
-    ) => RNCanvasContext;
-    DecodeToUTF8: (buffer: NodeJS.ArrayBufferView | ArrayBuffer) => string;
-    createImageBitmap: typeof createImageBitmap;
-  };
-
-  // Extend createImageBitmap to accept ArrayBuffer/TypedArray (encoded image bytes)
-  function createImageBitmap(
-    image: ArrayBuffer | ArrayBufferView,
-  ): Promise<ImageBitmap>;
-}

package/src/main/index.tsx

@@ -1,40 +0,0 @@
-import { registerWebGPUForReanimated } from "../external";
-import WebGPUModule from "../NativeWebGPUModule";
-
-export * from "../Canvas";
-export * from "../Offscreen";
-export * from "../WebGPUViewNativeComponent";
-export * from "../hooks";
-
-export { default as WebGPUModule } from "../NativeWebGPUModule";
-
-const _installOk = WebGPUModule.install();
-
-registerWebGPUForReanimated();
-
-if (typeof RNWebGPU !== "undefined") {
-  if (!navigator) {
-    // @ts-expect-error Navigation object is more complex than this, setting it to an empty object to add gpu property
-    navigator = {
-      gpu: RNWebGPU.gpu,
-      userAgent: "react-native",
-    };
-  } else {
-    navigator.gpu = RNWebGPU.gpu;
-    if (typeof navigator.userAgent !== "string") {
-      try {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore - Hermes navigator may not include a userAgent, align with the polyfill if needed
-        navigator.userAgent = "react-native";
-      } catch {
-        // navigator.userAgent can be read-only; ignore if assignment fails
-      }
-    }
-  }
-  global.createImageBitmap =
-    global.createImageBitmap ?? RNWebGPU.createImageBitmap.bind(RNWebGPU);
-} else {
-  console.warn(
-    `[react-native-wgpu] install() returned ${_installOk} but RNWebGPU global is not available`,
-  );
-}

package/src/main/index.web.tsx

@@ -1,8 +0,0 @@
-import "../WebPolyfillGPUModule";
-
-export * from "../Canvas";
-export * from "../Offscreen";
-export * from "../WebGPUViewNativeComponent";
-export * from "../hooks";
-
-// We don't need to set all global properties on web, webgpu is already available globally

package/src/types.ts

@@ -1,20 +0,0 @@
-type SurfacePointer = bigint;
-
-export interface NativeCanvas {
-  surface: SurfacePointer;
-  width: number;
-  height: number;
-  clientWidth: number;
-  clientHeight: number;
-}
-
-export type RNCanvasContext = GPUCanvasContext & {
-  present: () => void;
-};
-
-export interface CanvasRef {
-  getContextId: () => number;
-  getContext(contextName: "webgpu"): RNCanvasContext | null;
-  getNativeSurface: () => NativeCanvas;
-  whenReady: (callback: () => void) => void;
-}

package/src/utils.ts

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