react-native-wgpu 0.3.2 → 0.4.0

package/lib/typescript/src/WebGPUViewNativeComponent.web.d.ts

@@ -0,0 +1,118 @@
+import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
+import type { ViewProps } from "react-native";
+export interface NativeProps extends ViewProps {
+    contextId: Int32;
+    transparent: boolean;
+}
+export default function WebGPUViewNativeComponent(props: NativeProps): import("react").ReactElement<{
+    style: (import("react-native").StyleProp<import("react-native").ViewStyle> | {
+        flex: number;
+    } | {
+        alignItems: "stretch";
+        backgroundColor: string;
+        border: string;
+        boxSizing: "border-box";
+        display: "flex";
+        flexBasis: "auto";
+        flexDirection: "column";
+        flexShrink: number;
+        listStyle: string;
+        margin: number;
+        minHeight: number;
+        minWidth: number;
+        padding: number;
+        position: "relative";
+        zIndex: number;
+    })[];
+    id: string;
+    ref: (ref: HTMLCanvasElement) => void;
+    children?: React.ReactNode | undefined;
+    hitSlop?: null | import("react-native").Insets | number | undefined;
+    needsOffscreenAlphaCompositing?: boolean | undefined;
+    onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+    pointerEvents?: "box-none" | "none" | "box-only" | "auto" | undefined;
+    removeClippedSubviews?: boolean | undefined;
+    testID?: string | undefined;
+    nativeID?: string | undefined;
+    collapsable?: boolean | undefined;
+    collapsableChildren?: boolean | undefined;
+    onBlur?: ((e: import("react-native").BlurEvent) => void) | null | undefined;
+    onFocus?: ((e: import("react-native").FocusEvent) => void) | null | undefined;
+    renderToHardwareTextureAndroid?: boolean | undefined;
+    focusable?: boolean | undefined;
+    tabIndex?: 0 | -1 | undefined;
+    shouldRasterizeIOS?: boolean | undefined;
+    isTVSelectable?: boolean | undefined;
+    hasTVPreferredFocus?: boolean | undefined;
+    tvParallaxShiftDistanceX?: number | undefined;
+    tvParallaxShiftDistanceY?: number | undefined;
+    tvParallaxTiltAngle?: number | undefined;
+    tvParallaxMagnification?: number | undefined;
+    onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onPointerEnter?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerEnterCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerLeave?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerLeaveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerMove?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerMoveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerCancel?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerCancelCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerDown?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerDownCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerUp?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerUpCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    accessible?: boolean | undefined;
+    accessibilityActions?: ReadonlyArray<import("react-native").AccessibilityActionInfo> | undefined;
+    accessibilityLabel?: string | undefined;
+    'aria-label'?: string | undefined;
+    accessibilityRole?: import("react-native").AccessibilityRole | undefined;
+    accessibilityState?: import("react-native").AccessibilityState | undefined;
+    'aria-busy'?: boolean | undefined;
+    'aria-checked'?: boolean | "mixed" | undefined;
+    'aria-disabled'?: boolean | undefined;
+    'aria-expanded'?: boolean | undefined;
+    'aria-selected'?: boolean | undefined;
+    accessibilityHint?: string | undefined;
+    accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+    'aria-valuemax'?: import("react-native").AccessibilityValue["max"] | undefined;
+    'aria-valuemin'?: import("react-native").AccessibilityValue["min"] | undefined;
+    'aria-valuenow'?: import("react-native").AccessibilityValue["now"] | undefined;
+    'aria-valuetext'?: import("react-native").AccessibilityValue["text"] | undefined;
+    onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
+    importantForAccessibility?: ("auto" | "yes" | "no" | "no-hide-descendants") | undefined;
+    'aria-hidden'?: boolean | undefined;
+    'aria-modal'?: boolean | undefined;
+    role?: import("react-native").Role | undefined;
+    accessibilityLabelledBy?: string | string[] | undefined;
+    'aria-labelledby'?: string | undefined;
+    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
+    'aria-live'?: ("polite" | "assertive" | "off") | undefined;
+    screenReaderFocusable?: boolean | undefined;
+    accessibilityElementsHidden?: boolean | undefined;
+    accessibilityViewIsModal?: boolean | undefined;
+    onAccessibilityEscape?: (() => void) | undefined;
+    onAccessibilityTap?: (() => void) | undefined;
+    onMagicTap?: (() => void) | undefined;
+    accessibilityIgnoresInvertColors?: boolean | undefined;
+    accessibilityLanguage?: string | undefined;
+    accessibilityShowsLargeContentViewer?: boolean | undefined;
+    accessibilityLargeContentTitle?: string | undefined;
+    accessibilityRespondsToUserInteraction?: boolean | undefined;
+}, string | import("react").JSXElementConstructor<any>>;
+//# sourceMappingURL=WebGPUViewNativeComponent.web.d.ts.map

package/lib/typescript/src/WebGPUViewNativeComponent.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebGPUViewNativeComponent.web.d.ts","sourceRoot":"","sources":["../../../src/WebGPUViewNativeComponent.web.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,SAAS,EAAE,KAAK,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;CACtB;AA2CD,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,KAAK,EAAE,WAAW;;;;;;;;;;;;;;;;;;;;;eAsBrD,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wDAO/B"}

package/lib/typescript/src/WebPolyfillGPUModule.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=WebPolyfillGPUModule.d.ts.map

package/lib/typescript/src/WebPolyfillGPUModule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebPolyfillGPUModule.d.ts","sourceRoot":"","sources":["../../../src/WebPolyfillGPUModule.ts"],"names":[],"mappings":""}

package/lib/typescript/src/index.d.ts

@@ -1,6 +1,17 @@
-export * from "./Canvas";
-export * from "./Offscreen";
-export * from "./WebGPUViewNativeComponent";
-export * from "./hooks";
-export { default as WebGPUModule } from "./NativeWebGPUModule";
+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;
+    };
+}
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAGA,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE7D,cAAc,QAAQ,CAAC;AAEvB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,SAAS;QACjB,GAAG,EAAE,GAAG,CAAC;KACV;IAED,IAAI,SAAS,EAAE,SAAS,CAAC;IAEzB,IAAI,QAAQ,EAAE;QACZ,GAAG,EAAE,GAAG,CAAC;QACT,MAAM,EAAE,OAAO,CAAC;QAChB,gBAAgB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,YAAY,CAAC;QACtD,uBAAuB,EAAE,CACvB,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,KACX,eAAe,CAAC;QACrB,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,eAAe,GAAG,WAAW,KAAK,MAAM,CAAC;QACvE,iBAAiB,EAAE,OAAO,iBAAiB,CAAC;KAC7C,CAAC;CACH"}

package/lib/typescript/src/main/index.d.ts

@@ -0,0 +1,6 @@
+export * from "../Canvas";
+export * from "../Offscreen";
+export * from "../WebGPUViewNativeComponent";
+export * from "../hooks";
+export { default as WebGPUModule } from "../NativeWebGPUModule";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/main/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/main/index.tsx"],"names":[],"mappings":"AAGA,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/typescript/src/main/index.web.d.ts

@@ -0,0 +1,6 @@
+import "../WebPolyfillGPUModule";
+export * from "../Canvas";
+export * from "../Offscreen";
+export * from "../WebGPUViewNativeComponent";
+export * from "../hooks";
+//# sourceMappingURL=index.web.d.ts.map

package/lib/typescript/src/main/index.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/main/index.web.tsx"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAEjC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,UAAU,CAAC"}

package/lib/typescript/src/types.d.ts

@@ -0,0 +1,19 @@
+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;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,KAAK,cAAc,GAAG,MAAM,CAAC;AAE7B,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,cAAc,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC/C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,YAAY,EAAE,MAAM,MAAM,CAAC;IAC3B,UAAU,CAAC,WAAW,EAAE,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC;IAC1D,gBAAgB,EAAE,MAAM,YAAY,CAAC;IACrC,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC3C"}

package/lib/typescript/src/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function contextIdToId(contextId: number): string;
+//# sourceMappingURL=utils.d.ts.map

package/lib/typescript/src/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/utils.ts"],"names":[],"mappings":"AACA,wBAAgB,aAAa,CAAC,SAAS,EAAE,MAAM,UAE9C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wgpu",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "React Native WebGPU",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -81,6 +81,7 @@
     "react": "19.1.0",
     "react-native": "0.81.4",
     "react-native-builder-bob": "^0.23.2",
+    "react-native-web": "^0.21.2",
     "rimraf": "^5.0.7",
     "seedrandom": "^3.0.5",
     "teapot": "^1.0.0",

package/src/Canvas.tsx

@@ -1,5 +1,5 @@
 import type { ViewProps } from "react-native";
-import { View } from "react-native";
+import { Platform, View } from "react-native";
 import { forwardRef, useImperativeHandle, useRef, useState } from "react";
 
 import WebGPUNativeView from "./WebGPUViewNativeComponent";
@@ -62,9 +62,16 @@ export const Canvas = forwardRef<
       if (!viewRef.current) {
         throw new Error("[WebGPU] Cannot get context before mount");
       }
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-expect-error
-      const size = viewRef.current.unstable_getBoundingClientRect();
+      let size;
+      if (Platform.OS === "web") {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        size = viewRef.current.getBoundingClientRect();
+      } else {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        size = viewRef.current.unstable_getBoundingClientRect();
+      }
       return RNWebGPU.MakeWebGPUCanvasContext(
         contextId,
         size.width,
@@ -72,6 +79,7 @@ export const Canvas = forwardRef<
       );
     },
   }));
+
   return (
     <View collapsable={false} ref={viewRef} {...props}>
       <WebGPUNativeView

package/src/WebGPUViewNativeComponent.ts

@@ -2,7 +2,7 @@ import { codegenNativeComponent } from "react-native";
 import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
 import type { ViewProps } from "react-native";
 
-interface NativeProps extends ViewProps {
+export interface NativeProps extends ViewProps {
   contextId: Int32;
   transparent: boolean;
 }

package/src/WebGPUViewNativeComponent.web.ts

@@ -0,0 +1,108 @@
+import { useEffect, useRef } from "react";
+import { StyleSheet } from "react-native";
+import { unstable_createElement as unstableCreateElement } from "react-native-web";
+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) {
+  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) {
+  const { contextId, style, transparent, ...rest } = props;
+
+  const canvasElm = useRef<HTMLCanvasElement>();
+
+  useEffect(() => {
+    const onResize = debounce(() => resizeCanvas(canvasElm.current), 100);
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  return unstableCreateElement("canvas", {
+    ...rest,
+    style: [
+      styles.view,
+      styles.flex1,
+      transparent === false && { backgroundColor: "white" }, // Canvas elements are transparent by default on the web
+      style,
+    ],
+    id: contextIdToId(contextId),
+    ref: (ref: HTMLCanvasElement) => {
+      canvasElm.current = ref;
+      if (ref) {
+        resizeCanvas(ref);
+      }
+    },
+  });
+}
+
+const styles = StyleSheet.create({
+  flex1: {
+    flex: 1,
+  },
+  view: {
+    alignItems: "stretch",
+    backgroundColor: "transparent",
+    // @ts-expect-error - not a valid RN style, but it's valid for web
+    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

@@ -0,0 +1,53 @@
+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/index.tsx

@@ -1,197 +1,26 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import WebGPUNativeModule from "./NativeWebGPUModule";
-
-export * from "./Canvas";
-export * from "./Offscreen";
-export * from "./WebGPUViewNativeComponent";
-export * from "./hooks";
-export { default as WebGPUModule } from "./NativeWebGPUModule";
-
-const GPU: any = {};
-GPU[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPU";
-};
-
-const GPUAdapter: any = {};
-GPUAdapter[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUAdapter";
-};
-
-const GPUAdapterInfo: any = {};
-GPUAdapterInfo[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUAdapterInfo";
-};
-
-const GPUBindGroup: any = {};
-GPUBindGroup[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUBindGroup";
-};
-
-const GPUBindGroupLayout: any = {};
-GPUBindGroupLayout[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUBindGroupLayout";
-};
-
-const GPUBuffer: any = {};
-GPUBuffer[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUBuffer";
-};
-
-const GPUCanvasContext: any = {};
-GPUCanvasContext[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUCanvasContext";
-};
-
-const GPUCommandBuffer: any = {};
-GPUCommandBuffer[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUCommandBuffer";
-};
-
-const GPUCommandEncoder: any = {};
-GPUCommandEncoder[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUCommandEncoder";
-};
-
-const GPUCompilationInfo: any = {};
-GPUCompilationInfo[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUCompilationInfo";
-};
-
-const GPUCompilationMessage: any = {};
-GPUCompilationMessage[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUCompilationMessage";
-};
-
-const GPUComputePassEncoder: any = {};
-GPUComputePassEncoder[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUComputePassEncoder";
-};
-
-const GPUComputePipeline: any = {};
-GPUComputePipeline[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUComputePipeline";
-};
-
-const GPUDevice: any = {};
-GPUDevice[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUDevice";
-};
-
-const GPUDeviceLostInfo: any = {};
-GPUDeviceLostInfo[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUDeviceLostInfo";
-};
-
-const GPUError: any = {};
-GPUError[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUError";
-};
-
-const GPUExternalTexture: any = {};
-GPUExternalTexture[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUExternalTexture";
-};
-
-const GPUPipelineLayout: any = {};
-GPUPipelineLayout[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUPipelineLayout";
-};
-
-const GPUQuerySet: any = {};
-GPUQuerySet[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUQuerySet";
-};
-
-const GPUQueue: any = {};
-GPUQueue[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUQueue";
-};
-
-const GPURenderBundle: any = {};
-GPURenderBundle[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPURenderBundle";
-};
-
-const GPURenderBundleEncoder: any = {};
-GPURenderBundleEncoder[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPURenderBundleEncoder";
-};
-
-const GPURenderPassEncoder: any = {};
-GPURenderPassEncoder[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPURenderPassEncoder";
-};
-
-const GPURenderPipeline: any = {};
-GPURenderPipeline[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPURenderPipeline";
-};
-
-const GPUSampler: any = {};
-GPUSampler[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUSampler";
-};
-
-const GPUShaderModule: any = {};
-GPUShaderModule[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUShaderModule";
-};
-
-const GPUTexture: any = {};
-GPUTexture[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUTexture";
-};
-
-const GPUTextureView: any = {};
-GPUTextureView[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUTextureView";
-};
-
-global.GPU = GPU;
-global.GPUAdapter = GPUAdapter;
-global.GPUAdapterInfo = GPUAdapterInfo;
-global.GPUBindGroup = GPUBindGroup;
-global.GPUBindGroupLayout = GPUBindGroupLayout;
-global.GPUBuffer = GPUBuffer;
-global.GPUCanvasContext = GPUCanvasContext;
-global.GPUCommandBuffer = GPUCommandBuffer;
-global.GPUCommandEncoder = GPUCommandEncoder;
-global.GPUCompilationInfo = GPUCompilationInfo;
-global.GPUCompilationMessage = GPUCompilationMessage;
-global.GPUComputePassEncoder = GPUComputePassEncoder;
-global.GPUComputePipeline = GPUComputePipeline;
-global.GPUDevice = GPUDevice;
-global.GPUDeviceLostInfo = GPUDeviceLostInfo;
-global.GPUError = GPUError;
-global.GPUExternalTexture = GPUExternalTexture;
-global.GPUPipelineLayout = GPUPipelineLayout;
-global.GPUQuerySet = GPUQuerySet;
-global.GPUQueue = GPUQueue;
-global.GPURenderBundle = GPURenderBundle;
-global.GPURenderBundleEncoder = GPURenderBundleEncoder;
-global.GPURenderPassEncoder = GPURenderPassEncoder;
-global.GPURenderPipeline = GPURenderPipeline;
-global.GPUSampler = GPUSampler;
-global.GPUShaderModule = GPUShaderModule;
-global.GPUTexture = GPUTexture;
-global.GPUTextureView = GPUTextureView;
-
-WebGPUNativeModule.install();
-
-if (!navigator) {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
-  navigator = {};
+/// <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;
+  };
 }
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-navigator.gpu = RNWebGPU.gpu;
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-navigator.userAgent = "react-native";
-
-global.createImageBitmap =
-  global.createImageBitmap ??
-  ((...params: Parameters<typeof createImageBitmap>) =>
-    new Promise((resolve) => resolve(RNWebGPU.createImageBitmap(...params))));