fix(🌄): implement ImageBitmap.close (#354)

Author: wcandillon

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-native-webgpu",
+  "name": "react-native-webgpu-monorepo",
   "private": true,
   "workspaces": [
     "packages/*",

packages/webgpu/cpp/rnwgpu/api/ImageBitmap.h

@@ -26,9 +26,17 @@ class ImageBitmap : public NativeObject<ImageBitmap> {
 
   size_t getSize() { return _imageData.data.size(); }
 
+  void close() {
+    _imageData.data.clear();
+    _imageData.data.shrink_to_fit();
+    _imageData.width = 0;
+    _imageData.height = 0;
+  }
+
   static void definePrototype(jsi::Runtime &runtime, jsi::Object &prototype) {
     installGetter(runtime, prototype, "width", &ImageBitmap::getWidth);
     installGetter(runtime, prototype, "height", &ImageBitmap::getHeight);
+    installMethod(runtime, prototype, "close", &ImageBitmap::close);
   }
 
   size_t getMemoryPressure() override { return getSize(); }

packages/webgpu/src/__tests__/ImageData.spec.ts

@@ -66,6 +66,61 @@ describe("Image Bitmap", () => {
     expect(result.width).toBe(expected.width);
     expect(result.height).toBe(expected.height);
   });
+  itSkipsOnWeb("ImageBitmap.close() zeroes width and height", async () => {
+    const pngBytes = Array.from(
+      fs.readFileSync(path.join(__dirname, "./assets/Di-3d.png")),
+    );
+    const expected = decodeImage(path.join(__dirname, "./assets/Di-3d.png"));
+    const result = await client.eval(
+      ({ pngData }) => {
+        const bytes = new Uint8Array(pngData);
+        return createImageBitmap(bytes.buffer).then((bmp) => {
+          const before = { width: bmp.width, height: bmp.height };
+          bmp.close();
+          const after = { width: bmp.width, height: bmp.height };
+          return { before, after };
+        });
+      },
+      { pngData: pngBytes },
+    );
+    expect(result.before.width).toBe(expected.width);
+    expect(result.before.height).toBe(expected.height);
+    expect(result.after.width).toBe(0);
+    expect(result.after.height).toBe(0);
+  });
+  itSkipsOnWeb("ImageBitmap.close() is idempotent", async () => {
+    const pngBytes = Array.from(
+      fs.readFileSync(path.join(__dirname, "./assets/Di-3d.png")),
+    );
+    const result = await client.eval(
+      ({ pngData }) => {
+        const bytes = new Uint8Array(pngData);
+        return createImageBitmap(bytes.buffer).then((bmp) => {
+          bmp.close();
+          bmp.close();
+          return { width: bmp.width, height: bmp.height };
+        });
+      },
+      { pngData: pngBytes },
+    );
+    expect(result.width).toBe(0);
+    expect(result.height).toBe(0);
+  });
+  itSkipsOnWeb("ImageBitmap exposes close as a function", async () => {
+    const pngBytes = Array.from(
+      fs.readFileSync(path.join(__dirname, "./assets/Di-3d.png")),
+    );
+    const result = await client.eval(
+      ({ pngData }) => {
+        const bytes = new Uint8Array(pngData);
+        return createImageBitmap(bytes.buffer).then((bmp) => {
+          return typeof bmp.close;
+        });
+      },
+      { pngData: pngBytes },
+    );
+    expect(result).toBe("function");
+  });
   itSkipsOnWeb(
     "createImageBitmap from Uint8Array subarray (byteOffset/byteLength)",
     async () => {

yarn.lock

@@ -3724,9 +3724,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-three/fiber@patch:@react-three/fiber@npm%3A9.4.0#./.yarn/patches/@react-three-fiber-npm-9.4.0-77fe8ee9bd.patch::locator=react-native-webgpu%40workspace%3A.":
+"@react-three/fiber@patch:@react-three/fiber@npm%3A9.4.0#./.yarn/patches/@react-three-fiber-npm-9.4.0-77fe8ee9bd.patch::locator=react-native-webgpu-monorepo%40workspace%3A.":
   version: 9.4.0
-  resolution: "@react-three/fiber@patch:@react-three/fiber@npm%3A9.4.0#./.yarn/patches/@react-three-fiber-npm-9.4.0-77fe8ee9bd.patch::version=9.4.0&hash=7de131&locator=react-native-webgpu%40workspace%3A."
+  resolution: "@react-three/fiber@patch:@react-three/fiber@npm%3A9.4.0#./.yarn/patches/@react-three-fiber-npm-9.4.0-77fe8ee9bd.patch::version=9.4.0&hash=7de131&locator=react-native-webgpu-monorepo%40workspace%3A."
   dependencies:
     "@babel/runtime": ^7.17.8
     "@types/react-reconciler": ^0.32.0
@@ -13039,9 +13039,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-webgpu@workspace:.":
+"react-native-webgpu-monorepo@workspace:.":
   version: 0.0.0-use.local
-  resolution: "react-native-webgpu@workspace:."
+  resolution: "react-native-webgpu-monorepo@workspace:."
   dependencies:
     "@types/react-native-web": ^0.19.2
     turbo: ^2.1.0