fix(📀): accept shorthand syntax for buffer bindings

Author: wcandillon

apps/example/src/StorageBufferVertices/StorageBufferVertices.tsx

@@ -147,9 +147,9 @@ export function StorageBufferVertices() {
       label: "bind group for objects",
       layout: pipeline.getBindGroupLayout(0),
       entries: [
-        { binding: 0, resource: { buffer: staticStorageBuffer } },
-        { binding: 1, resource: { buffer: changingStorageBuffer } },
-        { binding: 2, resource: { buffer: vertexStorageBuffer } },
+        { binding: 0, resource: staticStorageBuffer },
+        { binding: 1, resource: changingStorageBuffer },
+        { binding: 2, resource: vertexStorageBuffer },
       ],
     });
 

packages/webgpu/cpp/rnwgpu/api/descriptors/GPUBindGroupEntry.h

@@ -46,6 +46,12 @@ template <> struct JSIConverter<std::shared_ptr<rnwgpu::GPUBindGroupEntry>> {
           } else if (obj.hasNativeState<rnwgpu::GPUTextureView>(runtime)) {
             result->textureView =
                 obj.getNativeState<rnwgpu::GPUTextureView>(runtime);
+          } else if (obj.hasNativeState<rnwgpu::GPUBuffer>(runtime)) {
+            // Support passing GPUBuffer directly as resource (auto-wrap in
+            // GPUBufferBinding)
+            auto binding = std::make_shared<rnwgpu::GPUBufferBinding>();
+            binding->buffer = obj.getNativeState<rnwgpu::GPUBuffer>(runtime);
+            result->buffer = binding;
           } else {
             result->buffer = JSIConverter<
                 std::shared_ptr<rnwgpu::GPUBufferBinding>>::fromJSI(runtime,

packages/webgpu/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wgpu",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "React Native WebGPU",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

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

@@ -1,5 +1,74 @@
 import { client } from "./setup";
 
+describe("createBindGroup", () => {
+  it("should accept GPUBuffer directly as resource (without wrapper)", async () => {
+    const result = await client.eval(({ device }) => {
+      // Create a simple compute shader that uses a storage buffer
+      const module = device.createShaderModule({
+        code: `
+          @group(0) @binding(0) var<storage, read> data: array<f32>;
+          @compute @workgroup_size(1)
+          fn main() {
+            let _ = data[0];
+          }
+        `,
+      });
+
+      const pipeline = device.createComputePipeline({
+        layout: "auto",
+        compute: { module },
+      });
+
+      const buffer = device.createBuffer({
+        size: 16,
+        usage: GPUBufferUsage.STORAGE,
+      });
+
+      // Pass GPUBuffer directly as resource (without { buffer: ... } wrapper)
+      const bindGroup = device.createBindGroup({
+        layout: pipeline.getBindGroupLayout(0),
+        entries: [{ binding: 0, resource: buffer }],
+      });
+
+      return bindGroup !== null && bindGroup !== undefined;
+    });
+    expect(result).toBe(true);
+  });
+
+  it("should accept GPUBufferBinding object as resource (with wrapper)", async () => {
+    const result = await client.eval(({ device }) => {
+      const module = device.createShaderModule({
+        code: `
+          @group(0) @binding(0) var<storage, read> data: array<f32>;
+          @compute @workgroup_size(1)
+          fn main() {
+            let _ = data[0];
+          }
+        `,
+      });
+
+      const pipeline = device.createComputePipeline({
+        layout: "auto",
+        compute: { module },
+      });
+
+      const buffer = device.createBuffer({
+        size: 16,
+        usage: GPUBufferUsage.STORAGE,
+      });
+
+      // Pass GPUBufferBinding object as resource (with { buffer: ... } wrapper)
+      const bindGroup = device.createBindGroup({
+        layout: pipeline.getBindGroupLayout(0),
+        entries: [{ binding: 0, resource: { buffer } }],
+      });
+
+      return bindGroup !== null && bindGroup !== undefined;
+    });
+    expect(result).toBe(true);
+  });
+});
+
 describe("Device", () => {
   it("request device (1)", async () => {
     const result = await client.eval(({ gpu }) =>