🔧

Author: wcandillon

apps/example/src/Reanimated/Reanimated.tsx

@@ -1,37 +1,15 @@
 import React, { useEffect, useRef } from "react";
 import { StyleSheet, View } from "react-native";
 import type { CanvasRef, RNCanvasContext } from "react-native-wgpu";
-import { Canvas } from "react-native-wgpu";
+import { Canvas, registerWebGPUSerializable } from "react-native-wgpu";
 import type { SharedValue } from "react-native-reanimated";
 import { runOnUI, useSharedValue } from "react-native-reanimated";
-import { registerCustomSerializable } from "react-native-worklets";
 
 import { redFragWGSL, triangleVertWGSL } from "../Triangle/triangle";
 
-// Declare global WebGPU worklet helper functions (installed on main runtime)
-declare function __webgpuIsWebGPUObject(obj: unknown): boolean;
-declare function __webgpuBox(
-  obj: object,
-): { unbox: () => object; __boxedWebGPU: true };
-
 // Register WebGPU objects for Worklets serialization at module load time
 // This allows GPUDevice, GPUCanvasContext, etc. to be passed to worklets
-// The unbox() method automatically installs the prototype on the UI runtime if needed
-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();
-  },
-});
+registerWebGPUSerializable();
 
 const webGPUDemo = (
   runAnimation: SharedValue<boolean>,

packages/webgpu/package.json

@@ -57,6 +57,8 @@
   },
   "devDependencies": {
     "@types/jest": "^29.5.12",
+    "react-native-reanimated": "^3.16.0",
+    "react-native-worklets": "^1.0.0",
     "@types/lodash": "^4.17.5",
     "@types/node": "^20.14.7",
     "@types/pixelmatch": "5.2.4",
@@ -95,7 +97,17 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-reanimated": ">=3.16.0",
+    "react-native-worklets": ">=1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-reanimated": {
+      "optional": true
+    },
+    "react-native-worklets": {
+      "optional": true
+    }
   },
   "react-native-builder-bob": {
     "source": "src",

packages/webgpu/src/external/ModuleProxy.ts

@@ -0,0 +1,30 @@
+// 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!`);
+  }
+}

packages/webgpu/src/external/index.ts

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

packages/webgpu/src/external/reanimated/ReanimatedProxy.ts

@@ -0,0 +1,19 @@
+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;

packages/webgpu/src/external/reanimated/WorkletsProxy.ts

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

packages/webgpu/src/external/reanimated/index.ts

@@ -0,0 +1,3 @@
+export { registerWebGPUSerializable } from "./registerWebGPUSerializable";
+export { default as Reanimated } from "./ReanimatedProxy";
+export { default as Worklets } from "./WorkletsProxy";

packages/webgpu/src/external/reanimated/registerWebGPUSerializable.ts

@@ -0,0 +1,39 @@
+import Worklets from "./WorkletsProxy";
+
+// Declare global WebGPU worklet helper functions (installed on main runtime)
+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.
+ * The unbox() method automatically installs the prototype on the UI runtime if needed.
+ *
+ * Call this once before using WebGPU objects in worklets.
+ */
+export const registerWebGPUSerializable = () => {
+  if (isRegistered) {
+    return;
+  }
+  isRegistered = true;
+
+  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();
+    },
+  });
+};

packages/webgpu/src/index.tsx

@@ -3,6 +3,7 @@
 import type { NativeCanvas, RNCanvasContext } from "./types";
 
 export * from "./main";
+export * from "./external";
 
 declare global {
   interface Navigator {